1. DECIDE WHEN TO USE MULTIMEDIA

Used correctly, audio and video can be effective tools for getting your message across on the Web. Used poorly, audio and video can actually drive visitors away and make people not want to return to your Web site. You're much less likely to make a disastrous mistake if you keep the following three things in mind:

  • Your Web site's purpose (remember your mission statement from the first lesson?)
  • Your audience
  • The limitations of the Web

For example, if you're a real estate agent, the purpose of your site might be to sell homes. To sell homes, you need people to visit your site, see listings, and become interested enough in a particular listing to contact you. To achieve this goal, you might decide that video clips of houses would be helpful.

As mentioned in previous lessons, you need to be aware of how fast an Internet connection your visitors are likely to have. In the case of a general-interest site, you have to assume the worst. Although about 50 million homes and businesses in the United States have broadband Internet access, it's still generally considered safe to design general-interest sites for a 56 Kbps (kilobits per second) modem.

In general, the broader your audience is, the more careful you need to be with using multimedia. On the other hand, if you have a limited and homogenous group of people accessing your site (as in the case of a company's internal Web site, or intranet), and if you know the speeds of their connections to the site are not a factor, you can make more liberal use of multimedia.

Think carefully about your target audience and how they access the Internet before adding multimedia to your Web site. A lot of companies currently track this subject, so google broadband internet usage statistics to find the latest information on broadband usage rates. You can even type in your state, region, or target audience (such as home buyers) to find targeted information about usage rates. In the next section, you'll learn how to add audio to your site.

2. ADD AUDIO TO YOUR WEB SITE

As you browse the Web, sometimes you come across a site that begins making noise as soon as you load the page (of course, you need to have your speakers plugged in and the sound turned on). Sometimes, you have to click a hyperlink to start the sound playing. That sound -- a person talking, sound effects, or music -- is contained in an audio file.

How do you add sound to a Web page? You add an audio file the almost the same way as you add an image file. Both image and audio files must be linked to a Web page and activated with HTML. The only difference is that instead of displaying a picture, an audio file plays a sound. Just as there are Web-friendly formats for image files (such as GIF and JPEG), there are also Web-friendly formats for different types of sound files. You find out about these throughout this lesson.

There are two ways to approach using audio on your site:

  • Send information about the music (the notes, volumes, instruments, etc.) and let the receiving computer's sound card play it.
  • Send the actual music as recorded audio.

The difference between the two ways of using sound boils down to what you want the sound to accomplish on the Web page. There are advantages and disadvantages to both types of Web audio. In the next sections, you'll learn about how to use both types, as well as the reasons for using one over the other.

Recorded Audio on the Web

High-quality audio files can be very large. The WAV format, which is used to store audio on Windows computers, takes up about 10 MB of space for every minute of CD-quality, stereo sound. A typical 4-minute song, then, takes up 40 MB and would take about 90 minutes to download using a 56 Kbps modem. No one, not even the drummer's girlfriend, is going to wait that long to hear a band's demo song. So, what can you do?

Shrink It

There are several ways to reduce the size of digital audio files:

  • Use compression: Compression is an extremely effective way to dramatically reduce multimedia file sizes while retaining quality. Compression uses what's called a codec to strategically remove information from the file that's least likely to be noticed during playback. MP3 is a codec.

By converting a 4-minute WAV file to an MP3 file, you can reduce the file size by a factor of 10, with no noticeable change in the quality.

  • Reduce the sampling rate: A simplified way of looking at sampling rate is as a measurement of the quality of the audio. CD-quality sound has a sampling rate of 44 Khz (kilohertz). Phonograph-quality sound is 22 Khz. Telephone-quality sound is 11 Khz. A reduction in the sampling rate from 44 Khz to 22 Khz reduces the file size by half.
  • Convert it to mono: By converting your stereo audio file to mono, you chop the file size in half. If you're planning to post a tape of yourself singing in the shower to your site, it'll probably sound just as brilliant in mono as in stereo. This isn't the best solution to your band's problem, however. In addition to making you sound worse, it still leaves you with a 20 MB file and a 45-minute download.

By combining these different methods for reducing audio file size, you can easily shrink your 40 MB audio file under 4 MB. Suddenly, the download time isn't all that bad. But, what do you do if you want to post an entire concert, lecture, or any other lengthy audio file to your site? This is where a technology called streaming comes in.

Stream It

Steaming means that when a visitor clicks a link to an audio file, the file isn't downloaded all at once and then played, as is the case with a WAV or MP3 file. Instead of downloading the full sound file, site visitors who click a link to stream content are able to listen to or view the file as it's downloading. This creates the appearance of the download time being faster, even if it actually isn't. Pretty clever, huh?

Streaming audio or video from the Web can be somewhat more involved than simply providing files for download. Streaming requires you to have access to a streaming server or software to prepare your audio or video files for streaming (called an encoder ). When you upload files to a streaming server, such as the one made by RealNetworks, it manages the process of sending it to users.

The actual process of using a streaming server is beyond the scope of this course; however, you can learn about creating and using streaming media from Streamalot . The company includes a number of short tutorials to help you set up specific types of streaming media.

The Ultimate in Small Audio File Sizes

Say you're creating a Web site for your wedding. When people visit the site, you want the wedding march to play. Ignoring the corniness of this proposition, there are significant problems with using recorded audio to accomplish this. The issue that you've already seen is the file size problem. If the music plays every time someone visits the homepage, even a relatively small recorded audio file will quickly become very annoying.

The solution is MIDI (Musical Instrument Digital Interface). MIDI is a standard for encoding information about digital audio. The important thing to remember about MIDI files is that they don't actually contain the music. Instead, they tell computers how to play the music. Think of MIDI as sheet music for computers. If the actual performance isn't important, and you don't need lyrics, MIDI is the way to go.

To find MIDI files, simply search the Web. There are hundreds of sites that give away free MIDI music files.

See the following table to get an idea of how small MIDI files are in comparison to WAV and MP3 files.

Track Title Format File Size
Take Five by The Dave Brubeck Quartet WAV 55 MB (56,320 KB)
MP3 5 MB (5,120 KB)
MIDI 15 KB

Table 5-1: Comparison of WAV, MP3, and MIDI file size.

Using recordings of someone else's works (such as Mr. Brubeck's) on your Web site could possibly be a violation of copyright law. Make sure that you have permission from the copyright holder before making anyone else's material available on your site.

