1. 1 Multimedia Long before computers Audio, Video, Animation Used well – has great positive impact on web site Over used or used poorly – can make web site too annoying to use

2. 2 11. Multimedia In this chapter you will learn about: Basic multimedia types & available file formats Advantages & disadvantages of using multimedia Technology considerations when using multimedia Design guidelines for using multimedia on the Web New developments in multimedia delivery And you will see many examples

3. 3 Multimedia Overview Multimedia refers to a combination of two or more media In this chapter we consider: Audio, Video, Animation Other media: Printed or spoken words Music and other audio Still images

4. 4 11.2 Audio Can enhance a Web page with speech, music, or other sounds Helpful to those with vision limitations Non-streaming: entire file downloaded and stored on disk, sometimes before playback begins Streaming: data is buffered; playback begins as soon as there is enough to play without too many pauses for buffering to catch up

5. 5 Good use of audio Be sure that any dialog in audio is also available as text Some people prefer text Needed by the deaf In a quiet environment (library) When using audio to set mood, keep volume low When using audio to get attention, keep it brief Give users the option to turn sound off; endless loops can be extremely annoying

6. 6 Good use of audio When sound is for attention Keep short & quiet & only occasionally Give option to turn off without affecting the functionality of the site

7. 7 Audio File Formats Newer versions (MP3, RealAudio) utilize good compression Fast downloads Less storage Current bandwidths allow for immediate playing without breaks E.G. Internet radio

8. 8 Audio formats for Web ExtensionFormat NameOriginatorStreaming?Additional software?.wavWaveformMicrosoftNo.auSun AudioSun MicrosystemsNo.aiffAudio Interchange AppleNo.midMusical Instrument Digital Interface International MIDI Association No.mp3MPEG Audio (Layer 3) Fraunhofer IIS-A and the ISO YesNo.raReal AudioReal NetworksYesYes. Available: www.real.com

9. 9 Video A powerful medium, conveying: Motion Changing facial expressions Associated audio Disadvantage: Very slow downloads Large amount of disk space

10. 10 Video Best for users with broadband connections Which is approaching half of U.S. households that have Internet connection Includes most company intranets Option: Link to video on original site

11. Video download times at 56Kb/sec DescriptionRun timeScreen resolution File size (MB) Download time at 56 Kbps Museum tour (high quality video) 7 min, 30 sec 320x180241 hour, 12 min Museum tour (medium quality video) 7 min, 30 sec 320x1805.7418 minutes Museum tour (low quality video) 7 min, 30 sec 320x1803.0710 minutes Speech (high quality video)1 min, 19 sec 160x1203.310 minutes Speech (low quality video)1 min, 19 sec 160x120 0.21 minute Helmet camera video from mountain bike trail 1 min, 19 sec 170x1459.530 minutes Copyright © 2004 by Prentice HallChapter 11: Multimedia

12. 12 Broadband is coming on fast “ Some 31 percent of United States households that have Internet access have high-speed connections -- up 50 percent from a year ago, according to the Pew Internet and American Life Project. – New York Times, June 12, 2003 August 2010 – 66% of US homes have broadband access http://www.houmatoday.com/article/20100824/articles/100829679

13. 13 Cable modem is the leader “At the end of the first quarter of this year, 68 percent of households with broadband access used cable modems, compared with 31 percent with D.S.L. service, according to the Yankee Group, a market research firm.” ibid.(2003)

14. Video download times at 1.5Mbps DescriptionRun timeScreen resolution File size (MB) Download time at 1.5Mbps Museum tour (high quality video) 7 min, 30 sec 320x180242 minutes, 40 seconds Museum tour (medium quality video) 7 min, 30 sec 320x1805.7438 seconds Museum tour (low quality video) 7 min, 30 sec 320x1803.0721 seconds Speech (high quality video)1 min, 19 sec 160x1203.322 seconds Speech (low quality video)1 min, 19 sec 160x120 0.21 second Helmet camera video from mountain bike trail 1 min, 19 sec 170x1459.51 minute, 3 seconds Chapter 11: Multimedia Copyright © 2004 by Prentice Hall

15. 15 Can you ignore those 56Kbps users? Of course not Broadband penetration will never be 100% It may level off rather below that Those number in the tens of millions; can’t ignore them But don’t ignore the cable modem folks either They definitely can download your video Downloading the RealPlayer over a cable modem takes a couple of minutes And that’s not the end: the visionaries are pushing for FFTH (Fiber To The Home), at 100Mbps

16. 16 What can you do? Generally recommended, avoid video People compare to tv & movies – can’t hold up Use static images with sound Otherwise: Reduce video resolution (quality) People only wait about 10 seconds Break into segments Use still image + description – user can decide to download

17. 17 Tips for recording video Use a tripod You get a much better image Reduction of motion improves compression Use a neutral background Better visually & improves compression Get in close to your subject

