© 2004 Ken Baldauf, All rights reserved.

Multimedia

CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida State University

From Web Style Guide, Chapter 12 Mulimedia

© 2010 Ken Baldauf, All rights reserved.

Use images, animations, video, and sound only when they are relevant to your message

Use stable technology that works for the great majority of client machines

© 2010 Ken Baldauf, All rights reserved.

Considerations

A significant amount of downsampling and compression is required to create a file that is small enough to be delivered via the web.

When planning for multimedia content, take into account the needs of users with disabilities: both technology-disabled users who are connecting to the Internet via modem, cell phone network, or slow wireless or are using “thin” mobile devices or outdated machines, and physically disabled users for whom multimedia content may be out of reach.

© 2010 Ken Baldauf, All rights reserved.

Examples

Poor use of media:http://www.dpgraph.com/

Effective use of media:http://www.nationalgeographic.com/

http://www.webpagesthatsuck.com/

© 2010 Ken Baldauf, All rights reserved.

Web Multimedia Strategies

The key to successful web multimedia is to tailor your content for web delivery.

© 2010 Ken Baldauf, All rights reserved.

Audio

HTML 1 - 4<embed src='applause.mp3' height=0 width=0>"

HTML 5<audio src="applause.mp3" controls="controls">Your browser does not support the audio element.</audio>

http://www.w3schools.com/media/media_browsersounds.asphttp://www.w3schools.com/html5/tag_audio.asp

© 2010 Ken Baldauf, All rights reserved.

Embedding Various Media

Embed code is provided by the following services: www.youtube.com www.slideshare.com www.google.com/calendar www.facebook.com/badges/

Just cut and paste into your HTML

© 2010 Ken Baldauf, All rights reserved.

Video

HTML 1 - 4http://www.w3schools.com/media/media_browservideos.asp

HTML 5<video src=”igen.mov" width="320" height="240" controls="controls">Your browser does not support the video tag.</video>

http://www.w3schools.com/media/media_browservideos.asphttp://www.w3schools.com/html5/html5_video.asp

http://www.longtailvideo.com/support/jw-player/13/embedding-flashhttp://www.adobe.com/products/flash/design/

© 2010 Ken Baldauf, All rights reserved.

Drawing in HTML 5

http://www.w3schools.com/html5/html5_canvas.asp

https://developer.mozilla.org/en/canvas_tutorial http://www.blobsallad.se/

© 2010 Ken Baldauf, All rights reserved.

Preparing Multimedia

Processing: Downsampling audio and video to codecs that reduce file size for faster delivery.

Delivery: includes the server, the network, the client computer, and the web browser and browser plug-ins

Streaming: sends data to the desktop continuously but does not download the entire file

Downloading: stores media on user’s computer, typically playing it while downloading

© 2010 Ken Baldauf, All rights reserved.

Design and Multimedia

Inform your users Provide controls – including keyboard

controls Offer choice

© 2010 Ken Baldauf, All rights reserved.