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 1s
  and 0s 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
Color Displays
Cathode Ray Tube - CRT
Liquid Crystal Display -LCD
Through the careful control and variation of the
voltage applied, the intensity of each subpixel
can range over 256 shades. Combining the
subpixels produces a possible palette of 16.8
million colors (256 shades of red x 256 shades of
green x 256 shades of blue), as shown below.
These color displays take an enormous number of
transistors. For example, a typical laptop
computer supports resolutions up to 1,024x768. If
we multiply 1,024 columns by 768 rows by 3
subpixels, we get 2,359,296 transistors etched
onto the glass! If there is a problem with any of
these transistors, it creates a "bad pixel" on
the display. Most active matrix displays have a
few bad pixels scattered across the screen.
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 and
  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, they interact 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 screensMaximum 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
Use of Whitespace

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