SlideShare a Scribd company logo
1 of 22
ARTDM 171, Week 14:
Multimedia on the Web
          Gilbert Guerrero
        gguerrero@dvc.edu
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
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
     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
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 the meta-utopia
  by Cory Doctorow
• Work on your final projects
Next week: Accessibility and Search
 Engine Optimization (SEO)
Thank you

More Related Content

Viewers also liked

Viewers also liked (12)

Resume Mrk
Resume MrkResume Mrk
Resume Mrk
 
DOE
DOEDOE
DOE
 
sarah_cv2
sarah_cv2sarah_cv2
sarah_cv2
 
Amelia national Golf & Country Club - Fernandina Beach, Florida
Amelia national Golf & Country Club - Fernandina Beach, FloridaAmelia national Golf & Country Club - Fernandina Beach, Florida
Amelia national Golf & Country Club - Fernandina Beach, Florida
 
Elham's CV
Elham's CVElham's CV
Elham's CV
 
OS-autoinst: Testing with Perl and openCV
OS-autoinst: Testing with Perl and openCVOS-autoinst: Testing with Perl and openCV
OS-autoinst: Testing with Perl and openCV
 
Presentación ponencia 6_de_julio_2016
Presentación ponencia 6_de_julio_2016Presentación ponencia 6_de_julio_2016
Presentación ponencia 6_de_julio_2016
 
Investigação de massas anexiais
Investigação de massas anexiaisInvestigação de massas anexiais
Investigação de massas anexiais
 
Business Model Canvass for NANO MBA 6 26 Jul 2015
Business Model Canvass for NANO MBA 6 26 Jul 2015Business Model Canvass for NANO MBA 6 26 Jul 2015
Business Model Canvass for NANO MBA 6 26 Jul 2015
 
Customer care for community pharmacist
Customer care for community pharmacistCustomer care for community pharmacist
Customer care for community pharmacist
 
Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา
Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา
Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา
 
Suparna Dey Resume
Suparna Dey ResumeSuparna Dey Resume
Suparna Dey Resume
 

Similar to ARTDM 171, Week 14: Multimedia on the Web

Cerebro for vfx eng
Cerebro for vfx engCerebro for vfx eng
Cerebro for vfx eng
CineSoft
 
D7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyD7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copy
Acquia
 
Cerebro general overiew eng
Cerebro general overiew engCerebro general overiew eng
Cerebro general overiew eng
CineSoft
 
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxJavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
Gennady Feldman
 
A R T D M171 Week14 Multimedia
A R T D M171  Week14  MultimediaA R T D M171  Week14  Multimedia
A R T D M171 Week14 Multimedia
Gilbert Guerrero
 

Similar to ARTDM 171, Week 14: Multimedia on the Web (20)

Web Tools for GemStone/S
Web Tools for GemStone/SWeb Tools for GemStone/S
Web Tools for GemStone/S
 
Development Processes and Tooling
Development Processes and ToolingDevelopment Processes and Tooling
Development Processes and Tooling
 
Cerebro for vfx eng
Cerebro for vfx engCerebro for vfx eng
Cerebro for vfx eng
 
D7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyD7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copy
 
Shaun-Ellis-feb25
Shaun-Ellis-feb25Shaun-Ellis-feb25
Shaun-Ellis-feb25
 
Cerebro general overiew eng
Cerebro general overiew engCerebro general overiew eng
Cerebro general overiew eng
 
Distributing Information Online
Distributing Information OnlineDistributing Information Online
Distributing Information Online
 
USG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalUSG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using Drupal
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxJavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
 
Aiming for automatic updates - Drupal Dev Days Lisbon 2018
Aiming for automatic updates - Drupal Dev Days Lisbon 2018Aiming for automatic updates - Drupal Dev Days Lisbon 2018
Aiming for automatic updates - Drupal Dev Days Lisbon 2018
 
A R T D M171 Week14 Multimedia
A R T D M171  Week14  MultimediaA R T D M171  Week14  Multimedia
A R T D M171 Week14 Multimedia
 
CGM (Computer Graphics Metafile) v SVG (Scalable Vector Graphic)
CGM (Computer Graphics Metafile) v SVG (Scalable Vector Graphic)CGM (Computer Graphics Metafile) v SVG (Scalable Vector Graphic)
CGM (Computer Graphics Metafile) v SVG (Scalable Vector Graphic)
 
CGM versus SVG
CGM versus SVGCGM versus SVG
CGM versus SVG
 
Case study
Case studyCase study
Case study
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
Building cloud native microservices
Building cloud native microservicesBuilding cloud native microservices
Building cloud native microservices
 
Windows 8: A Tale of Two Stacks
Windows 8: A Tale of Two StacksWindows 8: A Tale of Two Stacks
Windows 8: A Tale of Two Stacks
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();
 

More from Gilbert Guerrero

ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
Gilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
Gilbert Guerrero
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
Gilbert Guerrero
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
Gilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
Gilbert Guerrero
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
Gilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
Gilbert Guerrero
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
Gilbert Guerrero
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
Gilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
Gilbert Guerrero
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
Gilbert Guerrero
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
Gilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 

More from Gilbert Guerrero (20)

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright Sunlight
 
ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
 
Artdm 171 week15 seo
Artdm 171 week15 seoArtdm 171 week15 seo
Artdm 171 week15 seo
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
ARTDM 171, Week 14: Forms
ARTDM 171, Week 14: FormsARTDM 171, Week 14: Forms
ARTDM 171, Week 14: Forms
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 

Recently uploaded

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 

ARTDM 171, Week 14: Multimedia on the Web

  • 1. ARTDM 171, Week 14: Multimedia on the Web Gilbert Guerrero gguerrero@dvc.edu 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
  • 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 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. Final project presentations begin in two weeks Letʼs schedule day 1 and day 2
  • 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)