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

6. http://www.webstyleguide.com/graphics/displays.html

7. http://www.webstyleguide.com/graphics/displays.html

8. http://www.webstyleguide.com/graphics/displays.html

10. Color depth and graphics files True-color: Red, Green, and Blue 256-color palette http://www.webstyleguide.com/graphics/displays.html

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 computer’s 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

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. top appears first Image appears one line at a time entire image is retrieved 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. a rough image appears first image starts to show more detail final image is crisp and detailed 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 it’s 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. fellow1.gif fellow2.gif fellow3.gif • What do you need to make an animated GIF? • A series of pictures (GIFs ) that make up the frames of the animation • A program that will put the GIFs together and display them in the order you specify. 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 don’t 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.

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

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/standards.html#ada)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/colorblind/) 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.html) • W3C Validator (This should be your first stop) (http://validator.w3.org) • W3C CSS Validation Service (http://jigsaw.w3.org/css-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 • Don’t 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 images projects ISC325 resume myweb.htm Your homepage Image folder 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