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

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 cdndevs@microsoft.com

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.