Les nouveautés d’HTML5 et IE11 en action

Les nouveautés
d’HTML5 & IE11 en action
Philippe DIDIERGEORGES
Développeur chez EID
IE UserAgent
http://blogs.developpeur.org/Philess
@DePhiless
Web

Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !

#mstechdays

Web

Sommaire
•
•
•
•
•
•

Les nouveautés d’HTML5 et CSS3 sur IE11
Expérience utilisateur
Un nouveau monde de divertissement
Performances
Le futur avec Internet Explorer
Développeur: Trouvez de l’aide

#mstechdays

Web

LES NOUVEAUTÉS D’HTML5 ET
CSS3 DANS IE11
Les nouveautés d’HTML5 et IE11 en action

#mstechdays

Web

I hav standards
• Nouveau User Agent
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
• Document mode HTML5 par défaut
<!doctype html>
• pointerEvents, flexbox non préfixés
#mstechdays

Web

APIS HTML 5, CSS 3 ET JS
Custom Data Attributes
Device Pixel Ratio
Encrypted Media Extensions
Pagehide/Pageshow events
MPEG-Dash
NoFollow
CSS3 Flexbox
Canvas 2D Niveau 2
Internationalization
ECMAScript 6
Lazy-loading

#mstechdays

Device Orientation events
DOM4 Mutation Observers
Fullscreen API
Pointer Events
TTML Simple Delivery Profile
Navigation Timing
CSS3 Border-Image
HTTP 2.0 / SPDY

Device Motion Events
Dynamic TextTracks
Input Method Editor API
Media Source Extension
Performance API
Web Cryptographic API
WebGL
ECMAScript

CSS3 Scrolling Snap Points
YUV Compression

Prefetch and Prerender
DDS images

Web

EXPERIENCE UTILISATEUR

#mstechdays

Web

Gestion des favoris
• Gestion de dossiers
• Synchronisation entre tous les appareils
• Tuiles avec image dominante en mode immersif

#mstechdays

Web

Mode lecture
Mise en forme d’une page en mode lecture pour plus de
confort:
- Pas de pub, bannière, menu, fond inutile
- Juste le contenu: texte, titres, images et vidéo

#mstechdays

Web

Partage
• Mise en forme automatique
• Listes de lectures

#mstechdays

Web

Parmi les autres nouveautés…
•
•
•
•
•

Onglets illimités
Gestion du Hover en tactile
Click to call
Navigation pagination Swipe
CSS3 Scrolling Snap Points:
-ms-scroll-snap-points-x: snapInterval(0px,100%);
-ms-scroll-snap-type: mandatory;

#mstechdays

Web

Tuiles dynamiques pour le web
Possibilité de définir:
- Tailles disponibles
- Couleur
- Image
- Texte
- Notifications
http://www.buildmypinnedsite.com
#mstechdays

Web

UN MONDE DE DIVERTISSEMENT

#mstechdays

Web

WebGL
WebGl enfin supporté

Des performances de premier ordre.
Three.js et BabylonJS pour le dev

#mstechdays

Web

Vidéo
•
•
•
•
•
•
•

Perfs améliorées (Media Source Extensions)
Streaming XHR (msCaching attr)
FullScreen API
Sous-titres TTML et WebVTT: <track>
Encrypted Media Extensions (support DRM)
Web Cryptograhic API
Partenariat US avec netflix

#mstechdays

Web

Device-Orientation Events

#mstechdays

Web

Device-Orientation Events
screen.msLockOrientation("landscape-primary");
window.addEventListener("deviceorientation",
onDeviceOriented);
function onDeviceOriented(evt) {
var z = evt.alpha;
var x = evt.beta;
var y = evt.gamma;
}
#mstechdays

Web

Device-Motion Events
window.addEventListener("devicemotion", onDeviceMotion);
function onDeviceMotion(evt) {
var accl = evt.acceleration;
var x = accl.x;
var rot = evt.rotationRate;
var rz = rot.alpha;

}
#mstechdays

Web

DIVERTISSEMENT

#mstechdays

Web

PERFORMANCES

#mstechdays

Web

Trident et Chakra
Trident: rendering
Chakra: Javascript

#mstechdays

Web

Une meilleure gestion des chargements
•
•
•
•
•

Ordonnancement des chargements automatique
Lazyloading
Prefetch et Dns-Prefetch
Prerender
History Cache

#mstechdays

Web

Les nouveaux outils du développeur
•
•
•
•
•

Nouveautés Dom explorer et debugger JS
UI responsiveness tool
JS & Memory Profiler
Network profiler
Emulation

Démo
#mstechdays

Web

LE FUTUR AVEC INTERNET
EXPLORER

#mstechdays

Web

Support d’EcmaScript 6
• Support du language ES6: let, const, set map, weakmap,
Class, Super, Extends, static, constructor
• ES6 Globalization
• Iterators et Generators

#mstechdays

Web

One Microsoft, One IE
• Windows
• Windows Phone
• XBox

#mstechdays

Web

DEVELOPPEURS, TROUVEZ DE
L’AIDE

#mstechdays

Web

Ou trouver de l’aide?
#IEUserAgents
@IEDevChat
#AskIE

#mstechdays

Web

Questions
Philippe DIDIERGEORGES

http://blogs.developpeur.org/Philess
@DePhiless
Web

Les nouveautés d’HTML5 et IE11 en action

Recommandé

Recommandé

Contenu connexe

Similaire à Les nouveautés d’HTML5 et IE11 en action

Similaire à Les nouveautés d’HTML5 et IE11 en action (20)

Plus de Microsoft

Plus de Microsoft (20)

Les nouveautés d’HTML5 et IE11 en action

Notes de l'éditeur