Google html5 Tutorial

  • 11,149 views
Uploaded on

THE Tutorial OF HTML5 BY GOOGLE

THE Tutorial OF HTML5 BY GOOGLE

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,149
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
968
Comments
2
Likes
35

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 44. http://tinyurl.com/mbw73x Wednesday, October 7, 2009
  • 45. http://tinyurl.com/mbw73x Wednesday, October 7, 2009
  • 46. 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
  • 78. Database 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