Agenda for class 2, eCommerce

Last updated: 9/8/03
Link back to course Welcome

Agenda for class 2
9/9/00
(eCommerce only)

Starting up
1. Computers on
2. Start a web Browser, go to course web site and sign in (every week from now on)
3. Photos for class photo album
Review of Syllabus
Computer Conferencing (already covered last week)
1. Getting set (and staying set) for the course Computer Conference - the name is Internet (Bowen) Fall 03
  1. If you have not logged on to the computer conference before, let me know, and for now you will have to look on with someone who has done this. But do that initial login as soon as possible, tonight if possible, and let me know that you have done it (use email after tonight)
  2. If you have used the IS conferencing system in an earlier class (probably with Lisa Maruca, Julie Klein, Jerome Reide or Marsha Richmond), the User Name and Password from that class are still valid. However, I still have to add you to the computer conference for this course.
  3. If you forget your User Name and/or Password, I can get them for you.
2. In the past, I have been very lenient about messages for this course posted in other conferences (e.g. The General Conference). When you are composing a message, the conference that it will be posted to is listed at the top of the message composition screen. This semester, messages posted to other conferences will not count towards the assignments. Be careful about this!!!
3. There is a more complete guide to the conferencing system, with pictures, available online by following the link on the course web site, "Using the computer conferencing system", just below the link to the conference itself

More on the Internet

Last week we went over how the Internet works
1. Each connected computer has a numerical IP address, and data is communicated in packets from one IP to another.
2. Domain Name system translates text names to numerical, user only needs to work with text name (Domain Name)
3. Applications use the Internet, Client-Server is the most common
  1. Server sits and waits for a request, finds and sends the requested file, returns to sit and wait for next request
  2. Client sends request, displays requested file when it is received
4. You can also put the IP address directly in to your Browser. Go to the IS home page, "www.is.wayne.edu" (without the quotes). Then go to 141.217.12.23. Same place, right?
5. There are actually many computers involved in seeing that the packets get sent from the source to the destination - Gateways that put the information onto the Internet, and Routers that send it in the right direction at points along the route. To see all of this working:
  1. Click Start > Ron, type "command" (without the quotes) and tap <Enter>. The black-and-white DOS screen should pop up.
  2. Type "ipconfig" (without the quotes) and tap <Enter>. You will see your computer's IP address (and also the Internet address of your gateway).
  3. Type "nslookup^www.is.wayne.edu" where ^ is a space (tap the spacebar once) and also do not type the quotes. See the IP address of the IS server. This is very similar to what your Browser does silently when you type in the Domain Name.
  4. Type "tracert^www.is.wayne.edu" where ^ is a space (tap the spacebar once) and also do not type the quotes. See the gateways and routers that are involved in sending packets between here and there.
  5. Type "ping^www.is.wayne.edu" where ^ is a space (tap the spacebar once) and also do not type the quotes. This is the Internet working at its most basic level - one packet transmitted from one IP to another, with an "echo." If you are having trouble with your Internet connection, this is a very good basic test to try.
eCommerce overview. This is very much a "how to" course.
1. What is eCommerce?
  1. Business used computer networks and the Internet long before the web, but for business-to-business communications such as transferring money between banks, and manufacturers communicating with wholesalers. For a long time, this was eCommerce.
  2. This is still going on, but today we more often mean direct selling to consumers or other businesses. Taking orders using credit cards, although some customers will be. Provide an online catalog, let consumers choose products and place orders. That is the minium. But additional services such as order confirmation and tracking, and others that you can invent, are where the competitive edge comes -- the edge with respect to your online and "IRL" competition.
  3. B2B Vs B2C
