CIS89A - 6. Images, Media

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.

Sound, light & magic

One of the great benefits of the web and the internet has been the virtually unlimited availability of content, specifically images, audio and video.


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

• understand the benefits and limitations of media on the web
• include appropriate media to enhance content
• understand how plug-ins are used with web browsers
• link to different types of media
• embed different types of media into a web page
• style multimedia content


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
• image, audio, video, closed caption, transcript, plug-in, attributes, source, container

Reading guide

• What are good sources to find free and open images that you can use for your web pages?
• What are some graphics applications 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?

• What are the common media file formats that are used on the web?
• How are the media formats accessed from a web page?
• What are some of the benefits of including media on web pages?

Assignments

Coding project title and required elements * cis89media1 - img, src, width, height, alt, title (image attribute), href, figure, figcaption, border, float, margin, .gif, .jpg, .png

All these should be visible just looking at the "page" that displays from the link you submit

• all 3 types of images
• resize image that is also a link to the full size source image
• captions, alternate text, visible border
• position next to text with space around the image

• href, audio, source, controls, width, video
• sound file, video file, player controls
• basic requirements in all coding assignments .css for style and formatting, documentation comments in .css and .html

1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.
   
   
2. Read Chapter 11 How to work with images and icons and Chapter 14 How to add audio and video to your website in the textbook.
   
   
3. Educational videos - There are thousands of great educational videos on the web. TED Education, Two Minute Papers and TeacherTube series are the best known sources but there are many others. Find an example of a educational video. In the Educational videos discussion, post a link to the video you selected and a brief description. Be sure to include the length of the video in minutes:seconds.
   Review the selections of 2 others.
   
   
4. HTML5 support - HTML5 test - Check your browser for HTML5 support. This assignment will be hopelessly frustrating if the browser you are using does not support the HTML5 elements that you are trying to use. Check that your browser actually supports audio, video and the types of media that you select to include in your assignment page. If your browser doesn't support these elements and media types, download a browser that does - either a newer version, or a different one. As a web developer you need to be aware of these differences and plan your site content accordingly.
   
   
5. HTML5 - The HTML standard has been evolving to meet the demands of viewers and web developers to make use of new technologies as they become available. HTML5 is the most recent update. There are a number of new features and several modifications that are applicable to multimedia on the web. Review one or more HTML5 Introductions and tutorials. Check out movies and games that are created entirely in HTML5. What are some of the big changes? Why are these important to you as a web developer? Post a brief comment to the HTML5 updates discussion.
   
   
6. Free image editing tools - There are plenty of good software tools and apps for editing images that are free. Find recommendations reviews. Try one. 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.
   
   
7. A phone as a camera - There are sites with tips for taking pictures with your phone. Find an article with 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.
   
   
8. Explore the Wikimedia Commons and Foter databases of millions freely usable media files to which anyone can contribute. Read the Reuse guide for the free license requirements. Find images in the Wikimedia image collection that you might include in your site. In the Creative Commons Images discussion, post links to 2-3 images that you selected to include in your site.
   Review the selections in 2 other posts.
   
   
9. Visual story - Sometimes a picture can tell a story without any words. These images can make a powerful addition to your web site. It may be 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. Review the visual stories of 2 others.
   
   
10. More images - There are many other sources of images that you can use freely. Visit one or more of these sites and select an image to share.
    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.
    Post a link to the image you are sharing, and identify the file type in the More images discussion.
    Look at sources suggested by 2 others.
    
    
11. Media - In a new project, use the assignment elements, attributes and properties to include and play audio and video selections. Find examples of videos and sound files that are licensed through the Creative Commons so that you can include them in your web page. Have you worked out how to embed the media file? Did you make the viewer controls visible to the visitor? Use all the elements, attributes and properties within your page. Include some descriptive information so the viewer knows what is being demonstrated within your page. Also, use comments in your HTML code to indicate what you are doing. Publish your project file.
12. Submit the link to your project to the Media assignment.
13. Post a link to your project and any comments or questions about the assignment to the Media discussion.
14. Review the work of 2 others - the page display and the source code. Post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Media discussion.
    
    
15. HTML Coding validation - there are a number of tools available free online that will check your HTML code and highlight errors. Find one and have it check your code for the assignment. How did you do? Did it find errors that you missed? Did you understand what was wrong? Were you able to fix the problem? Did you re-check your code to see that you fixed the problem? Post a link to the HTML checker you used and a brief descriptions of your experience using it in the HTML Code Checker discussion. Review the post of 2 others.
    
    
16. Image maps - Find and review one or more of the tutorials on the HTML required to define and use Image Maps. Find an example of an image map on the web. Post a link to your selection to the Image Map discussion along with a brief description on why an image map is appropriate for this example.
    
    
17. Success Skills - Use it - how technologies are woven into daily living. Review 2-3 of the articles from Success skills Use it. Pick one article you would recommend from the selection list. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Use it discussion. Review 2 others.
    
    
18. Weeks 1-6 Midterm Review - This is about the middle of the course. We have covered a lot in a relatively short time. Now stop for a few minutes and think about the CIS89A Web Development course so far. In the first 6 weeks of the course, what was one pleasant surprise? What is one question that didn't get answered? What is something that you can do that will improve your course participation? Submit your comments and questions as the Weeks 1-6 Midterm Review assignment.

Media

• Chapter 11 How to work with images and icons and Chapter 14 How to add audio and video to your website

• HTML Dog HTML Beginner Tutorial
• HTML5 Introduction and HTML5 video tutorials
• HTML5 Test - Check your browser for HTML5 support

Image map

• Map and Area Elements - good tutorial on setting up and using image maps.

Images, apps and software

• 10+ Best Free or Open Source Photoshop Alternative Software (2011)

• 5 Free Open Source Image Editors For Windows, Mac, and Linux
• National Geographic Photo Gallery: Tips for Better iPhone Photography

MEDIA

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/media: Error parsing XML for RSS

2016.3 2338 . 2018.3 6341 . 2019.5 8233