Enviar pesquisa
Carregar
HTML5 Multimedia Chapter: Audio, Video, Flash and More
•
Transferir como PPT, PDF
•
1 gostou
•
2,431 visualizações
Título melhorado com IA
T
tclanton4
Seguir
Chapter 11 Presentation -- Web Design
Leia menos
Leia mais
Educação
Tecnologia
Diversão e humor
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 37
Baixar agora
Recomendados
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter11
Chapter11
DeAnna Gossett
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Recomendados
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter11
Chapter11
DeAnna Gossett
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter5
Chapter5
DeAnna Gossett
Wordcampnigeria
Wordcampnigeria
Aderemi Dadepo
WordPress: An Introduction
WordPress: An Introduction
sounddelivery
Introduction to WordPress
Introduction to WordPress
R-Cubed Design Forge
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Gary Bacon
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
Brendan Sera-Shriar
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
How websites and search engines work
How websites and search engines work
Brian Duffy
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!
Melodie Laylor
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ottergoose
Ch. 4 FIT5, CIS 110 13F
Ch. 4 FIT5, CIS 110 13F
mh-108
Introduction to WordPress
Introduction to WordPress
Michelle Castillo
Web2 And Java
Web2 And Java
senejug
Chapter 01
Chapter 01
Long Beach City College
Website development accessibility
Website development accessibility
Ilesh Mistry
The WordPress Hosting Decision: It All Starts Here
The WordPress Hosting Decision: It All Starts Here
Business Vitality LLC
09-10-2012-getting-started-with-word-press
09-10-2012-getting-started-with-word-press
Jerome Miller
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
brucelawson
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
brucelawson
Mais conteúdo relacionado
Mais procurados
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter5
Chapter5
DeAnna Gossett
Wordcampnigeria
Wordcampnigeria
Aderemi Dadepo
WordPress: An Introduction
WordPress: An Introduction
sounddelivery
Introduction to WordPress
Introduction to WordPress
R-Cubed Design Forge
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Gary Bacon
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
Brendan Sera-Shriar
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
How websites and search engines work
How websites and search engines work
Brian Duffy
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!
Melodie Laylor
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ottergoose
Ch. 4 FIT5, CIS 110 13F
Ch. 4 FIT5, CIS 110 13F
mh-108
Introduction to WordPress
Introduction to WordPress
Michelle Castillo
Web2 And Java
Web2 And Java
senejug
Chapter 01
Chapter 01
Long Beach City College
Website development accessibility
Website development accessibility
Ilesh Mistry
The WordPress Hosting Decision: It All Starts Here
The WordPress Hosting Decision: It All Starts Here
Business Vitality LLC
09-10-2012-getting-started-with-word-press
09-10-2012-getting-started-with-word-press
Jerome Miller
Mais procurados
(20)
Chapter 10 - Web Design
Chapter 10 - Web Design
Chapter5
Chapter5
Wordcampnigeria
Wordcampnigeria
WordPress: An Introduction
WordPress: An Introduction
Introduction to WordPress
Introduction to WordPress
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
How websites and search engines work
How websites and search engines work
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ch. 4 FIT5, CIS 110 13F
Ch. 4 FIT5, CIS 110 13F
Introduction to WordPress
Introduction to WordPress
Web2 And Java
Web2 And Java
Chapter 01
Chapter 01
Website development accessibility
Website development accessibility
The WordPress Hosting Decision: It All Starts Here
The WordPress Hosting Decision: It All Starts Here
09-10-2012-getting-started-with-word-press
09-10-2012-getting-started-with-word-press
Semelhante a HTML5 Multimedia Chapter: Audio, Video, Flash and More
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
brucelawson
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
brucelawson
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
Christian Heilmann
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
RZasadzinski
Taking HTML5 video a step further
Taking HTML5 video a step further
Silvia Pfeiffer
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
Patrick Lauke
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
Lecture9 web design and development
Lecture9 web design and development
Rafi Haidari
Web Directions @media 2010
Web Directions @media 2010
Patrick Lauke
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
Walter Ebert
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Christopher Schmitt
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
Patrick Lauke
HTML 5
HTML 5
Mohammad Raju
Nuxeo - Digital Asset Management
Nuxeo - Digital Asset Management
Thomas Roger
Html audio video
Html audio video
Muhammad Ehtisham Siddiqui
2011 06-20 - drupal jam - html5 video
2011 06-20 - drupal jam - html5 video
MediaMosa
HTML Media
HTML Media
krupesh patel
HTML5 Design
HTML5 Design
Christopher Schmitt
Beginning WordPress
Beginning WordPress
Digital Strategy Works LLC
Semelhante a HTML5 Multimedia Chapter: Audio, Video, Flash and More
(20)
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
Taking HTML5 video a step further
Taking HTML5 video a step further
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Lecture9 web design and development
Lecture9 web design and development
Web Directions @media 2010
Web Directions @media 2010
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012
HTML 5
HTML 5
Nuxeo - Digital Asset Management
Nuxeo - Digital Asset Management
Html audio video
Html audio video
2011 06-20 - drupal jam - html5 video
2011 06-20 - drupal jam - html5 video
HTML Media
HTML Media
HTML5 Design
HTML5 Design
Beginning WordPress
Beginning WordPress
Mais de tclanton4
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Chapter 12 - Web Design
Chapter 12 - Web Design
tclanton4
Chapter 9 - Web Design
Chapter 9 - Web Design
tclanton4
Chapter 8 - Web Design
Chapter 8 - Web Design
tclanton4
Base2
Base2
tclanton4
Base1
Base1
tclanton4
Impress
Impress
tclanton4
Project Mgt
Project Mgt
tclanton4
Charts in Calc
Charts in Calc
tclanton4
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
tclanton4
Creating a Worksheet in Calc
Creating a Worksheet in Calc
tclanton4
Advanced Features of Writer
Advanced Features of Writer
tclanton4
Creating a Writer Document
Creating a Writer Document
tclanton4
Formatting Features of Writer
Formatting Features of Writer
tclanton4
Getting Started - The Basics
Getting Started - The Basics
tclanton4
Intro to Information Systems
Intro to Information Systems
tclanton4
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
tclanton4
Mais de tclanton4
(17)
Chapter 14 - Web Design
Chapter 14 - Web Design
Chapter 12 - Web Design
Chapter 12 - Web Design
Chapter 9 - Web Design
Chapter 9 - Web Design
Chapter 8 - Web Design
Chapter 8 - Web Design
Base2
Base2
Base1
Base1
Impress
Impress
Project Mgt
Project Mgt
Charts in Calc
Charts in Calc
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
Creating a Worksheet in Calc
Creating a Worksheet in Calc
Advanced Features of Writer
Advanced Features of Writer
Creating a Writer Document
Creating a Writer Document
Formatting Features of Writer
Formatting Features of Writer
Getting Started - The Basics
Getting Started - The Basics
Intro to Information Systems
Intro to Information Systems
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
Último
PSYCHIATRIC History collection FORMAT.pptx
PSYCHIATRIC History collection FORMAT.pptx
PoojaSen20
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
FatimaKhan178732
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Celine George
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
VS Mahajan Coaching Centre
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
KarinaGenton
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Sapana Sha
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of Powders
ChitralekhaTherkar
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
Association for Project Management
MENTAL STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
PoojaSen20
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
Celine George
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
EduSkills OECD
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
dawncurless
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
SafetyChain Software
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Sarwono Sutikno, Dr.Eng.,CISA,CISSP,CISM,CSX-F
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
Chameera Dedduwage
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Krashi Coaching
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
RKavithamani
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
chloefrazer622
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
David Douglas School District
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
pboyjonauth
Último
(20)
PSYCHIATRIC History collection FORMAT.pptx
PSYCHIATRIC History collection FORMAT.pptx
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of Powders
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
MENTAL STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
HTML5 Multimedia Chapter: Audio, Video, Flash and More
1.
Copyright © Terry
Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 11 Key Concepts 1Copyright © Terry Felke-Morris
2.
Copyright © Terry
Felke-Morris LEARNING OUTCOMES In this chapter, you will learn how to ... Describe the purpose of plug-ins, helper applications, media containers, and codecs Describe types of multimedia files used on the Web Configure hyperlinks to multimedia files Apply the object element to display audio files, video files, and Flash multimedia Configure audio and video on a web page with HTML5 elements Describe features and common uses of Adobe Flash, JavaScript, Java applets, and Ajax Configure a Flash animation on a web page Configure a Java applet on a web page Create an interactive image gallery with CSS Configure the CSS3 transform and transition properties Describe the purpose of the HTML5 canvas element 2
3.
Copyright © Terry
Felke-Morris HELPER APPLICATIONS & PLUG-INS Helper Application A program that can be designated to handle a particular file type (such as .wav or.mpg) to allow the user to view or otherwise utilize the special file. The helper application runs in a separate window from the browser. Plug-In A newer and more common method Plug-ins run right in the browser window so that media objects can be integrated directly into the web page. 3
4.
Copyright © Terry
Felke-Morris CONTAINERS & CODECS Container Designated by the file extension – contains the media and metadata Codec The algorithm used to compress the media HTML5 audio & video Native to the browser Browsers do not support the same codecs 4
5.
Copyright © Terry
Felke-Morris COMMONLY USED PLUG-INS Adobe Flash Player Adobe Reader Windows Media Player Apple Quicktime 5
6.
Copyright © Terry
Felke-Morris COMMON AUDIO FILE TYPES .wav Wave File .aiff Audio Interchange File Format .mid Musical Instrument Digital Interface (MIDI) .au Sun UNIX sound file .mp3 MPEG-1 Audio Layer-3 .ogg OggVorbis (open-source) . m4a MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods. 6
7.
Copyright © Terry
Felke-Morris COMMONVIDEO FILE TYPES .mov Quicktime .avi Microsoft AudioVideo Interleaved .wmv Windows Media File .flv FlashVideo File .mpg MPEG (Motion Picture Experts Group) .m4v .mp4 (MPEG-4) .ogv Ogg Theora (open-source) .webm VP8 codec (open video format, free) 7
8.
Copyright © Terry
Felke-Morris 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 8
9.
Copyright © Terry
Felke-Morris CONFIGURE AUDIO &VIDEO Most basic method to provide audio or video files: Hyperlink <a href=“wdfpodcast.mp3" title=“Web Design Podcast”>Web Design Podcast</a> 9
10.
Copyright © Terry
Felke-Morris XHTML: USING <OBJECT> & <PARAM /> TAGS TO EMBED AUDIO 10 <object data="soundloop.mp3" height="50" width="100" type="audio/mpeg" title="Music Sound Loop"> <param name="src" value="soundloop.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> </object>
11.
Copyright © Terry
Felke-Morris <object data="sparky.mov" height="150" width="160“ type="video/quicktime" classid="clsid:02BF25D5–8C17–4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" title="Video of a cute Pekingese dog barking"> <param name="src" value="sparky.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <p>A video of a cute Pekingese dog barking.</p> </object> XHTML: USING <OBJECT> AND <PARAM /> TAGS TO EMBEDVIDEO 11
12.
Copyright © Terry
Felke-Morris MULTIMEDIA & ACCESSIBILITY Provide alternate content Transcript (for audio) Captions (for video) Text format 12
13.
Copyright © Terry
Felke-Morris WHAT IS ADOBE FLASH? A popular multimedia application Create multimedia which adds visual interest and interactivity to web pages Flash movies are saved in “.swf” files Perception of speedy display .swf files play as they download Flash Player Free browser plug-in Widely installed on browsers 13
14.
Copyright © Terry
Felke-Morris ADDING FLASH TO A WEB PAGE <OBJECT> & <PARAM /> TAGS <object … object attributes go here…. <param name="movie" …value attribute goes here… /> <param name="quality" …value attribute goes here… /> <param name="bgcolor" …value attribute goes here… /> … a brief description of the Flash media can go here along with a link to alternate text content if appropriate… </object> 14
15.
Copyright © Terry
Felke-Morris FLASH DETAIL SAMPLE <object type="application/x-shockwave-flash" data="flashlogo.swf" width="300" height="70" title="Add a little Flash to your web page"> <param name="movie" value="flashlogo.swf" /> <param name="bgcolor" value="#ffffff" /> <param name="quality" value="high" /> <p>Add a little Flash to your web page</p> </object> 15
16.
Copyright © Terry
Felke-Morris HTML5 EMBED ELEMENT <embed type="application/x-shockwave-flash" src="fall5.swf" width="640" height="100" quality="high” title="Fall Nature Hikes"> 16
17.
Copyright © Terry
Felke-Morris CHECKPOINT 1. List three common web browser plug-ins and describe their use. 2. Describe issues involved with adding media such as audio or video to a web page. 3. Describe a disadvantage of using Flash on a web page. 17
18.
Copyright © Terry
Felke-Morris HTML5 AUDIO & SOURCE ELEMENTS <audio controls="controls"> <source src="soundloop.mp3" type="audio/mpeg"> <source src="soundloop.ogg" type="audio/ogg"> <a href="soundloop.mp3">Download the Audio File</a> (MP3) </audio> 18
19.
Copyright © Terry
Felke-Morris HTML5VIDEO & SOURCE ELEMENTS <video controls="controls" poster="sparky.jpg" width="160" height="150"> <source src="sparky.m4v" type="video/mp4"> <source src="sparky.ogv" type="video/ogg"> <a href="sparky.mov">Sparky the Dog</a> (.mov) </video> 19
20.
Copyright © Terry
Felke-Morris WHAT IS JAVA? Object Oriented Programming (OOP) Developed by Sun Microsystems Java is not the same language as JavaScript. Java is more powerful and much more flexible than JavaScript. Java can be used to: develop stand-alone executable applications applets that are invoked by Web pages. 20
21.
Copyright © Terry
Felke-Morris JAVA APPLETS Compiled -- translated from the English-like Java statements to an encoded form called Byte Code. Use the “.class” file extension JavaVirtual Machine (JVM) interprets the byte code into the proper machine language for the operating system After translation, the applet is executed and appears on theWeb page. 21
22.
Copyright © Terry
Felke-Morris ADDING A JAVA APPLET TO A WEB PAGE OBSOLETE: the applet element HTML5: the object element <object type="application/x-java-applet" width="610" height="30" title="This Java Applet displays a message that describes what Java Applets can be used for."> <param name="code" value="fader26.class"> <param name="AppletHome" value="http://www.crosswinds.net/~fader/"> <param name="Data" value="message.txt"> <param name="bgColor" value="#FFFFFF"> Java Applets can be used to display text, manipulate graphics, play games, and more. Visit <a href="http://download.oracle.com/javase/tutorial/">Oracle</a> for more information. </object> 22
23.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe a benefit of using the new HTML5 video and audio elements. 2. Describe the purpose of the transform property. 3. Describe a disadvantage of using Java applets on web pages. 23
24.
Copyright © Terry
Felke-Morris 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> The key CSS: #gallery span { display: none; } #gallery a:hover span { display: block; position: absolute; top: 10px; left: 300px; text-align: center; } 24
25.
Copyright © Terry
Felke-Morris CSS3 TRANSFORM PROPERTY Allows you to rotate, scale, skew, or move an element Example: -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); 25
26.
Copyright © Terry
Felke-Morris CSS3 TRANSITION PROPERTY Provides for changes in property values to display in a smoother manner over a specified time. Example: background-color: #cccccc; -webkit-transition: background-color 1s ease-in; -moz-transition: background-color 1s ease-in; -o-transition: background-color 1s ease-in; transition: background-color 1s ease-in; 26
27.
Copyright © Terry
Felke-Morris CHECKPOINT 11.2 1. Describe two uses of Flash on web pages. 2. Describe two uses of Java applets on web pages. 3. Describe two disadvantages of using interactive technologies such as Flash and Java applets on web pages. 27
28.
Copyright © Terry
Felke-Morris WHAT IS JAVASCRIPT? Object-based scripting language Manipulates the objects associated with a Web page document: the window the document the elements such as forms, images, hyperlinks, and so on 28
29.
Copyright © Terry
Felke-Morris WHAT IS JAVASCRIPT? (2) Originally developed by Netscape and called LiveScript Renamed JavaScript after Netscape collaborated with Sun Microsystems on modifications to the language JavaScript is NOT Java 29
30.
Copyright © Terry
Felke-Morris COMMON USES OF JAVASCRIPT Display a message box Select list navigation Edit and validate form information Create a new window with a specified size and screen position Image Rollovers Status Messages Display Current Date Calculations 30
31.
Copyright © Terry
Felke-Morris DOCUMENT OBJECT MODEL (DOM) A portion of the DOM is shown at the left. Defines every object and element on a Web page Hierarchical structure Accesses page elements and apply styles to page elements 31
32.
Copyright © Terry
Felke-Morris WHAT IS AJAX? Asynchronous JavaScript and XML “Ajax” – Jesse James Garrett at Adaptive Path Existing technologies used in a new way Standards-based XHTML and CSS Document Object Model XML (and the related XSLT technology) Asynchronous data retrieval using XMLHttpRequest JavaScript Very Basic Example: ◦ http://webdevfoundations.net/css 32
33.
Copyright © Terry
Felke-Morris WHERE IS AJAX USED? Flickr http://www.flickr.com Del.icio.us http://del.icio.us Google e-mail http:/google.com/gmail 33
34.
Copyright © Terry
Felke-Morris HTML5 CANVAS ELEMENT Configures dynamic graphics Draw lines, shapes, text, image Interact with actions taken by the user Canvas API (application programming interface) JavaScript – client-side scripting language 34 <script type="text/javascript"> function drawMe() { var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.font = "bold 3em Georgia"; ctx.fillText("My Canvas", 70, 100); ctx.fillStyle = "rgba(0, 0, 200, 0.50)"; ctx.fillRect (57, 54, 100, 65); } } </script>
35.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe two uses of JavaScript. 2. Describe two technologies used in Ajax. 3. Describe the purpose of the HTML5 canvas element. 35
36.
Copyright © Terry
Felke-Morris MULTIMEDIA & ACCESSIBILITY Provide links to plug-ins Provide text descriptions and captions Verify keyboard access Check for screen flickering Verify functionality if JavaScript is disabled If media is used for main navigation, provide plain text links 36
37.
Copyright © Terry
Felke-Morris SUMMARY This chapter introduced the HTML & 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. 37
Baixar agora