Windows 8 Metro

Développement d’application pour Windows 8 Metro en HTML5 (JavaScript / HTML / CSS)

La nouvelle version de Windows pointe le bout de son nez. Windows 8 apporte son lot de nouveautés mais vous permet surtout de développer facilement des applications, comme pour les plateformes iOS et Android. Ces applications sont ensuite distribuées sur le Windows 8 Store, la version Windows de l’AppStore ou du Google Play. Windows 8 sera présent sur Desktop et sur tablettes dédiées Windows, ce qui représente un large panel d’utilisateurs qui pourront télécharger et utiliser votre application.

Vous pouvez toujours développer des applications Windows en utilisant la plateforme « classique » Windows (.Net, C# & co) mais Windows 8 vous permet maintenant de développer en « HTML5 », comprenez en HTML / JavaScript / CSS. Si vous êtes développeur d’applications web, vous avez l’habitude d’utiliser ces technos et serez rapidement productif pour la création de ces applications. Les applications créées en HTML5 sont les applications qui seront présentes dans l’interface « Metro » de Windows 8, alias « Windows 8 style UI ».

Pour plus d’informations sur les techniques de développement pour Windows 8, je vous invite à lire cet article:

Introduction au développement HTML / JavaScript / CSS pour Windows 8

Apprendre à développer des applications Windows 8 Metro sur html5-tutorial.fr

Si vous voulez apprendre à développer des applications W8, vous avez frappé à la bonne porte :). Vous trouverez sur html5-tutorial.fr, de nombreux articles, parfois très techniques sur le développement d’applications Windows 8.

Pour bien démarrer, je vous conseille la lecture de plusieurs articles:

Voici tous les articles qui touchent à Windows 8 Metro:

Vous pouvez aussi consulter l’excellente documentation fournie par Microsoft:

Clouder! pour Windows 8 : le tutorial fil rouge de html5-tutorial.fr

Pour vous aider à bien démarrer, j’ai écrit une quinzaine d’articles qui vont vous guider tout au long du développement d’une application Windows 8. Pour cela, j’explique comment j’ai créé « Clouder! », une application W8 connectée à SoundCloud. Si vous voulez en savoir plus sur cette application, je vous invite à lire cet article:

Windows Metro – Retour d’expérience sur la création de l’application Clouder! pour Windows 8 (stack HTML5)

Voici un screencast rapide de l’application (désolé pour la qualité de l’audio):

A travers ces tutoriaux, vous allez apprendre à:

  • Créer un projet Windows 8 Metro avec Visual Studio Express 2012
  • Réaliser des appels XHR vers un service web
  • Créer une liste ayant le style des applications Windows 8
  • Personnaliser le style de votre application avec Microsoft Blend
  • Navigation entre les pages de votre application
  • Création d’un lecteur audio HTML5
  • Intégration avec les fonctionnalités unifiée de Windows 8 : Recherche et Partage
  • Modification des tuiles de l’écran démarrer de votre application

Voici la liste des tutoriaux. Je vous conseille de les suivre dans l’ordre:

Après avoir suivi tous ces tutoriaux, vous devriez avoir de bonnes connaissances de base pour développer votre propre application Windows 8 Metro!

13 réflexions au sujet de « Windows 8 Metro »

  1. Ping : Windows Metro – Personnaliser le Settings Charm de Windows 8 dans son application | HTML5 Tutorial

  2. Ping : Mon application « Clouder! » sur le Windows 8 Store! | HTML5 Tutorial

  3. ancillon

    Bonjour,
    Je na sais pas comment traiter cette erreur :

    Ce package a été déployé en mode développement ou création. Désinstallez le package et réinstallez-le normalement.

    Je ne sais pas désinstaller un package, je ne vois rien dans les menus qui traite de ce problème.
    Avez vous une idée ?
    Merci.
    Meilleures salutations.

    Répondre ↓
  5. Antoine

    Bonjour,

    Je débute dans le développement d’application Windows 8 Metro en HTML et je souhaiterais savoir par quel manière vous ferez un système de connexion à un site (Qui n’a pas d’api, ni de système oAuth..) pour se connecter au premier lancement de l’appli puis y rester connecter.

    Merci d’avance !

    Répondre ↓
  7. Antoine

    Arf.. :/.
    Impossible de faire avec une gestion des cookies ? Sinon, merci quand même, je vais essayer de contacter le site pour demander si il leur es possible de créer une API :-).

    Répondre ↓
  8. Simon Lacroix

    Bonjour,

    Quel tutorial(s) ou livre(s) pouvez vous me conseiller s.v.p. pour apprendre le HTML5, CSS3 et JavaScript dans le but de faire des applications Windows 8 qui semblent pro comme vous?

    PS1: Ça peux être en livre ou tutorial séparé si c’est mieux comme ça.
    PS2: Mon niveau est débutant (je sais pas grand chose ^^) mais, j’aimerais bien avec les livres ou les tutorials pouvoir me rendre à un niveau assez avancé pour être capable de créer pleinement des apps Windows 8.
    PS3: Si possible, j’aimerais que ça sois en français s.v.p.

    Merci beaucoup :)

    Bonne soirée,
    Simon Lacroix

    Répondre ↓
  9. admin Auteur de l’article

    Salut Simon,

    Alors il y en a un super spécifique pour le dév W8 mais il est en anglais:
    http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx
    Le bouquin requiert quelques bases mais c’est peut-être aussi un bon moyen d’apprendre.

    Après, pour des livres qui abordent HTML / CSS / JS de manière plus globale, il y en a plein.
    Le site comme le site du zéro sont de bons points de départ:
    http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.html
    http://www.siteduzero.com/tutoriel-3-309961-dynamisez-vos-sites-web-avec-javascript.html
    Leurs tutos sont disponibles en ligne, en PDF et en ebook

    Fabien

    Répondre ↓
  10. ablo

    Bonjour ,
    Je suis entraîne de développer une application de gestion en gwt , je voudrai savoir si je peux m’en servir du css Metro pour rendre beau mes composants ?

    Merci

    Ablo

    Répondre ↓
    1. admin Auteur de l’article

      Bonjour,

      Le CSS Metro va fonctionner si les class= » » correspondants sont placés au niveau du DOM, ce qui est le cas pour les applications Windows 8 mais pas pour les apps GWT donc à priori je dirait plutôt que cela ne va pas t’arranger. Sinon, tu peux essayer avec le framework WinJS qui contient tous les composants notamment

      Fabien

      Répondre ↓
      1. ablo

        Merci beaucoup Fabien pour ta réponse .
        Mon souci est que en gwt je ne touche pas le javasrcipt , j’écris mon code java et ça sera transformé en javascript, je ne vois pas comment je peux utiliser le framework WinJs sans toucher le javaScript, si tu peux m’aider stp

        Merci

        Ablo

        Répondre ↓

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *