The power of the Web is that it gives everyone the ability to have their own home page.The Web lets you create a home page site that expounds your opinion on anything from politics to pound cake. It's also been shown that it doesn't really matter what the subject matter is, just as long as it's presented in an interesting and appealing way. If you script it, they will come… .
The publishing of opinions is no longer restricted to those with expensive presses and massive distribution networks; you, too, can be the editor of your own little "eEmpire."
In this chapter, you'll be introduced to eZine, a framework you can use to create and publish your own electronic online magazine.
The eZine framework presented here:
Works equally well whether you have access to your server's CGI interface or not. The framework is written entirely in JavaScript with a VBScript version available on the accompanying CD-ROM.
Is open enough to work with frames or without, providing a pleasing presentation to those not using Netscape Navigator or Internet Explorer.
The most important facet of eZine is that it's a framework, a template that presents information in a standard form. With it you can incorporate many of the other scripting options covered in this book-online chat, form processing, and advertising. The design also integrates with virtually any kind of site. If your Web site consists of a main access point (home page) with several subsections, it could probably benefit from the framework. Browse the companion CD-ROM to see an adapted version of the eZine framework to categorize the data.
Any magazine, electronic or otherwise, consists of the following parts:
A title
A table of contents
Many articles
The eZine framework extends this configuration by adding two additional components:
Figure 24.1 shows what the user sees when the browser window divides into the following frames:
Additional sections can be treated as additional articles, making the extension of this framework a straightforward process. The source code on the CD-ROM is thorough, so we'll look only at the important points within the chapter.
One eagerly awaited feature of JavaScript is the ability to load source code from an external file through the addition of an SRC attribute to the <SCRIPT> tag. This makes it possible to create libraries of routines that can be pulled into any page, reducing the amount of replication needed when scripting a site. As of Navigator 3, you can now relocate your JavaScript source in an external file with a tag like:
<SCRIPT LANGUAGE="JavaScript" SRC="myScripts.js">
However, only Navigator 3.0 currently supports this feature. If you want to maintain some backward compatibility with people using earlier versions of their browsers that may still support JavaScript, questions arise: Do you double the amount of work you must do to maintain your site, or do you restrict site access to those who are using the latest browser versions?
While doubling the amount of work isn't an acceptable option, restricting access may not be either. What you're presenting to the Web may be of a specific nature. If your site, for example, is dedicated to these new technologies, restricting access may be practical. If you're building a more general site, however, you don't want to restrict surfers simply because they choose to use another or earlier type of browser.
Fortunately, the framework presented here takes this into account by showing you another way of centralizing source code that works under all versions of browsers with JavaScript support. It relies on the fact that JavaScript-enabled browsers also support frames, and that it's possible to create a frame that takes up the entire client area.
Listing 24.1 is a fragment of the index.htm file, the main entry point into the site.
Listing 24.1
<FRAMESET ROWS='100%,*'> <FRAME SRC='index2.htm' NAME='_main' FRAMEBORDER=0 BORDER=0> <FRAME NAME='_dummy' BORDER=0 FRAMEBORDER=0> </FRAMESET>
This sets up one frame, _main, as the topmost frame of the site and gives it the entire client area to display its content. The file loaded into _main, index2.htm is the actual index that breaks the page into the various frame parts, creating a loading structure as shown in figure 24.2.
While Navigator and Internet Explorer frames have 100 percent of the client area, they don't like a top-level frameset that has only one frame. To satisfy the HTML parser, define a second frame called _dummy, as a place holder. It has no height and doesn't affect the visual display.
Now that this fake frame is created, you can place all of the JavaScript methods in index.htm. These can be referenced from any document within the frame tree using the special JavaScript reserved word top, which accesses the topmost window or frame of a tree:
top.functionName(...);
This is used to centralize the JavaScript functions that display
notices within the browser's status bar. It is still necessary
to define the strings to display within the respective documents,
but you don't need to copy the message display function into each
file.
CAUTION |
This structure makes the assumption that _main will be the top-level frame. Some sites, especially reference sites that have links to other places on the Internet, may themselves be framed and, erroneously, could open your site within their own frame structure, effectively breaking the design. To make sure this does not happen, change the way you access _main by referencing it from the position of the current document within the frametree, as in: parent.parent.functionName(...); Keep in mind that to do this you must access the "parent" of your "parent" (as shown), because _main (effectively index2.htm) sits within the tree as well. An easy way to remember this is to look at figure 24.2 and, starting from the frame you're in, for each level you have to move through to get to top, add another parent. To get from Body to top, for example, you must move 2 levels up, hence the use of parent.parent.... instead of just parent..... |
There is one last caveat to consider when using this technique. If you look in toc.htm, you'll see that the individual links are defined as follows:
<A HREF="story1.htm" TARGET="Body" ONMOUSEOVER="return top.message(window, msg['story1']);">Story 1</A>
The message() function, which copies the string passed to it into the status bar, requires that you send the window parameter to pass a pointer to the current window. Without this, JavaScript can't resolve the status property, which is part of the window object, and won't set the text correctly. This is actually quite common for any functions that (if included directly within a document) rely on the self keyword to resolve the desired object. The minute you start to reach from one frame into the next, self is no longer guaranteed to work correctly, and you need to pass "window" to force the correct resolution.
In addition to JavaScript support, with the release of Internet Explorer 3.0, Microsoft added frame support, including the ability to make the frame borders invisible. This is also present in Navigator 3.0, but for those using earlier versions of Navigator, the site would look like figure 24.3.
Internet Explorer and Navigator compute frame sizing differently. Each browser utilizes different metrics for internal page margins. Text can look great under one browser but appears at the bottom of the frame and clipped in the other. Surfing the Web produces countless examples of this, making it easy to identify sites that were designed with only one browser in mind.
This is when to use the Gatekeeper technique. It requires you, unfortunately, to create two complete sites: one optimized for Navigator and one for Internet Explorer. In other words, this is not necessarily the best option.
| NOTE |
For more information on the Gatekeeper system, see chapter 1, "Browser Identification." |
For the purposes of the eZine, the only major difference between Internet Explorer and Navigator is in the sizing of certain frames. The rest of the documents load equally well under either browser, so all that really needs to be done is to selectively configure the frame sizes to the particular browser. Because JavaScript allows you to write straight HTML out to the document stream, you can easily accomplish this by wrapping the <FRAMESET> tags (from index2.htm) with some scripting code to create the appropriate sizing. This is shown by the code fragment in listing 24.2.
Listing 24.2 Browser-Specific FRAMESET Generation from index2.htm
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
if(top.isNetscape()) {
document.write("<FRAMESET ROWS='40,*'>");
document.write(" <FRAMESET COLS='100,*'>");
} else {
document.write("<FRAMESET ROWS='32,*' FRAMESPACING=0>");
document.write(" <FRAMESET COLS='90,*'>");
}
document.write(" <FRAME SRC='home.htm' NORESIZE NAME='Home'");
document.write(" MARGINWIDTH=0 MARGINHEIGHT=4 SCROLLING=NO>");
document.write(" <FRAME SRC='title.htm' NORESIZE NAME='Title'");
document.write(" MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO>");
document.write(" </FRAMESET>");
if(top.isNetscape()) {
document.write(" <FRAMESET COLS='100,*'>");
} else {
document.write(" <FRAMESET COLS='90,*'>");
}
document.write(" <FRAME SRC='toc.htm' NORESIZE NAME='TOC'");
document.write(" MARGINWIDTH=1 MARGINHEIGHT=4 SCROLLING=NO>");
document.write(" <FRAME SRC='cover.htm' NORESIZE NAME='Body'");
document.write(" SCROLLING=AUTO>");
document.write(" </FRAMESET>");
document.write("</FRAMESET>");
// end hide -->
</SCRIPT>
This takes advantage of code centralization to store the isNetscape() function in the master frame. It simply scans the navigator object for the necessary identification string:
function isNetscape() {
return navigator.appName.indexOf("Netscape") != -1;
}
A matching function, isMicrosoft(), checks for the string Microsoft and can be used elsewhere in the framework to handle Internet Explorer-specific behavior.
Not everyone likes frames because they use up screen space and, if not properly designed, they produce sites that don't look esthetically pleasing when viewed under certain browsers. Not wanting to get into the framed versus non-framed debate, the eZine framework offers the option for the user to turn frames off.
Turning frames off is accomplished by providing an additional option in the table of contents that reloads the current contents of the Body, one frame-level up. This eliminates all subframes. The code to display this link (listing 24.3) is found in toc.htm.
Listing 24.3 An Option to Eliminate Frames from toc.htm
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
if(parent.Body) {
document.write("<A HREF='");
if(top.isNetscape()) {
document.write(parent.Body.location.href);
} else {
document.write(parent.Body.location);
}
document.write("' TARGET='_main' ");
document.write("ONMOUSEOVER=\"top.message(window, msg['noframes']);\">No Frames</A>");
}
// end hide -->
</SCRIPT>
This code block writes out a link that, when clicked, grabs the URL currently loaded in Body and loads it into _main. While this erases the visual subframes, all JavaScript code is kept in memory because it's stored in the top-level file. This makes it possible to continue to provide scripting support even in non-frame mode.
Notice that this code block is wrapped with a test for parent.Body. If frames have been turned off, then "parent.Body" is equal to null (JavaScript's way of saying an object isn't defined), and attempting to reference any properties of "Body" (such as the location object) generates an error. By testing parent.Body first, you make your pages very dynamic-the "NoFrames" hyperlink displays only if frames are on. This same technique can also be used to display a navigator bar at the bottom of an article page if frames have been turned off, which will be demonstrated later in this chapter.
An additional check using isNetscape() resolves how to access the location property. Under Navigator, location is an object and you reference its href property to get the URL of the document. Under Internet Explorer, location is a simple property that you set directly. Under either browser, trying to access "location" the wrong way generates an error or sets the HREF attribute to a null value. A null value results in another error when the link is clicked.
Finally, once frames are turned off, another method of navigation through the eZine is required. Within the framework, this is handled by displaying the familiar text-based navigation bar across the bottom of the page. Because this bar is necessary only when running in frameless mode, the HTML that displays the bar is wrapped in more script code (listing 24.4).
Listing 24.4 A Frame-Sensitive Navigation Bar
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
if(!parent.TOC) {
document.write("<HR>");
document.write("<CENTER>[ ");
document.write("<A HREF='cover.htm' ");
document.write("ONMOUSEOVER=\"top.message(window, msg['cover']);\" ");
document.write(">Coverpage</A>");
...
document.write(" | ");
document.write("<A HREF='index2.htm' ");
document.write("ONMOUSEOVER=\"top.message(window, msg['frames']);\" ");
document.write(">Frames</A>");
document.write(" ]</CENTER>");
}
// end hide -->
</SCRIPT>
Using the same trick demonstrated in listing 24.3, the navigation bar is wrapped with a "are frames on?" check-this time for parent.TOC, the table of contents frame. If "TOC" doesn't exist, the navigation bar is written to the document stream.
The last element of the navigation bar is a link to return to framed mode. This is accomplished by reloading the frame control file "index2.htm" back into _main. It's not necessary to specify a TARGET attribute because this link displays only when running in frameless mode; hence, all pages are already being loaded into _main.
Copying this code block into each article file makes the entire site capable of being browsed without frames and retains the scripting functions so that status bar messages or anything else works properly. Any additional scripting tricks that you want to make available to frameless mode need only be wrapped with a check for "parent.TOC." Listing 24.5 places the eZines at the top of the cover page. It normally is in the Title frame.
Listing 24.5 Displaying the eZine Title in Frameless Mode
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
if(!parent.TOC) {
document.write("<CENTER>");
document.write(" <H2>");
document.write(" <FONT COLOR=#0000F0><I>eZine's</I></FONT>:");
document.write(" Personal Online Publishing</H2>");
document.write("</CENTER>");
document.write("<HR>");
}
// end hide -->
</SCRIPT>
With the exception of allowing for one more scenario, the framework structure is complete. This scenario is a totally frameless browser, such as Mosaic.
If you've done any surfing with a browser other than Navigator or Internet Explorer that doesn't support frames or JavaScript, you no doubt have encountered sites that display either a blank page or a one- or two-line note that you need to upgrade your browser before you can continue. While more and more of the online community is surfing (compliments of Netscape and Microsoft), there is still a sizeable chunk of surfers who choose to use another program. With only a little more effort, the eZine framework extends to permit these users to also enjoy your site, providing an interface like the one shown in figure 24.4.
The first step is to include a <NOFRAMES> block in the index.htm file. This contains the contents of the <BODY> block from cover.htm. After that, adding one more script block to each of the article files creates the navigation bar (see listing 24.6).
Listing 24.6 A Navigation Bar for Browsers that Doesn't Support Frames
<SCRIPT LANGUAGE="JavaScript"> <!-- --><HR> <!-- --><CENTER>[ <!-- --><A HREF="index.htm">Coverpage</A> <!-- --> | <!-- --><A HREF="story1.htm">Story 1</A> <!-- --> | <!-- --><A HREF="story2.htm">Story 2</A> <!-- --> | <!-- --><A HREF="story3.htm">Story 3</A> <!-- --> | <!-- --><A HREF="story4.htm">Story 4</A> <!-- --> | <!-- --><A HREF="story5.htm">Story 5</A> <!-- --> ]</CENTER> </SCRIPT>
This takes advantage of one other peculiarity in the JavaScript interpreter. Any line within the <SCRIPT> tag that starts with a comment tag pair (<!-- -->) will be ignored by a JavaScript-enabled browser. It is treated as regular HTML by any other browser. Effectively, this hides the raw HTML from JavaScript-enabled browsers, and permits you to take this code block and include it in each article file along with all the other code blocks. Only one navigation bar displays. Which bar depends on the browser and whether you're running in frame or frameless mode.
This chapter presents a framework for the creation of an eZine using JavaScript as the primary scripting language. It also demonstrates several tricks in design, including centralizing JavaScript source code within a master frame. Having to maintain multiple script blocks, support for various browser quirks, and support for frameless browsers and browsing takes time. While this may seem like a great deal of work, the end result is a comprehensive collection of scripting tools that creates a site that can be enjoyed by anyone, regardless of the browser used.
Because this is a framework, you can use many of the tricks and scripts found in other chapters within this design, such as: