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

995 views
831 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
995
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5 & Internet Explorer 9,est-ce réellement compatible? + =? W3Québec – 2011-02-21 Frédéric Harper
  2. 2. La présentation n’est pas ?
  3. 3. La présentation ?
  4. 4. Qui suis-je?
  5. 5. HTML5 & InternetExplorer 9, est-ce réellement compatible?
  6. 6. OUI
  7. 7. Merci et bonne soirée
  8. 8. OK, OK… plussérieusement maintenant
  9. 9. Qui êtes-vous ?• Designer ?• Intégrateur ?• Programmeur ?• Utilisateur (seulement) ?• Membre du mouvement Raëlien ?
  10. 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. 11. Demo
  12. 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. 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. 14. Demo
  15. 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. 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. 17. Demo
  18. 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. 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. 20. Demo
  21. 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. 22. Audio - Code<audio src="audio.mp3" id="audioTag" autoplay controls> <!– Audio Flash/Silverlight ici --></audio>
  23. 23. Demo
  24. 24. Geolocalisation• Permet aux sites de découvrir votre emplacement géographique• La permission de l’utilisateur est requise
  25. 25. Geolocalisation - Codefunction 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. 26. Demo
  27. 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. 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. 29. Demo
  30. 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. 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. 32. Demo
  33. 33. J’ai entendu dire que…IE n’obtient pas 100 au Acid3 Test
  34. 34. J’ai entendu dire que…Sylvain a entendu dire que…IE obtient un petit pointage au HTML5Test
  35. 35. J’ai entendu dire que…IE n’est pas un navigater moderne
  36. 36. J’ai entendu dire que…que Fred n’avait pas de cheveux!
  37. 37. Ressourceshttp://www.w3.org/TR/html5/http://www.beautyoftheweb.comhttp://ie.microsoft.com/testdrive/
  38. 38. MerciFrédéric Harper - fredh@microsoft.comhttp://twitter.com/fharperhttp://linkedin.com/in/fredericharper

×