Download Web Design 6

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
More on Web
Multimedia Issues
Combination of text, graphics, animation,
audio, and video
Most Web Authoring packages include tools
for incorporating multimedia
Use multimedia sparingly, and for distinct
purposes
Chapter 6: Multimedia and Interactivity Elements
3
Multimedia Issues
Guidelines to follow
– Identify high-bandwidth areas
– Give users a choice of content
– List any necessary plug-ins
– Provide explanations of what users should expect
– Offer low-bandwidth alternatives
– Break files into short segments to create smaller
files
Chapter 6: Multimedia and Interactivity Elements
4
More on Web
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
Animated GIFs
 freeware and shareware to create animated GIFs
can be downloaded from Web
–
–
Microangelo GIFted
GIF Construction Set Professional
 Process to create Animated GIFs
1. identify sequential order of GIF images
2. Specify time between each frame
3. Specify if background transparent and if animation should
loop or repeat
Animation
Sequence
of frames
Animated GIF button
preview: first frame
Chapter 6: Multimedia and Interactivity Elements
Animated GIF button
preview: second frame
7
Animated GIFs
 To generate Animated GIFs optimized for Web
1. limit physical size of images
2. create images with solid colors using Web-safe
palette
3. decrease bit depth
– default 8-bit/256 colors, try 6-bit/64 colors or 4bit/16 colors
4. limit the number of frames in animation
Your Turn! (page 161)
Exploring Animated GIFs
1.
2.
3.

Using the search tool of your choice and the keywords animated
GIFs or similar keywords, locate resource sites for animated GIFs.
Identify the URLs of three resource sites that offer royalty-free or
low-cost animated GIFs.
Identify one royalty-free animated GIF that would be suitable for
C2C auction Web site. With permission from your instructor,
download the animated GIF and save the file to your computer's
hard drive.
Write a report for your instructor discussing your research. Name
the source of the animated GIF you choose to describe it. Explain
how including the animated GIF on a Web page at a C2C auction
site supports the site's message and meets target audience
expectations for a C2C auction site.
Note: You can find a GIF that is suitable for your web site instead of
the C2C auction Web site listed in this Your Turn exercise.
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
10
Adobe Flash CS3
and Microsoft Silverlight
frames
More on Web
Microsoft Silverlight
is a plug-in developed
for rich interactive
applications
Photos in
Flash movie
Chapter 6: Multimedia and Interactivity Elements
11
Flash Animation
 Macromedia Flash is a tool for creating sophisticated
animation
 Simulates motion via fast-paced presentation of
changing static images
 Frame-by-frame animation – image changed
manually
– Key-frame
 Animation with tweening – only beginning and ending
frame need be created
– Flash automatically creates necessary frames within the
changing image
– more expedient, less intensive method than frame-by-frame
animation
Flash animation
 Guidelines for to incorporate Flash for Web
1. necessary expertise and resources to maintain
Flash components
2. Use Flash only if it contributes to purpose of Web
site in a way other components cannot
3. Indicate on site plug-in needed
– provide link to plug-in download site
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
14
Avatars
Used by some B2C retailers
as virtual models that enable
visitors to try on clothing
in virtual dressing rooms
Chapter 6: Multimedia and Interactivity Elements
15
Gadgets
Small code objects that provide dynamic Web
content
– Clocks
– Weather
– Reports
– Breaking news headlines
Chapter 6: Multimedia and Interactivity Elements
16
Gadgets
Can copy the HTML code
for a specific gadget
and paste it on your
Web page
Chapter 6: Multimedia and Interactivity Elements
17
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
18
Audio and Visual Elements
Avoid copyright infringement
when incorporating music
at your Web site
Chapter 6: Multimedia and Interactivity Elements
19
More on Web
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
Audio must be in digital format to be used
Chapter 6: Multimedia and Interactivity Elements
20
More on Web
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
21
Streaming Audio
RealPlayer and Windows
Media Player are both used
Chapter 6: Multimedia and Interactivity Elements
for playing streaming audio
22
Editing Audio
 Extremely large file size impacts transfer time
 Create a balance between transfer time and sound
quality
– Limit file size via duration and channels
– Limit file size via hardware and software
 Optimize downloadable audio and video files to
prevent long download times, which may deter
visitors from your Web site
Editing Audio
 Guidelines: Limit file size via duration and channels
