dogs see in black and white but most don't surf the web color, graphics, animated gifs, and...
Post on 20-Dec-2015
218 views
TRANSCRIPT
Dogs See in Black and Dogs See in Black and WhiteWhite
But most don't surf the But most don't surf the WebWeb
Color, Graphics, Animated Color, Graphics, Animated GIFs, and Image MapsGIFs, and Image Maps
Working with ColorWorking 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 These 32 Color Names are interpreted differently according to browser. differently according to browser. Some older browsers cannot use Some older browsers cannot use them. Like "Paleturquoise" or them. Like "Paleturquoise" or "Seagreen""Seagreen"
• Use hexidecimal insteadUse hexidecimal instead
RGB to HexadecimalRGB 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 = 10 = A, 11 = B, 12 = C, 13 = D, 14 =
E, 15 =FE, 15 =F• Take each RGB number. (255, 255, Take each RGB number. (255, 255,
0) and divide by 16.0) and divide by 16.• (16 x 15) + 15 = FF(16 x 15) + 15 = FF
– Number + RemainderNumber + Remainder
Use a Color Selection Use a Color Selection ResourceResource
• For most of our cases, use a color For most of our cases, use a color selection resource.selection resource.
• Watch for dithering (check Web Watch for dithering (check Web resource page for chapter)resource page for chapter)
• I recommend using hexadecimals all I recommend using hexadecimals all the time. (3.08 and back of book)the time. (3.08 and back of book)
Color SchemesColor Schemes
• Viable Color SchemesViable Color Schemes
<body bgcolor = "color" text = "color" <body bgcolor = "color" text = "color" link = "color" vlink = "color">link = "color" vlink = "color">
• W3 has deprecated the alink (the W3 has deprecated the alink (the initial color of a link when clicked)initial color of a link when clicked)
Spot ColorSpot Color
• Use the font tag for Spot ColorUse the font tag for Spot Color
<font color = "color">Yadda</font><font color = "color">Yadda</font>
Font FaceFont Face
• You can also change the FONT typeYou can also change the FONT type
<font face = "Arial, Helvetica, San <font face = "Arial, Helvetica, San Serif">yadda</a>Serif">yadda</a>
Background ImagesBackground Images
• Inserting a background imageInserting a background image
<body background = "image.gif"><body background = "image.gif">
<body bgcolor = "color" background = <body bgcolor = "color" background = "image.gif" text = "color" link = "image.gif" text = "color" link = "color" vlink = "color">"color" vlink = "color">
Care in Selecting an ImageCare in Selecting an Image
• Make sure a user can still read the Make sure a user can still read the text.text.
• Do not use a large image file. (Less Do not use a large image file. (Less than 20 KB) More will increase load than 20 KB) More will increase load times.times.
• Background must look seamless, not Background must look seamless, not tiled.tiled.
Image FormatsImage Formats
• GIFGIF– GIF87GIF87– GIF89aGIF89a
• interlacing, transparent colors, animationinterlacing, transparent colors, animation
• JPEG (JPG)JPEG (JPG)
GIFsGIFs
• Interlaced (3.20)Interlaced (3.20)
• TransparentTransparent
• Animated (Like a cartoon)Animated (Like a cartoon)– Animated GIFs are much larger than a Animated GIFs are much larger than a
regular GIF. Be careful with file sizes. If regular GIF. Be careful with file sizes. If you are trying to make a motion picture you are trying to make a motion picture with an animated GIF, you might with an animated GIF, you might consider another format ;}consider another format ;}
JPEGs (JPG)JPEGs (JPG)
• JPGs can be compressed and yield JPGs can be compressed and yield smaller file sizes in some casessmaller file sizes in some cases
• Primarily used when you want to Primarily used when you want to have all 16.7 million colors in an have all 16.7 million colors in an image instead of 256image instead of 256
Compressing JPGsCompressing JPGs
• The more one compresses, the less The more one compresses, the less the image quality. (see 3.25)the image quality. (see 3.25)
• Make sure you alwaysMake sure you always– Save the originalSave the original– Do incremental savesDo incremental saves
• Progressive JPEGProgressive JPEG– Newer image format. Same as a Newer image format. Same as a
transparent GIF, but retains image transparent GIF, but retains image resolution and colorsresolution and colors
ALTALT
• The ALT Property needs to be usedThe ALT Property needs to be used– nice for the mouseovernice for the mouseover– when images are turned offwhen images are turned off– text browserstext browsers– searchessearches
Image Placement and SizeImage Placement and Size
• Can be used for some great effects.Can be used for some great effects.<img src = "image.gif" align = "alignment"><img src = "image.gif" align = "alignment">
<img src = "image.gif" align = "alignment" <img src = "image.gif" align = "alignment" vspace = "value" hspace = "value">vspace = "value" hspace = "value">
<img src = "image.gif" height = "value" <img src = "image.gif" height = "value" width = "value">width = "value">
Quicker PagesQuicker Pages
• Reduce image file sizesReduce image file sizes
• Reduce number of colors in imagesReduce number of colors in images
• Go for smallest file typeGo for smallest file type
• ThumbnailsThumbnails
• Reuse images and backgroundsReuse images and backgrounds
DitheringDithering
• Changing 16.7 million to 256Changing 16.7 million to 256• Big differenceBig difference• Safety Palette of 211 colors that will Safety Palette of 211 colors that will
display without ditheringdisplay without dithering• Resource for Lab page has moreResource for Lab page has more• Dithering still has its place, but it's Dithering still has its place, but it's
not used as much anymore because not used as much anymore because of increased system power.of increased system power.
Image maps (3.37)Image maps (3.37)
• What is an image map?What is an image map?
• Server-SideServer-Side
• Client-SideClient-Side
• Both have advantages and Both have advantages and disadvantagesdisadvantages
• We will work with a client-side mapWe will work with a client-side map
HotspotsHotspots
• <br clear="left"> (Puts a comment <br clear="left"> (Puts a comment above the map.)above the map.)
• Use one of the recommended Use one of the recommended programs to define the hotspots. (I programs to define the hotspots. (I recommend Fireworks.)recommend Fireworks.)
The HTMLThe HTML
<map name = "mapname"><map name = "mapname">
<area shape = "shape" coords = <area shape = "shape" coords = "coordinates" href = "url">"coordinates" href = "url">
</map></map>
HTML (cont.)HTML (cont.)
Have to also call in the actual image, Have to also call in the actual image, so. . .so. . .
<img src = "image.gif" usemap = <img src = "image.gif" usemap = "#mapname">"#mapname">
# look familiar? # look familiar?
More on the AREA TagMore on the AREA Tag
• Three propertiesThree properties– ShapeShape
•rectrect
•circlecircle
•polypoly
– coordscoords– hrefhref
Even More. . .Even More. . .
•rectrect<area shape=rect coords="x_left, <area shape=rect coords="x_left,
y_upper, x_right, y_lower" href="url">y_upper, x_right, y_lower" href="url">
•circlecircle<area shape=circle coords="x_center, <area shape=circle coords="x_center,
y_center, radius" href="url">y_center, radius" href="url">
And yet some more. . . And yet some more. . .
• polypoly
<area shape=poly coords="x1, y1, y2, <area shape=poly coords="x1, y1, y2, y3, y4, . . ." href="url">y3, y4, . . ." href="url">
(Vertices of the polygon)(Vertices of the polygon)
• Use the border="0" property in the Use the border="0" property in the <img> tag<img> tag
Example of an Image MapExample of an Image Map
• From the tutorialFrom the tutorial
http://homepages.wmich.edu/~rea/380/resources/SpaceExpo/Exphttp://homepages.wmich.edu/~rea/380/resources/SpaceExpo/Expo1999.htmo1999.htm
So. . . . So. . . .
• Check out the ResourcesCheck out the Resources
• Check out the extra help on Lab 3Check out the extra help on Lab 3
• Use Fireworks ORUse Fireworks OR– Get an image programGet an image program– Get Animagic (and see tutorial)Get Animagic (and see tutorial)– Get an image map programGet an image map program
Take a BreakTake a Break
RequirementsRequirements Gathering Gathering
What do you need to know?What do you need to know?
As a Web Developer You As a Web Developer You Need to KnowNeed to Know
• Who users are.Who users are.
• What they want.What they want.
• What kind of computer experience What kind of computer experience they have.they have.
• What their computing environment What their computing environment is.is.
Who they are…Who they are…
• Demographic informationDemographic information– AgeAge– GenderGender– EducationEducation– EmploymentEmployment– Others???Others???
What they know…What they know…
• Domain KnowledgeDomain Knowledge– Expertise and Content levelsExpertise and Content levels
• UNIX for GeeksUNIX for Geeks
• Kiosk for end-usersKiosk for end-users
• User Computing ExperienceUser Computing Experience– Programmer versus Casual SurferProgrammer versus Casual Surfer– Level of computing familiarityLevel of computing familiarity
• MetaphorsMetaphors– Shopping cartShopping cart
Computing EnvironmentComputing Environment
• Web is not like fixed applicationsWeb is not like fixed applications– Variety of access pointsVariety of access points– 600 x 800600 x 800– MultimediaMultimedia
•Sparingly in most casesSparingly in most cases
•Plug-ins can be deadlyPlug-ins can be deadly
•Flash can fizzleFlash can fizzle
Content is King (or Queen)Content is King (or Queen)
• Content is importantContent is important– It's not your job to createIt's not your job to create– It's your job to integrateIt'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…..What is needed…..(dramatic pause)(dramatic pause)
Gathering RequirementsGathering Requirements
What do users want?What do users want?
Information Gathering Information Gathering TechniquesTechniques
• SurveysSurveys
• InterviewsInterviews
• Focus GroupsFocus Groups
SurveysSurveys
• Paper surveysPaper surveys
• Electronic surveysElectronic surveys•E-mailE-mail
– in-textin-text– attachmentsattachments
•Web-basedWeb-based– processing dataprocessing data
• Phone SurveysPhone Surveys
InterviewsInterviews
• PersonalPersonal– Come preparedCome prepared– Tape recorderTape recorder– Open versus Closed questionsOpen versus Closed questions
• PhonePhone– Cold callCold call– Selected usersSelected users
Focus GroupsFocus Groups
• Room settingRoom setting– small versus large groupssmall versus large groups– moderatormoderator– synergysynergy
• ElectronicElectronic– Group decision support systemsGroup decision support systems
•Cost prohibitiveCost prohibitive
– Platform IssuesPlatform Issues
What to Use?What to Use?
• Ask some questionsAsk some questions– Do users have e-mail addresses?Do users have e-mail addresses?– Can you meet with them personally?Can you meet with them personally?– Snail mail addresses only?Snail mail addresses only?– Does a Website exist?Does a Website exist?
• More than likely use a combination of More than likely use a combination of two or more techniques.two or more techniques.
Think AboutThink About
• What techniques might you use?What techniques might you use?
• Team will be asked to provide Team will be asked to provide information gathering techniques, information gathering techniques, plans and tools in reports.plans and tools in reports.– Initial: tools, techniques, any preliminary Initial: tools, techniques, any preliminary
resultsresults– Final: tools, techniques, resultsFinal: tools, techniques, results
•Link to how the Website meets the needsLink to how the Website meets the needs