2. Why be interested?
  1. A small business can be set up on the web and run from a personal computer very inexpensively in your spare time. In a few days it will start showing up on web searches. If you do it right, cusotmers will not know it's just you. If the business grows, it can be scaled up and you can quit your day job.
  2. eCommerce is growing rapidly, along with the web itself. The web went public in 1993. By October there were 500 web servers. In January 1996 there were 75,000 servers; by December 1996, 205,000. In 1993, there was no eCommerce, in 1996 the volume was estiamted at $200,000, in 2000 one estimate is that there will be $230 billion. Today 10% of households in the U.S. have Internet connections, estimated to rise to 33% in 2000. Growth this rapid has rarely if ever been seen before.
  3. eCommerce is not local, but global. Put up your business and sell around the world. The U.S. is leading the market, but that just means the growth potential is higher abroad.
  4. An eCommerce business can be largely automated, but still provide superior customer service. If you do it right, you will make buying from you so easy that you will lock your customers in.
3. So of course there are downsides.
  1. It is incredibly competitive. You are not just competing in your neighborhood, but the entire world is just "a mouse click away", a phrase you will no doubt read again and again in this course. Are you going to become filthy rich? Unlikely (but possible). Can you make a good living? Pay attention to what is going on around you, find and exploit a niche, and don't become complacent. In today's society, it's like that everywhere, so why not start your own business?
  2. Many potential customers are not connected yet
  3. Many who are connected have concerns about ordering over the Internet
    1. Is it too advanced or too technical for them
    2. Is their credit card information secure
    So, make this a business opportunity - make it easy, and take your customer's security seriously and ease their concerns. Put your catalog online, allow online ordering, but maybe list an 800 number also
4. Other uses of "web interactivity"
  1. Soliciting donations for a political campaign (Howard Dean)
  2. Recruiting volunteers for a service agency
  3. Online courses and training
  4. On-line math tutor
  5. Online tax service
  6. Club membership application
  7. College registration
  8. Conferencing / chat system
  9. You name it...
5. What is needed? The seven components of eCommerce, from McComb, a standard reference. Each of these components can be obtained in many different ways, but in this course you will use one way -- not necessarily the best, but the one we have. "The best" depends upon your skills and interest and your precise business, in any case. Some major variations are: purchase (own), lease, or pay per transaction? The components we will use here are shown in parentheses at the end of each item.
  1. Web Server, or access to one. (The IS web server)
  2. Programming capability. Some people regard producing static web HTML pages to be programming, but here there is something beyond that. To process user input from text boxes etc., you need an active system to store and act on the user's input, and to respond to that input. (For static HTML, MS FrontPage as a WYSIYG HTML editor and NotePad or WordPad for direct creation. For interactivity, the ASP system -- Active Server Pages, requiring NotePad or WordPad, or Microsoft Visual InterDev for a more WYSIWYG tool. No matter how easy ASP may be, or how I try to sugar-coat it, this is computer programming.)
  3. Email management (ability to send email, perhaps automatically, and receive it. (For sending automatic email, ASP)
  4. Access Restriction. If you are selling content, you need some way to restrict access by people who haven't paid yet. (Several possibilities here: "blind URLs" with no links to them, you email your paid-up customers the URL. Also, access can be allowed only with a User Name and Password.)
  5. Access Logs. All web servers keep logs of hits. This is vital marketing information showing what customers and potential customers are interested in, where they are coming from, how many there are and whether or not they can use your web site. These days, you have about thirty seconds to provide a new user with what they are looking for. Then it's click and goodbye! (You will have access to the server logs for your web site. You will be using Microsoft Access database to analyze them.)
  6. Secure transactions. You must be able to demonstrate that you take customers' security seriously. The attitude that, "I don't care if they are really secure just as long as they think they are" is a marketing disaster waiting to happen. In practice, today this means encrypted (encoded) transmissions for personal information such as addresses, telephone numbers and credit card numbers. (I am currently trying to get this set up on the CLL web server. There is a chance it may not happen this semester. If it does happen, its use will just be to provide links using shttp -- Secure HyperText Transport Protocol -- instead of http.)
  7. Credit Card Validation. Don't ship until you know the card is good! How do you get paid if the customer purchases by credit card? (I haven't really sorted this one out yet, and I may not. But there are services that will do this for you on a per-transaction basis, using email.)
    
    Three additional from Bowen:
  8. Ability to create static web pages (HTML)
  9. Ability to create web graphics (GIF or JPEG/JPG file formats). Strictly speaking, this is not required, but cool graphics are a part of the web culture, and also of selling goods.
  10. Ability to upload files to the web server
  These components will make the system function. Seybold has eight Critical Factors for Success, once the system is functioning at the basic level of McComb's components.

