CIS89A - 4. Images and Media
From WikiEducator
.jpeg)
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.
Motion, Sound & 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?
Contents
Assignments
Coding project required elements - All these should be visible just looking at the "page" that displays from the link you submit
- 3 types of images - jpg, png, gif
- resize image (thumbnail) that is also a link to the full size source image
- captions, alternate text
- position an image next text
- sound file, video file, player controls
- customized bullets / markers (list-style-image), reference online resources list-style-image. .css - list-style-type
Select one of these icons to use for list-style-image property. Example of the code with a link to an external image
ul {
list-style-image: url("https://cdn0.iconfinder.com/data/icons/typicons-2/24/star-64.png");
}
- basic requirements in all coding projects - .css for style and formatting, documentation comments in .css and .html
- 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 activities for this module. Review the Media section (below - scroll down) for links to resources for this module.
- Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 7 Media
- Copyrights, Fair Use and Attribution - There is a lot of really good information on the web. Rather than creating your own material, it may be easier to use what someone else already created. How you use it and how you credit the creator are important. Review one of the Copyright, fair use media selections or find one on the web.
Attribution - giving credit to the creator of a copyright work. Since everything is automatically copyright, if you use it, you need to provide attribution. For academic publications, this is also know as citation. Some sources of media provide information about the attribution to include if you use a work. More information can be found at Creative Commons, Wikimedia Commons and elsewhere. Find an article (or video) that provides information about attribution.
Post a link and ONE important point about educational use of copyright material to the Copyright, Fair Use and Attribution discussion.
- 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. This Attibute infographic is a nice visual summary.
- Play the Remix Game. Test your knowledge of the remix compatibility of different license types using interactive questions with detailed feedback for correct and incorrect answers.
https://course.oeru.org/lida103/learning-pathways/remix-game/overview/ Post a note about one new thing you learned about using and sharing online resources to the Copyright and Remix discussion.
- HTML5 Support - The HTML standard evolves to meet the demands of viewers and web developers to make use of new technologies as they become available. HTML5 test - Check your browser for HTML5 support. http://html5test.com/ This coding project requires a browser that supports these HTML5 elements. Check that your browser actually supports audio and video media. If not, download 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.
- Image editing and resizing tools - There are plenty of good software tools and apps for editing and resizing images that are free. Resizing images for web display is critical. Cameras can capture really high resolution images and the files are huge. These aren't appropriate for web sites where smaller lower resolution images and fast load times provide a better user experience. Resizing a large image file is essential to reduce the time to load of the image. Find resources and recommendations on image editing and resizing tools and post with a short description to Image editing and resizing discussion.
- 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.
- Explore the Wikimedia Commons and any of Free Stock Photos databases of millions freely usable media files to which anyone can contribute. Read the Reuse guide for the free license requirements. Find images in one of these free collections 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. Include license type information. Be sure to include attribution if required.
Review the selections in 2 other posts.
- 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. What is it about the image that would be hard to describe? Post a link to the image and a ONE (1) sentence summary to the Visual stories discussion. Review the visual stories of 2 others. What did you notice in the image and post this as a reply to the image.
- WebXR - Virtual/Augmented Reality - Although it would be nice to have a special viewer, you can still see the videos in a regular browser from your computer or phone. Access the Smithsonian Virtual Tours site and explore. WebXR is an open specification that makes it possible to experience WebXR - VR (Virtual Reality)/ AR (Augmented Reality). You won’t be able to see in 3D or interact as fully in most example experiences, but you can still look around in 360 degrees. View several of the experiences. Select one and post a link and short summary of your experience. How was this different from a regular video? Have you ever used a VR viewer? Is WebXR going to change how we experience audio and visual content? Post your reply to the WebXR Experience discussion.
- Media - images, audio, video - In a new project, use the coding project elements, attributes and properties to include images and play audio and video selections. Find examples of media - images, videos and sound files that are licensed through the Creative Commons so that you can include them in your web page. Make viewer controls visible. 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.
- Code 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 project. How did you do? Did it find errors that you missed? Do you understand what is wrong? Were you able to fix the problem? Did you re-check your code to see that you fixed the problem?
- Submit the link to your project to the Working with Media assignment.
- Post a link to your project and any comments or questions about the coding project to the Working with Media discussion.
- 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 - things you learned from looking at these or ideas for your own work? Post to the Working with Media discussion.
- Review your own work. How would you use media in professional web design? What questions came up during the coding project? How did you resolve them? Would you do something differently next time? Write a brief description of any problems your had with the coding project. Post your response to the Working with Media - Review assignment.
- Success Skills - Share it - Communication and Collaboration are important as we are expanding our personal and professional networks of contacts and businesses. Review 2-3 articles from the Success skills - SHARE list in the media section below. The internet is all about sharing - information and processes including web development. Post a link and a brief summary of one idea that you got from the article you selected to the Success Skills - Share it discussion.
- Source code - Throughout the course, when you look at resources for other discussions, also check out the source code. You will learn a lot just looking at code by professional web developers.
- Project Groups Discussions - The groups were randomly assigned by Canvas. This is as good a way to form groups as any. Learning to work in online groups and practicing these skills are important preparation for careers in any field. If you already have experience working in groups online, please post 1-2 sentences about your experience. If you have not worked in a group online, what questions do you have? Post your reply to your Project Groups Discussions. If you can, respond to questions from others.
Note: There will be several group activities throughout the course. You will have a partial score until you have completed all the group discussion tasks in the course. Points are awarded for participation throughout the course so you will see your score increase after each task.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
- Chapter 7 Media
- Look at the examples for Align image. Text wraps around the image. Usually the image will be to one side and the text will go by on the other side. In Wikipedia, all the images are aligned on the right side of the articles.
- Check your browser for HTML5 support
Examples
- Under the Sea!
- Sea TurtleA Turtle Swimming Under The Sea CC by Adrien JACTA. CC1.0Free to use under th...
- Module 4 Media
- Module 4 MediaVideo by eamonq on PixabayForest SunlightSun light beaming through the le...
- Dwarf Hamsters
- "Types of Dwarf Hamsters Campbell's dwarf hamster Roborovski dwarf hamst...
IMAGE EDITING
- LunaPic | Free Online Photo Editor
- Completely Free online photo editing. No signup, login or install needed! We're converting our existing help pages and support questions to this center. Please let us know if your question was...
- Free Online Photo Editor: Free & easy image editing - Canva
- "Free Online Photo EditorTake your photos from blah to brilliant with Canva's free online photo editor. Upload, edit, and share instantly from one place."
<p class=&quo...
MEDIA
- https://www.educatorstechnology.com/2023/12/music-sources-for-school-projects.html
- collection of websites that offer royalty free music to use in school projects. However, it’s crucial for both you and your students to remember that even when using royalty-free music from vario...
- 10 Image SEO Tips To Make A Website Users Will Love
- Being so closely tied to user search intent and user experience, images have a greater impact on your rankings than you realize.According to First Site Guide’s research, images make up 62.6% of a...
IMAGE MAP
- good tutorial on setting up and using image maps.
COPYRIGHT, FAIR USE
- really simple: If you did not write or create the article, graphic, or data that you found, then you need permission from the owner before you can copy it
- Planet Money: The prince of prints and his prints of Prince on Apple Podcasts
- In 1981, photographer Lynn Goldsmith took a portrait of the musician Prince. It's a pretty standard headshot — it's in black-and-white, and Prince is staring down the camera lens.This was...
- Helpful Web Resources for Learning about Copyright - Educators Technology
- "collection of helpful resources you can use with your students to teach them about copyright. But before we delve into the collection, let’s first discuss why learning about copyright is pi...
HTML5
- HTML5 - New Tags (Elements)
- The following tags (elements) have been introduced in HTML5 − <audio> Defines an audio file.<canvas> This is used for rendering dynamic bitmap graphics on the fly, such as graphs or...
- HTML5 - Tags Reference
- A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated...
CREATIVE COMMONS
- MHz Curationist | Opening Cultures Together
- "Opening Cultures Together Publishing materials found in the Creative Commons and public domain, Curationist is an ecosystem for framing the world we share."
<p class="... - CC Search
- Try the new CC Search beta, with list-making and one-click attribution! search.creativecommons.org is not a search engine, but rather offers convenient access to search services provided by other...
- https://course.oeru.org/lida103/learning-pathways/creative-commons/remix-and-compatibility/
- Generally speaking, when creating a derivative work, the more open the CC license of the source materials, the more options there are available for the licensing of resulting works. It is legally p...
XREALITY
- Should engineers buy the Apple Vision Pro? | Engineering.com
- Virtual reality (VR) and augmented reality (AR) have been slowly seeping into engineering offices over the past decade. The technology is being used to interact with CAD models, to help assemble sp...
- 360°, Northern lights in Norway, 12К video - YouTube
- "Don't forget that this is 360° video: you can change the angle of view.Lying north of the Arctic circle within the severe waters of the Norwegian sea, the Lofoten archipelago is known fo...
SHARE
- Downes.ca ~ Stephen's Web ~ Tight 20
- talk about for twenty minutes simply by organizing and presenting my thoughts on the topic. Do a 'quick three' - past, present or future; my view, your view, synthesis; etc. For each six mi...
- The Content Every High School Student Should Learn (But Doesn’t) | Getting Smart
- "three core types of skills expected by schools: core skills (typically the skills of writing, reading, mathematics, history, arts found in state standards), technological skills (industry ski...
- The 7 Habits of Highly Effective People | FranklinCovey
- Our character is a composite of our habits, which factors heavily in our lives. Because habits are consistent, unconscious patterns, they constantly express our character and result in our effectiv...
- Harvard psychologist: If you use any of these 9 phrases every day, 'you're more emotionally resilient than most'
- Emotionally resilient people are deliberate in their response to painful experiences. They allow themselves to grieve, remind themselves of what they are grateful for, and focus on what they can co...
2016.3 2338 . 2018.3 6341 . 2019.5 8233
