les nouveautés d’html5 et ie11 en action
DESCRIPTION
Au menu de cette session, présentation et surtout des démos (!!) des nouveautés d'HTML5, CSS3 et Javascript avec Internet Explorer 11! Venez également découvrir toutes les nouveautés pour le jeu et le divertissement en ligne avec les interactions rendues possibles par le support des API Device-Motion et Device-orientation, WebGL, l'API Fullscreen, le nouveau tag vidéo et les snap-points CSS3. Nous traiterons également des dernière techniques d’amélioration des performances de votre site grâce aux nouvelles API mais aussi aux nouveau outils du développeur sur IE. Enfin, nous verrons ce qu’il est possible de faire en terme d’intégration au système avec Windows 8.1 avec les nouveau mode Lecture, les nouvelles gestures de navigation et les Live Tiles. Speakers : Philippe Didiergeorges (Euro Information Développement)TRANSCRIPT
Web
Les nouveautésd’HTML5 & IE11 en
actionPhilippe DIDIERGEORGESDéveloppeur chez EID
IE UserAgenthttp://blogs.developpeur.org/Philess
@DePhiless
#mstechdays Web
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 !
Donnez votre avis !
#mstechdays Web
• 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
Sommaire
Web#mstechdays
LES NOUVEAUTÉS D’HTML5 ET CSS3 DANS IE11Les nouveautés d’HTML5 et IE11 en action
#mstechdays Web
• Nouveau User AgentMozilla/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
I hav standards
#mstechdays Web
Custom Data Attributes Device Orientation events Device Motion EventsDevice Pixel Ratio DOM4 Mutation Observers Dynamic TextTracksEncrypted Media Extensions Fullscreen API Input Method Editor APIPagehide/Pageshow events Pointer Events Media Source ExtensionMPEG-Dash TTML Simple Delivery Profile Performance APINoFollow Navigation Timing Web Cryptographic APICSS3 Flexbox CSS3 Border-Image WebGLCanvas 2D Niveau 2 HTTP 2.0 / SPDY ECMAScript InternationalizationECMAScript 6 CSS3 Scrolling Snap Points Prefetch and PrerenderLazy-loading YUV Compression DDS images
APIS HTML 5, CSS 3 ET JS
Web#mstechdays
EXPERIENCE UTILISATEURLes nouveautés d’HTML5 et IE11 en action
démo#mstechdays Web
EXPERIENCE UTILISATEURLes nouveautés d’HTML5 et IE11 en action
#mstechdays Web
• Gestion de dossiers• Synchronisation entre tous les appareils• Tuiles avec image dominante en mode immersif
Gestion des favoris
#mstechdays Web
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
Mode lecture
#mstechdays Web
• Mise en forme automatique• Listes de lectures
Partage
#mstechdays Web
• 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;
Parmi les autres nouveautés…
#mstechdays Web
Possibilité de définir:- Tailles disponibles- Couleur- Image- Texte- Notificationshttp://www.buildmypinnedsite.com
Tuiles dynamiques pour le web
Web#mstechdays
UN MONDE DE DIVERTISSEMENTLes nouveautés d’HTML5 et IE11 en action
#mstechdays Web
WebGl enfin supporté
Des performances de premier ordre.
Three.js et BabylonJS pour le dev
WebGL
#mstechdays Web
• 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
Vidéo
#mstechdays Web
Device-Orientation Events
#mstechdays Web
screen.msLockOrientation("landscape-primary");
window.addEventListener("deviceorientation", onDeviceOriented);
function onDeviceOriented(evt) { var z = evt.alpha; var x = evt.beta; var y = evt.gamma;}
Device-Orientation Events
#mstechdays Web
window.addEventListener("devicemotion", onDeviceMotion);
function onDeviceMotion(evt) { var accl = evt.acceleration; var x = accl.x;
var rot = evt.rotationRate; var rz = rot.alpha;}
Device-Motion Events
démo#mstechdays Web
DIVERTISSEMENTLes nouveautés d’HTML5 et IE11 en action
Web#mstechdays
PERFORMANCESLes nouveautés d’HTML5 et IE11 en action
#mstechdays Web
Trident: renderingChakra: Javascript
Trident et Chakra
#mstechdays Web
• Ordonnancement des chargements automatique• Lazyloading• Prefetch et Dns-Prefetch• Prerender• History Cache
Une meilleure gestion des chargements
#mstechdays Web
• Nouveautés Dom explorer et debugger JS• UI responsiveness tool• JS & Memory Profiler• Network profiler• Emulation
Démo
Les nouveaux outils du développeur
Web#mstechdays
LE FUTUR AVEC INTERNET EXPLORER
#mstechdays Web
• Support du language ES6: let, const, set map, weakmap, Class, Super, Extends, static, constructor
• ES6 Globalization• Iterators et Generators
Support d’EcmaScript 6
#mstechdays Web
• Windows• Windows Phone• XBox
One Microsoft, One IE
Web#mstechdays
DEVELOPPEURS, TROUVEZ DE L’AIDE
#mstechdays Web
#IEUserAgents
@IEDevChat
#AskIE
Ou trouver de l’aide?
#mstechdays Web
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 !
Donnez votre avis !
Web
Questions
Philippe DIDIERGEORGES
http://blogs.developpeur.org/Philess@DePhiless
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.
Digital is business