CIS 1310 – HTML & CSS 11 Web Multimedia & Interactivity.

Presentation on theme: "CIS 1310 – HTML & CSS 11 Web Multimedia & Interactivity."— Presentation transcript:

1 CIS 1310 – HTML & CSS 11 Web Multimedia & Interactivity

2 CIS 1310 – HTML & CSS Learning Outcomes  Describe the Purpose of Plugins, Containers, Codecs  Describe Types of Multimedia Files on the Web  Create Links to Multimedia Files  Configure a Audio & Video on a Web Page  Create an Interactive Image Gallery with CSS  Configure CSS3 Transform & Transition Properties  Describe the Purpose of the HTML5 Canvas Element

3 CIS 1310 – HTML & CSS Multimedia Terminology  Plugin Component Added to Browser to Provide Additional Capability  Container Contains Media & Metadata Designated by File Extension  Codec Algorithm Used to Compress Media

4 CIS 1310 – HTML & CSS Audio  Sample Digital Measurement of an Analog Sound Sampling Rate Number of Samples per Second in kHz Sampling Resolution Precision Measured in Bits Channel Stereo | Mono 11 kHz @ 16-bit Stereo (43kb/sec) — Phone 22 kHz @ 16-bit Stereo (86kb/sec) — Radio 44 kHz @ 16-bit Stereo (172kb/sec) — CD

5 CIS 1310 – HTML & CSS Audio  Formats Uncompressed.wav Wave File.aiff Audio Interchange File Format.au Sun UNIX sound file Lossless - Compressed without Data Loss. m4a MPEG 4 Audio Lossy - Compressed with Data Reduction.mp3 MPEG-1 Audio Layer-3.oggOgg Vorbis (open-source)

6 CIS 1310 – HTML & CSS Video  Frame Individual Image  Frame Rate fps — Number of Frames per Second DVD — 30 fps

7 CIS 1310 – HTML & CSS Video  Formats.avi Microsoft Audio Video Interleaved.flv Flash Video File.movQuicktime.mpgMPEG (Motion Picture Experts Group).m4v.mp4 (MPEG-4).ogv Ogg Theora (open-source).webmVP8 codec (open video format, free).wmvWindows Media File

8 CIS 1310 – HTML & CSS Copyright Issues  Only Publish Media That You Have: Personally Created Obtained the Rights or License To Use  You Must Request Permission to Use Media If Created by Another Person  Media Automatically Copyrighted Even if There is No Copyright Mark or Date Including Web Pages

9 CIS 1310 – HTML & CSS Copyright Issues  Fair Use Clause of the Copyright Act Quotation of Excerpts in a Review or Criticism Short Quotation in a Scholarly or Technical Work Use in a Parody Summary of an Address or Article Reproduction by a Teacher or Student Small Part of a Work to Illustrate a Lesson

10 CIS 1310 – HTML & CSS Copyright Issues  Creative Commons Standardized Way to Give Permission to Use Creative Work License Types Attribution May Copy, Distribute, Display, Perform, & Make Derivative Works If Author or Licensor is Given Credit Share-alike May Distribute Derivative Works Only if License is Identical to Original Work Non-commercial No Derivative Works

11 CIS 1310 – HTML & CSS Media Types  External Accessed Through Hyperlinks Retrieved Only if User Desires  Inline Embedded into Web Page as an Object Can be Supplemented with Other Material i.e., Description …

12 CIS 1310 – HTML & CSS <object>  Attributes data=“URL” Defines a URL that Refers to the Object's Data height=“#” Specifies Height of Embedded Object name=“name” Specifies Name for Object type=“MIME type” Defines the MIME Type of Data Specified in data Attribute width=“#” Specifies Width of Embedded Object

13 CIS 1310 – HTML & CSS <object>  MIME Multipurpose Internet Mail Extensions Standard Identifier Used on Internet Indicates Type of Data that File Contains Use Has Expanded From SMTP To HTTP

14 CIS 1310 – HTML & CSS <object>

15 <param>   Attributes name=“unique name” Required value=“#”

16 CIS 1310 – HTML & CSS <param>

17 Adobe Flash  Popular Multimedia Application  Adds Visual Interest & Interactivity to Web Pages  Flash Movies Saved in.swf Files  Perception of Speedy Display .swf Files Play as They Download  Flash Player Free Browser Plug-in Widely Installed on Browsers

18 CIS 1310 – HTML & CSS HTML 5 Multimedia Elements  … Defines a Sound, Such as Music or Other Audio Stream Attributes autoplay=“autoplay” Specifies Audio Will Start Playing as Soon as it is Ready controls=“controls” Specifies Controls Should be Displayed loop=“loop” Specifies Audio Will Start Over Again, Every Time it is Finished preload=“auto | metadata | none” Specifies How Audio Should be Loaded When Page Loads src=“url” Specifies the URL of the Media File

19 CIS 1310 – HTML & CSS HTML 5 Multimedia Elements  … Defines a Video, Such as Movie or Other Video Stream Attributes autoplay=“autoplay” Specifies Audio Will Start Playing as Soon as it is Ready controls=“controls” Specifies Controls Should be Displayed height=“pixels” Sets the Height of the Video Player loop=“loop” Specifies Audio Will Start Over Again, Every Time it is Finished muted=“muted” Specifies Audio Output of the Video Should be Muted

20 CIS 1310 – HTML & CSS HTML 5 Multimedia Elements  … Attributes poster=“url” Specifies Image to be Shown Until User Clicks Play Button preload=“auto | metadata | none” Specifies How Audio Should be Loaded When Page Loads src=“url” Specifies the URL of the Media File width=“pixels” Sets the Width of the Video Player

21 CIS 1310 – HTML & CSS HTML 5 Multimedia Elements  Specify Multiple Media Resources for Media Elements Attributes media=“media_query” Specifies the Type of Media Resource src=“url” Specifies the URL of the Media File type=“MIME_type” Specifies the MIME Type of the Media Resource  Defines a Container for a Plug-in

22 CIS 1310 – HTML & CSS CSS Image Gallery  Configure each thumbnail image: Golden Gate Bridge  CSS #gallery span { display: none; } #gallery a:hover span { display: block; position: absolute; top: 10px; left: 300px; text-align: center; }

23 CIS 1310 – HTML & CSS CSS 3 Transform  Allows Various Transformations of an Element  Transform: matrix(n,n,n,n,n,n) matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) perspective(n) rotate(angle) scale(x,y) skew(x-angle,y-angle) translate(x,y) translate3d(x,y,z)

24 CIS 1310 – HTML & CSS CSS 3 Transition  Changes Property Values Displays in a Smooth Manner Over a Specified Time  transition- property Specifies Name of CSS Property Effect is for duration Specifies Seconds or Milliseconds Effect Takes to Complete timing Specifies Speed Curve of Effect Delay Defines When Effect Starts

25 CIS 1310 – HTML & CSS Java Applets  Program Included in a Web page Compiled Translated into an Encoded Form Called Byte Code.  Uses the.class File Extension  Java Virtual Machine (JVM) Interprets Byte Code i nto Proper Machine Language for OS After Translation, Applet is Executed Appears on Web Page Implemented Through

26 CIS 1310 – HTML & CSS JavaScript & jQuery  JavaScript Scripting Language Developed by Netscape Enable Web Authors to Design Interactive Sites  jQuery Free, Open Source JavaScript API (Library) Navigate Documents, Handle Events, Perform Animations Add Ajax Interactions to Web Pages Developed by John Resig Licensed Under MIT and GNU General Public Licenses

27 CIS 1310 – HTML & CSS Ajax  Asynchronous JavaScript and XML Existing Technologies Used in New Way Standards-based XHTML & CSS Document Object Model (DOM) XML (and Related XSLT Technology) Asynchronous Data Retrieval Using XMLHttpRequest Used by JavaScript to transfer XML & Other Text Data To / From Web Server Using HTTP JavaScript

28 CIS 1310 – HTML & CSS HTML 5 APIs  Geolocation Allows Web Page Visitors to Share Geographic Location Location Determined By IP Address Wireless Network Connection Local Cell Tower GPS Hardware Javascript Works with Latitude & Longitude Coordinates

29 CIS 1310 – HTML & CSS HTML 5 APIs  Web Storage Provides Two New Ways to Store Client Side Information Increases Amount of Data that Can be Stored 5Mb Per Domain Localstorage Object Stores Data without Expiration Date Sessionstorage Object Stores Data Only for Current Browser Session Javascript Used to Work with Object Values