 |
Notice: This material is excerpted from Special Edition Using JavaScript, ISBN: 0-7897-0789-6. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.
Netscape Navigator allows you to extend its functionality almost indefinitely using a new construct called a plug-in. Other programs, such as Adobe's Photoshop, have used the concept of plug-ins for some time. In Photoshop, plug-ins act as enhanced filters that allow the image designer greater flexibility in either manipulating an image or converting that image into another format. Basically, plug-ins enhance the abilities of their host application. Before plug-ins, the only way you could handle new data types (say a JPEG image) in a Web browser environment was through linking subsidiary programs to your browser called helper apps. Helper apps are small, usually specialized programs (or applications-thus the name apps) that receive a file of a specific type from your Web browser and display, or otherwise load, and interpret that file.
For example, in the early days of the Web, the popular browser of the time-Mosaic-would not allow you to view JPEG images inside the page. You had to click the JPEG link, and watch as the browser downloaded the file, then launched some viewer (Jpegview, for example, on Macintosh). Dealing with helper apps was at best a confusing process where the user had to manually configure the browser to find the helper app (assuming that you had already downloaded it and configured it correctly). You had to deal with directory paths, temporary files, missing helper apps, and so on.
When you viewed a Web page with a new file type, you usually had to temporarily launch a new application and leave the web browser (perhaps hidden behind the new window of the helper app). This would be equivalent to working on a file in Microsoft Word, and having to launch NotePad every time you wanted to read a plain text file.
Netscape has improved upon this relatively clumsy system with its plug-in architecture. Instead of using a helper app and manually configuring the browser to launch it, you, as a Web user, simply download the correct plug-in, drop it into the correct folder (or point the installer to the correct directory), and launch Netscape. Instead of viewing the new data in a separate window/application it is now inlined in the browser. Inlined refers to the fact that you see the information in a box within the browser window. An example is to see an MPEG file that you can play inside the browser window beside some text and links that might explain the MPEG movie.
This chapter will answer the following questions:
Before we talk further about Plug-ins, you might be curious as to the differences between Netscape plug-ins and helper apps. Both of these act as a way to augment the browser's viewing capability, and expand the number of file types that the browser can handle. The advantage of the plug-in is that it is more closely integrated with the browser's environment. The API for creating a plug-in is freely available from Netscape's web site, and this allows 3rd party developers to create new "mini-apps" that can be more closely managed by the browser. Plug-ins can be loaded and unloaded from memory on the fly--using your RAM more effeciently than helper apps, which commonly will remain active even after you've left the site you were viewing, or even after you've exited your browser all together. Figure 10.1 shows how a Quicktime Movie file would look using a helper app (Movie Player) and 10.2 shows how an MPEG might look within a browser page.
Fig. 10.1 A Quicktime movie as seen in a help application (Movie Player)
Fig. 10.2 An MPEG movie as seen in a browser using an MPEG viewer plug-in.
Plug-ins will allow you to seamlessly integrate new content within your pages. Since Netscape can determine which plug-ins your client browser currently has--you will be able (in future versions of JavaScript) to check the client browser to see if it has the correct plug-in and display the file accordingly. If it does not, your JavaScript can display another default format. To view the current list of plug-ins your browser has, select File - Open Location, and type about:plugins. This will display a list of the plug-ins your browser uses. If you currently dont have any plug-ins, you will still see a "*" which represents a default plug-in. In Netscape 3.0, there will be a two new sub-objects of the navigator object that can also get this information: navigator.plugins and navigator.mimeTypes (see MIME types next section).
Netscape plug-ins depend on a system of file type identification called MIME types. MIME stands for Multi-purpose Internet Mail Extensions. Originally devised as a way to allow e-mail applications to view new multimedia file types, it has become the standard way in which Internet applications learn about the type of file that is being retrieved from the Internet. MIME can handle just about any kind of format that has been created to this date. This includes text formats, images, sounds, movies, compressed files (like ZIP and TAR files), PostScript, and many others. All web browsers and most internet software depend on MIME types to tell the software how to handle each new file downloaded.
You may have noticed when using helper apps that every app has an associated MIME type and file extension-such as .AVI. Most data formats you encounter via the Web have an associated MIME type. For example, a Windows AVI file would have a MIME type of video/x-msvideo. The first part of that type is the Content-type, which defines the major scope of this file-for example video, multipart, audio, application, or text.
The second part, after the slash, refers to the subtype, which is usually the specific type the browser needs to interpret the file-such as postscript. If you view the Helpers window of your general preferences, (in Netscape 2.0 select Options - General Preferences - Helpers) you will find many examples of MIME types (see table 10.1). When you encounter something like application/x-gzip the Òx-Ó usually indicates that the subtype is a proposed standard and is often used for newly developed file types, or ones that have yet to gain wide acceptance. If you read through your Helpers window in Netscape you will begin to become familiar with the kinds of MIME types that your browser can handle.
When the Navigator starts up, it scans its Plug-ins folder and "registers" a given MIME type to the corresponding plug-in that can read files of that type. Then, when that type is encountered in a Web page, an instance of that plug-in is loaded into memory and the information is used in one of three ways. It may be displayed inline (as in the MPEG file example in figure 10.3) -which is also called embedded; full page (for example an Adobe Acrobat file in figure 10.4) where the entire window under the nav-buttons is occupied by the plug-in; or hidden as in the case of a MIDI sound player which may not have any information displayed in the window, but plays in the background (which I cannot show here...).
Fig. 10.3 An MPEG file viewed inside Netscape.
Fig. 10.4 An Adobe Acrobat file viewed in Netscape.
Each plug-in may be capable of handling more than one MIME type-for example, a sound player that reads both AU and MIDI sound types. Another example would be an image viewer that reads progressive JPEG and regular JPEG.
Fig. 10.5 Midi file player within a browser window.
Although each plug-in may read more than one file type, two plug-ins cannot both read the same file type. During the registration process, only the first plug-in encountered is used. Table 10.1 lists briefly the most common MIME types.
|
Table 10.1 Common MIME types |
|
|---|---|
| Content-Type | Subtype |
|
text |
text |
|
richtext |
|
|
enriched |
|
|
tab-separated-values |
|
|
sgml |
|
|
multipart |
mixed |
|
alternative |
|
|
digest |
|
|
parallel |
|
|
form-data |
|
|
message |
rfc822 |
|
partial |
|
|
external-body |
|
|
news |
|
|
application |
octet-stream |
|
postscript |
|
|
oda |
|
|
mac-binhex40 |
|
|
wordperfect5.1 |
|
|
|
|
|
zip |
|
|
cybercash |
|
|
image |
jpeg |
|
gif |
|
|
tiff |
|
|
audio |
basic |
|
32kadpcm |
|
|
video |
mpeg |
|
quicktime |
|
If you decide to use a new file type in your site, you need to make sure that the Web server is configured to send the appropriate MIME type to the browser. This is so the web browser interprets the file correctly and loads the right plug-in.
Once you decide on a new format you wish to support on your Web site, you need to add the correct tags to display that file. You usually can just create a link to the file via a URL such as
<a href=Òhttp://foo.bar.com/whoopie.AVI">Whoopie!</a>
However, you need a new tag to display that format from within the page itself. You do this with <EMBED>. This tag must include the attributes that determine the size and kind of plug-in to be called, as well as special information specific to that plug-in. Its syntax is as follows:
<embed src=ÒfilenameÓ width=ÒnumÓ height=ÒnumÓ palette=Òforeground|backgroundÓ>
There are also additional attributes specific to the plug-in. For example,
<EMBED
SRC=Òtheavi.aviÓ
WIDTH=Ò300Ó
HEIGHT=Ò200Ó
AUTOSTART=true
LOOP=true>
Although this format is in wide use today-and will continue to be supported-the fact that you can add unlimited attributes to this tag such as FOO=""HI"", MY=""WIFE"", and so on, does not conform with the rest of the HTML specification and will be replaced with a new tag called the INSERT tag. This tag is being developed by the w3.org as a replacement for many of the existing tags that insert multimedia objects in Web pages.
The World Wide Web Consortium
The World Wide Web Consortium (at www.w3.org) is an organization that develops standards for the web. It is based at the Masachusetts Institute of Technology, run by the Laboratory for Computer Science. It acts as a single point of information about the web, develops reference programming code to implement standards, and develops standards through Internet Drafts (documents which specify developing standards). This is the organization that developed the HTML 1.0 and 2.0 standards, and are working towards new standards based on a proposed 3.0 version.
The following is an example of the proposed <INSERT>.:
<insert data=TheEarth.avi
type="application/avi">
<param name=loop value=infinite>
<img src=TheEarth.gif alt="The Earth">
</insert>
There are a large number of attributes associated with the INSERT tag; these are summarized in table 10.2.
|
Table 10.2 INSERT Tag Attributes |
|
|---|---|
| Attribute | Description |
|
ID |
Used to define a document-wide identifier. |
|
CLASS |
A space separated list of SGML NAME tokens. |
|
LANG |
An attribute that identifies the natural language used by the content of the associated element. |
|
DIR |
Specifies the direction in which the tokens should be read. For international adaptability. |
|
STYLE |
An attribute that allows you to include rendering information. |
|
CLASSID |
Used to specify a class identifier for an object. |
|
CODE |
Specifies a URL referencing where to find the code that implements the object's behavior. |
|
DATA |
Specifies a URL referencing the object's data. |
|
TYPE |
The MIME type of the object. |
|
ALIGN |
Determines where to place the object; it can be TEXTTOP, MIDDLE, TEXTMIDDLE, BASELINE, or TEXTBOTTOM. |
|
WIDTH |
Width of the box enclosing this area. |
|
HEIGHT |
Height of the box enclosing the object. |
|
BORDER |
An attribute that applies to the border shown when the object forms part of a hypertext link, as specified by an enclosing anchor element. |
|
HSPACE |
The amount of space beyond the left and right of the box containing the object. |
|
VSPACE |
The minimum space above and below the box containing the object. |
|
USEMAP |
If used as an imagemap, this specifies the location of the client-side imagemap. |
|
ISMAP |
If used as an imagemap, this specifies the URL of the map file on the server. |
To further expand this tag to accommodate plug-ins and applets like JAVA applets, there are two other elements-the PARAM tag and the ALIAS tag. With Java, you would use the PARAM tag in the same way you do with the existing <APPLET> tag:
Listing 10.1 Java Applet usin INSERT tag
<insert
classid="java:NervousText.class"
code="http://java.acme.com/applets/NervousText.class"
width=400
height=75
align=baseline
>
<param name=text value="This is the Applet Viewer">
</insert>
The PARAM tag can take these attributes, as follows:
The ALIAS tag allows you to define an object without actually inserting it into the page. It is used along with the VALUEREF of the PARAM tag. It can take the following attirbutes:
Until this specification is implemented by the major browsers, you should continue to use the EMBED tag.
Why us a plug-in? Is it really worth my time to set up my server and learn all of this new HTML? Yes. Many Web sites now display mostly text, with a scattering of pictures which are mainly GIF and JPEG files. Although this is adequate for most standard Web sites, it is very static and really rather boring after someone visits there more than once. The growth of the Web has pushed developers to find new ways to attract people to come to their sites. A dynamic new format-such as Shockwave files-add an entirely new level of interactivity to the Web and allow Web sites to explore new ways to express their creativity. Also, there are many file formats such as Microsoft Word DOC files that most Web browsers cannot read, even though that format is commonly used outside the Web.
Plug-ins of this type allow sites to leverage their existing files, and take the advantages of that format to the Web. Netscape's site and Browserwatch (http://www.netscape.com and http://www.browserwatch.com/plug-in.html) provide the Net community with a large list of available plug-ins, and are very likely to have a more up-to-date list of plug-ins than the list that follows, but the list is provided so you can begin to see what kinds of plug-ins are being developed.
These plug-ins allow you to read text-based formats that Netscape cannot read on its own. Many of these take over the browser window entirely in order to view the new file format, although Netscape's navigational buttons still appear at the top. Note that already popular word processing formats like Microsoft Word are viewable by Netscape because of plug-ins.
These plug-ins allow you to view three dimensional models -either in-lined (in a specified box size) or in an entirely new browser window. Live3d from Netscape uses a new format for VRML 2.0 that allows for motion, sound, and behaviours using Java.
These are the fastest-growing and most interesting of the plug-ins. These (and many others, by the time you read this) display animation, sound, and interactivity that will dramatically change the way a web page is used by web site developers. For instance, Shockwave, from Macromedia allows you to play small arcade-style games in a browser window, or display an interactive kiosk-style demo of a college campus.
There are many more plug-ins available, most of which are available for the Windows 3.1 and Windows 95 operating systems. Macintosh plug-ins had a late start due to Netscape delaying the standardization of its Macintosh plug-in API, but, as of this writing, there are many new plug-ins for Mac. There will be UNIX-based plug-ins in the future as well, but the SDK (software development kit) for that operating system was only released a few months ago as of this writing.
There are many factors a web designer must take into consideration when they design online content for the web. There are a few factors that I tend to use when I start a web-based project that seeks to use plug-in based formats: Simplicity, Size, Appropriateness, and Ubiquity. Below are questions you might ask yourself that address each of these factors:
Might this information be displayed just as easily in an existing format? (Simplicity)
Just because you can use a plug-in specific format doesn't necessarily mean you should. If you have image files you want to display and you can convert them to GIF or JPEG, you should consider doing that instead. It dramatically improves the chances of your images being seen. Although both Netscape and Microsoft Internet Explorer use plug-ins, many older browsers cannot, and you will not reach as many people with your images as you would using the tried and true image formats.
Will these files increase the load on my server because of their size? (Size)
Some file formats were not originally intended to be sent down the Internet pipeline, and thus they may huge in size. If you force someone to download these files, be prepared to see a large load increase on your Web server, and probably a decrease in the number of hits your site receives.
Is this format appropriate for my intended audience? (Appropriateness)
Sometimes a specific file format is inappropriate for a given Web audience. If you are targeting modem users, you might not want to use large files, or if you are simply writing documents, PostScript might be overkill for what you want to display. One good rule of thumb is KISS: Keep It Simple, Silly.
Is this format widely accepted? (Ubiquity)
As the number of plug-ins grows dramatically, you will begin to encounter competing plug-ins for the same MIME types, or differing types that do effectively the same thing for your Web site. For example, Macromedia's Shockwave plug-in has recently seen competition for multimedia viewing with a plug-in called Sizzler. You should do some research into the most prevalent type of plug-in for your media type, or style of display, before you invest a lot of time in developing content for a media type that is too new, too obscure, or too out of style. All of these things decrease the chances that people who come to your site will have the same plug-in that you intend to be used for this type, and most likely they will not take the time to divert themselves from their browsing path just to get your specific plug-in.
Can I use multiple plug-in types on a page?
Using more than one type of plug-in oriented file format on a page is asking for trouble at this stage of the Web. For every plug-in that you introduce to your page, you increase the memory requirements of the browser that uses the plug-in.
Note, however, that once you leave a page with a given plug-in, the browser frees up that memory for use by other plug-ins. So if you want to display many different media types requiring different style plug-ins, you might want to separate them out into different pages. Also, you should test your site on the lowest level computer system that you expect to browse your site and see how the increased memory requirements affect it.
Is this plug-in cross-platform?
A lot is being said and done about Java these days, and with good reason. Java is hoping to become a completely cross-platform way of running distributed applications across the Net. Its main selling point is that it's cross-platform. If the kind of file-type you want to display via a plug-in requires a plug-in that is only available for only one operating system (since plug-ins are OS specific) you might want to reconsider using that plug-in until it does become cross-platform. If not, you will be effectively cutting off anyone who uses that other OS from seeing or enjoying your nifty movie or slick sound file. If you must use that plug-in type, you should consider offering an alternate route for others to see that information.
Included on the CD-rom are a number of plug-ins for you install on your machine to enhance Netscape.. Before you take all of these plug-ins and fill your Plug-ins folder (or directory, for you DOS folks), remember that some plug-ins overlap in the kinds of media types they read, and others you might never use (such as a CAD reader, when you don't use CAD tools or are interested in CAD).
Figures 10.6 through 10.9 are images that display a few of the many kinds of plug-ins you might encounter on a Web site. These give you an idea of how to incorporate plug-ins in your own pages.
Shockwave is a plug-in that allows you to view Macromedia Director files within your browser. Director files originally weren't designed for sending across the Internet, and tend to be large. So Macromedia created a small utility called AfterBurner, which takes a native DCR file and converts it into a "shocked" file. The resulting file is much smaller, and has the added benefit that it can no longer be edited by someone else using Director,which discourages others from decomposing a Director file and stealing its elements. An example of a Shockwave game is shown in figure 10.6.
Fig. 10.6 Macromedia Shockwave
Adobe Acrobat allows you to have much larger control over the layout and formatting of your documents. You can have layered images, hyperlinks, and embedded images all within a single PDF file. Now that you can view these files using Acrobat Amber, you can publish those files across the web. Figure 10.7 is an example of an Acrobat file.
Fig. 10.7 Adobe Acrobat plug-in example.
Inso (http://www.inso.com/) Corporation has developed a Microsoft Word 6.0 (and 7.0) document viewer. The uses of this plug-in should be quite obvious in that you need not even save the file in a different format to allow others to view your Word files. All files from 6.0 and earlier are now available for publishing via the web. Figure 10.8 shows a small example of a word format file.
Fig. 10.8 Microsoft Word plug-in example.
Originally called the Virtual Reality Markup Language, which points to its association with HTML, this language specifies how 3-d images can be displayed across operating systems, and also allows for low- and hi-res image loading across the Internet, lighting, shading, and much more. Netscape's Live3d adds a new dimension with movement and Java support. Figure 10.9 is an example of a VRML file.
Fig. 10.9 Live3d (a VRML viewer) plug-in example.
Now that you have seen and learned about plug-ins, you are probably wondering how JavaScript is able to communicate freely with these plug-ins and Java applets. As of the time of this writing, the specifications for that communication have not yet been released to the public. You can, though, use JavaScript to control the EMBED tag just as you would control other tags. Suppose you had a plug-in that displayed a clock based on a file it uploaded and the TIME parameter. You can create a JavaScript that takes the current time and sends that time to the plug-in on loading. The following is a code snippet:
var currentTimeObj = new Date() var theTime = currentTimeObj.getTime document.write(Ò<embed src=ÔtheClock.timÕ height=50 width=50 TIME=Ò + theTime+ Ó>Ò)
This gets the current time that the client has on his machine and displays the clock in the correct way. The only other way to do this is to use a server script that might build the correct HTML, but the time would be subtly off due to location differences.
You can also use a little JavaScript snippet of code to check if a browser has a given plug-in and displays your page accordingly. This is accomplished by very briefly opening a sub-window and attempting to open a file of the given MIME type in that window. If the plug-in exists, then the script returns true. This code only checks to see if your browser has any plug-in that reads that MIME type, not a specific plug-in. See listing 10.2 for an example.
Listing 10.2 Checking the MIME type in JavaScript
function probePlugIn(mimeType) {
var havePlugIn = false
var tiny = window.open (Ò Ò, ÒteensyÓ, Òwidth=1, height=1Ó)
if (tiny !=null) {
if (tiny.document.open(mimeType) !=null
havePlugIn = true
tiny.close()
}
return havePlugIn
}
To test for a specific plug-in, say Shockwave (or some other Director plug-in), you use the following:
var haveShockWavePlugIn = probePlugIn (Òapplication/x-directorÓ)
If the browser has the Shockwave plug-in, the value of haveShockWavePlugIn is true.
I also mentioned, earlier in this chapter that a future version of Netscape will have two new objects: navigator.plugins and navigator.mimeTypes. Navigator.plugins will be an array of all the plug-ins that the client browser supports, and navigator.mimeTypes will be an array of all the MIME types that the browser supports, which will include not only the plug-ins but also the browser's own support, and any helper apps.
Once these objects are available in JavaScript, you should be able to access this information quickly, and perhaps even change the properties of the plug-ins.
|
|