Overview

1
Lesson 14-Designing for the World Wide Web
2
Overview

• Introducing multimedia on the Web.
• Designing text for the Web.
• Creating images for the Web.
• Adding sounds to Web pages.
• Creating animation for the Web.

3
Introducing Multimedia on the Web

• Launched in 1989, the World Wide Web was not
  originally designed for integrating multimedia.
• It was designed as a method of delivering simple
  text documents formatted in HTML.

4
Introducing Multimedia on the Web

• Workspace
• The most widely preferred monitor resolution is
  800x600.
• The usable area of the screen is always smaller
  than the monitors display area.

5
Introducing Multimedia on the Web

• Nibbling
• Nibbling is an important design principle.
• While nibbling, the user has to seek a balance
  between quality and available bandwidth.

6
Introducing Multimedia on the Web

• Basics of Hypertext Markup Language (HTML)
• HTML is a markup language.
• It uses tags to perform functions such as
  formatting text and embedding media.
• HTML tags are enclosed by angular brackets.
• The tags can be written either in upper case or
  in lower case. They can be bounding or
  stand-alone tags.

7
Introducing Multimedia on the Web

• HTML provides tags for inserting media into HTML
  documents. These are
• The ltIMGgt tag for inserting inline images.
• The ltEMBEDgt and ltOBJECTgt tags for embedding
  compound documents.
• The ltAPPLETgt tags for code.

8
Designing Text for the Web

• User preference in the browser may alter the way
  text in a document looks and flows.
• Ideally, documents must be designed using Times
  New Roman as a proportional font and Courier as
  the mono-spaced font.

9
Designing Text for the Web

• OpenType and TrueType are standard methods for
  displaying typefaces on the Web.
• Cascading style sheet (CSS) available in dynamic
  HTML (DHTML) makes font management flexible. It
  sets text styles across Web pages.

10
Designing Text for the Web

• The ltFONTgt tag
• To specify a font, use the FACE attribute of the
  ltFONTgt tag.
• To specify the font color, use the COLOR
  attribute.
• To set the size of the text, use the SIZE
  attribute.

11
Designing Text for the Web

• The ltTABLEgt tag is used for organizing text into
  columns.
• The ALIGN attribute of the ltIMGgt tag enables text
  to flow around an image.
• The HSPACE and VSPACE attributes of the ltIMGgt tag
  add space between an image and the surrounding
  text.
• The ltBRgt tag causes text to begin on a new line.

12
Creating Images for the Web

• All browsers recognize three image formats, GIF,
  PNG, and JPEG.
• Graphical Interchange File (GIF) images are
  limited to 8 bits of color depth (256 colors). It
  is a commercial image format.

13
Creating Images for the Web

• PNG is an open format supported by most image
  creation programs.
• Joint Photographic Experts Group (JPEG) uses
  lossy compression to produce files of size
  smaller than GIF.

14
Creating Images for the Web

• GIF versus JPEG.
• Adobe Photoshop.
• Backgrounds.

15
GIF Versus JPEG

• GIF files are used for line art and images that
  contain large areas of the same color.
• GIF compresses drawings and cartoons that have
  only a few colors in them much better than JPEG.
• JPEG can be used for photo-realistic images.
• JPEG can compress images at a ratio of even 751,
  but they compress very slowly.

16
Adobe Photoshop

• It is the most preferred tool for graphic
  artists.
• The native Photoshop format is PSD.
• PSD files are in RGB mode that is they use
  maximum color depths.
• These files are larger in size and contain
  layers.

17
Adobe Photoshop

• When creating images bound for the Web, use a
  resolution of 72 pixels per inch.
• Save the original image in a 24-bit loss-less
  image format.
• After image manipulation in the RGB mode, save
  the source image as a PSD file.
• Changing the mode from RGB Color to Indexed Color
  changes the color depths of the image.

18
Adobe Photoshop

• To save an image as a JPEG file, flatten and
  merge all layers into a single bitmap.
• To save an image as a GIF file, set the mode of
  the image to Indexed Color.
• To make an image transparent, allow it to float
  on the document background. GIF89a formats allow
  transparency, while JPEGs do not.

19
Backgrounds

• The ltBODYgt tag.
• Clickable buttons.
• Image maps.

20
The ltBODYgt Tag

• The BGCOLOR attribute sets the background color
  for a document.
• The TEXT attribute controls the color of the
  normal text.
• The LINK attribute controls the color of an
  unvisited link.
• The VLINK attribute controls the color of a
  visited link.
• The ALINK attribute controls the color of an
  active link.

21
Clickable Buttons

• A graphic image can be made clickable to link
  to another document. This is done by including
  the image tag inside the bounding tags of an HTML
  anchor that points to that documents URL.
• The BORDER attribute of the ltIMGgt tag should be
  set to zero.

22
Image Maps

• Image maps are pictures with defined hot spots
  that link to other documents when a user clicks
  on them.
• Web sites display image files using Common
  Gateway Interface (CGI) programs.
• In client-side image maps, mouse coordinates and
  their associated document URLs are included in
  the clients HTML document.

23
Adding Sounds to Web Pages

• Plug-ins allows embedding of sounds into HTML
  documents.
• Internet Explorer offers the ltBGSOUNDgt tag to
  play an AU, WAV, or MIDI sound track in a
  document background.
• Netscape and Internet Explorer offer the
  QuickTime plug-in for playing AIFF, MIDI, WAV,
  and AU formats.
• Streaming audio is more useful for the Web, where
  a sound file can start playing as soon as data
  begins to download.

24
Creating Animation for the Web

• The ltBLINKgt and the ltMARQUEEgt tags provide very
  limited dynamism to HTML.
• The GIF89a format specification creates simple
  animations. It integrates multiple images, or
  frames, into a single GIF89a file and displays
  them with programmable delays between them.

25
Creating Animation for the Web

• The ltIMGgt tag is used to embed a GIF89a
  multiframe image.
• Limit animated GIFs to small images.
• Macromedia Shockwave, Director, Flash, and
  QuickTime are a few plug-ins used for animation.

26
Creating Animation for the Web

• Plug-ins and players
• Full animation capability became available to Web
  developers with the introduction of Macromedia's
  Shockwave.
• Macromedia Flash uses Shockwave to create a .swf
  (Shockwave Flash) version of the native .fla
  file. This enables images to be displayed on the
  Web.
• While embedding plug-in or player-supported
  animation files into a Web page, cross-platform
  issues should be taken into consideration.

27
Summary

• HTML provides tags for performing varied
  functions.
• The three primary image formats used on the Web
  are GIF, PNG, and JPEG.
• Images, sounds, and animation can be embedded in
  an HTML file.