Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
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
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
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)
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
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
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
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
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.
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
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
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>
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
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