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

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, FloridaICI Homes
 
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 openCVAlex-P. Natsios
 
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_2016evaristogonzal2
 
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 2015Utai Sukviwatsirikul
 
Customer care for community pharmacist
Customer care for community pharmacistCustomer care for community pharmacist
Customer care for community pharmacistUtai Sukviwatsirikul
 
Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา
Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา
Gpp คู่มือการพัฒนาตนเองสู่การมีวิธีปฎิบัติที่ดีทางเภสัชกรรมในร้านยา Utai Sukviwatsirikul
 

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

Web Tools for GemStone/S
Web Tools for GemStone/SWeb Tools for GemStone/S
Web Tools for GemStone/SESUG
 
Development Processes and Tooling
Development Processes and ToolingDevelopment Processes and Tooling
Development Processes and ToolingBora Bilgin
 
Cerebro for vfx eng
Cerebro for vfx engCerebro for vfx eng
Cerebro for vfx engCineSoft
 
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 copyAcquia
 
Cerebro general overiew eng
Cerebro general overiew engCerebro general overiew eng
Cerebro general overiew engCineSoft
 
Distributing Information Online
Distributing Information OnlineDistributing Information Online
Distributing Information OnlineLethbridge College
 
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 DrupalEric Sembrat
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptxNishchaiyaBayla1
 
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 firefoxGennady Feldman
 
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 2018hernanibf
 
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 MultimediaGilbert Guerrero
 
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)Vizualsite LLC
 
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 XPagesTeamstudio
 
Building cloud native microservices
Building cloud native microservicesBuilding cloud native microservices
Building cloud native microservicesBrian Pulito
 
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 StacksJeremy Likness
 
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)Brian Culver
 
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();dotNet Miami
 

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

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightGilbert 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 QAGilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishingGilbert 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 + ArraysGilbert 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 ProcessingGilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesGilbert Guerrero
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interactionGilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 TemplatesGilbert 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 CompsGilbert 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 PrototypesGilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceGilbert Guerrero
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceGilbert Guerrero
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityGilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert 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

9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
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 ConsultingTechSoup
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajanpragatimahajan3
 
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 . pdfQucHHunhnh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 

Recently uploaded (20)

9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
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
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
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
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
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
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 

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)