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) • These 32 Color Names are interpreted differently according to browser. Some older browsers cannot use them. Like "Paleturquoise" or "Seagreen" • Use hexidecimal instead

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

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)

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)

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

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

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

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.

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

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 ;}

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

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

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

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">

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

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.

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

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

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

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

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

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">

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

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

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

Take a Break

Requirements Gathering What do you need to know?

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.

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

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

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

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)

Gathering Requirements What do users want?

Information Gathering Techniques • Surveys • Interviews • Focus Groups

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

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

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

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.

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

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