SlideShare a Scribd company logo

Google html5 Tutorial

J
jobfan

The document introduces HTML 5 and discusses new capabilities it provides such as canvas/SVG for graphics, video playback, geolocation, application caching, and web workers. It notes that these features are solving key challenges for developers and that browser development is accelerating, bringing web applications closer to native applications. The document argues HTML 5 provides a chance to build upon lessons from past technologies like AJAX to do things differently.

TechnologyArt & Photos
1 of 110
Downloaded 1,038 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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 ... Wednesday, October 7, 2009
And It’s Solving Key Developer Challenges Graphics Location Storage Speed User Experience XHR CSS DOM HTML native web 1990 -- 2008 Q408 Q109 Q209 ... Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
More Users 450 350 OSS Browser Users (M) 250 150 50 2005 2006 2007 2008 2009 Wednesday, October 7, 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 Wednesday, October 7, 2009
A More Powerful Web 5>4 Wednesday, October 7, 2009
Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css xhr (1996) (1999) Wednesday, October 7, 2009
HTML 5: A Chance to Do Things Differently Wednesday, October 7, 2009
canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
Until Recently, You Couldn’t Draw on the Web 0 0 X y x height Y width Wednesday, October 7, 2009
And Graphics Weren’t Very Interactive javascript:onClick(Draw()); Wednesday, October 7, 2009
The Usual Options Do This... Silverlight VML Flash Wednesday, October 7, 2009
... 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 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 <rect 15 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect x="0" y="0" 15 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" 15 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" 15 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" 15 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" 15 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <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 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <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 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) • HTML-like tags for drawing <!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> 15 </html> Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) 16 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) var rect = document.getElementById('myRect'); 16 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) var rect = document.getElementById('myRect'); rect.style.fill = 'green'; 16 Wednesday, October 7, 2009
Scalable Vector Graphics (SVG) var rect = document.getElementById('myRect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); } 16 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") <canvas id="myCanvas" width="150" height="150"> </canvas> 18 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); 18 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); 18 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <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 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <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 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <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 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <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 Wednesday, October 7, 2009
Canvas API • JavaScript API ("Scriptable Image Tag") <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 Wednesday, October 7, 2009
• Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • Bespin (Safari) • German Election Atlas (Safari) canvas and SVG demos 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 Canvas -> Low level –Import/Export –No mouse interaction –Easy UIs –High Animation –Interactive –JS Centric –Medium Animation –More Bookkeeping –Tree of objects –Pixels 20 Wednesday, October 7, 2009
HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers Wednesday, October 7, 2009
http://tinyurl.com/mbw73x Wednesday, October 7, 2009
http://tinyurl.com/mbw73x Wednesday, October 7, 2009
Wednesday, October 7, 2009
canvas/SVG video geolocation app cache & web workers database 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 <video src="http://example.com/myMovie.ogg" controls> 27 Wednesday, October 7, 2009
Embedding Video <video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. 27 Wednesday, October 7, 2009
Embedding Video <video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video> 27 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
• Basic Player (FF 3.5) • YouTube (Safari 4) - View Source <video> demos Wednesday, October 7, 2009
HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers Wednesday, October 7, 2009
canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
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 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 navigator.geolocation.getCurrentPosition( 35 Wednesday, October 7, 2009
Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { 35 Wednesday, October 7, 2009
Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; 35 Wednesday, October 7, 2009
Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; 35 Wednesday, October 7, 2009
Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); 35 Wednesday, October 7, 2009
Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } 35 Wednesday, October 7, 2009
Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } ); 35 Wednesday, October 7, 2009
• Google Maps (FF 3.5) geolocation demos Wednesday, October 7, 2009
HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation (iPhone) app cache database workers Wednesday, October 7, 2009
canvas/SVG video geolocation app cache & web workers database 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
• Sticky Notes Demo (Safari 4) app cache & database demos Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
Database Wednesday, October 7, 2009
Database 44 Wednesday, October 7, 2009
Database var db = window.openDatabase("NoteTest", "1.0", 44 Wednesday, October 7, 2009
Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 44 Wednesday, October 7, 2009
Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); 44 Wednesday, October 7, 2009
Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { 44 Wednesday, October 7, 2009
Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( 44 Wednesday, October 7, 2009
Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { 44 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
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 Wednesday, October 7, 2009
HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation (iPhone) app cache (mobile) database (mobile) workers Wednesday, October 7, 2009
canvas/SVG video geolocation app cache & web workers 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
• Bad Primes (FF 3.5) • Good Primes (FF 3.5) • Motion Tracker (FF) web workers demos Wednesday, October 7, 2009
Web Workers 51 Wednesday, October 7, 2009
Web Workers <script> 51 Wednesday, October 7, 2009
Web Workers <script> var worker = new Worker('worker.js'); 51 Wednesday, October 7, 2009
Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { 51 Wednesday, October 7, 2009
Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); 51 Wednesday, October 7, 2009
Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; 51 Wednesday, October 7, 2009
Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script> 51 Wednesday, October 7, 2009
worker.js function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes(); 52 Wednesday, October 7, 2009
HTML5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation (iPhone) app cache (mobile) database (mobile) workers (mobile) Wednesday, October 7, 2009
Download Slides • http://codinginparadise.org/presentations/intro_html5.pdf 54 Wednesday, October 7, 2009
Introduction to HTML 5 Brad Neuberg Developer Programs, Google Wednesday, October 7, 2009

More Related Content

PDF
Hdc09 Keynote - Browser, Mobile, Cloud, Social, Geo Portrait of the developer...
Patrick Chanezon
 
PDF
Google Developer Days Brazil 2009 - Keynote
Patrick Chanezon
 
PDF
Vertically Challenged
Aurynn Shaw
 
PDF
Don Schwarz App Engine Talk
Tech in the Middle
 
PDF
Presentation of Dominos future plans
dominion
 
PDF
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Skills Matter
 
PPT
Vishub description Global Excursion
Juan Quemada
 
PDF
0 entorno php
Carlos A. Iglesias
 
Hdc09 Keynote - Browser, Mobile, Cloud, Social, Geo Portrait of the developer...
Patrick Chanezon
 
Google Developer Days Brazil 2009 - Keynote
Patrick Chanezon
 
Vertically Challenged
Aurynn Shaw
 
Don Schwarz App Engine Talk
Tech in the Middle
 
Presentation of Dominos future plans
dominion
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Skills Matter
 
Vishub description Global Excursion
Juan Quemada
 
0 entorno php
Carlos A. Iglesias
 

Viewers also liked (20)

PPT
Isabel: Reuniones, Clases y Congresos a través de Internet
Juan Quemada
 
PDF
Introducción CSS
Carlos A. Iglesias
 
PDF
Presentación TEWC
Carlos A. Iglesias
 
PDF
Internet Ice091117
Juan Quemada
 
PDF
Introducción a los Frameworks CSS
Luis Miguel Martín
 
PPT
Herramientas para el desarrollo en plataformas móviles web
joycesita
 
PDF
CSS
MARTINGVALLE
 
PDF
Entorno PHP
Carlos A. Iglesias
 
PDF
Arquitectura del Web 2
Juan Quemada
 
PDF
Fundamentos de CSS
Nicolas Navarro Rincón
 
PPT
Nuevos retos de Internet: Movilidad y Cloud Computing
Juan Quemada
 
PPT
Empresa 2.0
Juan Quemada
 
PDF
Human Interaction, Social Protocols and Collaborative Applications
Juan Quemada
 
PDF
GSI Research Group Presentation
Carlos A. Iglesias
 
PPT
Proyecto de Topicos II - HTML5
joycesita
 
PDF
Html5 Open Video Tutorial
Silvia Pfeiffer
 
PPTX
HTML5 Canvas
Jesus Vargas
 
PDF
Css - Tema 1
Renny Batista
 
PPT
Introduccion al Web 2.0
Juan Quemada
 
PDF
Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft
Nicolas Navarro Rincón
 
Isabel: Reuniones, Clases y Congresos a través de Internet
Juan Quemada
 
Introducción CSS
Carlos A. Iglesias
 
Presentación TEWC
Carlos A. Iglesias
 
Internet Ice091117
Juan Quemada
 
Introducción a los Frameworks CSS
Luis Miguel Martín
 
Herramientas para el desarrollo en plataformas móviles web
joycesita
 
CSS
MARTINGVALLE
 
Entorno PHP
Carlos A. Iglesias
 
Arquitectura del Web 2
Juan Quemada
 
Fundamentos de CSS
Nicolas Navarro Rincón
 
Nuevos retos de Internet: Movilidad y Cloud Computing
Juan Quemada
 
Empresa 2.0
Juan Quemada
 
Human Interaction, Social Protocols and Collaborative Applications
Juan Quemada
 
GSI Research Group Presentation
Carlos A. Iglesias
 
Proyecto de Topicos II - HTML5
joycesita
 
Html5 Open Video Tutorial
Silvia Pfeiffer
 
HTML5 Canvas
Jesus Vargas
 
Css - Tema 1
Renny Batista
 
Introduccion al Web 2.0
Juan Quemada
 
Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft
Nicolas Navarro Rincón
 
Ad

Similar to Google html5 Tutorial (20)

PDF
Google Devfest 2009 Argentina - Keynote
Patrick Chanezon
 
PDF
Google DevFest 09
Eze Torres
 
PDF
Alejandro Villanueva - Google Inc.
Alejandro Corpeño
 
PDF
Google - Charla para CTOs
Palermo Valley
 
PDF
The Web is the platform, @lxjs
haricot
 
PDF
HTML5 and Google Chrome - DevFest09
mihaiionescu
 
PDF
HTML5: State of the Union
Sencha
 
ZIP
Google Web Toolkit
pgt technology scouting GmbH
 
PDF
Standards Talk - Opera Uni Tour Indonesia
Zi Bin Cheah
 
PDF
Developing the Next Generation Embedded HMIs
mentoresd
 
PDF
HTML5 and the dawn of rich mobile web applications
James Pearce
 
PDF
JavaOne 2011 - Going Mobile With Java Based Technologies Today
Wesley Hales
 
PDF
The YUI Library (Yahoo! Course @NCU)
Joseph Chiang
 
PDF
An Intro to Mobile HTML5
James Pearce
 
PPTX
HTML
Shivani Gautam
 
PPTX
Html ppts
Shivani Gautam
 
PDF
Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Microsoft Mobile Developer
 
PDF
From Flash to Canvas - a penchant for black holes
Patric Lanhed
 
KEY
User freedom and control on the Web: from desktop to mobile
Tristan Nitot
 
PDF
Ideas for addictive series 40 web apps
Microsoft Mobile Developer
 
Google Devfest 2009 Argentina - Keynote
Patrick Chanezon
 
Google DevFest 09
Eze Torres
 
Alejandro Villanueva - Google Inc.
Alejandro Corpeño
 
Google - Charla para CTOs
Palermo Valley
 
The Web is the platform, @lxjs
haricot
 
HTML5 and Google Chrome - DevFest09
mihaiionescu
 
HTML5: State of the Union
Sencha
 
Google Web Toolkit
pgt technology scouting GmbH
 
Standards Talk - Opera Uni Tour Indonesia
Zi Bin Cheah
 
Developing the Next Generation Embedded HMIs
mentoresd
 
HTML5 and the dawn of rich mobile web applications
James Pearce
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
Wesley Hales
 
The YUI Library (Yahoo! Course @NCU)
Joseph Chiang
 
An Intro to Mobile HTML5
James Pearce
 
HTML
Shivani Gautam
 
Html ppts
Shivani Gautam
 
Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Microsoft Mobile Developer
 
From Flash to Canvas - a penchant for black holes
Patric Lanhed
 
User freedom and control on the Web: from desktop to mobile
Tristan Nitot
 
Ideas for addictive series 40 web apps
Microsoft Mobile Developer
 
Ad

Recently uploaded (20)

PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
CIFDAQ
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PDF
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Elevate
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
AbdullahSani29
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Advanced IT Governance
University of Hertfordshire
 
PDF
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
athlonica
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
CIFDAQ
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
Teaching material agriculture food technology
LiaRayya
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Elevate
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
AbdullahSani29
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Advanced IT Governance
University of Hertfordshire
 
GDG Cloud Iasi [PUBLIC] Florian Blaga - Unveiling the Evolution of Cybersecur...
athlonica
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 

Google html5 Tutorial

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