HTML5: The Next Internet Goldrush

Title
HTML5: The Next Internet Gold Rush(HTML5 and its impact on technical communication)
Peter Lubbers
Senior Director, Technical Communication
Kaazing

About @peterlubbers

Not to Be Confused With…

Agenda
HTML5 History (The 2-Minute Version)
HTML5 Vision
HTML5 Feature Areasand their impact onTechnical Communication
Q&A
#stc
@peterlubbers
#html5

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

HTML5 Feature Areas

HTML Timeline

HTML (1.0)
1991: HTML Tags Specification
1993: First HTML Specification (IETF)
First spec ~41 Pages Long

HTML 2.0, 3.0
1995: HTML 2.0 (IETF)
1995: HTML 3 Proposed and Abandoned

HTML 3.2, 4.0
1997: HTML 3.2 (W3C)
1997: HTML 4.0 (W3C)

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

HTML5
2004: WHATWG (Web Apps 1.0)
2008: HTML5 Working Draft W3C
2009: XHTML 2.0 Dropped

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

HTML5 Design Principles
The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/

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!)

Utility
Priority of Constituencies:
When in doubt… value usersover authors,over implementers(browsers) over specifiers(W3C/WHATWG)over theoreticalpurity
Secure by design
DOM consistency
Separation of presentation and content (Use CSS)

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

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

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

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

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 polyfillsto bridge the gaps
Modernizr
HTML5 Boilerplate

Semantic Markup & Microdata

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)

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

Simplified Doctype
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>

Simplified Character Set
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset=utf-8>

Minimal HTML5 Page
HTML5
<!DOCTYPE html>
<title>HTML5</title>
<h1>HTML5!</h1>
DOM
70 characters!

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

Obsolete Elements
<acronym>
<basefont>
<applet>
<big>
<dir>
<font>
<center>
<s> <strike>
<frame>
<u>
<frameset>
<noframes>
<tt>

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

Semantic Markup Benefits
Based on research (Opera, Google studies on commonly used div class and id names)
Cleaner, less verbose markup (replacedivandspan elements with meaningful elements)
Machine readable:
Search engines
Syndication
Linking and sharing

Anatomy of an HTML5 Page
HTML
#1
<!DOCTYPE html>
<html lang="en" manifest="offline.appcache">
<head>
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">

</head>

HTML
#2
<body>
<header>
<h1>Header</h1>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
</nav>

#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>

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>

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>

#6

#7

I.E. <9

details element
HTML

<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/

Progressive Info. Disclosure
http://tech.kaazing.com/documentation/html5/setup-guide.html

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

HTML
<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>
HTML5 Microdata Example

Microdata Testing
http://www.google.com/webmasters/tools/richsnippets

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

HTML
<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>
Example HTML5 Form

Forms features
Date picker
Color picker

CSS Level 3
Modularized for easier browser uptake
Almost 50 modules (readiness varies)
Use browser-specific prefixes until finalized
Dramaticallyimprovesperformance
Examples:
Border radius (rounded corners) without images
Gradients
Multi-column layout
Transformationsandtransitions
Web Fonts
Media Queries

Rounded corners
CSS
a:hoverimg{
border-radius: 10px;
border: 2px solid #F47D31;
-webkit-transform: scale(1.05);
}

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.

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; }
}

Multimedia

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

HTML5 Video Example
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>

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

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)

Graphics and 3D

HTML5 Canvas and SVG
Provide native drawing functionality
Previously possible only with plugins (Flash, Silverlight)
Completely integrated into HTML5documents (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)

Canvas Animation
Demo courtesy Gary Davis, AniWorx

Device Access

Device Access Features
Geolocation
Allows users to share their locationfor 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)

Speech Input
http://slides.html5rocks.com/#speech-input

Drag and Drop

Performance

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)

HTML
<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">
Data URI Example

Offline and Storage

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

appcache File
CACHE MANIFEST
# manifest version 1.0.1
# Files to cache
index.html
cache.html
html5.css
image1.jpg
img/foo.gif
http://www.example.com/styles.css
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
Example appcache File

Reference the manifest file:
Use .appcache extension (*.manifest also allowed)
Add as attribute to HTML element
HTML
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<title>HTML5 Application Cache Rocks!</title>
Example manifest Attribute
http://appcachefacts.info/

Web and DB Storage
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
Cookies
Session
Local
Database

Connectivity and Real Time

Connectivity Features
Cross Document Messaging
XMLHttpRequest Level 2
Server-Sent Events
WebSockets
CORS

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

Questions?
Now or Later
E-mail: peter.lubbers@kaazing.com
Twitter: @peterlubbers
LinkedIn: Peter Lubbers

Buy the Book!
Pro HTML5 Programming (Apress, 2010)
50% off e-book coupon code:5BY5APRESShttp://www.prohtml5.com

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

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 Tracerhttp://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

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

Get Trained!
Proven, practical worldwide HTML5 Training (training from experts, not just trainers):
E-mail us: training@kaazing.com
Web site: http://kaazing.com/training/

http://learni.st	179
http://www.techgig.com	37
http://www.claudepenland.com	36
http://paper.li	28
http://twitter.com	16
http://www.schoox.com	4
http://115.112.206.131	2
http://www.slideshare.net	1
https://twitter.com	1
http://a0.twimg.com	1
http://edicolaeuropea.blogspot.com	1
http://dev3.algores.it	1
http://staging.learni.st	1

HTML5: The Next Internet Goldrush

by Peter Lubbers

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 308

Statistics

HTML5: The Next Internet Goldrush Presentation Transcript