• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 

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

on

  • 846 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
846
Views on SlideShare
846
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