chapter11.ppt

Basics of Web Design Chapter 11 Media & Interactivity Basics Basics of Web Design: HTML5 & CSS, 6th Edition Copyright © 2022 Terry Ann Morris, Ed.D. https://terrymorris.net 1  Learning Outcomes  De...

Basics of Web Design Chapter 11 Media & Interactivity Basics Basics of Web Design: HTML5 & CSS, 6th Edition Copyright © 2022 Terry Ann Morris, Ed.D. https://terrymorris.net 1  Learning Outcomes  Describe types of multimedia files used on the Web  Configure hyperlinks to multimedia files  Configure audio and video on a web page with HTML5 elements  Use the CSS transform and transition properties  Configure a drop-down interactive menu with CSS Copyright © 2022 Terry Ann Morris, Ed. D. 2  Configure Audio & Video  The most basic method to provide audio or video files:  Hyperlink Web Design Podcast Copyright © 2022 Terry Ann Morris, Ed. D. 3  Containers & Codecs Container Designated by the file extension – contains the media and metadata Codec The algorithm used to compress and decompress the media HTML5 audio & video Native to the browser Browsers do not all support the same codecs Copyright © 2022 Terry Ann Morris, Ed. D. 4 Common Audio File Types .aac,.mp4 MPEG 4 Audio .mp3 MPEG-1 Audio Layer-3 .ogg Ogg Vorbis (open-source) .wav Wave File Copyright © 2022 Terry Ann Morris, Ed. D. 5  Common Video File Types .av1,.mp4 Open-source, Alliance for Open Media, AV1 codec .m4v,.mp4 MPEG-4, H.264 codec .mov Quicktime MPEG-4 codec .mov,.mp4,.hevc High-efficiency Video Coding, H.265 codec .ogv,.ogg Open-source. Ogg Theora (open-source), Theora codec .webm Open media format, VP8 & VP9 codecs Copyright © 2022 Terry Ann Morris, Ed. D. 6 Copyright Issues Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use. Ask permission to use media created by another person instead of simply “grabbing” it. All work (including web pages) are automatically copyrighted even if there is not copyright mark or date. Fair Use Clause of the Copyright Act Creative Commons – A new approach to copyright https://creativecommons.org/ Copyright © 2022 Terry Ann Morris, Ed. D. 7  Multimedia & Accessibility Provide alternate content Transcript (for audio) Captions (for video) Text format Copyright © 2022 Terry Ann Morris, Ed. D. 8 HTML5 Audio & Source Elements Download the Audio File (MP3) Copyright © 2022 Terry Ann Morris, Ed. D. 9 HTML5 Video & Source Elements Sparky the Dog (.mov) Copyright © 2022 Terry Ann Morris, Ed. D. 10 Use the iframe element to embed a video Copyright © 2022 Terry Ann Morris, Ed. D. 11 CSS Drop Down Menu Configure nav container with position relative Code submenu (drop down menu) ul element with the parent li element Configure submenu ul element to initially not display Configure submenu ul element with absolute positioning Copyright © 2022 Terry Ann Morris, Ed. D. 12  Summary This chapter introduced the HTML and CSS techniques and technologies used to configure sound, video, and interactivity on web pages. Issues related to accessibility and copyright were also discussed. The number one reason for visitors to leave web pages is too long of a download time. When using multimedia, be careful to minimize this issue. Copyright © 2022 Terry Ann Morris, Ed. D. 13