Introduction To HTML 5: Brad Neuberg Developer Programs, Google

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

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

Q109
Q209
web
...
More Developers
Monthly Contributors to OSS Browsers
300
225
chrome
firefox 3.1+
firefox 2.0-3.0
webkit
150
75
2002
2003
2004
2005
2006
2007
2008
2009
More Users
OSS Browser Users (M)
450
350
250
150
50
2005
2006
2007
2008
2009
More Speed
SunSpider Runs Per Minute
80
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
X
y
height
width
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
Transparent Stack
DOM
HTML
HTTP
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

<rect
15

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

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

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

<rect
x="0" y="0"
stroke-width="5px"
15

<rect
x="0" y="0"
stroke-width="5px"
rx="8" ry="8"
15

<rect
x="0" y="0"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
15

<rect
x="0" y="0"
stroke-width="5px"
rx="8" ry="8"
15

15
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
stroke-width="5px"
rx="8" ry="8"
</svg>
</body>
</html>
16
var rect = document.getElementById('myRect');
16

rect.style.fill = 'green';
16

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>
var canvas = document.getElementById('myCanvas');
18
Canvas API
</canvas>
var ctx = canvas.getContext('2d');
18
Canvas API
</canvas>
ctx.fillStyle = "rgb(200,0,0)";
18
Canvas API
</canvas>
ctx.fillRect (10, 10, 55, 50);
18
Canvas API
</canvas>
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
18
Canvas API
</canvas>
ctx.fillRect (10, 10, 55, 50);
ctx.fillRect (30, 30, 55, 50);
18
Canvas API
</canvas>
ctx.fillRect (10, 10, 55, 50);
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
20
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
Firefox
Safari
Opera
http://tinyurl.com/mbw73x
http://tinyurl.com/mbw73x
canvas/SVG
video
geolocation
app cache &

database
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

Your browser does not support the video element.
27
Embedding Video

</video>
27
Multiple Files & Scripting

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
</video>
28
Multiple Files & Scripting

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
</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
video
geolocation
app cache
database
workers
Firefox
Safari
Opera
canvas/SVG
video
geolocation
app cache &

database
web workers
Lifes Better with Location

2.8 mi
Places
CRM
Social
Ads
Games
Photos
2.1 mi
500 ft
20 ft
75 ft
1.1 mi
...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
function(position) {
35
Geolocation Sample
var lat = position.coords.latitude;
35
Geolocation Sample
var lon = position.coords.longitude;
35
Geolocation Sample
showLocation(lat, lon);
35
Geolocation Sample
}
35
Geolocation Sample
}
);
35
Google Maps (FF 3.5)
geolocation demos
HTML 5 Support
Chrome
Firefox
Safari
canvas/SVG
video
geolocation
(iPhone)
app cache
database
workers
Opera
canvas/SVG
video
geolocation
app cache &

database
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
"Example DB",
44
Database
"Example DB",
200000);
44
Database
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
44
Database
"Example DB",
200000);
db.transaction(
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
+ "(id, note, timestamp, left, top, zindex) "
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
+ "VALUES (?, ?, ?, ?, ?, ?)",
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
+ "VALUES (?, ?, ?, ?, ?, ?)",
}
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
+ "VALUES (?, ?, ?, ?, ?, ?)",
}
);
44
Database
"Example DB",
200000);
db.transaction(
function (tx) {
tx.executeSql(
+ "VALUES (?, ?, ?, ?, ?, ?)",
}
);
}
44
HTML 5 Support
Chrome
Firefox
Safari
Opera
canvas/SVG
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers
canvas/SVG
video
geolocation
app cache &

database
web workers
A More Powerful Web == More Powerful Apps
But More Power == More Responsibility
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>
worker.onmessage = function (event) {
51
Web Workers
<script>
console.log('Results: ' + event.data);
51
Web Workers
<script>
};
51
Web Workers
<script>
};
</script>
51
worker.js
function findPrimes() {
// ... prime algorithm here
postMessage(nextPrime);
}
findPrimes();
52
HTML5 Support
Chrome
Firefox
Safari
Opera
canvas/SVG
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

Wednesday, October 7, 2009

The Web Platform is Accelerating

1990 -- 2008 Q408

And Its Solving Key Developer Challenges

1990 -- 2008 Q408

Monthly Contributors to OSS Browsers

Wednesday, October 7, 2009

OSS Browser Users (M)

Wednesday, October 7, 2009

SunSpider Runs Per Minute

Wednesday, October 7, 2009

A More Powerful Web

Cautionary Tales of Latent Lemonade

Wednesday, October 7, 2009

HTML 5: A Chance to Do Things Differently

Wednesday, October 7, 2009

Wednesday, October 7, 2009

app cache &

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

Document Object Model (DOM) Specification

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)

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)

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

Wednesday, October 7, 2009

Scalable Vector Graphics (SVG)

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

Wednesday, October 7, 2009

Scalable Vector Graphics

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009