W3 cafe ie10etwindows8
-
Upload
davrous -
Category
Technology
-
view
848 -
download
0
description
Transcript of W3 cafe ie10etwindows8
![Page 1: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/1.jpg)
IE10 et développement HTML5 sur Windows 8David Roussethttp://blogs.msdn.com/davrous @davrousMicrosoft France
![Page 2: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/2.jpg)
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
![Page 3: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/3.jpg)
Internet Explorer 10
![Page 4: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/4.jpg)
• 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…
![Page 5: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/5.jpg)
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
![Page 6: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/6.jpg)
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.
![Page 7: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/7.jpg)
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/
![Page 8: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/8.jpg)
Demo du multitouch
![Page 9: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/9.jpg)
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
![Page 10: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/10.jpg)
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
![Page 11: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/11.jpg)
Une planche de jeuCSS3 Grid par l’exemple
![Page 12: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/12.jpg)
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>
![Page 13: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/13.jpg)
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 } }
![Page 14: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/14.jpg)
Demo CSS3 Grid & CSS Exclusions
![Page 15: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/15.jpg)
2 exemples complets des possibilités d’IE10
![Page 16: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/16.jpg)
Demo SnapyX & mon jeu de plateforme
![Page 17: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/17.jpg)
Vers un avenir + radieux
![Page 18: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/18.jpg)
• 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
![Page 19: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/19.jpg)
HTML5 Metro Style Apps
![Page 20: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/20.jpg)
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
![Page 21: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/21.jpg)
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
![Page 22: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/22.jpg)
Demo applications Windows 8 en HTML5
![Page 23: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/23.jpg)
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
![Page 24: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/24.jpg)
WinJSHelpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
![Page 25: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/25.jpg)
Les contrôles classiquesButton
Checkbox
Combo Box
Date PickerRadio Button
Hyperlink
ListBox
Ratings
Progress Bar
Progress Ring
Time Picker
Toggle Switch
Slider
![Page 26: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/26.jpg)
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
![Page 27: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/27.jpg)
demo
![Page 28: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/28.jpg)
• 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…
![Page 29: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/29.jpg)
www.buildwindows.com
Questions ?
![Page 30: W3 cafe ie10etwindows8](https://reader035.fdocument.pub/reader035/viewer/2022062703/55568bd2d8b42acc5e8b46ef/html5/thumbnails/30.jpg)