Introduction To HTML 5

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

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

And It’s Solving Key Developer Challenges
Graphics Location Storage Speed

User Experience
XHR
CSS
DOM
HTML
native web
1990 -- 2008 Q408 Q109 Q209 ...

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

More Users
450
350
OSS Browser Users (M)
250
150
50
2005 2006 2007 2008 2009

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

A More Powerful Web
5>4
Cautionary Tales of Latent Lemonade
AJAX (2004)
xml (1998)
css xhr
(1996) (1999)

HTML 5: A Chance to Do Things Differently

canvas/SVG video geolocation app cache & web workers
database

Until Recently, You Couldn’t Draw on the Web
0
0 X
height
Y width

And Graphics Weren’t 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,
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

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

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
stroke-width="5px"
rx="8" ry="8"
</svg>
</body>
15
</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 Canvas -> Low level

–Import/Export –No mouse interaction
–Easy UIs –High Animation
–Interactive –JS Centric
–Medium Animation –More Bookkeeping
–Tree of objects –Pixels
20

HTML 5 Support
Chrome Firefox Safari Opera

canvas/SVG
video
geolocation
app cache
database
workers

http://tinyurl.com/mbw73x

http://tinyurl.com/mbw73x

database

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

canvas/SVG
video
geolocation
app cache
database
workers

database

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
...And Browsers Are Now Location-Enabled

// the
geolocation api
brings browser-
based 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

canvas/SVG
video
geolocation
(iPhone)
app cache
database
workers

database

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

canvas/SVG
video
geolocation
(iPhone)
app cache
(mobile)
database
(mobile)
workers

database

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

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

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduction To HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

Introduction to HTML 5

Wednesday, October 7, 2009

Firefox 3.5b4: video

1990 -- 2008 Q408 Q109 Q209 ...

Wednesday, October 7, 2009

Graphics Location Storage Speed

1990 -- 2008 Q408 Q109 Q209 ...

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Document Object Model (DOM) Specification

Hypertext Markup Language (HTML)

Hypertext Transfer Protocol (HTTP)

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

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

Wednesday, October 7, 2009

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

Wednesday, October 7, 2009

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

Wednesday, October 7, 2009

Wednesday, October 7, 2009

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

var canvas = document.getElementById('myCanvas');

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

var canvas = document.getElementById('myCanvas');

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

var canvas = document.getElementById('myCanvas');

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

var canvas = document.getElementById('myCanvas');

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

var canvas = document.getElementById('myCanvas');

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">

var canvas = document.getElementById('myCanvas');

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

Wednesday, October 7, 2009

<canvas id="myCanvas" width="150" height="150">