intro html5

Document Sample
intro html5 Powered By Docstoc
					            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

				
DOCUMENT INFO
Shared By:
Tags: html5
Stats:
views:20
posted:7/5/2011
language:English
pages:110