THE Tutorial OF HTML5 BY GOOGLE

1. Introduction to HTML 5
Brad Neuberg
Developer Programs, Google
Wednesday, October 7, 2009

2. The Web Platform is Accelerating
Chrome 2.0:
May 21, 2009
canvas
User Experience
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
Opera Labs: geolocation
Mar 26, 2009 app cache
Safari 4.0b:
canvas database
Feb 29, 2009
video workers
canvas
XHR iPhone 2.2: video geolocation
Nov 22, 2008 app cache SVG
CSS
DOM canvas database
app cache workers
HTML
database SVG
SVG
native web
1990 -- 2008 Q408 Q109 Q209 ...
Wednesday, October 7, 2009

3. And It’s Solving Key Developer Challenges
Graphics Location Storage Speed
User Experience
XHR
CSS
DOM
HTML
native web
1990 -- 2008 Q408 Q109 Q209 ...
Wednesday, October 7, 2009

4. More Developers
300
chrome
firefox 3.1+
Monthly Contributors to OSS Browsers
firefox 2.0-3.0
webkit
225
150
75
0
2002 2003 2004 2005 2006 2007 2008 2009
Wednesday, October 7, 2009

5. More Users
450
350
OSS Browser Users (M)
250
150
50
2005 2006 2007 2008 2009
Wednesday, October 7, 2009

6. More Speed
80
SunSpider Runs Per Minute
60
100x improvement
in JavaScript performance
40
20
0
2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109
Wednesday, October 7, 2009

7. A More Powerful Web
5>4
Wednesday, October 7, 2009

8. Cautionary Tales of Latent Lemonade
AJAX (2004)
xml (1998)
css xhr
(1996) (1999)
Wednesday, October 7, 2009

9. HTML 5: A Chance to Do Things Differently
Wednesday, October 7, 2009

10. canvas/SVG video geolocation app cache & web workers
database
Wednesday, October 7, 2009

11. Until Recently, You Couldn’t Draw on the Web
0
0 X
y
x
height
Y width
Wednesday, October 7, 2009

12. And Graphics Weren’t Very Interactive
javascript:onClick(Draw());
Wednesday, October 7, 2009

13. The Usual Options Do This...
Silverlight
VML
Flash
Wednesday, October 7, 2009

14. ... But canvas and SVG Are Intrinsic to the Web
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,
DOM Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel
Research, Arbortext
Transparent Stack
Hypertext Markup Language (HTML)
Original: http://tools.ietf.org/html/rfc1866
Latest: http://www.w3.org/TR/html5/
HTML 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,
HTTP Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys,
J. Mogul, H. Frystyk, L. Masinter, P. Leach
Wednesday, October 7, 2009

15. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
Wednesday, October 7, 2009

16. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
15
Wednesday, October 7, 2009

17. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
15
Wednesday, October 7, 2009

18. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
width="100" height="100"
15
Wednesday, October 7, 2009

19. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
15
Wednesday, October 7, 2009

20. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
15
Wednesday, October 7, 2009

21. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
15
Wednesday, October 7, 2009

22. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
15
Wednesday, October 7, 2009

23. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
15
Wednesday, October 7, 2009

24. Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
15
</html>
Wednesday, October 7, 2009

25. Scalable Vector Graphics (SVG)
16
Wednesday, October 7, 2009

26. Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect');
16
Wednesday, October 7, 2009

27. Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect');
rect.style.fill = 'green';
16
Wednesday, October 7, 2009

28. Scalable Vector Graphics (SVG)
var rect = document.getElementById('myRect');
rect.style.fill = 'green';
rect.onclick = function() { alert('hello'); }
16
Wednesday, October 7, 2009

29. Scalable Vector Graphics
17
Wednesday, October 7, 2009

30. Canvas API
• JavaScript API ("Scriptable Image Tag")
18
Wednesday, October 7, 2009

31. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
18
Wednesday, October 7, 2009

32. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
var canvas = document.getElementById('myCanvas');
18
Wednesday, October 7, 2009

33. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
18
Wednesday, October 7, 2009

34. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
18
Wednesday, October 7, 2009

35. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
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

36. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
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

37. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
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

38. Canvas API
• JavaScript API ("Scriptable Image Tag")
<canvas id="myCanvas" width="150" height="150">
</canvas>
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

39. • 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

40. When Canvas or SVG?
20
Wednesday, October 7, 2009

41. When Canvas or SVG?
SVG -> High level
–Import/Export
–Easy UIs
–Interactive
–Medium Animation
–Tree of objects
20
Wednesday, October 7, 2009

42. When Canvas or SVG?
SVG -> High level Canvas -> Low level
–Import/Export –No mouse interaction
–Easy UIs –High Animation
–Interactive –JS Centric
–Medium Animation –More Bookkeeping
–Tree of objects –Pixels
20
Wednesday, October 7, 2009

43. HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
Wednesday, October 7, 2009

44. http://tinyurl.com/mbw73x
Wednesday, October 7, 2009

45. http://tinyurl.com/mbw73x
Wednesday, October 7, 2009

46. Wednesday, October 7, 2009

47. canvas/SVG video geolocation app cache & web workers
database
Wednesday, October 7, 2009

48. Video is Complicated, and Outside Your Control
Wednesday, October 7, 2009

49. // HTML 5 makes
<video> as easy
as <img>
Wednesday, October 7, 2009

50. Embedding Video
27
Wednesday, October 7, 2009

51. Embedding Video
<video src="http://example.com/myMovie.ogg" controls>
27
Wednesday, October 7, 2009

52. Embedding Video
<video src="http://example.com/myMovie.ogg" controls>
Your browser does not support the video element.
27
Wednesday, October 7, 2009

