Introduction to HTML 5 - Coding In Paradise
Transcript of Introduction to HTML 5 - Coding In Paradise
![Page 1: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/1.jpg)
Introduction to HTML 5Brad NeubergDeveloper Programs, Google
Wednesday, October 7, 2009
![Page 2: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/5.jpg)
More Users
50
150
250
350
450
OS
S B
row
ser U
sers
(M)
2005 2006 2007 2008 2009
Wednesday, October 7, 2009
![Page 6: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/7.jpg)
5>4A More Powerful Web
Wednesday, October 7, 2009
![Page 8: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/8.jpg)
Cautionary Tales of Latent Lemonade
xhr(1999)
xml (1998)
css(1996)
AJAX (2004)
Wednesday, October 7, 2009
![Page 9: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/9.jpg)
HTML 5: A Chance to Do Things Differently
Wednesday, October 7, 2009
![Page 10: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/10.jpg)
canvas/SVG video geolocation app cache &database
web workers
Wednesday, October 7, 2009
![Page 11: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/11.jpg)
00
width
heig
ht
Y
x
y
X
Until Recently, You Couldn’t Draw on the Web
Wednesday, October 7, 2009
![Page 12: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/12.jpg)
And Graphics Weren’t Very Interactive
javascript:onClick(Draw());
Wednesday, October 7, 2009
![Page 13: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/13.jpg)
The Usual Options Do This...
VMLFlash
Silverlight
Wednesday, October 7, 2009
![Page 14: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/14.jpg)
... 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
![Page 15: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/15.jpg)
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
Wednesday, October 7, 2009
![Page 16: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/16.jpg)
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect
Wednesday, October 7, 2009
![Page 17: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/17.jpg)
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0"
Wednesday, October 7, 2009
![Page 18: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/18.jpg)
Scalable Vector Graphics (SVG)
• HTML-like tags for drawing
15
<rect x="0" y="0" width="100" height="100"
Wednesday, October 7, 2009
![Page 19: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/25.jpg)
Scalable Vector Graphics (SVG)
16
Wednesday, October 7, 2009
![Page 26: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/26.jpg)
Scalable Vector Graphics (SVG)
16
var rect = document.getElementById('myRect');
Wednesday, October 7, 2009
![Page 27: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/27.jpg)
Scalable Vector Graphics (SVG)
16
var rect = document.getElementById('myRect');rect.style.fill = 'green';
Wednesday, October 7, 2009
![Page 28: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/28.jpg)
Scalable Vector Graphics (SVG)
16
var rect = document.getElementById('myRect');rect.style.fill = 'green';rect.onclick = function() { alert('hello'); }
Wednesday, October 7, 2009
![Page 29: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/29.jpg)
Scalable Vector Graphics
17
Wednesday, October 7, 2009
![Page 30: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/30.jpg)
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
Wednesday, October 7, 2009
![Page 31: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/31.jpg)
Canvas API
• JavaScript API ("Scriptable Image Tag")
18
<canvas id="myCanvas" width="150" height="150"></canvas>
Wednesday, October 7, 2009
![Page 32: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/32.jpg)
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
![Page 33: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/33.jpg)
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
![Page 34: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/34.jpg)
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
![Page 35: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/35.jpg)
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
![Page 36: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/36.jpg)
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
![Page 37: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/37.jpg)
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
![Page 38: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/39.jpg)
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
![Page 40: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/40.jpg)
When Canvas or SVG?
20
Wednesday, October 7, 2009
![Page 41: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/41.jpg)
When Canvas or SVG?
SVG -> High level–Import/Export–Easy UIs–Interactive–Medium Animation–Tree of objects
20
Wednesday, October 7, 2009
![Page 42: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/42.jpg)
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
![Page 43: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/43.jpg)
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
Wednesday, October 7, 2009
![Page 44: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/44.jpg)
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
![Page 45: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/45.jpg)
http://tinyurl.com/mbw73x
Wednesday, October 7, 2009
![Page 46: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/46.jpg)
Wednesday, October 7, 2009
![Page 47: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/47.jpg)
videocanvas/SVG geolocation app cache &database
web workers
Wednesday, October 7, 2009
![Page 48: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/48.jpg)
Video is Complicated, and Outside Your Control
Wednesday, October 7, 2009
![Page 49: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/49.jpg)
// HTML 5 makes <video> as easy as <img>
Wednesday, October 7, 2009
![Page 50: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/50.jpg)
Embedding Video
27
Wednesday, October 7, 2009
![Page 51: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/51.jpg)
Embedding Video
27
<video src="http://example.com/myMovie.ogg" controls>
Wednesday, October 7, 2009
![Page 52: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/52.jpg)
Embedding Video
27
<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element.
Wednesday, October 7, 2009
![Page 53: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/53.jpg)
Embedding Video
27
<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video>
Wednesday, October 7, 2009
![Page 54: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/54.jpg)
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
![Page 55: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/55.jpg)
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
![Page 56: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/56.jpg)
<video> demos
• Basic Player (FF 3.5)
• YouTube (Safari 4) - View Source
Wednesday, October 7, 2009
![Page 57: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/57.jpg)
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
Wednesday, October 7, 2009
![Page 58: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/58.jpg)
geolocationcanvas/SVG video app cache &database
web workers
Wednesday, October 7, 2009
![Page 59: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/59.jpg)
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
![Page 60: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/60.jpg)
...And Browsers Are Now Location-Enabled
Wednesday, October 7, 2009
![Page 61: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/61.jpg)
// the geolocation api brings browser-based location to your apps
Wednesday, October 7, 2009
![Page 62: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/62.jpg)
Geolocation Sample
35
Wednesday, October 7, 2009
![Page 63: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/63.jpg)
Geolocation Sample
35
navigator.geolocation.getCurrentPosition(
Wednesday, October 7, 2009
![Page 64: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/64.jpg)
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) {
Wednesday, October 7, 2009
![Page 65: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/65.jpg)
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude;
Wednesday, October 7, 2009
![Page 66: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/66.jpg)
Geolocation Sample
35
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude;
Wednesday, October 7, 2009
![Page 67: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/67.jpg)
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
![Page 68: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/68.jpg)
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
![Page 69: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/69.jpg)
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
![Page 70: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/70.jpg)
geolocation demos
• Google Maps (FF 3.5)
Wednesday, October 7, 2009
![Page 71: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/71.jpg)
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
(iPhone)
Wednesday, October 7, 2009
![Page 72: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/72.jpg)
app cache &database
canvas/SVG video geolocation web workers
Wednesday, October 7, 2009
![Page 73: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/73.jpg)
Web Apps Need to Work Everywhere
Wednesday, October 7, 2009
![Page 74: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/74.jpg)
// database and app cache store user data and app resources locally
Wednesday, October 7, 2009
![Page 75: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/75.jpg)
app cache & database demos
• Sticky Notes Demo (Safari 4)
Wednesday, October 7, 2009
![Page 76: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/76.jpg)
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
![Page 77: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/77.jpg)
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
![Page 78: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/78.jpg)
DatabaseWednesday, October 7, 2009
![Page 79: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/79.jpg)
Database
44
Wednesday, October 7, 2009
![Page 80: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/80.jpg)
Database
44
var db = window.openDatabase("NoteTest", "1.0",
Wednesday, October 7, 2009
![Page 81: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/81.jpg)
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB",
Wednesday, October 7, 2009
![Page 82: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/82.jpg)
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
Wednesday, October 7, 2009
![Page 83: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/83.jpg)
Database
44
var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
Wednesday, October 7, 2009
![Page 84: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/84.jpg)
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
![Page 85: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/85.jpg)
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
![Page 86: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/86.jpg)
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
![Page 87: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/87.jpg)
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
![Page 88: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/88.jpg)
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
![Page 89: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/89.jpg)
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
![Page 90: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/90.jpg)
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
![Page 91: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/91.jpg)
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
![Page 92: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/92.jpg)
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
![Page 93: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/93.jpg)
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
![Page 94: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/94.jpg)
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML 5 Support
(mobile)
(mobile)
(iPhone)
Wednesday, October 7, 2009
![Page 95: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/95.jpg)
web workerscanvas/SVG video geolocation app cache &database
Wednesday, October 7, 2009
![Page 96: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/96.jpg)
A More Powerful Web == More Powerful Apps
Wednesday, October 7, 2009
![Page 97: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/97.jpg)
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
![Page 98: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/98.jpg)
// web workers defines an API for running background scripts
Wednesday, October 7, 2009
![Page 99: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/99.jpg)
web workers demos
• Bad Primes (FF 3.5)
• Good Primes (FF 3.5)
• Motion Tracker (FF)
Wednesday, October 7, 2009
![Page 100: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/100.jpg)
Web Workers
51
Wednesday, October 7, 2009
![Page 101: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/101.jpg)
Web Workers
51
<script>
Wednesday, October 7, 2009
![Page 102: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/102.jpg)
Web Workers
51
<script> var worker = new Worker('worker.js');
Wednesday, October 7, 2009
![Page 103: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/103.jpg)
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) {
Wednesday, October 7, 2009
![Page 104: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/104.jpg)
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data);
Wednesday, October 7, 2009
![Page 105: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/105.jpg)
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); };
Wednesday, October 7, 2009
![Page 106: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/106.jpg)
Web Workers
51
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); };</script>
Wednesday, October 7, 2009
![Page 107: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/107.jpg)
worker.js
52
function findPrimes() { // ... prime algorithm here postMessage(nextPrime);}
findPrimes();
Wednesday, October 7, 2009
![Page 108: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/108.jpg)
Chrome Firefox Safari Opera
canvas/SVG
video
geolocation
app cache
database
workers
HTML5 Support
(iPhone)
(mobile)
(mobile)
(mobile)
Wednesday, October 7, 2009
![Page 109: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/109.jpg)
Download Slides
• http://codinginparadise.org/presentations/intro_html5.pdf
54
Wednesday, October 7, 2009
![Page 110: Introduction to HTML 5 - Coding In Paradise](https://reader036.fdocuments.us/reader036/viewer/2022071600/613d284d736caf36b759fee2/html5/thumbnails/110.jpg)
Introduction to HTML 5Brad NeubergDeveloper Programs, Google
Wednesday, October 7, 2009