Embed Size (px)
Citation preview
Web Design,3rd Edition
6Multimedia andInteractivity Elements
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, 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
More on Web
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
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
More on Web
Animated GIFs
freeware and shareware to create animated GIFs can be downloaded from Web
– Microangelo GIFted– GIF Construction Set Professional
Process to create Animated GIFs1. 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
Chapter 6: Multimedia and Interactivity Elements 7
Sequence of frames Animated GIF button
preview: first frameAnimated GIF button
preview: second frame
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 4-
bit/16 colors
4. limit the number of frames in animation
Your Turn! (page 161)Exploring Animated GIFs
1. 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.
2. 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.
3. 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 imagesMicrosoft 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
Chapter 6: Multimedia and Interactivity Elements 11
Microsoft Silverlightis a plug-in developed
for rich interactiveapplications
More on Web
frames
Photos inFlash movie
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
Chapter 6: Multimedia and Interactivity Elements 15
Used by some B2C retailersas virtual models that enable
visitors to try on clothingin virtual dressing rooms
Gadgets
Small code objects that provide dynamic Web content– Clocks– Weather– Reports– Breaking news headlines
Chapter 6: Multimedia and Interactivity Elements 16
Gadgets
Chapter 6: Multimedia and Interactivity Elements 17
Can copy the HTML codefor a specific gadgetand paste it on your
Web page
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
Chapter 6: Multimedia and Interactivity Elements 19
Avoid copyright infringementwhen incorporating music
at your Web site
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 filesAudio 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
More on Web
Streaming Audio
Chapter 6: Multimedia and Interactivity Elements 22
RealPlayer and WindowsMedia Player are both usedfor playing streaming audio
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
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
More on Web
Video on the Web
Chapter 6: Multimedia and Interactivity Elements 28
Windows Movie Makervideo editing software
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
More on Web
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 frame-accurate 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 andhighlighted by colored bars
click to confirminformation before
submitting form
consistent eye-pleasingalignment 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 onrollover button produces a
green square that surroundsand highlights button
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
More on Web
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
Blogs
Popular way to promote Web site interactivitySites 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
More on Web
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.
Live Chat
Live chat allows visitors to ask questions about products or services in real time
Visitors’ chat messages are answered by in-house chat agents
Chapter 6: Multimedia and Interactivity Elements 44
More on Web
Live Chat
Chapter 6: Multimedia and Interactivity Elements 45
Live chatwindow
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 180Do steps 1-6 creating a multiple page Word
document.See assignment web page for details.
Web Design,3rd Edition
6Multimedia andInteractivity Elements
