Chapter 11 - Web Media & Interactivity

The saying goes, "A picture is worth a thousand words".

You already are aware of how graphics can be used to create compelling web pages. This chapter introduces types of media used on the web; including audio, video, and streaming media. Appropriate use of movies and sound on your web pages can make them more interesting and informative. Sources of these media types, the XHTML code needed to place the media on a web page, and suggested uses of the media are discussed.

You have probably experienced interactivity on web pages many times – moving the mouse to cause a new image to appear, clicking on radio buttons to take a survey, or clicking on a product while you watch and listen to a Flash movie about a company. These are all examples of web page interactivity. Adding the right touch of interactivity to a web page can make it engaging and compelling for your web site visitors.

Technologies commonly used to add interactivity to web pages include JavaScript, Java applets, DHTML, and Flash. This chapter will introduce you to adding interactive components to web pages.

Chapter Examples

View the examples at the right as you read through the text.

Plug-Ins	Commercial Software
Real Player Windows Media Player Apple QuickTime Netscape Compatible List MPEG	Sonic Foundry Adobe Premier Apple QuickTime Media Box AAA MP3 Maker
Web Sources of Media Files	Copyright & Ethical Issues
Free Audio Clips thefreesoundproject Sound Rangers Flashkit Magnatune	Gigilaw.com Copyright Website Copyright & Fair Use Copyright Myths Bitlaw
Streaming Media	Media & Accessibility
CNN Example RealSystem Producer Basic RealSystem Server Plus Windows Media QuickTime Streaming Server	MAGpie Rich Media Accessibility Blindess Resource Center Disabilities & Web Use

JavaScript Resources
Online Documentation EchoEcho Tutorials	Page Resource Tutorials JavaScript Source
Java Resources & Applets
Java at Sun JavaPowered Applets Java on the Brain Gamelan Jars	Applet Games Plutonium Software Slide Show Applet The Lake Applet Visual Mining
DHTML Resources	Ajax Resources
DHTML Menu Dynamic Drive DHTML Shock DHTML Central Open Cube BrainJar	Jesse James Garrett Ajax Executive Summary Guide to Using Ajax Ajax Tutorial Ajax Patterns Ajax Developers Journal
Easy Ways to Add Multimedia to Your Web Site
Flash 8 Banner Ad Tutorial Flash CS3 Banner Ad Tutorial Build a clickable, animated banner ad step-by-step...
Search-this.com offers a free customizable Flash MP3 player for use on your own website.	Free Slideshow Easily create a slideshow of your favorite photos.
Search-this.com offers a free customizable Flash Photo Viewer for use on your own website.	Flash Slideshow Tutorial Download a customizable Flash slideshow for use on your own website.
Flashkit.com Web Audio Player Download	Airtight Interactive offers a free version of SimpleViewer Flash Photo Gallery
Flash Resources
Flash Resources Adobe Using Flash for the First Time Flashkit ActionScript Kirupa Tutorials Tizag Tutorials	Flash & Web Design Alert Box 2000 Alert Box 2002 Press Release 2002 Flash 99% Good Web Design Mistakes 2005

Chapter Updates

No errors have been reported for Chapter 11.

Questions or Comments?

The author would like to hear from you!
Send an e-mail to webdevfoundations@hotmail.com

Review Games
Chapter 11 Review

Flash Cards
Pick a Letter
Fill in the Blank
Matching
Crossword Puzzle

Fun Multimedia

Creative & Musical
Video Game Sounds
Humor Analysis

Accessibility

The videos on the Mayo Clinic website are good examples of providing readily available text transcripts. See the Meditation example (and relieve some stress, too!).

W3C & Flash

The HTML code generated by Adobe Flash and Adobe Dreamweaver to add Flash swf to a web page does not pass W3C validtation. See ITS-Hoffman for a proposed solution to this issue.

Marketing

Creative use of media can help you market and engage your visitors. Examples of Flash animated characters as virtual agents include SitePal, CodeBaby, TelSim's Noah, and Veepers.

Resources

W3C
W3C HTML Validator
W3C CSS Validator

Color Chart
Design Checklist
Fireworks Tutorial
Flash Tutorial

A List Apart
SitePoint
Good Experience
Digital Web
Dreamweaver
Expression Web