User:Vtaylor/CIS 89A HTML and CSS/CIS89A - Images

'''Picture this... - Images'''
 * A picture is worth a thousand words
 * It is easy and inexpensive to add pictures to web pages. This has been one of the most important changes that web publishing has made. Printing pictures on paper, especially in color remains very expensive. The additional data to include high resolution images to a web page is relatively little. So use images to tell your story and add interest to your web page.

Learning outcomes
 * become familiar with graphics software
 * recognize appropriate web image file formats
 * use images as elements in the foreground of a web page
 * specify the height and width of images
 * provide alternate text and titles for images
 * link images to other content on a web site
 * add figure captions
 * style foreground images
 * use images as elements in the background of a web page

Keywords
 * image file format, copyright, usage, license, gif, jpeg, png, resolution, foreground, height, width, alternate text, title, link, caption, border, padding, margin, background, transparency, animation, compression

Study notes
 * What are good sources to find free and open images that you can use for your web pages?
 * what are some graphics software that are commonly used?
 * What are the most commonly used web image file formats?
 * What are the differences between the compression types? Why does this matter?

== ==
 * Wendy Willard - Chapter 8. Working with Images
 * HTML Dog HTML Beginner Tutorial
 * w3schools - images
 * Visual Quickstart - 5. Images

Creative Commons
 * Wikimedia Commons - Reuse guide
 * Open content
 * Creative Commons licenses
 * Creative Commons develops, supports, and stewards legal and technical infrastructure that maximizes digital creativity, sharing, and innovation.

Images, apps and software
 * 10 Excellent Open Source and Free Alternatives to Photoshop
 * 5 Free Open Source Image Editors For Windows, Mac, and Linux
 * Photo App in iOS 7 and with the iPhone 5S

== Assignments== Assignment file name and required elements
 * cis89images1 - img, src, width, height, alt, title (image attribute), href, map, area, shape, coords, figure, figcaption, border, float, margin, .gif, .jpg, .png


 * 1) Review the Keywords and Study questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.


 * 1) Read  Chapter 8. Working with Images  in the textbook.


 * 1) Read about the Creative Commons - the organization that develops, supports, and stewards legal and technical infrastructure that maximizes digital creativity, sharing, and innovation. Review the Creative Commons licenses to understand your rights to access and use images.


 * 1) Free image editing tools - There are plenty of good software tools and apps for editing images that are free, such as the ones listed in 10 Excellent Open Source and Free Alternatives to Photoshop. Have you used any other free image editing tools? Can you recommend any? Post your experience with free image editing tools to Image editing tools discussion.


 * 1) A phone as a camera - There are sites with tips for taking pictures with your phone - Photo App in iOS 7 and with the iPhone 5S. Find more information about phones and images. Post a link to the article and a brief description of why this is important to web developers to the Phones and images discussion.

Review the selections in 2 other posts.
 * 1) Explore the Wikimedia Commons - a database of more than 20 million freely usable media files to which anyone can contribute. Read the Reuse guide for the free license requirements. Find images  to include in your site. In the Wikimedia Commons discussion, post links to 2-3 images  that you are selected to include in your site.

There are multiple image file formats that are used on web pages - .gif, .jpeg, .png are the most commonly used. There is a version of .gif called animated gif that combines a series of individual images linked together so they make a little movie. Find an example of a site that includes an animated gif file. For each of these, post a link to the site in the More images discussion. Look at sources suggested by 2 others.
 * 1) More images - There are many other sources of images that you can use freely - Flickr (specified Creative Commons license types), OpenPhoto, OpenClipArt . Visit one or more of these sites and select an image to share.


 * 1) Galleries - Sometimes it is appropriate to display lots of images as a single web page. These are often called galleries. Find an example of a gallery. How are the images arranged? What steps has the developer taken to make the experience pleasant for the viewer? What would you do differently is you were building this gallery page? Post a link to the gallery site you selected along with your comments on the design, viewer experiences and suggested improvements to Image gallery discussion.


 * 1) Visual story - Sometimes a picture can tell a story without any words. These images can make a powerful addition to your web site. It is often simpler to show something in a picture than it is to describe it. Find one image that tells a story. How does the image you selected tell the story? What is it about the image that would be hard to describe?  Post a link to the image and briefly describe the story it tells to the Visual stories discussion. . Comment on the visual stories of 2 others.


 * 1) Working with images - In a new  Thimble file, use the assignment elements and tags to add images and place them within your page. You can use the images from the sources in the previous activities to demonstrate all the elements and tags within your page. Be sure to provide a description of what you are demonstrating, so the viewer know what they are supposed to see in each example. Save (publish) as cis89images1.
 * 2) Submit the full name of your assignment file to the  Working with images  assignment.
 * 3) Post a link to your assignment file and any comments or questions about the assignment to the  Working with images  discussion.