18. 18 Medium shot

19. 19 Close up shot

20. 20 Extreme close-up – the best Retains more detail

21. 21 Text on a Web page is easier to read than a caption on a video

22. 22 Video File Formats Several formats are available MPEG AVI QuickTime Real Video

23. 23 MPEG Motion Picture Experts Group A group of formats for audio & video Goal: open standard that is platform independent – specs available to public Complete on compression/decompression Not yet streaming, but working on it Compresses smaller than AVI & QuickTime

24. 24 Real Video Highly compressed streaming video Proprietary – not usually in web browsers Free downloadable player for users Big (8 Meg) Developers – must purchase server software

25. 25 AVI Only a framework for video compression & decompression called codec To play an AVI file, player must include a copy of the codec that created the file Most web browsers include it Can be downloaded free Developed by MS, available for Apple & Linux

26. 26 Video Guidelines Avoid video when possible Use techniques to reduce size of video When choosing file format, consider availability of player

27. 27 Video formats for the Web NameFile extension OriginatorAdditional codec? Streaming?Additional player? Audio-Video Interlaced.aviMicrosoftYesNo QuickTime.mov.qtAppleYesConfigurableNo MPEG Video (MPEG-4).mpgMotion Picture Expert Group No Real Video.ram.rmRealNetworksNoYes – requires server software Yes

28. 28 Animation Definition: synthetic apparent motion created through artificial means Can sometimes be stored more compactly than video, speeding downloads Offers a richer set of interactions than video An attention-getter Good for demonstrating transitions and for explaining complex systems

29. 29 Animation Options Hyperlinks Customize for users Highlighting (color) Pop-ups as cursor moves over BUT, continuous animation is annoying and tends to be ignored

30. 30 Animation shows how a virus attacks a human cell, 1

31. 31 Animation shows how a virus attacks a human cell, 2

32. 32 Animation shows how a virus attacks a human cell, 3

33. 33 Animation shows how a virus attacks a human cell, 4

34. 34 Animation can explain complex systems

35. 35 Such as university parking regulations

36. 36 Three Approaches to Animation Use previously video format MPEG, AVI, Real Video Use a vector-based format Use a scripting language Java, JavaScript

37. 37 Vector based vs. Pixel based Vector is newer technique Vector has smaller storage requirements & download times Specify shapes rather than pixel-by- pixel description (like bitmap) Accommodates reuse

38. 38 Vector based vs. Pixel based Vector-based format lists the shapes, with mathematical descriptions of lines and curves V-b format can also improve appearance V-b format permits much better results when images sizes are changed Disadvantage: v-b format doesn’t display automatically in a browser; must have or download a player – most DO have

39. 39 A frame from an animation, both formats; first frame 01100 01100 01100 01100 00000 (2,3) (3,2) (4,5) (2,5) Pixel-based representation Vector-based representation Beginning & ending locations

40. 40 A frame from an animation, both formats; second frame 00110 00110 00110 00110 00000 (1,0) Pixel-based representation Vector-based representation Add (1,0) to each one

41. 41 Comparing pixel-based (top) and vector-based formats

42. 42 Animation depicting HIV infection and possible drug action, 1 Note buttons giving user control of animation

43. 43 Animation depicting HIV infection and possible drug action, 2

44. 44 Java applet simulating structural failure, 1

45. 45 Java applet simulating structural failure, 2

46. 46 Java applet simulating structural failure, 3

47. 47 Java applet simulating structural failure, 4

48. 48 Scripting Languages Java, JavaScript Note: Bridge (above) was in JavaScript Great Flexibility for creating customized animations Must have programming experience Web browser must enable Java, JavaScript

49. 49 Animation Guidelines Limit frequency of automatic motion Consider necessity of downloading players Make interactive controls visible and understandable Be mindful of download time

50. 50 Future Developments: 3D Animation Provides more information & flexibility than 2D animation Many formats; the open standard is Virtual Reality Markup Language (VRML) H-Anim - standard for human animation using avatars A key technology: after initial download, movement is specified by giving only the changes

51. 51 Tour of the Munich Airport Center, in interactive 3D, 1

52. 52 Tour of the Munich Airport Center, in interactive 3D, 2

53. 53 Tour of the Munich Airport Center, in interactive 3D, 3

54. 54 Tour of the Munich Airport Center, in interactive 3D, 4

55. 55 An avatar

56. 56 Level of detail, 1

57. 57 Level of detail, 2

58. 58 Level of detail, 3

59. 59 Successive refinement, 1

60. 60 Successive refinement, 2

61. 61 Successive refinement, 3

62. 62 Summary Basic multimedia types and available file formats Audio Video 2D animation 3D animation The strengths and limitations of each Technology considerations when using multimedia Design guidelines for using multimedia on the Web New developments in multimedia delivery