Your SlideShare is downloading. ×
A R T D M171  Week14  Multimedia
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A R T D M171 Week14 Multimedia

274
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ARTDM 171, Week 14: Multimedia on the Web
    • Gilbert Guerrero
    • [email_address]
    • gilbertguerrero.com/blog/artdm-171/
  • 2. Homework
    • Put your homework in my dropbox
    • Put them in a folder with your lastname and first initial
    • Example:
    • smith-h contact
  • 3. Multimedia
  • 4. Plug-ins
    • The Web was designed to display text and include images
    • These are the “native” formats of the Web
    • Everything else is only viewable on the Web through a plug-in
  • 5. Significant and Problematic
    • Although plug-ins significantly expand the possibilities of the Web, they’re equally problematic
    • Compatibility with Browsers and OS
    • Must have the right plug-in to view, or the most up-to-date plug-in if it changes often
    • Not centrally controlled or standardized
    • Security concerns, since software will be installed on your users’ computers
    • More sophisticated coding to use them, with specific parameters and languages for each
  • 6. Eolas patent
    • Microsoft was sued by the Eolas company which held a patent on technology to play media automatically
    • Microsoft changed Internet Explorer to stop playing media automatically, including Flash
    • Click here to activate message appeared before users could interact with all multimedia
    • The Workaround: load multimedia dynamically using JavaScript
    • Dreamweaver automatically adds the JavaScript whenever you add Flash to a page
  • 7. Codecs
    • Compression-Decompression , or Code-Decode
    • Source files are not viewable on the Web
    • Your editing software compresses and encodes your source files with codecs
    • Plug-ins decompress and decode your multimedia files to make them viewable to your users
    • Some plug-ins can read multiple formats, not all of them can  
  • 8. Common codecs and formats
    • Video:
    • Flash Video, .flv
    • Windows Media, .wmv
    • AVI (Audio Video Interleave), .avi
    • MPEG, .mpg or mpeg
    • MP4, .mp4
    • Quicktime, .mov
    • RealVideo, .rm or .ram
    • IPod, .m4v
    • Audio:
    • MP3, .mp3
    • MIDI (Musical Instrument Digital Interface), .mid or .midi
    • Real audio, .rm or .ram
    • Wave, .wav
    • IPod, .m4a
    • Other interactive media formats:
    • Java Applets, .jar
    • Flash, .swf
  • 9. Design considerations
    • Don’t surprise your users with multimedia
    • Present media on a secondary page
    • Use a fast loading plain HTML page as the main page to present users with information and a screenshot or preview
    • Include the running time, format, and file size
    • Explain any special software requirements and provide a download link to required browser plug-ins
    • Provide playback controls
    • Make viewing your multimedia a user choice , allow your users to confirm their systems are properly configured and that they have enough bandwidth, time, and patience to continue
    • Further reading, Web Style Guide: Multimedia
  • 10. Embedding a Flash Video
  • 11. FLV - Flash Video format
    • Flash is the most widely used plug-in on the Web right now.  98% penetration , more than WMV and Quicktime
    • Just drag and drop, or:
      • Select Insert > Media > Flash Video
      • For other types of media, go to Insert > Media > Plug-in
    • Select a player skin
    • Upload all files to server
  • 12. More about embedding Flash
    • Bye Bye Embed by Elizabeth Castro, A List Apart 
    • Flash Embedding Cage Match by Bobby van der Sluis, A List Apart
  • 13. Other Flash Video Players (skins)
    • If you're not excited about Dreamweaver's skins, you can:
    • Build your own
    • Download one someone else has built
      • JW FLV Media Player
  • 14. Inserting Flash
  • 15. SimpleViewer
    • SimpleViewer is a Flash movie that can pull images and thumbnails from a folder and show them in a slideshow
    • Use the Manual Instructions for the most control
  • 16. JavaScript Slideshows
  • 17. Coda-Slider
    • Coda-Slider uses JavaScript, HTML, and CSS to create a tabbed slideshow
    • This alternative works where you don’t want to or can’t use Flash
  • 18. Final Projects
  • 19. Timeline December 1 8 15 24 17 10 3 27 20 13 6 29 November October Last day of class Present revisions Present final projects (two days) Page production (add content and images) Site development (html coding) Design Strategy Usability Testing
  • 20. Final project presentations begin in two weeks
    • Let’s schedule day 1 and day 2
  • 21. Homework, due April 30
    • Read and do exercises in Chapter 18: Managing Your Site
    • Read Metacrap: Putting the torch to seven straw-men of the meta-utopia by Cory Doctorow
    • Work on your final projects
    • Next week: Accessibility and Search Engine Optimization (SEO)
  • 22. Thank you