HTML5 & Internet Explorer 9,est-ce réellement compatible?         +                       =?         W3Québec – 2011-02-21...
La présentation n’est pas ?
La présentation ?
Qui suis-je?
HTML5 & InternetExplorer 9, est-ce   réellement  compatible?
OUI
Merci et bonne    soirée
OK, OK… plussé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évo...
Demo
Canvas• Permet aux développeurs de dessiner des graphiques 2D à l’aide de   JavaScript:    – Les méthodes pour dessiner in...
Canvas - Code<canvas id="monCanvas" width="200" height="200">   Votre navigateur ne supporte pas Canvas, désolé.</canvas><...
Demo
Scalable Vector Graphics (SVG)• Créer et dessiner du 2D à l’aide de vecteur graphique  utilisant XML   – Image composée de...
SVG - Code<svg width="400" height="200">   <rect fill="red" x="20" y="20" width="100" height="75" />   <rect fill="blue" x...
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, i...
Video - Code<video src="video.mp4" id="videoTag">   <source src="video.webm" />   <a href="http://lienDuVideo.com/">      ...
Demo
Audio• Supporte les standards de l’industrie: MP3 et AAC• Scriptable via le DOM• Attribues   – src –> la location du fichi...
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 - Codefunction getLocation() {  if (navigator.getlocation != undefined) {     navigator.getlocation.getCur...
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...
WOFF - Code<style type="text/css">   @font-face {     font-family: MonFont;     src: url(Font.woff);   }</style><div style...
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...
Les petits plus de IE9• Ce ne sont pas des ajouts d’éléments HTML5, mais pour l’expérience   utilisateur avec le navigateu...
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!
Ressourceshttp://www.w3.org/TR/html5/http://www.beautyoftheweb.comhttp://ie.microsoft.com/testdrive/
MerciFrédéric Harper - fredh@microsoft.comhttp://twitter.com/fharperhttp://linkedin.com/in/fredericharper
Prochain SlideShare
Chargement dans…5
×

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

1 042 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 042
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×