CIS 1310 – HTML & CSS
Download
Report
Transcript CIS 1310 – HTML & CSS
11
Web Multimedia &
Interactivity
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
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
CIS 1310 – HTML & CSS
Audio
Sample
Digital Measurement of an Analog Sound
Sampling Rate
Sampling Resolution
Number of Samples per Second in kHz
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
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
.ogg
Ogg Vorbis (open-source)
CIS 1310 – HTML & CSS
Video
Frame
Individual Image
Frame Rate
fps — Number of Frames per Second
DVD — 30 fps
CIS 1310 – HTML & CSS
Video
Formats
.avi
Microsoft Audio Video Interleaved
.flv
Flash Video File
.mov
Quicktime
.mpg
MPEG (Motion Picture Experts Group)
.m4v
.mp4 (MPEG-4)
.ogv
Ogg Theora (open-source)
.webm
VP8 codec (open video format, free)
.wmv
Windows Media File
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
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
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
CIS 1310 – HTML & CSS
Media Types
External
Accessed Through Hyperlinks
Retrieved Only if User Desires
<a href=“ ”></a>
Inline
Embedded into Web Page as an Object
Can be Supplemented with Other Material
i.e., Description
<object> … </object>
CIS 1310 – HTML & CSS
<object>
Attributes
data=“URL”
height=“#”
Specifies Name for Object
type=“MIME type”
Specifies Height of Embedded Object
name=“name”
Defines a URL that Refers to the Object's Data
Defines the MIME Type of Data Specified in data Attribute
width=“#”
Specifies Width of Embedded Object
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
CIS 1310 – HTML & CSS
<object>
CIS 1310 – HTML & CSS
<param>
<param />
Attributes
name=“unique name”
Required
value=“#”
CIS 1310 – HTML & CSS
<param>
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements
<audio> … </audio>
Defines a Sound, Such as Music or Other Audio Stream
Attributes
autoplay=“autoplay”
controls=“controls”
Specifies Audio Will Start Over Again, Every Time it is Finished
preload=“auto | metadata | none”
Specifies Controls Should be Displayed
loop=“loop”
Specifies Audio Will Start Playing as Soon as it is Ready
Specifies How Audio Should be Loaded When Page Loads
src=“url”
Specifies the URL of the Media File
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements
<video> … </video>
Defines a Video, Such as Movie or Other Video Stream
Attributes
autoplay=“autoplay”
controls=“controls”
Sets the Height of the Video Player
loop=“loop”
Specifies Controls Should be Displayed
height=“pixels”
Specifies Audio Will Start Playing as Soon as it is Ready
Specifies Audio Will Start Over Again, Every Time it is Finished
muted=“muted”
Specifies Audio Output of the Video Should be Muted
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements
<video> … </video>
Attributes
poster=“url”
preload=“auto | metadata | none”
Specifies How Audio Should be Loaded When Page Loads
src=“url”
Specifies Image to be Shown Until User Clicks Play Button
Specifies the URL of the Media File
width=“pixels”
Sets the Width of the Video Player
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements
<source />
Specify Multiple Media Resources for Media Elements
Attributes
media=“media_query”
src=“url”
Specifies the URL of the Media File
type=“MIME_type”
Specifies the Type of Media Resource
Specifies the MIME Type of the Media Resource
<embed />
Defines a Container for a Plug-in
CIS 1310 – HTML & CSS
CSS Image Gallery
Configure each thumbnail image:
<li><a href="photo1.jpg"><img src="photo1thumb.jpg"
width="100" height="75" alt="Golden Gate Bridge">
<span><img src="photo1.jpg" width="400" height="300“
alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a>
</li>
CSS
#gallery span { display: none; }
#gallery a:hover span { display: block;
position: absolute; top: 10px;
left: 300px; text-align: center; }
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)
CIS 1310 – HTML & CSS
CSS 3 Transition
Changes Property Values
Displays in a Smooth Manner Over a Specified Time
transition
property
duration
Specifies Seconds or Milliseconds Effect Takes to Complete
timing
Specifies Name of CSS Property Effect is for
Specifies Speed Curve of Effect
Delay
Defines When Effect Starts
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 into Proper Machine Language for OS
After Translation, Applet is Executed
Appears on Web Page
Implemented Through <object>
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
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
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
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
Localstorage Object
Stores Data without Expiration Date
Sessionstorage Object
5Mb Per Domain
Stores Data Only for Current Browser Session
Javascript Used to Work with Object Values
CIS 1310 – HTML & CSS