Google html5 Tutorial

12,156 views

Published on

THE Tutorial OF HTML5 BY GOOGLE

Published in: Technology, Art & Photos
2 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total views
12,156
On SlideShare
0
From Embeds
0
Number of Embeds
322
Actions
Shares
0
Downloads
1,011
Comments
2
Likes
36
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

×