53. Embedding Video
<video src="http://example.com/myMovie.ogg" controls>
Your browser does not support the video element.
</video>
27
Wednesday, October 7, 2009

54. Multiple Files & Scripting
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
Your browser does not support the video element.
</video>
28
Wednesday, October 7, 2009

55. Multiple Files & Scripting
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
Your browser does not support the video element.
</video>
var v = document.getElementsByTagName("video")[0];
v.play();
28
Wednesday, October 7, 2009

56. • Basic Player (FF 3.5)
• YouTube (Safari 4) - View Source
<video> demos
Wednesday, October 7, 2009

57. HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
Wednesday, October 7, 2009

58. canvas/SVG video geolocation app cache & web workers
database
Wednesday, October 7, 2009

59. Life’s Better with Location
2.8 mi
Places
Social Ads Games
CRM Photos
2.1 mi
1.1 mi
500 ft
20 ft
75 ft
Wednesday, October 7, 2009

60. ...And Browsers Are Now Location-Enabled
Wednesday, October 7, 2009

61. // the
geolocation api
brings browser-
based location
to your apps
Wednesday, October 7, 2009

62. Geolocation Sample
35
Wednesday, October 7, 2009

63. Geolocation Sample
navigator.geolocation.getCurrentPosition(
35
Wednesday, October 7, 2009

64. Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
35
Wednesday, October 7, 2009

65. Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
35
Wednesday, October 7, 2009

66. Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
35
Wednesday, October 7, 2009

67. Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat, lon);
35
Wednesday, October 7, 2009

68. Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat, lon);
}
35
Wednesday, October 7, 2009

69. Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat, lon);
}
);
35
Wednesday, October 7, 2009

70. • Google Maps (FF 3.5)
geolocation demos
Wednesday, October 7, 2009

71. HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
(iPhone)
app cache
database
workers
Wednesday, October 7, 2009

72. canvas/SVG video geolocation app cache & web workers
database
Wednesday, October 7, 2009

73. Web Apps Need to Work Everywhere
Wednesday, October 7, 2009

74. // database and
app cache store
user data and
app resources
locally
Wednesday, October 7, 2009

75. • Sticky Notes Demo (Safari 4)
app cache & database demos
Wednesday, October 7, 2009

76. App Cache
• List resources that you want to take offline
CACHE MANIFEST
/static/stickies.html
/media/deleteButton.png
/media/deleteButtonPressed.png
/css/stickies.css
/js/stickies.js
42
Wednesday, October 7, 2009

77. App Cache
• List resources that you want to take offline
CACHE MANIFEST
/static/stickies.html
/media/deleteButton.png
/media/deleteButtonPressed.png
/css/stickies.css
/js/stickies.js
<body manifest="./cache.manifest">
</body>
42
Wednesday, October 7, 2009

78. Database
Wednesday, October 7, 2009

79. Database
44
Wednesday, October 7, 2009

80. Database
var db = window.openDatabase("NoteTest", "1.0",
44
Wednesday, October 7, 2009

81. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
44
Wednesday, October 7, 2009

82. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
44
Wednesday, October 7, 2009

83. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
44
Wednesday, October 7, 2009

84. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
44
Wednesday, October 7, 2009

85. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
44
Wednesday, October 7, 2009

86. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
44
Wednesday, October 7, 2009

87. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
44
Wednesday, October 7, 2009

88. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
44
Wednesday, October 7, 2009

89. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
44
Wednesday, October 7, 2009

90. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
44
Wednesday, October 7, 2009

91. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
}
44
Wednesday, October 7, 2009

92. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
}
);
44
Wednesday, October 7, 2009

93. Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
}
);
}
44
Wednesday, October 7, 2009

94. HTML 5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers
Wednesday, October 7, 2009

95. canvas/SVG video geolocation app cache & web workers
database
Wednesday, October 7, 2009

96. A More Powerful Web == More Powerful Apps
Wednesday, October 7, 2009

97. But More Power == More Responsibility
I will not hose the browser with JavaScript
I will not hose the browser with JavaScript
I will not hose the browser with JavaScript
I will not hose the browser with JavaScript
I will not hose the browser with JavaScript
I will not hose the browser with JavaScript
Wednesday, October 7, 2009

98. // web workers
defines an API
for running
background
scripts
Wednesday, October 7, 2009

99. • Bad Primes (FF 3.5)
• Good Primes (FF 3.5)
• Motion Tracker (FF)
web workers demos
Wednesday, October 7, 2009

100. Web Workers
51
Wednesday, October 7, 2009

101. Web Workers
<script>
51
Wednesday, October 7, 2009

102. Web Workers
<script>
var worker = new Worker('worker.js');
51
Wednesday, October 7, 2009

103. Web Workers
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
51
Wednesday, October 7, 2009

104. Web Workers
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
console.log('Results: ' + event.data);
51
Wednesday, October 7, 2009

105. Web Workers
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
console.log('Results: ' + event.data);
};
51
Wednesday, October 7, 2009

106. Web Workers
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
console.log('Results: ' + event.data);
};
</script>
51
Wednesday, October 7, 2009

107. worker.js
function findPrimes() {
// ... prime algorithm here
postMessage(nextPrime);
}
findPrimes();
52
Wednesday, October 7, 2009

108. HTML5 Support
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers
(mobile)
Wednesday, October 7, 2009

109. Download Slides
• http://codinginparadise.org/presentations/intro_html5.pdf
54
Wednesday, October 7, 2009

110. Introduction to HTML 5
Brad Neuberg
Developer Programs, Google
Wednesday, October 7, 2009