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