Probably the most widely used new feature provided by JavaScript is the capability to use multiple frames to organize Web site content, especially when used in conjunction with navigation and toolbars. For many Web authors, this means converting existing pages and sites into a frame-based format. But it can be tricky. Although frames are a powerful new tool, if misplaced and misused they can be a hindrance to the user by eating up screen space and slowing down the browser.
Another key capability offered with JavaScript is control over browser behavior. New windows and new browsers are opened
and closed using simple commands that also control the availability of the browser's tools.
Properly used, these two capabilities enable a Web developer to create a portal into the site and provide the tools he wants the user to have to navigate inside. Content presentation and access are controlled in one simple step (see fig. 21.1).
As an Internet consultant, Matthew Fusfield spends a lot of time keeping up with hardware and software advances that can be integrated into clients' Web sites. Because Web technology is changing on virtually a day-to-day basis, it has been a constant process, but one he has enjoyed watching.
"It's good to have new things to do," he says. If nothing new were developed, the capabilities would get old and stale. Emerging technologies enable him to continue providing new services and capabilities to his clients.
Unlike a lot of revisions and updates to software packages that
don't add much capability, Fusfield has enjoyed working with the
Internet products from Netscape and Microsoft. "I've always
been impressed by them by how much their products continue to
improve," he says, "and I've always been interested
in being among the first to try them." Fusfield has been
working with beta versions of Netscape since it was first released,
so he learned about it from the ground up.
| NOTE |
CyberExplorer's home page, http://www.cyberexplorer.com/demo/, operates by opening a new browser to control the user's navigation options. |
With JavaScript, it is possible to control the appearance and functionality of browser windows. Fusfield capitalizes on this with his Web site. Users are greeted by a button that is used to enter the site. This page also serves to help screen users who may not have the proper software to view the pages within.
When the Start Demo button is clicked, a new browser is loaded with a custom set of navigation buttons (see fig. 21.2).
As a reminder that users are not in an average Web site, a confirmation alert is used to let them know they're leaving CyberExplorer pages (see fig. 21.3). This is the preferred way to leave the site, although a user can always use the close button on the top-right corner of the screen.
Converting an old Web site into its new JavaScript format is a straightforward process involving refining the existing content, organizing it for frame presentation, and then creating new pages with JavaScript code with the new content pasted in-a process Fusfield uses for most of his projects.
"Generally, if it's a clean site with clean HTML, it takes a few hours over a few days," he says. "But planning is the important part."
After deciding how the site should work and what it should include, Fusfield sketches his ideas on paper, including flowcharts and screen layouts. After refining the idea on paper, he gets the HTML documents currently in use.
Any changes to the content or artwork are made in the old files. Then in separate files he creates the JavaScript code that controls navigation and other browser behavior. When scripts in the new files are complete, the content is inserted from the old files.
"I put it on a password-protected server to see how it behaves," Fusfield says. This says him a chance to use the site in its natural environment and decide what works and what doesn't. This is also a crucial step when working with a client because it enables the customer to review the site before it is generally available.
When the new site is running without a hitch, an important decision is left: what to do with the old files.
Fusfield says the decision to delete the old files in lieu of the JavaScript-enabled versions depends on the end user's alternatives. For a JavaScript-dependent site, such as CyberExplorer, it's "tough luck" for the user who's not using an up-to-date Netscape browser.
Another option is to provide access to a mirror site, which contains the same content but without JavaScript. This ensures that no users are left out, and is especially important for general-interest sites.
Creating a controlled environment, like Fusfield has created for CyberExplorer, is quite simple apart from the frames.
If the entrance page also provides access to a mirror site that doesn't require JavaScript, then a hot link can be embedded inside script comment markers, /* and */, to the alternative site. In this example, an all-or-nothing approach is used.
Listing 21.1 shows the HTML code used to create access to the CyberExplorer demo. Note the startdemo() function, which creates a new window without a toolbar or menu bar but provides for scrolling and a status bar. This enables the author to provide a unique set of tools and navigation aids while in the site.
Listing 21.1 Code for Creating first page of the
CyberExplorer Demo
<HTML>
<HEAD>
<TITLE>CyberExplorer Demo Site</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function startdemo(){
window.open('start.htm', 'CyberExplorer',
'toolbar=no,location=no,directories=no,
status=yes,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no')
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#ffffff">
<center>
<P>
<P>
<P>
<P>
<P>
<h4>Welcome to CyberExplorer's Demo Site</h4>
<h5>To use this site, you will need a copy of Netscape 2.0</h5>
<h5>If you already have Netscape 2.0, click the button below to start
the demo.</h5>
<h5>If you do not have Netscape 2.0, please click the Netscape icon
below to download it now.</h5>
<FORM>
<input type="button" value=" Start Demo " onClick="startdemo()">
</FORM>
When the button is clicked, a new window is created using the window.open() method. This directs the browser to create a new window and load it with the contents from start.htm-the file that creates the frames and loads the toolbars for the rest of the tour of the site.
With the tool definitions in the window.open method, Fusfield's site has captured the user's browser. "The ability to control how a browser behaves is very powerful. Basically, you can't leave until you hit the Exit button."
"Frames can be clunky at times," Fusfield says, "At times, I think of ways the actual syntax would have been easier."
Learning how to effectively include frames in a site takes practice and a healthy dose of trial and error. "It's a little more difficult than other HTML tags." His starting point included documentation and examples available online, followed by a lot of experimentation.
Fusfield thinks it is worth the price, however. "They make sense in a lot of places," he said. "We're seeing the groundwork laid for complex interfaces," such as those available for America Online, Prodigy, and CompuServe. It's one of the good ideas that can actually make a page or Web site easier to view and navigate for the user, and serves as the basis for more sophisticated tools.
The problem is that frames require screen space. "With each frame, the screen (for content) is getting smaller." This is especially true when Web authors start creating frames for displaying advertising. "The spirit in which this capability was created was to help navigate…not advertise," he says. "Its best use is for navigation and toolbars."
Although advertising is a valid use for frames, it shouldn't interfere with or overpower the frame used for content. "Put it where it's not obtrusive."