HyperText Markup Language - HTML

HTML is "the language of the web", the coding used to make web pages. Web pages have the extension html or htm (the latter on the IS web server that you will be using in this course). There is a special filename defined on each web server, the default file name. On most web servers the default file name is index.htm(l) and sometimes default.htm(l), but here the default file name is welcome.htm. If the user specifies a URL without a filename at the end (the giveaway on this is that there is no extension), then the server fetches the default filename. The ability to do this makes life a little easier for the user. So, the home page for each web site, including your eCommerce web site, should be default.htm(l).
Web pages have at least two types of content (graphics, audio, video, scripts etc. are in addition)
1. Plain text, which is what appears on the screen
2. HTML Tags, which do not appear on the screen but instead format the text and link to other content, such as another web page, a graphic, audio, a script (program), a comment, etc. HTML tags are enclosed in angle brackets <>. If you want to include angle brackets in your HTML file as regular text, there are special codes.
3. If you see a web page that you like, look at its HTML to see how it was done. Learn from everybody!
  1. In Netscape Navigator, pick the menu item View / Document Source (or for "Frames," where parts of the web page move independently, click in the area you want to examine and choose View / Frame Source)
  2. In MS Internet Explorer choose the menu item View / Source
  3. To analyze a script, you have to learn the scripting language, such as JavaScript, Java, etc. We will do a small amount of JavaScript later in the semester.

There are several ways to generate web pages for your eCommerce web site:

Use a simple text editor such as NotePad or WordPad in Windows (under Start / Programs / Accessories). Type in the text and the tags by hand. Example (note that HTML tags themselves are case-insensitive, but that the plain text is not.):

HTML Source	Browser View
<HTML> <HEAD> <TITLE> Test Web Page </TITLE> </HTML> <BODY BGCOLOR="#FFFFFF"> <H1>This is my test web page.</H1> </BODY> </HTML>	Test Web Page (in title bar) This is my test web page.

Note in #1 above that many HTML tags come in pairs with <TAG> and then </TAG>. The effect of the TAG applies until /TAG cancels it. These are sometimes called "containers". If you are applying several tags at the same time you must close the second tag before the first -- tags cannot be overlapping. Example: <BIG><EM>Some text.</EM></BIG>, NOT <BIG><EM>Some text.</BIG></EM>
Use a tag editor such as HotMetalPro that still shows you the tags, but "knows" the tags so that you can click on them to insert them, and keeps track of things like having a /H1 to balance an H1.
Use a WYSIWYG HTML editor such as MS FrontPage that makes HTML like word processing, but which sometimes needs tweaking. Netscape Composer and MS Word can also create and edit HTML, if the HTML features were installed, but are not as complete as FrontPage editor. NOTE: Elizabeth Castro, in the HTML textbook says that the HTML code produced by MS Word is terrible, and I fully agree. There are many proprietary MS tags, which means (a) much longer downloading times, and (b) Browser dependence (what you see depends upon which Browser you are using). Browser independence is desirable, Browser dependence is a pain for the web developer to deal with.
Use a "complete solution" such as Microsoft FrontPage (full version)
Hire someone to write your pages. (But on the other hand, you may want your eCommerce business to be the creation of web sites.)
Since HTML is a public standard, not a proprietary format, all of these tools will interoperate. Here we will start with Notepad for static web pages, and then move to Netscape Composer for most work, and use Notepad for ASP.

