Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DevChatt: The Wonderful World Of Html5

2,708 views

Published on

  • Be the first to comment

  • Be the first to like this

DevChatt: The Wonderful World Of Html5

  1. 1. The Wonderful World of HTML5<br />Using and embracing the future of the web<br />
  2. 2. What in the world is HTML5?<br />The inevitable successor to HTML4 and XHTML1<br />XHTML2 no longer the future, or alive for that matter<br />HTML over HTML as XML (XHTML)<br />Does not mean it’s SGML (HTML5 requires an XML Mime-type)<br />But you can still choose to write XHTML in HTML5 (XHTML5)<br />HTML made for web applications<br />Javascript APIs that implement new services<br />Ability to edit data online and offline<br />Many things we needed to use Javascript for, we no longer need to<br />New tags that improve semantics and expand content<br />Less dependent on plugins<br />HTML5 is set to become the norm in a few years<br />We can use HTML5 today!<br />Even in IE6-8 with a bit of Javascript & graceful degradation<br />
  3. 3. The Same Old Story<br />We already know a bit about the most popular tags<br /><canvas><br /><audio><br /><video><br />We’re going to demo these tags<br />But that’s just the tipping point…<br />
  4. 4. Did you know that HTML5…<br />Allows you to insert inline SVG graphics?<br /><svg><br />Insert in MathML math equations?<br /><math><br />Points out where page elements are?<br /><header><br /><footer><br /><nav><br />We can create datasets?<br />data-fullpath in tag elements<br />Easily implement a plugin component?<br /><embed><br />Yes, it is now part of the standard<br />Add in date fields with calendars?<br />
  5. 5. Wait, there’s more!<br />Validate form content without JavaScript?<br />Run applications offline?<br />Store data in two different databases?<br />Make any element draggable?<br />And much more…<br />
  6. 6. Every Direction is North<br />Every tag you could ever want<br />http://www.html-5.com/tags/index.xhtml<br />
  7. 7. The Three Amigos<br />Wait, didn’t you just give a speech about these tags at a PHP User Group meeting?<br />All Demos: http://bit.ly/a5wXFE<br />
  8. 8. Demonstration Code<br />All the demos henceforth can be viewed here<br />http://bit.ly/a5wXFE<br />
  9. 9. <canvas><br />An immediate-mode bitmap element we can draw to<br />tl;dr it’s a bitmap element we can alter using Javascript<br />Is not based on vector graphics<br />Lives in harmony with SVG<br />Perfect for fast rendering<br />We can even render video in it!<br />Currently exists in the form of a 2D Context – that is, we can only draw 2D shapes<br />3D context proposed (WebGL)<br />Can be partially implemented in Javascript for Internet Explorer<br />excanvas.js<br />Reference: http://bit.ly/94Ycl1<br />
  10. 10. Canvas vs. SVG<br />Canvas<br />SVG<br />Renders very quickly<br />2D Context (with 3D context proposed)<br />Has no DOM<br />Not yet accessible<br />Interfaced strictly using Javascript<br />This includes animations<br />Bitmap<br />Does not render as fast<br />No real 3D context unless you want to get hacky<br />Has a DOM<br />Can be interfaced with using Javascript and SMIL<br />Animated using both<br />Accessible<br />Vector<br />
  11. 11. <audio><br />An easier way to embed audio into a page<br />Audio is just easier now, no need for any kind of plugin<br />We can interface with this tag using Javascript<br />Codecs used for audio<br />MP3<br />PCM Wave (WAV)<br />OggVorbis<br />Our Demo is a jukebox with music<br />Uses OggVorbis<br />The music is also free to download!<br />OggTheora<br />Reference: http://bit.ly/bDkXOh<br />MP3<br />All<br />
  12. 12. <video><br />Video in a Flash (without that other thing)<br />Can be interfaced with using Javascript<br />And <canvas><br />And SVG<br />No baseline codec for <video><br />Two generally accepted codecs<br />H.264 AVC<br />OggTheora<br />Our Demo uses H.264 and Ogg<br />Safari and Chrome only<br />OggTheora<br />Reference: http://bit.ly/bDkXOh<br />QTKit<br />Both<br />
  13. 13. The Working Group APIs<br />This is where the magic happens<br />
  14. 14. Geolocation<br />Not to be used for stalking<br />Spec requires all instances of geolocation to be initiated by the user<br />Agnostic to browser methods used to determine location<br />GPS<br />3G/Wifi triangulation<br />IP Traceroute<br />Opt-in location<br />Not just limited to W3C Implementation<br />Blackberry, Palm, Gears, et al have their own Geolocation classes and methods<br />Lack of ubiquity between these methods<br />
  15. 15. Geolocation Continued<br />Our demo uses the Geo.js library<br />Provides abstraction between all the Geolocation methods at our disposal<br />Gears is typically more accurate at providing location<br />Google has been collecting location data using Street View cars<br />
  16. 16. Using Geolocation (W3C)<br />To poll for location one-time<br />navigator.geolocation.getCurrentPosition(); <br />To continuously poll for location<br />navigator.geolocation.watchPosition();<br />Demonstration function<br />navigator.geolocation.getCurrentPosition(function(position) {  <br />  do_something(position.coords.latitude, position.coords.longitude);  <br />});  <br />Reference: http://bit.ly/c3i7nY<br />
  17. 17. Using geo.js<br />To poll for location one-time<br />if(geo_position_js.init()){   geo_position_js.getCurrentPosition(success_callback,error_callback);}else{   alert("Functionality not available");}<br />To continuously poll for location<br />if(geo_position_js.init()){   geo_position_js.watchPosition(success_callback,error_callback);}else{   alert("Functionality not available");}<br />Reference: http://bit.ly/b1EfnM<br />
  18. 18. Web Storage<br />Considerably better than having to use a lot of cookies<br />We can store using two distinct database methods<br />Key-Value<br />SQL<br />Combine with offline support for epic win<br />
  19. 19. Key-Value Web Storage<br />Quote @chrisdavidmills: “Cookies on Crack”<br />A better way to store persistence data<br />Works offline<br />Cookies can be moved back to being just session data storage<br />Easy to add and remove data from<br />They even work in Internet Explorer 8!<br />
  20. 20. K/V Web Storage Continued<br />Two distinct storage classes<br />sessionStorage<br />Global storage instance that lasts until the end of the session<br />localStorage<br />Storage isntance that lasts until either cleared by the browser, the DOM, or the user<br />For now we’ll demonstrate localStorage<br />Methods to access sessionStorage are the same<br />localStorage<br />Reference: http://bit.ly/d4CaSL<br />
  21. 21. Using K/V Web Storage<br />Store a value<br />value = localStorage.setItem(name);<br />Recover a value<br />value = localStorage.getItem(name);<br />Remove a value<br />localStorage.removeItem(name);<br />Clear the entire database<br />localStorage.clear();<br />
  22. 22. SQL Web Storage <br />Meant for use in Offline web applications<br />Based on statements in HTML5 WG Drafts<br />Currently W3C Spec calls for featureset “similar” to Sqlite 3.6.19<br />Spec is frozen because not all user-agents are expected to use Sqlite nor does the W3C give any baseline of what version of SQL to support<br />Reference: http://bit.ly/dwNL80<br />
  23. 23. Web Workers<br />We can use Web Workers to run JavaScript in OS threads<br />Abstracting intense algorithms or functions to web workers can significantly improve web app function and decrease risk of failure<br />Workers can’t interface with the DOM, so they should be treated like software libraries<br />Reference: http://bit.ly/btoTEl<br />
  24. 24. The Relative Future of HTML5<br />Codec and patent trolls, and that company that makes Photoshop<br />
  25. 25. The reality of licensing fees<br />Thankfully, the MPEG-LA has chosen to extend its current licensing rates on H.264 AVC until 2018 (???)<br />Free for the first 100,000 views<br />$.35 USD per individual view from content provider after 100,000 views<br />Still, no patent-freecodecs has been approved by the W3C<br />Nokia and Apple lobbied OggVorbis/Theora out over fears of submarine patents<br />Current proposals suggest using older ITU-T standards or Dirac<br />Google acquired On2 Media, the supplier of VP6 & VP8<br />MP3 will be completely patent-free in 2017<br />That is, if submarine patents don’t surface<br />
  26. 26. An Adobe isn’t a Glass House<br />Much of HTML5 is split into Working Groups<br />Canvas (or Context 2D) is a working group that has gained a lot of traction<br />Adobe has put this working group on hold over claims revealed to be milestone related<br />If Adobe is really doing this to slow down Context 2D while they keep selling Flash, they aren’t being upfront about it<br />
  27. 27. Any Questions?<br />
  28. 28. The code is yours, take it<br />Get the demo code used here<br />git clone git://github.com/ghostfreeman/DevChatt-HTML5-Code.git<br />http://ghostfreeman.net/p2/devchatthtml5/DevChatt-HTML5-Code.tar.gz<br />Absorb Everything HTML5<br />http://doctype.tv<br />Has a series of podcasts covering HTML5, notably web storage<br />http://html5doctor.com<br />Search #HTML5 on Twitter<br />http://reddit.com/r/html5<br />Get this slideshow<br />http://slideshare.net/ghostfreeman keep pressing F5<br />Make My Life Difficult<br />http://ghostfreeman.net<br />@ghostfreeman on Twitter<br />

×