More Related Content Similar to Getting Started with HTML5 in Tech Com (STC 2012) (20) More from Peter Lubbers (7) Getting Started with HTML5 in Tech Com (STC 2012)1. @peterlubbers
Kaazing
#stc12
1
Getting Started with HTML5
© 2011 – Kaazing Corporation
Illustration by Will Phillips Jr. | HTML5 Logo attributed W3C
5. Agenda
• HTML5—What and Why?
• HTML5 Features
#stc12
• Your HTML5 Toolkit @peterlubbers
• Q&A
5 © 2011 – Kaazing Corporation
6. 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"
6
—Peter Lubbers
© 2011 – Kaazing Corporation
7. HTML5 and DITA
• Continue to author in DITA, but output to
HTML5 and CSS3
• Replacement of tri-pane layouts of DITA OT
with style-based layouts
―Users of DITA … see some clear associations
of these HTML5 elements with structures in
both DITA topics and DITA maps.‖
—Don Day
http://learningbywrote.com/blog/2011/08/html-5-in-the-world-of-dita/
7 © 2011 – Kaazing Corporation
8. #1 Job Trend 2011
―HTML5" is the #1 job trend - the fastest growing
keyword found in online job postings‖
—indeed.com (http://goo.gl/xXZVm)
8 © 2011 – Kaazing Corporation
9. What is HTML5?
• The new major
milestone for
HTML
• Focused on
Web Applications
• Web apps are
rapidly becoming
first class apps,
on par with desktop
and native apps
• Different definitions
9 © 2011 – Kaazing Corporation
11. HTML5 At a Glance
11 © 2011 – Kaazing Corporation
12. Why HTML5?
5 Reasons why you should care!
12 © 2011 – Kaazing Corporation
13. 1) HTML5 Paves the Cow Paths
• Because HTML5 takes a pragmatic
approach, fixing common real-world problems
13 © 2011 – Kaazing Corporation
14. Paved Cow Path
HTML4
<form>
<input name="email" type="text">
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-
9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-
crapload of x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e-
x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-
validation code 9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-
5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-
4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-
or extra js lib x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01-
x09x0bx0cx0e-x7f])+)])
HTML5
14 © 2011 – Kaazing Corporation <input type=email required>
16. 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
16 © 2011 – Kaazing Corporation
<!DOCTYPE html>
17. Simplified Character Set
HTML4
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML5
<meta charset=utf-8>
17 © 2011 – Kaazing Corporation
18. Simplified Markup
HTML5
<!DOCTYPE html>
DOM
<meta charset=utf-8>
<title>HTML5</title>
<h1>HTML5!</h1>
18 © 2011 – Kaazing Corporation
20. 3) HTML5 is Universal
• Because HTML5 works
in all languages and
accessibility is built in
from the ground up
20 © 2011 – Kaazing Corporation
21. Universal Access
• Support for all world languages
• For example, the new <ruby> element
• Accessibility
• Semantic markup
• WebVTT
<video controls WEBVTT
preload="metadata">
<source src="rocpoc.mp4"> 1
<track label="English" 00:00:01,000 --> 00:00:03,050
What do I think about HTML 5?...
kind="subtitles"
src="subtitles_en.vtt”> 2
</video> 00:00:04,000 --> 00:00:07,100
It’s pretty sweet. I just hope
that people use the new features
http://html5videoguide.net/presentations/WebVTT thoughtfully.
21 © 2011 – Kaazing Corporation
22. 4) HTML5 Means Less Plugins
• Because HTML5
provides native support
for many features that
were possible only with
plugins or complex hacks
(audio/video, drawing, so
ckets)
22 © 2011 – Kaazing Corporation
23. Plugins are on the way out
• Built-in is better than bolt-on —@brucel
• Plugins may not be installed (for long)
• Plugins can be an attack vector (Proxy poisoning)
• ―Whenever a Mac crashes, more often that not is
because of Flash‖ —Steve Jobs
http://goo.gl/mzFjM
23 © 2011 – Kaazing Corporation http://www.infoq.com/news/2011/09/Metro-Plug-ins
24. 5) HTML5 is Secure by Default
• HTML5 uses origin-based security
• Defines secure cross-origin sharing
• Issues in HTML5 are fixed quickly
http://enable-cors.org/
24 © 2011 – Kaazing Corporation
26. New HTML5 Elements
Layout (semantics) Multimedia Other
article section audio, video command,
menu*
aside nav source embed
figure figcaption
header footer Graphics Forms
details summary canvas datalist
wbr hgroup svg progress
time mark output
meter ruby, rp, rt keygen
* menu redefined from HTML 4
26 © 2011 – Kaazing Corporation dev.w3.org/html5/markup/elements.html
27. Obsolete Elements
Presentational Frames Other
basefont frame acronym
big frameset applet
center noframes isindex
font
strike
tt
27 © 2011 – Kaazing Corporation
http://www.w3.org/TR/html5-diff/#obsolete-elements
28. 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
28 © 2011 – Kaazing Corporation
30. Moving to Structural/Semantic Markup
nav
1. Identify functional areas /
use structural tags
2. Separate content from
presentation
• Move styles to CSS file section
• Use a reset stylesheet
• Consider a grid system
for layout
3. Consider alternate article
layouts (e.g. mobile)
footer + nav
30 © 2011 – Kaazing Corporation
31. 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>
31 © 2011 – Kaazing Corporation
33. Valid HTML vs. Valid XHTML
• So you created XHTML…
• But did you know that:
• Over 90% of XHTML is delivered with the text/html
• Delivering XHTML as application/xhtml+xml is
risky (not supported in old IE)
• Instead, use HTML5 and create valid HTML
• http://html5.validator.nu/ and http://validator.w3.org
• HTML5 allows XML syntax from XHTML 1.0 for
backward compatibility
33 © 2011 – Kaazing Corporation
34. 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
34 © 2011 – Kaazing Corporation
35. HTML5 Microdata Example
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>
35 © 2011 – Kaazing Corporation
36. Microdata Testing
36 © 2011 – Kaazing Corporation http://www.google.com/webmasters/tools/richsnippets
37. 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
37 © 2011 – Kaazing Corporation
38. Example HTML5 Form
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>
38 © 2011 – Kaazing Corporation
39. New Input Types
Date picker
39 © 2011 – Kaazing Corporation Color picker
40. CSS3
40 © 2011 – Kaazing Corporation
41. CSS Level 3
• Modularized for easier browser uptake
• Almost 50 modules (readiness varies)
• Use browser-specific prefixes until finalized
• Dramaticallyimproves performance
• Examples:
• Border radius (rounded corners)
without images
• Gradients
• Multi-column layout
• Transformations and transitions
• Web Fonts
• Media Queries
41 © 2011 – Kaazing Corporation
42. Rounded corners
CSS
a:hoverimg {
border-radius: 10px;
border: 2px solid #F47D31;
-webkit-transform: scale(1.05);
}
42 © 2011 – Kaazing Corporation
43. 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
43 © 2011 – Kaazing Corporation
44. 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; }
}
44 © 2011 – Kaazing Corporation
47. 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
• Complete JavaScript API available
47 © 2011 – Kaazing Corporation
48. 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>
48 © 2011 – Kaazing Corporation
49. Flash Video Fallback
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>
49 © 2011 – Kaazing Corporation
50. WebVTT (Video Accessibility)
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.
50 © 2011 – Kaazing Corporation
51. Video API
51 © 2011 – Kaazing Corporation
http://www.w3.org/2010/05/video/mediaevents.html
53. 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)
53 © 2011 – Kaazing Corporation
55. SVG
"Scalable" Vector Graphics (not bitmaps)
http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg
55 © 2011 – Kaazing Corporation
56. SVG Libraries
56 © 2011 – Kaazing Corporation http://mbostock.github.com/d3/
58. Speech Input
58 © 2011 – Kaazing Corporation
http://slides.html5rocks.com/#speech-input
62. 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
62 © 2011 – Kaazing Corporation
63. Example appcache File
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
63 © 2011 – Kaazing Corporation
64. Example manifest Attribute
• 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>
64 © 2011 – Kaazing Corporation http://appcachefacts.info/
66. Browser Support
• Modern browsers (incl. mobile) already support a
lot of features, :
• http://html5test.com
• Support varies widely for different features
• IE 6,7 and 8: minimal support
• Use support matrices:
• http://caniuse.com
• http://mobilehtml5.org
66 © 2011 – Kaazing Corporation
http://paulirish.com/2010/high-res-browser-icons
67. Browser Developer Tools
Browser Built-In Tool Mac Shortcut Windows Shortcut
Chrome Developer Tools Command + CTRL + Shift + J
Option + J
Firefox Firebug F12 F12
Opera Dragonfly Command + CTRL + Shift + I
Option + I
Safari Web Inspector Command + CTRL + Alt + I
Option + I
Internet Explorer Developer Tools F12
67 © 2011 – Kaazing Corporation
68. HTML5 Boilerplate
• The best way to get started
http://html5boilerplate.com
68 © 2011 – Kaazing Corporation
69. Modernizr
• Part of H5BP
• Download or create a
custom build
• Use Modernizr.load
to test for feature
support
Javascript
Modernizr.load({
test: Modernizr.websocket,
yep : ’websocket.js',
nope: ’kz-websocket-polyfill.js'
});
69 © 2011 – Kaazing Corporation
http://www.sfhtml5.org/events/28458331
70. Polyfills and Emulation
• Feature detect with Modernizr (part of H5BP):
http://www.modernizr.com
• Complete polyfill list:
https://github.com/Modernizr/Modernizr/wiki/HT
ML5-Cross-browser-Polyfills
70 © 2011 – Kaazing Corporation
71. Chrome Frame
• The Ultimate polyfill
• Embed Chrome in IE
• No admin privileges
needed to install
HTML
<!-- Always force latest IE rendering engine
(even in intranet) & Chrome Frame
<meta http-equiv="X-UA-Compatible“
content="IE=edge,chrome=1”>
71 © 2011 – Kaazing Corporation http://code.google.com/chrome/chromeframe/
73. 320 and up
73 © 2011 – Kaazing Corporation
http://stuffandnonsense.co.uk/projects/320andup
76. Questions?
• Now or Later
• E-mail: peter.lubbers@kaazing.com
• Twitter: @peterlubbers
• LinkedIn: Peter Lubbers
76 © 2011 – Kaazing Corporation
77. Buy the Book!
• Pro HTML5 Programming (Apress, 2011)
• 50% off e-book coupon code:
HTL528
http://goo.gl/4RmFk
77 © 2011 – Kaazing Corporation
78. 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/
78 © 2011 – Kaazing Corporation
79. SF HTML5 User Group
• Free
• Great monthly events with
top speakers
• Video-taped
• Twitter: @sfhtml5
• Sign up today:
www.sfhtml5.org
79 © 2011 – Kaazing Corporation
The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
80. Other Great Resources
• HTML5 Weekly (weekly newsletter):
http://html5weekly.com/
• The Web Ahead (5x5 Podcast):
http://5by5.tv/webahead/
80 © 2011 – Kaazing Corporation
81. Elements Overview
http://html5doctor.com/element-index/
81 © 2011 – Kaazing Corporation
82. Who is Developing HTML5?
• Web Hypertext Application Technology
Working Group (WHATWG)
http://www.whatwg.org/specs/web-apps/current-work/
• World Wide Web Consortium (W3C)
http://dev.w3.org/html5/spec/Overview.html
• Internet Engineering Task Force (IETF)
http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol
82 © 2011 – Kaazing Corporation
83. 83 © 2011 – Kaazing Corporation
Editor's Notes In this session, Peter will explain why HTML5 is going to have a tremendous impact on technical communication. He will introduce you to the most relevant HTML5 features and show you practical tools, tips, and tricks so you can start using HTML5 in your technical communication projects right away. HTML, CSS, and JS Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks Open /code/canvas-svg/svg.html and zoom in to show how it doesn’t pixelate WhatWG:Founded in 2004 (by individuals working for browser vendors Apple, Mozilla, Google, and Opera)Develops HTML and APIs for web application developmentUnofficial and open collaboration of browser vendors and interested partiesW3C:Created draft of HTML5 in 2008IETF:Protocols (HTTP, WebSocket)