Web Graphics & Multimedia

+ Web Design Principles

Chapters 4, 5 and 11

from Web development and Design Foundations with XHTML

Learning Outcomes

In this chapter, you will learn to:

◦ Decide when to use graphics and what graphics are appropriate

◦ Apply the image element to add graphics to Web pages

◦ Configure images as backgrounds on Web page elements

◦ Configure images as hyperlinks

◦ Know about Helper Applications and Plug-ins

◦ Audio file types & Adding sound to a web page

◦ Video file types & Adding video to a web page

◦ Follow recommended Web design principles & best practices.

2

WEB GRAPHICS

Chapter 4

Types of

Graphics

Graphic types commonly used on Web

pages:

◦ GIF

◦ JPG

◦ PNG

4

GIF

Graphics Interchange Format

Best used for line art and logos

Maximum of 256 colors

One color can be configured as transparent

Can be animated

Uses lossless compression

Can be interlaced

5

Background

color – no

transparency

Background

color

configured to

be transparent

JPEG

Joint Photographic Experts Group

Best used for photographs

Up to 16.7 million colors

Use lossy compression

Cannot be animated

Cannot be made transparent

Progressive JPEG – similar to interlaced display

6

PNG

Portable Network Graphic

Support millions of colors

Support multiple levels of transparency(but browsers do not --so limit to one transparent color for Web display)

Support interlacing

Use lossless compression

Combines the best of GIF & JPEG

Browser support is growing

7

XHTML Image Element Configures graphics on a Web page

src Attribute◦ File name of the graphic

alt Attribute◦ Configures alternate text content (description)

height Attribute◦ Height of the graphic in pixels

width Attribute◦ Width of the graphic in pixels

8

<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />

Image Links

To create an image link use an anchor element

to contain an image element

Browsers automatically add a border to image

links.

9

Home

<a href="index.html"><img src="home.gif"

height="19" width="85" alt="Home" /></a>

CSS background-image Property

Configures a background-image

By default, background images tile (repeat)

body { background-image: url(background1.gif); }

Organizing

Your Site

<img src=“images/home.gif” alt=“Home” height=“100” width=“200”/>

11

• Place images in their own folder

• Code the path to the file in the src atttribute

MULTIMEDIA

Chapter 11

What are the Types of Multimedia?

Audio

Video

Flash

…etc.

13

Helper Applications & Plug-ins

Helper Application

◦ A program that can be designated to handle a particular file type (such as .wav or.mpg) to allow the user to view or otherwise utilize the special file.

◦ The helper application runs in a separate window from the browser.

Plug-In

◦ A newer and more common method

◦ Plug-ins run right in the browser window so that media objects can be integrated directly into the web page.

14

Commonly Used Plug-ins

Adobe Flash Player

Adobe Reader

Windows Media Player

Apple Quicktime

15

Common Audio File Types

.wav Wave File

.aiff Audio Interchange File Format

.mid Musical Instrument Digital Interface (MIDI)

.au Sun UNIX sound file

.mp3 MPEG-1 Audio Layer-3

.ogg Ogg-Vorbis

. m4a MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods.

16

Common Video File Types

.mov Quicktime

.avi Microsoft Audio Video Interleaved

.wmv Windows Media File

.flv Flash Video File

.mpg MPEG (Motion Picture Experts Group)

.m4v .mp4 (MPEG-4)

17

Using Sound on a Web Page

Hyperlink

<a href=“wdfpodcast.mp3" title=“Web Design Podcast”>Web Design Podcast</a>

Embed the sound

◦ You can embed the sound in a page and optionally display a control panel for the sound

◦ The <object> tag W3C standard and supported by modern browsers

18

XHTML <object> &

<param /> tags

19

<object data= "soundloop.mp3" height="50" width= "50“

type="audio/mpeg" title= "Music Sound Loop" >

<param name= “src" value= "soundloop.mp3" />

</object>

This code is

valid but does

not work for

IE

Using Video on a Web Page

Hyperlink

<a href=“sparky.mov" title=“Playful Dog Barks”>Sparky Video (1.2 MB)</a>

Embed the video

◦ You can embed the video in a page and optionally display a control panel for the sound

◦ The <object> tag W3C standard and supported by modern browsers

20

XHTML <object> &

<param /> tags

21

<object data=“lighthouse.mov" height=“260" width=“340"

type="video/quicktime" title=“Door County Lighthouse Tour" >

