6 Multimedia and Interactivity Elements Web Design 4

6 Multimedia and Interactivity Elements Web Design, 4 th 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 on the Web 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 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 – 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 on the Web 5

Animation Chapter 6: Multimedia and Interactivity on the Web 6

Adobe Flash Professional CS 5 and Microsoft Silverlight Ø Adobe Flash Professional CS 5 is a tool for creating sophisticated Flash movies Ø Simulates motion via fast-paced presentation of changing static images Ø Microsoft Silverlight is a plug-in technology designed to play the multimedia content found in rich interactive applications (RIAs) Chapter 6: Multimedia and Interactivity on the Web 7

Adobe Flash Professional CS 5 and Microsoft Silverlight Chapter 6: Multimedia and Interactivity on the Web 8

Avatars Ø Avatars are alternative personas or virtual identities for MMOGs or 3 D 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 on the Web 9

Avatars Chapter 6: Multimedia and Interactivity on the Web 10

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 11

Gadgets Chapter 6: Multimedia and Interactivity on the Web 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 on the Web 13

Audio and Visual Elements Chapter 6: Multimedia and Interactivity on the Web 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 on the Web 15

Audio Elements Ø Streaming audio begins playing as the audio is delivered by the server – Real. Audio • Real. Player – Windows Media • Windows Media Player – Quick. Time • Quick. Time Player Chapter 6: Multimedia and Interactivity on the Web 16

Streaming Audio Chapter 6: Multimedia and Interactivity on the Web 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 k. Hz sampling rate for voice only audio, and 22 k. Hz 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 18

Video Elements Ø 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 CS 5 – Pinnacle Studio Ultimate version 14 – Windows Movie Maker Chapter 6: Multimedia and Interactivity on the Web 19

Video Elements Chapter 6: Multimedia and Interactivity on the Web 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 on the Web 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 on the Web 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 on the Web 23

Java. Script, Applets, and Servlets Ø Java. Script, 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 on the Web 24

Blogs Ø Popular way to promote Web site interactivity Ø Sites such as Blogger, Typepad, and Word. Press 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 25

Blogs Chapter 6: Multimedia and Interactivity on the Web 26

Comments Ø Adding a comments feature to your site enhances interactivity by enabling visitors to comment on a specific article and by creating a sense of community Ø It is important to monitor comments posted to your Web site for spam or malicious content Chapter 6: Multimedia and Interactivity on the Web 27

Comments Chapter 6: Multimedia and Interactivity on the Web 28

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 on the Web 29

Live Chat Chapter 6: Multimedia and Interactivity on the Web 30

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 on the Web 31