CIS89A - 6. Multimedia

Sound, light & magic - Multimedia

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

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

Reading guide

• 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 - 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 9. Working with Multimedia 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. Multimedia - 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.
7. Submit the link to your project to the Multimedia assignment.
8. Post a link to your project and any comments or questions about the assignment to the Multimedia discussion.
9. 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 Multimedia discussion.
   
   
10. Preview on Mobile devices - Use a mobile device to view your page. Copy the link to your page and paste it into a "mobile browser" to see what your page will look like on an smartphone or tablet. What do you think? Have you created a good viewing experience for someone using a mobile device to access your page? How important is it to accommodate mobile users? What could you do differently to improve mobile viewing? Post your comments and suggestions to the Mobile devices preview discussion. If you used a different viewer, please include a link and comments. Review 2 others.
    
    
11. Media to go - Mobile apps are available for viewing as well as creating images and video. There are lots of podcasts and audio apps. Vine videos are created with their mobile app and limits videos to 6 seconds. This is just one example of mobile media. How much do you use mobile apps for viewing images and video? Listening to podcasts? Do you record video and post these to social media or video sites like YouTube? Post a short note about mobile media resources, examples and your comments to Media to go discussion. Review 2 others.
    
    
12. H5P Project - HTML5 has enabled new ways to create content for the web. H5P authoring tools developed by MIT and developers from around the world, make extensive use of HTML5 for creating interactive elements. Read About H5P project. Explore several of the H5P examples. Select one of the H5P interactive teaching game or quiz. Some suggestions - counting, adding numbers up to 10, easy reading storybook, ... How is HTML5 functionality being used? Is it effective? Post a link to your selection and HTML5 observations to Test drive H5P discussion. Review the work of 3 others.
    
    
13. 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.
    
    
14. 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.
    
    
15. 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

• Wendy Willard - Chapter 9. Working with Multimedia
• HTML Dog HTML Beginner Tutorial
• Visual Quickstart - 17. Video, Audio, and Other Multimedia
• HTML5 Introduction and HTML5 video tutorials
• HTML5 Test - Check your browser for HTML5 support

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...

HTML img tag

The <img> tag is used to embed an image in an HTML page.Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for th...

MOBILE PHOTOGRAPHY TIPS and TRICKS - Simple WAYS to CAPTURE BETTER PHOTOS - YouTube

video 6:38 Watch this vid for some awesome tips and tricks to take better photos with your mobile device. Mobile Photography is a tool I use all the time to capture for different platforms. These...

iframe

• iframe - alternate way to embed multimedia for older browsers and Glitch. For videos, you cannot currently use the video tag because of security reasons, but you can pull in video using the <iframe> tag.
• iframe tutorial

Mobile, responsive design

• Mobile-Friendly Test - make sure your site is mobile-friendly.

Screen Readers on Touchscreen Devices

People who are blind or have low vision must rely on their memory and on a rich vocabulary of gestures to interact with touchscreen phones and tablets. Designers should strive to minimize the cogni...

Chromium Blog: The Modern Mobile Web: State of the Union

"more than two billion AMP pages have been created and "PWA" has proved to be far more than a buzzword—it’s now the way that many businesses around the world are building for mob...

Customize your website software  |  Mobile Friendly Websites  |  Google Developers

"How do I make my site mobile friendly? If you know the software your website is built with, go directly to the dedicated guide:"
<p class="diigo-tags"><str...

Responsive Web Design Media Queries

"Always Design for Mobile First - Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This mea...

2016.3 2338 . 2018.3 6341 . 2019.5 8233