Although MIDI files are small and easy to find freely on the Web, the sound quality of MIDI files leaves a lot to be desired. Unless you absolutely have to have some sort of music load automatically for visitors to your site, it's best to leave MIDI audio off.

Record on Your PC

Microsoft includes a utility called Sound Recorder, shown in Figure 5-1. It's generally found in the Accessories/Entertainment folder on Windows PCs.

Figure 5-1: Microsoft Sound Recorder.

Sound Recorder lets you play and record WAV files. You'll need a microphone to record sounds, and speakers and a sound card to hear them. You can buy an inexpensive microphone at your local computer retailer or electronics store. Be sure the one you buy has the same kind of connector your computer does.

On the Macintosh, the Sound control panel has similar functionality to Sound Recorder.

The Sound Recorder and the Mac's Sound control panel work just as conventional tape recorders. The red button is the record button, the square button is the stop button, and so on. You can tell right away whether you're actually recording by the activity in the display.

After you've finished recording, you might notice that your WAV file includes dead air -- a few seconds at the beginning or end of the recording. Sound Recorder provides a minimal editing capability that lets you cut out parts of your WAV file. There's even some sound effects functionality.

If you're going to do any serious recording or sound editing as part of your Web page development process, you want to use a more robust sound-editing package, and quality recording equipment. Another, more robust, sound editor is Audacity , which is free, and includes a host of editing features that give you a lot of freedom and power to create and edit audio files.

Add Sound to a Web Page

After acquiring or creating sound files, it's time to add a link between your Web page and the sounds you want to play on it. Your Web editor ought to be able to handle this task handily but you'll learn some HTML code in this lesson to help you if you get stuck.

