6
Multimedia and
Interactivity Elements
Web Design,
3rd Edition
Chapter Objectives
 Explain Web page multimedia issues
 Describe types of Web page animation
 Discuss adding and editing Web page audio and
video elements
 Identify ways to effectively use interactive elements
Chapter 6: Multimedia and Interactivity Elements
2
Multimedia Issues
Combination of text, images, animation, audio,
and video
Most WYSIWYG editors include tools for
incorporating multimedia
Use multimedia sparingly, and for distinct
purposes
Chapter 6: Multimedia and Interactivity Elements
3
Multimedia Issues
Guidelines to follow
– Give users a choice of content
– List any necessary plug-ins
– Provide text equivalents for all multimedia
elements
– Offer low-bandwidth alternatives
– Break files into short segments to create smaller
files
Chapter 6: Multimedia and Interactivity Elements
4
Animation
 Animation can be used to
– Catch a visitor’s attention
– Demonstrate a simple process
– Illustrate change over time
 Animated GIFs
– Sequence of frames that simulate movement
– Should be used to support your Web site’s message
– Too many animated GIFs can detract from a page
Chapter 6: Multimedia and Interactivity Elements
5
Animation
Chapter 6: Multimedia and Interactivity Elements
6
Adobe Flash CS3
and Microsoft Silverlight
Adobe Flash CS3 is a tool for creating
sophisticated Flash movies
Simulates motion via fast-paced presentation
of changing static images
Microsoft Silverlight is a relatively new browser
plug-in technology designed to play the
multimedia content found in rich interactive
applications
Chapter 6: Multimedia and Interactivity Elements
7
Adobe Flash CS3
and Microsoft Silverlight
Chapter 6: Multimedia and Interactivity Elements
8
Avatars
Avatars are alternative personas or virtual
identities for MMOGs or 3D virtual worlds
Avatars can be found
– In e-mail marketing campaigns
– Business or personal blogs
– E-commerce Web sites
• Virtual models
Chapter 6: Multimedia and Interactivity Elements
9
Avatars
Chapter 6: Multimedia and Interactivity Elements
10
Gadgets
Small code objects that provide dynamic Web
content
– Clocks
– Weather
– Reports
– Breaking news headlines
Chapter 6: Multimedia and Interactivity Elements
11
Gadgets
Chapter 6: Multimedia and Interactivity Elements
12
Audio and Visual Elements
Downloadable media must be downloaded in
its entirety before it can be heard or seen
Streaming media begins to play as soon as
data begins to stream
Chapter 6: Multimedia and Interactivity Elements
13
Audio and Visual Elements
Chapter 6: Multimedia and Interactivity Elements
14
Audio Elements
Audio files can add sound effects, entertain
visitors with background music, deliver a
personal message, or sell a product or service
with testimonials
Only include background music when it
supports your site’s message and the mood
you want to achieve
You can record your own audio files
Chapter 6: Multimedia and Interactivity Elements
15
Audio Elements
Streaming audio begins playing as the audio is
delivered by the server
– RealAudio
• RealPlayer
– Windows Media
• Windows Media Player
– QuickTime
• QuickTime Player
Chapter 6: Multimedia and Interactivity Elements
16
Streaming Audio
Chapter 6: Multimedia and Interactivity Elements
17
Editing Audio Files
 Use these guidelines for creating and editing audio
files for the Web:
– Keep audio clips short
– Select a mono audio channel
– Use an 8 kHz sampling rate for voice only audio, and 22
kHz for music audio
– Use an 8-bit audio file for voice and 16-bit audio file for
music
Chapter 6: Multimedia and Interactivity Elements
18
Video on the Web
Video is becoming a more common content
element
You can download royalty-free videos,
purchase videos, or create your own video files
using a digital camcorder and video editing
software
– Adobe Premiere Pro CS3
– Pinnacle Studio Ultimate version 11
– Windows Movie Maker
Chapter 6: Multimedia and Interactivity Elements
19
Video on the Web
Chapter 6: Multimedia and Interactivity Elements
20
Editing Video Files
 The common frame sizes are 160 x 120 or 240 x 180
pixels; the frame rate for Web video ranges from 10
to 15 frames per second (fps)
 The greater the number of bits or bit depth, the bigger
the file size
 You can define the general quality level of your video,
which automatically adjusts the compression
Chapter 6: Multimedia and Interactivity Elements
21
Interactive Elements
Requires user participation with one or more
elements on a Web page
Use interactive elements on your Web site to
keep the user interested and involved with
your content
Various ways to incorporate interactivity
Chapter 6: Multimedia and Interactivity Elements
22
Web-based Form Guidelines
Structured Web documents on which
information can be entered
Common form elements include text boxes,
check boxes, option buttons, drop-down list
boxes, and a Send or Submit button
Forms are frequently used to obtain comments
and feedback or to order products or services
Chapter 6: Multimedia and Interactivity Elements
23
JavaScript, Applets, and Servlets
JavaScript, applets, and servlets are all used
to create interactive content elements
Applets are small programs that are designed
to execute in a browser and are sent to a
browser as a separate file together with the
related Web page
A servlet is similar to an applet; however, a
servlet executes from the server instead of
executing within the visitor’s browser
Chapter 6: Multimedia and Interactivity Elements
24
Blogs
Popular way to promote Web site interactivity
Sites such as Blogger, WordPress, and
Typepad provide tools you can use to quickly
create a blog hosted on your own server or on
the tool provider’s server
Chapter 6: Multimedia and Interactivity Elements
25
Blogs
Chapter 6: Multimedia and Interactivity Elements
26
Live Chat
Live chat allows visitors to ask questions about
products or services in real time
Visitors’ chat messages are answered by inhouse chat agents
Chapter 6: Multimedia and Interactivity Elements
27
Live Chat
Chapter 6: Multimedia and Interactivity Elements
28
Chapter Summary
 Explain Web page multimedia issues
 Describe types of Web page animation
 Discuss adding and editing Web page audio and
video elements
 Identify ways to effectively use interactive elements
Chapter 6: Multimedia and Interactivity Elements
29
6
Multimedia and
Interactivity Elements
Web Design,
3rd Edition