One of the main attractions of the Web when viewed with graphical browsers and helper applications is that users can encounter multimedia integrated into the hypertext of the Web, creating hypermedia. Integrating images, sound, and graphics with HTML requires some technical skills in sound and image manipulation, understanding and dealing with file formats, and integrating multimedia into a web design.
This chapter is not intended as a guide for users to connect helper applications to a browser (see browser-specific technical documentation for this information). Instead, this chapter presents an overview of the technical formats and tools important for providing information through images, sound, and movies on the Web. Beginning with an overview of multimedia technical information, this chapter outlines multimedia design issues for the Web.
The Web is a very different kind of multimedia delivery system than non-networked forms such as CD-ROM or stand-alone commercial systems for multimedia on personal computers. These non-networked forms of hypermedia delivery often offer a far greater repertoire of possible expression and a far more sophisticated hypermedia development system. These non-networked systems are like television sets connected only to VCRs, however; they can "play" only local content. In contrast, the Web's system for hypermedia is like television with the capability to connect to air or cable broadcasts, giving access to far more content. Networked hypermedia on the Web is also unbound in time/space, bound in use context, distributed, and non-hierarchical, as discussed in Chapter 4, "Web Development Principles and Methodology Overview."
The basis for much of the technical specification for multimedia used with Web browsers and helper applications is Multipurpose Internet Mail Extensions (MIME). MIME is a specification for how computer systems can exchange multimedia information using Internet mail standards. MIME includes specifications for non-ASCII character sets, images, sounds, movies, binary files, PostScript, and other multimedia and binary file formats. In addition to supporting many predefined multimedia file types, MIME also allows the users to define a format type and exchange information using it.
The MIME specification uses a system of message types and subtypes to identify the format of a message. The MIME types are image, audio, text, video, application, multipart, message, and extension-token (any name beginning with x-, an experimental data type). MIME subtypes identify more specifically the contents of the message. The MIME type/subtype text/html, for example, identifies a text file that should be interpreted as an HTML document. The MIME type/subtype video/mpeg identifies an MPEG movie file. The MIME table in Appendix B, "HTML Language Reference," lists other MIME types and typical file name extensions.
A Web server uses file extensions to determine the MIME type and subtype of a multimedia file when it is sent in response to a Web browser request. Files using the .html (.htm for PC users) extension are text/html, for example, and files using the .mpeg (.mpg for PC users) extension are video/mpeg. The Web server sends the message starting with an identification of the MIME content type to the browser. For example, sending an HTML document, the message begins with this:
Content-type: text/html
When a Web browser receives a message, it uses the Content-type:
header to interpret the file. The Web browser also might be able
to guess the file content (if the file was obtained from a non-Web
server such as FTP) by using the file name extensions. The Web
browser then can invoke the helper application appropriate to
this given format. Receiving a video/mpeg message, it can send
the contents to the movie player on the user's system.
| On-Line Tools |
Besides the multimedia tools I talk about in this chapter, you might consider stopping by the many on-line sources of software and reviews. Here are some of the best sites to check: shareware.com (http://www.shareware.com/) An enormous site sponsored by c|net, Inc. This helps you locate all kinds of shareware from an enormous database. You also can get tips here and some information about some of the best shareware software. World File Project (http://www.filepile.com/) Provides access to shareware files on Exec-PC. This site includes an indexed collection of shareware files, including drivers, applications, games, or pictures. ZD Net Software Library (http://www.zdnet.com/zdi/software/index.html) A collection of shareware and packages divided by category, including games, Internet, education, programs and utilities, Windows 95, and editor's picks. This is a useful site to find some of the best software and reviews. Jumbo (http://www.jumbo.com/) Includes many programs in the areas of business, home, programming, utilities, graphics, and more. |
Images and icons are very useful for adding interest to a page, both from the flash point of view (which can be very important for some audiences) and from the information point of view. Images can be very important in many presentations, and the Mosaic browser's original use of images and other multimedia fueled great interest in the Web. Images can have a strong visual impact on a Web site as long as they are not overdone (multimedia overkill) or poorly arranged (clown pants) as described in Chapter 7, "Web Design." Images also are required when using imagemaps (see Chapter 16, "Imagemaps"). Images play a large role in the Web, and placing images in Web pages and having the capability to manipulate them with "tricks" can help a developer make the best use of them.
You can use many tricks to manipulate the placement of text with respect to images. Using the Align attribute of the IMG element, you can set the alignment of text with respect to an image. The HTML document shown in Listing 15.1 is rendered in the Netscape browser as in Figure 15.1 and in the Mosaic browser as in Figure 15.2.
Figure 15.1 : Image placement examples viewed in Netscape.
Figure 15.2 : Image placement examples viewed in Mosaic.
Listing 15.1. An image placement example.
<HTML>
<!-- Image placement and size Example -->
<!-- Author: john@december.com -->
<!-- Date created: 12 Jun 1995 -->
<!-- Upadated: 06 Jul 1996 -->
<HEAD>
<TITLE>Image Placement and Size Example</TITLE>
</HEAD>
<BODY BGColor="white">
<P>
<HR>
Text before <IMG Align="left" Src="stats.gif">Align="left"
<BR Clear="all">
<HR>
Text before <IMG Align="right" Src="stats.gif">Align="right"
<BR Clear="all">
<HR>
Text before <IMG Align="top" Src="stats.gif">Align="top"
<BR Clear="all">
<HR>
Text before <IMG Align="middle" Src="stats.gif">Align="middle"
<BR Clear="all">
<HR>
Text before <IMG Align="bottom" Src="stats.gif">Align="bottom"
<BR Clear="all">
<HR>
Text before <IMG Width="200" Height="100" Align="middle"
Src="stats.gif">Align="middle" Width="200" Height="100"
<BR Clear="all">
<HR>
</BODY>
</HTML>
Notice how the Mosaic browser doesn't recognize the right value for the Align attribute, nor does it recognize the Height and Width attributes. The Mosaic left Align value is for the text relative to the image, allowing the Text before to go to the left of the image. In Netscape, the value left for the Align attributes forces the image to be at the absolute left of the display, pushing the Text before up out of the way.
The Wilbur (HTML 3.2) extensions include the right placement of images on pages as well as the Height and Width attributes for the IMG element. (See Chapter 13, "Advanced HTML 3.2," for information on Wilbur HTML extensions.) The bottom image in Figure 15.1 demonstrates how the original image's height and width (40¥40 pixels) can be stretched to 100¥200 pixels. This option for manipulating size also gives the Netscape browser a hint for the size of an image. If all images on a page have such hints, the Netscape browser can lay out the page and display any text before downloading the images. This is very helpful for users who have a Netscape browser because it speeds up their capability to have something to look at (the text on a page) before the images download. Without these hints, the Netscape browser displays the page before fully downloading all the images, but only after finding out the size of the images; the hints tell Netscape these sizes directly and speed things up.
Images can be created and displayed using many formats. The two display styles for images are inline and linked.
An image used as an inline image follows:
<IMG Align="bottom" Src="stats.gif">
An image used as the destination of a hypertext link follows:
You can view the <Href="stats.gif">statistics</A> image.
The only image format that is nearly universal for inline images among Web browsers is the GIF format. Netscape (and other browser brands), however, recognizes JPEG format as an inline image. For images as destination links, a wide range of types is available for information providers to supply. From the user's point of view, they must have the appropriate image-viewing tool to view the particular file format.
Here are some of the many image formats possible for image viewers:
| BMP | Microsoft Windows BitMaP file |
| CUR | Microsoft Windows CURsor file |
| EPS | Encapsulated PostScript |
| GIF | CompuServe Graphics Image Format file |
| HDF | Hierarchical Data Format file |
| ICO | Microsoft Windows ICOn file |
| ICON | Sun Icon and Cursor file |
| MPNT | Apple Macintosh MacPaint file |
| PBM | Portable BitMap file |
| PGM | Portable Grayscale Map file |
| PIC | PIXAR PICture file |
| PICT | Apple Macintosh QuickDraw/PICT file |
| PICT | SoftImage PICT file |
| PIX | Alias PIXel image file |
| PNM | Portable aNy Map file |
| PPM | Portable Pixel Map file |
| PS | PostScript |
| RAS | Sun RASterfile |
| RGB | Silicon Graphics RGB image file |
| RGBa | 4-component Silicon Graphics image file |
| RGBA | 4-component Silicon Graphics image file with generated alpha |
| RLA | Wavefront raster image file |
| RLE | Utah Runlength-encoded image file |
| RPBM | Raw Portable BitMap file |
| RPGM | Raw Portable Grayscale Map file |
| RPNM | Raw Portable aNy Map file |
| RPPM | Raw Portable Pixel Map file |
| SYNU | Synu image file |
| TGA | Truevision Targa image file |
| TIFF | Tagged Image File |
| VIFF | Khoros Visualization Image File Format |
| X | Stardent AVS X image file |
| XBM | X11 Bit Map file |
| XWD | X Window Dump image file |
Here is a list describing some of the image formats popularly used on the Web:
GIF (Graphic Interchange Format) (MIME type image/GIF) A standard format for images. CompuServe (http://www.compuserve.com/) created GIF so that users can exchange pictures on-line. The GIF format can store up to 8 bits per pixel (giving 256 or fewer colors in an image). Because many inexpensive PCs might not display more than 256 colors, this format is very useful for the many users of personal computers and works well for line drawings and cartoons. There are different types of GIFs: GIF87a and GIF89a. GIF89a is the standard and most common, and allows possibilities for transparency and animation. For more information, see Yahoo!'s entry for GIF (http://www.yahoo.com/Computers/Software/Data_Formats/GIF/).
HDF (Hierarchical Data Format) A format type to transfer graphical and numerical data among machines (see http://hdf.ncsa.uiuc.edu/).
JPEG (Joint Photographic Experts Group) (MIME type image/JPEG) This format is designed as a flexible format for image storage optimized for real-world (landscape, natural) scenes. Using a 24 bits/pixel format, each image can contain up to 16,777,216 colors. JPEG images are not necessarily larger in file size than GIF images, however. JPEG uses a lossy algorithm to compress images that allows for irregularities too slight for the human eye to notice easily. (The word lossy refers to the amount of loss, or degradation, in an image.) It is possible to adjust this degree of lossiness when storing a JPEG image so that a developer can trade off file size with image resolution. The benefit is that, often, smaller compression is possible with JPEG than is possible with GIF. This smaller compression does have a cost: decompression when the browser has to display it. A JPEG file might be compressed to be smaller than a GIF file of the same image, but then its download and decompression might take longer than just the download of the GIF file. For more information, see http://www.yahoo.com/Computers/Software/Data_Formats/JPEG/.
PDF (Portable Document Format) (MIME type application/PDF) Developed by Adobe (http://www.adobe.com/), this format is designed to deliver graphics, color, and fonts for electronically accessible documents. Viewers are available for many platforms (see http://www.adobe.com/Acrobat/).
TIFF (Tagged Image File Format) (MIME type image/TIFF) Developed by Microsoft and Aldus for use in scanners and desktop publishing, this format usually is supported by external viewers.
Creating and manipulating images requires drawing programs and tools. Many commercial software programs are available for producing and manipulating professional-quality graphics and images. Adobe (http://www.adobe.com/) Photoshop and Adobe Illustrator are commonly used. Freeware or shareware versions of some useful tools also are available for various platforms.
For UNIX platform developers, the following tools are very useful. With them, a developer should be able to take care of most routine image-manipulation needs:
ImageMagick An X11 package for display and manipulation of JPEG, TIFF, PNM, XPM, and PHOTO CD, by John Cristy (ftp://ftp.x.org/contrib/applications/ImageMagick/).
xpaint This is a useful general-purpose drawing program that can be used to edit GIF and other graphics files. This can be found at an FTP site using Archie (http://pubweb.nexor.co.uk/public/archie/servers.html).
xv Written by John Bradley, this viewer is an indispensable tool for image viewing, translating, and manipulation. xv can handle many file formats (GIF, PM, PBM, XBM, RAS, JPG, and TIF) and translate them to others (GIF, PM, PBM, XBM, RAS, PS, JPG, and TIF), and xv can edit the colors in an image. xv is available at ftp://ftp.cis.upenn.edu/pub/xv/.
More See http://www.yahoo.com/Computers/Software/Graphics/.
For Windows users, PaintShop Pro (http://www.jasc.com/psp.html) is a popular product. It has support for more than 30 image formats and drawing and painting tools. Also popular is Graphic Workshop for Windows (http://www.mindworkshop.com/alchemy/gww.html)-a tool for graphics viewing and manipulation.
DOS users also can use DVPEG, a viewer for JPEG, GIF, targa, and PPM files. JASC Professional Capture System (http://www.jasc.com/pcs.html) is a useful utility to capture screen images. Check for software at http://www.coast.net/SimTel/. Also available is DISPLAY, a viewer for GIF, JPG, PCX, TIF, TGA, MAC, IFF, BMP, FIT, PIC, MAG, and RAS files. For more tools, see http://ac.dal.ca/~dong/image.htm.
Macintosh users have been dealing with images and graphics for a long time. See http://www.yahoo.com/Computers_and_Internet/Software/Macintosh/ or http://www.macresource.pair.com/ for a great deal of information on Macintosh resources on-line.
Another extremely useful tool is for making GIF images transparent and/or interlaced (or progressive). A transparent GIF image is one in which a selected color is "taken" out of the graphics file when displayed, so that the browser background shows through the image. Figure 15.3 shows a sample transparent image. The image on the left of the display is a single GIF file in which the white background has been made transparent. When displayed as an inline image, this figure shows the background of the browser (the grid pattern) instead of the white color.
Figure 15.3 : A sample transparent image.
Interlacing is the process of formatting a GIF file so that when it is displayed in a browser, it gradually is exposed. An interlaced GIF file appears first in "rough" form, and then gets clearer as the rest of the image is downloaded. Interlaced GIFs therefore help users see an approximate picture of the image right away, instead of having to wait for the entire graphic to download in a "falling curtain."
The shareware program GIFTOOL is used for creating both transparent and interlaced GIF images. GIFTOOL is available for various platforms, including Sun, Irix, and DOS; source code also is available. You can find more information on Home Pages, Inc.'s list of web-development tools at http://www.homepages.com/tools/. For Windows users, check out Lview Pro.
Another step is to take the interlacing effect and create animations
using the successive approximations of an image. The tool to do
this is called ANIMATE, written in Perl. ANIMATE, along with some
demonstrations of this technique for animation using graphics,
also is located on Home Pages, Inc.'s list of web-development
tools.
| Tip |
There's a technique of animating GIF files that is a good way to get animations on your pages. You can find out how to make your own GIF animations in a tutorial at http://www.reiworld.com/royalef/gifmake.htm or http://www.webreference.com/dev/gifanim.html. |
Because every image on your web must be transferred to your users through your server, you'll want to minimize your image size. Both you and your users are paying for the transfer-not necessarily just in terms of connect time, but more important, in terms of personal time. If your users find that your pages are chock full of images, they might not come back. But images on the Web are a bit like potato chips; they are fattening, but users like them nonetheless and probably would miss them if they were gone.
You can use some techniques to minimize the time it takes to transfer the image files you have in your web:
With Wilbur, you can control the color of a web page's background, text, link, visited link, and active link (see Chapter 13). You can control the size and color of every character of the web page if you want. Developers wanting to show off that they know how to change these colors do so, resulting in the most gaudy, unreadable hodgepodge of color. Graphics designers no doubt cringe when they see such results on the Web.
The color situation on the Web is even worse when you realize that colors can look different on the various systems your users have. If you have designed your images and colors to be very attractive on a UNIX workstation, those same colors can look bad (or even unreadable) on a Macintosh or PC system. Users have a wide variety of monitor types (including monochrome!), color cards, and screen-resolution levels.
To choose colors well, you need to pay attention to contrast and value, instead of just how the color looks on your monitor. If you choose colors with the right mixture of contrast and value, your result will tend to work well on a variety of monitors. You won't achieve the same results on every platform and monitor (that is impossible), but at least you will serve your users' needs better.
The best way to check the contrast and value of your Web page colors is to convert them to grayscale and examine the results. Here's one procedure to do this:
| Changing the Background on a Web Page |
Few combinations of textured backgrounds, text colors, and background colors on Web pages work on all platforms. In general, if you're not experienced in choosing colors with appropriate contrast and value, avoid using the Background, Text, BGColor, and other color-changing attributes of the BODY element. If you must change these values, go for a combination in which value and contrast work well. Try the earlier steps on your result to see whether it works well in a variety of monitors and in grayscale. |
If a web developer is not creating original images, it is possible to draw on a large set of images freely available on the Web. The web developer should, of course, be careful not to use copyrighted material. Also, like everything, because you get what you pay for, it might be worth it to purchase a CD-ROM containing commonly needed images, graphics, and clip art that have been copyright cleared for your use and are organized and professionally done. Many archives exist on the Web where you can hunt down images, but you'll find that these archives tend to be unorganized and contain images of unknown origin and copyright ownership. But if you are just looking for a few good bullets or other graphics effects, the free material on the Web might be all you need.
As a web developer, you'll be looking for the following types of images:
Icons for navigation bars or navigation cues on a web page. These ideally should be quite small (50¥50 pixels or smaller) and immediately recognizable and descriptive. The on-line index on Yahoo! (http://www.yahoo.com/Computers/World_Wide_Web/Programming/Icons/) offers links into major collections. Of these collections, the icon browser from Pisa, Italy (http://www.cli.di.unipi.it/iconbrowser/icons.html) offers a good way to search for icons matching a keyword. The icons available publicly vary widely in quality, but might give the developer starting points or ideas for developing better ones.
Pictures and art for illustrations. Of course, the domain information offered through a web would determine which pictures are appropriate. Commercial databases of stock photography can be purchased from commercial sources. Otherwise, the Web does offer a wide range of pictures on-line about many subjects (http://www.yahoo.com/Computers/Multimedia/Pictures/).
Symbols and clip art, like icons, are small graphics and can stand for an idea or an application. Whereas icons normally are for application-specific navigation, symbols often are used for more generic information, such as warning symbols or international symbols for various ideas. Icon libraries can hold many symbols. Separate libraries exist for clip art (http://www.yahoo.com/Computers/Multimedia/Pictures/Clip_Art/).
Textures for backgrounds used in the Netscape Navigator. Netscape maintains a sampler of backgrounds at http://home.netscape.com/assist/net_sites/bg/backgrounds.html. Note that backgrounds, just as any other image, can be made transparent or interlaced. It's generally not a good idea to interlace a background texture, however, because the download time for the page actually can increase.
Sound is another sensory stimulus that a web developer can use to convey meaning to users. Use of sound on the Web, however, is still in its infancy, and not all web developers create original sounds for their webs. Although graphics programs easily can be obtained and used by most users, sound-encoding systems (microphones, recording systems, and encoding devices) are less available to casual users or web developers than graphics-creation programs.
You can find sound in many places on the Web. Entertainment company sites, in particular, offer previews of movies along with often generous amounts of images, sounds, and video as preview material. You'll find text-to-speech conversion programs at http://wwwtios.cs.utwente.nl/say/form/ and live broadcasts of radio programs at http://www.realaudio.com/.
The difficulty with sound, like images, is a balance between file size, download requirements, and quality. The components of an audio file that affect its quality are sampling rate and resolution.
The sampling rate is the number of times per second that a sound sample is taken during recording. The sound sampling rate is measured in Hertz (Hz). Typical rates might vary from 8 KHz (8,000 times per second) to 48 KHz (48,000 times per second). Of course, the higher the sampling frequency, the bigger the sound file you'll produce. If you want to capture sounds with better quality, you will want a higher sampling frequency. An 8,000 Hz sampling rate is good for voice (like telephone quality); a 44,000 Hz sampling rate is needed for CD-quality sounds.
The sound resolution relates to the range of the sound in terms of high and low notes. Resolution is specified in terms of the number of bits used in digitizing and whether the sound is recorded as stereo or mono. For example, 8-bit mono sound is one sound resolution, and 16-bit stereo sound is another. Naturally, when you use 16 bit rather than 8 bit, you'll have more information about the sound, but you'll produce a larger file.
In general, the way that sound works on the Internet is that you encode your sound into a file with a particular format and then provide it on your server for users who want to listen to it. The user finds a reference to a sound file and clicks on it to retrieve the file. In general, the users have to have the appropriate player or helper application to decode the sound, and, of course, a sound card and hardware (speakers) connected to their computers to play the sound. For non-streamed sound, users have to wait until the entire file downloads.
Like graphics, many sound-file formats exist. Here is a sampling:
| AIF(6), AIFF | Apple/SGI |
| AIF(6), AIFC | Apple/SGI |
| AU or SND | NeXT/Sun, µ-law format |
| IA | Illustrated audio (http://debra.dgbt.doc.ca/ia/ia.html) |
| MOD or NST MIDI | Amiga |
| IFF, IFF/8SVX | Amiga |
| MPEG or MPG, | RealAudio sound (http://www.realaudio.com/) RA or RAM |
| SF | IRCAM |
| TSP | True Speech (http://www.dspg.com/) |
| VOC | Creative Voice |
| WAV, WAVE | RIFF WAVE |
For more information, see the audio formats FAQ at http://www.cis.ohio-state.edu/hypertext/faq/usenet/audio-fmts/top.html.
Some of the most common sound formats used on the Web follow:
AIFF (Audio Interchange File Format) Developed by Apple for music and sound. It is used by some Silicon Graphics machines.
AU This is the NeXT/Sun audio format for sound. On a Sun UNIX Sparcstation, these sounds can be displayed by
cat filename.au > /dev/audio
RA or RAM This is the RealAudio (http://www.realaudio.com/) sound format. This is audio on demand in the sense that it is played while it is downloaded; you don't have to wait to retrieve the whole file before playing it. This is called streamed audio, and it is great for listening to live events. See the RealAudio site for a guide to content on the Web that you can hear with RealAudio, as well as player download information. If you are behind a firewall, you might find that RealAudio will not transfer through it.
WAV (Waveform Audio File Format) Developed by Microsoft and IBM, this format also is known as the RIFF WAVE format and is used with Windows.
Microsoft has extended HTML to specifically address users hearing a sound automatically downloaded with a web page. Its Internet Explorer browsers recognize the BGSOUND element, which plays a soundtrack when the document is displayed.
The BGSOUND attributes follow:
Src="url of sound file"
Loop="numbzer of times to replay file"
Internet Explorer recognizes WAV, AU, and MIDI sound formats.
For referencing sound files for other browsers, simply use the A element with the Href attribute set to the URL of the sound file.
Unlike graphics, which can be created with many freeware or widely available commercial software, creating original sound for delivery on the Web can require specialized equipment, such as the following:
AudioFile Server Developed by Digital Equipment Corporation for providing audio across networks in a device-independent way. Similar to the way X Window System provides device-independent graphics, AudioFile allows applications to be written independent of the machine (http://www.tns.lcs.mit.edu/vs/audiofile.html).
Cool Edit A shareware tool for editing sounds for Windows supporting many formats, such as WAV, Sound Blaster VOC, SMP, AU, AIFF, and others (http://www.ep.se/cool/).
GoldWave A shareware audio editor for Windows supporting many formats (WAV, AU, IFF, VOC, SND, and MAT) at http://web.cs.mun.ca/~chris3/goldwave/goldwave.html.
Internet Wave From VolcalTec. Another form of real-time streamed audio (http://www.vocaltec.com/).
MPEG Audio Layer-3 A shareware system for PC, Sun, HP, SGI, Linux, and NeXTSTEP 3.3 platforms (ftp://ftp.fhg.de/pub/layer3/MPEG_Audio_L3_FAQ.html).
RealAudio Server Developed by Progressive Networks, Inc. This server allows your web to deliver live or on-demand audio on the Internet. Because the RealAudio players are free to users, there is a big audience for this kind of sound. See http://www.realaudio.com/.
StreamWorks and XingMPEG Live and on-demand audio and video over the Internet and Windows-based applications for creating and playing back MPEG video/audio. From Xing Technology Corporation (http://www.xingtech.com/).
ToolVox From Voxware. ToolVox works with many different kinds of browsers as a helper application. ToolVox doesn't require a special kind of server and can be streamed. You can get a free player and encoder at http://www.voxware.com/.
TrueSpeech Internet Player from DSP Group, Inc. This player provides real-time streamed audio and does not require special server software (http://www.dspg.com/).
X audio software The X Consortium's collection of audio tools for X Window System development. Includes Network Audio System for playing, recording, and manipulating network audio; and RPlay, an audio system for playing sounds on local and remote systems (ftp://ftp.x.org/contrib/audio/).
Many archives containing sounds and related sound information are available. Among the better archives are the following:
Yahoo!'s entry for Sound (http://www.yahoo.com/Computers/Multimedia/Sound/) contains links to a wide variety of archives, indexes, tools, and information about sound on and off the Internet.
The WWW Virtual Library entry for audio (http://www.comlab.ox.ac.uk/archive/audio.html) gives you links to general technical information as well as on-line sounds and software.
The Timecast site (http://www.timecast.com/) is a guide to netcasting using RealAudio. This site is a comprehensive guide to live news and other content available in RealAudio.
Internet Underground Music Archives (http://www.iuma.com/) is dedicated to Internet music and contains links to new bands, as well as on-line music events and magazines.
Movies on the Web can deliver very powerful visual information to users. The term movies is used generically here for the MIME-type video and includes applications such as live television sources (http://www.tns.lcs.mit.edu/cgi-bin/vs/vsdemo) or scientific visualization (http://www.nas.nasa.gov/NAS/Visualization/visWeblets.html).
Just as other multimedia, movies are provided in range of formats. Newer, streaming technologies are playing an important role in making movies more widely available on-line. The following are the most common:
AVI A video format for Windows that is similar to QuickTime. Windows 95 includes an AVI player, but users of other platforms must install it. Netscape version 3 supports built-in AVI and QT support.
MOV and QT (QuickTime) Developed by Apple Computer, Inc., this file format is used for the interchange of sequenced data on many platforms but is native to the Macintosh (http://quicktime.apple.com/).
MPEG or MPG (Moving Picture Expert Group) A group that develops standards for digital video and audio compression. MPEG technology includes many different standards for video and audio technology. For more information, see the MPEG FAQ (http://www.crs4.it/HTML/LUIGI/MPEG/mpegfaq.html). Like JPEG, the MPEG movie format uses a lossy algorithm.
Microsoft's Internet Explorer recognizes some attributes for the IMG used for viewing inline movies. These attributes include the following:
Dynsrc="URL of the AVI movie"
Controls (when present, it adds VCR-like controls to the movie image)
Loop="number of times to play the movie"
Start="mouseover|fileopen"
(when the movie begins to play, fileopen is the default)
Netscape Navigator browsers also support inline QuickTime movies. You simply set the Src attribute of the IMG element to the URL of the QuickTime movie file.
Major video-development tools are available commercially, such as Video Spigot and the Optibase (http://www.optibase.com/) MPEG tools. Free tools available include the following:
Berkeley MPEG Tools distribution A collection of MPEG tools from research at the University of California Berkeley. Includes video decoder/encoder/analyzer (http://www-plateau.cs.berkeley.edu/mpeg/index.html).
Converter Tools Can be used for QuickTime to MPEG (http://www.eit.com/techinfo/mpeg/mpeg.html).
MBONE This is also a system for live audio and video over the Internet (http://www.eit.com/techinfo/mbone/mbone.html).
MCL Software Releases This includes tools for video, audio, and graphics (http://spiderman.bu.edu/pubs/software.html).
Also check out Digital Video Magazine at http://www.dv.com/ for news and reviews of digital video products and development.
Like photographs and sounds, many archives are available with movies. Check for these at Yahoo!'s video collections (http://www.yahoo.com/Computers/Multimedia/Video/Collections/).
The technical understanding of formats and tools for all media is just the first step in a web developer's education. Knowing how to combine multimedia elements into the networked hypermedia of the Web is the next step. There are many usability and design issues to consider, yet the same concerns for web design described in Part II, "Web-Development Processes," apply to considerations for multimedia design. Who is the audience? What are their needs? How can their needs be met? How can cues for context, content, and choices be integrated into the presentation?
The opportunity to provide multimedia information on the Web doesn't imply that any use of it necessarily meets user needs. Overuse of multimedia results in design problems, as discussed in Chapter 7 (clown pants as well as multimedia-media overkill), that can obscure the value of a web's information. Beyond the level of technical competence in delivering multimedia information, there are larger issues of usability and design. Usability issues involve the following:
Information load Just as text must be packaged to be presented in appropriately sized chunks for users, so too must graphics, sound, and movies. As the novelty of downloading and viewing an MPEG movie wears off for users, they might not want to download very large files to gain information. Multimedia display to the user can be shaped using a similar method of packaging and cueing, as discussed in Chapter 7 and Chapter 11, "Design and Implementation Style and Techniques."
Access Access to information includes not just the technical requirements for display (the correct format for the audience's Web browser and helper applications), but the multimedia must include "hooks" to help the user gain an awareness of the display and then select the display. The text and graphics of HTML pages in their current form do much of this access cueing.
Scanability Unlike text, multimedia files on the Web cannot be scanned quickly by the user. Instead, the user often downloads an entire movie or sound file and then displays it. This model of access depends heavily on visual cues to help the user decide about downloading audio and video. These scanning cues can include a written or reduced graphic synopsis of the multimedia experience to help the user scan information.
Satisfaction The goal of the developer is to give the user a sense of accomplishment with the information provided in a web. Overall, the user should have a feeling of gaining some benefit from visiting a web. This benefit might be in terms of entertainment experience. If the Paramount web (http://www.paramount.com/) can give the user a snippet of a movie trailer that the user enjoys and remembers, that user might be more likely to visit the movie or even that web site again for another look. Multimedia, particularly movies and sound, are powerful stimuli for users.
The Web's system of hypermedia has three key characteristics:
It is multimedia.
It is hypermedia.
It is networked.
These key ingredients make the Web very different from just a stand-alone multimedia system or most CD-ROM systems. As a result, Web developers focus on much more than linear, narrative, or expository styles of expression. Usability issues, however, challenge the multimedia designer to present messages within constraints in order to achieve the following:
Balance Through creative information chunking and cueing, the goal of multimedia design is to balance the reader activities of perception and reflection, and thinking and navigation. Ultimately, the goal is to affect the user in some way; methods of multimedia overload can affect the user, but perhaps not in the desired way.
Unity Just as cohesiveness is a theme of web design, the coherence of a multimedia presentation requires consistent cues. Colors and backgrounds must work together to provide the user with a sense of the character and contents of a web, for example. The simple technique of using a consistent texture background (see Chapter 13 on Netscape extensions to HTML) from page to page in a web is an example of a consistent visual cues to improve the cohesiveness of a web. Similarly, video, graphics, and sound clips created with repeated elements and expressive variation is a way to approach unity in multimedia design.
Pacing Multimedia-other than text and still graphics-segments users experiences into units based on scenes in a movie or segments of an audio clip. Users have less control over choosing to experience a larger "chunk" of video or audio. Just as large pages of HTML are harder for users to digest, large chunks of video or audio might not be the best design style. This is not just because of the information overload and balance issues but also because users lose pacing control in time-sequenced media. In one sense, this media pushes users to be passive while at the same time stimulating them with more sensory input than a page of text or a still picture. User confusion and disconnect may be possible. A good design strategy would chunk multimedia so that users are in control of the pacing as much as possible.
Although technical know-how is a prerequisite for dealing competently with multimedia on the Web, too often developers go for the "sizzle" without thinking about the aesthetics of presenting multimedia on-line. In addition to acquiring technical expertise, also work to develop your eye for design. The visual aspect of Web communication still dominates, so pay attention to what visual elements strike you as pleasing and effective at Web sites. Think about how each site that you admire meets the needs of its audience in giving them what they want. Think about how the design elements work at the sites. In your examination of other Web sites, notice that
The bottom line is that you should use the purpose statement and audience information you've developed for your web (see Part II) to define a graphics identity for your web. Don't assume that only good looks matter on the Web, but realize that your looks on the Web say a lot about the care and thought that went into your site.
Multimedia deployment via the Web should continue to grow in complexity. Netscape Communications (http://www.netscape.com/), manufacturers of the Netscape Navigator browser, teamed with Macromedia, Inc. (http://www.macromedia.com/) to offer technology from its software product, Director. Combining multimedia possibilities with the Java language (see the next chapter), these technology partnerships should foster even more integration of more sophisticated multimedia on the Web.
For more information, see the following:
Index to Multimedia Information Sources, by Simon Gibbs An excellent, frequently updated index to on-line sources related to multimedia (http://viswiz.gmd.de/MultimediaInfo/).
Falken's list of tools and applications for viewing the Web Includes references to helper applications (http://cybertools.thru.net/tools.shtml).
Multimedia File Formats on the Internet, A Beginner's Guide for the PC User, by Allison Zhang This guides the user to a great deal of information on file formats on the Internet, including multimedia files. It is geared toward IBM PC and compatible systems (http://ac.dal.ca/~dong/contents.html).
Rob's Multimedia Lab Sponsored by the Association for Computing Machinery at the University of Illinois, Urbana/Champaign, by Rob Malick. A collection of multimedia in many forms (sound, graphics, and movies) on many subjects, such as weather, comedy, science fiction, animals, outer space, sports, art, and cartoons (http://www.acm.uiuc.edu/rml/).
MIME information MIME is defined in RFC1521 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1521.html, http://www.cis.ohio-state.edu/htbin/rfc/rfc1522.html, and http://www.cis.ohio-state.edu/hypertext/faq/usenet/mail/mime-faq/top.html).
The Bandwidth Conservation Society A set of instructions for optimizing images for the Web (http://www.infohiway.com/way/faster/).
PNG (Portable Network Graphics) (Draft specification) This is a proposed standard for images that retains some of the features of GIF (256 colors) and lossless compression (http://www.boutell.com/boutell/png/).
CERL Sound Group The University of Illinois. A center for research and hardware/software development in digital audio signal processing (http://datura.cerl.uiuc.edu).
Multimedia Bibliography An annotated list of further reading on multimedia design issues, from Patrick J. Lynch (http://info.med.yale.edu/caim/stylemanual/Biblio_Multimedia.HTML)
The WWW Viewer Test Page This page helps you test your Web browser on a variety of multimedia files (http://www-dsed.llnl.gov/documents/WWWtest.html).