If all you want to do is allow your visitors to listen to a sound file if they choose, you simply link to a sound files the same way you create any hyperlink. For example, to link the sound file happy_birthday.wav to the text Happy Birthday, create this code in your HTML where you want the link:

<a href="happy_birthday.wav">
   Happy Birthday!</a>

That's all there is to it.

Now let's go one step further. Let's set up the page so that a WAV file plays when a visitor loads the page.

<embed src="happy_birthday.wav" 
   width="144" height="60" autostart="true"
   loop="true">

The height and width attributes are for the sound bar that's displayed when the sound starts using the <embed> tag. The autostart attribute is self-evident and the loop attribute indicates to the browser that the sound should be repeated over and over.

It's just that simple. Adding video can be a little more complex though. In the next section, you'll learn the simple way to add video and discover where to go for more information about adding more complex types of video.

3. ADD VIDEO TO YOUR WEB SITE

Adding video to your site is very similar to adding audio, and has the same potential drawbacks -- only more of them. Whereas audio files can be large, video files are a whole lot larger. It's not only the length of the video clip that increases file size, but the number of colors, the number of frames within the clip, and the size of the images. It's not unusual for one-minute of compressed video to gobble up 50 MB of disk space.

Consider that many folks surfing the Web from home are still using a 56 Kbps modem. Now divide 50 MB (or roughly 50,000,000 bytes) by 56 KB (or roughly 5,600 bytes) and you can see how many seconds it takes someone to download a video clip using conventional technology. If you don't feel like doing the math, the answer is almost 9,000 seconds, or 148 minutes. That's a longer wait than most movies just to watch a one-minute clip. Take a look at the following table to get a good idea how long it takes to download files from the Internet.

Content Size 14.4 Kbps 28.8 Kbps 64 Kbps 1.5 Mbps
Small graphics and animation 30 KB 30 seconds 10 seconds 6 seconds 1 second
Small complete movie clip 100-200 KB 180 to 300 seconds 90 to 180 seconds 20 to 40 seconds 1 second
Short video clip 500 KB 300 to 400 seconds 120 to 240 seconds 90 seconds 3 seconds

Table 5-2: Comparison of various file download rates and times.

It's also possible to create your own brief video clips right at your desktop. Fortunately, it's getting easier all the time to capture and edit video on your PC.

Video Compression

Because video files tend to be so large, it's best to consider employing some type of compression before you post your video to your Web site. Compression is essentially the process of discarding information from a video that isn't discernable to a viewer in order to reduce the size of the file. There are a number of compression methods and tools available but the most popular format is MPEG (Moving Picture Experts Group). The current standard for this format is MPEG-4, although MPEG-7 is under development.

Windows provides a free video compression utility called Windows Media Encoder. This works only on the Windows platform. For a utility that's both Windows and Mac friendly, use QuickTime. You can download either version of QuickTime from Download.com .

Get Video onto the Web

Once you've created and optimized video for the Web, you need to note where the video will appear. Just like with audio files, you can either link to video using the standard HTML linking code, or you can embed the video into the page. If you do embed video into an HTML page, use the following code:

<embed width="100%" height = "100%" 
  fullscreen="yes" src="welcome.mov">

Unlike most Web images, and some sound file formats, all video requires some kind of browser plug-in in order to play. A plug-in is software that can handle file formats that your browser can't. To play a video clip that is linked to the current page, for example, a site visitor needs to have a plug-in that can read the video format you've chosen. Some plug-ins, such as Apple's QuickTime, Real Networks' RealPlayer, or Microsoft Windows Media Player, can handle several audio and video formats.

You can raise the chances that your plug-in-based video is viewable by most site visitors if you include a link to a download site where site visitors can download the plug-in they need. You've probably seen this before; a button and a bit of text that says you need QuickTime, RealPlayer, or Windows Media Player to view a video image. Once the visitor downloads and installs the plug-in, the video begins to play automatically according to the directions you've given in your HTML code.

