Marketing for Libraries Logo

Dynamic Websites Section: Multimedia Technology

From slide shows to videos, multimedia can bring your website alive. The key is careful testing to ensure that all end users have access to the resources. In addition, it's essential to provide good directions and links to any resources needed to play the media.

Using Plug-Ins

Plug-ins are external programs that you can add to the browser to enhance its capabilities. Add power to the browser and provide support to many other file types. Today, many of the required plug-ins are already built into the browsers.

Popular Plug-ins = Adobe Acrobat Reader, RealAudio and RealVideo, QuickTime, Shockwave and Flash and VRML

Be sure to provide links to required software and plugins.

Some Examples

Animated Gifs

GIF animation is an easy and effective, yet somewhat dated way to create simple animations. A GIF animation is simply a series of still images that create a photo slide show, demonstrate steps in a process, or provide the illusion of movement. For example, you could show a series of covers from Harry Potter books.

Be careful when using animations. In some cases, they simply add clutter and look unprofessional. They can also distract from learning. Be sure your animation has a specific purpose. For example, the banner below was created in Fireworks as an advertisement for our program.

animated logo

There are hundreds of tools for making these animations. Most graphic software such as Fireworks provides an option for creating animations. A few stand-alone packages are listed below.

Audio and Podcasting

Audio can be very useful for emergent readers, people who speak or are learning foreign languages, or those learning new vocabulary.

There are many ways to integrate audio clips into web pages.

Audio Clips

You can record sounds, save them as separate files, upload the files, then create links on your web page. Although various file formats can be used such as .wav, .au, and .midi files, the MP3 file format has become very popular.

Podcasts

Podcasts have become a popular use for audio on the web. A podcast is a media file that is housed on a web server. End users can then subscribe to the syndication feeds for playback on the computer or a handheld device such as an iPod. Since they are designed for playback on a portable device, most are MP3 files. Learn more about podcasts at wikipedia.

Listen to podcasts at National Public Radio.

Skim the Podcasting from Multimedia Seeds page.

Software

Audacity is an easy-to-use open source sound editor that works great for creating audio clips. Be sure to download the software extension that allows saving for MP3 files.

Examples

Explore some examples of podcasts.

Inserting Sounds into Web Pages

It's easy to insert sounds into web pages.

For audio clips, you can use a text or graphic link such as sound soundsound

For podcasts, consider the following icons: podcastpodcast

Example

<p>Click the sound icon <a href="lumberjack.wav">
<img src="sound.jpg" alt="plays a line from the television show Monty Python's Flying Circus" width="20" height="20" border="0" /></a>. Can you name the television show? </p>

Result

Click the sound icon plays a line from the television show Monty Python's Flying Circus. Can you name the television show?

You can also choose Insert>Media>Plugin to embed an audio. Then add controls such as autostart="true" (tells to start the sound immediately) or controls="console" to display a console.

You can also put audio in a page background. Be careful when using audio because it can be VERY annoying when played in the background! Use <bgsound src="lumberjack.wav"> to add a sound to the background of the page. You can add the loop attribute such as loop="3" to indicate how many times you wish to loop the sound.

Here's an example that validates:

<object type="audio/x-wav" data="frog.wav" width="200" height="20">
<param name="src" value="frog.wav"/>
<param name="autoplay" value="false"/>
<param name="autoStart" value="0"/>
alt : <a href="frog.wav">frog.wav</a>
</object>

Sound Sources

There are many sources for online sounds. Use the Remote Audio Collections page from Multimedia Seeds for lots of example sounds. Try adding a sound to your practice page.

Images

Images can greatly enhance a website. As you integrate images, consider how they add to the content of the website. Just as a good paragraph can communicate an idea, a chart, graphic, or photograph can be just as effective. Remember, a picture is worth a thousand words. How are visuals used in your website? What additional visuals will enhance understanding?

Image Use

Explore some possible uses of visuals:

Image Options

Documents

comicAlthough web pages are an effective way to present information, there are times when a different type of document may be more effective.

Keep in mind that many applications provide an export option for creating a web page. For example,Inspiration is used to create concept maps, they also provide an option to export the page as a web page. This option creates a single web page along with a folder containing the image. The softwareComic Life provides a similar option. See an example of a biography comic. Notice that a launcher page with a thumbnail image is generated along with web pages that contain previous and next buttons.

In some cases, you want to provide end users with a document a specific file format. Let's explore some of the possibilities.

Application Files

You can upload and link to any kind of application file. For example your end users could download spreadsheets created in Excel, reports created in Microsoft Word, or concept maps generated by Inspiration. However keep in mind that if the end user doesn't own the matching application, they won't be able to view the file. As such, you only want to use the raw application file if you want the end user to be able to use or repurpose the document. For example, you might provide a list of summer reading books and a suggestion that end users can add their own favorite books.

excelIf you upload and link to an application file, be sure to provide directions for downloading the file as well as information about the application that is necessary for using the file. You can either create a simple text link or consider using an icon associated with the file type such as an Excel document.

PDF Files

A Portable Document Format (PDF) lets you capture and view information from any application and share it with others. If you're concerned about the formatting of a document, a PDF is a good choice. A PDF file will retain the original formatting including the fonts, images, and alignment. You can also include links and media in PDF document. You can also set up forms that can be completed and returned.

