1. Web Design, 5 th Edition 6 Multimedia and Interactivity Elements

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

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

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

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

6. Animation Chapter 6: Multimedia and Interactivity on the Web6

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

8. 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 Web8

9. Avatars Chapter 6: Multimedia and Interactivity on the Web9

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 Web10

11. Gadgets Chapter 6: Multimedia and Interactivity on the Web11

12. 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 Web12

13. Audio and Visual Elements Chapter 6: Multimedia and Interactivity on the Web13

14. 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 Web14

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

16. Audio Elements Chapter 6: Multimedia and Interactivity on the Web16

17. 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 Web17

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

19. Video Elements Chapter 6: Multimedia and Interactivity on the Web19

20. 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 Web20

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

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 Web22

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

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

25. Blogs Chapter 6: Multimedia and Interactivity on the Web25

26. 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 Web26

27. Comments Chapter 6: Multimedia and Interactivity on the Web27

28. 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 Web28

29. Live Chat Chapter 6: Multimedia and Interactivity on the Web29

30. 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 Web30

31. Web Design, 5 th Edition 6 Multimedia and Interactivity Elements