Présentation jouée lors du W3Cafe du 29 Juin 2012: http://france.w3cafe.org/w3cafe-paris/w3cafe-standards-web-du-29-06-12/article/programme autour des nouveautés HTML5/CSS3 dans IE10 et le modèle de développement HTML5 Metro dans Windows 8

2. 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

3. Internet Explorer 10

4. • 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é

7. Handling Multi-
touch and Mouse Input in All Browsers
Finger Painting
http://blog.jquery.com/2012/04/10/getting-touchy-
about-patents/

8. Demo du multitouch

11. Une planche de jeu

12. <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>
<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>

13. <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 }
}

14. Demo CSS3 Grid &
CSS Exclusions

16. Demo SnapyX &
mon jeu de
plateforme

17. Vers un avenir + radieux

18. • 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

19. HTML5 Metro Style Apps

22. Demo applications
Windows 8 en
HTML5

28. http://dev.windows.com
http://blogs.msdn.com/davrous
http://blogs.msdn.com/eternalcoding