Post on 16-May-2015
description
IE10 et développement HTML5 sur Windows 8David Roussethttp://blogs.msdn.com/davrous @davrousMicrosoft France
1 – Un retour sur les nouveautés dans IE10
2 – Quelques bonnes nouvelles pour les standards
3 – Le modèle de développement HTML5 dans Windows 8
Agenda
Internet Explorer 10
• IE10 arrivera sur Windows 8 ET Windows 7
• Le même IE10 sera disponible sur Windows Phone 8
• Sur Windows 8, IE10 aura 2 modes de fonctionnement :
• Un mode « desktop » avec support complet des plug-ins• Un mode « metro » avec un support partiel de Flash
• Il y a un correcteur orthographique intégré
Avant de parler HTML5…
HTML5 et IE10Web Sockets
Web Workers
IndexedDB
Ecmascript 5
File API & Blobs
Geolocation
Audio tag
Video tag
Touch-first
Pointer events
Zoom regions
Snap Points
Forms
Validation
Input types
Spell checking
Zoom sur les Touch Events Une seule façon de gérer le touch, la souris et/ou un stylet
MSPointerDown, MSPointerMove, MSPointerUp, etc.
MSGestureStart, MSGestureChange, et MSGestureEnd.
Pattern pour gérer toutes les implémentations Un article sur le blog de l’équipe IE : Handling Multi-touch and Mouse Input in All Browsers
Démo : Finger Painting
Pour en savoir davantage sur pourquoi 2 specs: http://blog.jquery.com/2012/04/10/getting-touchy-about-patents/
Demo du multitouch
CSS3 et IE10
2D & 3D transforms
Transforms Animations
Transitions
MotionGrid
Flexbox
Layout
Gradients
Text-shadow
GraphicsMulti-column, hyphenation
Region
Exclusions
Content flow
L’accélération matérielle est disponible pour tout cela
Zoom sur CSS3 Grid Layout Nouvelle spécification proposée par MS au W3C
Pour l’instant –ms-grid uniquement sous IE10 Mozilla a annoncé son support en 2012 !
La base du design METRO de Windows 8
Une planche de jeuCSS3 Grid par l’exemple
HTML & CSS de la planche de jeu
<div id="grid"> <div id="title">Game Title</div> <div id="score">Score</div> <div id="stats">Stats</div> <div id="board">Board</div> <div id="controls">Controls</div> </div>
<style type="text/css"> #grid { display: grid;
grid-columns: auto 1fr; grid-rows: auto 1fr auto; }
#title { grid-column: 1; grid-row: 1 } #score { grid-column: 1; grid-row: 3 } #stats { grid-column: 1; grid-row: 2; grid-row-align: start } #board { grid-column: 2; grid-row: 1; grid-row-span: 2 } #controls { grid-column: 2; grid-row: 2; grid-column-align: center } </style>
Couplage Grid & Media Queries<style type="text/css">
@media (orientation: landscape) { #title { grid-column: 1; grid-row: 1 } #score { grid-column: 1; grid-row: 3 } #stats { grid-column: 1; grid-row: 2; grid-row-align: start } #board { grid-column: 2; grid-row: 1; grid-row-span: 2 } #controls { grid-column: 2; grid-row: 2; grid-column-align: center } }
@media (orientation: portrait) { #title { grid-column: 1; grid-row: 1 } #score { grid-column: 1; grid-row: 2 } #stats { grid-column: 2; grid-row: 1; grid-row-span: 2 } #board { grid-column: 1; grid-row: 3; grid-column-span: 2 } #controls { grid-column: 1; grid-row: 4; grid-column-span: 2; grid-column-align: center } }
Demo CSS3 Grid & CSS Exclusions
2 exemples complets des possibilités d’IE10
Demo SnapyX & mon jeu de plateforme
Vers un avenir + radieux
• Abandon des filtres DirectX en faveur de leurs équivalent standard CSS: Legacy DX Filters Removed from IE10 Release Preview
• CSS Animations, Transitions, Gradients, Transforms et HTML5 Indexed DB & requestAnimationFrame en non préfixées: Moving the Stable Web Forward in IE10 Release Preview
• HTML5 Quirks Mode dans IE10: Interoperable HTML5 Quirks Mode in IE10
HTML5 Metro Style Apps
La plateforme Windows 8
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Metro style Apps
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
XAML HTML / CSS
HTMLJavaScri
pt
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Syst
em
Serv
ices
Vie
wM
od
el
Contr
olle
rC
ore
La plateforme Windows 8 en HTML5
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Metro style Apps
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
XAML HTML / CSS
HTMLJavaScri
pt
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Syst
em
Serv
ices
Vie
wM
od
el
Contr
olle
rC
ore Windows Core OS Services
Communication
& Data
Application Model
Devices & Printing
Graphics & Media
Syst
em
Serv
ices
Core
Demo applications Windows 8 en HTML5
Windows Library for JavaScript (WinJS)notre librairie pour construire des applications au look Metro en JavaScript
Des technologies Web avec lesquelles vous êtes déjà familiers
Implémente des patterns modernes pour des applications de qualité
Fonctionne avec des outils interactifs d’aide au design
Développer des apps de qualité et rapidement
Implémente le design Windows Metro
Des contrôles pour les expériences utilisateurs les plus courantes
Conçus pour le touch autant que pour les entrées classiques
S’adaptent à tous les types de périphériques
Permettre à vos apps d’avoir le bon look & feel
WinJSHelpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
Les contrôles classiquesButton
Checkbox
Combo Box
Date PickerRadio Button
Hyperlink
ListBox
Ratings
Progress Bar
Progress Ring
Time Picker
Toggle Switch
Slider
Les contrôles classiques – stylés par CSS
Button
Checkbox
Combo Box
Date PickerRadio Button
Hyperlink
ListBox
Ratings
Progress Bar
Progress Ring
Time Picker
Toggle Switch
Slider
demo
• Le site officiel regroupant plus de 200 exemples et la documentation: http://dev.windows.com
• Rejouez cette démo en suivante les 2 tutoriaux sur mon blog: http://blogs.msdn.com/davrous
• Série détaillée pour créer une application complète par David Catuhe: http://blogs.msdn.com/eternalcoding
Pour aller plus loin sur Windows 8…
www.buildwindows.com
Questions ?