audio and video on the web presentation by cheryl deas and pasha souvorin multimedia for web...
TRANSCRIPT
![Page 1: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/1.jpg)
Audio and Video on the Web
Presentation by Cheryl Deas and Pasha Souvorin
Multimedia for Web Designers
![Page 2: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/2.jpg)
2
Multimedia
Can be text, graphics, animation, audio, and video
Most web authoring applications include multimedia tools
Multimedia can help you to better communicate
Multimedia has many challenges for web designers
![Page 3: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/3.jpg)
3
Multimedia
Use multimedia sparingly
Think of how you can use media to communicate
All media in your site should have a purpose
The purpose should be to help your site communicate to it’s audience
![Page 4: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/4.jpg)
4
Multimedia
Guidelines to follow:
– Understand the affect on bandwidth– Offer low-bandwidth alternatives– Avoid requiring plug-ins if possible– Offer links to appropriate plug-ins as necessary
![Page 5: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/5.jpg)
5
Multimedia
Use strategies to save bandwidth:
– Compression– Streaming– File chunking– Linking instead of embedding– Avoid multimedia unless necessary
![Page 6: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/6.jpg)
6
Downloadable vs. Streaming Media
Downloadable media must be fully downloaded before users can hear or see it
Streaming media begins to play as soon as data begins to stream– Examples: YouTube, Netflix, RealPlayer– Requires web developer to set up a streaming
server
![Page 7: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/7.jpg)
7
Animation
Animated GIFs
– Variation of GIF 89A format– Sequence of frames that simulate movement– Created with multiple tools, such as GIMP and
Fireworks
![Page 8: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/8.jpg)
8
Animation
Flash (.swf)
– Proprietary format belonging to Adobe– Widely available through free plug-in (flash player)– Content created in Flash or Fireworks– High learning curve for designers– Relatively low file sizes (good for bandwidth)– .flv variant is a high quality, low bandwidth video
format that can also be streamed
![Page 9: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/9.jpg)
9
Using Animation on the Web
Benefits of Animation
– Catches a visitors’ attention– Demonstrates a simple process– Illustrates change over time– “Wow” factor
![Page 10: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/10.jpg)
10
Using Animation on the Web
Animation’s Down Side
– Requires plug-in– Higher bandwidth than text– Often distracting, annoying, unnecessary– .swf format won’t play on iOS devices (iPod,
iPhone, iPad)
![Page 11: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/11.jpg)
11
Using Audio on the Web
Many users are annoyed if web pages start playing music for no reason
Give the user control to be effective– Embed the audio into a .swf– Include controls for play, pause, etc.
![Page 12: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/12.jpg)
12
Editing Audio
Use compressed formats on web pages whenever possible
– .WAV (Windows) and .AIFF (Mac OS) are uncompressed
– .mp3 format is compressed
![Page 13: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/13.jpg)
13
Editing Audio
Audio Editing Software
– Audacity (open source)– Adobe SoundBooth– Pro Tools (high-end professional)
![Page 14: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/14.jpg)
14
Editing Audio
Copyright
– You cannot use any sound files without written permission from the owner, including sampling small pieces
– Many music websites violate copyright laws– Be very careful – Only original sound is safe
![Page 15: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/15.jpg)
15
Video on the Web
Requires most bandwidth
Requires user to have fast connection (US avg. 5MB/s*)
*source: Akamai State of the Internet 2010 Report
![Page 16: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/16.jpg)
16
Video on the Web
Consider low-bandwidth alternatives– Animation– Linking to video hosted elsewhere (YouTube)
instead of embedding video hosted on your site– Resizing video to be smaller
• 640x480 pixels is the full 480p size (web large)• 320x240 px is often called web medium• 160x120 px is often called web small
– Providing small and large versions of videos for users to choose from
*source: Akamai State of the Internet 2010 Report
![Page 17: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/17.jpg)
17
Video Formats
Web Video Formats– .FLV (Adobe) and RealVideo (Real Media)
• Proprietary formats that allow compression and streaming
• Both require a free plug-in to view
– MPEG-4• Compatible with lots of computers• Can be compressed as H.264, which has high quality
and small file sizes• Requires software to compress (many commercial
and open source choices)
![Page 18: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/18.jpg)
18
Video Formats
Computer Video Formats (not appropriate for web delivery)– .AVI (Windows Video)– .MOV (QuickTime Video for Macs)
More Information– Website Helpers.com: Web Video Demystified– W3Schools: Multimedia Video Formats
![Page 19: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/19.jpg)
19
Effective Use of Multimedia
Multimedia should be essential to the web site’s purpose– Every website should have a purpose– The multimedia should be necessary to help the site
accomplish it’s purpose Multimedia should help the site communicate
efectively– Every media communicates differently– The same message will come across differently
depending on whether you use text, pictures, video, animation, or sound to share that message
– The multimeia you use should communicate your site’s message perfectly
![Page 20: Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers](https://reader030.vdocuments.mx/reader030/viewer/2022032606/56649ea15503460f94ba506c/html5/thumbnails/20.jpg)
20
Effective Use of Multimedia
Multimedia should be integrated into the design of the site– Multimedia shouldn’t just appear on top of your site’s
style– It should be integrated into the design of the site– Multimedia, when used effectively, should be part of how
your site works, it should feel like it belongs
Web Resources– Smashing Magazine: 10 Principles of Effective Web
Design– Smart Webby: Web Design Tips