A Brief Interlude into HTML5


Published on

The slides for the January 2010 presentation at the Chattanooga PHP Developers meeting.

Published in: Technology, Design
1 Like
  • Be the first to comment

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

No notes for slide
  • This presentation © 2010 Cameron Kilgore. Redistribution permitted under terms of the Creative Commons 3.0 BY-ND License
  • Explain that this is a part of a series of discussions on HTML5
  • Switch out to modernizr_demo.html
  • Switch out to canvas_demo.html
  • Switch out to video_demo.html
  • Switch out to audio_demo.html
  • There were plans for a git repo but those were axed when DreamHost complicated things. Explain that the gzip lacks the Moon trailer due to redistribution rights.
  • A Brief Interlude into HTML5

    1. 1. A Brief Interlude into<br />HTML5<br />The future problems with the web, today!<br />
    2. 2. What in the world is HTML5? <br />HTML5 is the successor to XHTML1<br />Has officially superseded the proposed XHTML2<br />It gives us a few standardized JavaScript APIs we can do cool stuff with<br />Adds new tags that will give us the ability to embed media and create interactive web elements with ease<br />We can use it to create web applications that can take physical location into account<br />Adds new tags we can use to create new semantically-sound content elements, such as navigation and template headings/footers<br />Run JavaScript in threads and store data locally<br />The ability to create offline web applications<br />HTML5 is literally, the foundation to the next-generation of web applications<br />
    3. 3. Say hello to my little friends<br />This presentation will focus on three new HTML5 tags exclusively<br />&lt;canvas&gt;<br />&lt;audio&gt;<br />&lt;video&gt;<br />Future presentations will focus on Geolocation, DOM Storage, semantics, and other topics<br />
    4. 4. Should I even ask about IE?<br />Nearly every modern browser supports some HTML5<br />Support varies from browser to browser<br />Internet Explorer does not<br />Good HTML5 must encompass one of two techniques<br />We must design it so it &quot;progressively enhances&quot; content and feature sets on web apps<br />If you run IE, some features should be implemented in JS/Flash or not be supported at all<br />Or we can ignore IE altogether<br />And nothing of value was lost<br />So for the time being HTML5 support is fragmented but it can be used for many things<br />
    5. 5. Detecting HTML5<br />We can use the Modernizr JS library to detect HTML5 support<br />We can also use it to determine codec support for audio and video<br />Also good for detecting CSS3 features<br />
    6. 6. &lt;canvas&gt;<br />As defined in the WHATWG standard, it’s a bitmap element we can draw in using JavaScript<br />This rendering is done in immediate mode<br />Not an alternative to technologies like SVG, but can be seen as a compliment<br />Right now its limited to 2D graphics<br />There are proposals to introduce a 3D canvas context<br />Absolutely is not supported by IE<br />excanvas.js can implement partial support<br />
    7. 7. &lt;video&gt;<br />Do video in a flash without that other thing<br />Implementation dependant on a browser with codecs compiled<br />This continues to be a sore point with developers and the HTML5 committees<br />We can treat video like any other HTML element, and manipulate it with JS and even the &lt;canvas&gt;<br />Where is your god now, Adobe?<br />Two codecs are being used for HTML5 video<br />OggTheora<br />MPEG-4 H.264<br />W3C, WHATWG have not specified what codec to use<br />Originally, WHATWG said to use Ogg<br />
    8. 8. &lt;audio&gt;<br />Like video, only without the video<br />OggVorbis is generally the sole accepted codec<br />and WAV<br />MP3 support is set to become the norm in 2011<br />Patents will expire<br />If you can’t wait, Chrome and Safari support it<br />
    9. 9. The Apprehension of the H.246 License<br />Using H.264 is not free at all – it costs money to use the codec<br />And in 2011, you will be required to pay up to 30 cents per view for content provided with H.264<br />OR up to $20,000 per year<br />The licensing issue continues to be a sore point in the W3C and WHATWG steering committees<br />OggTheora not the ‘sawzall’ solution we need because its protection to submarine patents can’t be guaranteed<br />And as such, it is no longer part of the HTML5 standard<br />Licensing future for H.264 and AVC not yet certain<br />Firefox does not support H.264 due to this very issue (Chrome, Safari do)<br />But Chrome also supports OggTheora<br />You see where this is heading, don’t you?<br />
    10. 10. Any Questions?<br />
    11. 11. Know the score<br />Get the code<br />http://bit.ly/62AH3A<br />Get this slideshow<br />http://bit.ly/7Pkuxm<br />Explore more HTML5<br />diveintohtml5.org<br />http://bit.ly/6U2tLT<br />html5doctor.com<br />