Nous verrons durant cette heure de session comment développer une application pour le Windows Store grâce aux technologies HTML5, JS & CSS3. Nous verrons ainsi comment construire depuis 0 un petit lecteur de flux RSS. Cela sera notre excuse pour découvrir l'usage de WinJS, le framework JavaScript de Microsoft pour Windows 8, ainsi que de l'outillage Visual Studio 2012 et Blend 5. Pour finir, nous verrons à travers un petit exemple d'usage de la camera comment fonctionne l'accès à WinRT depuis JS, le nouveau jeu d'API dédiés aux applications modernes. Session jouée lors des MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=60738dd2-6d50-4360-a285-ed988e49d850 Retrouvez les tutoriaux associés sur mon blog: http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx & http://blogs.msdn.com/b/davrous/archive/2012/06/04/comment-cr-233-er-un-petit-lecteur-de-flux-rss-pour-windows-8-metro-en-html5-et-en-30-min-partie-1-2.aspx

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

2. Introduction au développement
Windows 8 ModernUI avec
HTML5 et JavaScript
David Rousset
Technical Evangelist
Microsoft France
@davrous
http://blogs.msdn.com/davrous
Code / Développement

3. Agenda
• Présentation du modèle HTML5 15’
• Démo de code 45’ Agenda
– Création d’un lecteur RSS depuis 0 30’
• Utilisation de WinJS, templating,
binding et Blend 5
– Accès à la camera via WinRT 15’

4. HTML5 et Windows
8
Regardons rapidement les concepts base
• Regardons rapidement les concepts base

5. La plateforme Windows 8

6. La plateforme Windows 8 en HTML5

7. Internet Explorer 10 : nouveaux layouts
CSS 2D Transforms CSS Media Queries
CSS 3D Transforms CSS Multi-column Layout
CSS Animations CSS Namespaces
CSS Backgrounds & CSS OM Views
Borders CSS Positioned Floats
(Exclusions)
CSS Color
CSS Selectors
CSS Flexbox
CSS Transitions
CSS Fonts CSS Values and Units
CSS Grid Alignment ICC Color Profiles
CSS Hyphenation SVG Filter Effects
CSS Image Values SVG, standalone and in HTML

8. Internet Explorer 10 : nouvelles APIs
HTML5
Animation Frames HTML5 Application Cache IndexedDB
Data URI HTML5 async Page Visibility
DOM Element Traversal HTML5 Canvas Pointer (Mouse, Pen, and
DOM HTML HTML5 Drag and drop Touch) Events
DOM Level 3 Core HTML5 Forms and Validation
DOM Level 3 Events HTML5 Geolocation
Resource Timing
DOM Style HTML5 History API Selectors API Level 2
DOM Traversal and Range HTML5 Parser Timing callbacks
DOMParser and HTML5 Sandbox Web Messaging
XMLSerializer HTML5 Selection
ECMAScript 5
Web Sockets
HTML5 Semantic elements
File Reader API HTML5 Video and audio Web Workers
File Saving ICC Color Profiles XHTML/XML
FormData XMLHttpRequest (Level 2)

9. Démo d’applications
Windows 8 utilisant
HTML5 une idée
Pour vous donner
• Pour vous donner une idée base

10. Windows Library for JavaScript (WinJS)

11. WinJS

12. Les contrôles classiques

13. Les contrôles classiques – stylés par CSS

14. Code party
Enough blah-blah, let’s code!
• Pour vous donner une idée base

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

16. L’Accélérateur Windows
Ressources
Coaching
Visibilité
aka.ms/accelerateur-windows
Plus d’info ? RDV stand Windows 8
Accélérateur Windows

17. 4 ouvrages écrits par 13 Microsoftees
http://www.editions-eyrolles.com/livres/Windows-8-pour-les-professionnels

18. Questions ?

19. Développeurs Pros de l’IT
http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com
http://aka.ms/evenements-
developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france
Les accélérateurs
Faites-vous accompagner
Windows Azure, Windows Phone,
gratuitement
Windows 8
Essayer gratuitement nos http://aka.ms/telechargements
solutions IT
La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet
http://aka.ms/devteam Microsoft http://aka.ms/itteam