6
Multimedia and
Interactivity Elements
Web Design,
5th Edition
Chapter Objectives
 Explain webpage multimedia issues
 Describe types of webpage animation
 Discuss adding and editing webpage audio and video
elements
 Identify ways to effectively use interactive elements
Chapter 6: Multimedia and Interactivity on the Web
2
Multimedia Issues
Combination of text, images, animation, audio,
and video
Most WYSIWYG editors include tools for
incorporating multimedia
Use multimedia only when its use supports
your website goals
Chapter 6: Multimedia and Interactivity on the Web
3
Multimedia Issues
Guidelines to follow
– Give visitors a choice of content
– List any necessary plug-ins
– Provide text equivalents for all multimedia
elements
– Do not waste bandwidth
– Break audio or video files into short segments
Chapter 6: Multimedia and Interactivity on the Web
4
Animation
 Animation can be used to
– Catch a visitor’s attention
– Demonstrate a simple process
– Illustrate change over time
 Animated GIFs
– Single file that stores separate images within multiple
animation frames
– The sequence of frames over a specified time interval
usually stated in frames-per-second (fps)
– Selective use can add visual appeal
Chapter 6: Multimedia and Interactivity on the Web
5
Animation
Chapter 6: Multimedia and Interactivity on the Web
6
Rich Interactive Applications
Web-based computer applications that contain
interactive multimedia elements
Flash and Silverlight are not compatible with all
devices and browsers
Web designers increasingly are relying on
HTML 5 standards
– Open format
Frame-by-frame animation vs. animation
with tweening
Chapter 6: Multimedia and Interactivity on the Web
7
Avatars
Avatars are alternative personas or virtual
identities for MMOGs or 3D virtual worlds
Avatars can be found
– In email marketing campaigns
– Business or personal blogs
– E-commerce websites
• Virtual models
Chapter 6: Multimedia and Interactivity on the Web
8
Avatars
Chapter 6: Multimedia and Interactivity on the Web
9
Gadgets
Also called widgets
Small code objects that provide dynamic web
content
– Clocks
– Weather reports
– Breaking news headlines
Chapter 6: Multimedia and Interactivity on the Web
10
Gadgets
Chapter 6: Multimedia and Interactivity on the Web
11
Audio and Visual Elements
Downloadable media must be downloaded in
its entirety before you can access it
Progressive downloading, or pseudo
streaming, allows the media to play while it
downloads
Chapter 6: Multimedia and Interactivity on the Web
12
Audio and Visual Elements
Chapter 6: Multimedia and Interactivity on the Web
13
Audio Elements
Audio files can add sound effects, entertain
visitors with background music, deliver a
personal message, or promote a product or
service with testimonial statements
You can record your own audio files
– Ensure that recordings are high in quality
Chapter 6: Multimedia and Interactivity on the Web
14
Audio Elements
Streaming audio begins playing as the server
delivers the audio file to the computer
– Xbox Music
– Apple QuickTime Player
Chapter 6: Multimedia and Interactivity on the Web
15
Audio Elements
Chapter 6: Multimedia and Interactivity on the Web
16
Editing Audio Files
 Use these guidelines for creating and editing audio
files for the web:
– Keep audio clips short
– Consider the audio channel type
– 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 on the Web
17
Video Elements
Downloadable or streaming video can have a
powerful impact, but is a challenge to deliver
You can download royalty-free videos from the
web, or create your own video files using a
digital video camera or smartphone with video
recording capabilities
– Adobe Premiere Pro
– Pinnacle Studio Ultimate version 14
– Windows Movie Maker
Chapter 6: Multimedia and Interactivity on the Web
18
Video Elements
Chapter 6: Multimedia and Interactivity on the Web
19
Editing Video Files
 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
by adjusting the compression
Chapter 6: Multimedia and Interactivity on the Web
20
Interactive Elements
Enable the website publisher and website
visitors to engage in interactive, two-way
communication
Web-based forms allow visitors to submit
information to a website publisher using email
or directly to a database or spreadsheet
Chapter 6: Multimedia and Interactivity on the Web
21
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 on the Web
22
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 webpage
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 on the Web
23
Blogs
Millions of Internet users now are bloggers
Sites such as Blogger, Typepad, and
WordPress 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 on the Web
24
Blogs
Chapter 6: Multimedia and Interactivity on the Web
25
Comments
Adding a comments feature to your website
enhances interactivity by enabling visitors to
comment on articles and by creating a sense
of community
It is important to monitor comments posted to
your website for spam or malicious content
Chapter 6: Multimedia and Interactivity on the Web
26
Comments
Chapter 6: Multimedia and Interactivity on the Web
27
Live Chat
Live chat allows visitors to ask questions and
receive answers in real time using text, voice,
or video
Visitors’ chat messages are answered by
in-house chat agents, a customer service
representative who handles the visitor’s query
Chapter 6: Multimedia and Interactivity on the Web
28
Live Chat
Chapter 6: Multimedia and Interactivity on the Web
29
Chapter Summary
 Explain webpage multimedia issues
 Describe types of webpage animation
 Discuss adding and editing webpage audio and video
elements
 Identify ways to effectively use interactive elements
Chapter 6: Multimedia and Interactivity on the Web
30
6
Multimedia and
Interactivity Elements
Web Design,
5th Edition