Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | peter-lubbers |
View: | 114 times |
Download: | 2 times |
1 © 2011 – Kaazing Corporation
Title
Peter LubbersSenior Director, Technical Communication
Kaazing
HTML5: The 30,000 Foot Overview(Updated)
HTML5Shoes: @matijs
2 © 2011 – Kaazing Corporation
About @peterlubbers
3 © 2011 – Kaazing Corporation
Not to Be Confused With…
4 © 2011 – Kaazing Corporation
About Kaazing
• High-performance WebSocket Platform• Global HTML5 Training• Check out our booth, win prizes• HTML5 Live Conference (NYC, London)
5 © 2011 – Kaazing Corporation
SF HTML5 User Group
• Free• Great monthly events with
top speakers• Video-taped• Twitter: @sfhtml5• Sign up today:
www.sfhtml5.org
The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
6 © 2011 – Kaazing Corporation
Last Year…
• SF HTML5 Meetup (<100 members)• Less HTML5 features• Less browser support• 2 Hours + 1 Hr Q&A• 30,000’ Overview
http://www.slideshare.net/peterlubbers/html5-4378635
7 © 2011 – Kaazing Corporation
Today…
• SF HTML5 Meetup: ~2500 members• More HTML5 features• More browser support• 1 Hr (incl. Q&A)• So… talk faster or
8 © 2011 – Kaazing Corporation
100,000 Foot Overview
• Introducing the 100,000’ Overview
9 © 2011 – Kaazing Corporation
Agenda
• What is HTML5?• HTML5 History in <2 minutes• Why HTML5?• HTML5 Features• Your 2011 HTML5 Toolkit• Q&A
#html5devconf@peterlubbers
10 © 2011 – Kaazing Corporation
• The new major milestone for HTML
• Focused on Web Applications
• Web aps are rapidly becoming first class apps, on par with desktopand native apps
• Different definitions
What is HTML5?
CSSJavaScript
HTML
NEWT?
11 © 2011 – Kaazing Corporation
Browser Support
http://paulirish.com/2010/high-res-browser-icons
• Modern browsers already support a lot of features, including mobile browsers:• 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
12 © 2011 – Kaazing Corporation
HTML Timeline
13 © 2011 – Kaazing Corporation
HTML (1.0)
• 1991: HTML Tags Specification• 1993: First HTML Specification (IETF)• First spec ~41 Pages Long
14 © 2011 – Kaazing Corporation
HTML 2.0, 3.0
• 1995: HTML 2.0 (IETF)• 1995: HTML 3 Proposed and Abandoned
15 © 2011 – Kaazing Corporation
HTML 3.2, 4.0
1997: HTML 3.2 (W3C)
1997: HTML 4.0 (W3C)
16 © 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
17 © 2011 – Kaazing Corporation
HTML5
• 2004: WHATWG (Web Apps 1.0)• 2008: HTML5 Working Draft W3C• 2009: XHTML 2.0 Dropped
18 © 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
19 © 2011 – Kaazing Corporation
Why HTML5?
• 5 Reasons why you should care!
20 © 2011 – Kaazing Corporation
1) HTML5 Paves the Cowpaths
• Because HTML5 takes a pragmatic approach, fixing common real-world problems
21 © 2011 – Kaazing Corporation
Paved Cowpath
HTML4
<form> <input name="email" type="text">
HTML5
<input type=email required>
crapload of validation codeor extra js lib
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-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-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])
22 © 2011 – Kaazing Corporation
2) HTML5 Simplifies
Because HTML5 is, well, simpler
23 © 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
24 © 2011 – Kaazing Corporation
Simplified Character Set
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset=utf-8>
25 © 2011 – Kaazing Corporation
Simplified Markup
HTML5
<!DOCTYPE html> <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1>
DOM
70 characters!
26 © 2011 – Kaazing Corporation
Simplified Markup
Two HTML5 pages in one tweet!
27 © 2011 – Kaazing Corporation
3) HTML5 is Universal
• Because HTML5 works in all languages and accessibility is built in from the ground up
28 © 2011 – Kaazing Corporation
Universal Access
• Support for all world languages• For example, the new <ruby> element
• Accessibility • Semantic markup• WebVTT
<video controls preload="metadata"> <source src="rocpoc.mp4"> <track label="English" kind="subtitles" src="subtitles_en.vtt”></video>
WEBVTT
100:00:01,000 --> 00:00:03,050What do I think about HTML 5?...
200:00:04,000 --> 00:00:07,100It’s pretty sweet. I just hope that people use the new features thoughtfully.
http://html5videoguide.net/presentations/WebVTT
29 © 2011 – Kaazing Corporation
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, sockets)
30 © 2011 – Kaazing Corporation
Plugins
• Built-in is better than bolt-on —@brucel• Plugins may not be installed• Plugins can be an attack vector (Proxy poisoning)• “Whenever a Mac crashes, more often that not is
because of Flash” —Steve Jobs
http://www.infoq.com/news/2011/09/Metro-Plug-ins
31 © 2011 – Kaazing Corporation
32 © 2011 – Kaazing Corporation
Secure by Default
• HTML5 uses origin-based security• Defines secure cross-origin sharing• HTML5 is not without flaws, but issues will be
fixed (unlike proprietary plugins) • Canvas image data• WebSocket proxy poisoning
http://enable-cors.org/
33 © 2011 – Kaazing Corporation
5) It’s Cool!
• Because all the cool kids use it
34 © 2011 – Kaazing Corporation
HTML5 Feature Areas
35 © 2011 – Kaazing Corporation
HTML5 Feature Areas
Semantics: Markup describes purpose of content (e.g. <header> vs. <div class="header">)
CSS3: New selectors, more visual options Multimedia: <audio> and <video>Graphics: <canvas> and in-line SVG
36 © 2011 – Kaazing Corporation
HTML5 Feature Areas
Device Access: Geolocation, accelerometer, etc.Performance: Run JS in backgroundOffline/Storage: Use web apps on/off lineConnectivity: Improved XHR, SSE, WebSockets
37 © 2011 – Kaazing Corporation
Semantic Markup & Microdata
38 © 2011 – Kaazing Corporation
Valid HTML vs. Valid XHTML
• If you’re so proud of your XHTML…• Why don’t you serve it with the right
mime type?• Over 90% of XHTML is delivered with the text/html
mime type and therefore broken• Delivering XHTML as application/xhtml+xml
is not supported in old IE (Will prompt for download)
39 © 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
http://validator.nu
40 © 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
41 © 2011 – Kaazing Corporation
<s> <strike>
<big>
<acronym>
<basefont>
<center>
<frame>
<font><dir>
<noframes>
<frameset>
<tt>
<u>
Removed Elements
<applet>
42 © 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
43 © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page
44 © 2011 – Kaazing Corporation
I.E. <9
HTML5 Page in IE
45 © 2011 – Kaazing Corporation
Microdata
• Emphasis on machine readability (SEO)• Easy-to-write syntax (add attributes to any
element)• Use microdata vocabularies:
http://data-vocabulary.org
46 © 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
47 © 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
48 © 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
49 © 2011 – Kaazing Corporation
Forms features
Date picker
Color picker
50 © 2011 – Kaazing Corporation
CSS3
51 © 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 cornerswithout images)
• Gradients• Multi-column layout• Reflection• Etc.
http://css3please.com/
52 © 2011 – Kaazing Corporation
Rounded corners
a:hover img {border-radius: 10px;border: 2px solid #F47D31;-webkit-transform: scale(1.05);
}
CSS
53 © 2011 – Kaazing Corporation
/* Linear Gradient for WebKit and Mozilla in CSS3 */background-image: -moz-linear-gradient(top, #F47D31, #888);background-image: -webkit-gradient( linear, left top, left bottom, color-stop (0,#F47D31), color-stop(1, #888));
Copyright © 2011 - Kaazing Corporation. All rights reserved.
CSS
Example: Linear Gradient
54 © 2011 – Kaazing Corporation
/* Define a fallback color and image */background-color: #f47d31;background: #888888 url("gradient-bg.png") repeat-x top;
/** In Opera, you can also use SVG: background: #f47d31 url("gradient-bg.svg");**/
/* IE(6&7, 8) Fallback, specify 6-digit colors here */filter: progid:DXImageTransform.Microsoft.gradient( startColorStr='#FFF47D31', EndColorStr='#FF888888');-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr='#FFF47D31', EndColorStr='#FF888888')";
Copyright © 2011 - Kaazing Corporation. All rights reserved.
CSS
Linear Gradient Fallback
55 © 2011 – Kaazing Corporation
Multi-Column Layout
/* Column layout*/body { -webkit-column-count:3; -webkit-column-width: 100px; -webkit-column-gap: 10px; -webkit-column-rule: 1px solid; -moz-column-count:3; -moz-column-width: 100px; -moz-column-gap: 10px; -moz-column-rule: 1px solid;}}
CSS
56 © 2011 – Kaazing Corporation
Reflection
For images, videos, etc.
-webkit-box-reflect: below 2px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop( 0.6, transparent), to(white));
CSS
57 © 2011 – Kaazing Corporation
Multimedia
58 © 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
59 © 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
60 © 2011 – Kaazing Corporation
61 © 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
62 © 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
63 © 2011 – Kaazing Corporation
Graphics and 3D
64 © 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)
65 © 2011 – Kaazing Corporation
Canvas Pixel Data
66 © 2011 – Kaazing Corporation
Interactive Canvas Animation
everytimezone.com
68 © 2011 – Kaazing Corporation
3D Canvas (WebGL)
http://bodybrowser.googlelabs.com/body.html
69 © 2011 – Kaazing Corporation
Device Access
70 © 2011 – Kaazing Corporation
Device Access Features
• Lots of features, varying levels of suport:• 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)
71 © 2011 – Kaazing Corporation
Geolocation with Map APIs
72 © 2011 – Kaazing Corporation
Device Orientation
Demo: http://slides.html5rocks.com/#slide-orientation
Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html
73 © 2011 – Kaazing Corporation
Speech Input
<input type=text x-webkit-speech>
HTML
74 © 2011 – Kaazing Corporation
Performance
75 © 2011 – Kaazing Corporation
Web Workers
• JavaScript is single-threaded• HTML5 Web Workers provide background
processing capabilities to web applications• Run background JavaScript (like a thread)• Avoid blocking the UI thread
76 © 2011 – Kaazing Corporation
Offline and Storage
77 © 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
78 © 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
79 © 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/
80 © 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
81 © 2011 – Kaazing Corporation
Connectivity and Real Time
82 © 2011 – Kaazing Corporation
Connectivity Features
• Cross Document Messaging• XMLHttpRequest Level 2• Server-Sent Events• WebSockets• CORS
83 © 2011 – Kaazing Corporation
WebSocket
• Replaces Comet, Reverse Ajax polling
84 © 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
86 © 2011 – Kaazing Corporation
The 2011 HTML5 Toolbox
87 © 2011 – Kaazing Corporation
Browser Built-In Tool Mac Shortcut Windows Shortcut
Chrome Developer Tools Command + Option + J
CTRL + Shift + J
Firefox Firebug F12 F12
Opera Dragonfly Command + Option + I
CTRL + Shift + I
Safari Web Inspector Command + Option + I
CTRL + Alt + I
Internet Explorer Developer Tools F12
Browser Developer Tools
88 © 2011 – Kaazing Corporation
HTML5 Boilerplate
• The best way to get started
http://html5boilerplate.com
89 © 2011 – Kaazing Corporation
Polyfills and Emulation
• Feature detect with Modernizr (part of H5BP):http://www.modernizr.com
• Complete polyfill list: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
90 © 2011 – Kaazing Corporation
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'});
http://www.sfhtml5.org/events/28458331
91 © 2011 – Kaazing Corporation
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”>
http://code.google.com/chrome/chromeframe/
92 © 2011 – Kaazing Corporation
Performance Testing Tools
• Great free Tools:• Page Speed• YSlow• Chrome Speed Tracer
93 © 2011 – Kaazing Corporation
Questions?
• Now or Later• E-mail: [email protected]• Twitter: @peterlubbers• LinkedIn: Peter Lubbers
94 © 2011 – Kaazing Corporation
Buy the Book!
• Pro HTML5 Programming (Apress, 2010)• 50% off e-book coupon code:
HTML5CONFhttp://www.prohtml5.com
95 © 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
96 © 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
97 © 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/
• 5by5 podcasts:• The Web Ahead• The Big Web Show• http://5by5.tv
Learn More
98 © 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/
99 © 2011 – Kaazing Corporation