The Web has always been a place of graphics and sound, but until Netscape introduced the concept of a plug-in, you were limited to static pictures, simple sounds, and the use of helper applications-even if the online content got too fancy for the browser alone to handle.
Plug-ins require the installation of additional software that takes advantage of the new technology. Without it, a page "breaks," displaying a "cracked" icon in place of your graphic work.
Plug-ins and helper applications both view content
that the browser wasn't designed to handle. They both run the
same way-the browser checks each content object loaded against
a master list of what program can handle the particular object.
If a match is found, the corresponding plug-in or helper launches
to handle the object. At this point, however, the similarity ends.
An Object-Oriented Web? |
You'll encounter the term object often when dealing with the Web, and it bears a little explanation. As far as the Web is concerned, anything and everything that's included within an HTML page (graphics, hyperlinks, text, forms, multimedia files, anything) is considered an object. For many of the common object types such as GIF, .JPG, and plain old HTML, the browser itself is considered a "helper," with the program to handle that particular object built in. This makes it possible to reconfigure the browser and have even these common types handled by other programs. |
After helper applications launch, they run within their own windows like regular programs. The user must then switch between the browser window and the helper window as well as manually close the helper down.
Plug-ins, however, run within the browser's client area and appear to be part of the Web page. If there are any additional controls (buttons, gauges, sliders, and so on) needed by the plug-in, they become embedded in the Web page (see fig. 2.1).
In order for the Web server to properly transmit an embedded object, it needs to know what mime type identifier to send to the browser. Whenever a server sends an object, like an HTML file, an image file, or a QuickTime movie, it's prefaced with a header that contains information that informs the browser about the kind of data that's going to arrive. MIME (Multi-Purpose Internet Mail Extensions) is a freely available specification that provides a way for computers to exchange:
Text in different character sets
Graphics
Sound
Multimedia
Just about anything else
A defined list of mime types accomplishes these tasks. Additionally, the standard is open-ended, and additional types can be defined by anyone. When two computers exchange information (as in a Web session), MIME helps both sender (server) and receiver (browser) figure out what to do with the data.
In order for this system to work properly, the server must know the proper MIME type identifier to transmit to the browser. For most commercial systems, the Web administrator handles this through the server's configuration files. If this is not your case, specify the MIME-type declaration locally within your own directories by adding a type-identifier line to a configuration file. The required name of this file is dependent on the configuration of your server. It is often called .htaccess and is placed in the same directory as your home page. You may need to contact a Web administrator for further information. An example .htaccess file is:
Options All AddType application/x-director .dcr
This instructs the server to transmit any file ending with .dcr
to the browser with an application/x-director
MIME type, and instructs the browser to feed the file to Shockwave,
assuming it is installed.
| NOTE |
The .htaccess file controls how the Web works for the directory and is located in all subdirectories. Because of this, you may have multiple .htaccess files in different directories. This can be beneficial when trying to control access to parts of your site. Chapter 6 "Controlling User Access," covers this in more detail. |
Each type of multimedia file has a different MIME type. To determine what the correct type identifier is for a particular file, contact your Web administrator or check out the home page of the company that developed the plug-in or helper application.
After configuring the server to deliver the files correctly, all that's left is to inform the browser where to put the object (the multimedia file) on the page. You can accomplish this with the HTML <EMBED> tag:
<EMBED SRC="srcfile" WIDTH=x HEIGHT=y>
where:
CAUTION |
The values of the WIDTH and HEIGHT attributes include the size of the multimedia image as well as the space taken up by any controls the plug-in creates. The QuickTime plug-in, for example, adds a control bar at the bottom of the frame. Add the size of the control bar to the height of the movie. Depending on the plug-in, if the attributes are set too small, part of the displayed file may be clipped. When designing pages that utilize plug-ins, remember to test the pages to make certain that any controls are also visible. |
Browsers that can't handle the <EMBED> tag simply ignore it and display nothing. To provide a viewing alternative for these browsers, you can include a <NOEMBED> tag block immediately after the <EMBED> tag:
<NOEMBED> You really should get the plug-in ... </NOEMBED>
Browsers that support embedding will ignore any <NOEMBED> tag and its contents.
Netscape Navigator 1.1N recognizes the <EMBED> tag and treats it as an OLE link. This means that embedded objects show up as a "broken icon" even if there is a defined <NOEMBED> block. To make matters worse, Navigator 2.x and subsequent versions alert the user to the missing plug-in (fig. 2.1) and ask for help.
| NOTE |
OLE stands for Object Linking and Embedding. It's the mechanism that permits users to take one kind of file, like a graphic or spreadsheet, and "embed" it within another type of file, like a word processing document. |
Fortunately, Netscape 1.1N doesn't recognize JavaScript and makes it possible to wrap the EMBED tag with script code. This ensures that it's only interpreted by Navigator 2.0 or later because Navigator 1.1N ignores everything within the body of the <SCRIPT> tag. The resulting code block shows in listing 2.1:
Listing 2.1 Using JavaScript to Combat Netscape 1.1N
<!-- Embed -->
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
document.write('<EMBED SRC="sourcefile" WIDTH=x HEIGHT=y>');
// end hide -->
</SCRIPT>
<NOEMBED>
<!-- provide a visual placeholder for EMBED-less browsers -->
<IMG SRC="imagefile" WIDTH=x HEIGHT=y>
</NOEMBED>
If the WIDTH and HEIGHT attributes of imagefile match those of srcfile, the placeholder graphic occupies the same space and position of the missing embedded object while keeping your screen layout constant. There are a couple of caveats to this technique:
With the release of Navigator 3.0, JavaScript has been extended in several ways. One extension is the addition of a plugins[] array to the navigator object. The plugins[] array is a complete list of plug-ins currently installed in the browser that were identified by the length property. Within the array, each element has a name property, which is a string holding the name of the plug-in. This makes it possible to determine whether a particular plug-in is installed simply by scanning the array. An example of a JavaScript code fragment that searches for the Shockwave plug-in is indicated in listing 2.2.
Listing 2.2 Identifying the Presence of a Plug-In
var nplug = navigator.plugins.length;
var i = 0;
while (i < nplug) {
if (navigator.plugins[i].name.indexOf('Shockwave') != 1) {
shock = 1;
}
i++;
}
| NOTE |
A sample document that displays all of a browser's installed plug-ins is included on the CD. |
The plugins[] property is only supported by Navigator
3, and as Internet Explorer or earlier versions of Navigator support
it, it's necessary to check if Navigator is being run. If so,
what version is it? This is done by scanning the appVersion
property of the navigator object for the string 2. (that's
a 2 followed by a period). By specifying the decimal
point, you prevent possibly matching 1.2, 3.2, or some other browser
version you're not interested in. By checking the navigator object's
appName property for the presence of Netscape, you determine
whether Navigator or Explorer is being used.
| NOTE |
The JavaScript navigator object is a very handy component because it permits you to do very specific page configurations. These configurations were once restricted to CGI scripting. Because of this, you'll see navigator appear throughout the book, whenever client-side scripting involves browser-specific functions. |
Pulling this all together, listing 2.3 gives you a generic function that identifies whether a given plug-in is installed. If running Navigator 3.0, it searches for the plug-in. If running Navigator 2.0 or Internet Explorer 3.0, it assumes the plug-in is installed. If running anything else, it assumes the plug-in is not installed.
Listing 2.3 A Generic Plug-In Checker
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
function isPluginInstalled(strPlugin) {
var fInstalled = false;
if((navigator.appVersion.lastIndexOf('3.') != -1) &&
(navigator.appName.indexOf('Netscape') != -1) {
var nplug = navigator.plugins.length;
var i = 0;
while (i < nplug) {
if (navigator.plugins[i].name.indexOf(strPlugin) != -1) {
fInstalled = true;
}
i++;
}
}
else
if((navigator.appVersion.lastIndexOf('2.') != -1) ||
(navigator.appName.indexOf('Microsoft') != -1) {
fInstalled = true;
}
return fInstalled;
}
// end hide -->
</SCRIPT>
| NOTE |
The decision to assume the installation of a plug-in under Internet Explorer is purely arbitrary. You can always choose to assume that an Explorer user has no plug-ins and was made in anticipation of both the future support of the plugin[] property by Explorer and the growing number of plug-ins that are becoming available for Microsoft's browser. |
With this little tool, you can customize your pages to display as cleanly (no "broken icons" or irritating "you need a plug-in" messages) as possible, regardless of whether a plug-in is installed or not. A code fragment that uses the isPluginInstalled() function to embed a Shockwave file is demonstrated in listing 2.4:
Listing 2.4 Testing for the Presence of Shockwave
<!-- Embed a Shockwave for Director file -->
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hide
if(isPluginInstalled('Shockwave')) {
document.write('<EMBED SRC="myshock.dcr" WIDTH=100 HEIGHT=50>');
} else {
document.write('<IMG SRC="noshock.gif" WIDTH=100 HEIGHT=50>');
}
// end hide -->
</SCRIPT>
<NOEMBED>
<!-- provide a visual placeholder for EMBED-less browsers -->
<IMG SRC="noshock.gif" WIDTH=100 HEIGHT=50>
</NOEMBED>
Remember that the IMG placeholder needs to be included twice-once for browsers that are JavaScript-enabled but don't have the plug-in (or that can't determine whether it's installed), and once for older browsers that support neither EMBED nor JavaScript.
This chapter examines the different methods used to identify plug-ins installed on a user's browser and gives suggestions for accommodating different browsers.