1. Dogs See in Black and White But most don't surf the Web Color, Graphics, Animated GIFs, and Image Maps

2. Working with Color 16 Basic Color Names (3.05) 16 Basic Color Names (3.05) Extended Color names (3.05) Extended Color names (3.05) These 32 Color Names are interpreted differently according to browser. Some older browsers cannot use them. Like "Paleturquoise" or "Seagreen" These 32 Color Names are interpreted differently according to browser. Some older browsers cannot use them. Like "Paleturquoise" or "Seagreen" Use hexidecimal instead Use hexidecimal instead

3. RGB to Hexadecimal RGB Triplet (3.07) RGB Triplet (3.07) (0-9) represents 10 integers (0-9) represents 10 integers 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 =F 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 =F Take each RGB number. (255, 255, 0) and divide by 16. Take each RGB number. (255, 255, 0) and divide by 16. (16 x 15) + 15 = FF (16 x 15) + 15 = FF –Number + Remainder

4. Use a Color Selection Resource For most of our cases, use a color selection resource. For most of our cases, use a color selection resource. Watch for dithering (check Web resource page for chapter) Watch for dithering (check Web resource page for chapter) I recommend using hexadecimals all the time. (3.08 and back of book) I recommend using hexadecimals all the time. (3.08 and back of book)

5. Color Schemes Viable Color Schemes Viable Color Schemes W3 has deprecated the alink (the initial color of a link when clicked) W3 has deprecated the alink (the initial color of a link when clicked)

6. Spot Color Use the font tag for Spot Color Use the font tag for Spot Color Yadda Yadda

7. Font Face You can also change the FONT type You can also change the FONT type yadda yadda

8. Background Images Inserting a background image Inserting a background image

9. Care in Selecting an Image Make sure a user can still read the text. Make sure a user can still read the text. Do not use a large image file. (Less than 20 KB) More will increase load times. Do not use a large image file. (Less than 20 KB) More will increase load times. Background must look seamless, not tiled. Background must look seamless, not tiled.

10. Image Formats GIF GIF –GIF87 –GIF89a interlacing, transparent colors, animation interlacing, transparent colors, animation JPEG (JPG) JPEG (JPG)

11. GIFs Interlaced (3.20) Interlaced (3.20) Transparent Transparent Animated (Like a cartoon) Animated (Like a cartoon) –Animated GIFs are much larger than a regular GIF. Be careful with file sizes. If you are trying to make a motion picture with an animated GIF, you might consider another format ;}

12. JPEGs (JPG) JPGs can be compressed and yield smaller file sizes in some cases JPGs can be compressed and yield smaller file sizes in some cases Primarily used when you want to have all 16.7 million colors in an image instead of 256 Primarily used when you want to have all 16.7 million colors in an image instead of 256

13. Compressing JPGs The more one compresses, the less the image quality. (see 3.25) The more one compresses, the less the image quality. (see 3.25) Make sure you always Make sure you always –Save the original –Do incremental saves Progressive JPEG Progressive JPEG –Newer image format. Same as a transparent GIF, but retains image resolution and colors

14. ALT The ALT Property needs to be used The ALT Property needs to be used –nice for the mouseover –when images are turned off –text browsers –searches

15. Image Placement and Size Can be used for some great effects. Can be used for some great effects.

16. Quicker Pages Reduce image file sizes Reduce image file sizes Reduce number of colors in images Reduce number of colors in images Go for smallest file type Go for smallest file type Thumbnails Thumbnails Reuse images and backgrounds Reuse images and backgrounds

17. Dithering Changing 16.7 million to 256 Changing 16.7 million to 256 Big difference Big difference Safety Palette of 211 colors that will display without dithering Safety Palette of 211 colors that will display without dithering Resource for Lab page has more Resource for Lab page has more Dithering still has its place, but it's not used as much anymore because of increased system power. Dithering still has its place, but it's not used as much anymore because of increased system power.

18. Image maps (3.37) What is an image map? What is an image map? Server-Side Server-Side Client-Side Client-Side Both have advantages and disadvantages Both have advantages and disadvantages We will work with a client-side map We will work with a client-side map

19. Hotspots (Puts a comment above the map.) (Puts a comment above the map.) Use one of the recommended programs to define the hotspots. (I recommend Fireworks.) Use one of the recommended programs to define the hotspots. (I recommend Fireworks.)

20. The HTML </map>

21. HTML (cont.) Have to also call in the actual image, so... # look familiar?

22. More on the AREA Tag Three properties Three properties –Shape rect rect circle circle poly poly –coords –href

23. Even More... rect rect circle circle

24. And yet some more... poly poly (Vertices of the polygon) Use the border="0" property in the tag Use the border="0" property in the tag

25. Example of an Image Map From the tutorial From the tutorial http://homepages.wmich.edu/~rea/380/resources/SpaceExpo/Expo1999.h tm http://homepages.wmich.edu/~rea/380/resources/SpaceExpo/Expo1999.h tm

26. So.... Check out the Resources Check out the Resources Check out the extra help on Lab 3 Check out the extra help on Lab 3 Use Fireworks OR Use Fireworks OR –Get an image program –Get Animagic (and see tutorial) –Get an image map program

27. Take a Break

28. Requirements Gathering What do you need to know?

29. As a Web Developer You Need to Know Who users are. Who users are. What they want. What they want. What kind of computer experience they have. What kind of computer experience they have. What their computing environment is. What their computing environment is.

30. Who they are… Demographic information Demographic information –Age –Gender –Education –Employment –Others???

31. What they know… Domain Knowledge Domain Knowledge –Expertise and Content levels UNIX for Geeks UNIX for Geeks Kiosk for end-users Kiosk for end-users User Computing Experience User Computing Experience –Programmer versus Casual Surfer –Level of computing familiarity Metaphors Metaphors –Shopping cart

32. Computing Environment Web is not like fixed applications Web is not like fixed applications –Variety of access points –600 x 800 –Multimedia Sparingly in most cases Sparingly in most cases Plug-ins can be deadly Plug-ins can be deadly Flash can fizzle Flash can fizzle

33. Content is King (or Queen) Content is important Content is important –It's not your job to create –It's your job to integrate What should be on the site? What should be on the site? How should it be organized? How should it be organized? What is needed…..(dramatic pause) What is needed…..(dramatic pause)

34. Gathering Requirements What do users want?

35. Information Gathering Techniques Surveys Surveys Interviews Interviews Focus Groups Focus Groups

36. Surveys Paper surveys Paper surveys Electronic surveys Electronic surveys E-mail E-mail –in-text –attachments Web-based Web-based –processing data Phone Surveys Phone Surveys

37. Interviews Personal Personal –Come prepared –Tape recorder –Open versus Closed questions Phone Phone –Cold call –Selected users

38. Focus Groups Room setting Room setting –small versus large groups –moderator –synergy Electronic Electronic –Group decision support systems Cost prohibitive Cost prohibitive –Platform Issues

39. What to Use? Ask some questions Ask some questions –Do users have e-mail addresses? –Can you meet with them personally? –Snail mail addresses only? –Does a Website exist? More than likely use a combination of two or more techniques. More than likely use a combination of two or more techniques.

40. Think About What techniques might you use? What techniques might you use? Team will be asked to provide information gathering techniques, plans and tools in reports. Team will be asked to provide information gathering techniques, plans and tools in reports. –Initial: tools, techniques, any preliminary results –Final: tools, techniques, results Link to how the Website meets the needs Link to how the Website meets the needs