Introduction to HTML 5
            Brad Neuberg
            Developer Programs, Google




Wednesday, October 7, 2009
The Web Platform is Accelerating




                                                                                     ...
And It’s Solving Key Developer Challenges




                                       Graphics   Location     Storage   Spe...
More Developers
                                                   300
                                                   ...
More Users
                                    450




                                    350
            OSS Browser Use...
More Speed
                                        80
            SunSpider Runs Per Minute




                          ...
A More Powerful Web




                             5>4
Wednesday, October 7, 2009
Cautionary Tales of Latent Lemonade




                                           AJAX (2004)

                          ...
HTML 5: A Chance to Do Things Differently




Wednesday, October 7, 2009
canvas/SVG           video   geolocation   app cache &   web workers
                                                    d...
Until Recently, You Couldn’t Draw on the Web

                                 0
                             0           ...
And Graphics Weren’t Very Interactive




                             javascript:onClick(Draw());


Wednesday, October 7,...
The Usual Options Do This...
                                           Silverlight
                             VML
     ...
... But canvas and SVG Are Intrinsic to the Web

                                       Document Object Model (DOM) Specif...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




             15



Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect




       ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing




                             <rect
           ...
Scalable Vector Graphics (SVG)
            • HTML-like tags for drawing
                       <!DOCTYPE html>
           ...
Scalable Vector Graphics (SVG)




             16



Wednesday, October 7, 2009
Scalable Vector Graphics (SVG)




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




             16



...
Scalable Vector Graphics (SVG)




                  var rect = document.getElementById('myRect');
                  rect....
Scalable Vector Graphics (SVG)




                  var rect = document.getElementById('myRect');
                  rect....
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=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
Canvas API
            • JavaScript API ("Scriptable Image Tag")

               <canvas id="myCanvas" width="150" height=...
• Mozilla Download Center (FF)
      • First Person Gifter (FF)
      • Population Demo (FF)
      • Bespin (Safari)
     ...
When Canvas or SVG?




             20



Wednesday, October 7, 2009
When Canvas or SVG?



              SVG -> High level
              –Import/Export
              –Easy UIs
              ...
When Canvas or SVG?



              SVG -> High level   Canvas -> Low level
              –Import/Export      –No mouse i...
HTML 5 Support

                                     Chrome   Firefox   Safari   Opera
                 canvas/SVG



    ...
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
                                                    d...
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 ...
Embedding Video




      <video src="http://example.com/myMovie.ogg" controls>
         Your browser does not support the...
Embedding Video




      <video src="http://example.com/myMovie.ogg" controls>
         Your browser does not support the...
Multiple Files & Scripting


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


      <video controls>
         <source src="foo.ogg" type="video/ogg">
         <source src=...
• Basic Player (FF 3.5)
      • YouTube (Safari 4) - View Source




                             <video> demos




Wednes...
HTML 5 Support

                                     Chrome   Firefox   Safari   Opera
                 canvas/SVG



    ...
canvas/SVG           video   geolocation   app cache &   web workers
                                                    d...
Life’s Better with Location
                                                   2.8 mi

                                   ...
...And Browsers Are Now Location-Enabled




Wednesday, October 7, 2009
// the
              geolocation api
              brings browser-
              based location
              to your apps...
Geolocation Sample




             35



