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
![Page 1: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/1.jpg)
![Page 2: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/2.jpg)
Web
Les nouveautésd’HTML5 & IE11 en
actionPhilippe DIDIERGEORGESDéveloppeur chez EID
IE UserAgenthttp://blogs.developpeur.org/Philess
@DePhiless
![Page 3: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/3.jpg)
#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 !
![Page 4: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/4.jpg)
#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
![Page 5: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/5.jpg)
Web#mstechdays
LES NOUVEAUTÉS D’HTML5 ET CSS3 DANS IE11Les nouveautés d’HTML5 et IE11 en action
![Page 6: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/6.jpg)
#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
![Page 7: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/7.jpg)
#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
![Page 8: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/8.jpg)
Web#mstechdays
EXPERIENCE UTILISATEURLes nouveautés d’HTML5 et IE11 en action
![Page 9: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/9.jpg)
démo#mstechdays Web
EXPERIENCE UTILISATEURLes nouveautés d’HTML5 et IE11 en action
![Page 10: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/10.jpg)
#mstechdays Web
• Gestion de dossiers• Synchronisation entre tous les appareils• Tuiles avec image dominante en mode immersif
Gestion des favoris
![Page 11: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/11.jpg)
#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
![Page 12: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/12.jpg)
#mstechdays Web
• Mise en forme automatique• Listes de lectures
Partage
![Page 13: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/13.jpg)
#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…
![Page 14: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/14.jpg)
#mstechdays Web
Possibilité de définir:- Tailles disponibles- Couleur- Image- Texte- Notificationshttp://www.buildmypinnedsite.com
Tuiles dynamiques pour le web
![Page 15: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/15.jpg)
Web#mstechdays
UN MONDE DE DIVERTISSEMENTLes nouveautés d’HTML5 et IE11 en action
![Page 16: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/16.jpg)
#mstechdays Web
WebGl enfin supporté
Des performances de premier ordre.
Three.js et BabylonJS pour le dev
WebGL
![Page 17: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/17.jpg)
#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
![Page 18: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/18.jpg)
#mstechdays Web
Device-Orientation Events
![Page 19: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/19.jpg)
#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
![Page 20: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/20.jpg)
#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
![Page 21: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/21.jpg)
démo#mstechdays Web
DIVERTISSEMENTLes nouveautés d’HTML5 et IE11 en action
![Page 22: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/22.jpg)
Web#mstechdays
PERFORMANCESLes nouveautés d’HTML5 et IE11 en action
![Page 23: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/23.jpg)
#mstechdays Web
Trident: renderingChakra: Javascript
Trident et Chakra
![Page 24: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/24.jpg)
#mstechdays Web
• Ordonnancement des chargements automatique• Lazyloading• Prefetch et Dns-Prefetch• Prerender• History Cache
Une meilleure gestion des chargements
![Page 25: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/25.jpg)
#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
![Page 26: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/26.jpg)
Web#mstechdays
LE FUTUR AVEC INTERNET EXPLORER
![Page 27: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/27.jpg)
#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
![Page 28: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/28.jpg)
#mstechdays Web
• Windows• Windows Phone• XBox
One Microsoft, One IE
![Page 29: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/29.jpg)
Web#mstechdays
DEVELOPPEURS, TROUVEZ DE L’AIDE
![Page 30: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/30.jpg)
#mstechdays Web
#IEUserAgents
@IEDevChat
#AskIE
Ou trouver de l’aide?
![Page 31: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/31.jpg)
#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 !
![Page 32: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/32.jpg)
Web
Questions
Philippe DIDIERGEORGES
http://blogs.developpeur.org/Philess@DePhiless
![Page 33: Les nouveautés d’HTML5 et IE11 en action](https://reader035.vdocuments.net/reader035/viewer/2022070301/545c9ff7b1af9f500a8b4827/html5/thumbnails/33.jpg)
© 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