Le document présente les nouvelles fonctionnalités d'Internet Explorer 9 et de HTML5, mettant en avant un moteur JavaScript amélioré et des optimisations de performance pour les développeurs. Il souligne l'importance des outils de développement intégrés, du support pour les nouvelles normes HTML5 telles que <canvas>, <video> et <audio>, ainsi que des ressources pour la mise en œuvre de CSS3 et de polices web. Enfin, il encourage les développeurs à adopter ces technologies pour créer des expériences web innovantes.

1. 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
fredh@microsoft.com
http://twitter.com/fharper
http://linkedin.com/in/fredericharper

2. rapide

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. La puissance de tout le PC
GREETINGS PROFESSOR FALKEN.
WOULD YOU LIKE TO PLAY A
GAME OF CHESS?
█

5. L’engin JavaScript
Au premier plan
Arbre
Code Analyseur
Syntaxique ByteCode Interpréteur
source (Parser)
Abstrait (AST)

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. Résultats du WebKit SunSpider v0.9.1
4000 IE8
3500 Firefox 3.6.13
3000 Safari 5.0.3
2500 Firefox 4.0 Beta 10
2000 Chrome 10 Developer
1500 Opera 11
1000 Chrome 9
500 IE9 RC
0

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. 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. demo
Performance d’IE9

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. 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. 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. demo
L’outil F12 pour les développeurs dans IE9

15. Épuré

16. 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

17. Le Canada construit un Web encore plus beau

18. Le Canada construit un Web encore plus beau

19. Le Canada construit un Web encore plus beau

20. demo
Les sites pinnés (Pinned Sites) dans IE9

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. 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. Fournissez des notifications
window.external.msSiteModeSetIconOverlay(
'http://host/overlay1.ico','Overlay 1');
window.external.msSiteModeClearIconOverlay();
window.external.msSiteModeActivate();

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. X-Icon Editor (xiconeditor.com)

26. demo
Favicons

27. interopérable

29. Qu’est-ce que “HTML5”?

30. Qu’est-ce que “HTML5”?
Candidat à la
Premier brouillon public Brouillon de travail Dernier appel Recommendation
recommendation

31. 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

32. 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

33. 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!

34. 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.

35. 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>

36. 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.

37. 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>

38. 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

39. HTML5 <video>
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<!– Vidéo Flash/Silverlight ici -->
</video>

40. 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

41. HTML5 <audio>
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!– Audio Flash/Silverlight ici -->
</audio>
41

42. Geolocation
 Permet aux sites de
découvrir votre
emplacement géographique
 La permission de l’utilisateur
est requise

43. 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;
}

44. 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

45. 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>

46. CSS3 Media Queries

47. 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" />

48. outils

49. Outils pour HTML5
Visual 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

50. Visual Studio HTML5 & SVG Extensions
visualstudiogallery.msdn.microsoft.com
PAGE

51. Ai2Canvas Exporter
visitmix.com/lab
PAGE

52. IE9 Dev Unplugged
www.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

53. 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

54. Beauty of the Web

55. IE Test Drive

56. Make Awesome Web

57. Médias sociaux relisés à IE
 Twitter: @ie
 Autres hashtag à considérer: #IE9, #HTML5, #WebDevs,
#CSS3
 facebook.com/internetexplorer9
 youtube.com/internetexplorer

58. questions?

59. © 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.