• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google html5 Tutorial
 

Google html5 Tutorial

on

  • 12,034 views

THE Tutorial OF HTML5 BY GOOGLE

THE Tutorial OF HTML5 BY GOOGLE

Statistics

Views

Total Views
12,034
Views on SlideShare
11,776
Embed Views
258

Actions

Likes
33
Downloads
947
Comments
2

20 Embeds 258

http://onwebdev.blogspot.com 57
http://youmedia.blogspot.jp 53
http://pkcentum.tistory.com 34
http://youmedia.blogspot.com 28
http://www.evolvebeyondmoney.com 21
http://websites.networksolutions.com 19
http://evolvebeyondmoney.com 16
http://pompeualbamoreno.wordpress.com 8
http://blog.gabrieleromanato.com 6
http://onwebdev.blogspot.com.ar 3
http://cafertayyarozel.wordpress.com 3
http://cmslan.com 2
http://verious 1
http://onwebdev.blogspot.co.uk 1
https://training.blackboard.com 1
http://onwebdev.blogspot.in 1
http://onwebdev.blogspot.com.es 1
http://www.slideshare.net 1
http://thetechnicalweb.blogspot.com 1
http://www.youmedia.blogspot.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google html5 Tutorial Google html5 Tutorial Presentation Transcript

    • 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