HTML5 et Internet Explorer 9, est-ce réellement compatible?
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 928 views

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

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

Statistics

Views

Total Views
928
Views on SlideShare
928
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 & 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é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 - 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;}
  • 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!
  • 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