DevChatt: The Wonderful World Of Html5


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • © 2010 Cameron Kilgore. Redistribution permitted under CC-BY-ND 3.0. Explain that links and other minor details will be tweeted along with each slide at [twitter]The Wonderful World of HTML5, let’s do this![/twitter]
  • We won’t be discussing CSS3 here.
  • All demos will be displayed in Google Chrome, because it is the shit. YMMV if you use Firefox or Safari.
  • All of these things could take HOURS to demonstrate, and I didn’t have the time go over these.
  • Show Mozilla and Scratchpad demos.
  • Both can be used for different purposes.
  • Show audio demo. Music provided by Kevin MacLeod, and is licensed CC-BY 3.0.
  • Show video demo. Video is “Hot Cakes” by El Ten Eleven, and is © El Ten Eleven and Bar/None Records used with permission. I also want to point out that Safari passes down HTML5 Video to the OS for processing, so any codec can be supported if QuickTime/QTKit supports it (not so on the iPhone).
  • Firefox is the only browsers supporting the W3C Geolocation classes and methods. Opera supports it in a special build. Chrome supports it in the Nightlies. The current release of Chrome supports it only through Gears, so writing code that will interface strictly with Gears. There must be a simpler way…
  • Due to the lack of support across all browsers, in addition to time restrictions (sob story about laptop here), we will only be showing a demo of SQL Storage.
  • Due to time restrictions, we will not be showing a written demo for Web Workers. But the reference I’ve linked to should get you on your way. (Show HTML5 Demos demo of Web Workers) (
  • Dirac is, IMO, the most likely as it has the backing of a large organization (The BBC), but until the W3C breaks its silence, I don’t think we should be discussing what codecs to use.
  • © 2010 Cameron Kilgore. Redistribution permitted under CC-BY-ND 3.0. [twitter]Thanks again for showing up, I hope you’ve enjoyed this![/twitter]
  • Also mention a continuing series on HTML5 to be continued at the Chattanooga PHP Developers meetings.
  • 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 /><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:<br />
    8. 8. Demonstration Code<br />All the demos henceforth can be viewed here<br /><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:<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:<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:<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:<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:<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:<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:<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:<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://<br /><br />Absorb Everything HTML5<br /><br />Has a series of podcasts covering HTML5, notably web storage<br /><br />Search #HTML5 on Twitter<br /><br />Get this slideshow<br /> keep pressing F5<br />Make My Life Difficult<br /><br />@ghostfreeman on Twitter<br />