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.
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Â
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
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
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/
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; } }
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)
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/
186.
187. Web and Web Database storage a.k.a. "cookies on steroidsâ
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