Upload
dylan-gardner
View
226
Download
3
Tags:
Embed Size (px)
Citation preview
CIS 1310 – HTML & CSS
Learning OutcomesLearning 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 TerminologyMultimedia 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
AudioAudio
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
CIS 1310 – HTML & CSS
AudioAudio
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
VideoVideo
Frame
Individual Image
Frame Rate
fps — Number of Frames per Second
DVD — 30 fps
CIS 1310 – HTML & CSS
VideoVideo
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 IssuesCopyright 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 IssuesCopyright 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 IssuesCopyright 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 TypesMedia 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><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
CIS 1310 – HTML & CSS
<object><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
Adobe FlashAdobe 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 HTML 5 5 Multimedia ElementsMultimedia Elements
<audio> … </audio> 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
CIS 1310 – HTML & CSS
HTML HTML 5 5 Multimedia ElementsMultimedia Elements
<video> … </video> 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
CIS 1310 – HTML & CSS
HTML HTML 5 5 Multimedia ElementsMultimedia Elements
<video> … </video> 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
CIS 1310 – HTML & CSS
HTML HTML 5 5 Multimedia ElementsMultimedia Elements
<source /> 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
<embed /> Defines a Container for a Plug-in
CIS 1310 – HTML & CSS
CSS Image GalleryCSS 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 CSS 33 Transform 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 CSS 33 Transition 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
CIS 1310 – HTML & CSS
Java AppletsJava 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 & jQueryJavaScript & 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
AjaxAjax
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 APIsHTML 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 APIsHTML 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