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

Recently uploaded (20)

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
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.
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 

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)