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

of 38 /38
HTML5 & Internet Explorer 9, est-ce réellement compatible? W3Québec – 2011-02-21 Frédéric Harper + = ?

description

Une présentation sur Internet Explorer 9 et HTML5 que j'ai présenté au W3Québec.

Transcript of HTML5 et Internet Explorer 9, est-ce réellement compatible?

Page 1: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

W3Québec – 2011-02-21

Frédéric Harper

+ = ?

Page 2: HTML5 et Internet Explorer 9, est-ce réellement compatible?

La présentation n’est pas ?

Page 3: HTML5 et Internet Explorer 9, est-ce réellement compatible?

La présentation ?

Page 4: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Qui suis-je?

Page 5: HTML5 et Internet Explorer 9, est-ce réellement compatible?

HTML5 & Internet Explorer 9, est-ce

réellement compatible?

Page 6: HTML5 et Internet Explorer 9, est-ce réellement compatible?

OUI

Page 7: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Merci et bonne soirée

Page 8: HTML5 et Internet Explorer 9, est-ce réellement compatible?

OK, OK… plus sérieusement maintenant

Page 9: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Qui êtes-vous ?

• Designer ?

• Intégrateur ?

• Programmeur ?

• Utilisateur (seulement) ?

• Membre du mouvement Raëlien ?

Page 10: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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 ?

Page 11: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 12: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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.

Page 13: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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>

Page 14: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 15: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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.

Page 16: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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>

Page 17: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 18: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

Page 19: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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>

Page 20: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 21: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

Page 22: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Audio - Code

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

<!– Audio Flash/Silverlight ici -->

</audio>

Page 23: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 24: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Geolocalisation

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

• La permission de l’utilisateur est requise

Page 25: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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;

}

Page 26: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 27: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

Page 28: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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>

Page 29: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 30: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

Page 31: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

Page 32: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Demo

Page 33: HTML5 et Internet Explorer 9, est-ce réellement compatible?

J’ai entendu dire que…

IE n’obtient pas 100 au Acid3 Test

Page 34: HTML5 et Internet Explorer 9, est-ce réellement compatible?

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

IE obtient un petit pointage au HTML5Test

Page 35: HTML5 et Internet Explorer 9, est-ce réellement compatible?

J’ai entendu dire que…

IE n’est pas un navigater moderne

Page 36: HTML5 et Internet Explorer 9, est-ce réellement compatible?

J’ai entendu dire que…

que Fred n’avait pas de cheveux!

Page 37: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Ressources

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

http://www.beautyoftheweb.com

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

Page 38: HTML5 et Internet Explorer 9, est-ce réellement compatible?

Merci

Frédéric Harper - [email protected]

http://twitter.com/fharper

http://linkedin.com/in/fredericharper