HTML5 & Internet Explorer 9, est-ce réellement compatible?

W3Québec – 2011-02-21

Frédéric Harper

+ = ?

La présentation n’est pas ?

La présentation ?

Qui suis-je?

HTML5 & Internet Explorer 9, est-ce

réellement compatible?

OUI

Merci et bonne soirée

OK, OK… plus sérieusement maintenant

Qui êtes-vous ?

• Designer ?

• Intégrateur ?

• Programmeur ?

• Utilisateur (seulement) ?

• Membre du mouvement Raëlien ?

Qu’est-ce que HTML5 ?

• Un langage de programmation

• Un standard Web

• Un standard en brouillon, donc non finalisé

• Une révolution pour le Web ?

Demo

Canvas

• Permet aux développeurs de dessiner des graphiques 2D à l’aide de

JavaScript:

– Les méthodes pour dessiner inclus: paths, boxes, circles, text et rasterrized

images.

• Il existe déjà plusieurs

librairies JavaScript qui

permettent le dessin dans

les canvas, tel que EaselJS.

Canvas - Code

<canvas id="monCanvas" width="200" height="200">

Votre navigateur ne supporte pas Canvas, désolé.

</canvas>

<script type="text/javascript">

var exemple = document.getElementById("monCanvas");

var context = exemple.getContext("2d");

context.fillStyle = "rgb(255,0,0)";

context.fillRect(30, 30, 50, 50);

</script>

Demo

Scalable Vector Graphics (SVG)

• Créer et dessiner du 2D à l’aide de vecteur graphique utilisant XML

– Image composée de formes au lieu de pixels

– Basé sur SVG 1.1 2nd édition, spécification complète

• Comprends le support pour:

– Accès complet au DOM

– Structure du document, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking et views.

SVG - Code

<svg width="400" height="200">

<rect fill="red" x="20" y="20" width="100" height="75" />

<rect fill="blue" x="50" y="50" width="100" height="75" />

</svg>

Demo

Video

• Encodage vidéo de l’industrie MPEG-4/H.264

• Peuvent être composé de n’importe quoi d’autre sur la page:

– HTML, images, graphiques SVG

– Accélération matérielle, décompression avec le GPU

Video - Code

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

<source src="video.webm" />

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

Votre navigateur ne supporte pas Video, désolé.

</a>

<!– Vidéo Flash/Silverlight ici -->

</video>

Demo

Audio

• Supporte les standards de l’industrie: MP3 et AAC

• Scriptable via le DOM • Attribues

– src –> la location du fichier

– autoplay –> si la lecture se fait automatiquement (S.V.P.!)

– controls –> si présent, des contrôles le seront aussi

– preload –> si présent, le chargement de l’audio se fera au chargement de la page

Audio - Code

<audio src="audio.mp3" id="audioTag" autoplay controls>

<!– Audio Flash/Silverlight ici -->

</audio>

Demo

Geolocalisation

• Permet aux sites de découvrir votre emplacement géographique

• La permission de l’utilisateur est requise

Geolocalisation - Code

function getLocation() {

if (navigator.getlocation != undefined) {

navigator.getlocation.getCurrentPosition(callBack);

}

}

function callBack(position) {

var accuracy = position.coords[accuracy];

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

}

Demo

Web Open Font Format

• Plus de limitation avec les fonts “Web Safe”

• WOFF

– Créer pour le Web et utilisé à l’aide de la déclaration @font-face

– Un simple “réemballage” des fonts OpenType et TrueType

– Proviens du W3C Fonts Working Group

WOFF - Code

<style type="text/css">

@font-face {

font-family: MonFont;

src: url('Font.woff');

}

</style>

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

Va afficher le font

</div>

Demo

HTML5 & IE9 dans tout ça

• Tous les exemples ont été présentés dans Internet Explorer 9 RC.

• Micosoft est sur le “board” du W3C pour HTML5

• Liste des éléments supportés actuellement :

http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5

• C’est un “work in progress”: on continue

d’ajouter des fonctionnalités

Les petits plus de IE9

• Ce ne sont pas des ajouts d’éléments HTML5, mais pour l’expérience

utilisateur avec le navigateur.

• Nouvel engin JS nommé Chakra: support ECMAScript 5 et très

performant.

• F12 Developer Tools

• Le focus sur le site, plutôt que le navigateur

• Les “Pinned Sites”

• Le favicon personnalise le navigateur

Demo

J’ai entendu dire que…

IE n’obtient pas 100 au Acid3 Test

J’ai entendu dire que… Sylvain a entendu dire que…

IE obtient un petit pointage au HTML5Test

J’ai entendu dire que…

IE n’est pas un navigater moderne

J’ai entendu dire que…

que Fred n’avait pas de cheveux!

Ressources

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

http://www.beautyoftheweb.com

http://ie.microsoft.com/testdrive/

Merci

Frédéric Harper - fredh@microsoft.com

http://twitter.com/fharper

http://linkedin.com/in/fredericharper