1 / 40

Multimedia on the Web

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?

Download Presentation

Multimedia on the Web

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. Multimedia on the Web CIS 421 – multimedia.ppt

  2. 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? • 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

  3. Message for the Quarter! NO WHINING! NO NICKEL AND DIMING!

  4. UDWA • 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?

  5. 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?

  6. 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?

  7. 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?

  8. Standards that apply? • The World Wide Web Consortium (W3C) and the Web Accessibility Initiative (WAI) • http://www.w3.org/WAI/intro/components.php • W3C WCAG – Web Content Accessibility Guidelines • http://www.w3.org/WAI/intro/wcag.php • Authoring Tool Accessibility Guidelines (ATAG) • http://www.w3.org/WAI/intro/uaag.php • The Accessible Rich Internet Applications Suite (WAI-ARIA) • http://www.w3.org/WAI/intro/aria.php • Mobile Web Best Practices (MWBP) • http://www.w3.org/TR/mobile-bp/

  9. Exercise 1. Exercise 1: Project Plan for Multimedia project • http://www.csupomona.edu/~llsoe/42101/exercises/ex1.htm • 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-proquest.safaribooksonline.com.opac.library.csupomona.edu/9780321679406/ch05lev1sec4#X2ludGVybmFsX0ZsYXNoUmVhZGVyP3htbGlkPTk3ODAzMjE2Nzk0MDYvMTA3 • upload both to BB assignment & ADMIN folder of your website

  10. 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

  11. 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?

  12. 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

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

  14. 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?

  15. 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

  16. 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

  17. 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.

  18. 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 • http://www.csupomona.edu/~llsoe/42101/css/elasticlayout.htm • 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 Browserhttp://juicystudio.com/services.php#firefox • Tools>Colour Contrast Analyser>All Tests

  19. 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

  20. 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?

  21. 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?

  22. 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

  23. 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?

  24. 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 amazon.com 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.

  25. Continuity • 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

  26. 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

  27. 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

  28. 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?

  29. 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

  30. 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

  31. 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

  32. 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)

  33. 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.)

  34. 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

  35. 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

  36. 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

  37. 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

  38. 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

  39. 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

  40. Next • 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: http://www.csupomona.edu/~llsoe/42101/exercises/ex1.htm • Plan for your 421 website • Construct a Persona • In-class next Monday: Start Project 1

More Related