Intro to Web Design 6e Chapter 6
- 1. 1 Web Design 6E Chapter 6: Multimedia and Interactivity © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 2. 2 Chapter Objectives •Explain webpage multimedia and animation issues •Discuss adding and editing webpage audio and video elements •Describe types of webpage animation •Identify ways to effectively use interactive elements © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 3. 3 Multimedia and Animation Issues (1 of 3) •Multimedia and animated elements are a combination of text, images, animation, audio, and video • Can inform and educate • Web design tools can help incorporate • Not all compatible with all browsers and devices • Add credit and captioning © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 4. 4 Multimedia and Animation Issues (2 of 3) •Use only when its use supports your website goals -Longer download times -Possibility of plug-ins •Can embed instead -YouTube, Flickr, Spotify © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 5. 5 Multimedia and Animation Issues (3 of 3) •Guidelines to follow • Choice of low- or high-bandwidth • Inform of plug-ins and provide downloads • Options for full-screen viewing • Text equivalents • Break into short segments © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 6. 6 Audio and Video Elements (1 of 3) •Downloadable or streaming •HTML5 <audio> and <video> tags •Streaming begins to play as the server delivers file to device •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 © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 7. 7 Audio and Video Elements (2 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 8. 8 Audio and Video Elements (3 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 9. 9 Audio Elements (1 of x) •Audio files: • Add sound effects • Entertain visitors with background music • Deliver a personal message • Promote a product or service with testimonial statements •You can record your own audio files • Ensure that recordings are high in quality © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 10. 10 Audio Elements (2 of x) •You can record your own audio files • Use audio-recording and editing software • A podcast is digital audio or video available to listen to remotely • After Apple iPod player © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 11. 11 Editing Audio Files •Use these guidelines for creating and editing audio files for the web: • Keep clips short • Consider the audio channel type -Mono and stereo • Sampling rate is number of samples per second during recording • Bit depth is measure of audio quality © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 12. 12 Video Elements (1 of 3) •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 © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 13. 13 Video Elements (2 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 14. 14 Video Elements (3 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 15. 15 Editing Video Files •Frame size: number of pixels for width and height •Frame rate: times per second the picture changes • 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 adjust the general quality level of your video by changing the compression © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 16. 16 Animation •Animation can be used to • Catch a visitor’s attention • Demonstrate a simple process • Illustrate change over time • Help user understand how to interact with the website -UX-driven interactive animations © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 17. 17 Animated Elements (1 of 2) •Animations use a fast-paced presentation of changing static images to simulate motion •Frame-by-frame animation change every image manually •Animation with tweening creates animation from beginning and ending frame © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 18. 18 Animated Elements (2 of 2) •Animation software • HTML5 Maker • Adobe Animate CC • GreenSock • JavaScript, HTML5, CSS3 • Browser- and device-independent animations • Purchase ready-to-use animations from websites • Costs and restrictions vary © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 19. 19 Animated GIFs (1 of 5) •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) • Tumblr and Giphy websites provide downloadable animated GIFs © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 20. 20 Animated GIFs (2 of 5) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 21. 21 Animated GIFs (3 of 5) •Software can help create animated GIFs • Some allow tweening © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 22. 22 Animated GIFs (4 of 5) •Steps to create animated GIFs • Identify sequence of images • Specify time between frames • Specify if animation should loop or repeat • Set background transparency, add text or caption • Test and make adjustment •Avoid blinking or flashing lights for accessibility © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 23. 23 Animated GIFs (5 of 5) •To optimize animated GIFs for size and quality: • Plan ahead to determine the effects you want and limit number of frames • Limit image colors • Crop unwanted pixels • Use software to optimize for file size and quality © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 24. 24 Interactivity •Enable the website publisher and website visitors to engage in interactive, two-way communication •UX-driven interactive elements • Buttons • Hidden menus • Calls-to-action •Sticky content entices visitors to return frequently •Micro-interactions are small details that give feedback © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 25. 25 UX-Driven Interactivity •Put the website visitor’s needs first • Engage and instruct • Save space • Touch screens • Respond to actions © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 26. 26 Web-Based Form Guidelines (1 of 4) •Web-based forms allow visitors to submit information to a website publisher using email or directly to a database or spreadsheet •Forms are frequently used to obtain comments and feedback or to order products or services •Break forms into multiple form pages •Enable autocomplete or autofill •Include required fields © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 27. 27 Web-Based Form Guidelines (2 of 4) •Common form elements include: • Text boxes • Check boxes • Option buttons • Drop-down list boxes • Send or Submit button •Each element is a field • Follow logical sequence for field order © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 28. 28 Web-Based Form Guidelines (3 of 4) •To create forms that follow UX principles: • Required fields • Indicate values that can be copied • Make text boxes large enough • Use an input mask • Send confirmation • Use check boxes and provide comment space • Plan how to collect, store, analyze and use data © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 29. 29 Web-Based Form Guidelines (4 of 4) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 30. 30 Interactive Content Elements (1 of 2) •Scripting languages help create interactive elements • JavaScript, PHP, CoffeeScript •Programmers insert scripts directly into HTML code •Widgets or gadgets are small code objects • Clocks, weather, breaking news, etc. © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 31. 31 Interactive Content Elements (2 of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 32. 32 Blogs (1 of 3) •Some bloggers turn a profit by soliciting ads or providing links to purchase products •Analytics track statistics to gauge success • Page views • Page clicks • Social media shares • Time spent on webpage © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 33. 33 Blogs (2 of 3) •Content management systems provide blog tools • Blogger • Medium • WordPress • Dashboard is a control panel • Create and publish posts • Analytics • Social media © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 34. 34 Blogs (3 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 35. 35 Comments (1 of 2) •Adding a comments feature to your website enhances interactivity by enabling visitors to comment on articles and by creating a sense of community •Comments help gauge interest in posts or articles •It is important to monitor comments posted to your website for spam or malicious content • Account creation •Use services to incorporate and manage comments © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 36. 36 Comments (2 of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 37. 37 Avatars (1 of 2) •Avatars are alternative personas or virtual identities for MMOGs or 3D virtual worlds • Virtual identities •Avatars can be found • In email marketing campaigns • Business or personal blogs • E-commerce websites -Virtual models © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 38. 38 Avatars (2 of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 39. 39 Live Chat •Live chat allows visitors to ask questions and receive answers in real time using text, voice, or video •Reactive or broadcast chat visitors initiate •Proactive chat window opens automatically •Chat agents handle the visitor’s query © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
- 40. 40 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 © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.