CH 12 Multimedia Notes

1,228 views

Published on

from www.webstyleguide.com

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,228
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CH 12 Multimedia Notes

  1. 1. © 2004 Ken Baldauf, All rights reserved. Multimedia CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 12 Mulimedia
  2. 2. © 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
  3. 3. © 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.
  4. 4. © 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/
  5. 5. © 2010 Ken Baldauf, All rights reserved. Web Multimedia Strategies The key to successful web multimedia is to tailor your content for web delivery.
  6. 6. © 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.asp http://www.w3schools.com/html5/tag_audio.asp
  7. 7. © 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
  8. 8. © 2010 Ken Baldauf, All rights reserved. Video HTML 1 - 4 http://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.asp http://www.w3schools.com/html5/html5_video.asp http://www.longtailvideo.com/support/jw-player/13/embedding-flash http://www.adobe.com/products/flash/design/
  9. 9. © 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/
  10. 10. © 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
  11. 11. © 2010 Ken Baldauf, All rights reserved. Design and Multimedia  Inform your users  Provide controls – including keyboard controls  Offer choice
  12. 12. © 2010 Ken Baldauf, All rights reserved.

×