East of Toronto .NET User Group

2011-10-27

Frédéric Harper – Microsoft Canada

• It will be all about HTML5!

A. You know HTML5 and use it now

B. You know what is HTML5 and don’t use it

C. You don’t know what I am talking about

HTML5

+ + HTML5 CSS3 JavaScript

3D Effects

Performance Semantics

Offline& Storage

Styling

Connectivity

Multimedia

Device Access

First draft Working draft Last call Recommendation candidate Recommendation

Video

Document editing

Offline storage

CSS3 Media

Queries

Microdata

WOFF

Web Sockets

Web Workers

Drag-and-drop

Canvas

Cross-document

messaging

Audio

Browser history

management

Semantics elements

AND MUCH MORE!

Video

Document editing

Offline storage

CSS3 Media

Queries

Microdata

WOFF

Web Sockets

Web Workers

Drag-and-drop

Canvas

Cross-document

messaging

Audio

Browser history

management

Semantics elements

AND MUCH MORE!

<div id=“header”>

<div id=“footer”>

<d

iv id

=

“si

de

ba

r”>

<div id=“nav”>

<div id=“article”>

<div id=“article”>

<div id=“media”>

<div id=“section”>

<header>

<footer>

<a

sid

e>

<nav>

<article>

<article>

<figure>

<section>

http://ie.microsoft.com/testdrive/Performance/SpeedReading/Default.html

<video src="video.mp4" id="videoTag">

<source src="video.webm" />

<a href="http://videolink.com/">

Sorry, your browser doesn’t support HTML5 video tag

</a>

<!– Flash/Silverlight video here -->

</video>

Web Open Font Format

http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" />

<link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" />

<link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />

X X X X X

X X X

X X

X X X

X X

Lowest Common Dominator

Only use features natively available in all target browsers

Polyfill Enriched

Only use features either natively available OR available via JavaScript polyfill

X X X X X

X X X

X X

X X X

X X

X X

polyfill

(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support

Alternate Experiences

Only use features available in target browsers AND design alternate experience for other browsers

X X X X X

X X X

X X

X X X

X X

X X X

X X

X X

http://caniuse.com/

http://www.modernizr.com/

iOS Android Windows

Phone

Geolocation

Offline

Local Storage

Video/Audio

Canvas

SVG

WebSQL

Gradients*

CSS3 Animations*

Text Shadows

CSS3 Transforms

And more…

1. You already know HTML

1. You already know HTML

2. You already know the tools

1. You already know HTML

2. You already know the tools

3. Cross browsers / platforms / devices

1. You already know HTML

2. You already know the tools

3. Cross browsers / platforms / devices

4. One of the future technology

Try it

Read on it

Do cool

project

Have fun!

http://www.w3.org/TR/html5/

http://caniuse.com

http://www.modernizr.com/

http://makeawesomeweb.com

http://html5gallery.com

http://diveintohtml5.org/

http://www.html5tutorial.info/

http://www.beautyoftheweb.com

http://html5labs.interoperabilitybridges.com/

Frederic Harper

Developer Evangelist @ Microsoft

fredh@microsoft.com

http://webnotwar.ca

http://outofcomfortzone.net