1. Web Design, 3 rd Edition 6 Multimedia and Interactivity Elements

2. 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 Elements2

3. 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 Elements3

4. 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 Elements4

5. 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 Elements5

6. Animation Chapter 6: Multimedia and Interactivity Elements6

7. 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 Elements7

8. Adobe Flash CS3 and Microsoft Silverlight Chapter 6: Multimedia and Interactivity Elements8

9. 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 Elements9

10. Avatars Chapter 6: Multimedia and Interactivity Elements10

11. Gadgets  Small code objects that provide dynamic Web content –Clocks –Weather –Reports –Breaking news headlines Chapter 6: Multimedia and Interactivity Elements11

12. Gadgets Chapter 6: Multimedia and Interactivity Elements12

13. 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 Elements13

14. Audio and Visual Elements Chapter 6: Multimedia and Interactivity Elements14

15. 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 Elements15

16. 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 Elements16

17. Streaming Audio Chapter 6: Multimedia and Interactivity Elements17

18. 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 Elements18

19. 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 Elements19

20. Video on the Web Chapter 6: Multimedia and Interactivity Elements20

21. 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 Elements21

22. 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 Elements22

23. 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 Elements23

24. 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 Elements24

25. 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 Elements25

26. Blogs Chapter 6: Multimedia and Interactivity Elements26

27. 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 Elements27

28. Live Chat Chapter 6: Multimedia and Interactivity Elements28

29. 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 Elements29

30. Web Design, 3 rd Edition 6 Multimedia and Interactivity Elements