Wednesday, October 7, 2009
Geolocation Sample


             navigator.geolocation.getCurrentPosition(




             35



Wednesday, October 7, 2...
Geolocation Sample


             navigator.geolocation.getCurrentPosition(
                function(position) {




     ...
Geolocation Sample


             navigator.geolocation.getCurrentPosition(
                function(position) {
         ...
Geolocation Sample


             navigator.geolocation.getCurrentPosition(
                function(position) {
         ...
Geolocation Sample


             navigator.geolocation.getCurrentPosition(
                function(position) {
         ...
Geolocation Sample


             navigator.geolocation.getCurrentPosition(
                function(position) {
         ...
Geolocation Sample


             navigator.geolocation.getCurrentPosition(
                function(position) {
         ...
• Google Maps (FF 3.5)




                             geolocation demos




Wednesday, October 7, 2009
HTML 5 Support

                                     Chrome   Firefox   Safari        Opera
                 canvas/SVG


...
canvas/SVG           video   geolocation   app cache &   web workers
                                                    d...
Web Apps Need to Work Everywhere




Wednesday, October 7, 2009
// database and
              app cache store
              user data and
              app resources
              locall...
• 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...
App Cache
            • List resources that you want to take offline

               CACHE MANIFEST
               /static...
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 ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
Database
            var db = window.openDatabase("NoteTest", "1.0",
                                            "Example ...
HTML 5 Support

                                     Chrome   Firefox   Safari        Opera
                 canvas/SVG


...
canvas/SVG           video   geolocation   app cache &   web workers
                                                    d...
A More Powerful Web == More Powerful Apps




Wednesday, October 7, 2009
But More Power == More Responsibility


                             I will not hose the browser with JavaScript

        ...
// web workers
              defines an API
              for running
              background
              scripts

Wedn...
• Bad Primes (FF 3.5)
      • Good Primes (FF 3.5)
      • Motion Tracker (FF)




                             web worker...
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, O...
Web Workers

            <script>
               var worker = new Worker('worker.js');
               worker.onmessage = f...
Web Workers

            <script>
               var worker = new Worker('worker.js');
               worker.onmessage = f...
Web Workers

            <script>
               var worker = new Worker('worker.js');
               worker.onmessage = f...
Web Workers

            <script>
               var worker = new Worker('worker.js');
               worker.onmessage = f...
worker.js

            function findPrimes() {
               // ... prime algorithm here
               postMessage(nextP...
HTML5 Support

                                     Chrome   Firefox   Safari        Opera
                 canvas/SVG



...
Download Slides
            • http://codinginparadise.org/presentations/intro_html5.pdf




             54



Wednesday, ...
Introduction to HTML 5
            Brad Neuberg
            Developer Programs, Google




Wednesday, October 7, 2009
Upcoming SlideShare
Loading in...5
×

Google html5 Tutorial

11,536

Published on

THE Tutorial OF HTML5 BY GOOGLE

Published in: Technology, Art & Photos
2 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,536
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,000
Comments
2
Likes
35
Embeds 0
No embeds

No notes for slide

Google html5 Tutorial

  1. 1. Introduction to HTML 5 Brad Neuberg Developer Programs, Google Wednesday, October 7, 2009
  2. 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. 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. 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. 5. More Users 450 350 OSS Browser Users (M) 250 150 50 2005 2006 2007 2008 2009 Wednesday, October 7, 2009
  6. 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. 7. A More Powerful Web 5>4 Wednesday, October 7, 2009
  8. 8. Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css xhr (1996) (1999) Wednesday, October 7, 2009
  9. 9. HTML 5: A Chance to Do Things Differently Wednesday, October 7, 2009
  10. 10. canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
  11. 11. Until Recently, You Couldn’t Draw on the Web 0 0 X y x height Y width Wednesday, October 7, 2009
  12. 12. And Graphics Weren’t Very Interactive javascript:onClick(Draw()); Wednesday, October 7, 2009
  13. 13. The Usual Options Do This... Silverlight VML Flash Wednesday, October 7, 2009
  14. 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. 15. Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 Wednesday, October 7, 2009
  16. 16. Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect 15 Wednesday, October 7, 2009
  17. 17. Scalable Vector Graphics (SVG) • HTML-like tags for drawing <rect x="0" y="0" 15 Wednesday, October 7, 2009
  18. 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. 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. 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. 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. 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. 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. 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. 25. Scalable Vector Graphics (SVG) 16 Wednesday, October 7, 2009
  26. 26. Scalable Vector Graphics (SVG) var rect = document.getElementById('myRect'); 16 Wednesday, October 7, 2009
  27. 27. Scalable Vector Graphics (SVG) var rect = document.getElementById('myRect'); rect.style.fill = 'green'; 16 Wednesday, October 7, 2009
  28. 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. 29. Scalable Vector Graphics 17 Wednesday, October 7, 2009
  30. 30. Canvas API • JavaScript API ("Scriptable Image Tag") 18 Wednesday, October 7, 2009
  31. 31. Canvas API • JavaScript API ("Scriptable Image Tag") <canvas id="myCanvas" width="150" height="150"> </canvas> 18 Wednesday, October 7, 2009
  32. 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. 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. 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. 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. 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. 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. 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. 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. 40. When Canvas or SVG? 20 Wednesday, October 7, 2009
  41. 41. When Canvas or SVG? SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects 20 Wednesday, October 7, 2009
  42. 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. 43. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers Wednesday, October 7, 2009
  44. 44. http://tinyurl.com/mbw73x Wednesday, October 7, 2009
  45. 45. http://tinyurl.com/mbw73x Wednesday, October 7, 2009
  46. 46. Wednesday, October 7, 2009
  47. 47. canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
  48. 48. Video is Complicated, and Outside Your Control Wednesday, October 7, 2009
  49. 49. // HTML 5 makes <video> as easy as <img> Wednesday, October 7, 2009
  50. 50. Embedding Video 27 Wednesday, October 7, 2009
  51. 51. Embedding Video <video src="http://example.com/myMovie.ogg" controls> 27 Wednesday, October 7, 2009
  52. 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. 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. 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. 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. 56. • Basic Player (FF 3.5) • YouTube (Safari 4) - View Source <video> demos Wednesday, October 7, 2009
  57. 57. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers Wednesday, October 7, 2009
  58. 58. canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
  59. 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. 60. ...And Browsers Are Now Location-Enabled Wednesday, October 7, 2009
  61. 61. // the geolocation api brings browser- based location to your apps Wednesday, October 7, 2009
  62. 62. Geolocation Sample 35 Wednesday, October 7, 2009
  63. 63. Geolocation Sample navigator.geolocation.getCurrentPosition( 35 Wednesday, October 7, 2009
  64. 64. Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { 35 Wednesday, October 7, 2009
  65. 65. Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; 35 Wednesday, October 7, 2009
  66. 66. Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; 35 Wednesday, October 7, 2009
  67. 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. 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. 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. 70. • Google Maps (FF 3.5) geolocation demos Wednesday, October 7, 2009
  71. 71. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation (iPhone) app cache database workers Wednesday, October 7, 2009
  72. 72. canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
  73. 73. Web Apps Need to Work Everywhere Wednesday, October 7, 2009
  74. 74. // database and app cache store user data and app resources locally Wednesday, October 7, 2009
  75. 75. • Sticky Notes Demo (Safari 4) app cache & database demos Wednesday, October 7, 2009
  76. 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. 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
  78. 78. Database Wednesday, October 7, 2009
  79. 79. Database 44 Wednesday, October 7, 2009
  80. 80. Database var db = window.openDatabase("NoteTest", "1.0", 44 Wednesday, October 7, 2009
  81. 81. Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 44 Wednesday, October 7, 2009
  82. 82. Database var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); 44 Wednesday, October 7, 2009
  83. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 94. HTML 5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation (iPhone) app cache (mobile) database (mobile) workers Wednesday, October 7, 2009
  95. 95. canvas/SVG video geolocation app cache & web workers database Wednesday, October 7, 2009
  96. 96. A More Powerful Web == More Powerful Apps Wednesday, October 7, 2009
  97. 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. 98. // web workers defines an API for running background scripts Wednesday, October 7, 2009
  99. 99. • Bad Primes (FF 3.5) • Good Primes (FF 3.5) • Motion Tracker (FF) web workers demos Wednesday, October 7, 2009
  100. 100. Web Workers 51 Wednesday, October 7, 2009
  101. 101. Web Workers <script> 51 Wednesday, October 7, 2009
  102. 102. Web Workers <script> var worker = new Worker('worker.js'); 51 Wednesday, October 7, 2009
  103. 103. Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { 51 Wednesday, October 7, 2009
  104. 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. 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. 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. 107. worker.js function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes(); 52 Wednesday, October 7, 2009
  108. 108. HTML5 Support Chrome Firefox Safari Opera canvas/SVG video geolocation (iPhone) app cache (mobile) database (mobile) workers (mobile) Wednesday, October 7, 2009
  109. 109. Download Slides • http://codinginparadise.org/presentations/intro_html5.pdf 54 Wednesday, October 7, 2009
  110. 110. Introduction to HTML 5 Brad Neuberg Developer Programs, Google Wednesday, October 7, 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×