Une visite guidée d’Internet Explorer 9 et
HTML5 pour les développeurs Web
Frédéric Harper Évangéliste aux développeurs – Microsoft Canada
http://twitter.com/fharper
http://linkedin.com/in/fredericharper
rapide
Performance de multisystème
0%50%
100%
News Site 1
News Site 2
News Site 3
News Site 4
News Site 5 Rendering
Layout
Block Building
Formatting
Native OM
Marshalling
JavaScript
Collections
La puissance de tout le PC
GREETINGS PROFESSOR FALKEN. WOULD YOU LIKE TO PLAY A GAME OF CHESS? █
L’engin JavaScript
Au premier plan
Code
source
Analyseur
(Parser)
Arbre
Syntaxique
Abstrait (AST)
Interpréteur ByteCode
Nouvel engin JavaScript – “Chakra”
En arrière-plan
Au premier plan
JavaScript compilé En arrière-plan Utilisant plusieurs
processeurs
Code natif Compilation
Code
source
Analyseur
(Parser)
Arbre
Syntaxique
Abstrait (AST)
Interpréteur ByteCode
Résultats du WebKit SunSpider v0.9.1
0
500
1000
1500
2000
2500
3000
3500
4000 IE8
Firefox 3.6.13
Safari 5.0.3
Firefox 4.0 Beta 10
Chrome 10 Developer
Opera 11
Chrome 9
IE9 RC
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/
Support complet des événements du DOM niveau 2 et 3
Nouvelles fonctionnalitésd ‘ECMAScript 5
DOM Traversal and Range
DOM Style
DOM Core
HTML5 and XHTML Parsing Enhancements getComputedStyle(element, pseudoElement) getSelection() getElementsByClassName(class)
Les fonctionnalités du DOM et du JavaScript
addEventListener
DOMContentLoaded
demo Performance d’IE9
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
window.msPerformance <script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart); </script>
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
demo L’outil F12 pour les développeurs dans IE9
Épuré
Internet Explorer 9: Le site en priorité
Dispose d'une interface
propre, simplifiée, plus
rapide, qui met l'accent 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
Le Canada construit un Web encore plus beau
Le Canada construit un Web encore plus beau
Le Canada construit un Web encore plus beau
demo Les 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
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
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" />
Fournissez des notifications window.external.msSiteModeSetIconOverlay( 'http://host/overlay1.ico','Overlay 1'); window.external.msSiteModeClearIconOverlay(); window.external.msSiteModeActivate();
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" />
X-Icon Editor (xiconeditor.com)
demo Favicons
interopérable
Qu’est-ce que “HTML5”?
Qu’est-ce que “HTML5”?
Premier brouillon public Brouillon de travail Dernier appel Candidat à la
recommendation Recommendation
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
Premier brouillon
public
Brouillon de
travail
Candidat pour la
recommendation
Recommendation
proposée Recommendation
Cycle de vie d’une spécification du W3C
Dernier appel Appel à l’implémentation
HTML5
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!
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.
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>
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.
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>
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
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 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
HTML5 <audio> <audio src="audio.mp3" id="audioTag" autoplay controls> <!– Audio Flash/Silverlight ici --> </audio>
41
Geolocation
Permet aux sites de
découvrir votre
emplacement géographique
La permission de l’utilisateur
est requise
Geolocation 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; }
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 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>
CSS3 Media Queries
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" />
outils
Outils pour HTML5 Visual Studio 2010 SP1 Validation et IntelliSense
pour HTML5 Plusieurs améliorations
CSS3
Expression Studio Web 4 SP1 Support complet pour
HTML5 dans le “Code Editor” et support significatif dans le “Design View”
Des centaines de nouvelles propriétés provenant du brouillon (draft) de la spécification CSS3
Visual Studio HTML5 & SVG Extensions
visualstudiogallery.msdn.microsoft.com
PAGE
50
Ai2Canvas Exporter
visitmix.com/lab
PAGE
51
IE9 Dev Unplugged
Deux catégories principales Meilleur jeux
Meilleur expérience musicale
Optenez des mise à jour sur
le concours sur Twitter
@IE et #devunplugged
www.beautyoftheweb.com/dev/unplugged
Downloadez Internet Explorer 9 RTW
Nous voulons vos commentaires [email protected]
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
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/internetexplorer9
youtube.com/internetexplorer
questions?
© 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.
Recommended