Peter lubbers-html5-overview-sf-dev-conf-2011

1 © 2011 – Kaazing Corporation

Title

Peter LubbersSenior Director, Technical Communication

Kaazing

HTML5: The 30,000 Foot Overview(Updated)

HTML5Shoes: @matijs

https://twitter.com/%23!/matijs


About @peterlubbers


Not to Be Confused With…


About Kaazing

• High-performance WebSocket Platform• Global HTML5 Training• Check out our booth, win prizes• HTML5 Live Conference (NYC, London)


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/

https://twitter.com/%23!/sfhtml5

http://www.sfhtml5.org/

http://www.w3.org/html/logo/


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

http://www.slideshare.net/peterlubbers/html5-4378635


Today…

• SF HTML5 Meetup: ~2500 members• More HTML5 features• More browser support• 1 Hr (incl. Q&A)• So… talk faster or


100,000 Foot Overview

• Introducing the 100,000’ Overview


Agenda

• What is HTML5?• HTML5 History in <2 minutes• Why HTML5?• HTML5 Features• Your 2011 HTML5 Toolkit• Q&A

#html5devconf@peterlubbers


• 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?


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

http://paulirish.com/2010/high-res-browser-icons

http://html5test.com/

http://caniuse.com/

http://mobilehtml5.org/

http://mobilehtml5.org/


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


Why HTML5?

• 5 Reasons why you should care!


1) HTML5 Paves the Cowpaths

• Because HTML5 takes a pragmatic approach, fixing common real-world problems


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])+)\])


2) HTML5 Simplifies

Because HTML5 is, well, simpler


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


Simplified Character Set

HTML4

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5

<meta charset=utf-8>


Simplified Markup

HTML5

<!DOCTYPE html> <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1>

DOM

70 characters!


Simplified Markup

Two HTML5 pages in one tweet!


3) HTML5 is Universal

• Because HTML5 works in all languages and accessibility is built in from the ground up


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




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)


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

https://twitter.com/%23!/brucel




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/




5) It’s Cool!

• Because all the cool kids use it


HTML5 Feature Areas


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


HTML5 Feature Areas

Device Access: Geolocation, accelerometer, etc.Performance: Run JS in backgroundOffline/Storage: Use web apps on/off lineConnectivity: Improved XHR, SSE, WebSockets


Semantic Markup & Microdata


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)


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

http://html5.validator.nu/

http://validator.w3.org/

http://validator.nu/

http://validator.nu/


<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

http://dev.w3.org/html5/markup/elements.html%23elements




<s> <strike>

<big>

<acronym>

<basefont>

<center>

<frame>

<font><dir>

<noframes>

<frameset>

<tt>

<u>

Removed Elements

<applet>


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


Anatomy of an HTML5 Page


I.E. <9

HTML5 Page in IE


Microdata

• Emphasis on machine readability (SEO)• Easy-to-write syntax (add attributes to any

element)• Use microdata vocabularies:

http://data-vocabulary.org

http://data-vocabulary.org/




<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


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


<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


Forms features

Date picker

Color picker


CSS3


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/




Rounded corners

a:hover img {border-radius: 10px;border: 2px solid #F47D31;-webkit-transform: scale(1.05);

}

CSS


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


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


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


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


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


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


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


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


Graphics and 3D


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)


Canvas Pixel Data


Interactive Canvas Animation

everytimezone.com

http://everytimezone.com/

http://everytimezone.com/


Canvas Demos

www.canvasdemos.com

http://www.canvasdemos.com/


3D Canvas (WebGL)

http://bodybrowser.googlelabs.com/body.html




Device Access


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)


Geolocation with Map APIs


Device Orientation

Demo: http://slides.html5rocks.com/#slide-orientation

Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html

http://slides.html5rocks.com/%23slide-orientation



http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html




Speech Input

<input type=text x-webkit-speech>

HTML


Performance


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


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


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


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

http://appcachefacts.info/


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


Connectivity and Real Time


Connectivity Features

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


WebSocket

• Replaces Comet, Reverse Ajax polling


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


The 2011 HTML5 Toolbox


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


HTML5 Boilerplate

• The best way to get started

http://html5boilerplate.com

http://html5boilerplate.com/


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

http://www.modernizr.com/

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills


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



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/


Performance Testing Tools

• Great free Tools:• Page Speed• YSlow• Chrome Speed Tracer


Questions?

• Now or Later• E-mail: [email protected]• Twitter: @peterlubbers• LinkedIn: Peter Lubbers

mailto:[email protected]

http://twitter.com/peterlubbers

http://www.linkedin.com/in/peterlubbers


Buy the Book!

• Pro HTML5 Programming (Apress, 2010)• 50% off e-book coupon code:

HTML5CONFhttp://www.prohtml5.com

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

http://www.modernizr.com/

http://code.google.com/p/html5shiv/

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



http://validator.w3.org/

http://gsnedders.html5.org/outliner/

http://gsnedders.html5.org/outliner/

http://code.google.com/webtoolkit/speedtracer/

http://developer.yahoo.com/yslow/




• HTML5 User Group:• San Francisco: http://www.sfhtml5.org/

• Apress book: Pro HTML5 Programming• (Peter Lubbers, Brian Albers, & Frank Salim)


• 5by5 podcasts:• The Web Ahead• The Big Web Show• http://5by5.tv

Learn More

http://www.sfhtml5.org/


http://5by5.tv/


Get Trained!

• Proven, practical worldwide HTML5 Training (training from experts, not just trainers):• E-mail us: [email protected]• Web site: http://kaazing.com/training/

http://tech.kaazing.com/training/

http://kaazing.com/training/

Peter lubbers-html5-overview-sf-dev-conf-2011

Technology

Transcript of Peter lubbers-html5-overview-sf-dev-conf-2011