Introduction au développement windows 8 modern ui avec html5 et javascript
-
Upload
davrous -
Category
Technology
-
view
2.657 -
download
2
description
Transcript of Introduction au développement windows 8 modern ui avec html5 et javascript
![Page 1: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/1.jpg)
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
![Page 2: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/2.jpg)
Introduction au développement Windows
8 ModernUI avec HTML5 et JavaScriptDavid Rousset
Technical EvangelistMicrosoft France
Code / Développement
@davroushttp://blogs.msdn.com/davrous
![Page 3: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/3.jpg)
• 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
![Page 4: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/4.jpg)
• Regardons rapidement les concepts base
HTML5 et Windows 8
Regardons rapidement les concepts base
![Page 5: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/5.jpg)
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
![Page 6: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/6.jpg)
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
![Page 7: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/7.jpg)
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
![Page 8: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/8.jpg)
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)
![Page 9: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/9.jpg)
• Pour vous donner une idée base
Démo d’applications Windows 8 utilisant HTML5Pour vous donner une idée
![Page 10: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/10.jpg)
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
![Page 11: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/11.jpg)
Helpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
WinJS
![Page 12: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/12.jpg)
Les contrôles classiquesButton
Checkbox
Combo Box
Date PickerRadio Button
Hyperlink
ListBox
Ratings
Progress Bar
Progress Ring
Time Picker
Toggle Switch
Slider
![Page 13: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/13.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 14: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/14.jpg)
• Pour vous donner une idée base
Code partyEnough blah-blah, let’s code!
![Page 15: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/15.jpg)
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
![Page 16: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/16.jpg)
Accélérateur Windows
Ressources
Coaching
Visibilité
aka.ms/accelerateur-windows
Plus d’info ? RDV stand Windows 8
L’Accélérateur Windows
![Page 17: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/17.jpg)
4 ouvrages écrits par 13 Microsoftees
http://www.editions-eyrolles.com/livres/Windows-8-pour-les-professionnels
![Page 18: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/18.jpg)
Questions ?
![Page 19: Introduction au développement windows 8 modern ui avec html5 et javascript](https://reader035.fdocument.pub/reader035/viewer/2022081602/545c9f4fb0af9fb32c8b4a22/html5/thumbnails/19.jpg)
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