This week...

Color was great, but now lets add some images!!! It is really easy for this to be a very time consuming week. There are so many items to see, so many things to try. It reminds me of a kid in Willie Wonka's candy factory. So be sure to pace yourself. But that does not mean you cannot go back later when you have time.

The use of images, to me, is one items that separates the newbies from the professionals. So pay close attention to topics such as resizing images, using borders in image links, the use of thumbnails and actually all of the topics.

There are several issues that I need to emphasize:

• Image Location
  It is best to create a separate folder (perhaps named images) which will contain all of your graphics. This will make the site more organized and in the long run easier to locate item. For this course all multimedia must be in a separate folder. The correct path in code would be <img src="foldername/imagename".... /> Example <img src="images/owl.jpg" height="50" width="50" alt="Wise Owl" />
  
  
• Image Names
  As with all other files, do not use spaces when naming images. On some servers, spaces cause errors. Instead of My Picture.jpg use MyPicture.jpg or My_Picture.jpg. Also on some servers, file names are case sensitive so it is best to have a pattern and follow that pattern such and MyPicture.Jpg (CamelCase format) or myPicture.jpg (pascalCase format)
  
  
• Accessibility: Vision impaired users will not be able to see your graphics. Screen readers use the alt attributes to describe what they cannot see. So be sure to make the text for the alt tags meaningful.
  
  
• Copyright: Just because it is on the web does not mean it can be downloaded and used freely. Copyright laws apply just as they do for printed media. Read that section of the text carefully. This will apply to both the printed text and images you may wish to use in your final project.
  

Chapter 4:

p.139 FAQ My web page looks different in some browsers. What can I do?

Top 5 HTML5 Compatibility Charts for Web and Mobile Developers
       http://mightydigital.com/top-5-html5-compatibility-charts-web-mobile-developers/

p. 141 Compression and Optimization

The text has some examples but it was thought that seeing color images may help. Check out the following.

• See the effect of reducing the number of colors.
• See the effect of graphic file compression
  
  

p. 144 FAQ: What if I don't know the height and width of an image?

One way of determine the height and width of an image is to insert it into a web page as the text explains, but there are other ways.

Windows: To determine the height/width of an image view the image in Windows Explorer in either the Tiles or Thumbnails view

Mac: In Finder, use the column format, then preview the image.

It is possible to change the height and width properties in a web page and the image will appear at the new size. This, however, is NOT recommended. First the image may be distorted either looking stretched or pixilated (image is displayed in a arrangement of colored squares). The image needs to be resized using a graphics program. If you do not own a program such as Photoshop, try the options listed under Software above.

p. 144 Image Hyperlinks

The text mentions that when a graphic is a link, if it has border="1" (or higher), the graphic will have an outline. This can looks very unprofessional. It is recommended that a CSS rule be created that can then be applied as needed to images that are links.

Take a moment and view this image link demo

p. 145 Hands On Practice 4.3

In the examples in the text, graphics are stored in the root directory (the main folder, the same folder as the web pages). This can become very cumbersome. It is best to create an images folder inside of the main folder to hold the image files. It is not necessary to do this for the tutorials in the text. However, for the assignments and the final project all multimedia files must be in their own folder. For this week's assignment, use Finder(Mac) or Computer(Windows) to create a folder inside of the pacific04 folder. The name of the folder will be images. This is where the images will be located. Then when writing code to include one of those images the <img> tag would be similar to the following:

<img src="images/trilliumbanner.jpg" height="86" width="700" alt="Trillium Medi Design"/>

Notice that images/ has been added to the code. Images is the name of the folder holding the image files.

p. 147 Optimize an Image for the Web

Software:

• TinyPNG - optimizes PNG files https://tinypng.com/
• SmushIt http://www.smushit.com/ysmush.it/ (Online - Optimize image files)
• Gimp http://gimp.org (multiple platforms - free)
• Pixlr http://pixlr.com/editor (Online - Image editor)
  
  

p. 156 Image Maps

Interactive example at W3Schools.com

http://www.w3schools.com/tags/tag_map.asp -- Be sure to click on Try It Yourself

p. 158 The Favorites Icon

Using the link approach also allows for different icons for different pages within a website. Including the icon in the root directory would mean all pages have the same icon.

Software

• Icon Browser http://findicons.com/search/computer (Free Icon browser)
• iConvert http://iconverticons.com/ (Online - Convert images to icons)

p. 160 Sources of Graphics: Focus on Ethics

Read this section carefully. Just because it is on the web, does NOT mean it can be copied and reused. Copyright laws DO apply.

p. 162 4.8 CSS3 Visual Effects

CSS Click Chart - great resource that includes demos, examples, informational links, and browser support for CSS3 visual effect properties. Consider adding this to your bookmarks.
http://css3clickchart.com

HTML5 and CSS3 Browser Support - great chart!
http://www.findmebyip.com/litmus

p. 165, FAQ - CSS Validation

Browser-specific prefixes such as those listed below will will not validate using CSS2 validation.

-moz for Mozilla
-webkit for Chrome and Safari
-o for Opera
-khtml for Konqueror

Assignments using CSS3 must still validate when using FireFox's Web Developer Toolbar.

REMINDER: By default, at the time of this writing, FireFox's Web Developer's CSS Validation is set to CSS2.1. It is a simple fix to update it. In the Developer Tool Bar, click on Tools | Edit Tools. Select Validate CSS and then click on the Edit button at the bottom of the dialog box. If not selected, choose the radio button next to URL. Change the URL as indicated below. Click on OK and the close the Tools dialog box. You may need to restart the browser. This also seems to alleviate some of the errors associated with webkit and moz (These extensions will be used in WSD05 Assignment.)

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=
http://jigsaw.w3.org/css-validator/validator?profile=css&warning=0&uri=

p. 173 CSS3 RGBA Color

A fun site to play with Color: Hex, RGB, RGBA, HSLA and see the codes for each type.
http://www.workwithcolor.com/

---

Be sure to check out the Supplemental Resources and Software tabs above.
There are links to some great resources!