SlideShare une entreprise Scribd logo
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 & Internet
Explorer 9, est-ce
   réellement
  compatible?
OUI
Merci et bonne
    soirée
OK, OK… plus
sé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 - 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;
}
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!
Ressources
http://www.w3.org/TR/html5/

http://www.beautyoftheweb.com

http://ie.microsoft.com/testdrive/
Merci
Frédéric Harper - fredh@microsoft.com

http://twitter.com/fharper

http://linkedin.com/in/fredericharper

Contenu connexe

Tendances

Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
IZZA Samir
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
Guillaume Sautereau
 
Web typographie
Web typographieWeb typographie
Web typographiemirko
 
NodeJs, une introduction
NodeJs, une introductionNodeJs, une introduction
NodeJs, une introduction
Toxicode
 
WordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHPWordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHP
xavierborderie
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
13p
 
Simple présentation de Wordpress
Simple présentation de WordpressSimple présentation de Wordpress
Simple présentation de Wordpress
Olympe Tchibozo
 
Formation php pdo
Formation php pdoFormation php pdo
Formation php pdo
Souhaibou Salla
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPress
StrasWeb
 
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerceWordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
Vaisonet
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Ouadie LAHDIOUI
 
PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005
Eric D.
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
Kaylynne Johnson
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Eric D.
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMSChi Nacim
 
Créer son site web avec WordPress
Créer son site web avec WordPressCréer son site web avec WordPress
Créer son site web avec WordPress
Abel LIFAEFI MBULA
 
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
Mak YIMEN
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejsnaholyr
 

Tendances (20)

Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
 
Web typographie
Web typographieWeb typographie
Web typographie
 
NodeJs, une introduction
NodeJs, une introductionNodeJs, une introduction
NodeJs, une introduction
 
WordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHPWordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHP
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
 
Simple présentation de Wordpress
Simple présentation de WordpressSimple présentation de Wordpress
Simple présentation de Wordpress
 
Formation php pdo
Formation php pdoFormation php pdo
Formation php pdo
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPress
 
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerceWordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
WordCamp Lille 2018 : Comprendre et utiliser l'API REST de WooCommerce
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
 
PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Créer son site web avec WordPress
Créer son site web avec WordPressCréer son site web avec WordPress
Créer son site web avec WordPress
 
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
 

En vedette

Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Frédéric Harper
 
Primeiras fotos a cores
Primeiras fotos a coresPrimeiras fotos a cores
Primeiras fotos a coresguest07d190
 
Slideshare de gustavo
Slideshare de gustavoSlideshare de gustavo
Slideshare de gustavo
Hogar
 
Graphic Drawings Proposal
Graphic Drawings ProposalGraphic Drawings Proposal
Graphic Drawings Proposal
Betawebsolution
 
Golgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okGolgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. ok
Hogar
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Frédéric Harper
 

En vedette (6)

Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Primeiras fotos a cores
Primeiras fotos a coresPrimeiras fotos a cores
Primeiras fotos a cores
 
Slideshare de gustavo
Slideshare de gustavoSlideshare de gustavo
Slideshare de gustavo
 
Graphic Drawings Proposal
Graphic Drawings ProposalGraphic Drawings Proposal
Graphic Drawings Proposal
 
Golgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okGolgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. ok
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 

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

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
wyggio
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
Frédéric Harper
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
matparisot
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
Mathieu Parisot
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
jwajsberg
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
Alphorm
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
cjolif
 
MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
Moroccan game developers
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
Vincent Biret
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
Thomas Bassetto
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
Chamseddine Ouerhani
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 

Similaire à HTML5 et Internet Explorer 9, est-ce réellement compatible? (20)

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 

Plus de Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
Frédéric Harper
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
Frédéric Harper
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
Frédéric Harper
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
Frédéric Harper
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
Frédéric Harper
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
Frédéric Harper
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
Frédéric Harper
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Frédéric Harper
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
Frédéric Harper
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Frédéric Harper
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Frédéric Harper
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
Frédéric Harper
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Frédéric Harper
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
Frédéric Harper
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
Frédéric Harper
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Frédéric Harper
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
Frédéric Harper
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Frédéric Harper
 

Plus de Frédéric Harper (20)

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
 

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

  • 1. HTML5 & Internet Explorer 9, est-ce réellement compatible? + =? W3Québec – 2011-02-21 Frédéric Harper
  • 5. HTML5 & Internet Explorer 9, est-ce réellement compatible?
  • 6. OUI
  • 7. Merci et bonne soirée
  • 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!
  • 38. Merci Frédéric Harper - fredh@microsoft.com http://twitter.com/fharper http://linkedin.com/in/fredericharper