SlideShare a Scribd company logo
ARTDM 171, Week 14:  Multimedia on the Web Gilbert Guerrero [email_address] gilbertguerrero.com/blog/artdm-171/
Homework Put your homework in my dropbox Put them in a folder with your lastname and first initial Example: smith-h   contact
Multimedia
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
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
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
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  
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
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
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 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
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
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
Inserting Flash
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
JavaScript Slideshows
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
Final Projects
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
Final project presentations begin in two weeks Let’s schedule day 1 and day 2
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)
Thank you

More Related Content

PPT
DOCX
Technical considerations 2c
PPT
Creating Extensions For Firefox
PPT
Group 2 macromedia flash
PDF
Video_Streaming
PDF
Movies On Custom Web Sites 2
PPTX
Flash Development Guide
PPTX
Fall summit 11
Technical considerations 2c
Creating Extensions For Firefox
Group 2 macromedia flash
Video_Streaming
Movies On Custom Web Sites 2
Flash Development Guide
Fall summit 11

What's hot (20)

PPT
Html5 Video Vs Flash Video presentation
PPTX
Video Captioning: How-To & Other Resources
PPT
Users Guide To Freeware Shareware And Open Source Software
PDF
Flash Presentation 25.11.10
PPT
Nov 30 Finding And Embedding Resources
PDF
Welcome to second life online
PDF
Webtools
PPTX
Running Windows applications on Linux
PPT
Silverlight Splashes Out
PPT
MALT Wiki and oEmbed
PPTX
Flashvillage
PPTX
Categories of softwares
PDF
Screen cast omatic
PPTX
Chrome O.S.
KEY
Flash platform introduction
PPTX
KEY
2012
PPT
Den Smart Presentation Final
PPT
Chrome os
PDF
test
Html5 Video Vs Flash Video presentation
Video Captioning: How-To & Other Resources
Users Guide To Freeware Shareware And Open Source Software
Flash Presentation 25.11.10
Nov 30 Finding And Embedding Resources
Welcome to second life online
Webtools
Running Windows applications on Linux
Silverlight Splashes Out
MALT Wiki and oEmbed
Flashvillage
Categories of softwares
Screen cast omatic
Chrome O.S.
Flash platform introduction
2012
Den Smart Presentation Final
Chrome os
test
Ad

Viewers also liked (6)

PPT
ARTDM 171, Week 13: Forms
PPT
ARTDM 170, Week10: Arrays + Using Randomization
PPT
ARTDM 171, Week 10: Navigation Schemes
KEY
Artdm170 Week6 Scripting Motion
PPTX
Newsroom Transformation
KEY
Artdm170 Week4 Java Script Effects
ARTDM 171, Week 13: Forms
ARTDM 170, Week10: Arrays + Using Randomization
ARTDM 171, Week 10: Navigation Schemes
Artdm170 Week6 Scripting Motion
Newsroom Transformation
Artdm170 Week4 Java Script Effects
Ad

Similar to A R T D M171 Week14 Multimedia (20)

KEY
ARTDM 171, Week 14: Multimedia on the Web
PPTX
Lesson 6
PPT
Html powerpoint-presentation116
ZIP
Wordcamp Raleigh Multimedia: Photos, Video, and Podcasting
PPTX
Html Presentation
PPT
Chapter 7 Multimedia
PPTX
PPTX
Integrating media
ZIP
WordcampNYC 2010 - Wordpress & Multimedia (Updated)
PDF
BIM Unit 7.pdf
PPT
Chapter11
PPTX
Multimedia Elements - Sound, Animation & Video - R.D.Sivakumar
PPTX
Uc14 chap10
PPTX
HTML Media
PPTX
Uc14 chap10
PPT
Presentations4 Session9
PDF
Unit 2.8 Multimedia Objects
PPTX
Multimedia IT Presentation
PDF
CU9255 internetworking Multimedia
PPTX
Multimedia tools and applications-part1.pptx
ARTDM 171, Week 14: Multimedia on the Web
Lesson 6
Html powerpoint-presentation116
Wordcamp Raleigh Multimedia: Photos, Video, and Podcasting
Html Presentation
Chapter 7 Multimedia
Integrating media
WordcampNYC 2010 - Wordpress & Multimedia (Updated)
BIM Unit 7.pdf
Chapter11
Multimedia Elements - Sound, Animation & Video - R.D.Sivakumar
Uc14 chap10
HTML Media
Uc14 chap10
Presentations4 Session9
Unit 2.8 Multimedia Objects
Multimedia IT Presentation
CU9255 internetworking Multimedia
Multimedia tools and applications-part1.pptx

More from Gilbert Guerrero (20)

PPTX
Designing for Skepticism and Bright Sunlight
KEY
ARTDM 171, Week 17: Usability Testing and QA
KEY
Artdm 171 week15 seo
KEY
Artdm 170 week15 publishing
KEY
ARTDM 171, Week 14: Forms
KEY
ARTDM 170, Week 13: Text Elements + Arrays
KEY
ARTDM 170, Week 14: Introduction to Processing
KEY
ARTDM 171, Week 13: Navigation Schemes
KEY
Artdm170 week12 user_interaction
KEY
Artdm 171 Week12 Templates
KEY
ARTDM 171, Week 10: Mood Boards + Page Comps
KEY
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
KEY
ARTDM 171, Week 9: User Experience
KEY
ARTDM 171, Week 7: Remapping Cyberspace
KEY
ARTDM 170, Week 7: Scripting Interactivity
KEY
Artdm170 week6 scripting_motion
KEY
Artdm170 Week6 Scripting Motion
KEY
Artdm170 Week6 Scripting Motion
KEY
Artdm171 Week6 Images
KEY
Artdm170 Week6 Scripting Motion
Designing for Skepticism and Bright Sunlight
ARTDM 171, Week 17: Usability Testing and QA
Artdm 171 week15 seo
Artdm 170 week15 publishing
ARTDM 171, Week 14: Forms
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 14: Introduction to Processing
ARTDM 171, Week 13: Navigation Schemes
Artdm170 week12 user_interaction
Artdm 171 Week12 Templates
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 170, Week 7: Scripting Interactivity
Artdm170 week6 scripting_motion
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Artdm171 Week6 Images
Artdm170 Week6 Scripting Motion

Recently uploaded (20)

PDF
Spectral efficient network and resource selection model in 5G networks
PDF
KodekX | Application Modernization Development
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPTX
MYSQL Presentation for SQL database connectivity
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Machine learning based COVID-19 study performance prediction
PDF
NewMind AI Monthly Chronicles - July 2025
PDF
cuic standard and advanced reporting.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Modernizing your data center with Dell and AMD
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Spectral efficient network and resource selection model in 5G networks
KodekX | Application Modernization Development
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Per capita expenditure prediction using model stacking based on satellite ima...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Building Integrated photovoltaic BIPV_UPV.pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
MYSQL Presentation for SQL database connectivity
NewMind AI Weekly Chronicles - August'25 Week I
Digital-Transformation-Roadmap-for-Companies.pptx
Machine learning based COVID-19 study performance prediction
NewMind AI Monthly Chronicles - July 2025
cuic standard and advanced reporting.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Understanding_Digital_Forensics_Presentation.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
Modernizing your data center with Dell and AMD
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...

A R T D M171 Week14 Multimedia

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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)