<param name="src" value=“lighthouse.mov" />

<param name="controller" value="true" />

<param name="autoplay" value="false" />

</object>

This code is

valid but does

not work for

IE

Adding Flash to a Web Page

<object> & <param /> tags

<object … object attributes go here….

<param name="movie" …value attribute goes here… />

<param name="quality" …value attribute goes here… />

<param name="bgcolor" …value attribute goes here… />

… a brief description of the Flash media can go here along with a link to

alternate text content if appropriate…

</object>

22

Flash Detail Sample

The following code places a Flash file called flashbutton.swf on a Web page:

<object type="application/x-shockwave-flash" data="flashbutton.swf" width="147" height="34" title="Flash button">

<param name="movie" value="flashbutton.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="quality" value="high" />

<p>This is a Flash buttonthat links to the

<a href="http://www.adobe.com">Adobe Web site</a>.</p>

</object>

23

WEB DESIGN PRINCIPLES

Chapter 5, section 5.3

Design

Principles

Repetition

◦ Repeat visual elements throughout design

Contrast

◦ Add visual excitement and draw attention

Proximity

◦ Group related items

Alignment

◦ Align elements to create visual unity 25

WEB DESIGN BEST PRACTICES

Chapter 5, section 5.4, 5.6, 5.7 & 5.9

Web Page Design

Best Practices

Page layout design

Text design

Graphic design

27

Web Page Design Load Time

Watch the load time of your pages

Try to limit web page document and associated

media to under 60K on the home page

28

Web Page Design

Target Audience

Design for your target audience

◦ Appropriate reading level of text

◦ Appropriate use of color

◦ Appropriate use of animation

29

Web Page Design

Colors & Animation

Use colors and animation that appeal to your target audience ◦ Kids Bright, colorful, tons of animation

◦ Young adults and older teens Dark, often low contrast, more subtle animation

◦ Everyone: Good contrast between background and text

Easy to read

Avoid animation if it makes the page load too slowly

◦ Accessibility Tip: Many individuals are unable to distinguish between certain colors. See http://www.vischeck.com/showme.shtml

30

Web Page Design

Browser Compatibility

Web pages do NOT look the same in all the major browsers

Test with current and recent versions of:

◦ Internet Explorer

◦ Firefox, Mozilla

◦ Opera

◦ Mac versions

Design to look best in one browser and degrade gracefully (look OK) in others

31

Web Page Design

Screen Resolution

Test at various screen resolutions◦ Most widely used: 1024x768, 1280x1024, and 800x600

Design to look good at various screen resolutions◦ Centered page content

◦ Set to either a fixed or percentage width

32

Text Design

Best Practices

Avoid long blocks of text

Use bullet points

Use headings and subheadings

Use short paragraphs

33

Text Design “Easy to Read” Text (1)

Use common fonts:

◦ Arial, Helvetica,Verdana, Times New Roman

Use appropriate text size:

◦ medium, 1em, 16px, 12 pt, 100%

Use strong contrast between text & background

Use columns instead of wide areas of horizontal text

34

Text Design “Easy to Read” Text (2)

Bold text as needed

Avoid “click here”

Hyperlink key words or phrases, not entire sentences

Separate text with “white space” or empty space.

Chek yur spellin (Check your spelling)

35

Graphic Design Best Practices(1) Be careful with large graphics!

◦ Remember 60k recommendation

Use the alt attribute to supply descriptive alternate text

Be sure your message gets across even if images are not displayed. ◦ If using images for navigation provide plain text links at the

bottom of the page.

Use animation only if it makes the page more effective and provide a text description.

36

Graphic Design Best Practices(2)

Choose colors on the web palette if consistency across older Windows/Mac platforms is needed

Use anti-aliased text in images

Use only necessary images

Reuse images

Goal: image file size should be as small as possible

37

Web Design

Best Practices Checklist

Table 5.1 in

http://terrymorris.net/bestpractices

38

•Page Layout•Browser Compatibility•Navigation•Color and Graphics•Multimedia•Content Presentation•Functionality•Accessibility

Summary

This chapter introduced the use of graphics & multimedia on Web pages and the best practices of web design.

The number one reason for visitors to leave web pages is too long of a download time. When using images, be careful to minimize this issue.

Provide alternatives to images (such as text links) and use the alt attribute on your pages.

As you continue to create web pages, look back at the guidelines and best practices.

39