– shorter audio clips equal smaller files
• include only necessary content
– Mono (one-channel)
– Stereo (two-channel)
• stereo audio file will double the size of a mono file
– for Web usage choose mono
Editing Audio
 Guidelines: Limit file size via hardware and software
– during conversion of analog to digital, samples of audio
wave obtained
– Sampling rate, measured in kilohertz (kHz) amount of
samples obtained per second (8 kHz for voice and 22kHz
for music)
– bit depth – another measure of quality
• 8-bit audio file recommended for Web
– Codecs – special computer programs that can greatly
reduce audio file size
• codecs (compressors/decompressors) utilize lossy compression to
remove redundant less-significant data
– after each compression quality of file will diminish
More on Web
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 12
– Windows Movie Maker
Chapter 6: Multimedia and Interactivity Elements
26
More on Web
Video on the Web
File size is a much greater issue than with
audio
Lack of bandwidth can cause transmission
delays
If possible, consider low-bandwidth
alternatives to video
– Animation
– Audio
Video on the Web
Windows Movie Maker
video editing software
Chapter 6: Multimedia and Interactivity Elements
28
More on Web
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
29
Optimizing Downloadable Video
 Reducing the file size of video is imperative to
improve download times
– Standard frame size for Web video is
160 x 120 pixels
– Use frame rate of 10 to 15 frames per second
– decrease video segment from 16-bit to 8-bit
 Find a balance between the size of the file and the
quality of the video that will yield satisfactory results
for both criteria
Streaming Video
 Should be used for media over one minute in length
 RealNetworks RealVideo
– requires specifically configured Helix Universal server
– Requires RealProducer software
– Can be used to deliver live videos
 QuickTime
– H.264 video
– hot keys – facilitate quick, easy video editing
 Microsoft Windows Media – capture video with frameaccurate control
 Broadband Internet services make streaming video
very practical
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
32
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
33
Online Forms
 Structured Web documents in which information can
be entered
– require essential information before submitting
– browsers may display forms differently
• use table to align
–
–
–
–
–
–
–
make text boxes large enough to hold data
restrict responses to contain only number when appropriate
use check boxes to allow more than one response
provide space for additional comments
use color to highlight and segment information
include reset button to clear all information quickly
build in capability of confirming information
• send confirmation notice
Online Forms
information segmented and
highlighted by colored bars
click to confirm
information before
submitting form
consistent eye-pleasing
alignment of the
table elements
Additional Interactive Page Elements
 Macromedia Flash
– Used to create animated buttons, navigation, menus, and
games
– rollover button – changes its appearance in reaction to
certain mouse movements
 Macromedia Shockwave
– Originally developed to create multimedia games and
movies for CDs and kiosks
– Used to produce high-quality Web experiences
– Director – powerful, expensive multimedia authoring tool
used to create Shockwave files, utilizes programming
language Lingo.
Additional Interactive Page Elements
placing the mouse on
rollover button produces a
green square that surrounds
and highlights button
More on Web
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
38
JavaScript, Applets, and Servlets
Java applets
– Short programs that make Web pages more
dynamic and interactive
– Sent as a separate file, along side the HTML
document
– Applets don’t always work well with all browsers
• Applets must be enabled in browser
– Written using JDK or Visual J++
JavaScript, Applets, and Servlets
JavaScript
– Inserted directly into the HTML code
– Frequent uses
•
•
•
•
Verify form information
Create rollover buttons
Advertising banners
Pop-up windows
More on Web
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
41
Blogs
Chapter 6: Multimedia and Interactivity Elements
42
Your Turn! (page 173)
Exploring Business Blogs
1.
Visit the Web Design Chapter 6 Online Companion Web page
(scsite.com/web3e/ch6/ ) and click links in the Your Turn section to
review three business blogs:
a. Microsoft SMB Community Blog
b. The Trump Blog
c. KILLERSITES.COM
2.
Write a report for your instructor that describes the topics
discussed on the blogs. In what way do the blogs and blog
comment postings promote interactivity between the blog
publishers and the visitors who read and post comments to the
blog? Based on your review, what recommendations would you
make to a client interested in hosting a blog at his or her B2C Web
site.
More on Web
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
44
Live Chat
Live chat
window
Chapter 6: Multimedia and Interactivity Elements
45
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
46
Case Study # 6
Case Study Page 180
Do steps 1-6 creating a multiple page Word
document.
See assignment web page for details.
6
Multimedia and
Interactivity Elements
Web Design,
3rd Edition