As a web designer, you have to accept a loss of control over the graphical appearance of your web pages, compared to the control you may be used to, for example, in a word processor.
1. Users can change your fonts, font sizes and colors from within the browser (Edit / Preferences / General in Netscape Navigator, for example)
2. Users control the pixel resolution of their monitors, for example from the Display section of Control Panels, reached by Start / Settings. Many Windows monitors are set for 640 (horizontal) by 480 (vertical) pixels, but values up to 1280 by 960 are also common. Web screen elements are written by the pixel, so a picture that files the screen at 640 by 480 occupies only one quarter of the screen at 1280 by 960. Similar things happen to text.
3. Users can turn off graphics if they want to see the text even faster. Large graphics with many different colors mean large files and slow download times, so use them at your peril.
  1. Here is where a feature in your browser designed to speed up loading times, can work against you as a web designer. Your browser keeps copies of recent web pages you have viewed, both in RAM and on your hard drive. These copy spaces are called "cache". When you request a web page from a web server, your browser request first information about the page. If it is not newer than the copy in the cache, then the cache copy is used for faster response. As a user, great. As a designer, this can give you an overly optimistic view of how fast your web page will load. You can override the cache and get a true of idea of your user's experience by
  2. Netscape Navigator: hold down <Shift> and click on the Reload button. NOTE: Refresh just reloads from the cache.
  3. MS Internet Explorer: click on the Refresh button.
4. You can specify an exact font to use, but if the user does not have a font by that name on his/her computer, the default font is used. Newer versions of HTML support your listing alternative fonts if the one you want is not one the User's computer. For example, the Web default font Times Roman is called Times New Roman in Windows, and can also be called Times and Roman.
5. Different browser versions support different versions of HTML. The last major revision that is fully supported was HTML 4.0, and that is now fully supported by the 4.0 versions and higher for Netscape Navigator and MS Internet Explorer. Most people seem to have upgraded to these versions or higher by now. XML is not fully supported by any Browser. A properly designed browser, as these are, will ignore tags that it cannot deal with. If you use XML features, which do give you more control over the screen, what your users see can be quite variable at this time. In this course, I will assume HTML 3.2. Castro notes that many of the HTML 3.2 tags are "deprecated" in HTML 4.0, but still supported. My belief is that there is so much HTML 3.2 out there that it will always be supported. Some advanced web surfers may want you to use all of the latest bells and whistles; if you have a site for techies, be warned!. At any rate, all of this is another source of loss of control.
Experimenting with HTML. A very fast way to test your web pages is to use an editing tool and a Browser, and switch back and forth. Here is how:
1. Make sure your floppy diskette is in the A: drive.
2. Start a web page in notepad and save it to your floppy drive (extension = .thm)
3. Start a web Browser and use the menu item File > Open file to open your file
4. Make changes in Notepad and save them
5. Refresh the page in your web Browser to see the changes.

The basic tags. NOTE: The tags are capitalized below, and this is very common, but lower case is also common, and is required in HTML 4.0 and XML.
1. <HTML> starts and HTML file and </HTML> ends it, appears nowhere else within the file
2. <HEAD> starts the first or "head" section of an HTML document, which is not seen by the user, but which contains "meta information" -- information about the information in the file. </HEAD> ends the head. The head can be empty, but you should always put in a TITLE (see below)
  1. <TITLE> and </TITLE> contain the title of the HTML document. The title appears on the title bar of the browser window. Without a title, you are not sure what will go up there. Always include a title. In the example in C.1. above, the title is "Test Web Page", and would appear on the title bar.
3. <BODY> starts the main, second, last, or "body" section of an HTML file, which contains all of the content that the user sees. This section is ended by </BODY>
  1. A plain body tag results in a default background color, usually "browser grey". For a white background, use the attribute BGCOLOR="#FFFFFF" for <BODY BGCOLOR="#FFFFFF">. The Fs come in three pairs. Each pair is 255 in the hexadecimal (base 16) number system and represents the intensity of color for RGB. FFFFFF means the highest intensity in Red, Green and Blue, which results in white. You could also use the attribute BGCOLOR="white".
  2. To use an image for a background, use the attribute BACKGROUND="filename" where filename is the name of the image file (gif or jpeg/jpg), including any directory information if the image file is not in the same directory as the HTML file. The image will "tile" or fill up the background. Beware of large single images for backgrounds.
