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

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

2. La présentation n’est pas ?

3. La présentation ?

4. Qui suis-je?

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

6. OUI

7. Merci et bonne
soirée

8. OK, OK… plus
sérieusement
maintenant

9. Qui êtes-vous ?
• Designer ?
• Intégrateur ?
• Programmeur ?
• Utilisateur (seulement) ?
• Membre du mouvement Raëlien ?

10. 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 ?

11. Demo

12. 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.

13. 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>

14. Demo

15. 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.

16. 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>

17. Demo

18. 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

19. 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>

20. Demo

21. 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

22. Audio - Code
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!– Audio Flash/Silverlight ici -->
</audio>

23. Demo

24. Geolocalisation
• Permet aux sites de découvrir votre emplacement
géographique
• La permission de l’utilisateur est requise

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

26. Demo

27. 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

28. 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>

29. Demo

30. 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

31. 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

32. Demo

33. J’ai entendu dire que…
IE n’obtient pas 100 au Acid3 Test

34. J’ai entendu dire que…
Sylvain a entendu dire que…
IE obtient un petit pointage au HTML5Test

35. J’ai entendu dire que…
IE n’est pas un navigater moderne

36. J’ai entendu dire que…
que Fred n’avait pas de cheveux!

37. Ressources
http://www.w3.org/TR/html5/
http://www.beautyoftheweb.com
http://ie.microsoft.com/testdrive/

38. Merci
Frédéric Harper - fredh@microsoft.com
http://twitter.com/fharper
http://linkedin.com/in/fredericharper