HTML5: The Next Internet Goldrush


Published on

This HTML5 presentation--delivered at the Society for Technical Communication (STC) in May and again in August 2011--provides a high level overview of HTML5 and discusses the impact that HTML5 will have on Technical Communication.

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • HTML, CSS, and JS
  • Coming to a head  vote in W3C, WHATWG created
  • Well, that’s the promise, actually  next slide
  • The user is king! There is XHTML5 but it’s very strict.HTML5 is not as strict as previous versions of HTML.Show example /markup/sample.htmlRemove <head>, <html>, and <body>Just leave:<!DOCTYPE html> <meta charset=“utf-8”> <title>HTML 5</title> <h1>Header</h1>That’s enough. This HTML5, which would fit in a tweet, would render. You can even leave off the closing </h1> tag.For practical purposes, pick a style you like and stick with it. (Kind of like writing a document!)HTML5 strives to separate content from presentation where possible (use CSS)Most of the presentational features from earlier versions of HTML are no longer supportedThis was already in the works (HTML4 Transitional, XHTML1.1)
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • Easily as big as DITA
  • Not deprecated, but obsolete
  • They’re all Web storage
  • HTML5: The Next Internet Goldrush

    1. Title<br />HTML5: The Next Internet Gold Rush(HTML5 and its impact on technical communication)<br />Peter Lubbers<br />Senior Director, Technical Communication<br />Kaazing<br />
    2. About @peterlubbers<br />
    3. Not to Be Confused With…<br />
    4. Agenda<br /><ul><li>HTML5 History (The 2-Minute Version)
    5. HTML5 Vision
    6. HTML5 Feature Areasand their impact onTechnical Communication
    7. Q&A</li></ul>#stc<br />@peterlubbers<br />#html5<br />
    8. Word on the Street…<br />"The world is moving to HTML5"<br />—Steve Jobs, Apple<br />"The Web has not seen this level of transformation, this level of acceleration, in the past ten years… we're betting big on HTML5"<br />—Vic Gundotra, VP of Engineering, Google <br />“If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we.<br /> —Steve Ballmer, CEO Microsoft<br />"I had no idea there was so much HTML5 already in play"<br />—Tim O'Reilly<br />"HTML5’s impact on Tech Com will be bigger than DITA"<br />—Peter Lubbers<br />
    9. HTML5 Feature Areas<br />
    10. HTML Timeline<br />
    11. HTML (1.0)<br /><ul><li>1991: HTML Tags Specification
    12. 1993: First HTML Specification (IETF)
    13. First spec ~41 Pages Long</li></li></ul><li>HTML 2.0, 3.0 <br /><ul><li>1995: HTML 2.0 (IETF)
    14. 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 />
    15. 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 />
    16. HTML5<br /><ul><li>2004: WHATWG (Web Apps 1.0)
    17. 2008: HTML5 Working Draft W3C
    18. 2009: XHTML 2.0 Dropped</li></li></ul><li>HTML5<br /><ul><li>OK, so it’s not quite ready…
    19. May 24 2011: Working Draft Last Call
    20. 2012: Candidate Recommendation
    21. 2022: Proposed Recommendation
    22. Lots of feature support already
    24.</li></li></ul><li>HTML5 Design Principles<br />The HTML5 logo is attributed to the W3C.<br />
    25. Compatibility<br /><ul><li>Pave the cow paths
    26. Degrade gracefully
    27. Research common behavior, solve realproblems
    28. Support existing content
    29. Evolution not revolution
    30. Don't reinvent the wheel(or at least make a better one!)</li></li></ul><li>Utility<br /><ul><li>Priority of Constituencies:
    31. When in doubt… value usersover authors,over implementers(browsers) over specifiers(W3C/WHATWG)over theoreticalpurity
    32. Secure by design
    33. DOM consistency
    34. Separation of presentation and content (Use CSS)</li></li></ul><li>Interoperability<br /><ul><li>Specify well-defined behavior
    35. Specific instead of vague
    36. Specification now >900 pages!
    37. Handle errors well
    38. Improved and ambitious error handling plans
    39. Prefer graceful error recovery to hard failure
    40. Avoid needless complexity</li></li></ul><li>Universal Access<br /><ul><li>Support for all world languages
    41. For example, <ruby>(Ruby annotations, used in East Asian typography)
    42. Accessibility
    43. Support users with disabilities
    44. For example, screen readers
    45. Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA)
    46. WAI-ARIA roles can be added today</li></li></ul><li>A Plugin-Free Paradigm<br /><ul><li>HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, sockets)
    47. Problems with plugins:
    48. Plugins may be disabled, blocked (iPad does not ship with Flash plugin), or not installed
    49. Plugins are a separate attack vector
    50. Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, and transparency issues)
    51. “Whenever a Mac crashes, more often that not is because of Flash” —Steve Jobs</li></li></ul><li>
    52. HTML5, Meet Tech Com<br /><ul><li>HTML5 impact on Technical Communication may be bigger than DITA
    53. Specific benefits in all feature areas
    54. Widespread adoption is around the corner, so it is time to start planning and using it
    55. Many HTML5 features can be used today</li></li></ul><li>Browser Support<br /><ul><li>Modern browsers already support a lot of features, including mobile browsers
    56. Support varies widely for different features
    57. Internet Explorer 6,7 and 8 have very little support
    58. Use support matrix at
    59. Use feature detection and polyfillsto bridge the gaps
    60. Modernizr
    61. HTML5 Boilerplate</li></li></ul><li>Semantic Markup & Microdata<br />
    62. Valid HTML vs. Valid XHTML<br /><ul><li>So you created XHTML…
    63. But did you know that:
    64. Over 90% of XHTML is delivered with the text/html mime type and therefore broken
    65. Delivering XHTML as text/xml orapplication/xhtml+xml is risky (not supported in old IE)</li></li></ul><li>Valid HTML vs. Valid XHTML<br /><ul><li>Use HTML5 and create valid HTML
    68. HTML5 allows XML syntax from XHTML 1.0 for backward compatibility
    69. For example: <br />
    70. HTML5 has well-definedprocessing rules
    71. Simple is better
    72. New doctype
    73. Character set</li></li></ul><li>Simplified Doctype<br />HTML4/XHTML<br /><ul><li>HTML 4.01 Strict
    74. HTML 4.01 Transitional
    75. HTML 4.01 Frameset
    76. XHTML 1.0 Strict
    77. XHTML 1.0 Transitional
    78. XHTML 1.0 Frameset
    79. XHTML 1.1</li></ul> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><br />HTML5<br /><!DOCTYPE html><br />
    80. 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 />
    81. Minimal HTML5 Page <br />HTML5<br /> <!DOCTYPE html><br /> <meta charset=utf-8><br /> <title>HTML5</title><br /> <h1>HTML5!</h1><br />DOM<br /> 70 characters!<br />
    82. 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 /><br />
    83. Obsolete 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 />
    84. Framesets<br /><ul><li>That’s right! Frames are deprecated
    85. Should continue to work in most browsers, but look for alternatives
    86. Frames are used heavily in:
    87. Online Help systems
    88. API documentation</li></li></ul><li>Semantic Markup Benefits<br /><ul><li>Based on research (Opera, Google studies on commonly used div class and id names)
    89. Cleaner, less verbose markup (replacedivandspan elements with meaningful elements)
    90. Machine readable:
    91. Search engines
    92. Syndication
    93. Linking and sharing</li></li></ul><li>Anatomy of an HTML5 Page<br />HTML<br />#1<br /><!DOCTYPE html><br /><html lang="en" manifest="offline.appcache"><br /> <head><br /> <meta charset=utf-8><br /> <title>HTML5</title><br /> <link rel="stylesheet" href="html5.css"><br /> <!--[if lt IE 9]><br /> <script src=”js/html5.js"></script><br /> <![endif]--><br /> </head><br />
    94. Anatomy of an HTML5 Page<br />HTML<br />#2<br /> <body><br /> <header><br /> <h1>Header</h1><br /> </header><br /> <div id="container"><br /> <nav><br /> <h3>Nav</h3><br /> </nav><br />
    95. Anatomy of an HTML5 Page<br />#3<br />HTML<br /><section><br /> <article><br /> <header><br /> <h1>Article Header</h1><br /> </header><br /> <p>Lorem ipsum <mark>HTML5</mark> rocks…</p><br /> <footer><br /> <h2>Article Footer</h2><br /> </footer><br /> </article><br />
    96. Anatomy of an HTML5 Page<br />HTML<br />#4<br /><article><br /> <header><h1>Article Header</h1></header><br /> <figure><br /> <figcaption>Lake Tahoe</figcaption><br /> <img src="tahoe.png" width="160" height=”100" alt="Lake Tahoe"><br /> </figure><br /><footer><p>footer</p></footer><br /> </article><br /></section><br />
    97. Anatomy of an HTML5 Page<br />HTML<br />#5<br /> <aside><br /> <h3>Aside</h3><br /> </aside> <br /> <footer><br /> <h2><small>Footer</small></h2><br /> </footer><br /> </div><script src=”js/jquery-1.6.2-min.js"></script><br /> </body><br /></html><br />
    98. Anatomy of an HTML5 Page<br />#6<br />
    99. Anatomy of an HTML5 Page<br />#7<br />
    100. Anatomy of an HTML5 Page<br />I.E. <9<br />
    101. details element<br />HTML<br /><!-- Progressive Information Disclosure --><br /><details><br /> <summary>What are my download options?<summary><br /><ul><br /> <li><strong>Base:</strong> Contains a minimal download...</li><br /> <li><strong>Full:</strong> Contains the Base download plus documentation and demos.</li><br /> </ul><br /></details> <br /><br />
    102. Progressive Info. Disclosure<br /><br />
    103. Microdata<br /><ul><li>Emphasis on machine readability
    104. SEO advantages
    105. Use Microdata embed machine-readable data in HTML documents
    106. Easy-to-write syntax (add to any element)
    107. Compatible with other data formats such as RDF and JSON
    108. Use microdata vocabularies:</li></li></ul><li>HTML<br /><section itemscope><br /> <article id="html5-fast-track" <br />itemtype=""><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 Example<br />
    109. Microdata Testing<br /><br />
    110. HTML5 Forms<br /><ul><li>New form functionality:
    111. No JavaScript required
    112. Native date and color pickers
    113. Search, e-mail, web address
    114. Client side validation
    115. Spin boxes and sliders
    116. Features degrade gracefully (unknown input types are treated as text)
    117. Benefits:
    118. Virtual keyboard support
    119. 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 />
    120. Forms features<br />Date picker<br />Color picker<br />
    121. CSS3<br />
    122. CSS Level 3<br /><ul><li>Modularized for easier browser uptake
    123. Almost 50 modules (readiness varies)
    124. Use browser-specific prefixes until finalized
    125. Dramaticallyimprovesperformance
    126. Examples:
    127. Border radius (rounded corners) without images
    128. Gradients
    129. Multi-column layout
    130. Transformationsandtransitions
    131. Web Fonts
    132. Media Queries</li></li></ul><li>Rounded corners<br />CSS<br />a:hoverimg{<br /> border-radius: 10px;<br />border: 2px solid #F47D31;<br />-webkit-transform: scale(1.05);<br />}<br />
    133. Web Fonts<br />HTML<br /><html><head> <link rel="stylesheet" type="text/css" href=""> <style> h1 { font-family: 'Tangerine', serif; <br /> font-size: 48px; } </style></head><body><h1>Making the Web Beautiful!</h1></body><br /><br />Copyright © 2011 - Kaazing Corporation. All rights reserved.<br />
    134. Media Queries<br />CSS<br />/* Media-specific sections of stylesheet */<br />@media all and (orientation:landscape) { <br />/* e.g. rotated smartphone */ <br />}<br />@media screen and (max-device-width: 480px) {<br /> /* small screen */ <br />}<br />@media print {<br /> /* drop navigation elements that make no sense on paper */<br />nav { visibility:hidden; }<br />}<br />
    135. Multimedia<br />
    136. HTML5 Audio and Video<br /><ul><li>New HTML5 media elements
    137. <audio> and <video>
    138. Native audio and video (no plugins required)
    139. Programmable with JavaScript
    140. Style with CSS
    141. Add videos and audio as if it was an image
    142. 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 />
    143. 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 />
    144. 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 (Video Accessibility)<br />
    145. Graphics and 3D<br />
    146. HTML5 Canvas and SVG<br /><ul><li>Provide native drawing functionality
    147. Previously possible only with plugins (Flash, Silverlight)
    148. Completely integrated into HTML5documents (part of DOM)
    149. Can be styled with CSS
    150. Can be controlled with JavaScript
    151. Use for animation, charts, images,pixel manipulation, and so on
    152. Canvas supports 2D and 3D (WebGL)
    153. Will impact animated graphics and diagrams soon (use libraries)</li></li></ul><li>Canvas Animation<br />Demo courtesy Gary Davis, AniWorx<br />
    154. Device Access<br />
    155. Device Access Features<br /><ul><li>Geolocation
    156. Allows users to share their locationfor location-aware services
    157. Implemented in all browsers
    158. Drag and Drop
    159. Filesystem API
    160. Speech Input
    161. Device orientation (accelerometer)
    162. Webcam (bar code, QR code scanning)
    163. Audio devices (speech input)</li></li></ul><li>Speech Input<br /><br />
    164. Drag and Drop<br />
    165. Performance<br />
    166. Web Workers & Performance<br /><ul><li>HTML5 Web Workers provide background processing capabilities to web applications
    167. Run background JavaScript
    168. Important performance tips:
    169. CSS3
    170. Sprites (combine images)
    171. Minification
    172. Data URIs
    173. Data URIs
    174. Use for frequently used,small images, such as warnings or logos
    175. Test with optimization tools (Yslow, Page Speed)</li></li></ul><li>HTML<br /><img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon"><br />Data URI Example<br />
    176. Offline and Storage<br />
    177. Offline Web Applications<br /><ul><li>Use complete web sites (documentation sets) in offline mode
    178. Cache pages that have not been visited yet
    179. Browsers cache data in an Application Cache
    180. HTML5 allows online and offline detection
    181. Allows prefetching of site resources (can speed up pages)
    182. 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 /><br /># Use from network if available<br />NETWORK:<br />network.html<br /># Fallback content<br />FALLBACK:<br />/ fallback.html<br />Example appcache File<br />
    183. <ul><li>Reference the manifest file:
    184. Use .appcache extension (*.manifest also allowed)
    185. 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 /><br />
    186. Web and DB Storage<br /><ul><li>Many powerful new client-side storage options
    187. Web and Web Database storage a.k.a. "cookies on steroids”
    188. Web Storage (Session and Local Storage
    189. Web Database Storage</li></ul>Cookies<br />Session<br />Local<br />Database<br />
    190. Connectivity and Real Time<br />
    191. Connectivity Features<br /><ul><li>Cross Document Messaging
    192. XMLHttpRequest Level 2
    193. Server-Sent Events
    194. WebSockets
    195. CORS</li></li></ul><li>WebSockets<br /><ul><li>New W3C API and IETF Protocol for low-latency, real-time, bi-directional connections
    196. Easily add social networking components(Chat, etc.) and real-time data to static pages</li></li></ul><li>Questions?<br /><ul><li>Now or Later
    197. E-mail:
    198. Twitter: @peterlubbers
    199. LinkedIn: Peter Lubbers</li></li></ul><li>Buy the Book!<br /><ul><li>Pro HTML5 Programming (Apress, 2010)
    200. 50% off e-book coupon code:5BY5APRESS</li></li></ul><li>Useful HTML5 Resources<br /><ul><li>Modernizr
    201. Small, simple JavaScript library that checks support for HTML5 and CSS3 features
    202. Moves away from user-agent sniffing and uses feature detection instead
    203. html5shiv
    204. Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to them
    205. html5boilerplate
    206.</li></li></ul><li>Useful HTML5 Resources<br /><ul><li>HTML5 Validators (Experimental):
    209. HTML5 outline algorithm test page
    211. Performance:
    212. Chrome Speed Tracer
    213. Yslow (for Firebug)
    214. Page Speed (Firefox and Chrome Add-On)</li></li></ul><li><ul><li>HTML5 User Group:
    215. San Francisco:
    216. Apress book: Pro HTML5 Programming
    217. (Peter Lubbers, Brian Albers, & Frank Salim)</li></ul>Learn More<br />
    218. Get Trained!<br /><ul><li>Proven, practical worldwide HTML5 Training (training from experts, not just trainers):
    219. E-mail us:
    220. Web site:</li></li></ul><li>