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.h tm 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
© Copyright 2026 Paperzz