multimedia_desiging_web.ppt

7/28/2019 Multimedia_Desiging_WEB.ppt

1/44

4/7/2013

Designing For the World Wide Web


2/44

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/44

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/44

Working on the WebThe Workspace

The usable area of the screen is always smaller than the

monitors display area.

The most widely preferred monitor resolution is 800x600.


5/44

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 oneconstrained cell:

Put your content here


6/44

Working on the WebThe workspace

Trim image sizesReduce bit depth of pictures and sounds

Shrink playback windows

Choose file formats for best compression


7/44

Working on the Web

The workspace

HTML and multimedia

for inline images

for multimedia objects

for compound document

embedding


8/44

Basics of Hypertext Markup

Language (HTML):

HTML is a markup language.

It uses tags to perform functions suchas 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 bebounding or stand-alone tags.


9/44

Basic HTML (continued)

HTML provides tags for insertingmedia into HTML documents. Theseare:

The tag for inserting inlineimages.

The and tagsfor embedding compound

documents.

The tags for code.


10/44

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.


11/44


Controlling fonts

Cascading style sheets (CSS)

Newspaper columns


12/44


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.


13/44

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 of the HTML document

(2) HTML documents can also link to externalstyle sheets


14/44


The tag:

To specify a font, use the FACE

attribute of the tag.

To specify the font color, use the

COLOR attribute.

To set the size of the text, use the SIZE

attribute.


15/44

Text for the Web

Controlling fonts


16/44


The tag is used for organizingtext into columns.

The ALIGN attribute of the tag

enables text to flow around an image. The HSPACE and VSPACE attributes of

the tag add space between animage and the surrounding text.

The
tag causes text to begin on anew line.


17/44

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.


18/44

Text for the Web

Controlling fonts

Cascading style sheets (CSS)

Newspaper columns

Flowing text around images


19/44

Creating Images for the WebBrowsers recognize GIF, PNG, and JPEG imageformats

Graphical Interchange File (GIF) images arelimited to 8 bits of color depth (256 colors). It is

a commercial image format.

PNG is an open format supported by mostimage creation programs.

Joint Photographic Experts Group (JPEG) useslossy compression to produce files of sizesmaller than GIF.


20/44

Images for the WebGIF8-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.


21/44

Images for the Web

GIF

PNG

Similar to GIF

No licensing requirements

Browser support is sporadic


22/44

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 75:1,

but they compress very slowly.


23/44

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.


24/44

Images for the Web

Using Photoshop


25/44

Images for the Web

Using Photoshop


26/44

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.


27/44

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


28/44

Images for the Web

Backgrounds


29/44

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 tag, as in

b) Choose colors carefully.

(1)Provide adequate contrast and remember that a number of users

are color blind.


30/44

Background Images

Background imagesa) Background images are automatically tiled.b) Be extremely careful when choosing

background images.

(1) Make sure the background doesnt create

readability problems.


31/44

Images for the Web

BackgroundsSidebars


32/44

Images for the Web

Clickable buttons

A graphic image can be made clickable to link to

another document.


33/44

Image Maps

Image maps are pictures with defined hotspots that link to other documents when auser clicks on them.

Web sites display image files usingCommon Gateway Interface (CGI)programs.

In client-side image maps, mouse

coordinates and their associateddocument URLs are included in theclients HTML document.


34/44

Images for the Web

Image maps

Adding Sound to Web


35/44

Adding Sound to Web

Pages

Plug-ins allows embedding of sounds intoHTML documents.

Internet Explorer offers the

tag to play an AU, WAV, or MIDI soundtrack in a document background.

Netscape and Internet Explorer offer theQuickTime plug-in for playing AIFF, MIDI,

WAV, and AU formats. Streaming audio is more useful for the

Web, where a sound file can start playingas soon as data begins to download.


36/44

Sound for the Web

Background sounds

Internet Explorer allows background sounds with the

tag.

Formats allowed includea) AUb) WAVc) MIDI


37/44

Sound for the Web

Background soundsInternet Explorer


38/44

Sound for the Web


Plug-ins and sound

1. Browser plug-ins can be used to play sound.

2. Audio capable plug-ins includea) Apple QuickTimeb) Windows Media Player

3. Audio can be embedded in a page using the

tag.


39/44

Sound for the Web


Plug-ins and sound


40/44

Sound for the Web


Plug-ins and sound

Apple QuickTime

Windows Media Player


41/44

Animation for the Web

The and the tagsprovide very limited dynamism to HTML.

The GIF89a format specification creates

simple animations. It integrates multipleimages, or frames, into a single GIF89a fileand displays them with programmabledelays between them.

The tag is used to embed a GIF89amultiframe image.

Limit animated GIFs to small images.


42/44


GIF89aanimated GIFs

Plug-ins and players

Macromedia Shockwave


43/44


GIF89a

Plug-ins and players

Macromedia Shockwave, Director, Flash

Apple QuickTime


44/44

END

multimedia_desiging_web.ppt

Documents