ARTDM 171, Week 14:
Multimedia on the Web
          Gilbert Guerrero
        gguerrero@dvc.edu
gilbertguerrero.com/blog/ar...
Homework

• Put your homework in my dropbox
• Put them in a folder with your
 lastname and first initial
• Example:
    smi...
Multimedia
Plug-ins

• The Web was designed to display
  text and include images
• These are the “native” formats of the
  Web
• Ever...
Significant and Problematic
Although plug-ins significantly expand the
possibilities of the Web, theyʼre equally problematic...
Eolas patent
•   Microsoft was sued by the Eolas company which
    held a patent on technology to play media
    automatic...
Codecs
• Compression-Decompression, or Code-
  Decode
• Source files are not viewable on the Web
• Your editing software co...
Common codecs and formats
Video:
•Flash Video, .flv
•Windows Media, .wmv
•AVI (Audio Video Interleave), .avi
•MPEG, .mpg or...
Design considerations
•   Donʼt surprise your users with multimedia
•   Present media on a secondary page
•   Use a fast l...
Embedding a Flash
     Video
FLV - Flash Video format
•   Flash is the most widely used plug-in on the
    Web right now.  98% penetration, more than
 ...
More about embedding Flash
• Bye Bye Embed by Elizabeth Castro,
  A List Apart 
• Flash Embedding Cage Match by
  Bobby va...
Other Flash Video Players
(skins)
If you're not excited about
Dreamweaver's skins, you can:
•Build your own
•Download one ...
Inserting Flash
SimpleViewer

• SimpleViewer is a Flash movie that
  can pull images and thumbnails from
  a folder and show them in a
  s...
JavaScript Slideshows
Coda-Slider

• Coda-Slider uses JavaScript, HTML,
  and CSS to create a tabbed
  slideshow
• This alternative works where ...
Final Projects
Timeline
     October                November              December
29    6     13   20   27    3    10    17   24    1   ...
Final project
presentations begin in
     two weeks
Letʼs schedule day 1 and day 2
Homework, due Nov 24

• Read Chapter 18: Managing Your
  Site
• Read Metacrap: Putting the torch to
  seven straw-men of t...
Thank you
Upcoming SlideShare
Loading in...5
×

ARTDM 171, Week 14: Multimedia on the Web

286

Published on

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

  • Be the first to like this

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

No notes for slide
  • ARTDM 171, Week 14: Multimedia on the Web

    1. 1. ARTDM 171, Week 14: Multimedia on the Web Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
    2. 2. Homework • Put your homework in my dropbox • Put them in a folder with your lastname and first initial • Example: smith-h contact
    3. 3. Multimedia
    4. 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. 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. 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. 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. 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
    9. 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. 10. Embedding a Flash Video
    11. 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. 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. 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. 14. Inserting Flash
    15. 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. 16. JavaScript Slideshows
    17. 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. 18. Final Projects
    19. 19. Timeline October November December 29 6 13 20 27 3 10 17 24 1 8 15 Last day of class Strategy Present final projects Design (two days) Site development Present (html coding) revisions Page production (add content and images) Usability Testing
    20. 20. Final project presentations begin in two weeks Letʼs schedule day 1 and day 2
    21. 21. Homework, due Nov 24 • Read 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. 22. Thank you

    ×