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:
- Introduction au développement HTML / JavaScript / CSS pour Windows 8
- Installation de Windows 8 Consumer Preview sur VMware Workstation 8
- Windows Metro – Les templates pour application JavaScript (Grid, Navigation, Split, …)
- Windows Metro – Cycle de vie d’une application
- Windows Metro – Afficher une liste simple avec le composant WinJS.UI.ListView
- Windows Metro – Modèle de navigation
- Windows Metro – Utiliser le template Navigation pour simuler une Single Page Web App
Voici tous les articles qui touchent à Windows 8 Metro:
Vous pouvez aussi consulter l’excellente documentation fournie par Microsoft:
- Développer des applications de style Metro exceptionnelles pour Windows 8
- Apprendre à créer des applications de style Metro
- Forum : Développement d’applications de style Metro pour Windows 8
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:
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:
- Windows Metro – Clouder! (1) – Préparation de l’espace de travail et création du projet
- Windows Metro – Clouder! (2) – Effectuer un appel XHR vers l’API SoundCloud
- Windows Metro – Clouder! (3) – Afficher une liste de titre depuis SoundCloud
- Windows Metro – Clouder! (4) – Donner du style avec Microsoft Blend
- Windows Metro – Clouder! (5) – Créer un objet SoundCloudService pour structurer son code
- Windows Metro – Clouder! (6) – Naviguer vers une page de détail au click sur une ListView
- Windows Metro – Clouder! (7) – Réalisation de la page « track »
- Windows Metro – Clouder! (8) – Chargement des commentaires depuis l’API SoundCloud
- Windows Metro – Clouder! (9) – Chargement d’un fichier JSON au lieu d’un appel XHR pour améliorer sa productivité
- Windows Metro – Clouder! (10) – Créer un lecteur audio avec le tag <audio> HTML5
- Windows Metro – Clouder! (11) – Utiliser la recherche intégrée à Windows 8 dans son application
- Windows Metro – Clouder! (12) – Afficher ses suggestions de recherche dans la recherche unifiée Windows 8
- Windows Metro – Clouder! (13) – Partager une URL avec le Share Charm de Windows 8
- Windows Metro – Clouder! (14) – Modifier la « Tile » du menu démarrer avec Notifications et TileUpdateManager
- Windows Metro – Clouder! (15) – Fin du fil rouge Clouder! Aller plus loin avec Windows 8…
Après avoir suivi tous ces tutoriaux, vous devriez avoir de bonnes connaissances de base pour développer votre propre application Windows 8 Metro!
Ping : Windows Metro – Personnaliser le Settings Charm de Windows 8 dans son application | HTML5 Tutorial
Ping : Mon application « Clouder! » sur le Windows 8 Store! | HTML5 Tutorial
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.
Salut,
Suit cet article, ça devrait le faire :
http://html5-tutorial.fr/windows-8-corriger-lerreur-bytecode-generation-du-windows-app-certification-kit/
Fabien
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 !
Sans API et système d’authentification, ça va être difficile ^^
Fabien
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 :-).
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
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
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
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
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
Excellent tutoriel. Moi aussi j’ai bénéficié des tutoriels en vidéo sur http://www.alphorm.com/tutoriel/formation-en-ligne-html5-css-3-et-javascript-70-480 pour maîtriser. C’est très fiable et très pratique aussi. En tout cas merci pour votre partage.