66. WebVTT<video controls preload="metadata"> <source src="rocpoc.mp4"> <track label="English" kind="subtitles" src="subtitles_en.vtt”> </video> WEBVTT 1 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... 2 00:00:04,000 --> 00:00:07,100 It’s pretty sweet. I just hope that people use the new features thoughtfully. http://html5videoguide.net/presentations/WebVTT
78. HTML5 Feature Areas Semantics: Markup describes purpose of content(e.g. <header> vs. <div class="header">) CSS3: New selectors, more visual options Multimedia: <audio> and <video> Graphics: <canvas> and in-line SVG
79. HTML5 Feature Areas Device Access: Geolocation, accelerometer, etc. Performance: Run JS in background Offline/Storage: Use web apps on/off line Connectivity: Improved XHR, SSE, WebSockets
138. HTML <!—Multiple videos with alternate Flash content--> <video controls> <source src=”goldrush.webm"> <source src=”goldrush.mp4”> <track label="English" kind="subtitles"srclang="en" src="subtitles_en.vtt"> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <param name="movie" value="rocpoc.swf"/> A movie by Rocky Lubbers </object> </video> Flash Video Fallback
139. WebVTT WEBVTT 1 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... 2 00:00:04,000 --> 00:00:07,100 It’s the next big thing! I just hope that people use the new features thoughtfully. WebVTT
176. Add as attribute to HTML elementHTML <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title> Example manifest Attribute http://appcachefacts.info/
177.
178. Web and Web Database storage a.k.a. "cookies on steroids”
194. Use Modernizr.load to test for feature supportJavascript Modernizr.load({ test: Modernizr.websocket, yep : ’websocket.js', nope: ’kz-websocket-polyfill.js' }); http://www.sfhtml5.org/events/28458331