a r t d m171 week14 multimedia
TRANSCRIPT
![Page 1: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/1.jpg)
ARTDM 171, Week 14: Multimedia on the Web
Gilbert [email protected]
gilbertguerrero.com/blog/artdm-171/
![Page 2: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/2.jpg)
Homework
• Put your homework in my dropbox
• Put them in a folder with your lastname and first initial
• Example:
smith-h contact
![Page 3: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/3.jpg)
Multimedia
![Page 4: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/4.jpg)
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
![Page 5: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/5.jpg)
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
![Page 6: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/6.jpg)
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
![Page 7: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/7.jpg)
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
![Page 8: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/8.jpg)
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
![Page 9: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/9.jpg)
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
![Page 10: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/10.jpg)
Embedding a Flash Video
![Page 11: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/11.jpg)
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
![Page 12: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/12.jpg)
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
![Page 13: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/13.jpg)
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
![Page 14: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/14.jpg)
Inserting Flash
![Page 15: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/15.jpg)
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
![Page 16: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/16.jpg)
JavaScript Slideshows
![Page 17: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/17.jpg)
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
![Page 18: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/18.jpg)
Final Projects
![Page 19: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/19.jpg)
TimelineDecember
1 8 152417103272013629
NovemberOctober
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
![Page 20: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/20.jpg)
Final project presentations begin in
two weeksLet’s schedule day 1 and day 2
![Page 21: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/21.jpg)
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)
![Page 22: A R T D M171 Week14 Multimedia](https://reader035.vdocument.in/reader035/viewer/2022062406/559059751a28ab604b8b47cb/html5/thumbnails/22.jpg)
Thank you