Document Sample
multimedia Powered By Docstoc
					Multimedia on the Web

       CIS 421 – multimedia.ppt
     Message for the quarter!
     Universal Design for Web Applications
      What technology for a nondisabled person is
       comparable to the web for a disabled person?
      What are the 4 categories of disabilities?
      Legal liability issues?
      Standards?
     Discuss Exercise 1 due Wed., October 6
     Multimedia on the web –
      what are the issues?
      What decisions do you have to make before you
       start building the website?
      Solutions to some potential problems

    Message for the Quarter!

        NO NICKEL
       AND DIMING!
     What is Universal Design?
     Why do we need universal design for web-
      based applications?
     What is the BIG message of chapters 1 &
     What are the authors trying to accomplish?
     Why is this important?

    Situational disabilities faced by non-disabled
      users that are comparable to those of
      disabled users
      Search engines & international languages are
       comparable to what?
      Watching TV in a pub with the sound turned off?
      Trying to type on an iPhone, mobile phone or PDA
      Trying to read tiny type on a website in a browser
       on a mobile device?

    4 categories of disabilities?
     Cognitive, reading, learning
       Situational similarities to disability?
     Hearing
       Situational similarities to disability?
     Movement
       Situational similarities to disability?
     Vision
       Situational similarities to disability?

    Legal liability issues?
     What does Section 508 of the Americans
     with Disabilities Act (ADA) of 1990 say?
     To what websites does it apply?
     Does it apply to Cal Poly?
     What about the Target case?

       Standards that apply?
     The World Wide Web Consortium (W3C) and the
     Web Accessibility Initiative (WAI)
     W3C WCAG – Web Content Accessibility
     Authoring Tool Accessibility Guidelines (ATAG)
     The Accessible Rich Internet Applications Suite
     Mobile Web Best Practices (MWBP)

     Exercise 1. Exercise 1: Project
     Plan for Multimedia project
     Two parts to exercise
     Prepare a project plan for Project 1 and upload it
      to the assignment in Blackboard and to the
      admin folder of your project.
       Download the outline for Exercise 1 Plan for Project 1
        (projectPlan.doc) and fill in appropriate information for
        your Project.
       Download persona.doc and define the persona who
        represents your target audience
     Read about personas & what assignment means:
       http://0-
     upload both to BB assignment & ADMIN folder of
      your website
     What qualifies as Multimedia on
      Graphics                Text
       Backgrounds            Video
       Pictures
                               Animation
       3-D graphics
                               Morphing
       Charts
                               Sound
       Computer-
        generated graphics,      Narration, voice
        drawings, etc.           Recorded music or
       Clip art                  special sounds
       Buttons                  Computer-
                                  generated music

     Multimedia for the Web Differs
      Size constraints for client download
      Viewers’ workstations differ
        Size of screen
        Modem speed
        Number of colors
        Video cards
        Browsers, plugins
      Design for the worst case? Or warn
      Or both?
     Product Performance

      The customers’ screens have to
       reproduce everything you produce in
       your program
      No matter what computer, monitor,
       connection they are using.
      The law of digital media: Pick any two:
       High quality images and sound
       Ability to run on most computers
       Acceptable performance

      Multimedia issues

      Functionality Issues
      Presentation Design
      Multimedia content issues
         Images
         Colors & Color Palettes
         Video, Flash, Animation
         Text, titles, fonts
         Audio

     Issues: Functionality--How will Viewers

      Which mode is selected (highlighted?)
      What any button or ―hot‖ text or graphic
        How large the multimedia file is that they
         are about to download?
        What plugin they need to view a multimedia
        How to start & stop a video? An Audio clip?
        How to get around in the text?
        How much text there is?
        What the hyperlinks mean?
        How to find something?
     Issues: Presentation Design
      Define a visual theme and style
      Define consistent global & local navigation for ease
       of use
      Get your main message across on each page
        Get all important elements ABOVE THE FOLD
        Site design has to accomplish your developer
         goals for site
      Design has to appeal to potential users so they can
       accomplish their goals for using your website
        Emotionally
        In a way they can understand and experience
        Accessible
      Design has to convey your message
     Issues: Image Resolution
      Computer screen is low resolution: 72 dpi
      Image memory size varies depending on
       compression and file format
      Web color on client varies depending on:
       bit-depth settings of computer
       Color calibration & gamma default settings of
       Operating system, Web browser

      Issues: Color & color Palettes
      In an interactive product when you have
      more than one image on the screen,
        each image may use a different palette of
        all of the colors in both images may not be
         the palette in use
      Good ways to limit image file size
        reduce the color palette – minimize the range
         of colors: All reds/oranges or All
         greens/blues, but NOT red, orange, green,
         blue, yellow, etc.

     Issues: Text, Titles, fonts:
      Get the message across (accomplish developer goals)
        spelling; readability, correct grammar & spelling
      Bitmapped text looks better but text is smaller, easier to
       revise, less troublesome to program for user with
      For most flexibility use elastic layout & CSS
        em-based font size will adjust to browser resolution
        Contrast values (light & darkness) of Text &
         background so can be read – Juicy Studio Colour
         contrast analyzer extension for Firefox Browser

          Tools>Colour Contrast Analyser>All Tests

      Issues: Video & Flash
      Video can be used to
        Convey powerful emotional messages
        Entertain: live action, functional object, view object
         from different points
        teach something
        video as art form
      Takes a lot of memory – needs to serve a
      Divide larger video into smaller pieces that
       viewer can view consecutively
      Warn viewer about file sizes before download

     Issues: Animation

      Elements that change, move. appear &
      Be sure doesn’t flicker so much it can set off
      seizures in users with certain disabilities
      Can use a series of text, pictures or photos
      Photoshop & Flash: provide beginning &
      ending images & program ―tweens‖ changes
      How can you make animation (e.g., Flash)
      accessible to people who cannot see it?

       Issues: Audio
      Key characteristic is sampling rate
        resolution at which sound is digitized
        the higher the sampling rate, the better the
          the larger the file.
      Easy to modify and edit
      Sound should suit the style
      Background music
        helps integrate project
        Creates emotional mood for viewer
      How can you make audio accessible to
      the hearing impaired or deaf user?
      Decisions & Solutions
      Site Structure
       Site Narrative, continuity
       Interaction Design: Navigation, Links
      Page Design
       Emotional appeal
       Trade-off between File size and file quality
      Laws of survival
       Develop workflow methods
       Test your website

     Decisions: Site structure
      Tree structure -- hierarchical
      Linear & linear with side streets
        Pathway through IKEA
      Tree + linear
      No structure
      Which to choose
        Depends on content & goals
        Depends on website size?

      Narrative or telling the story
  Chain of events that let user fulfill user
     goals – tasks that make up an activity
      May not seem a story in traditional sense
      First you do this; second this, then this, etc.
      e.g. buying a product at follows a
      sequence of events
  Who controls the progress through the
   story? User? Designer? Shared?
  Continuity of story through site
      Some sites with tabs tell you where you are in
      process of submitting an order.

      Beginning
       5 seconds to catch attention
       Set initial expectations for user
      Middle
       Where most of activity occurs
       Interruptions (e.g., pop-up windows)
      End
       ―Twister‖ that tells user the end is coming
       Example: Check-out on an ecommerce site

     Interaction Design -- Gatekeeper for
     Viewer Access
      Create a guidance system that orients the
       viewer & sets expectations (affordances)
      Set up navigation and access routes
       Menus, buttons, hyperlinks
       Menu bar repeated on each page
      Define what happens when customer does
       something (feedback)
      Make sure connection between feedback
       and affordances matches (natural
      Accessibility ―alt=― names for objects
     Interaction Design -- Gatekeeper for
     Viewer Access
      Design interaction controls
      Images & words set expectations
        buttons are to push
        Arrows or graphic objects pointing in a specific
         direction lead in the direction they are pointed
        Words describe what to expect
      Be consistent throughout web site
        Same images, buttons
        Words mean the same thing
      Only include what’s necessary – don’t
     Guidance System Orientation
      Main navigation screen creates
      Navigation bar; Menu; Image map
      How much control over interaction with
       Web site will you let the user control?
       Too much control over interaction – user gets
        confused & lost (Virtual Reality with no clues)
       Too little control – user gets frustrated & leaves
        (background music without controls that user
        cannot stop playing)
       Joint control
       Who thinks they are in control?

       Decisions: Navigation
      Concerns user’s relationship with site
      How will they know where they are?
      How will users navigate?
       Semantic page structure: <h1>, <h2>, etc.
         Tags not used for formatting but to indicate what kind of
          content (ul, ol) or hierarchy of importance
       Contextual clues & features (implicit support)
         e.g. color coding – blind & color-blind users?
         Breadcrumbs
       Landmarks – introductory pages to sections;
        consistent buttons; menus, etc.
       Explicit support: maps, page labels, tabs
      Decisions: Links
      Links for navigating
      Links for performing certain actions
      Link issues:
        Avoid multiple links to the same page from a
         single page
        Non-working links
        Descriptive link names help blind users
        Links within a long page w/multiple parts
        Dead ends– pages that go nowhere
        Links to page itself – confuses blind users

       Decisions: Page Design
      Page Width & Length – NO horizontal scrolling
      in 1024px x 768px browser:
       Which is in fact 955px x 600px
       Cumulative width of Graphics content <= 955 px
       Elastic layout scales up or down, but optimize for
       Ensure MOST IMPORTANT content is visible on
        smaller screens! & opens ABOVE THE FOLD
      Recommend browser choice/size to viewer
      Does it matter how it looks when printed?
      Warn users if download times for clickable
      objects will be long, for slow connections
     Decisions: Emotional Appeal of
     Content Norman’s Emotional Design
        Ensure content appeals emotionally to the users
         and causes them to feel pleasure in using your
        Appeal to Users’ Visceral Processes—initial, quick,
         unconscious reactions that users do not think
          Colors & music affect hormones and emotional reactions
          design & style appeals to your audience & what you want
           them to experience
          conventions – ways of doing things that everyone
           understands -- users can react automatically without
           thinking (e.g., routinely)
           Decisions: Emotional Appeal of
           Content Norman’s Emotional Design
          Appeal to Users’ Reflective Processes -- how the site
           affects the users’ thought processes:
             message, culture, & meaning of the content you
             nostalgia: connects users to other good
             appeals to the users’ self-images (makes them
              feel hip, part of a community of people who do
              good deeds, raise fish, play on-line games, etc.)

     File Size: Digital Video Tradeoff
      The higher the image quality, the lower the
      playback quality
        Requires more data about each frame & more frames
        per second
        Rate of transfer from disk is limited, so video has skips
        and gaps
        If the frame rates are lower, the image looks better
        because the frames contain more information
      Video files get very big, very fast
      Compressing in Flash Video encoder lets you
      stream video without having streaming server
      File size: Images
      Smaller Image Files hasten download
      Reduce Image File Size for the Web
       Reduce number of colors
       Reduce image dimensions
       Blur unimportant areas of image
         Select important areas before compressing to increase
          their quality
       Compress to reduce color depth
      To check download speed of a page in Web
      Developers Toolbar: Tools>Speed Report

     Develop workflow methods
      Buy high, sell low
        Digitize images, sound, video at highest
         possible resolution & reduce it later
        Digitizing at low resolution saves memory &
         storage up front, but loses too much data
      Save the best for last
        Reduce the resolution of the content last, after
         you’ve done your editing and altering
        Compress from the high quality version –
         otherwise the file degrades rapidly if you
         recompress previously compressed documents

      Develop workflow methods
      Protect the original copy -
        Archive a copy of the original media file so you can redo
         the process if you need to (using your notes of course)
      Keep an audit trail
        Use Adobe Bridge
        If you use non-original content, CHECK that you have
         permission & save that information in your ADMIN
        List file & its source in your sourcelog document
        Keep a record of changes you make to a file
        In Photoshop, make each alteration a separate layer &
         save the PSD version which preserves all the
        Save versions so you don’t have to go back to
       Develop workflow methods
      No Late Projects accepted – put up what you
       have finished and start uploading early!
      Don’t wait == Upload your work as you go.
      Then you get credit for what you finished if
       something goes wrong.
      When the project is due, I make a grading
       folder with a copy of all the students’ folders
       & grade those
        FTP is NOT shut off.
        You can still upload AFTER the project is due, but
        late uploads do not get credit until next due date

     TEST your Website to standards–
      Easiest: Test & fix as you build pages &
       site with web developers toolbar testing
      You need time to test the site (links,
       graphics, CSS, XHTML, etc.)
      When you think everything looks perfect
       Look at it on other hardware setups
       different web browsers/ monitors make
       Test on a different computer for dead links

     • DUE Monday before class:
      • Blackboard Quizzes due: Ch 3 Universal
        Design for Web Applications
      • Stylin’ with CSS, Ch 1-2
     • Due Wednesday before class
       Exercise 1:
       Plan for your 421 website
       Construct a Persona
      In-class next Monday: Start Project 1