COM 205 Multimedia Applications

1
COM 205Multimedia Applications

• St. Josephs College
• Fall 2004

2
Chapter 14

• Designing For the World Wide Web

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

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

5
Working on the Web

• The Workspace

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

6
Working on the Web

• You can control the horizontal size of a Web page
  by using the WIDTH attribute in the TD tag in a
  table. Place the entire contents of your page
  inside that one constrained cell
• ltTABLEgtltTRgtltTD WIDTH500gt
• Put your content here
• lt/TDgtlt/TRgtlt/TABLEgt

7
Working on the Web

• The workspace
• Nibbling

• Trim image sizes
• Reduce bit depth of pictures and sounds
• Shrink playback windows
• Choose file formats for best compression

8
Working on the Web

• The workspace
• Nibbling
• HTML and multimedia

ltIMGgt for inline images ltINSERTgt for
multimedia objects ltEMBEDgt for compound
document embedding
9
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.

10
Basic HTML (continued)

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

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

12
Designing Text for the Web

• Controlling fonts
• Cascading style sheets (CSS)

• Newspaper columns

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

14
Text for the Web

• Cascading style sheets (CSS) offer greater
  control over text appearance.
• a) Styles can be defined and then assigned to
  blocks of text.
• b) Styles can be defined in two ways.
• (1) In the ltHEADgt of the HTML document
• (2) HTML documents can also link to external
  style sheets

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

16
Text for the Web

• Controlling fonts

ltFONTgt ltFONT COLORFFFFFFgt ltFONT SIZE2gt
17
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.

18
Text for the Web

• Making columns of text
• 1. Newspaper columns can be produced using
  invisible tables.
• 2. Make sure that the text is readable and fits
  on screen on target platforms.

19
Text for the Web

• Controlling fonts
• Cascading style sheets (CSS)

• Newspaper columns
• Flowing text around images

ltIMG SRCgbsky.gif ALIGNleft gt
20
Creating Images for the Web

• Browsers recognize GIF, PNG, and JPEG image
  formats
• Graphical Interchange File (GIF) images are
  limited to 8 bits of color depth (256 colors). It
  is a commercial image format.
• 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.

21
Images for the Web

• GIF

• 8-bit color depth
• Animation
• Transparency
• Unisys owns a patent on GIFs compression scheme

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

22
Images for the Web

• GIF
• PNG

• Similar to GIF
• No licensing requirements
• Browser support is sporadic

23
Images for the Web

• GIF
• PNG
• JPEG

• 24-bit color depth
• Good for photo-realistic images
• JPEG compression is lossy
• JPEG can be used for photo-realistic images.
• JPEG can compress images at a ratio of even 751,
  but they compress very slowly.

24
Images for the Web

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

25
Images for the Web

• Using Photoshop

26
Images for the Web

• Using Photoshop

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

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

29
Images for the Web

• Backgrounds

ltBODY BGCOLORFF9933gt ltBODY BACKGROUNDimages/
fabric.gifgt
30
Backgrounds

• 1. Browsers allow you to place background images
  or color behind page content.
• 2. Background coloring
• a) The background can be colored by adding an
  attribute to the ltBODYgt tag, as in
• ltBODY BGCOLORFF9933gt
• b) Choose colors carefully.
• (1)Provide adequate contrast and remember that a
  number of users are color blind.

31
Background Images

• Background images
• a) Background images are automatically tiled.
• b) Be extremely careful when choosing
  background images.
• (1) Make sure the background doesnt create
  readability problems.

32
Images for the Web

• Backgrounds

• Sidebars

33
Images for the Web

• Clickable buttons

ltA HREFdocumentToGoTo.htmlgt ltIMG
SRCimageDisplayed.gif BORDER0gt lt/Agt

• A graphic image can be made clickable to link
  to another document.

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

35
Images for the Web

• Image maps

ltIMG SRCcompass.gif BORDER0
USEMAPcompassgt ltMAP NAMEcompassgt ltAREA
SHAPECIRCLE COORDS60,60,10 HREFhelp.htmgt lt
AREA SHAPEPOLYGON COORDS60,60,0,0,120,0
HREFback.htmgt ltAREA SHAPEPOLYGON
COORDS60,60,0,120,120,120 HREFfwd.htmgt ltARE
A SHAPEPOLYGON COORDS60,60,0,0,0,120
HREFnavmap.htmgt lt/MAPgt
36
Adding Sound 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.

37
Sound for the Web

• Background sounds

• Internet Explorer allows background sounds with
  the
• ltBGSOUNDgt tag.
• Formats allowed include
• a) AU
• b) WAV
• c) MIDI

38
Sound for the Web

• Background sounds

• Internet Explorer

ltBGSOUND SRCheymon.midgt
39
Sound for the Web

• Background sounds

• Internet Explorer
• Plug-ins and sound
• 1. Browser plug-ins can be used to play sound.
• 2. Audio capable plug-ins include
• a) Apple QuickTime
• b) Windows Media Player
• 3. Audio can be embedded in a page using the
  ltEMBEDgt tag.

40
Sound for the Web

• Background sounds

• Internet Explorer

• Plug-ins and sound

ltEMBED SRCheymon.mid WIDTH200 HEIGHT55
AUTOSTARTfalsegtlt/EMBEDgt
41
Sound for the Web

• Background sounds

• Internet Explorer

• Plug-ins and sound

• Apple QuickTime

• Windows Media Player

42
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.
• The ltIMGgt tag is used to embed a GIF89a
  multiframe image.
• Limit animated GIFs to small images.

43
Animation for the Web

• GIF89a animated GIFs
• Plug-ins and players

• Macromedia Shockwave

44
Animation for the Web

• GIF89a
• Plug-ins and players

• Macromedia Shockwave, Director, Flash

• Apple QuickTime