Multimedia on the Web

1. Multimedia on the Web

2. The Two Major Effects of Digitization • Multimedia (VISTA) • Video • Image • Sound • Text • Animation • Interactivity

3. How the Computers Capture, Store, Transmit Multimedia • All multimedia is converted into digital form called binary digits (bits) represented as 1’s and 0’s or on and off • Each multimedia object has a code associated with it e.g. text is represented by an ASCII code • Typical codes for images on the Web are JPEG, GIF, PNG • Sound Codes are wav, midi, mp3 • Video codes are mpeg, avi

4. The Process of Displaying a Web Page • Data and instructions from the server or host computer are sent to the local or client computer. • The instructions are in a computer programming language called hypertext markup language (html) • The browser interprets the instructions and causes the action.

5. The Look of the Web Page on the Client Computer Depends on -- • The design of the web page • The ability of the Web Page design software to convert the page to html • The capability of the network to transmit the html instructions and data • The capability of the browser to interpret the instructions • The capability of the client computer to act on the instructions

6. Typeface • The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. • Serif typeface • Times New Roman • Georgia • Sans Serif typeface • Verdana • Ariel

7. Type Size • Measured in Points = 72 points = 1 inch • 12 point is usually the minimum for reading • 72 point is 6 times larger

8. Images • Color Displays

9. The Role of Bandwidth • Bandwidth = Data rate = bits/second • Low – telephone modem – 56kbps/sec • High – cable, satellite, DSL = mb/sec • Caution – what appears fast on your development computer may be unusable over the WWW

10. Data Compression • Bitmap images are very large file size • Codecs (computer programs) compress abd decompress files to make them much smaller by: • Removing repetition • Pixel averaging • Dynamic range reduction • Jpeg and Gif are the most common for Web pages

11. Images • Advantages of GIF files • GIF is the most widely supported graphics format on the Web • GIFs of diagrammatic images look better than JPEGs • Supports transparency and interlacing • Supports GIF animations • Advantages of JPEG images • Huge compression ratios mean faster download speeds • JPEG produces excellent results for most photographs and complex images • JPEG supports full-color (24-bit, "true color") images

12. Web Style Guide From the Yale Web Style Manual 2nd Edition Link

13. Planning • Web sites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. • Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built.

14. Build a Content Inventory • Once you have an idea of your Web site's mission and general structure, you can begin to assess the content you will need to realize your plans. • Building an inventory or database of existing and needed content will force you to take a hard look at your existing content resources and to make a detailed outline of your needs • Content development is the hardest, most time-consuming part of any Web site development project.

15. INTERFACE DESIGN USERS OF WEB DOCUMENTS don't just look at information, theyinteract with it in novel ways that have no precedents in paper document design.

16. Page Design • The spatial organization of graphics and text on the Web page can engage readers with graphic impact, direct their attention, prioritize the information they see, and make their interactions with your Web site more enjoyable and efficient.

17. Page dimensions • Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:Maximum width = 760 pixelsMaximum height = 410 pixels (visible without scrolling) • (1000 x 800)

18. Page length • Determining the proper length for any Web page requires balancing four factors: • The relation between page and screen size • The content of your documents • Whether the reader is expected to browse the content online or to print or download the documents for later reading • The bandwidth available to your audience

19. Page Length • Researchers have noted the disorientation that results from scrolling on computer screens. The reader's loss of context is particularly troublesome when such basic navigational elements as document titles, site identifiers, and links to other site pages disappear off-screen while scrolling

20. Page Length Guidelines • In general, you should favor shorter Web pages for: • Home pages and menu or navigation pages elsewhere in your site • Documents to be browsed and read online • Pages with very large graphics

21. Design grids for Web pages • Current implementations of HyperText Markup Language do not allow the easy flexibility or control that graphic designers routinely expect from page layout software or multimedia authoring tools.

22. Example Layouts

23. Use Tables or Frames • Because of the limitations of HTML the only reliable layout tools for site designers at this time are Tables or Frames.

24. Typography • Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space. Nothing attracts the eye and brain of the reader like strong contrast and distinctive patterns, and you can achieve those attributes only by carefully designing them into your pages. If you cram every page with dense text, readers see a wall of gray and will instinctively reject the lack of visual contrast.

25. MULTIMEDIA • Web designers must always be considerate of the consumer. A happy customer will come back, but one who has been made to wait and is then offered goods that are irrelevant is likely to shop elsewhere. Because multimedia comes with a high price tag, it should be used sparingly and judiciously.

26. Web multimedia strategies • Simply because we can digitize hours' worth of analog video and stream it out over the Web doesn't mean that we should. • Most people prefer to read the work in print. We digitize texts in order to use the strengths of computing, such as searching and linking, to enhance our understanding of the material. • This holds true for multimedia, too: we need to consider how best to use the computer and not simply translate analog video and audio content to the computer screen. • The key to successful Web multimedia is to tailor your content for Web delivery.