HTML5: The Next Internet Goldrush
•Download as PPTX, PDF•
32 likes•11,027 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5: The Next Internet Goldrush
Similar to HTML5: The Next Internet Goldrush (20)
More from Peter Lubbers
More from Peter Lubbers (7)
Recently uploaded
Recently uploaded (20)
HTML5: The Next Internet Goldrush
- 1. Title HTML5: The Next Internet Gold Rush(HTML5 and its impact on technical communication) Peter Lubbers Senior Director, Technical Communication Kaazing
- 3. Not to Be Confused With…
- 5. HTML5 Vision
- 6. HTML5 Feature Areasand their impact onTechnical Communication
- 8. Word on the Street… "The world is moving to HTML5" —Steve Jobs, Apple "The Web has not seen this level of transformation, this level of acceleration, in the past ten years… we're betting big on HTML5" —Vic Gundotra, VP of Engineering, Google “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. —Steve Ballmer, CEO Microsoft "I had no idea there was so much HTML5 already in play" —Tim O'Reilly "HTML5’s impact on Tech Com will be bigger than DITA" —Peter Lubbers
- 10. HTML Timeline
- 12. 1993: First HTML Specification (IETF)
- 15. HTML 4.01, XHTML, Web 2.0 1999: HTML 4.01 2000: XHTML 1.0 2001: Last 4.01 Errata 2001: XHTML 1.1 2004: Web 2.0
- 17. 2008: HTML5 Working Draft W3C
- 19. May 24 2011: Working Draft Last Call
- 22. Lots of feature support already
- 23. caniuse.com
- 27. Research common behavior, solve realproblems
- 31. When in doubt… value usersover authors,over implementers(browsers) over specifiers(W3C/WHATWG)over theoreticalpurity
- 32. Secure by design
- 33. DOM consistency
- 35. Specific instead of vague
- 36. Specification now >900 pages!
- 38. Improved and ambitious error handling plans
- 39. Prefer graceful error recovery to hard failure
- 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)
- 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)
- 53. Specific benefits in all feature areas
- 54. Widespread adoption is around the corner, so it is time to start planning and using it
- 56. Support varies widely for different features
- 57. Internet Explorer 6,7 and 8 have very little support
- 58. Use support matrix at http://caniuse.com
- 59. Use feature detection and polyfillsto bridge the gaps
- 60. Modernizr
- 63. But did you know that:
- 64. Over 90% of XHTML is delivered with the text/html mime type and therefore broken
- 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
- 76. XHTML 1.0 Strict
- 79. XHTML 1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 <!DOCTYPE html>
- 80. Simplified Character Set HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset=utf-8>
- 81. Minimal HTML5 Page HTML5 <!DOCTYPE html> <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1> DOM 70 characters!
- 82. New HTML5 Elements <canvas> <article> <audio> <aside> <command> <dialog> <details> <datalist> <header> <hgroup> <footer> <figure> <embed> <nav> <keygen> <mark> <meter> <ruby> <output> <section> <rp> <rt> <video> <source> http://dev.w3.org/html5/markup/elements.html#elements
- 83. Obsolete Elements <acronym> <basefont> <applet> <big> <dir> <font> <center> <s> <strike> <frame> <u> <frameset> <noframes> <tt>
- 85. Should continue to work in most browsers, but look for alternatives
- 86. Frames are used heavily in:
- 89. Cleaner, less verbose markup (replacedivandspan elements with meaningful elements)
- 91. Search engines
- 92. Syndication
- 94. Anatomy of an HTML5 Page HTML #2 <body> <header> <h1>Header</h1> </header> <div id="container"> <nav> <h3>Nav</h3> </nav>
- 95. Anatomy of an HTML5 Page #3 HTML <section> <article> <header> <h1>Article Header</h1> </header> <p>Lorem ipsum <mark>HTML5</mark> rocks…</p> <footer> <h2>Article Footer</h2> </footer> </article>
- 96. Anatomy of an HTML5 Page HTML #4 <article> <header><h1>Article Header</h1></header> <figure> <figcaption>Lake Tahoe</figcaption> <img src="tahoe.png" width="160" height=”100" alt="Lake Tahoe"> </figure> <footer><p>footer</p></footer> </article> </section>
- 97. Anatomy of an HTML5 Page HTML #5 <aside> <h3>Aside</h3> </aside> <footer> <h2><small>Footer</small></h2> </footer> </div><script src=”js/jquery-1.6.2-min.js"></script> </body> </html>
- 98. Anatomy of an HTML5 Page #6
- 99. Anatomy of an HTML5 Page #7
- 100. Anatomy of an HTML5 Page I.E. <9
- 101. details element HTML <!-- Progressive Information Disclosure --> <details> <summary>What are my download options?<summary> <ul> <li><strong>Base:</strong> Contains a minimal download...</li> <li><strong>Full:</strong> Contains the Base download plus documentation and demos.</li> </ul> </details> http://code.google.com/p/html5shiv/
- 102. Progressive Info. Disclosure http://tech.kaazing.com/documentation/html5/setup-guide.html
- 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
- 112. Native date and color pickers
- 113. Search, e-mail, web address
- 115. Spin boxes and sliders
- 116. Features degrade gracefully (unknown input types are treated as text)
- 117. Benefits:
- 120. Forms features Date picker Color picker
- 121. CSS3
- 123. Almost 50 modules (readiness varies)
- 124. Use browser-specific prefixes until finalized
- 126. Examples:
- 127. Border radius (rounded corners) without images
- 128. Gradients
- 129. Multi-column layout
- 131. Web Fonts
- 133. Web Fonts HTML <html><head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> h1 { font-family: 'Tangerine', serif; font-size: 48px; } </style></head><body><h1>Making the Web Beautiful!</h1></body> http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start Copyright © 2011 - Kaazing Corporation. All rights reserved.
- 134. Media Queries CSS /* Media-specific sections of stylesheet */ @media all and (orientation:landscape) { /* e.g. rotated smartphone */ } @media screen and (max-device-width: 480px) { /* small screen */ } @media print { /* drop navigation elements that make no sense on paper */ nav { visibility:hidden; } }
- 135. Multimedia
- 137. <audio> and <video>
- 138. Native audio and video (no plugins required)
- 140. Style with CSS
- 141. Add videos and audio as if it was an image
- 143. 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
- 144. 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 (Video Accessibility)
- 145. Graphics and 3D
- 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)
- 154. Device Access
- 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
- 162. Webcam (bar code, QR code scanning)
- 164. Drag and Drop
- 165. Performance
- 169. CSS3
- 171. Minification
- 172. Data URIs
- 173. Data URIs
- 174. Use for frequently used,small images, such as warnings or logos
- 176. Offline and Storage
- 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)
- 184. Use .appcache extension (*.manifest also allowed)
- 185. 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/
- 187. Web and Web Database storage a.k.a. "cookies on steroids”
- 188. Web Storage (Session and Local Storage
- 189. Web Database StorageCookies Session Local Database
- 190. Connectivity and Real Time
- 193. Server-Sent Events
- 194. WebSockets
- 201. Small, simple JavaScript library that checks support for HTML5 and CSS3 features
- 202. Moves away from user-agent sniffing and uses feature detection insteadhttp://www.modernizr.com/
- 203. html5shiv
- 204. Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/
- 205. html5boilerplate
- 209. HTML5 outline algorithm test page
- 211. Performance:
- 216. Apress book: Pro HTML5 Programming
- 217. (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/Learn More
Editor's Notes
- 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