Wayne State University
College of Lifelong Learning
Interdisciplinary Studies Program, Fall, 1999
http://www.cll.wayne.edu/isp/drbowen/internet		 eCommerce: Using the Web to Find and Service Customers
AGS 3360 Section 986 Call Number 99882
or ISP 5500 Section 982 Call Number 90569

Last updated: 9/16/99
Link back to course Welcome

Update for Agenda 2

The original Agenda 2 for the second class meeting of eCommerce on September 15 is below. This section describes what was not actually covered, and what was added.

  1. The class section covered the original agenda down through the end of section V.H, creating tables using Microsoft FrontPage98. The remainder of this agenda will be covered in the next class. Microsoft FrontPage98 is a WYSIWYG HTML editor in which you do not see the tags, but work on the screen directly, with FrontPage working behind the scenes to put in the tags.
    1. One additional point that we did cover was that you can also examine and edit the tags directly in FrontPage by clicking on the "HTML" tab at the bottom left of the FrontPage window. To switch back to the WYSIWYG view, click on the "Normal" tab. The third tab, "Preview", will call in a web browser so you can see exactly what your users will see.
  2. In addition to the agenda, we covered using Notepad, a simple text editor, to create and edit HTML. This was in response to comments in the conference that the Castro book was tough going. Using Notepad, you can put the tags into use immediately and then see the effect in your web browser. To use Notepad,
    1. Click on the Start button in the lower left of the screen, then slide up to Programs, then slide over to Accessories and finally down to Notepad. This starts the Notepad program running.
    2. For a trial, everyone typed in the following short HTML document (three lines long). Please note that this document did not include that <head>...</head> and <body>...</body> tags that we went over during the first class, so that technically it should not display correctly in the browser, but browsers are written to be forgiving. In fact, the file would work without even the <html>...</html> tags. But here goes what we used. Start a new line with the <Enter> key (<Return> on the Mac):
      <html>
      Hello, your name
      </html>
    3. Then, save the file using the File / Save As... menu item. Remember where you put the file! This includes
      • Drive (A: for floppy, C: for hard drive, and many computers have extra symbols also)
      • Folder path - the sequence of folders to get to the file
      • Filename - the name and the extension

      This is the end of creating the file.

  3. We then viewed the file using Netscape. Internet Explorer would work as well, except that the menu choices would be a little different. Here is how to view a file directly in Netscape, without going through a web server:
    1. Start Netscape. In the Rackham lab, there is a Netscape desktop icon. With a desktop icon, just double-click the icon.
    2. Choose the File / Open Page... menu item. (You can also use this to open a normal URL through a web server).
    3. The Open Page dialog opens up. To open a file instead of a URL, click on the Choose File... button.
    4. The Open dialog opens up. Navigate to the drive, folder path and filename that you want.
    5. Double-click on the filename. This will put the drive, folder path and filename in the Open Page dialog.
      1. Detail: it is usually safest to double-click on the icon to the left of the file instead of the filename itself. Clicking on the filename (letters) may be interpreted as a command to change the filename!
      2. Detail: You can also single-click and then click the Open button.
    6. Click the Open button in the Open Page... dialog. This will open the file in Netscape.
    7. Note that the Location text line starts with file:// instead of the normal http;??. Those first characters, including the "//" are the method that Netscape is using to get the file. The diagram below illustrates how the two methods are different. (A slightly different diagram was presented in class.)
      srvrfile.gif (5660 bytes)
      The top two circles in the diagram are the user's computer, and the bottom two are the web server computer. In the file:// method, the web browser goes directly to the file using that computer's normal methods for opening and reading files. In the http:// method, the web browser contacts a web server (which is a eparate computer), and the web server gets the file, using the web server's normal methods for opening and reading files, and then sends the file back to the user's computer.
    8. You can use the file:// method to check your files before sending them to the web server. (We haven't gone over sending your files to the web server yet.)
  4. The class formed into three teams, and each team has its own conference under the tram name:
    1. Duds: Wiley Crawford, Doretha Mills, Carolyn Mills, Euan Singleton and Leroy Eaddy
    2. Pleasure Vacations: Jessie Stegger, Diann Thomas, Mark Trusick and Alex McKinney.
      I have added Constance Lewis to this team (and to the team's conference).
    3. C4P: Alisa Rankin, Frances Cureton, Bill Snellings and Paul Vigneau
  5. Added after class: You can create desktop icons for other programs, such as Notepad (the filename is Notepad.exe), using steps V.A. 1 - 6.

Agenda for class 2
9/15/99

This class meeting is only for eCommerce.

  1. Review
    1. Ten items needed to create an eCommerce web site
    2. Assignments
    3. Pictures
  2. Other uses for eCommerce technology - web interactivity. Any web site on which you fill out a form to send information in, such as:
    1. On-line math tutor
    2. Online tax service
    3. Club membership application
    4. College registration
    5. Conferencing / chat system
  3. Graphics -- how can you create graphics for the team web site?
    1. Graphics is a weak area in this course, but there are seven methods
      1. Web graphics use two formats, primarily
        1. GIF, suitable for poster-style graphics (large areas of the same color). Also supports
          1. Can control number of colors and "color depth"
          2. Transparency. One color -- the background color -- can be set to be transparent, so that the background shows through. Useful for colored or tiled backgrounds.
          3. Animation - a simple type of animation, in which each frame in the animation is drawn separately, and then the frames are displayed at set intervals. Can play once or continuously.
        2. JPEG or JPG, suitable for photographs and similar graphics, with color gradients, say as the shadow on a rounded object or face deepens
      2. File sizes are very important for web graphics. One page of text might be 2 kB to 10 kB, taking a second to several seconds to download over a 28.8 kbps modem connection. One page of graphics can be 1 MB, taking 45 minutes to download over that same connection. To keep graphics file sizes small,
        1. Keep "natural" area small
        2. For GIFs, keep color depth low -- use as few colors as possible
        3. Use the right format - both GIF and JPG have compression schemes, but they are different0
    2. Digital camera
      1. Bowen will save the picture and convert it (usually to JPG)
    3. Draw in MS Word, Save As HTML, drawings get saved as GIF files
      1. First, save picture in Word format (doc) so that you can edit the drawing using Word
      2. To make the drawing, choose menu item Insert / Microsoft Picture or Insert / Microsoft Drawing
      3. Picture has more flexible drawing tools but fixed size, Drawing has better control over size
    4. Simple drawings can be picked off of the web. Actually, they all can, but picking off and using something that took a lot of effort might get you sued. And, everything on the web is copyrighted automatically.
      1. In Windows, right-click, pick "Save Image As..."
      2. Navigate to drive and folder to save.
      3. Do not change the file type or extension. You can change the name.
    5. I will be creating a picture gallery on the CLL web, with a link from the course home page. There are also free picture galleries on other web sites.
    6. If there are people that want to do more with web graphics, we can have a special session. Let me know. The time and location depends on the number of people who are interested.
    7. You can insert clip art from the MS collection included with FrontPage. If you have access to clip art collections, you may be able to use them also, depending on the file formats.
    8. In FrontPage, under the Tools menu item, there is (may be) an Image Editor item.
  4. Web site navigation
    1. "Navigation" means finding your way around the web site. Your links need to make sense from the user's point of view. For example, a business will often lay out its web site with a section for each department, even though customer's don't know what these departments are.
    2. Navigation must make immediate sense since users are impatient. Usually, users will not read directions. An analogy with a brick-and-mortar store might work.
    3. One suggestion is to imagine specific customers and times of day (e.g. mother after kids in bed, man during lunch hour, etc.) role play how they might want to use the web site
  5. Using MS FrontPage98 Editor to create static web pages
    1. Starting MS FrontPage98 Editor. We will not use FrontPage Explorer here, which is the normal start-up for FrontPage. Make a desktop icon for the FrontPage Editor
      1. Open Start / Programs / Windows NT Explorer (just plain Windows Explorer in Windows 95 and 98)
      2. Click on C: to select (highlight) it, then choose menu item Tools / Find / Files or Folders...
      3. In the Find dialog, in the Named: text box, type fpeditor.exe and click the Find Now button
      4. When the search is done, there should be an icon with fpeditor.exe to its right. Right-click on the icon, and pick the Create Shortcut menu item.
      5. If an error dialog pops up, saying that Windows cannot create a shortcut there, pick to create one on the desktop.
      6. You should end up with an icon labeled Shortcut to fpeditor.exe on your desktop. If you click once on the text, wait for a second or two, and then click again, the text will be highlighted but the highlight will be smaller than the box containing it. You can type in new text, if you want, and <Enter> to accept it
      7. Double-click on your new icon to start the FrontPage Editor.
      8. FrontPage opens with a new blank page on the screen.
        1. You can use File / Open... to open an existing HTML file, and the New Page 1 will still be available through the Window menu item.
        2. You can start new pages as desired using the File/ New menu item
        3. When saving your file, choose File / Save As... the first time, to choose the drive, folders and filename of your file. On the CLL web folder, the extension must be htm, not html.
        4. After the first save, use File / Save As... to change any of that information. Other wise use File / Save or even the floppy diskette icon.
    2. Before you begin, set the page properties using File / Page Properties... Because of the large volume of content, and its lack of organization, most users rely on web searches to find what they are looking for. Here is how web searches work:
      1. Most search sites have a web "spider", "crawler" or "bot" (robot) -- a program that, at night, follows HTML links, reporting back what it finds. The report includes the URL, keywords, and a summary of the page. The default keywords are chosen differently by each search site. The default summary is the first section of the file, outside of the tags. You, the web developer, can
        1. Let the program decide the keywords and summary (oooh -- could be risky!)
        2. Tell the program what the keywords and summary are (you control it)
      2. The search site compiles all of these pages into a database
      3. When someone searches, the keywords in the database are examines. If a match is found, the URL and description are presented to the user.

      So -- you should use the methods that HTML gives you to control the keywords and summary. Both are done in the HTML head, using the "meta" tag. Also, the title that appears on the browser window and the page color are set in the head. In MS FrontPage98, all of these are set using the File / Page Properties... menu choice and the Page Properties dialog.

      pgprop.gif (8922 bytes)

      The document title (appears on the browser title bar) is set on the "General" tab. The background color is set on the "Background" tab. The keywords and description are set in the User Variables window of the "Custom" tag as shown above. FrontPage automatically sets GENERATOR to display its own name and version. Click on the Add button to open up new Name - Value pairs.

    3. The Undo (counter-clockwise arrow) button and the Edit / Undo menu item are very useful for undoing a step that did not turn out the way you expected. Just realize that something bad happened, and then you can Undo it and try another way.

      Another way to protect yourself is to save regularly, but avoid saving changes if they do not turn out the way you want.
    4. Text
      1. Type text to put it in your document
      2. The flashing vertical bar is where the text will go when you type -- the bar is known as the "insertion point". Move the insertion point with the arrow keys, or click with the mouse to move it. Inside the text area, the mouse cursor takes on the shape of an "I Beam". Again, click with the mouse to move the insertion point to the I Beam, or drag over text to select it.
      3. The <Enter> key starts a new paragraph with a space above it. HTML 3.2 does not support indented paragraphs. In a list (see below), <Enter> starts a new list item
      4. <Shift><Enter> (hold down the first key, then tap the second while keeping the first down) starts a new line but not a new paragraph. In a list (see below) <Shift><Enter> starts a new line but not a new list item.
      5. Multiple spaces are ignored by browsers, so you cannot use the space bar to indent paragraphs or align text to the center or left. You should not use these methods, anyway, since they can be difficult to maintain.
      6. Similarly, multiple <Enter>s are ignored by browsers, meaning that the <Enter> key cannot be used to increase the distance between paragraphs.
    5. Graphics
      1. Insert graphics into your web documents using the menu item Insert / Image.... A "Select File"  frntpag2.gif (27679 bytes)
      2. Web images do not become part of the HTML file. What goes in the HTML file is a reference <IMG> tag. If the image cannot be found, a "broken image" icon brknimag.gif (1105 bytes) is used instead. 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). If you are following my advice, on the "Select File" dialog, make sure that there is no drive, folder or URL information  in the "File name:" text line, before you click OK - just the file name and extension.
      3. You can reduce the displayed size of a graphic by selecting (clicking on) the graphic, and using the Edit / Image Properties... menu item, and then the Appearance tab. To change the displayed size, click on the Specify Tab check box. Clicking on the Keep Aspect Ratio box will keep the proportions the same as you change the width or height.
        1. Changing the "natural" size of a graphic often degrades its quality. A graphics program can often do a better job of changing the size.
        2. Reducing the size of an image does not reduce the file size. The image still takes the same time to download. If you really want a smaller graphic, reduce it size and file size in a graphics program.
    6. Formatting text. Formatting text means changing its appearance - bigger, smaller, bold, italics, underlined, or set the color. You can make format changes without any text selected. These changes will affect the text you type next. Or, you can select text by dragging over it (highlight). If text is selected, formatting changes are applied to the selected text
      1. Font changes are possible but not recommended -- see Agenda 1.
      2. You can format text at the level of individual letters by using the Format / Font... menu item or the buttons on the Format tool bar. The "bigger" and "smaller" buttons undo each other, while the buttons for Bold, Italics and Underline a second time undo those effects.
      3. You can right align, center or left align paragraphs using the buttons on the Format toolbar, or by choosing the corresponding items in the "Format / Paragraph ... menu item.
      4. HTML does not support
        1. Justification -- aligning on both borders
        2. Tabs
      5. 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.
      6. Format / Remove Formatting removes character-level formatting from selected text. I find this most useful when it becomes difficult to remove multiple formatting.
    7. 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).
      1. To start a bulleted list, click on the bullet icon on the Format toolbar. The indent button indents the list (use it twice). Select a list item at a given level, and use the menu item Format / Bullets and Numbers... to change the bullet style for that entire level.
      2. To start a numbered (or lettered) list, click on the number icon on the Format Toolbar. The indent button works the same here. By changing the Format / Bullets and Numbers... settings, you can make a traditional outline, or follow a custom sequence.
      3. To stop the list function, tap <Enter> to start a new item, then click the bullet or number icon to turn the list off.
    8. 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 FrontPage makes tables easy. To make a table,
      1. Place the insertion point (flashing vertical bar) where you want the table
      2. Drag on the Table icon to get the number of rows and columns that you want (worry about their size and shape later). This creates a table with cell borders. For page alignment you most likely want a table with invisible borders.
      3. Drag the column borders to the locations that you want.
      4. Set the borders using the Table / Table Properties menu item.
        1. Make borders invisible by setting "Border Size" to zero. The table borders will show as dashed in FrontPage, but will be invisible in browsers.
        2. Cell Padding is the distance from the edge of a cell to the start of its contents
        3. Cell Spacing is the distance between border lines
      5. By using the Table / Table Properties and Table / Cell Properties menu items, you can change many features of a table, such as border color and background color.
      6. Graphics and lists can be placed inside table cells
    9. 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.cll.wayne.edu/isp/drbowen/internet/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.)
      2. www.cll.wayne.edu - Domain Name of the web server. You can also use the numerical IP address, e.g. 141.217.142.149
      3. /isp/drbowen/internet/ - 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. Links and IMG tags contain the URL of the referenced files. Wherever possible, these links should be relative, not absolute.
      9. To create a link in FrontPage98,
        1. Select (drag over) the link text; that is, the text that will turn blue and be underlined. You can use an image for a link by selecting (clicking on) it as well.
        2. Click on the Link button or choose the menu item Link / Hyperlink...
        3. Type in the destination URL for the link. Alternately you can open an Explorer window with the folder icon, or browse the web using the globe-and-magnifying-glass icon, and select the item (file or URL) you want to link to.
        4. Check that the URL is absolute or relative as desired, and click OK.
        5. You can link to a location within a file if you have define a Bookmark. Select or type the bookmark name in the Optional / Bookmark text line. If there is no URL, the bookmark is assumed to be in the present file.
      10. To create a bookmark, select the bookmark text and select the menu item Edit / Bookmark. The default bookmark name is the selected bookmark text, but you can type in anything else you want. An image can also serve as a bookmark.
    10. 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.
      1. To create a frameset, choose the menu item Frame / New Frames Page... FrontPage then displays a list of layouts; choose the one that is closest to your plan and click OK.
      2. You can drag the frames boundaries around to get the proportions that you want.
      3. Choose the buttons in each frame to either load an existing file into the frame, or create a new HTML file to load into the frame.
      4. Each frame has a name that FrontPage supplies by default. To set your own names, use the menu item Frame / Frame Properties. You can also set several other properties here. For example, should the frame have scrollbars if the content overflows the frame? Should the user be able to drag the frame boundaries around, or should they be fixed?
      5. With frames, links have targets. The target is the frame name that the document should be loaded into. You specify the target frame in the Create Hyperlink dialog, along with all of the other link information.
    11. 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.

      An 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.

      When the first form filed is inserted, Submit and Resent buttons are inserted also, along with the <form> and </form> tags, indicated by dotted lines. Thereafter, additional form widgets should be inserted inside the dotted lines; otherwise they start a new, second form. The form widgets and the text that labels them can be positioned by any valid HTML means, including <Enter>, <Shift><Enter>, tables and frames.

      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. Both are most easily specified by right-clicking on the element and choosing the Form Field Properties menu item. The dialog supplied the default values for Name and Value, but these can be replaced by clicking in the fields and typing. Click OK when done.

      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.

  6. Uploading files to the CLL web server. Links on course web site to uploading files
    1. Each Team will have its own User Name and Password for its own web site
    2. For personal web pages, there is a class User Name and Password - internet / stustu
      1. Filename should be first initial and full last name with no hyphens, up to a maximum of eight letters, with an extension of htm, e.g. dbowen.htm for me
  7. Getting your team started