PDF is an open file format developed by Adobe Systems. End users need the Adobe Reader software to read PDF files. Even though most people have this software installed, you should still provide a link to the Adobe website so people can download the software if needed. Learn more about pdf files at wikipedia.

readRead Why PDF? to learn more about this format.


adobe readerIf you plan to create lots of PDF files, it's a good idea to purchase Adobe Acrobat for creating PDF files. However if you just need to convert a few files, consider a PDF maker software program such as PDF Creator and CutePDF. If you have a Macintosh or some version of Microsoft Windows, you can save as a PDF file. The PDF options is also built-into OpenOffice.

adobe pdfYou can either link to the PDF file, or create a thumbnail image of the PDF and place the link on the image.

 

PDF document work well for the following types of applications:

Flash

Adobe Flash has become a very popular tool for creating web content. Although Flash is a package that takes some effort to learn, the results are very professional and visually attractive.

Approaches to Flash Use

There are two ways that Flash can be used within a website. First, elements can be integrated into the design of the website. Second, stand-alone documents can be created and played.

Design Elements

Flash is increasingly being used to develop visual components for a website. Many websites provide a Flash-enhanced entry page. Flash is also used for interesting banners, animated diagrams, and interactive menus.

Stand-Alone Documents

Flash is also effective for creating stand-alone projects such as animations, simulations, slide shows, tours, games, and quizzes. These applications can be links or embedded into a page.

Player Software

FlashThe downside of using Flash is the need for the Flash player software. Many websites provide two versions of a page, one enhanced and one traditional. Always provide a link to the Adobe Flash Player so end users can download the latest version of the software.

Go to Flash from eduscapes for lots of examples and guidelines for learning the software.

Presentations

Many websites incorporate presentations. Although there are many packages to create presentations, Microsoft PowerPoint is most popular.

PowerPoint on the Web

There are three ways to integrate PowerPoint presentations into your website: documents, stand-alone presentations, and web pages.

Documents

You may wish to upload the original PowerPoint files to the web. This is useful if you've created templates, presentation starters, or presentations that are intended to be modified. The problem with this approach is that the end user must have PowerPoint to open these files. In addition, the files may be large. You may wish to compress very large files using software such as StuffIt.

Stand-Alone Presentations

If the presentations are only intended to be played and not modified, you can save the files for playback only. You can also provide a player version of the files. Keep in mind that the end user will not be able to modify the file. One advantage is that the file sizes are smaller than the original files.

Web Pages

It's also possible to export the presentation as a web page. Not all browsers will play these exported files, so be sure to indicate the browser requirements. In addition, be sure that all elements are uploaded since the slides are saved as individual web pages within an auto- generated folder.

Creating the Link

powerpointBe sure to tell your end user what file type is being provided and what software may be needed to open or run the file. Also consider indicating the size of the file. It's also a good idea to tell end users to right-click and save a document. Otherwise the document will be presented in the browser window.

Example

try itTry It!
If you want to adapt the following files, you need to download them to your computer. DO NOT just click on them. Instead, right-click and choose Save as Target (or Save Link As). Then, choose Save. Open the files within PowerPoint.
American Civil War Project Starter: Civil War 1 (PPT), Civil War 2 (PPT).

Slide Shows

When possible, add features that don't require special software or plugins. Slide shows are a simple example. An easy way to create a slide show is by using the options available within Dreamweaver.

Try It

Save the following photographs in a folder called landmarks: Slide1Slide2Slide3Slide4Slide5.

If you're looking for options that involve web-based tools, consider the following options that can be embedded into your page.

Video and Videocasting

Videos are a great way to engage users with your website content. However keep in mind that not all end users have the bandwidth to play videos effectively. Be sure to provide alternatives that allow those who don't have video capabilities to access the content another way.

In addition to creating links to videos or embedding videos, you can also create videocasts. Podcast, videocast, vidcast, and vodcast are all used to describe online sharing of video through a web feed. Learn more about video podcasts at wikipedia.

Video Sources

All you need is an inexpensive digital camera to create quality videos for your website. Although video editors can be used to create professional-quality videos, it's not necessary to do any editing. Most still cameras can create 30 second to 3 minutes videos.

Original Videos

Use your digital still camera to produce very short videos. Here are some ideas:

Screencasts involve capturing the action on the computer screen. These screen capture video recordings are useful for learning to use computer applications. Learn more about screencasts and screen recording software at wikipedia.

Existing Videos

There are many sources for online videos. Use the Remote Video Clips page from Multimedia Seeds for lots of example videos. Try adding a video to your practice page. You can also find videos at our Naturescapes: Video & Images Starter Resources page.

External Services

Because of the storage and bandwidth necessary to house and access videos, many schools and libraries use online services to store video components. Keep in mind that although companies such as YouTube are popular, you lose some control when you don't house and serve your own videos. If you choose to use these services, follow their instructions for uploading and accessing the videos.

One of the problems with video and the web is finding place for storage. A number of websites now allow people to upload video. Keep in mind that these spaces are designed for children.

Skim Video from High Tech Learning for additional ideas and resources.


| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson