Web Developer Foundations: Using XHTML
Second Edition by Terry Felke-Morris
 
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.

Media Players

When deciding to utilize media in a site, it's a good idea to be aware of the market penetration of the player used to view the media. The following percentages were provided by Macromedia and NPD Online Research.

Percent of PCs with Media Players Installed
Changes to Internet Explorer (IE6v.02)

Due to a lawsuit, Microsoft is changing the way that certain content, such as applets and ActiveX Objects (such as Flash files, Quicktime movies, or streaming medai), is displayed when using Internet Explorer. See http://msdn.microsoft.com/ieupdate/ for their take on this topic.

Visit Macromedia, Apple, and Real Networks for solutions and code samples for adapting to this new "feature".

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

Microsoft
Free Audio Clips
Sound Rangers
Flashkit
AltaVista

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

Wizarding World Map
DHTML Menu
Dynamic Drive

DHTML Shock
DHTML Central
Open Cube
BrainJar

Flash Resources

Adobe Macromedia Intro to Flash Tutorials
Using Flash for the First Time (Part 1) (Part 2) (Part 3)

Macromedia Flash
Swish
Flashkit
ActionScript
Ultrashock

Navigation Example
Audio Navigation Example
Flash Web Site Example 1
Flash Web Site Example 2

Nielsen's Original Take on Flash
Nielsen's 2002 Take on Flash

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

 

Chapter 11 Review

Crossword Puzzle
Chapter 11 Review

Flash Cards
Pick a Letter
Matching

Fun Multimedia

Creative & Musical
Video Game Sounds

Multimedia & 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!).

Where Media & Marketing Meet

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

A List Apart
SitePoint
Good Experience
Digital Web
Dreamweaver
FrontPage

XML Blog News Feed



Valid XHTML 1.0!


CSS Validator