Graphic Design

1
Graphic Design

• ISC325
• October 19, 2005

2
Today

• Review
• Web Graphic
• F F Ch. 4, HTML Tutorial 3
• Web Accessibility
• Other technical issues

3
Review

• Web Design with Tables and Forms
• Writing for the Web
• Color Harmony

4
Web Graphics

• Color Displays
• Screen resolution
• Graphics and network bandwidth
• Graphic File Formats

5
Color displays
Pixels and color depth
http//www.webstyleguide.com/graphics/displays.htm
l
6
http//www.webstyleguide.com/graphics/displays.htm
l
7
http//www.webstyleguide.com/graphics/displays.htm
l
8
http//www.webstyleguide.com/graphics/displays.htm
l
9
(No Transcript)
10
Color depth and graphics files
True-color Red, Green, and Blue
256-color palette
http//www.webstyleguide.com/graphics/displays.htm
l
11
Screen Resolution

• Images for Web pages are always limited by the
  resolution of the computer screen
• Resolution The number of pixels a screen can
  display within a given area.
• Most personal computers resolutions from 72 to
  96 pixels per inch (ppi)
• It is safe to assume that most users fall into
  the lower end of the range, or about 72 to 80 ppi
• Resolution 72 dots per inch

12
(No Transcript)
13
Graphic File Formats
14
Interlaced and Noninterlaced GIFs

• Interlacing refers to the way the GIF is saved by
  the graphics software.
• Normally, with a noninterlaced GIF the image is
  saved one line at a time, starting from the top
  of the graphic and moving downward.
• With interlaced GIFs, the image is saved and
  retrieved stepwise.
• for example, every fifth line of the image might
  appear first, followed by every sixth line, and
  so forth through the remaining rows
• Interlacing is an effective format if you have a
  large graphic and want to give users a preview of
  the final image as it loads.

15
Noninterlaced Graphic
This figure shows how a noninterlaced GIF appears
as it is slowly retrieved by the Web
browser. If the graphic is large, it might take
several minutes for the entire image to appear,
which can frustrate the visitors to your Web page.
16
Interlaced Graphic
This figure shows the effect of interlacing,
which is when the graphic starts out as a blurry
representation of the final image, then gradually
comes into focus-unlike the noninterlaced
graphic, which is always a sharp image as its
being retrieved, although an incomplete one.
17
Transparent GIF

• Pick colors from the color lookup table of the
  GIF to be transparent by using image-editing
  software like Photoshop

http//www.webstyleguide.com/graphics/gifs.html
18
Animated GIF

• Combine multiple GIF images into a single file to
  create animation
• Animated GIFs are an effective way to compose
  slide shows or to simulate motion.
• Animated GIF files are typically larger than
  static GIF images.
• The use of animated GIFs can greatly increase the
  size of a Web page.
• Be careful not to overwhelm the user with
  animated images.

19
Animated GIF

• http//www.wigglebits.com/animation.html

20
Animated GIF Programs
This figure shows a list of programs available on
the Web that you can use to create your own
animated GIFs.
21
Animated GIF Collections
If you dont want to take the time to create your
own animated GIFs, many animated GIF collections
are available on the Web. This figure shows a
list of a few of them.
22
JPEG files

• Create images with the full 16.7 million colors
• Good for photographs and images that cover a wide
  spectrum of color
• Control the size of a JPEG with the degree of
  image compression
• But, for a image covering large sections with a
  single color, the GIF format will be better.

23
(No Transcript)
24
Summary of File Formats

• Uses for GIF and JPEG files
• Gif files
• The most widely supported graphics format on the
  Web
• Supports transparency and interlacing
• JPEG
• Huge compression rations faster download speeds
• Excellent for most photographs and complex images
• Supports full-color (24-bit, true color) images

25
Good Design

• Clean and clear alt descriptions for graphics
• Use of dramatic color and strong alignment of
  navigation
• Simplicity
• Consistency and repetition from page to page
• Good use of white space
• Example

26
Examples

• Las Campanas http//www.lascampanas.com
• New Mexico Internet Professionals Association
  http//www.nmipa.org

27
(No Transcript)
28
Web Development Technical aspects
29
Web Development

• HTML Coding
• Using Web Development Tool such Macromedia
  Dreamweaver
• Accessibility
• Using a validator for web site quality
• Web standards
• File Management

30
Accessibility

• To ensure that your pages are accessible to all
  users.
• To check the accessibility of your pages you can
  use a tool like Bobby (www.cast.org/bobby).
• Viewable with any browser Accessible site design
  guide (http//www.anybrowser.org/campaign/abdesign
  .shtml)

31
Tools for Accessibility

• Bobby - Analysis of Accessibility
  (http//webxact.watchfire.com/) from CAST A
  web-based tool that analyzes web pages for their
  accessibility to people with disabilities.
• Accessibility by People with Disabilities
  (http//www.state.fl.us/dms/tools/standards/standa
  rds.htmlada)from DMS Web Design
  Standards Recommended accessibility guidelines
  for website development adopted by the Department
  of Management Services.
• Web Accessibility Initiative (WAI)
  (http//www.w3.org/WAI/) from W3C World Wide Web
  ConsortiumResources on Web Accessibility
  including introductory how-to's, coding
  references, and current news and proposals.
• Color Deficient Vision (http//www.visibone.com/co
  lorblind/) from VisiBone. About 8 of men and
  0.4 of women have some form of color blindness.
  This web page contains resources for designing a
  website that will assist color-blind people by
  avoiding website color distinctions

32
Using a validator

• Validation
• The process of cleaning up your code
• Validators
• Doctor HTML (http//www2.imagiware.com/RxHTML)
• WDG Web Design Group Batch Validator
  (http//www.htmlhelp.org/tools/validator/batch.htm
  l)
• W3C Validator (This should be your first stop)
  (http//validator.w3.org)
• W3C CSS Validation Service (http//jigsaw.w3.org/c
  ss-validator/validator-uri.html)

33
Web Standards

• There are standards related to hardware,
  software, graphics, email, and almost everything
  related to the Internet.
• Standards and Communication http//www.wigglebits
  .com/standards.html
• Web Standards Project http//www.webstandards.org
  

34
File naming

• Keep file names very short and descriptive
• Less than 8 characters plus a file extension
• All lowercase letters
• Do not include any spaces if you want to
  separate words use a dash or underscore _.
• Spaces will turn into in browser windows
• Dont move files around or the links and images
  may not function properly
• Images should be saved as gif or jpgs

35
An image file
A hyperlink to another page
36
Directory (Folder)
Home directory
Mail
Public-html
projects
images
resume
ISC325
myweb.htm
Image folder
Your homepage
represents a folder (directory)
37
Linking folders

• Linking inside a folder
• foldername/filename
• Linking outside a folder
• ../myweb.htm
• ../../index.html
• Linking files in same folder
• filename

38
Next time

• Topic
• Evaluation Maintenance