School of Education

Internet Technologies At Work

Chapter 7: Interacting with Users

After completing Chapter 7, you will know how to:

Creating Forms

A form is an HTML Web page element that prompts the user to fill in one or more blanks and/or select items from a menu of possible choices, which are followed by a button that the user clicks to submit the response after filling in the form. The first part of Chapter 7 steps you through the process of creating a form and making it e-mail you the form results. This is a very simple yet powerful way of using the Web to gather information from people. After you work through the tutorial in the book, you can customize the form to collect the kinds of information you would like to gather.

PayPal Button

The second part of Chapter 7 is an optional exercise in which you create a PayPal button. This tutorial will come in handy whenever you want to sell something at your Web site. You will be amazed how simple it is to get the PayPal button on your screen.

Image Maps

The third part of Chapter 7 teaches you how to create an image map, which is an invisible layer of triggers placed over an image onscreen. The triggers can be rectangular, circular, or polygonal. When the user clicks inside one of the invisible triggers, the Web browser triggers the object of the link. Because you can picture anything imaginable in an image onscreen, you can use image maps to create a wide range of user interfaces. After showing you the code that powers the middle C image map, Chapter 7 provides you with a Try This! exercise that you can use as a template for rolling your own image map.

Framesets

The fourth part of chapter 7 teaches you how to create a frameset, which is an HTML Web page element that splits the browser window into two or more subdocuments called frames. To be honest, I am not a huge fan of framesets. While frames provide an easy way to create sidebars, multiple windows can be confusing, especially for users with special needs. For this reason, I use framesets only when required to do so. In such cases, I design the content in such a way that users who do not want frames can navigate without them.

Consider, for example, the frameset I created for my online course on Internet Literacy. This online course is published by PBS, which wanted a frameset version that could snap in to frames-based instructional management systems such as WebCT. I made PBS happy by creating this frameset version. At the same time, I designed the content in such a way that users who do not want frames can navigate without them. Notice how the non-frames version provides navigation options that enable the user to move forward or backward and drill down or up through the course content without the aid of frames.

Nevertheless, there are applications in which framesets are cool. I really like the frameset that PowerPoint creates when you choose the option to save a PowerPoint show as a Web page. I used that feature to publish my Toronto keynote to the Web. There is no quicker way to create a frameset so rich in hypermedia and navigational functions.

End of Chapter Labs

Lab Project 7.1: Person to Person Payment Processing

PayPal presents an interesting alternative for a small business that is considering how to power its e-commerce activities. In this chapter, for example, you have learned how to create Web forms that present users with onscreen controls for selecting things and making choices. By using a PayPal button to submit those choices to CGI scripts running on the PayPal server, it would seem as though small businesses can avoid the overhead of paying for more complex e-commerce hosting from an instant storefront provider such as Amazon, Yahoo, eBay, or bCentral. Imagine that your employer has asked you to evaluate these alternatives and recommend whether your small business should use PayPal Buy Now! buttons to sell products directly from your Web site. Use your word processor to write a report in which you describe how PayPal works, compare it to the leading instant storefront alternatives, and recommend whether to use PayPal at your site. In creating this recommendation, address the following issues:

  1. Functionality. Earlier in this chapter, Table 7-3 listed the frequently used PayPal Buy Now! Button HTML and hyperlink variables. Go to the PayPal site’s merchants tab, and look over the complete list of hyperlink variables that the PayPal Buy Now! button supports. Do these variables cover the kinds of options you will need to handle on your company’s e-commerce pages?
  2. Cost. Consider the costs involved in adding PayPal Buy Now! buttons at your company Web site as compared to paying for an instant storefront solution. Be sure to include all costs in this comparison, such as fixed monthly fees and per-purchase percentages that you must pay for different kinds of payment processing.
  3. Time. Creating your own storefront may take more time than using an Instant Storefront solution. Consider whether you have that kind of time. Also consider whether the PayPal tools, such as the Buy Now Button Maker, can speed the process.
  4. Opportunity. Designing your own e-commerce pages may provide opportunities that you would not have at an instant storefront. Consider the options available at popular instant storefronts such as Amazon, Yahoo, eBay, or bCentral. Are there features you need that are not supported by these instant storefronts?

If your instructor has asked you to hand in this assignment, make sure you put your name at the top of your essay, then copy it onto a disk or follow the other instructions you may have been given for submitting this assignment.

Lab Project 7.2: Creating a Graphical Front End

If you think about what you actually see when you go to a Web site, what appears onscreen is either textual or graphical. Web sites that depend mainly on text, such as keyword search engines, typically have text-based user interfaces. Other sites get more creative and provide you with a visual image to click. You can see an example of a graphical user interface at the Library of Congress Web site at www.loc.gov. Imagine that your employer has asked you to look into the possibility of creating a graphical front-end for your school or company Web site. In developing your recommendation, consider these alternatives:

  1. One way to create a graphical front-end is to use an image map. This method is suitable if there is a picture or a graphic that illustrates or contains the objects you want users to click. I dream of creating a virtual tour of Fort McHenry, for example, which is located in Baltimore and chronicles the writing of  the Star Spangled Banner. You could snap a wide-angled picture of the Fort, put it on a Web page, and use an image map to create triggers on the doors and windows. To look into a window, the user would click it. To enter a room, the user would click its door.
  2. Another way of creating a graphical front end is to use tables to position individual graphics onscreen where you want them. To link the graphics to their intended targets, you surround each image by anchor tags that use the href attribute to specify the hyperlinks. In the previous chapter, Figure 6-22 analyzes the design of a Web page that uses tables to create this kind of layout.
  3. If your workplace has content that lends itself to the use of image maps, use your word processor to write a brief essay about that. Describe what the images would depict, tell where the triggers would be, and explain what will happen when the user clicks them.
  4. If your workplace has content that lends itself to the use of image maps, also write about that in your report. Describe what the images would depict, tell where the triggers would be, and explain what will happen when the user clicks them.

If your instructor has asked you to hand in this assignment, make sure you put your name at the top of your essay, then copy it onto a disk or follow the other instructions you may have been given for submitting this assignment.