Suche senden
Hochladen
Chapter11
•
Als PPT, PDF herunterladen
•
0 gefällt mir
•
172 views
DeAnna Gossett
Folgen
Web Development & Design
Weniger lesen
Mehr lesen
Internet
Melden
Teilen
Melden
Teilen
1 von 36
Jetzt herunterladen
Empfohlen
Chapter5
Chapter5
DeAnna Gossett
Chapter13
Chapter13
DeAnna Gossett
Chapter7
Chapter7
DeAnna Gossett
Chapter3
Chapter3
DeAnna Gossett
Chapter4
Chapter4
DeAnna Gossett
Chapter10
Chapter10
DeAnna Gossett
Chapter2
Chapter2
DeAnna Gossett
Chapter1
Chapter1
DeAnna Gossett
Empfohlen
Chapter5
Chapter5
DeAnna Gossett
Chapter13
Chapter13
DeAnna Gossett
Chapter7
Chapter7
DeAnna Gossett
Chapter3
Chapter3
DeAnna Gossett
Chapter4
Chapter4
DeAnna Gossett
Chapter10
Chapter10
DeAnna Gossett
Chapter2
Chapter2
DeAnna Gossett
Chapter1
Chapter1
DeAnna Gossett
Chapter6
Chapter6
DeAnna Gossett
Chapter14
Chapter14
DeAnna Gossett
Chapter9
Chapter9
DeAnna Gossett
Chapter8
Chapter8
DeAnna Gossett
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter12
Chapter12
DeAnna Gossett
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Html5
Html5
Bukhtawar Umbreen
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
Wahyu Putra
An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
HTML5 CSS3 Basics
HTML5 CSS3 Basics
Srinivas Tamada
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
Wahyu Putra
How websites and search engines work
How websites and search engines work
Brian Duffy
Introduction to html 5
Introduction to html 5
Sayed Ahmed
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
RZasadzinski
Flash media technology
Flash media technology
Michael Dabydeen
Weitere ähnliche Inhalte
Was ist angesagt?
Chapter6
Chapter6
DeAnna Gossett
Chapter14
Chapter14
DeAnna Gossett
Chapter9
Chapter9
DeAnna Gossett
Chapter8
Chapter8
DeAnna Gossett
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter12
Chapter12
DeAnna Gossett
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Html5
Html5
Bukhtawar Umbreen
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
Wahyu Putra
An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
HTML5 CSS3 Basics
HTML5 CSS3 Basics
Srinivas Tamada
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
Wahyu Putra
How websites and search engines work
How websites and search engines work
Brian Duffy
Introduction to html 5
Introduction to html 5
Sayed Ahmed
Was ist angesagt?
(20)
Chapter6
Chapter6
Chapter14
Chapter14
Chapter9
Chapter9
Chapter8
Chapter8
Chapter 11 - Web Design
Chapter 11 - Web Design
Chapter12
Chapter12
Chapter 10 - Web Design
Chapter 10 - Web Design
Chapter 13 - Web Design
Chapter 13 - Web Design
Html5
Html5
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Chapter 14 - Web Design
Chapter 14 - Web Design
HTML5 & CSS3
HTML5 & CSS3
An Introduction to HTML5
An Introduction to HTML5
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
An Introduction To HTML5
An Introduction To HTML5
HTML5 CSS3 Basics
HTML5 CSS3 Basics
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
How websites and search engines work
How websites and search engines work
Introduction to html 5
Introduction to html 5
Ähnlich wie Chapter11
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
RZasadzinski
Flash media technology
Flash media technology
Michael Dabydeen
Html5 Application Security
Html5 Application Security
chuckbt
Introduction to web page
Introduction to web page
Mahmoud Shaqria
Internet
Internet
Ayebazibwe Kenneth
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
robinzimmermann
Apache Flex and the imperfect Web
Apache Flex and the imperfect Web
masuland
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
brucelawson
A R T D M171 Week14 Multimedia
A R T D M171 Week14 Multimedia
Gilbert Guerrero
Flex Introduction
Flex Introduction
senthil0809
Peter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-apps
Skills Matter
HTML5 Presentation
HTML5 Presentation
vs4vijay
9 10 july2020
9 10 july2020
PreetiSaini55
Flash Development Guide
Flash Development Guide
Stanley Fok
Arcomem training Specifying Crawls Advanced
Arcomem training Specifying Crawls Advanced
arcomem
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
Gennady Feldman
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
02 intro
02 intro
babak mehrabi
Technology And Life
Technology And Life
Sunil Swain
Technology And Life
Technology And Life
Sunil Swain
Ähnlich wie Chapter11
(20)
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
Flash media technology
Flash media technology
Html5 Application Security
Html5 Application Security
Introduction to web page
Introduction to web page
Internet
Internet
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
Apache Flex and the imperfect Web
Apache Flex and the imperfect Web
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
A R T D M171 Week14 Multimedia
A R T D M171 Week14 Multimedia
Flex Introduction
Flex Introduction
Peter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-apps
HTML5 Presentation
HTML5 Presentation
9 10 july2020
9 10 july2020
Flash Development Guide
Flash Development Guide
Arcomem training Specifying Crawls Advanced
Arcomem training Specifying Crawls Advanced
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
02 intro
02 intro
Technology And Life
Technology And Life
Technology And Life
Technology And Life
Mehr von DeAnna Gossett
Elet5e ch01
Elet5e ch01
DeAnna Gossett
Elet5e ch20
Elet5e ch20
DeAnna Gossett
Elet5e ch19
Elet5e ch19
DeAnna Gossett
Elet5e ch18
Elet5e ch18
DeAnna Gossett
Elet5e ch17
Elet5e ch17
DeAnna Gossett
Elet5e ch16
Elet5e ch16
DeAnna Gossett
Elet5e ch15
Elet5e ch15
DeAnna Gossett
Elet5e ch14
Elet5e ch14
DeAnna Gossett
Elet5e ch13
Elet5e ch13
DeAnna Gossett
Elet5e ch12
Elet5e ch12
DeAnna Gossett
Elet5e ch11
Elet5e ch11
DeAnna Gossett
Elet5e ch10
Elet5e ch10
DeAnna Gossett
Elet5e ch09
Elet5e ch09
DeAnna Gossett
Elet5e ch08
Elet5e ch08
DeAnna Gossett
Elet5e ch07
Elet5e ch07
DeAnna Gossett
Elet5e ch06
Elet5e ch06
DeAnna Gossett
Elet5e ch05
Elet5e ch05
DeAnna Gossett
Mehr von DeAnna Gossett
(17)
Elet5e ch01
Elet5e ch01
Elet5e ch20
Elet5e ch20
Elet5e ch19
Elet5e ch19
Elet5e ch18
Elet5e ch18
Elet5e ch17
Elet5e ch17
Elet5e ch16
Elet5e ch16
Elet5e ch15
Elet5e ch15
Elet5e ch14
Elet5e ch14
Elet5e ch13
Elet5e ch13
Elet5e ch12
Elet5e ch12
Elet5e ch11
Elet5e ch11
Elet5e ch10
Elet5e ch10
Elet5e ch09
Elet5e ch09
Elet5e ch08
Elet5e ch08
Elet5e ch07
Elet5e ch07
Elet5e ch06
Elet5e ch06
Elet5e ch05
Elet5e ch05
Kürzlich hochgeladen
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
soniya singh
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
imonikaupta
VIP 7001035870 Find & Meet Hyderabad Call Girls LB Nagar high-profile Call Girl
VIP 7001035870 Find & Meet Hyderabad Call Girls LB Nagar high-profile Call Girl
aditipandeya
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
Call Girls Mumbai
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Delhi Call girls
10.pdfMature Call girls in Dubai +971563133746 Dubai Call girls
10.pdfMature Call girls in Dubai +971563133746 Dubai Call girls
stephieert
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
Neha Pandey
FULL ENJOY Call Girls In Mayur Vihar Delhi Contact Us 8377087607
FULL ENJOY Call Girls In Mayur Vihar Delhi Contact Us 8377087607
dollysharma2066
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Call Girls in Nagpur High Profile
horny (9316020077 ) Goa Call Girls Service by VIP Call Girls in Goa
horny (9316020077 ) Goa Call Girls Service by VIP Call Girls in Goa
sexy call girls service in goa
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
ruhi
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
AlbaniaDreamin24 - How to easily use an API with Flows
AlbaniaDreamin24 - How to easily use an API with Flows
Thierry TROUIN ☁
Call Girls In South Ex 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In South Ex 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
James Anderson
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
Diya Sharma
Hot Service (+9316020077 ) Goa Call Girls Real Photos and Genuine Service
Hot Service (+9316020077 ) Goa Call Girls Real Photos and Genuine Service
sexy call girls service in goa
SEO Growth Program-Digital optimization Specialist
SEO Growth Program-Digital optimization Specialist
KHM Anwar
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
kumarajju5765
Call Girls in Mayur Vihar ✔️ 9711199171 ✔️ Delhi ✔️ Enjoy Call Girls With Our...
Call Girls in Mayur Vihar ✔️ 9711199171 ✔️ Delhi ✔️ Enjoy Call Girls With Our...
sonatiwari757
Kürzlich hochgeladen
(20)
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
VIP 7001035870 Find & Meet Hyderabad Call Girls LB Nagar high-profile Call Girl
VIP 7001035870 Find & Meet Hyderabad Call Girls LB Nagar high-profile Call Girl
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
10.pdfMature Call girls in Dubai +971563133746 Dubai Call girls
10.pdfMature Call girls in Dubai +971563133746 Dubai Call girls
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
FULL ENJOY Call Girls In Mayur Vihar Delhi Contact Us 8377087607
FULL ENJOY Call Girls In Mayur Vihar Delhi Contact Us 8377087607
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
horny (9316020077 ) Goa Call Girls Service by VIP Call Girls in Goa
horny (9316020077 ) Goa Call Girls Service by VIP Call Girls in Goa
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
Dwarka Sector 26 Call Girls | Delhi | 9999965857 🫦 Vanshika Verma More Our Se...
AlbaniaDreamin24 - How to easily use an API with Flows
AlbaniaDreamin24 - How to easily use an API with Flows
Call Girls In South Ex 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
Call Girls In South Ex 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SERVICE
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
Hot Service (+9316020077 ) Goa Call Girls Real Photos and Genuine Service
Hot Service (+9316020077 ) Goa Call Girls Real Photos and Genuine Service
SEO Growth Program-Digital optimization Specialist
SEO Growth Program-Digital optimization Specialist
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
Hot Call Girls |Delhi |Hauz Khas ☎ 9711199171 Book Your One night Stand
Call Girls in Mayur Vihar ✔️ 9711199171 ✔️ Delhi ✔️ Enjoy Call Girls With Our...
Call Girls in Mayur Vihar ✔️ 9711199171 ✔️ Delhi ✔️ Enjoy Call Girls With Our...
Chapter11
1.
Copyright © Terry
Felke-Morris http://terrymorris.net Web Development & Design Foundations with HTML5 8th Edition CHAPTER 11 KEY CONCEPTS 1
2.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 ◦ Configure audio and video on a web page with HTML5 elements ◦ Describe features and common uses of Adobe Flash, JavaScript, Java applets, Ajax, and jQuery ◦ 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 geolocation, web storage, offline web applications, and canvas HTML5 APIs. 2
3.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 http://terrymorris.net 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 ◦ISSUE: Browsers do not all support the same codecs ◦http://www.longtailvideo.com/html5/ 4
5.
Copyright © Terry
Felke-Morris http://terrymorris.net Commonly Used Plug-ins Adobe Flash Player Adobe Reader Windows Media Player Apple Quicktime 5
6.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 Ogg Vorbis (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 http://terrymorris.net Common Video File Types .mov Quicktime .avi Microsoft Audio Video Interleaved .wmv Windows Media File .flv Flash Video 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 http://terrymorris.net 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 http://terrymorris.net 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 http://terrymorris.net Multimedia & Accessibility Provide alternate content ◦Transcript (for audio) ◦Captions (for video) ◦Text format 10
11.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 desktop browsers but not well-supported by mobile devices 11
12.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 Embed Element <embed type="application/x-shockwave-flash" src="fall5.swf" width="640" height="100" quality="high” title="Fall Nature Hikes"> 12
13.
Copyright © Terry
Felke-Morris http://terrymorris.net 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. 13
14.
Copyright © Terry
Felke-Morris http://terrymorris.net 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> 14
15.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 Video & 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> 15
16.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 16
17.
Copyright © Terry
Felke-Morris http://terrymorris.net CSS3 Transform Property Allows you to rotate, scale, skew, or move an element Example: transform: rotate(3deg); 17
18.
Copyright © Terry
Felke-Morris http://terrymorris.net CSS3 Transition Property Provides for changes in property values to display in a smoother manner over a specified time. Example: nav a:hover { color: #869dc7; background-color: #eaeaea; transition: background-color 2s linear; } 18
19.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 { position: absolute; opacity: 0; transition: opacity 3s ease-in-out; left: -1000px; } #gallery a:hover span { position: absolute; top: 16px; left: 320px; text-align: center; } 19
20.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 http://terrymorris.net Java Applets Compiled -- translated from the English-like Java statements to an encoded form called Byte Code. Use the “.class” file extension Java Virtual Machine (JVM) ◦interprets the byte code into the proper machine language for the operating system ◦After translation, the applet is executed and appears on the Web page. 21
22.
Copyright © Terry
Felke-Morris http://terrymorris.net 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"> <param name="code" value="example.class"> <param name="textColor" value="#FF0000"> <param name="message" value="This is a Java Applet"> <param name="backColor" 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 http://terrymorris.net 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 http://terrymorris.net What is JavaScript? •Object-based client-side scripting language •Originally developed by Brendan Eich at Netscape • JavaScript is NOT Java •Manipulates the objects associated with a web page document: ◦the window ◦the document ◦the elements such as forms, images, hyperlinks, and so on 24
25.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 25
26.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 26
27.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 27
28.
Copyright © Terry
Felke-Morris http://terrymorris.net Exploring JQueryA JavaScript library intended to simplify client-side scripting Example: http://webdevfoundations.net/jquery API – Application Programming Interface ◦A protocol that allows software components to communicate – interacting and sharing data. The jQuery API can be used to configure many interactive features, including: ◦image slideshows ◦animation (moving, hiding, fading) ◦event handling (mouse movements and mouse clicking) ◦document manipulation ◦Ajax 28
29.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 APIs API – a protocol that allows software components to communicate – interacting and sharing data A variety of APIs that are intended to work with HTML5, CSS, and JavaScript are currently under development and in the W3C approval process, including: ◦geolocation ◦web storage ◦offline web applications ◦canvas 29
30.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 Geolocation Allows your web page visitors to share their geographic location Their location may be determined by the IP address, wireless network connection, local cell tower, or GPS hardware depending on the type of device and browser. JavaScript is used to work with the latitude and longitude coordinates provided by the browser. Examples: ◦http://webdevfoundations.net/geo and http://html5demos.com/geo 30
31.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 Web Storage Traditionally, the JavaScript cookie object has been used to store information in key-value pairs on the client (the website visitor’s computer). NEW FOR HTML5: Web Storage API ◦ provides two new ways to store information on the client side: local storage and session storage. ◦ Advantage: increase in the amount of data that can be stored (5MB per domain). ◦ The localStorage object stores data without an expiration date. ◦ The sessionStorage object stores data only for the duration of the current browser ◦ JavaScript is used to work with the values stored in the localStorage and sessionStorage objects. Examples: ◦ http://webdevfoundations.net/storage and http://html5demos.com/storage 31
32.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 Offline Web Applications An offline web application enables website visitors to view documents and access web applications even when they are not connected to the Internet. A web application (app) can be written with HTML, CSS and JavaScript and can run in any browser – as long as you are online. An offline web application takes this one step further and stores the HTML, CSS, and JavaScript files on the visitor’s device for use offline, even when the device is not connected to the Internet. Examples: ◦ http://html5demos.com/offlineapp ◦ http://www.w3schools.com/html/html5_app_cache.asp 32
33.
Copyright © Terry
Felke-Morris http://terrymorris.net HTML5 Canvas ElementConfigures dynamic graphics ◦ Draw lines, shapes, text, image ◦ Interact with actions taken by the user Canvas API (application programming interface) JavaScript – client-side scripting language 33 <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>
34.
Copyright © Terry
Felke-Morris http://terrymorris.net Checkpoint 1. Describe two uses of JavaScript. 2. Describe two technologies used in Ajax. 3. Describe the purpose of the HTML5 canvas element. 34
35.
Copyright © Terry
Felke-Morris http://terrymorris.net 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 35
36.
Copyright © Terry
Felke-Morris http://terrymorris.net 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. 36
Jetzt herunterladen