JavaScript Professional Projects

JavaScript Functionality: Special Features of the Center Park Web Site

While we'll discuss each functional component of the Center Park Web site in the following chapters, we'd like to introduce these components now, so that you can get an idea of what the final project will look like. In each of the sections below, we will cross-reference the chapter(s) in which we discussed the specific JavaScript coding foundation from which the specific functional component is to be built.

Functional Requirement: JavaScript Calendars

The question has been raised: Does anybody really know what time it is? The other question that always seems to need asking is, "What's today's date?" Let's face it: in today's harried world, time just slips away from us. That said, being able to quickly determine not only today's date but also dates in the future is critical for any type of planning. This type of functionality is often of high importance on a Web site, too, as visitors will need to schedule events or view planned events days, weeks, and yes, even years in advance.

For the Center Park site, calendar functionality is an important element. From allowing visitors to see planned events at the school to allowing teachers to make their lesson plans available to students, calendars are an absolute must. Figures 14.2, 14.3, and 14.4 all highlight some of the "pop-up calendar" functionality of the Center Park Web site. It should be apparent—even from a quick glance at these figures—how useful such calendar functionality can be to a well-designed, information-rich Web site.

Figure 14.2: Visitors are able to see "at a glance" events for the school planned for the week, month, or year.

Figure 14.3: Students are able to quickly view assignments for the week. Being able to view assignments online makes it impossible to say, "But I didn't know that paper was due today!"

Figure 14.4: Direct links to the exams are found within the monthly calendars; students simply click on the test link…

Functional Requirement: Online Test and Surveys

Many schools (especially at the secondary and college level) are turning to online testing as a convenient, efficient way of assessing student progress. The Center Park administrators, in their quest to stay one step ahead of the technology curve, have asked that this online testing component be included in their new site, too.

Figures 14.4, 14.5, 14.6, and 14.7 illustrate the online testing component of the site.

Figure 14.5: …to be taken to the actual test form.

Figure 14.6: Students must provide an answer of some kind to each question, or else the test will not be submitted.

Figure 14.7: Upon submission of the answers, the test is immediately scored and presented to the student.

In addition to the online testing component, you will see that—with some relatively simple coding modification—the test functionality can be turned into a survey form. This has obvious implications for any site, but for the Center Park site school administrators might use such a survey to gather parent feedback, to solicit donations from the community at large…the list goes on.

Functional Requirement: Creating an Online Shopping Cart

Ah, the school bake sale…where would education be without it? But what if you could take Mrs. Riley's famous apple turnovers and sell them via the wonders of technology? As you can see in Figures 14.8, 14.9, and 14.10, the online shopping cart allows visitors to both view items for sale and see a running cost total of the items they've added to their online shopping cart.

Figure 14.8: The "Center Park Store" home page allows visitors to select an item of interest. Note that navigation links are present that quickly take the visitor to other areas of the site.

Figure 14.9: Once an item is selected, it is automatically added to the online cart. Note that the total cost of the cart is also updated.

Figure 14.10: Ready for check out. Note the list of all items ready for purchase as well as the total cost.

Functional Requirement: "Members-Only" Security/Password Protection

Not all information presented on the Center Park Web site is intended for public consumption. Indeed, sensitive information such as faculty home addresses and telephone numbers, as well as budgetary and other administrative information, should probably not be accessible to everyone.

Fortunately, your JavaScript coding skills will allow you to meet the security functional requirement of the site. Figure 14.11 illustrates the prompt presented to users who must enter an authorized password before being allowed to progress any further into this section of the site.

Figure 14.11: Stop! Who goes there? If you don't have an authorized password, you're not going anywhere in this specific section of the Center Park Web site.

Functional Requirement: Rotating Banner Advertisements

Undoubtedly you've been annoyed by them in your journeys throughout the Web. But rotating banner ads actually can serve a very useful purpose when they are enclosed within a private site or intranet.

Given that screen real estate is always limited—and that, quite often, several people/organizations are vying for that real estate—rotating banner ads can be just what the Web design doctor ordered. By combining both functionality (i.e. being able to hyperlink them to other sections of your site) and eye-catching design, a rotating banner ad can serve a multitude of purposes.

When a survey was put to Center Park students as to what functional requirements they'd like to see met in the Web site, one very common response was that they'd like to see advertising for various student group activities. In your planning meetings with the school administrators, you (rightly) suggested that rotating banner ads would be a perfect answer to this request, because:

• Banner ads make good use of screen real estate. If you gave space on a Web page to every organization, it would result in a very busy (and probably unreadable) page. However, by using rotating banner ads, you can take up only a fraction of screen real estate and still manage to give everyone his or her fair share of exposure. Moreover, the rotating ad probably gives an organization more bang for its buck, as during the time it is being displayed the ad has no competition from any other ads.

• Each ad would be designed in a similar fashion. The school administrators want to be fair to each group, and banner ads force the groups to work with the same specifications (such as size), thus helping to ensure that one group doesn't get more attention than any other.

• Banner ads allow interested users to "click for more information." As the ads can be hyperlinked, they can focus on quick, attention-grabbing tactics (i.e. good graphic design). Then, once a visitor's attention is captured, he or she can click within the ad to be taken to a page with more specific information about the event/function being advertised.

• Rotating banner ads are easy to administer. The groups interested in advertising submit their ads by a specific deadline; then the site administrators simply load them into a queue, set specific options (such as order of ads and time each ad will be displayed onscreen), and away they go.

Figure 14.12 illustrates a rotating banner ad for the June "Bug Festival."

Figure 14.12: The rotating banner ad for the Bug Festival. Note the difference in this rotating graphic versus the graphic seen in Figure 14.2.

Functional Requirement: Dynamic HTML (DHTML) Effects

A Web site can be packed with information, but—let's face it—the Web is a multimedia medium: If it doesn't look good, then the power of that information can be lost. The Center Park administrators are aware of this and want to make the site as eye-catching (yet not obnoxious) as possible. Moreover, they have visited other Web sites and know that good design can also enhance functionality of the site.

An example of good design is the bold navigation buttons on the site home page. Note how, in Figure 14.13, the menus add a visually appealing quality to the site, as well as provide a very real functional usability.

Figure 14.13: When the mouse cursor is placed over the button, it changes colors to show it is highlighted. Also note the functionality of these buttons is duplicated in the right frame of the site (next to the rotating graphic, the links for "Log In", "Store" and "Customize").