Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux

Frédéric Harper @ Microsoft Canada

@fharper | outofcomfortzone.net

Mobiz - 2012-11-15

HTML5

+ +HTML5 CSS3 JavaScript

Effets 3D

Performance Sémantiques

Hors ligne & stockage

Styles

Connectivité

Multimédia

Accès appareils

Premier brouillonpublic

Brouillon de travail

Candidat pour la recommandation

Recommandationproposée

Recommandation

<video src="video.mp4" id=“tagVideo">

<source src="video.webm" />

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

Désolé, pas de support video HTML5

</a>

<!– Flash/Silverlight video here -->

</video>

• Rapide

• Moins intense sur la mémoire

• Plus de travail pour les développeurs

• Sans JavaScript… vous êtes foutus!

• Bon pour des jeux, des diagrammes,

visualisation de données…

• State• Transformations• Compositing• Colors and styles• Line caps/joins• Shadows• Rects• Path API

• Focus management• Drawing images• Text• Pixel Manipulation• Interfaces– CanvasGradient– TextMetrics– ImageData– CanvasPixelArray

<style type="text/css">

@font-face {

font-family: MyFont;

src: url('Font.woff');

}

</style>

<div style="font: 24pt MyFont, sans-serif;">

Le texte à afficher.

</div>

function getLocation() {

if (navigator.geolocation != undefined) {

navigator.geolocation.getCurrentPosition(callBack);

}

}

function callBack(position) {

var accuracy = position.coords.accuracy;

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

}

• Penser aux besoins de l’utilisateur au lieu des

nôtres.

• Adapter aux différentes capacités des appareils au

lieu de leurs configurations.

• Aide nos sites à être possiblement prêts pour le

futur.

1. Une mise en page flexible, basée sur une grille,

2. Des images et des médias flexibles, et

3. Media queries.

<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

Utiliser seulementles fonctionnalitésdisponiblesnativement danstous les navigateurs visés

Utiliser les fonctionnalitésdisponiblesnativement OU disponibles avec des polyfillJavaScript

X X X X X

X X X

X X

X X X

X X

X X

(n) poly • fill: Un script JavaScript implémentant des fonctionnalités HTML5 non disponibles nativement dans un navigateur

Utiliser les fonctionnalitésdisponiblesnativement ET créerdes expériencesalternatives pour les autres navigateurs

X X X X X

X X X

X X

X X X

X X

X X X

X X

X X

Détecte la disponibilité de l’implémentation

native des fonctionnalités d’HTML5 & CSS3.

if (Modernizr.canvas) {

//On dessine avec Canvas!

}

else {

//Pas de support natif :(

}

Introduction

Contre Jour: http://www.contrejour.ie

Illy Issimo: http://us.illyissimo.com/

Windows Azure: (doit avoir un compte)

SVG girl: http://jsdo.it/event/svggirl/

W3C HTML Working Group: http://www.w3.org/html/wg/La spécification HTML5: http://dev.w3.org/html5/spec/

Vidéo

Support des formats: http://en.wikipedia.org/wiki/HTML5_video

Plus que le Web

PhoneGap: http://www.phonegap.com

HTML5/CSS3/JavaScript for Windows 8: http://j.mp/ZzXznE

Canvas

Canvas Pad: http://j.mp/Soh0K1

Speed Reading: http://j.mp/TZM6LR

Canvas & vidéo, blow it up: http://j.mp/XFoA9C

AI to Canvas: http://visitmix.com/labs/ai2canvas

Web Open Font Format

IE Test Drive Fonts: http://j.mp/TJ0wy2

Font Squirrel: http://www.fontsquirrel.com/

Convert otf to woff: http://orionevent.comxa.com/otf2woff.html

Géolocalisation

Foursquare playground: http://fsplayground.cloudapp.net/

Responsive Web Design

Article Ethan Marcotte: http://j.mp/QHkDiW

Screenfly: http://quirktools.com/screenfly/

Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514

Livre Responsive Web Design: http://j.mp/TJ1N84

Exemples Media Queries: http://mediaqueri.es/

Mobile First

Article de Luke Woblewski : http://www.lukew.com/ff/entry.asp?933

Livre Mobile First: http://www.abookapart.com/products/mobile-first

Présentation de Luke Woblewsky : http://vimeo.com/38187066

Livre Tapworthy: http://shop.oreilly.com/product/0636920001133.do

Stratégies d’adoption

When can I use: http://caniuse.com/

Modernizr: http://www.modernizr.com/

Divers

Internet Explorer 10 & Windows 8: http://bit.ly/PtZ3OL

Internet Explorer 10 Preview pour Windows 7: http://bit.ly/SaL0eY

Make Awesome Web: http://makeawesomeweb.com/

Dive into HTML5: http://diveintohtml5.info/

HTML5 learning: http://msdn.microsoft.com/en-ca/ie/aa740476

IE Test drive: http://ie.microsoft.com/testdrive/

Frameworks

jQuery: http://jquery.com/

Less Framework: http://lessframework.com/

Knockout: http://knockoutjs.com/

Kendo UI: http://www.kendoui.com/

Backbone.js: http://backbonejs.org/

HTML5 boilerplate: http://html5boilerplate.com/

Bootstrap: http://twitter.github.com/bootstrap/

Outils

WebMatrix: http://www.microsoft.com/web/webmatrix/

jsFiddle: http://jsfiddle.net

Visual Studio 2012 Express for Web: http://j.mp/W7BLuZ

http://html5mtl.ca

• Une révolution à plusieurs niveaux!

• Une opportunité pour vos sites Web et applications

Web mobile (et non mobile!)

• Un standard non final

• Un standard qu’on peut toutefois utiliser dès

maintenant!

Frédéric Harper

fredh@microsoft.com

@fharper

http://webnotwar.ca

http://outofcomfortzone.net