html5
DESCRIPTION
Google 2010 IOHtml5 IntroductionTRANSCRIPT
Introduction to HTML 5Brad NeubergDeveloper Programs, Google
Wednesday, October 7, 2009
The Web Platform is AcceleratingU
ser E
xper
ienc
e
native web
1990 -- 2008 Q408 Q109 Q209 ...
iPhone 2.2:Nov 22, 2008canvasapp cachedatabaseSVG
Safari 4.0b:Feb 29, 2009canvasvideoapp cachedatabaseworkersSVG
HTML
DOMCSS
XHR
Opera Labs:Mar 26, 2009canvasvideogeolocationSVG
Android 1.5:Apr 13, 2009canvasgeolocationapp cachedatabaseworkers
Firefox 3.5b4:Apr 27, 2009canvasvideogeolocationapp cachedatabaseworkersSVG
Chrome 2.0:May 21, 2009canvasvideogeolocationapp cachedatabaseworkersSVG
Wednesday, October 7, 2009
And It’s Solving Key Developer ChallengesU
ser E
xper
ienc
e
native web
HTML
DOMCSS
XHR
SpeedLocationGraphics Storage
1990 -- 2008 Q408 Q109 Q209 ...
Wednesday, October 7, 2009
More Developers
0
75
150
225
300
Mon
thly
Con
tribu
tors
to O
SS
Bro
wse
rs
2002 2003 2004 2005 2006 2007 2008 2009
webkitfirefox 2.0-3.0firefox 3.1+chrome
Wednesday, October 7, 2009
More Users
50
150
250
350
450
OS
S B
row
ser U
sers
(M)
2005 2006 2007 2008 2009
Wednesday, October 7, 2009
More Speed
0
20
40
60
80
Sun
Spi
der R
uns
Per
Min
ute
2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109
100x improvementin JavaScript performance
Wednesday, October 7, 2009
5>4A More Powerful Web
Wednesday, October 7, 2009
Cautionary Tales of Latent Lemonade
xhr(1999)
xml (1998)
css(1996)
AJAX (2004)
Wednesday, October 7, 2009
HTML 5: A Chance to Do Things Differently
Wednesday, October 7, 2009
canvas/SVG video geolocation app cache &database
web workers
Wednesday, October 7, 2009
00
width
heig
ht
Y
x
y
X
Until Recently, You Couldn’t Draw on the Web
Wednesday, October 7, 2009
And Graphics Weren’t Very Interactive
javascript:onClick(Draw());
Wednesday, October 7, 2009
The Usual Options Do This...
VMLFlash
Silverlight
Wednesday, October 7, 2009
... But canvas and SVG Are Intrinsic to the WebTr
ansp
aren
t Sta
ck
DOM
Document Object Model (DOM) SpecificationOriginal: 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/rfc1945Latest: http://tools.ietf.org/html/rfc2616Contributors: UC Urvine, Compaq, MIT, Xerox, Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach
HTTP
HTML
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
<rect
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0"
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100"
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red"
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px"
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8"
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" />
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" />
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<!DOCTYPE html><html><body><svg width="200" height="200">
</svg></body></html>
<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" />
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
16
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
16
var rect = document.getElementById('myRect');
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
16
var rect = document.getElementById('myRect');rect.style.fill = 'green';
Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
16
var rect = document.getElementById('myRect');rect.style.fill = 'green';rect.onclick = function() { alert('hello'); }
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
<canvas id="myCanvas" width="150" height="150"></canvas>
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<canvas id="myCanvas" width="150" height="150"></canvas>
var canvas = document.getElementById('myCanvas');
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<canvas id="myCanvas" width="150" height="150"></canvas>
var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<canvas id="myCanvas" width="150" height="150"></canvas>
var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<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);
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<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)";
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<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);
Wednesday, October 7, 2009
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<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);
Wednesday, October 7, 2009
canvas and SVG demos
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• Bespin (Safari)
• German Election Atlas (Safari)
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
Canvas -> Low level–No mouse interaction–High Animation–JS Centric–More Bookkeeping–Pixels
Wednesday, October 7, 2009
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
Wednesday, October 7, 2009
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
Wednesday, October 7, 2009
videocanvas/SVG geolocation app cache &database
web workers
Wednesday, October 7, 2009
Video is Complicated, and Outside Your Control
Wednesday, October 7, 2009
// HTML 5 makes <video> as easy as <img>
Wednesday, October 7, 2009
Embedding Video
27
Wednesday, October 7, 2009
Embedding Video
27
<video src="http://example.com/myMovie.ogg" controls>
Wednesday, October 7, 2009
Embedding Video
27
<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element.
Wednesday, October 7, 2009
Embedding Video
27
<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video>
Wednesday, October 7, 2009
Multiple Files & Scripting
28
<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video>
Wednesday, October 7, 2009
Multiple Files & Scripting
28
<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();
Wednesday, October 7, 2009
<video> demos
• Basic Player (FF 3.5)
• YouTube (Safari 4) - View Source
Wednesday, October 7, 2009
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
Wednesday, October 7, 2009
geolocationcanvas/SVG video app cache &database
web workers
Wednesday, October 7, 2009
Life’s Better with Location
CRM Social Ads GamesPhotos
75 ft
20 ft
500 ft1.1 mi
2.1 mi
Places
2.8 mi
Wednesday, October 7, 2009
...And Browsers Are Now Location-Enabled
Wednesday, October 7, 2009
// the geolocation api brings browser-based location to your apps
Wednesday, October 7, 2009
Geolocation Sample
35
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition(
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) {
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude;
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude;
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon);
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); }
Wednesday, October 7, 2009
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); });
Wednesday, October 7, 2009
geolocation demos
• Google Maps (FF 3.5)
Wednesday, October 7, 2009
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
(iPhone)
Wednesday, October 7, 2009
app cache &database
canvas/SVG video geolocation web workers
Wednesday, October 7, 2009
Web Apps Need to Work Everywhere
Wednesday, October 7, 2009
// database and app cache store user data and app resources locally
Wednesday, October 7, 2009
app cache & database demos
• Sticky Notes Demo (Safari 4)
Wednesday, October 7, 2009
App Cache
• List resources that you want to take offline
42
CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js
Wednesday, October 7, 2009
App Cache
• List resources that you want to take offline
42
CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js
<body manifest="./cache.manifest"></body>
Wednesday, October 7, 2009
DatabaseWednesday, October 7, 2009
Database
44
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0",
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB",
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction(
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) {
Wednesday, October 7, 2009
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql(
Wednesday, October 7, 2009
Database
44
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 "
Wednesday, October 7, 2009
Database
44
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) "
Wednesday, October 7, 2009
Database
44
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 (?, ?, ?, ?, ?, ?)",
Wednesday, October 7, 2009
Database
44
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]);
Wednesday, October 7, 2009
Database
44
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]); }
Wednesday, October 7, 2009
Database
44
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]); } );
Wednesday, October 7, 2009
Database
44
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]); } );}
Wednesday, October 7, 2009
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
(mobile)
(mobile)
(iPhone)
Wednesday, October 7, 2009
web workerscanvas/SVG video geolocation app cache &database
Wednesday, October 7, 2009
A More Powerful Web == More Powerful Apps
Wednesday, October 7, 2009
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
// web workers defines an API for running background scripts
Wednesday, October 7, 2009
web workers demos
• Bad Primes (FF 3.5)
• Good Primes (FF 3.5)
• Motion Tracker (FF)
Wednesday, October 7, 2009
Web Workers
51
Wednesday, October 7, 2009
Web Workers
51
<script>
Wednesday, October 7, 2009
Web Workers
51
<script> var worker = new Worker('worker.js');
Wednesday, October 7, 2009
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) {
Wednesday, October 7, 2009
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data);
Wednesday, October 7, 2009
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); };
Wednesday, October 7, 2009
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); };</script>
Wednesday, October 7, 2009
worker.js
52
function findPrimes() { // ... prime algorithm here postMessage(nextPrime);}
findPrimes();
Wednesday, October 7, 2009
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML5 Support
(iPhone)
(mobile)
(mobile)
(mobile)
Wednesday, October 7, 2009
Download Slides
• http://codinginparadise.org/presentations/intro_html5.pdf
54
Wednesday, October 7, 2009
Introduction to HTML 5Brad NeubergDeveloper Programs, Google
Wednesday, October 7, 2009