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.
Tip |
We've listed each of the Center Park functional components in the same order as they will appear in the following chapters. For example, the calendar functionality will be presented in Chapter 15, "Creating a JavaScript Calendar." |
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.
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.
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.
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.
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.
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."
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.