TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Google html5 Tutorial
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
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
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
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
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
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
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
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