html5: the next internet goldrush
DESCRIPTION
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.TRANSCRIPT
1 © 2011 – Kaazing Corporation
Title
Peter LubbersSenior Director, Technical Communication
Kaazing
HTML5: The Next Internet Gold Rush(HTML5 and its impact on technical communication)
2 © 2011 – Kaazing Corporation
About @peterlubbers
3 © 2011 – Kaazing Corporation
Not to Be Confused With…
4 © 2011 – Kaazing Corporation
Agenda
• HTML5 History (The 2-Minute Version)• HTML5 Vision• HTML5 Feature Areas
and their impact onTechnical Communication
• Q&A
#stc@peterlubbers
#html5
5 © 2011 – Kaazing Corporation
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
6 © 2011 – Kaazing Corporation
HTML5 Feature Areas
7 © 2011 – Kaazing Corporation
HTML Timeline
8 © 2011 – Kaazing Corporation
HTML (1.0)
• 1991: HTML Tags Specification• 1993: First HTML Specification (IETF)• First spec ~41 Pages Long
9 © 2011 – Kaazing Corporation
HTML 2.0, 3.0
• 1995: HTML 2.0 (IETF)• 1995: HTML 3 Proposed and Abandoned
10 © 2011 – Kaazing Corporation
HTML 3.2, 4.0
1997: HTML 3.2 (W3C)
1997: HTML 4.0 (W3C)
11 © 2011 – Kaazing Corporation
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
12 © 2011 – Kaazing Corporation
HTML5
• 2004: WHATWG (Web Apps 1.0)• 2008: HTML5 Working Draft W3C• 2009: XHTML 2.0 Dropped
13 © 2011 – Kaazing Corporation
HTML5
• OK, so it’s not quite ready…• May 24 2011: Working Draft Last Call• 2012: Candidate Recommendation• 2022: Proposed Recommendation• Lots of feature support already• caniuse.com• html5test.com
14 © 2011 – Kaazing Corporation
HTML5 Design Principles
The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
15 © 2011 – Kaazing Corporation
Compatibility
• Pave the cow paths• Degrade gracefully• Research common
behavior, solve realproblems
• Support existing content
• Evolution not revolution• Don't reinvent the wheel
(or at least make a better one!)
16 © 2011 – Kaazing Corporation
Utility
• Priority of Constituencies:• When in doubt…
value users over authors, over implementers (browsers) over specifiers (W3C/WHATWG)over theoretical purity
• Secure by design• DOM consistency• Separation of presentation and content (Use CSS)
17 © 2011 – Kaazing Corporation
Interoperability
• Specify well-defined behavior• Specific instead of vague• Specification now >900 pages!
• Handle errors well• Improved and ambitious error
handling plans• Prefer graceful error recovery to
hard failure
• Avoid needless complexity
18 © 2011 – Kaazing Corporation
Universal Access
• Support for all world languages• For example, <ruby>
(Ruby annotations, used in East Asian typography)
• Accessibility • Support users with disabilities
• For example, screen readers
• Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA)
• WAI-ARIA roles can be added today
19 © 2011 – Kaazing Corporation
A Plugin-Free Paradigm
• HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, sockets)
• Problems with plugins:• Plugins may be disabled, blocked (iPad does not ship
with Flash plugin), or not installed• Plugins are a separate attack vector• Plugins are difficult to integrate with the rest of an
HTML document (plugin boundaries, clipping, and transparency issues)
• “Whenever a Mac crashes, more often that not is because of Flash” —Steve Jobs
20 © 2011 – Kaazing Corporation
21 © 2011 – Kaazing Corporation
HTML5, Meet Tech Com
• HTML5 impact on Technical Communication may be bigger than DITA
• Specific benefits in all feature areas
• Widespread adoption is around the corner, so it is time to start planning and using it
• Many HTML5 features can be used today
22 © 2011 – Kaazing Corporation
Browser Support
• Modern browsers already support a lot of features, including mobile browsers
• Support varies widely for different features• Internet Explorer 6,7 and 8 have very little support• Use support matrix at http://caniuse.com
• Use feature detection and polyfills to bridge the gaps• Modernizr• HTML5 Boilerplate
23 © 2011 – Kaazing Corporation
Semantic Markup & Microdata
24 © 2011 – Kaazing Corporation
Valid HTML vs. Valid XHTML
• So you created XHTML…
• But did you know that:• Over 90% of XHTML is delivered with the text/html
mime type and therefore broken• Delivering XHTML as text/xml orapplication/xhtml+xml is risky (not supported in old IE)
25 © 2011 – Kaazing Corporation
Valid HTML vs. Valid XHTML
• Use HTML5 and create valid HTML• http://html5.validator.nu/• http://validator.w3.org
• HTML5 allows XML syntax from XHTML 1.0 for backward compatibility• For example: <br />
• HTML5 has well-definedprocessing rules
• Simple is better• New doctype• Character set
26 © 2011 – Kaazing Corporation
Simplified Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
HTML4/XHTML• HTML 4.01 Strict• HTML 4.01 Transitional• HTML 4.01 Frameset• XHTML 1.0 Strict• XHTML 1.0 Transitional• XHTML 1.0 Frameset• XHTML 1.1
27 © 2011 – Kaazing Corporation
Simplified Character Set
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset=utf-8>
28 © 2011 – Kaazing Corporation
Minimal HTML5 Page
HTML5
<!DOCTYPE html> <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1>
DOM
70 characters!
29 © 2011 – Kaazing Corporation
<nav>
<header>
<canvas>
<ruby>
<article>
<video>
<audio>
<command>
<hgroup>
<dialog><details><datalist>
<footer><figure><embed>
<keygen> <mark>
<output>
<meter>
<section>
<source>
New HTML5 Elements
<aside>
<rp><rt>
http://dev.w3.org/html5/markup/elements.html#elements
30 © 2011 – Kaazing Corporation
<s> <strike>
<big>
<acronym>
<basefont>
<center>
<frame>
<font><dir>
<noframes>
<frameset>
<tt>
<u>
Obsolete Elements
<applet>
31 © 2011 – Kaazing Corporation
Framesets
• That’s right! Frames are deprecated• Should continue to work in most browsers, but
look for alternatives• Frames are used heavily in:
• Online Help systems• API documentation
32 © 2011 – Kaazing Corporation
Semantic Markup Benefits
• Based on research (Opera, Google studies on commonly used div class and id names)
• Cleaner, less verbose markup (replace div and span elements with meaningful elements)
• Machine readable:• Search engines• Syndication
• Linking and sharing
33 © 2011 – Kaazing Corporation
<!DOCTYPE html><html lang="en" manifest="offline.appcache"> <head> <meta charset=utf-8> <title>HTML5</title> <link rel="stylesheet" href="html5.css"> <!--[if lt IE 9]> <script src=”js/html5.js"></script> <![endif]--> </head>
Anatomy of an HTML5 Page
HTML #1
34 © 2011 – Kaazing Corporation
HTML
<body> <header> <h1>Header</h1> </header> <div id="container"> <nav> <h3>Nav</h3> </nav>
#2
Anatomy of an HTML5 Page
35 © 2011 – Kaazing Corporation
<section> <article> <header> <h1>Article Header</h1> </header>
<p>Lorem ipsum <mark>HTML5</mark> rocks…</p> <footer> <h2>Article Footer</h2> </footer> </article>
#3HTML
Anatomy of an HTML5 Page
36 © 2011 – Kaazing Corporation
<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>
#4HTML
Anatomy of an HTML5 Page
37 © 2011 – Kaazing Corporation
HTML
<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>
#5
Anatomy of an HTML5 Page
38 © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page
#6
39 © 2011 – Kaazing Corporation
#7
Anatomy of an HTML5 Page
40 © 2011 – Kaazing Corporation
I.E. <9
Anatomy of an HTML5 Page
41 © 2011 – Kaazing Corporation
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/
details element
42 © 2011 – Kaazing Corporation
Progressive Info. Disclosure
http://tech.kaazing.com/documentation/html5/setup-guide.html
43 © 2011 – Kaazing Corporation
Microdata
• Emphasis on machine readability• SEO advantages• Use Microdata embed machine-readable data in
HTML documents • Easy-to-write syntax (add to any element)• Compatible with other data formats such as
RDF and JSON• Use microdata vocabularies:
http://data-vocabulary.org
44 © 2011 – Kaazing Corporation
<section itemscope> <article id="html5-fast-track" itemtype="http://data-vocabulary.org/Product"> <header> <h1 itemprop="name”>HTML5 Fast Track</h1> </header> <p itemprop="description">The HTML5 Fast Track training course is a two day experience... </p> </article></section>
HTML
HTML5 Microdata Example
45 © 2011 – Kaazing Corporation
Microdata Testing
http://www.google.com/webmasters/tools/richsnippets
46 © 2011 – Kaazing Corporation
HTML5 Forms
• New form functionality:• No JavaScript required• Native date and color pickers• Search, e-mail, web address• Client side validation• Spin boxes and sliders
• Features degrade gracefully (unknown input types are treated as text)
• Benefits:• Virtual keyboard support• Native widgets and error messages are internationalized
47 © 2011 – Kaazing Corporation
<form> <p><label for="phone">Telephone number:</label> <input type=tel placeholder="(xxx) xxx-xxx" required></p> <p><label for="emailaddress">E-mail address:</label> <input id="emailaddress" name="emailaddress" type=email required></p> <p><label for="dob">DOB:</label><input id="dob” name="dob” type=date value=1944-06-06 max=1992-05-01></p> <p><label for="color">Shirt Color:</label> <input id="color" name="color" type="color"></p>
HTML
Example HTML5 Form
48 © 2011 – Kaazing Corporation
Forms features
Date picker
Color picker
49 © 2011 – Kaazing Corporation
CSS3
50 © 2011 – Kaazing Corporation
CSS Level 3
• Modularized for easier browser uptake• Almost 50 modules (readiness varies)• Use browser-specific prefixes until finalized• Dramatically improves performance• Examples:
• Border radius (rounded corners) without images
• Gradients• Multi-column layout• Transformations and transitions• Web Fonts• Media Queries
51 © 2011 – Kaazing Corporation
Rounded corners
a:hover img {border-radius: 10px;border: 2px solid #F47D31;-webkit-transform: scale(1.05);
}
CSS
52 © 2011 – Kaazing Corporation
<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>
Copyright © 2011 - Kaazing Corporation. All rights reserved.
HTML
Web Fonts
http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start
53 © 2011 – Kaazing Corporation
Media Queries
/* 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; }}
CSS
54 © 2011 – Kaazing Corporation
Multimedia
55 © 2011 – Kaazing Corporation
HTML5 Audio and Video
• New HTML5 media elements• <audio> and <video>
• Native audio and video (no plugins required)• Programmable with JavaScript• Style with CSS
• Add videos and audio as if it was an image• Codec support varies, but multiple
source elements and fallback content can be used
56 © 2011 – Kaazing Corporation
HTML
//Basic Video<video controls src=”goldrush.mp4"> A movie about HTML5</video>
// Video with additional attributes<video id="movies" controls preload="metadata" width="400px" height="300px" poster="html5.png" > <source src="goldrush.webm"> <source src="goldrush.mp4"> <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt"> A movie by Rocky Lubbers</video>
HTML5 Video Example
57 © 2011 – Kaazing Corporation
<!—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>
HTML
Flash Video Fallback
58 © 2011 – Kaazing Corporation
WebVTT
WEBVTT
100:00:01,000 --> 00:00:03,050What do I think about HTML 5?...
200:00:04,000 --> 00:00:07,100It’s the next big thing! I just hope that people use the new features thoughtfully.
WebVTT (Video Accessibility)
59 © 2011 – Kaazing Corporation
Graphics and 3D
60 © 2011 – Kaazing Corporation
HTML5 Canvas and SVG
• Provide native drawing functionality• Previously possible only with plugins
(Flash, Silverlight)
• Completely integrated into HTML5 documents (part of DOM)• Can be styled with CSS• Can be controlled with JavaScript
• Use for animation, charts, images,pixel manipulation, and so on
• Canvas supports 2D and 3D (WebGL)• Will impact animated graphics and
diagrams soon (use libraries)
61 © 2011 – Kaazing Corporation
Canvas Animation
Demo courtesy Gary Davis, AniWorx
62 © 2011 – Kaazing Corporation
Device Access
63 © 2011 – Kaazing Corporation
Device Access Features
• Geolocation• Allows users to share their location
for location-aware services• Implemented in all browsers
• Drag and Drop• Filesystem API• Speech Input• Device orientation (accelerometer)• Webcam (bar code, QR code scanning)• Audio devices (speech input)
64 © 2011 – Kaazing Corporation
Speech Input
http://slides.html5rocks.com/#speech-input
65 © 2011 – Kaazing Corporation
Drag and Drop
66 © 2011 – Kaazing Corporation
Performance
67 © 2011 – Kaazing Corporation
Web Workers & Performance
• HTML5 Web Workers provide background processing capabilities to web applications• Run background JavaScript
• Important performance tips:• CSS3• Sprites (combine images)• Minification• Data URIs
• Data URIs• Use for frequently used,
small images, such as warnings or logos
• Test with optimization tools (Yslow, Page Speed)
68 © 2011 – Kaazing Corporation
<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">
HTML
Data URI Example
69 © 2011 – Kaazing Corporation
Offline and Storage
70 © 2011 – Kaazing Corporation
Offline Web Applications
• Use complete web sites (documentation sets) in offline mode
• Cache pages that have not been visited yet• Browsers cache data in an Application Cache• HTML5 allows online and offline detection• Allows prefetching of
site resources (can speed up pages)
• Simple manifest mechanism
71 © 2011 – Kaazing Corporation
CACHE MANIFEST# manifest version 1.0.1 # Files to cacheindex.htmlcache.htmlhtml5.cssimage1.jpgimg/foo.gifhttp://www.example.com/styles.css
# Use from network if availableNETWORK:network.html
# Fallback contentFALLBACK:/ fallback.html
appcache File
Example appcache File
72 © 2011 – Kaazing Corporation
<!DOCTYPE html><html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title>
HTML
• Reference the manifest file:• Use .appcache extension (*.manifest also allowed)• Add as attribute to HTML element
Example manifest Attribute
http://appcachefacts.info/
73 © 2011 – Kaazing Corporation
Web and DB Storage
Cookies Session Local Database
• Many powerful new client-side storage options• Web and Web Database storage a.k.a.
"cookies on steroids”• Web Storage (Session and Local Storage• Web Database Storage
74 © 2011 – Kaazing Corporation
Connectivity and Real Time
75 © 2011 – Kaazing Corporation
Connectivity Features
• Cross Document Messaging• XMLHttpRequest Level 2• Server-Sent Events• WebSockets• CORS
76 © 2011 – Kaazing Corporation
WebSockets
• New W3C API and IETF Protocol for low-latency, real-time, bi-directional connections
• Easily add social networking components(Chat, etc.) and real-time data to static pages
77 © 2011 – Kaazing Corporation
Questions?
• Now or Later• E-mail: [email protected]• Twitter: @peterlubbers• LinkedIn: Peter Lubbers
78 © 2011 – Kaazing Corporation
Buy the Book!
• Pro HTML5 Programming (Apress, 2010)• 50% off e-book coupon code:
5BY5APRESShttp://www.prohtml5.com
79 © 2011 – Kaazing Corporation
Useful HTML5 Resources
• Modernizr• Small, simple JavaScript library that checks
support for HTML5 and CSS3 features• Moves away from user-agent sniffing and uses
feature detection insteadhttp://www.modernizr.com/
• html5shiv• Creates the new HTML5 DOM elements in Internet
Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/
• html5boilerplate• http://html5boilerplate.com
80 © 2011 – Kaazing Corporation
Useful HTML5 Resources
• HTML5 Validators (Experimental):• http://html5.validator.nu/• http://validator.w3.org/
• HTML5 outline algorithm test page• http://gsnedders.html5.org/outliner/
• Performance:• Chrome Speed Tracer
http://code.google.com/webtoolkit/speedtracer/ • Yslow (for Firebug)
http://developer.yahoo.com/yslow/ • Page Speed (Firefox and Chrome Add-On)
http://code.google.com/speed/page-speed/docs/using_chrome.html
81 © 2011 – Kaazing Corporation
• HTML5 User Group:• San Francisco: http://www.sfhtml5.org/
• Apress book: Pro HTML5 Programming• (Peter Lubbers, Brian Albers, & Frank Salim)
http://www.prohtml5.com/
Learn More
82 © 2011 – Kaazing Corporation
Get Trained!
• Proven, practical worldwide HTML5 Training (training from experts, not just trainers):• E-mail us: [email protected]• Web site: http://kaazing.com/training/
83 © 2011 – Kaazing Corporation