Publier une application Metro dans le Windows Store

Dans cette série sur la réalisation de l’application Metro « Parle moi de… » en HTML et Javascript, nous avons vu :

Le meilleur moyen de déployer votre application Metro reste le magasin d’applications Windows ou Windows Store. Dans ce webcast, nous allons aborder les différentes étapes de la publication d’une application, comme la création d’un compte dans le store, la validation de votre application avec les outils du SDK, et le processus de certification.

Animations, transitions, et mise en place du charme de partage dans les applications Metro en HTML et Javascript

Dans cette série sur la réalisation de l’application Metro « Parle moi de… » en HTML et Javascript, nous avons vu :

Les animations et les transitions permettent de donner vie à l’application, et de donner un ressenti plus organique lors de la manipulation de l’application. C’est particulièrement important dans les applications tactiles car c’est un contexte dans lequel les applications peuvent paraître « cassées » lorsqu’elles ne sont pas assez réactives. Nous allons aborder dans ce webcast les différentes façon de gérer ces transitions et ces animations pour les applications Metro en HTML et Javascript. Une fois de plus, l’API WinJS fournie par Microsoft comporte tout une API qui va nous pouvoir nous aider. Si vous maîtrisez des librairies javascript comme jQuery, vous pourrez également les mettres à contribution, de la même façon que sur vos sites web. Une dernière façon de donner vie à vos écrans peut être d’utiliser directement les transitions CSS3.

Une autre façon de donner plus de vie à votre application est de permettre de partager son contenu. Pour ce faire, Windows propose le charme de partage. Grâce à ce charme, vos utilisateurs peuvent partager vos contenus vers d’autres applications, comme par exemple les applications de Contact (pour partager dans Facebook, Twitter, …), ou Courrier (pour envoyer ces informations par mail). Nous allons donc vous présenter comment implémenter le charme de partage dans votre application.

Dans le prochain épisode de cette série, nous verrons les étapes à respecter pour publier votre application dans le Windows Store.

Préférences et stockage local dans les applications Metro en HTML et Javascript

Dans cette série sur la réalisation de l’application Metro « Parle moi de… » en HTML et Javascript, nous avons vu

Parmis les charmes proposés dans Windows 8, nous avons le charme de paramètres. Il permet à l’utilisateur d’accéder aux paramètres de l’application, ainsi qu’aux paramètres du système. Dans vos applications Metro, les écrans de préférences et de paramétrage de l’application doivent être accessibles à travers le charme de paramètres (cela fait partie des points vérifiés lors de la certification dans le store). C’est également un bon endroit pour mettre votre fenêtre « A propos » si vous souhaitez en mettre une, ou pour mettre un lien sur l’aide. Dans les applications en HTML et Javascript, nous disposons d’un contrôle SettingsFlyout qui va nous permettre d’implémenter des écrans de préférence. Nous allons voir comment ajouter un lien dans le charme de paramètres, et comment réaliser un écran avec le contrôle SettingsFlyout.

Si vous proposez un écran de préférences, il faudra également stocker les choix de l’utilisateur pour pouvoir les réutiliser. Nous allonc donc également voir comment stocker ces préférences en local. Nous verrons aussi comment bénéficier du roaming, afin d’utiliser ces préférences sur les différents ordinateurs associés à un utilisateur.

Dans le prochain épisode, nous verrons comment ajouter des animations pour améliorer les transitions et le ressenti utilisateur, et comment implémenter le charme de partage.

Gestion des résolutions d’écran et des états visuels dans les applications Metro en HTML et Javascript

Dans cette série sur la réalisation de l’application Metro « Parle moi de… » en HTML et Javascript, nous avons vu

Nous allons maintenant voir la gestion des résolutions d’écran et des états visuels de l’application.

Windows 8, bien que résolument tactile, reste Windows. Il n’y a donc pas de résolution d’écran fixée. La résolution minimale supportée est de 1024 pixels, mais il est fréquent aujourd’hui de trouver des écrans en 1920px, y compris sur des portables, et on commence à voir apparaitre des écrans avec des résolutions beaucoup plus importantes.

Par ailleurs, une application Metro peut être dans différents états visuels, correspondant à l’ergonomie de cette nouvelle génération de Windows. L’application peut être affichée au format portrait ou paysage, mais elle peut aussi être en mode « snap », c’est à dire qu’elle est affichée côte à côte avec une autre application. On a dans ce cas une application « snappée » (avec un espace de 320 pixels), et une application « filled » qui occupe le reste de l’espace. Le fait de « snapper » des applications n’est accessible que si votre terminal est en orientation paysage, et que votre écran à une résolution d’au mois 1366 pixels.

