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
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
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
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
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.