Donnez votre avis !Depuis votre smartphone, sur : http://notes.mstechdays.fr

De nombreux lots à gagner toutes les heures !!!

Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les TechDays

http://notes.mstechdays.fr

Introduction au développement Windows

8 ModernUI avec HTML5 et JavaScriptDavid Rousset

Technical EvangelistMicrosoft France

Code / Développement

@davroushttp://blogs.msdn.com/davrous

• Présentation du modèle HTML5 15’

• Démo de code 45’– Création d’un lecteur RSS depuis 0 30’

• Utilisation de WinJS, templating, binding et Blend 5

– Accès à la camera via WinRT 15’

Agenda

Agenda

• Regardons rapidement les concepts base

HTML5 et Windows 8

Regardons rapidement les concepts base

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScrip

t

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

odel

Contr

olle

rC

ore

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

HTMLJavaScrip

t

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

odel

Contr

olle

rC

ore Windows Core OS Services

Communication

& Data

Application Model

Devices & Printing

Graphics & Media

Syst

em

Serv

ices

Core

La plateforme Windows 8 en HTML5

Internet Explorer 10 : nouveaux layoutsCSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds & BordersCSS ColorCSS FlexboxCSS FontsCSS Grid AlignmentCSS HyphenationCSS Image Values (Gradients)

CSS Media QueriesCSS Multi-column LayoutCSS NamespacesCSS OM ViewsCSS Positioned Floats (Exclusions)CSS Selectors

CSS TransitionsCSS Values and UnitsICC Color ProfilesSVG Filter Effects

SVG, standalone and in HTML

Internet Explorer 10 : nouvelles APIs HTML5 Animation FramesData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal and RangeDOMParser and XMLSerializerECMAScript 5File Reader APIFile SavingFormData

HTML5 Application CacheHTML5 asyncHTML5 CanvasHTML5 Drag and dropHTML5 Forms and ValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 Semantic elementsHTML5 Video and audioICC Color Profiles

IndexedDBPage VisibilityPointer (Mouse, Pen, and Touch) EventsResource TimingSelectors API Level 2Timing callbacksWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXMLHttpRequest (Level 2)

• Pour vous donner une idée base

Démo d’applications Windows 8 utilisant HTML5Pour vous donner une idée

Windows Library for JavaScript (WinJS)notre librairie pour construire des applications au look Moderne 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 Microsoft Design Language

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

Helpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

WinJS

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

• Pour vous donner une idée base

Code partyEnough blah-blah, let’s code!

Pour aller plus loin sur Windows 8…

Le site officiel regroupant plus de 200 exemples et la documentation: http://dev.windows.com

Rejouez ces 2 démos en suivant les 2 séries de tutoriaux sur mon blog: http://blogs.msdn.com/davrous

Accélérateur Windows

Ressources

Coaching

Visibilité

aka.ms/accelerateur-windows

Plus d’info ? RDV stand Windows 8

L’Accélérateur Windows

4 ouvrages écrits par 13 Microsoftees

http://www.editions-eyrolles.com/livres/Windows-8-pour-les-professionnels

Questions ?

Formez-vous en ligne

Retrouvez nos évènements

Faites-vous accompagner gratuitement

Essayer gratuitement nos solutions IT

Retrouver nos experts Microsoft

Pros de l’ITDéveloppeurs

www.microsoftvirtualacademy.com

http://aka.ms/generation-app

http://aka.ms/evenements-developpeurs

http://aka.ms/itcamps-france

Les accélérateursWindows Azure, Windows Phone,

Windows 8

http://aka.ms/telechargements

La Dev’Team sur MSDNhttp://aka.ms/devteam

L’IT Team sur TechNethttp://aka.ms/itteam