If you've been browsing the Web for video files and playing them back, you've already noticed that downloading these movies is a time-consuming task. This is why streaming video was invented. Like streaming audio, a streaming video file begins playing right away as the file is being downloaded. QuickTime Video, RealVideo, and Windows Media are all popular streaming video formats.

Just What Is Shockwave?

Macromedia Shockwave is used for creating interactive multimedia. Like other types of multimedia, a plug-in is required to view Shockwave files. Unlike audio and video files, your visitors can interact with Shockwave files, which makes it a great format for online games. You can see great examples of what's possible with Shockwave by visiting the Shockwave.com Web site.

You can create Shockwave files using Macromedia Director, which currently retails at over $1,200. Most people creating multimedia for the Web don't need Director, however. For less demanding multimedia and for better Web integration, Adobe offers Macromedia Flash. Priced at $400, it's a much less expensive and an easier to learn solution than Director.

One of the advantages of Flash is that the file sizes are remarkably small, and the plug-in is small as well. The result is that Flash content is rapidly becoming as widespread as the use of animated GIFs.

Audio, video, Flash, oh my! What if you just want to put some of your existing collateral and printed material on the Web? If other types of multimedia are so easy to add, you can bet that adding your existing materials is just as simple. In the next section, you'll learn the ins and outs of adding presentations and printed documents to your site.

4. PUTTING A SLIDE SHOW AND PRINTED DOCUMENTS ON THE WEB

There may come a time when you want to present a series of informational slides to folks who visit your Web site. This course, for example, could be presented in a classroom setting with a slide projector displaying information and illustrations. Most people have seen presentations built with Microsoft PowerPoint, and many have used it to build their own. Available for both Mac and PC, PowerPoint is the most widely used slide creation (presentation) software available, but it isn't alone in the market. AppleWorks is a popular Mac alternative to PowerPoint.

With PowerPoint, you can easily turn your presentations into HTML documents ready to publish to the Web. PowerPoint helps you customize your presentation. For example, you can include animations, use frames, choose the way you move to other slides or documents, and select different button styles. PowerPoint maintains the interactive settings that jump to other slides or documents.

To publish pages to the Web with PowerPoint:

  1. Open the presentation you want to save in HTML format.
  2. Select File > Save As, select Web Page and then follow the instructions.

Figure 5-2 shows a screenshot of a PowerPoint presentation that's been saved as a Web page.

Figure 5-2: A slide show generated from PowerPoint.

Enlarge image

You can find many examples of PowerPoint presentations by searching the Web for slideshow or PowerPoint slideshow .

Publish Printed Documents to the Web as PDFs

If you've browsed the Web for a while, you've probably come across PDF files. PDF (Portable Document Format) files are an invention and trademark of Adobe Systems . Essentially, PDF files are duplicates (in appearance and content) of documents created in a word processor, spreadsheet, or desktop publishing application, to name a few. The advantage of PDF is that anyone who has the free Acrobat® Reader program can read and print the files, regardless of which application was used to create them. PDFs weren't invented for the Web, but they can easily be added to a Web site, and are viewable and sometimes editable there. When you install the current version of Acrobat Reader, a Web plug-in is also installed in your browser's Plug-Ins folder.

The IRS uses PDF files to enable folks to download tax forms right from the IRS Web site. When you find the form you're looking for (in this case a W-9 form), just click the link and you'll see something that looks like Figure 5-3.

Figure 5-3: Viewing an Adobe Acrobat PDF file on the IRS site.

Enlarge image

Figure 5-3 illustrates just how valuable a utility Adobe PDF is. You can create forms and display complete brochures. You can link to PDF files in the same way you link to other Web pages.

Wrap Up

The best way to learn the proper way to create and use multimedia is to experiment with it. Find out if your Web site building software of choice provides any assistance with inserting multimedia, try creating different kinds of multimedia, and record and edit your own sound files and video. Live it up. In Lesson 6, you'll find out how to make your site more visible and draw in the visitors.

To review the material in this lesson and to get started with your multimedia adventure, take a stab at the quiz questions and the assignment. As always, we encourage you to share your experiences and ask questions on the Message Board.