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

Peter LubbersSenior Director, Technical Communication

Kaazing

HTML5: The 30,000 Foot Overview(Updated)

HTML5Shoes: @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/

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

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

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

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

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

• 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

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

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

Simplified Markup

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

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

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

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

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

<ruby>

<video>

<audio>

<meter>

New HTML5 Elements

<aside>

http://dev.w3.org/html5/markup/elements.html#elements

<frame>

Removed Elements

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

<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

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>

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• 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);

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

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')";

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

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

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

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

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

Canvas Demos

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

Speech Input

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>

• Reference the manifest file:• Use .appcache extension (*.manifest also allowed)• Add as attribute to HTML element

Example manifest Attribute

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

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

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

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame

http://code.google.com/chrome/chromeframe/

Performance Testing Tools

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

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:

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

• 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

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/

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

Technology

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

Html5 viewer HTML5 office kukudocs

HTML5 Programming Cookbook - kimbersoft.comkimbersoft.com/pdf/PRIVATE/HTML5-Programming-Cookbook.pdf · HTML5 Programming Cookbook vi Preface HTML5 is a core technology markup language

Alzheimer’s Disease & Dementia Kelsey Conrow Shelby Lubbers Micca Henry Rachel Turley.

Emulsions 101 - Lubbers

V2 peter-lubbers-sf-jug-websocket

Hire html5 developer for html5 development and html5 game development

HEINEKEN International B.V.Dirk Lubbers | Myriam Marouli Erasmus Placement at Heineken Dirk Lubbers | Myriam Marouli.

ThingsCon Salon 6 - Fashion Tech - Eef Lubbers

HTML5 Training in Hyderabad, BEST HTML5 Training Institute, HTML5 and CSS3 Training in Hyderabad

Khoi Ngo Nguyen HTML5 OVERVIEW. Outline History about HTML & HTML5 Advantage & Disadvantage of HTML5 HTML5 Overview HTML5 Training Plan Introduction Q&A.

HTML5 - (01) Visão Geral do HTML5

HTML5 & CSS3 A Practical Guide. HTML5 is more than HTML5 HTML5 Spec CSS3 Spec Web Fonts JavaScript to tie it all together.

[HTML5 CONVERSION] BEST HTML5 TEMPLATES TO INSPIRE YOU

HTML5 Introduction – Features and Resources for HTML5

NY HTML5 - Game Development with HTML5 & JavaScript

HTML5 and Java Technologies - jug-ostfalen.de · HTML5 Architectural Implications HTML5 is the new UI across devices –Applications == HTML5 + JavaScript + CSS3 + Server Resources

“HTML5”: more than just HTML5

html5-1 - latemar.science.unitn.itlatemar.science.unitn.it/.../2018WebArchitectures/html5-17.pdf · HTML5 drag and drop should work across frames, and across browser windows. HTML5

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]

© Mark E. Damon - All Rights Reserved Round 1Round 2 Final Jeopardy Lubbers.