4. Character formatting tags
  1. <H1> and </H1> through <H6> and </H6>. Heading tags from big to small. Also insert space above and below, for emphasis.
  2. <BIG> and </BIG> bump enclosed text up one size. Can be repeated for a double bump, etc.
  3. <SMALL> and </SMALL> bump text down one size. Can be repeated. Also cancels <BIG>.
  4. <EM> and </EM> makes enclosed text emphasized (in practice, italics).
  5. <U> and </U> makes enclosed text underlined.
  6. <B> and </B> makes enclosed text bold-faced
  7. <FONT COLOR="color"> and </FONT> makes enclosed text the specified color. Supported colors are listed on the back inside cover of Castro. RED, BLUE, GREEN, and TEAL are dark colors that contrast well with most background colors.
    1. NOTE 1: COLOR="color" is known as an attribute. Many tags have several possible attributes. The / tag, however, never lists the attributes.
    2. NOTE 2: Another possible attribute for the FONT tag is FACE="list" where "list" is a comma-separated list of fonts to use, starting with the first choice, such as FACE="Arial, Courier"
5. Paragraph formatting tags
  1. <P> and </P> enclose a paragraph, skipping a line before the next paragraph. Many web pages ignore the </P> and use only <P> to start a new paragraph with a line skip, but this is not recommended and may not work with future browser versions (but probably will because it is so common). Physical line breaks will be ignored by a browser, except in the presence of the <PRE> tag. For paragraph alignment (left, center and right) include the ALIGN="alignment", where alignment is the desired alignment (right, center or left). "Right" is the default and is never needed. There is no "justify" to align on both margins.
  2. <BR> starts a new line, without starting a new paragraph, so there is no skipped line. There is no </BR> tag.
  3. <UL> and </UL> enclose an unordered (bulleted) list, but require the use of the <LI> tag below. Use bulleted lists! If users get impatient, they will skip to the end of a paragraph, and so perhaps miss a critical feature of your product. But in a bulleted list they will usually read at least the beginning of each bulleted item.
    1. <LI> and </LI> (list item) enclose each item in a bulleted list. Most browsers will work without the </LI>.
    2. <BR> can be used to start a new line within a list item without getting a new bullet.
    3. A <UL> within a <UL> indents a second level and generally uses a different bullet style. Can be repeated for multiple levels.
  4. <OL> and </OL> enclose an ordered (numbered) list, but require the <LI> tag as well. Can be indented as in the bulleted list. The default is numbering each item (1, 2, 3, 4 etc.) successively. To produce an outline like this, include the following WITHIN the OL tag, but not the /OL tag
    1. TYPE="I" for capitalized roman numerals in the correct order
    2. TYPE="A" for capital letters in alphabetical order
    3. TYPE="a" for lower case letters in alphabetical order
    4. TYPE="i" for lower case roman numerals in the correct order
    5. For ordinary numbers, again, just use the <OL> tag by itself.
6. Hypertext elements
  1. <IMG SRC="filename"> inserts the graphics image in filename into the web page at the location of the tag. E.g., <IMG SRC="david.jpg"> inserts my picture file. There is no </IMG> tag. Note that web images do not become part of the HTML file, but are only referenced by the IMG tag. When we get to uploading files to the web server, the HTML page and the image file must be uploaded separately. This is different than MS Word, in which the image is usually embedded or included directly in the Word document file. If the image cannot be found, a "broken image" icon is used instead (this image is Browser dependent). I like to keep image files in the same folder as the HTML file. This has to do with relative Vs absolute links and URLs (see below).
  2. <A HREF="URL">Some text</A> makes Some text into a link (underlined and blue) which will lead to URL. If the URL is to another web page in the same folder (i.e. in the same web site), only the file name is required. If the file is in a subfolder, include the folder name and a forward slash (/) before the file name. If you have defined bookmarks in the file (see below), you can link to a bookmark by using #name in place of the URL, where name is the bookmark name. If you are linking to another web site, include the full URL including the http://
    1. Define named bookmarks within a file, that you can link to, by using <A NAME=#name">, where name is the name of the bookmark.
