Introduction To Html 5
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Introduction To Html 5 as PDF for free.
More details
- Words: 2,400
- Pages: 110
Introduction to HTML 5 Brad Neuberg Developer Programs, Google
Wednesday, October 7, 2009
User Experience
The Web Platform is Accelerating
XHR CSS DOM HTML
Safari 4.0b: Feb 29, 2009 canvas iPhone 2.2: video Nov 22, 2008 app cache canvas database app cache workers database SVG SVG
Opera Labs: Mar 26, 2009 canvas video geolocation SVG
Chrome 2.0: May 21, 2009 canvas Firefox 3.5b4: video Apr 27, 2009 geolocation canvas app cache video database geolocation workers app cache SVG Android 1.5: database Apr 13, 2009 workers canvas SVG geolocation app cache database workers
native
1990 -- 2008 Q408 Wednesday, October 7, 2009
Q109
Q209
web
...
And It’s Solving Key Developer Challenges
User Experience
Graphics
Location
Storage
Speed
XHR CSS DOM HTML
native
1990 -- 2008 Q408 Wednesday, October 7, 2009
Q109
Q209
web
...
More Developers
Monthly Contributors to OSS Browsers
300
225
chrome firefox 3.1+ firefox 2.0-3.0 webkit
150
75
0
Wednesday, October 7, 2009
2002
2003
2004
2005
2006
2007
2008
2009
More Users
OSS Browser Users (M)
450
350
250
150
50
Wednesday, October 7, 2009
2005
2006
2007
2008
2009
More Speed
SunSpider Runs Per Minute
80
60
100x improvement in JavaScript performance 40
20
0
Wednesday, October 7, 2009
2001
2003
2005
2007
Q108
Q208
Q308
Q408
Q109
A More Powerful Web
5>4 Wednesday, October 7, 2009
Cautionary Tales of Latent Lemonade
AJAX (2004) xml (1998)
css (1996)
Wednesday, October 7, 2009
xhr (1999)
HTML 5: A Chance to Do Things Differently
Wednesday, October 7, 2009
canvas/SVG
Wednesday, October 7, 2009
video
geolocation
app cache & database
web workers
Until Recently, You Couldn’t Draw on the Web 0 0
X y
height
x
Y
Wednesday, October 7, 2009
width
And Graphics Weren’t Very Interactive
javascript:onClick(Draw()); Wednesday, October 7, 2009
The Usual Options Do This... Silverlight VML
Wednesday, October 7, 2009
Flash
... But canvas and SVG Are Intrinsic to the Web
Transparent Stack
DOM
HTML
HTTP
Wednesday, October 7, 2009
Document Object Model (DOM) Specification Original: http://www.w3.org/TR/REC-DOM-Level-1/ Latest: http://www.w3.org/TR/DOM-Level-3-Core/ Contributors: Netscape, Sun, Microsoft, W3C, IBM, Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel Research, Arbortext Hypertext Markup Language (HTML) Original: http://tools.ietf.org/html/rfc1866 Latest: http://www.w3.org/TR/html5/ Contributors: T. Berners-Lee, D. Connolly, L. Masinter, MIT, W3C, AT&T, IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass, Adobe, Lotus, CWI, Reuters, JavaSoft, HP, GRIF, Sun, Opera, Mozilla, Google, Apple Hypertext Transfer Protocol (HTTP) Original: http://tools.ietf.org/html/rfc1945 Latest: http://tools.ietf.org/html/rfc2616 Contributors: UC Urvine, Compaq, MIT, Xerox, Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
<svg width="200" height="200">
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect');
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect'); rect.style.fill = 'green';
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); }
16
Wednesday, October 7, 2009
Scalable Vector Graphics
17
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag")
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag")
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas');
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)";
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); 18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); 18
Wednesday, October 7, 2009
• Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • Bespin (Safari) • German Election Atlas (Safari)
canvas and SVG demos
Wednesday, October 7, 2009
When Canvas or SVG?
20
Wednesday, October 7, 2009
When Canvas or SVG?
SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects
20
Wednesday, October 7, 2009
When Canvas or SVG?
SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects
20
Wednesday, October 7, 2009
Canvas -> Low level –No mouse interaction –High Animation –JS Centric –More Bookkeeping –Pixels
HTML 5 Support Chrome canvas/SVG
video
geolocation
app cache
database
workers
Wednesday, October 7, 2009
Firefox
Safari
Opera
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
Wednesday, October 7, 2009
canvas/SVG
Wednesday, October 7, 2009
video
geolocation
app cache & database
web workers
Video is Complicated, and Outside Your Control
Wednesday, October 7, 2009
// HTML 5 makes
Wednesday, October 7, 2009
User Experience
The Web Platform is Accelerating
XHR CSS DOM HTML
Safari 4.0b: Feb 29, 2009 canvas iPhone 2.2: video Nov 22, 2008 app cache canvas database app cache workers database SVG SVG
Opera Labs: Mar 26, 2009 canvas video geolocation SVG
Chrome 2.0: May 21, 2009 canvas Firefox 3.5b4: video Apr 27, 2009 geolocation canvas app cache video database geolocation workers app cache SVG Android 1.5: database Apr 13, 2009 workers canvas SVG geolocation app cache database workers
native
1990 -- 2008 Q408 Wednesday, October 7, 2009
Q109
Q209
web
...
And It’s Solving Key Developer Challenges
User Experience
Graphics
Location
Storage
Speed
XHR CSS DOM HTML
native
1990 -- 2008 Q408 Wednesday, October 7, 2009
Q109
Q209
web
...
More Developers
Monthly Contributors to OSS Browsers
300
225
chrome firefox 3.1+ firefox 2.0-3.0 webkit
150
75
0
Wednesday, October 7, 2009
2002
2003
2004
2005
2006
2007
2008
2009
More Users
OSS Browser Users (M)
450
350
250
150
50
Wednesday, October 7, 2009
2005
2006
2007
2008
2009
More Speed
SunSpider Runs Per Minute
80
60
100x improvement in JavaScript performance 40
20
0
Wednesday, October 7, 2009
2001
2003
2005
2007
Q108
Q208
Q308
Q408
Q109
A More Powerful Web
5>4 Wednesday, October 7, 2009
Cautionary Tales of Latent Lemonade
AJAX (2004) xml (1998)
css (1996)
Wednesday, October 7, 2009
xhr (1999)
HTML 5: A Chance to Do Things Differently
Wednesday, October 7, 2009
canvas/SVG
Wednesday, October 7, 2009
video
geolocation
app cache & database
web workers
Until Recently, You Couldn’t Draw on the Web 0 0
X y
height
x
Y
Wednesday, October 7, 2009
width
And Graphics Weren’t Very Interactive
javascript:onClick(Draw()); Wednesday, October 7, 2009
The Usual Options Do This... Silverlight VML
Wednesday, October 7, 2009
Flash
... But canvas and SVG Are Intrinsic to the Web
Transparent Stack
DOM
HTML
HTTP
Wednesday, October 7, 2009
Document Object Model (DOM) Specification Original: http://www.w3.org/TR/REC-DOM-Level-1/ Latest: http://www.w3.org/TR/DOM-Level-3-Core/ Contributors: Netscape, Sun, Microsoft, W3C, IBM, Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel Research, Arbortext Hypertext Markup Language (HTML) Original: http://tools.ietf.org/html/rfc1866 Latest: http://www.w3.org/TR/html5/ Contributors: T. Berners-Lee, D. Connolly, L. Masinter, MIT, W3C, AT&T, IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass, Adobe, Lotus, CWI, Reuters, JavaSoft, HP, GRIF, Sun, Opera, Mozilla, Google, Apple Hypertext Transfer Protocol (HTTP) Original: http://tools.ietf.org/html/rfc1945 Latest: http://tools.ietf.org/html/rfc2616 Contributors: UC Urvine, Compaq, MIT, Xerox, Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing
15
<svg width="200" height="200">
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect');
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect'); rect.style.fill = 'green';
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); }
16
Wednesday, October 7, 2009
Scalable Vector Graphics
17
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag")
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag")
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas');
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)";
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); 18
Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); 18
Wednesday, October 7, 2009
• Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • Bespin (Safari) • German Election Atlas (Safari)
canvas and SVG demos
Wednesday, October 7, 2009
When Canvas or SVG?
20
Wednesday, October 7, 2009
When Canvas or SVG?
SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects
20
Wednesday, October 7, 2009
When Canvas or SVG?
SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects
20
Wednesday, October 7, 2009
Canvas -> Low level –No mouse interaction –High Animation –JS Centric –More Bookkeeping –Pixels
HTML 5 Support Chrome canvas/SVG
video
geolocation
app cache
database
workers
Wednesday, October 7, 2009
Firefox
Safari
Opera
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
Wednesday, October 7, 2009
canvas/SVG
Wednesday, October 7, 2009
video
geolocation
app cache & database
web workers
Video is Complicated, and Outside Your Control
Wednesday, October 7, 2009
// HTML 5 makes
Related Documents
Introduction To Html 5
June 2020 4
Introduction To Html
November 2019 22
Introduction To Html
December 2019 20
Introduction To 5 Why.docx
November 2019 29
Introduction To Cfx-5
June 2020 3