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.

Chapter 4

WEB GRAPHICS

Types of Graphics
Graphic types commonly used on Web pages:
GIF (Graphics Interchange Format)
Best used for line art and logos Can be animated

JPG (Joint Photographic Experts Group)

Best used for photographs Cannot be animated

PNG (Portable Network Graphic)

Combines the best of GIF & JPEG Browser support is growing

XHTML Image Element

Configures graphics on a Web page
<img src=cake.gif alt=birthday cake height=100 width=100 />

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

Image Links
To create an image link use an anchor element to contain an image element

<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home" /></a>

Home Browsers automatically add a border to image links.
6

CSS backgroundbackground-image Property

Configures a background-image By default, background images tile (repeat)
body { background-image: url(background1.gif); }

Organizing Your Site

Place images in

their own folder Code the path to the file in the src atttribute

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

8

Chapter 11

MULTIMEDIA

What are the Types of Multimedia?

Audio Video Flash etc.

10

Common Audio File Types

.wav .aiff .mid .au .mp3 .ogg . m4a Wave File Audio Interchange File Format Musical Instrument Digital Interface (MIDI) Sun UNIX sound file MPEG-1 Audio Layer-3 Ogg-Vorbis MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods.

11

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)

12

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

13

This code is valid but does not work for IE

XHTML <object> & <param <param/> /> tags

<object data= "soundloop.mp3" height="50" width= "50 type="audio/mpeg" title= "Music Sound Loop" > <param name= src" value= "soundloop.mp3" /> </object>

14

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

15

This code is valid but does not work for IE

XHTML <object> & <param <param/> /> tags

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

16

Adding Flash to a Web Page <object> & <param <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>

17

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>

18

Chapter 5, section 5.3

WEB DESIGN PRINCIPLES

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
20

Chapter 5, section 5.4, 5.6, 5.7 & 5.9

WEB DESIGN BEST PRACTICES

Web Page Design Best Practices

Page layout design Text design Graphic design

22

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
23

Web Page Design Target Audience

Design for your target audience
Appropriate reading level of text Appropriate use of color Appropriate use of animation

24

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

25

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

26

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
27

Text Design Best Practices

Avoid long blocks of text Use bullet points Use headings and subheadings Use short paragraphs

28

Text Design Easy to Read Text (1 (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

29

Text Design Easy to Read Text (2 (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)

30

Graphic Design Best Practices(1 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.

31

Graphic Design Best Practices(2 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
32

Web Design Best Practices Checklist

Table 5.1 in http://terrymorris.net/bestpractices
Page Layout Browser Compatibility Navigation Color and Graphics Multimedia Content Presentation Functionality Accessibility

33

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.

34