Votre application Metro doit impérativement gérer ces différentes résolutions, ainsi que les états visuels (il n’est pas possible pour l’application de refuser de se « snapper »), sous peine d’être refusée dans le processus de certification dans le store.

Nous allons donc voir comment gérer ces paramètres en utilisant les mediaqueries de CSS3, ou à travers l’API javascript.

Dans le prochain épisode de cette série, nous verrons comment utiliser le charme de paramètres et comment stocker des données en local.

Multilangue dans les applications Metro en HTML et Javascript

Jusqu’ici, nous avons découvert comment mettre en place notre projet, puis comment tirer parti du charme de recherche et des contrôles comme la ListView pour notre application « Parle moi de… »

Dans ce 3e épisode, nous allons voir comment rendre notre application multilangue en Français et en Anglais.

Lorsqu’on souhaite tirer parti du multilangue dans une application Metro, il faut prendre différents aspects en compte. Nous allons évidemment vouloir traduire les textes utilisés. Nous allons aussi avoir besoin de changer certaines images selon la langue, à commencer par l’icone de notre application, l’écran de démarrage, le logo etc. Nous allons également avoir besoin de fournir des traductions pour les méta données de notre application comme par exemple son titre ou sa description, et déclarer les différentes langues gérées par notre application. Le but étant que les utilisateurs puissent avoir cette information lorsqu’ils consulteront notre application dans le magasin d’applications Windows.

Dans le prochain épisode, nous verrons comment gérer efficacement les différentes résolutions d’écran et comment gérer les différents états visuels de notre application.

Charme de recherche, ListView et Zoom sémantique dans les applications Metro en HTML et Javascript

Dans le précédent épisode de cette série, nous avons créé le projet pour l’application « Parle moi de… ». Dans ce second épisode, nous allons aborder différents aspects essentiels à notre application. Nous allons tout d’abord intégrer le charme de recherche, afin de pouvoir lancer des recherches depuis Windows.

Nous allons ensuite découvrir l’utilisation d’éléments de base des applications Metro en HTML comme l’utilisation des templates et du binding. Nous appliquerons ces concepts dans l’utilisation du contrôle de liste (ListView) pour afficher le résultat de la recherche. Ce contrôle est essentiel dans les applications de style Metro car il vous permet d’afficher une liste d’éléments sous la forme de tuiles. Dans les applications Metro en HTML et Javascript, ce contrôle ListView permet d’afficher les éléments soit sous la forme d’une grille (dans l’esprit de l’écran de démarrage Windows 8), soit sous la forme d’une liste (plus traditionnelle).

Pour terminer, nous approfondirons ces concepts en mettant en place le zoom sémantique à partir de la liste. Le but du zoom sémantique est de proposer une vue sémantiquement différente de la liste. L’utilisation typique est de fournir une vue des regroupements de données utilisés, et de permettre ainsi un système de « Jump-List » entre ces regroupements. En mode tactile, cette fonctionnalité est déclenchée par la gesture de zoom, d’où le terme de zoom sémantique.

 

Dans le prochain épisode, nous verrons les différentes étapes pour rendre notre application multilangue.

Créer une application Metro pour Windows 8 en HTML et Javascript

Les applications Metro dans Windows 8 permettent des ergonomies plus simples et plus fluides, et adaptées à une utilisation tactile. Il est possible de réaliser ces applications avec différentes plateforme de développement : C++/XAML, C# ou VB / XAML, ou HTML / Javascript.

Nous vous proposons une série de vidéos pour découvrir la réalisation d’applications Metro en HTML et javascript.

Il y a quelques temps déjà, à l’occasion de la version Developper Preview, nous avions présenté l’ergonomie de Windows 8, ainsi que les fondamentaux sur les applications Metro en HTML et Javascript

Nous avions également présenté l’anatomie des applications Metro en HTML et javascript

Avec la sortie de la version Release Preview de Windows 8, nous vous proposons maintenant de découvrir la réalisation d’une application Metro en HTML et Javascript, à travers le développement de l’application « Parle moi de… ». Cette application permet de faire des recherches dans différents fournisseurs de contenus comme Wikipédia ou Youtube.

Dans le premier épisode de cette série, nous vous proposons de découvrir la mise en place du projet. Cette mise en place passe par l’intégration de librairie javascript comme jQuery, et quelques informations sur les bonnes pratiques concernant l’utilisation du javascript. Vous pourrez aussi découvrir combien il est simple, grâce à Visual Studio, d’ajouter des pages et de naviguer dans les éléments du projet

Nous continuerons cette série avec différents articles et vidéos associées, pour découvrir le développement de ce genre d’application, étape par étape.

Dans le prochain épisode, nous verrons comment tirer parti du charme de recherche, et comment inclure un contrôle de type ListView dans notre application.