multimedia on the web l.
Skip this Video
Loading SlideShow in 5 Seconds..
Multimedia on the Web PowerPoint Presentation
Download Presentation
Multimedia on the Web

Loading in 2 Seconds...

play fullscreen
1 / 40

Multimedia on the Web - PowerPoint PPT Presentation

  • Uploaded on

Multimedia on the Web CIS 421 – multimedia.ppt Agenda 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?

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Multimedia on the Web' - sandra_john

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
multimedia on the web

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
Message for the Quarter!



  • What is Universal Design?
  • Why do we need universal design for web-based applications?
  • What is the BIG message of chapters 1 & 2?
  • 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
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 keyboard?
  • Trying to read tiny type on a website in a browser on a mobile device?
4 categories of disabilities
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
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
Standards that apply?
  • The World Wide Web Consortium (W3C) and the Web Accessibility Initiative (WAI)
  • W3C WCAG – Web Content Accessibility Guidelines
  • Authoring Tool Accessibility Guidelines (ATAG)
  • The Accessible Rich Internet Applications Suite (WAI-ARIA)
  • Mobile Web Best Practices (MWBP)
exercise 1 exercise 1 project plan for multimedia project
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:
  • upload both to BB assignment & ADMIN folder of your website
what qualifies as multimedia on web
What qualifies as Multimedia on Web?
  • Graphics
    • Backgrounds
    • Pictures
    • 3-D graphics
    • Charts
    • Computer-generated graphics, drawings, etc.
    • Clip art
    • Buttons
  • Text
  • Video
  • Animation
  • Morphing
  • Sound
    • Narration, voice
    • Recorded music or special sounds
    • Computer-generated music
multimedia for the web differs
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 viewers? Or both?
product performance
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
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 know
Issues: Functionality--How will Viewers Know?
  • Which mode is selected (highlighted?)
  • What any button or “hot” text or graphic does?
  • How large the multimedia file is that they are about to download?
  • What plugin they need to view a multimedia file?
  • 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
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
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 monitor
    • Operating system, Web browser
issues color color palettes
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 colors
    • 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
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 disabilities
  • 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
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 purpose
  • Divide larger video into smaller pieces that viewer can view consecutively
  • Warn viewer about file sizes before download
issues animation
Issues: Animation
  • Elements that change, move. appear & disappear
  • 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
Issues: Audio
  • Key characteristic is sampling rate
    • resolution at which sound is digitized
    • the higher the sampling rate, the better the quality
      • 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
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
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
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
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 mappings)
  • Accessibility “alt=“ names for objects
interaction design gatekeeper for viewer access27
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 clutter
guidance system orientation
Guidance System Orientation
  • Main navigation screen creates expectations
  • 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
Decisions: Navigation
  • Concerns user’s relationship with site content
  • 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
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
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 1024x768
    • 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
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 site
  • Appeal to Users’ Visceral Processes—initial, quick, unconscious reactions that users do not think about
    • 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 design33
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 present
    • nostalgia: connects users to other good experiences
    • 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
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
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
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 methods37
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 folder
    • 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 layers
    • Save versions so you don’t have to go back to beginning
develop workflow methods38
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
TEST your Website to standards–
  • Easiest: Test & fix as you build pages & site with web developers toolbar testing tools
  • 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