Multimedia on the web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Multimedia on the Web PowerPoint PPT Presentation

Multimedia on the Web. The Two Major Effects of Digitization. Multimedia (VISTA) Video Image Sound Text Animation Interactivity. How the Computers Capture, Store, Transmit Multimedia.

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

The two major effects of digitization

The Two Major Effects of Digitization

  • Multimedia (VISTA)

    • Video

    • Image

    • Sound

    • Text

    • Animation

  • Interactivity

How the computers capture store transmit multimedia

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

The process of displaying a web page

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.

The look of the web page on the client computer depends on

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



  • 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

Type size

Type Size

  • Measured in Points = 72 points = 1 inch

  • 12 point is usually the minimum for reading

  • 72 point is 6 times larger



  • Color Displays

The role of bandwidth

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

Data compression

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



  • 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

Web style guide

Web Style Guide

From the Yale Web Style Manual 2nd Edition




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

Build a content inventory

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.

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.

Page design

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.

Page dimensions

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)

Page length

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

Page length1

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

Page length guidelines

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

Design grids for web pages

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.

Example layouts

Example Layouts

Use tables or frames

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.



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



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

Web multimedia strategies

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.

  • Login