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 ?