Introduction To HTML 5: Brad Neuberg Developer Programs, Google

Introduction to HTML 5
Brad Neuberg Developer Programs, Google
Wednesday, October 7, 2009
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
User Experience
native
web
1990 -- 2008 Q408

Q109
Q209
...
And Its Solving Key Developer Challenges
User Experience
Graphics
Location
Storage
Speed
XHR CSS DOM HTML
native
web
1990 -- 2008 Q408

Q109
Q209
...
More Developers
300
Monthly Contributors to OSS Browsers
225
chrome firefox 3.1+ firefox 2.0-3.0 webkit
150
75
2002
2003
2004
2005
2006
2007
2008
2009
More Users
450
OSS Browser Users (M)
350
250
150
50
2005
2006
2007
2008
2009
More Speed
80
SunSpider Runs Per Minute
60
100x improvement in JavaScript performance

40
20
2001
2003
2005
2007
Q108
Q208
Q308
Q408
Q109
A More Powerful Web
5>4
Cautionary Tales of Latent Lemonade
AJAX (2004) xml (1998)
css (1996)
xhr (1999)
HTML 5: A Chance to Do Things Differently
canvas/SVG
video
geolocation
app cache & database
web workers
Until Recently, You Couldnt Draw on the Web

0 0 y x X
width
height
And Graphics Werent Very Interactive
javascript:onClick(Draw());
The Usual Options Do This...

Silverlight VML Flash
... 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, 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
DOM
Transparent Stack
HTML
HTTP
Scalable Vector Graphics (SVG)

HTML-like tags for drawing
15

<rect
15

<rect x="0" y="0"
15

<rect x="0" y="0" width="100" height="100"
15

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red"
15

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px"
15

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8"
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" />
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" />
15

<!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> </html>
15
16
var rect = document.getElementById('myRect');
16
var rect = document.getElementById('myRect'); rect.style.fill = 'green';
16
var rect = document.getElementById('myRect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); }
16
Scalable Vector Graphics
17
Canvas API
JavaScript API ("Scriptable Image Tag")
18
Canvas API
<canvas id="myCanvas" width="150" height="150"> </canvas>
18
Canvas API
<canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas');
18
Canvas API
<canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');
18
Canvas API
<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
Canvas API
<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
Canvas API
<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
Canvas API
<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
Canvas API
<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
Mozilla Download Center (FF) First Person Gifter (FF) Population Demo (FF) Bespin (Safari) German Election Atlas (Safari)
canvas and SVG demos
When Canvas or SVG?
20
When Canvas or SVG?
SVG -> High level Import/Export Easy UIs Interactive Medium Animation Tree of objects
20
When Canvas or SVG?
SVG -> High level Import/Export Easy UIs Interactive Medium Animation Tree of objects
Canvas -> Low level No mouse interaction High Animation JS Centric More Bookkeeping Pixels
20
HTML 5 Support
Chrome
canvas/SVG
Firefox
Safari
Opera
video
geolocation
app cache
database
workers
http://tinyurl.com/mbw73x
http://tinyurl.com/mbw73x
canvas/SVG
video
geolocation
web workers
Video is Complicated, and Outside Your Control
// HTML 5 makes <video> as easy as <img>
Embedding Video
27
Embedding Video
<video src="http://example.com/myMovie.ogg" controls>
27
Embedding Video
<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element.
27
Embedding Video
<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video>
27
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
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
Basic Player (FF 3.5) YouTube (Safari 4) - View Source
<video> demos
HTML 5 Support
Chrome
canvas/SVG
Firefox
Safari
Opera
video
geolocation
app cache
database
workers
canvas/SVG
video
geolocation
web workers
Lifes Better with Location

2.8 mi
Places
CRM
Social
Ads
Photos
Games
2.1 mi
1.1 mi
500 ft
20 ft
75 ft
...And Browsers Are Now Location-Enabled
// the geolocation api brings browserbased location to your apps

Geolocation Sample
35
Geolocation Sample
navigator.geolocation.getCurrentPosition(
35
Geolocation Sample
navigator.geolocation.getCurrentPosition( function(position) {
35
Geolocation Sample
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude;
35
Geolocation Sample
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude;
35
Geolocation Sample
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon);
35
Geolocation Sample
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); }
35
Geolocation Sample
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } );
35
Google Maps (FF 3.5)
geolocation demos
HTML 5 Support
Chrome
canvas/SVG
Firefox
Safari
Opera
video
geolocation
(iPhone)
app cache
database
workers
canvas/SVG
video
geolocation
web workers
Web Apps Need to Work Everywhere
// database and app cache store user data and app resources locally
Sticky Notes Demo (Safari 4)
app cache & database demos
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
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
Database
Database
44
Database
var db = window.openDatabase("NoteTest", "1.0",
44
Database
var db = window.openDatabase("NoteTest", "1.0", "Example DB",
44
Database
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
44
Database
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) {
44
Database
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction(
44
Database
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) {
44
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
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
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
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
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
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
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
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
HTML 5 Support
Chrome
canvas/SVG
Firefox
Safari
Opera
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers
canvas/SVG
video
geolocation
web workers
A More Powerful Web == More Powerful Apps
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
// web workers defines an API for running background scripts

Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF)
web workers demos
Web Workers
51
Web Workers
<script>
51
Web Workers
<script> var worker = new Worker('worker.js');
51
Web Workers
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) {
51
Web Workers
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data);
51
Web Workers
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); };
51
Web Workers
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script>
51
worker.js
function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes();
52
HTML5 Support
Chrome
canvas/SVG
Firefox
Safari
Opera
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers
(mobile)
Download Slides
http://codinginparadise.org/presentations/intro_html5.pdf
54
Introduction to HTML 5
Brad Neuberg Developer Programs, Google

Introduction To HTML 5: Brad Neuberg Developer Programs, Google

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To HTML 5: Brad Neuberg Developer Programs, Google

Uploaded by

Copyright:

Available Formats

Introduction to HTML 5

Brad Neuberg Developer Programs, Google

Wednesday, October 7, 2009

The Web Platform is Accelerating

XHR CSS DOM HTML

Opera Labs: Mar 26, 2009 canvas video geolocation SVG

1990 -- 2008 Q408

And Its Solving Key Developer Challenges

XHR CSS DOM HTML

1990 -- 2008 Q408

Monthly Contributors to OSS Browsers

chrome firefox 3.1+ firefox 2.0-3.0 webkit

Wednesday, October 7, 2009

OSS Browser Users (M)

Wednesday, October 7, 2009

SunSpider Runs Per Minute

100x improvement in JavaScript performance

Wednesday, October 7, 2009

A More Powerful Web

Cautionary Tales of Latent Lemonade

AJAX (2004) xml (1998)

Wednesday, October 7, 2009

HTML 5: A Chance to Do Things Differently

Wednesday, October 7, 2009

app cache & database

Wednesday, October 7, 2009

Until Recently, You Couldnt Draw on the Web

Wednesday, October 7, 2009

And Graphics Werent Very Interactive

The Usual Options Do This...

Wednesday, October 7, 2009

... But canvas and SVG Are Intrinsic to the Web

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

<rect x="0" y="0"

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

<rect x="0" y="0" width="100" height="100"

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red"

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px"

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

var rect = document.getElementById('myRect');

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)