DevChatt: The Wonderful World Of Html5

  • 2,263 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,263
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

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
  • © 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.com/ghostfreeman. [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. http://webkit.org/demos/sticky-notes/index.html
  • 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) (https://developer.mozilla.org/En/Using_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.

Transcript

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