Peter lubbers-html5-overview-sf-dev-conf-2011

4,765
-1

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • Peter, this is a really good presentation but on slide 18 you say, 'OK, so it's not quite ready...' I know what you're trying to say but I'd caution you regarding how you say it. Reading this, many people would come away saying that a noted HTML5 expert is saying HTML5 is not ready to use yet when that isn't quite what you meant!

    Also, what happened to the text on slide 64? Slides 68 t & 70 too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,765
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
115
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • Coming to a head  vote in W3C, WHATWG created
  • Well, that’s the promise, actually  next slide
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • HTML, CSS, and JS
  • Not deprecated, but obsolete
  • They’re all Web storage
  • Peter lubbers-html5-overview-sf-dev-conf-2011

    1. 1. Title<br />HTML5Shoes:@matijs<br />HTML5: The30,000 Foot Overview(Updated)<br />Peter Lubbers<br />Senior Director, Technical Communication<br />Kaazing<br />
    2. 2. About @peterlubbers<br />
    3. 3. Not to Be Confused With…<br />
    4. 4. About Kaazing<br /><ul><li>High-performance WebSocket Platform
    5. 5. Global HTML5 Training
    6. 6. Check out our booth, win prizes
    7. 7. HTML5 Live Conference (NYC, London)</li></li></ul><li>SF HTML5 User Group<br /><ul><li>Free
    8. 8. Great monthly events with top speakers
    9. 9. Video-taped
    10. 10. Twitter: @sfhtml5
    11. 11. Sign up today:www.sfhtml5.org</li></ul>The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/<br />
    12. 12. Last Year…<br /><ul><li>SF HTML5 Meetup (<100 members)
    13. 13. Less HTML5 features
    14. 14. Less browser support
    15. 15. 2 Hours + 1 Hr Q&A
    16. 16. 30,000’ Overview</li></ul>http://www.slideshare.net/peterlubbers/html5-4378635<br />
    17. 17. Today…<br /><ul><li>SF HTML5 Meetup: ~2500 members
    18. 18. More HTML5 features
    19. 19. More browser support
    20. 20. 1 Hr (incl. Q&A)
    21. 21. So… talk faster or</li></li></ul><li>100,000 Foot Overview<br /><ul><li>Introducing the 100,000’ Overview</li></li></ul><li>Agenda<br /><ul><li>What is HTML5?
    22. 22. HTML5 History in <2 minutes
    23. 23. Why HTML5?
    24. 24. HTML5 Features
    25. 25. Your 2011 HTML5 Toolkit
    26. 26. Q&A</li></ul>#html5devconf<br />@peterlubbers<br />
    27. 27. <ul><li>The new major milestone for HTML
    28. 28. Focused on Web Applications
    29. 29. Web apsare rapidly becoming first class apps, on par with desktopand native apps
    30. 30. Different definitions</li></ul>What is HTML5?<br />HTML<br />JavaScript<br />CSS<br />NEWT?<br />
    31. 31. Browser Support<br /><ul><li>Modern browsers already support a lot of features, including mobile browsers:
    32. 32. http://html5test.com
    33. 33. Support varies widely for different features
    34. 34. IE 6,7 and 8: minimal support
    35. 35. Use support matrices:
    36. 36. http://caniuse.com
    37. 37. http://mobilehtml5.org</li></ul>http://paulirish.com/2010/high-res-browser-icons<br />
    38. 38. HTML Timeline<br />
    39. 39. HTML (1.0)<br /><ul><li>1991: HTML Tags Specification
    40. 40. 1993: First HTML Specification (IETF)
    41. 41. First spec ~41 Pages Long</li></li></ul><li>HTML 2.0, 3.0 <br /><ul><li>1995: HTML 2.0 (IETF)
    42. 42. 1995: HTML 3 Proposed and Abandoned</li></li></ul><li>HTML 3.2, 4.0<br />1997: HTML 3.2 (W3C)<br />1997: HTML 4.0 (W3C)<br />
    43. 43. HTML 4.01, XHTML, Web 2.0<br />1999: HTML 4.01<br />2000: XHTML 1.0 <br />2001: Last 4.01 Errata<br />2001: XHTML 1.1<br />2004: Web 2.0<br />
    44. 44. HTML5<br /><ul><li>2004: WHATWG (Web Apps 1.0)
    45. 45. 2008: HTML5 Working Draft W3C
    46. 46. 2009: XHTML 2.0 Dropped</li></li></ul><li>HTML5<br /><ul><li>OK, so it’s not quite ready…
    47. 47. May 24 2011: Working Draft Last Call
    48. 48. 2012: Candidate Recommendation
    49. 49. 2022: Proposed Recommendation
    50. 50. Lots of feature support already</li></li></ul><li>Why HTML5?<br /><ul><li>5 Reasons why you should care!</li></li></ul><li>1) HTML5 Paves the Cowpaths<br /><ul><li>Because HTML5 takes a pragmatic approach, fixing common real-world problems</li></li></ul><li>PavedCowpath<br />HTML4<br /> <form><br /> <input name="email" type="text"><br />crapload of validation codeor extra js lib<br />(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01-x09x0bx0cx0e-x7f])+)])<br />HTML5<br /><input type=email required><br />
    51. 51. 2) HTML5 Simplifies<br />Because HTML5 is, well, simpler<br />
    52. 52. Simplified Doctype<br />HTML4/XHTML<br /><ul><li>HTML 4.01 Strict
    53. 53. HTML 4.01 Transitional
    54. 54. HTML 4.01 Frameset
    55. 55. XHTML 1.0 Strict
    56. 56. XHTML 1.0 Transitional
    57. 57. XHTML 1.0 Frameset
    58. 58. XHTML 1.1</li></ul> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />HTML5<br /><!DOCTYPE html><br />
    59. 59. Simplified Character Set<br />HTML4<br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />HTML5<br /><meta charset=utf-8><br />
    60. 60. SimplifiedMarkup<br />HTML5<br /> <!DOCTYPE html><br /> <meta charset=utf-8><br /> <title>HTML5</title><br /> <h1>HTML5!</h1><br />DOM<br /> 70 characters!<br />
    61. 61. Simplified Markup<br />Two HTML5 pages in onetweet!<br />
    62. 62. 3) HTML5 is Universal<br /><ul><li>Because HTML5 works in all languages and accessibility is built in from the ground up </li></li></ul><li>Universal Access<br /><ul><li>Support for all world languages
    63. 63. For example, the new <ruby> element
    64. 64. Accessibility
    65. 65. Semantic markup
    66. 66. WebVTT</li></ul><video controls preload="metadata"> <br /> <source src="rocpoc.mp4"><br /> <track label="English" kind="subtitles" <br />src="subtitles_en.vtt”><br /></video> <br />WEBVTT<br />1<br />00:00:01,000 --> 00:00:03,050<br />What do I think about HTML 5?... <br />2<br />00:00:04,000 --> 00:00:07,100<br />It’s pretty sweet. I just hope that people use the new features thoughtfully. <br />http://html5videoguide.net/presentations/WebVTT<br />
    67. 67. 4)HTML5 Means Less Plugins<br /><ul><li>Because HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, sockets)</li></li></ul><li>Plugins<br /><ul><li>Built-in is better than bolt-on —@brucel
    68. 68. Plugins may not be installed
    69. 69. Pluginscan be an attack vector (Proxy poisoning)
    70. 70. “Whenever a Mac crashes, more often that not is because of Flash” —Steve Jobs</li></ul>http://www.infoq.com/news/2011/09/Metro-Plug-ins<br />
    71. 71.
    72. 72. Secure by Default<br /><ul><li>HTML5 uses origin-based security
    73. 73. Defines secure cross-origin sharing
    74. 74. HTML5 is not without flaws, but issues will be fixed (unlike proprietary plugins)
    75. 75. Canvas image data
    76. 76. WebSocket proxy poisoning</li></ul>http://enable-cors.org/<br />
    77. 77. 5) It’s Cool!<br /><ul><li>Because all the cool kids use it</li></li></ul><li>HTML5 Feature Areas<br />
    78. 78. HTML5 Feature Areas<br />Semantics: Markup describes purpose of content(e.g. <header> vs. <div class="header">)<br />CSS3: New selectors, more visual options <br />Multimedia: <audio> and <video><br />Graphics: <canvas> and in-line SVG<br />
    79. 79. HTML5 Feature Areas<br />Device Access: Geolocation, accelerometer, etc.<br />Performance: Run JS in background<br />Offline/Storage: Use web apps on/off line<br />Connectivity: Improved XHR, SSE, WebSockets<br />
    80. 80. Semantic Markup & Microdata<br />
    81. 81. Valid HTML vs. Valid XHTML<br /><ul><li>If you’re so proud of your XHTML…
    82. 82. Why don’t you serve it with the right mime type?
    83. 83. Over 90% of XHTML is delivered with the text/html mime type and therefore broken
    84. 84. Delivering XHTML as application/xhtml+xmlis not supported in old IE (Will prompt for download)</li></li></ul><li>Valid HTML vs. Valid XHTML<br /><ul><li>Use HTML5 and create valid HTML
    85. 85. http://html5.validator.nu/
    86. 86. http://validator.w3.org
    87. 87. HTML5 allows XML syntax from XHTML 1.0 for backward compatibility
    88. 88. For example: <br />
    89. 89. HTML5 has well-definedprocessing rules</li></ul>http://validator.nu<br />
    90. 90. New HTML5 Elements<br /><canvas><br /><article><br /><audio><br /><aside><br /><command><br /><dialog><br /><details><br /><datalist><br /><header><br /><hgroup><br /><footer><br /><figure><br /><embed><br /><nav><br /><keygen><br /><mark><br /><meter><br /><ruby><br /><output><br /><section><br /><rp><br /><rt><br /><video><br /><source><br />http://dev.w3.org/html5/markup/elements.html#elements<br />
    91. 91. Removed Elements<br /><acronym><br /><basefont><br /><applet><br /><big><br /><dir><br /><font><br /><center><br /><s> <strike><br /><frame><br /><u><br /><frameset><br /><noframes><br /><tt><br />
    92. 92. Semantic Markup Benefits<br /><ul><li>Based on research (Opera, Google studies on commonly used div class and id names)
    93. 93. Cleaner, less verbose markup (replace div and span elements with meaningful elements)
    94. 94. Machine readable:
    95. 95. Search engines
    96. 96. Syndication
    97. 97. Linking and sharing</li></li></ul><li>Anatomy of an HTML5 Page<br />
    98. 98. HTML5 Page in IE<br />I.E. <9<br />
    99. 99. Microdata<br /><ul><li>Emphasis on machine readability (SEO)
    100. 100. Easy-to-write syntax (add attributes to any element)
    101. 101. Use microdata vocabularies: http://data-vocabulary.org</li></li></ul><li>HTML<br /><section itemscope><br /> <article id="html5-fast-track" <br />itemtype="http://data-vocabulary.org/Product"><br /> <header><br /> <h1 itemprop="name”>HTML5 Fast Track</h1><br /> </header><br /> <p itemprop="description">The HTML5 Fast Track <br /> training course is a two day experience... <br /> </p><br /> </article><br /></section><br />HTML5 Microdata<br />
    102. 102. HTML5 Forms<br /><ul><li>New form functionality:
    103. 103. No JavaScript required
    104. 104. Native date and color pickers
    105. 105. Search, e-mail, web address
    106. 106. Client side validation
    107. 107. Spin boxes and sliders
    108. 108. Features degrade gracefully (unknown input types are treated as text)
    109. 109. Benefits:
    110. 110. Virtual keyboard support
    111. 111. Native widgets and error messages are internationalized</li></li></ul><li>HTML<br /><form> <br /> <p><label for="phone">Telephone number:</label><br /> <input type=tel<br />placeholder="(xxx) xxx-xxx" required></p><br /> <p><label for="emailaddress">E-mail address:</label><br /> <input id="emailaddress" name="emailaddress" <br />type=email required></p><br /> <p><label for="dob">DOB:</label><input id="dob” name="dob” type=date value=1944-06-06 max=1992-05-01></p><br /> <p><label for="color">Shirt Color:</label><br /> <input id="color" name="color" type="color"></p><br />Example HTML5 Form<br />
    112. 112. Forms features<br />Date picker<br />Color picker<br />
    113. 113. CSS3<br />
    114. 114. CSS Level 3<br /><ul><li>Modularized for easier browser uptake
    115. 115. Almost 50 modules (readiness varies)
    116. 116. Use browser-specific prefixes until finalized
    117. 117. Dramaticallyimproves performance
    118. 118. Examples:
    119. 119. Border radius (roundedcornerswithout images)
    120. 120. Gradients
    121. 121. Multi-column layout
    122. 122. Reflection
    123. 123. Etc.</li></ul>http://css3please.com/<br />
    124. 124. Rounded corners<br />CSS<br />a:hoverimg {<br /> border-radius: 10px;<br /> border: 2px solid #F47D31;<br /> -webkit-transform: scale(1.05);<br />}<br />
    125. 125. CSS<br />/* Linear Gradient for WebKit and Mozilla in CSS3 */<br />background-image: -moz-linear-gradient(top, #F47D31, #888);<br />background-image: -webkit-gradient( linear, left top, left bottom, color-stop (0,#F47D31), color-stop(1, #888));<br />Copyright © 2011 - Kaazing Corporation. All rights reserved.<br />Example: Linear Gradient<br />
    126. 126. CSS<br />/* Define a fallback color and image */<br />background-color: #f47d31;<br />background: #888888 url("gradient-bg.png") repeat-x top;<br />/** In Opera, you can also use SVG: <br />background: #f47d31 url("gradient-bg.svg");<br />**/<br />/* IE(6&7, 8) Fallback, specify 6-digit colors here */<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF47D31', EndColorStr='#FF888888');<br />-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF47D31', EndColorStr='#FF888888')"; <br />Copyright © 2011 - Kaazing Corporation. All rights reserved.<br />Linear Gradient Fallback<br />
    127. 127. Multi-ColumnLayout<br />CSS<br />/* Column layout*/<br />body {<br /> -webkit-column-count:3;<br /> -webkit-column-width: 100px;<br /> -webkit-column-gap: 10px;<br /> -webkit-column-rule: 1px solid;<br /> -moz-column-count:3;<br /> -moz-column-width: 100px;<br /> -moz-column-gap: 10px;<br /> -moz-column-rule: 1px solid;}}<br />
    128. 128. Reflection<br />For images, videos, etc.<br />CSS<br />-webkit-box-reflect:<br /> below 2px -webkit-gradient(<br /> linear, left top, left bottom, <br /> from(transparent), color-stop(<br /> 0.6, transparent), to(white));<br />
    129. 129. Multimedia<br />
    130. 130. HTML5 Audio and Video<br /><ul><li>New HTML5 media elements
    131. 131. <audio> and <video>
    132. 132. Native audio and video (no plugins required)
    133. 133. Programmable with JavaScript
    134. 134. Style with CSS
    135. 135. Add videos and audio as if it was an image
    136. 136. Codec support varies, but multiple source elements and fallback content can be used</li></li></ul><li>HTML5 Video Example<br />HTML<br />//Basic Video<br /><video controls src=”goldrush.mp4"><br /> A movie about HTML5<br /></video><br />// Video with additional attributes<br /><video id="movies" <br /> controls preload="metadata" <br /> width="400px" height="300px" <br /> poster="html5.png" ><br /> <source src="goldrush.webm"><br /> <source src="goldrush.mp4"><br /> <track label="English" kind="subtitles"srclang="en" src="subtitles_en.vtt"><br /> A movie by Rocky Lubbers<br /></video><br />
    137. 137.
    138. 138. HTML<br /><!—Multiple videos with alternate Flash content--><br /><video controls><br /> <source src=”goldrush.webm"><br /> <source src=”goldrush.mp4”><br /> <track label="English" kind="subtitles"srclang="en" src="subtitles_en.vtt"><br /> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <br /> <param name="movie" value="rocpoc.swf"/> <br /> A movie by Rocky Lubbers<br /> </object> <br /></video><br />Flash Video Fallback<br />
    139. 139. WebVTT<br />WEBVTT<br />1<br />00:00:01,000 --> 00:00:03,050<br />What do I think about HTML 5?... <br />2<br />00:00:04,000 --> 00:00:07,100<br />It’s the next big thing! I just hope that people use the new features thoughtfully. <br />WebVTT<br />
    140. 140. Graphics and 3D<br />
    141. 141. HTML5 Canvas and SVG<br /><ul><li>Provide native drawing functionality
    142. 142. Previously possible only with plugins (Flash, Silverlight)
    143. 143. Completely integrated into HTML5documents (part of DOM)
    144. 144. Can be styled with CSS
    145. 145. Can be controlled with JavaScript
    146. 146. Use for animation, charts, images,pixel manipulation, and so on
    147. 147. Canvas supports 2D and 3D (WebGL)</li></li></ul><li>Canvas Pixel Data<br />
    148. 148. Interactive Canvas Animation<br />everytimezone.com<br />
    149. 149. Canvas Demos<br />www.canvasdemos.com<br />
    150. 150. 3D Canvas (WebGL)<br />http://bodybrowser.googlelabs.com/body.html<br />
    151. 151. Device Access<br />
    152. 152. Device Access Features<br /><ul><li>Lots of features, varying levels of suport:
    153. 153. Geolocation
    154. 154. Allows users to share their locationfor location-aware services
    155. 155. Implemented in all browsers
    156. 156. Drag and Drop
    157. 157. Filesystem API
    158. 158. Speech Input
    159. 159. Device orientation (accelerometer)
    160. 160. Webcam (bar code, QR code scanning)</li></li></ul><li>Geolocation with Map APIs<br />
    161. 161. Device Orientation<br />Demo: http://slides.html5rocks.com/#slide-orientation<br />Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html<br />
    162. 162. Speech Input<br />HTML<br /><input type=text x-webkit-speech><br />
    163. 163. Performance<br />
    164. 164. Web Workers<br /><ul><li>JavaScript is single-threaded
    165. 165. HTML5 Web Workers provide background processing capabilities to web applications
    166. 166. Run background JavaScript (like a thread)
    167. 167. Avoid blocking the UI thread</li></li></ul><li>Offline and Storage<br />
    168. 168. Offline Web Applications<br /><ul><li>Use complete web sites (documentation sets) in offline mode
    169. 169. Cache pages that have not been visited yet
    170. 170. Browsers cache data in an Application Cache
    171. 171. HTML5 allows online and offline detection
    172. 172. Allows prefetching of site resources (can speed up pages)
    173. 173. Simple manifest mechanism</li></li></ul><li>appcache File<br />CACHE MANIFEST<br /># manifest version 1.0.1 <br /># Files to cache<br />index.html<br />cache.html<br />html5.css<br />image1.jpg<br />img/foo.gif<br />http://www.example.com/styles.css<br /># Use from network if available<br />NETWORK:<br />network.html<br /># Fallback content<br />FALLBACK:<br />/ fallback.html<br />Example appcache File<br />
    174. 174. <ul><li>Reference the manifest file:
    175. 175. Use .appcache extension (*.manifest also allowed)
    176. 176. Add as attribute to HTML element</li></ul>HTML<br /><!DOCTYPE html><br /><html manifest="offline.appcache"><br /> <head><br /> <title>HTML5 Application Cache Rocks!</title><br />Example manifest Attribute<br />http://appcachefacts.info/<br />
    177. 177. Web and DB Storage<br /><ul><li>Many powerful new client-side storage options
    178. 178. Web and Web Database storage a.k.a. "cookies on steroids”
    179. 179. Web Storage (Session and Local Storage
    180. 180. Web Database Storage</li></ul>Cookies<br />Session<br />Local<br />Database<br />
    181. 181. Connectivity and Real Time<br />
    182. 182. Connectivity Features<br /><ul><li>Cross Document Messaging
    183. 183. XMLHttpRequest Level 2
    184. 184. Server-Sent Events
    185. 185. WebSockets
    186. 186. CORS</li></li></ul><li>WebSocket<br /><ul><li>Replaces Comet, Reverse Ajax polling</li></li></ul><li>WebSockets<br /><ul><li>New W3C API and IETF Protocol for low-latency, real-time, bi-directional connections
    187. 187. Easily add social networking components(Chat, etc.) and real-time data to static pages</li></li></ul><li>http://forex.kaazing.me<br />
    188. 188. The 2011 HTML5 Toolbox<br />
    189. 189. Browser Developer Tools<br />
    190. 190. HTML5 Boilerplate<br /><ul><li>The best way to get started</li></ul>http://html5boilerplate.com<br />
    191. 191. Polyfills and Emulation<br /><ul><li>Feature detect with Modernizr (part of H5BP):http://www.modernizr.com
    192. 192. Complete polyfill list: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills</li></li></ul><li>Modernizr<br /><ul><li>Part of H5BP
    193. 193. Download or create a custom build
    194. 194. Use Modernizr.load to test for feature support</li></ul>Javascript<br />Modernizr.load({<br /> test: Modernizr.websocket,<br /> yep : ’websocket.js',<br /> nope: ’kz-websocket-polyfill.js'<br />});<br />http://www.sfhtml5.org/events/28458331<br />
    195. 195. Chrome Frame <br /><ul><li>The Ultimate polyfill
    196. 196. Embed Chrome in IE
    197. 197. No admin privileges needed to install</li></ul>HTML<br /><!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame <br /><meta http-equiv="X-UA-Compatible“ content="IE=edge,chrome=1”><br />http://code.google.com/chrome/chromeframe/<br />
    198. 198. Performance Testing Tools<br /><ul><li>Greatfree Tools:
    199. 199. Page Speed
    200. 200. YSlow
    201. 201. Chrome Speed Tracer</li></li></ul><li>Questions?<br /><ul><li>Now or Later
    202. 202. E-mail: peter.lubbers@kaazing.com
    203. 203. Twitter: @peterlubbers
    204. 204. LinkedIn: Peter Lubbers</li></li></ul><li>Buy the Book!<br /><ul><li>Pro HTML5 Programming (Apress, 2010)
    205. 205. 50% off e-book coupon code:HTML5CONFhttp://www.prohtml5.com</li></li></ul><li>Useful HTML5 Resources<br /><ul><li>Modernizr
    206. 206. Small, simple JavaScript library that checks support for HTML5 and CSS3 features
    207. 207. Moves away from user-agent sniffing and uses feature detection insteadhttp://www.modernizr.com/
    208. 208. html5shiv
    209. 209. Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/
    210. 210. html5boilerplate
    211. 211. http://html5boilerplate.com</li></li></ul><li>Useful HTML5 Resources<br /><ul><li>HTML5 Validators (Experimental):
    212. 212. http://html5.validator.nu/
    213. 213. http://validator.w3.org/
    214. 214. HTML5 outline algorithm test page
    215. 215. http://gsnedders.html5.org/outliner/
    216. 216. Performance:
    217. 217. Chrome Speed Tracerhttp://code.google.com/webtoolkit/speedtracer/
    218. 218. Yslow (for Firebug)http://developer.yahoo.com/yslow/
    219. 219. Page Speed (Firefox and Chrome Add-On)http://code.google.com/speed/page-speed/docs/using_chrome.html</li></li></ul><li><ul><li>HTML5 User Group:
    220. 220. San Francisco: http://www.sfhtml5.org/
    221. 221. Apress book: Pro HTML5 Programming
    222. 222. (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
    223. 223. 5by5 podcasts:
    224. 224. The Web Ahead
    225. 225. The Big Web Show
    226. 226. http://5by5.tv</li></ul>Learn More<br />
    227. 227. Get Trained!<br /><ul><li>Proven, practical worldwide HTML5 Training (training from experts, not just trainers):
    228. 228. E-mail us: training@kaazing.com
    229. 229. Web site: http://kaazing.com/training/</li></li></ul><li>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×