7. More
  1. HTML 4.0 does not support
    1. Justification -- aligning on both borders, but left adjust, right adjust and centering are supported.
    2. Tabs - these will show up, if at all, as single spaces.
  2. I do not recommend normally using the Heading 1 through Heading 6 formats, since the Bigger and Smaller items accomplish the same font sizes with greater flexibility. The Heading formats do, however, include space above and below, and indent levels, so you may find these useful in some situations.
  3. Lists. Lists are good in web pages. If a user sees a long list of information, s/he will often skip to the end of a paragraph. A list will alert the user that there is a new type of information, so they will often skip within an item, but not skip over list items. HTML provides for two types of lists -- unordered (bulleted) and ordered (numbered).
  4. Tables. In ordinary documents, tables are used to hold information or data with a repeated form, such as the catalog number, price, and weight of similar items. But you may find yourself using tables even if you do not have such information. This is because, aside from left, center or right alignment, a table is the only method for placing elements (text or graphics) on the page. The raw HTML tags for tables are complicated, but Netscape Composer makes tables easier.
    1. Graphics and lists can be placed inside table cells
  5. Links / URLs. Links (OK, and color. And graphics.) are what make web documents different from the print documents you create. Links come in two varieties -- relative and absolute. But first, the anatomy or a URL (Universal Resource Locator, what you type into the Location or Address window of your browser.
    Example:
    http://www.is.wayne.edu/drbowen/inetf03/welcome.htm
    1. http:// - The method (of transfer). http is optional. Other methods are
      1. ftp:// (File Transfer Protocol)
      2. telnet:// (Logging into a computer with a command line interface)
      3. gopher:// (Earlier test-based protocol without links inside documents)
      4. file:// (You can open a file directly in your browser to check it out, without going through the web server, and this is the method used in that case. If this appears in a link or an IMG tag, the web server will give users an error message, so be careful if you see it in these circumstances.)
      5. https and shttp are alternate methods for secure or encrypted HTML - HTML that cannot be read without a key, which is like a password.
    2. www.is.wayne.edu - Domain Name of the web server. You can also use the numerical IP address, e.g. 141.217.12.24
    3. /drbowen/inetf03/ - The path of folders to the requested file, from the "document root" folder of the server.
    4. welcome.htm - The name of the requested file. The browser displays files with extensions of htm, html, gif, jpeg, and jpg, and for others, asks if you want to download the file. If no file is listed, web servers are configured with a default file name, which is sent from the folder in the URL.
    5. What is shown above is an absolute URL.
    6. A relative URL drops at least some of the information above.
      1. If only the filename appears, it is assumed to be on the same server and in the same folder as the present document. I strongly recommend this for
      2. If folders are shown, preceded with a slash, the requested file is assumed to be on the current server, and the path is from the document root of the present server
      3. If folders are shown, without a preceding slash, the folders are assumed to be subfolders of the present folder on the present server
      4. The symbol ".." means one level up from the present folder (the parent folder of the present folder). This can be repeated to go up several levels. subfolders can be specified to down from that level, also.
    7. Relative URLs allow much greater flexibility in restructuring a web site, since files can simply be moved, and the URLs do not have to change. The files can even be moved to a different server without being changed. Keep a web site in one folder (or a few folders at most), and use relative URLs whenever possible.
    8. If the file name is not present, the web server sends the default in the specified folder that has the default name for that server. If there is no file with the default name:
      1. If "browsing" is allowed on that server, the server sends a list of all files in the folder, that the user may choose among. This is a very insecure option and browsing is often disabled these days.
      2. If browsing is not allowed on that server, an error message.
    9. If a file name is present in the URL, but there is no file in the specified folder with that name, the server sends a 404 error message (file not found).
    10. Links and IMG tags contain the URL of the referenced files. Wherever possible, these links should be relative, not absolute.
  6. Frames. HTML frames are document windows that act independently of each other. The right and left halves of the screen can scroll independently, or clicking on a link in the right half can replace the document in the left half (or the right half). For the CLL computer conferencing system, the are three frames -- a frame across the top of the screen for the row of black and white buttons, a left half showing the list of conferences, and a right half that can show various elements including the notice about new messages, the list of new messages, or messages themselves. Another common use of frames is to have a "navigation panel" on the left that stays fixed, and loads the content into the right frame. HTML frames (framesets) are defined by an HTML document (file) containing only the definitions of the frames, and which files to load into each frame. The content within the frames is always in separate HTML files.
  7. Forms. What with colors and images, even animated images, and scrolling and links and frames, web pages can seem pretty dynamic. Not to mention sound and video which we haven't touched on. However, all of the elements above are referred to as "static HTML" and the pages as "static pages." This is opposed to "interactive" where the user as opposed to the web designer can have some say over what is going on. With a form, which contains various input elements, the user enters data and makes choices and sends them in to the web server. The web server reacts, according to a script or program, and returns a web page which may be customized and depend on the information submitted by the user. This is called web "interactivity." It is necessary for eCommerce for the following purposes: (i) the user must select one or more item(s) to purchase, (ii) the user must choose a delivery method, and (iii) the user must submit a payment method (e.g. credit card and credit card number. More information may be requested or required. For example, the online bookseller Amazon.com has a choice of wrapping paper patterns if the book is a gift.
    
    A form is marked at its beginning with a <form> tag and at its end with a </form> tag. Between these two tags are input elements or "widgets" and one or more "Submit" buttons, with perhaps a "Reset" button to clear all of the input widgets if the user wants to start over. The <form> tag has an "action" attribute that tells the web server what to to with the form information. The user fills out the input widgets, or at least those that s/he wishes to, and clicks on (one of) the Submit button(s) (which can have any text on its surface). The browser sends all of the information -- form action, contents of the widgets, and which button was pressed -- back to the web server. What happens next is called the "Common Gateway Interface", or CGI. The form action information tells the web server to start a specified computer program -- the CGI program. (Different forms can specify different CGI programs.) The web server passes all of the form information to the CGI program. The CGI program processes the form information as it has been programmed to do, perhaps storing it in a database file. The CGI program also creates a response HTML file for the user, which may also contain some of the form information, for example confirming which book was ordered if this is an online bookstore. When the CGI program ends, the web server looks for the response HTML file and sends it back to the user. This ends the CGI process. It is worth noting that this a very flexible and multi-purpose process, since the CGI program can do virtually anything with the data, and prepare the response file can also have content and formatting that is without limit. The form input widgets are defined by tags chosen using the menu item Insert / Form Field / type. Ordinary HTML outside of these form element tags can label the widgets for the user. The various types are
    1. One-line Text Box, into which the user can type.
    2. A scrolling Text Box for multiline input
    3. A check box which can be checked or unchecked. If there are several checkboxes, any number of them may be checked, from zero to all.
    4. Radio buttons, which are grouped, and only one in each group can be checked.
    5. A Drop-Down Menu or "pick list"; the user picks on of the pre-defined items. The list can also be set up so that the user can pick more than one item on the lists.
  8. A form has two additional possible widgets, Submit and Reset buttons, along with the <form> and </form> tags. The Reset button is seldom used these days, because if the user accidnetally clicks it, all input is lost, which can cause considerable anger on a long and complex form. The buttons can have other labels on them, such as "Send My Information In" for the Submit button.
    
    Each input widget has two additional properties, its Name and its Value. The Name is not seen by the user, and identifies the input for you, the web designer, and for the CGI program. The Value is what the user enters, although this can be set to a default value by the web designer.
    
    Example: The user is supposed to type in her/his credit card number. Insert a One-line Text Box for this purpose. Label it "Credit Card Number" so the user will know what to type in. The Name could be "CardNumber" and the Value would initially be blank, and take on whatever number the user types in. Suppose the user types in 123456789. Then the Value of CardNumber would be 123456789, which the web browser would send to the web server, and thereby to the CGI program. Most likely the CGI program would store this in a database, along with the other purchase information.
eCommerce Teams
1. Establishing teams
2. General responsibilities - will go over these in much more detail during the next class
  1. Create working eCommerce web site with interim versions
    1. There is a first web site project that we will go over later tonight
  2. Turn in team report, with interim versions
3. Officers - will go over these in much more detail during the next class
  1. For now, each team should choose its Chief Executive Officer or CEO. The duties of the CEO are to make sure that everything gets done, that the team communicates as it needs to (phone? F2F or Face to Face? computer conference?), to keep track of what each team member does, to coordinate production of the reports, email the reports to me, and notify me when each interim version of the eCommerce web site is ready for my inspection. However, the CEO, like each of the other team members, is supposed to make an equal contribution to the detailed work of creating the eCommerce web site.
  2. If a team member is not contributing a fair share,
    1. This should be apparent from the team reports by not listing very many things that they did. If a team member did nothing, then don't list anything for them. This will lower that team member's grade.
    2. If the team report gives people credit for things that they did not actually do, I will generally be aware of this, and that part of the report will be discounted, lowering the team's grade for the report.
    3. Also, team members that have complaints should discuss them with me, in privacy if they wish. My first choice will be to have the team take care of its own discipline, but if that is not working, I will find a way to step in.
4. Each team has its own private computer conference, in addition to the general class conference, to use or not use as it sees fit
Design of web sites
1. Each page in a web site is a separate file. Web sites with several or many pages can be "deep" or "wide." By "deep" I mean that the user has to go through several pages one after the other to see the web site. Page A is linked to Page B is linked to Page C etc. A wide web site has a home page with links to all other pages, as in Page A is linked to Page B and Page C and Page D and so on. Web designers might think that the deep structure is better, since it controls the user experience. But think of yourself as a user - most users hate this, and want to go where they want to go, and so prefer the wide structure. All of this assumes that web pages and links are named and described well, in the sense of making sense to the user. So think about your users, and what they will try to do, and arrange your web site that way. And also, links from each page back to the home page, and from Page B to Page C and other links as appropriate, make a web site easy to move around in. Remember, too many links on a page can make navigation confusing.
2. Typical pages on an eCommerce web site (discussion).
Getting your file to the course web site:
1. Web servers let you read or download files, not upload them, so in order to put web pages or files on the server, we need another means of access besides the Web. We will use FTP (File Transport Protocol) as built in to Microsoft Internet Explorer.
2. There are two IS web servers:
  1. www.is.wayne.edu, generally for static pages only (we will start with this - inetf03 / inet123)
  2. www2.is.wayne.edu, generally for interactive pages (ASP)
3. Both web servers are also FTP servers, so we will be using Internet Explorer as an FTP Client. Unlike web servers, FTP Servers and Clients are both bi-directional. The FTP server requires you to log in, and shows a home directory when you do log in.
4. Getting MSIE to work as an FTP Client at MCU:
  1. MSIE - opens on www.macomb.edu, sometimes opens on MS Update site
  2. Go to the URL ftp://www.is.wayne.edu
  3. You will get a failure message ("an error occurred...") - this is because you are logged in to your computer with a different user name and password. Click OK, then use the menu item File > Login as... and enter your user name and password. You should be accepted at this point.
  4. You will also want Windows Explorer up and running - you will be copying and pasting between them.
  5. Uploading (your computer to the server: In Windows Explorer, highlight the file, right click on it, then choose Copy. Then go to the right folder in FTP, right click and choose Paste.
  6. Downloading: In FTP, highlight the desired file, right click on it then chosse Copy to Folder... and choose the desired folder.
Lab Assignments:
1. In MS Word, a description of your eCommerce project and the enterprise behind it. How will the web site fit into the enterprise?
2. Hand-drawn draft layout for your web site (can be a copy), showing:
  1. Each web page as a rectangle with
    1. File name
    2. Brief description of content
    3. Desired graphics, if any (file name and content)
    4. If you are working in a team, who in the team is responsible for that page
  2. Links between pages shown as arrow between rectangles.
3. An initial personal web page with the assigned file name (first initial and last name) printed out and loaded on the server. If Netscape Composer is loaded, use that.
4. On the course web site, fill out the course information form.
5. Sign out when you leave class.
Shut your computer down before leaving

This is my test web page.