retrieval system without
prior written permission of the publisher except in the case of brief quotations
embodied in critical articles and reviews. Making copies of any part of
this book for any purpose other than your own personal use is a violation
of United States copyright laws. For information, address Que Corporation,
201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.
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
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.
Corel Vector Graphics 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.
Using Plug-In Based FormatsThere 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.
For technical support for our books and software contact support@mcp.com
Copyright ©1996, Que Corporation