Une visite guidée d’Internet Explorer 9 et       HTML5 pour les développeurs WebFrédéric HarperÉvangéliste aux développeur...
rapide
Performance de multisystème  News Site 5                     Rendering  News Site 4                     Layout            ...
La puissance de tout le PC              GREETINGS PROFESSOR FALKEN.              WOULD YOU LIKE TO PLAY A              GAM...
L’engin JavaScriptAu premier plan                                Arbre      Code        Analyseur                         ...
Nouvel engin JavaScript – “Chakra”Au premier plan                                     Arbre      Code             Analyseu...
Résultats du WebKit SunSpider v0.9.14000                          IE83500                          Firefox 3.6.133000     ...
Nouvel engin JavaScript – “Chakra” Plusieurs fonctionnalités ECMAScript 5 importantes sont  implémentées dans Internet Ex...
Les fonctionnalités du DOM et du JavaScript           Support complet des événements du DOM niveau 2 et 3   Nouvelles fonc...
demoPerformance d’IE9
window.msPerformance Un nouvel ensemble de  mesures du rendement  intégrées dans l’API du  « Document Object Model”  (DOM...
window.msPerformance<script type="text/javascript">  var w = window;  var navStart =    w.msPerformance.timing.navigationS...
L’outil F12 pour développeurs Une interface visuelle intégrée  pour visualiser le DOM Expérimentation rapide Plusieurs ...
demoL’outil F12 pour les développeurs dans IE9
Épuré
Internet Explorer 9: Le site en priorité Dispose dune interface  propre, simplifiée, plus  rapide, qui met laccent sur  l...
Le Canada construit un Web encore plus beau
Le Canada construit un Web encore plus beau
Le Canada construit un Web encore plus beau
demoLes sites pinnés (Pinned Sites) dans IE9
Débutez avec les sites pinnés  Le support des sites pinnés ne   demande aucun changement   cosmétique à votre site  Four...
Personnalisez votre site pinné<meta name="application-name" content="Site Name" /><meta name="msapplication-tooltip"  cont...
Fournissez des notificationswindow.external.msSiteModeSetIconOverlay( http://host/overlay1.ico,Overlay 1);window.external....
Ajouter des listes de tâches (Jump Lists)<meta name="msapplication-task"  content="name=Task 1;  action-uri=http://host/Pa...
X-Icon Editor (xiconeditor.com)
demoFavicons
interopérable
Qu’est-ce que “HTML5”?
Qu’est-ce que “HTML5”?                                                                      Candidat à la  Premier brouill...
Groupes de travail HTML du W3C 40 organisations membres 400+ participants 280+ experts invités Spécification HTML5  D...
Cycle de vie d’une spécification du W3C  Premier brouillon   Brouillon de        Candidat pour la         Recommendation  ...
Atteindre une recommandation finale L’interopérabilité demande  une suite de tests  compréhensive W3C HTML5 Test Suite  ...
HTML5 <canvas> Permet aux développeurs  de dessiner des graphiques  2D à l’aide de JavaScript: Les méthodes pour dessine...
HTML5 <canvas><canvas id="monCanvas" width="200" height="200">    Votre navigateur ne supporte pas Canvas, désolé.</canvas...
Scalable Vector Graphics (SVG) Créer et dessiner du 2D à l’aide de  vecteur graphique utilisant XML Image composée de fo...
Scalable Vector Graphics (SVG)<svg width="400" height="200">    <rect fill="red" x="20" y="20" width="100"height="75" />  ...
HTML5 <video> Encodage vidéo de  l’industrie MPEG-4/H.264 Peuvent être composé de  n’importe quoi d’autre sur  la page:...
HTML5 <video><video src="video.mp4" id="videoTag">  <source src="video.webm" />  <!– Vidéo Flash/Silverlight ici --></video>
HTML5 <audio> Supporte les standards de  l’industrie: MP3 et AAC Scriptable via le DOM Attribues  src –> la location d...
HTML5 <audio>     <audio src="audio.mp3" id="audioTag" autoplay controls>         <!– Audio Flash/Silverlight ici -->     ...
Geolocation Permet aux sites de  découvrir votre  emplacement géographique La permission de l’utilisateur  est requise
Geolocationfunction getLocation() {    if (navigator.getlocation != undefined) {      navigator.getlocation.getCurrentPosi...
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 Fonts and @font-face<style type="text/css">  @font-face {    font-family: MyFontName;    src: url(FontFile.woff);  }<...
CSS3 Media Queries
CSS3 Media Queries<link href="mobile.css" rel="stylesheet"  media="screen and (max-width:480px)"  type="text/css" /><link ...
outils
Outils pour HTML5Visual Studio 2010 SP1         Expression Studio Web 4 Validation et IntelliSense   SP1  pour HTML5     ...
Visual Studio HTML5 & SVG Extensions  visualstudiogallery.msdn.microsoft.comPAGE
Ai2Canvas Exporter  visitmix.com/labPAGE
IE9 Dev Unpluggedwww.beautyoftheweb.com/dev/unplugged Deux catégories principales   Meilleur jeux   Meilleur expérience...
Downloadez Internet Explorer 9 RTW           Le navigateur de Microsoft le plus rapide        Téléchargez et essayez le ma...
Beauty of the Web
IE Test Drive
Make Awesome Web
Médias sociaux relisés à IE Twitter: @ie Autres hashtag à considérer: #IE9, #HTML5, #WebDevs,  #CSS3 facebook.com/inter...
questions?
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or ma...
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Prochain SlideShare
Chargement dans…5
×

Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web

1 221 vues

Publié le

Une présentation sur la nouvelle mouture d'Internet Explorer présenté au CUNQ et au groupe d'utilisateurs .NET Montréal.

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 221
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web

  1. 1. Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric HarperÉvangéliste aux développeurs – Microsoft Canadafredh@microsoft.comhttp://twitter.com/fharperhttp://linkedin.com/in/fredericharper
  2. 2. rapide
  3. 3. Performance de multisystème News Site 5 Rendering News Site 4 Layout Block Building News Site 3 Formatting News Site 2 Native OM News Site 1 Marshalling JavaScript 0% 50% Collections 100%
  4. 4. La puissance de tout le PC GREETINGS PROFESSOR FALKEN. WOULD YOU LIKE TO PLAY A GAME OF CHESS? █
  5. 5. L’engin JavaScriptAu premier plan Arbre Code Analyseur Syntaxique ByteCode Interpréteur source (Parser) Abstrait (AST)
  6. 6. Nouvel engin JavaScript – “Chakra”Au premier plan Arbre Code Analyseur Syntaxique ByteCode Interpréteur source (Parser) Abstrait (AST) Compilation Code natif En arrière-plan Utilisant plusieurs JavaScript compilé En arrière-plan processeurs
  7. 7. Résultats du WebKit SunSpider v0.9.14000 IE83500 Firefox 3.6.133000 Safari 5.0.32500 Firefox 4.0 Beta 102000 Chrome 10 Developer1500 Opera 111000 Chrome 9 500 IE9 RC 0
  8. 8. Nouvel engin JavaScript – “Chakra” Plusieurs fonctionnalités ECMAScript 5 importantes sont implémentées dans Internet Explorer 9  Nouvelle méthode de tableau  Modèle d’objet amélioré  Autres méthodes et fonctions de calculs Pour plus d’informations, lire “ECMAScript 5 Support and More” sur le blogue d’IE (en anglais) : http://blogs.msdn.com/b/ie/
  9. 9. Les fonctionnalités du DOM et du JavaScript Support complet des événements du DOM niveau 2 et 3 Nouvelles fonctionnalitésd ‘ECMAScript 5 addEventListener DOM Traversal and Range DOM Style DOMContentLoaded DOM Core HTML5 and XHTML Parsing Enhancements getComputedStyle(element, pseudoElement) getSelection() getElementsByClassName(class)
  10. 10. demoPerformance d’IE9
  11. 11. window.msPerformance Un nouvel ensemble de mesures du rendement intégrées dans l’API du « Document Object Model” (DOM) Nous travaillons avec le W3C pour créer une façon interopérable de mesurer les performances
  12. 12. window.msPerformance<script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart);</script>
  13. 13. L’outil F12 pour développeurs Une interface visuelle intégrée pour visualiser le DOM Expérimentation rapide Plusieurs nouvelles fonctionnalités avec IE9  Inspection de réseau  Sélecteur de chaînes User-agent  Onglet console  Support SVG  Formattage du JavaScript
  14. 14. demoL’outil F12 pour les développeurs dans IE9
  15. 15. Épuré
  16. 16. Internet Explorer 9: Le site en priorité Dispose dune interface propre, simplifiée, plus rapide, qui met laccent sur les sites des développeurs, plutôt que sur le navigateur lui-même Amène les applications et tâches en avant-plan Permet à vos sites de briller
  17. 17. Le Canada construit un Web encore plus beau
  18. 18. Le Canada construit un Web encore plus beau
  19. 19. Le Canada construit un Web encore plus beau
  20. 20. demoLes sites pinnés (Pinned Sites) dans IE9
  21. 21. Débutez avec les sites pinnés  Le support des sites pinnés ne demande aucun changement cosmétique à votre site  Fournis des notifications à vos utilisateurs  L’ajout se fait avec seulement quelques lignes de code  Personnalisez l’icône et l’expérience utilisateur du même coup  Définissez des listes de tâches (Jump List tasks)  Ajoutez des listes dynamiques  Affichez les boutons dans la barre de tâches
  22. 22. Personnalisez votre site pinné<meta name="application-name" content="Site Name" /><meta name="msapplication-tooltip" content="Start the Pinned Site" /><meta name="msapplication-starturl" content="http://example.com/start.htm" />
  23. 23. Fournissez des notificationswindow.external.msSiteModeSetIconOverlay( http://host/overlay1.ico,Overlay 1);window.external.msSiteModeClearIconOverlay();window.external.msSiteModeActivate();
  24. 24. Ajouter des listes de tâches (Jump Lists)<meta name="msapplication-task" content="name=Task 1; action-uri=http://host/Page1.htm; icon-uri=http://host/icon1.ico" /><meta name="msapplication-task" content="name=Task 2; action-uri=http://host2/Page2.htm; icon-uri=http://host2/icon2.ico" />
  25. 25. X-Icon Editor (xiconeditor.com)
  26. 26. demoFavicons
  27. 27. interopérable
  28. 28. Qu’est-ce que “HTML5”?
  29. 29. Qu’est-ce que “HTML5”? Candidat à la Premier brouillon public Brouillon de travail Dernier appel Recommendation recommendation
  30. 30. Groupes de travail HTML du W3C 40 organisations membres 400+ participants 280+ experts invités Spécification HTML5  Documents publiés  1100+ pages imprimés  Liste de diffusion >4000 courriels par mois
  31. 31. Cycle de vie d’une spécification du W3C Premier brouillon Brouillon de Candidat pour la Recommendation Recommendation public travail recommendation proposée Dernier appel Appel à l’implémentation HTML5
  32. 32. Atteindre une recommandation finale L’interopérabilité demande une suite de tests compréhensive W3C HTML5 Test Suite  Dirigé par le W3C  Ouvert aux contributions et analyses externes Microsoft a soumis plus de 500 tests pour le Test Suite Tester n’est pas seulement une affaire de vrai ou faux!
  33. 33. HTML5 <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.
  34. 34. HTML5 <canvas><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>
  35. 35. 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.
  36. 36. Scalable Vector Graphics (SVG)<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>
  37. 37. HTML5 <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
  38. 38. HTML5 <video><video src="video.mp4" id="videoTag"> <source src="video.webm" /> <!– Vidéo Flash/Silverlight ici --></video>
  39. 39. HTML5 <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
  40. 40. HTML5 <audio> <audio src="audio.mp3" id="audioTag" autoplay controls> <!– Audio Flash/Silverlight ici --> </audio>41
  41. 41. Geolocation Permet aux sites de découvrir votre emplacement géographique La permission de l’utilisateur est requise
  42. 42. Geolocationfunction 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;}
  43. 43. 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
  44. 44. WOFF Fonts and @font-face<style type="text/css"> @font-face { font-family: MyFontName; src: url(FontFile.woff); }</style><div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff</div>
  45. 45. CSS3 Media Queries
  46. 46. CSS3 Media Queries<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css" /><link href="netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max-width:1024px)" type="text/css" /><link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
  47. 47. outils
  48. 48. Outils pour HTML5Visual Studio 2010 SP1 Expression Studio Web 4 Validation et IntelliSense SP1 pour HTML5  Support complet pour Plusieurs améliorations HTML5 dans le “Code CSS3 Editor” et support significatif dans le “Design View”  Des centaines de nouvelles propriétés provenant du brouillon (draft) de la spécification CSS3
  49. 49. Visual Studio HTML5 & SVG Extensions visualstudiogallery.msdn.microsoft.comPAGE
  50. 50. Ai2Canvas Exporter visitmix.com/labPAGE
  51. 51. IE9 Dev Unpluggedwww.beautyoftheweb.com/dev/unplugged Deux catégories principales  Meilleur jeux  Meilleur expérience musicale Optenez des mise à jour sur le concours sur Twitter @IE et #devunplugged
  52. 52. Downloadez Internet Explorer 9 RTW Le navigateur de Microsoft le plus rapide Téléchargez et essayez le maintenant! (RTW est là!) Utilisez le nouveau “Site Mode” et les fonctionnalités d’HTML5 Pour en savoir plus, allez à http://msdn.com/ie Nous voulons vos commentaires cdndevs@microsoft.com
  53. 53. Beauty of the Web
  54. 54. IE Test Drive
  55. 55. Make Awesome Web
  56. 56. Médias sociaux relisés à IE Twitter: @ie Autres hashtag à considérer: #IE9, #HTML5, #WebDevs, #CSS3 facebook.com/internetexplorer9 youtube.com/internetexplorer
  57. 57. questions?
  58. 58. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×