1 / 40

Dogs See in Black and White But most don't surf the Web

Dogs See in Black and White But most don't surf the Web. Color, Graphics, Animated GIFs, and Image Maps. Working with Color. 16 Basic Color Names (3.05) Extended Color names (3.05)

alayna
Download Presentation

Dogs See in Black and White But most don't surf the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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) • 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" • Use hexidecimal instead

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

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

  5. Color Schemes • Viable Color Schemes <body bgcolor = "color" text = "color" link = "color" vlink = "color"> • W3 has deprecated the alink (the initial color of a link when clicked)

  6. Spot Color • Use the font tag for Spot Color <font color = "color">Yadda</font>

  7. Font Face • You can also change the FONT type <font face = "Arial, Helvetica, San Serif">yadda</a>

  8. Background Images • Inserting a background image <body background = "image.gif"> <body bgcolor = "color" background = "image.gif" text = "color" link = "color" vlink = "color">

  9. Care in Selecting an Image • 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. • Background must look seamless, not tiled.

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

  11. GIFs • Interlaced (3.20) • Transparent • 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 • 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) • Make sure you always • Save the original • Do incremental saves • 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 • nice for the mouseover • when images are turned off • text browsers • searches

  15. Image Placement and Size • Can be used for some great effects. <img src = "image.gif" align = "alignment"> <img src = "image.gif" align = "alignment" vspace = "value" hspace = "value"> <img src = "image.gif" height = "value" width = "value">

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

  17. Dithering • Changing 16.7 million to 256 • Big difference • Safety Palette of 211 colors that will display without dithering • Resource for Lab page has more • 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? • Server-Side • Client-Side • Both have advantages and disadvantages • We will work with a client-side map

  19. Hotspots • <br clear="left"> (Puts a comment above the map.) • Use one of the recommended programs to define the hotspots. (I recommend Fireworks.)

  20. The HTML <map name = "mapname"> <area shape = "shape" coords = "coordinates" href = "url"> </map>

  21. HTML (cont.) Have to also call in the actual image, so. . . <img src = "image.gif" usemap = "#mapname"> # look familiar?

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

  23. Even More. . . • rect <area shape=rect coords="x_left, y_upper, x_right, y_lower" href="url"> • circle <area shape=circle coords="x_center, y_center, radius" href="url">

  24. And yet some more. . . • poly <area shape=poly coords="x1, y1, y2, y3, y4, . . ." href="url"> (Vertices of the polygon) • Use the border="0" property in the <img> tag

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

  26. So. . . . • Check out the Resources • Check out the extra help on Lab 3 • 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. • What they want. • What kind of computer experience they have. • What their computing environment is.

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

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

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

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

  34. Gathering Requirements What do users want?

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

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

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

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

  39. What to Use? • 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.

  40. Think About • What techniques might you use? • 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

More Related