Navigation plate de A à Z (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Utilisez un modèle de navigation plate pour votre application du Windows Store quand elle comporte un petit nombre de pages et que ses informations ne sont pas organisées hiérarchiquement. C’est-à-dire, quand les pages, les onglets et les modes sont au même niveau.

Votre application permet aux utilisateurs de se concentrer sur le contenu de l’application, et non sur l’emplacement des éléments. Si la densité d’informations de votre application n’est pas importante, si elle ne comporte pas beaucoup de pages ou si les scénarios qu’elle propose n’ont pas besoin de hiérarchie ni de structure, optez pour un modèle plat qui permet aux utilisateurs de naviguer rapidement entre les pages. Cependant, si votre application fournit de nombreuses expériences différentes et du contenu avec une structure et une organisation qui doit être exploré dans un ordre ou une séquence spécifique, reportez-vous à Navigation hiérarchique de A à Z.

Ici, nous allons expliquer comment créer une application du Windows Store en JavaScript qui utilise le modèle de navigation plate et répond à toutes les exigences de base de la certification Windows Store de A à Z. Cela comprend les éléments suivants :

Ressources de type image pour exposer l’application dans le système d’exploitation
Barres de l’application pour prendre en charge la navigation et les commandes
Paramètres pour offrir la confidentialité, l’aide et d’autres informations sur l’application
Itinérance des données pour synchroniser votre application entre sessions et appareils
Globalisation pour répondre aux besoins des clients du monde entier
Accessibilité pour aider les utilisateurs à effectuer des tâches quelles que soient leurs capacités physiques et méthodes d’entrée

Voici une structure plate et un graphique du modèle de navigation plate dans une application du Windows Store.

Implémentation de base du modèle de navigation plate

Structure de l’exemple d’application.

Comme le montre ces images, la structure de contenu plate définie par ce modèle nécessite que chaque page soit accessible à partir des autres pages. Un utilisateur peut avancer ou reculer dans les pages, sans branchement (pas de sous-pages).

Utilisez la barre de l’application de navigation (indiquée dans la structure ci-dessus) pour basculer rapidement entre les pages dans des applications à navigation plate. Cette barre est un élément provisoire qui peut s’afficher en haut de l’écran quand les utilisateurs effectuent un balayage à partir du bas ou du haut (clic droit avec une souris, touche Windows+Z, ou touche de menu avec un clavier).

Voici comment notre application Calculatrice implémente le modèle de navigation plate. Remarquez qu’elle utilise une barre de navigation persistante au lieu de la barre de navigation provisoire standard. Il s’agit d’un exemple d’adaptation de la plateforme d’une application du Windows Store à des scénarios spécifiques.


Page de calculatrice standard	Page de calculatrice scientifique	Page de calculatrice/convertisseur

Pour vous aider à ne pas encombrer l’écran de contrôles persistants et permettre à l’utilisateur de se concentrer sur le contenu de votre application, utilisez le modèle de navigation approprié et la disposition d’interface utilisateur adaptée (voir Interface utilisateur des applications de A à Z).

L’exemple de navigation plate de base est le point de départ à adapter à votre contenu et expériences. Il illustre les principes, les recommandations et les détails d’implémentation décrits ici dans une application qui répond aux exigences de certification de toutes les applications du Windows Store. Comme vous le voyez ci-dessous, l’exemple comprend deux pages : une page d’accueil qui présente l’application et une seconde page où placer vos éléments. Découvrez comment nous avons mis cela en pratique. Vous pouvez ensuite gagner du temps en utilisant cet exemple comme base pour votre développement !

Page 1 de l’exemple d’application

Page 1 de l’exemple d’application avec la barre de navigation

Page 2 de l’exemple d’application

Conformité avec le Windows Store

Le Windows Store permet la distribution des applications du Windows Store aux clients et propose aux clients le plus grand nombre d’applications possibles. Les applications du Windows Store doivent respecter les Politiques du Windows Store et du Windows Phone Store.

L’exemple implémente les fonctionnalités décrites ici et les conditions requises par les applications du Windows Store pour être certifiées, notamment :

Écran de démarrage et images de vignette
Prise en charge de l’interaction tactile, des entrées au clavier et avec la souris
Prise en charge de différentes tailles de fenêtre, orientations et tailles d’affichage
État de session et itinérance
Optimisé pour la globalisation, la localisation et l’accessibilité

Lors du développement de votre application, n’oubliez pas les politiques du Windows Store et du Windows Phone Store et essayez d’éviter les échecs de certification courants.

Ouvrez l’exemple de navigation plate ou démarrez avec le modèle de projet Application de navigation dans Visual Studio. Si vous le souhaitez, vous pouvez passer en revue ces présentations du modèle :

Modèles de projet JavaScript pour les applications Windows Runtime : résume les détails d’implémentation concernant le modèle de navigation, le modèle de données, la gestion de l’état d’affichage, etc.
Modèles d’élément JavaScript pour les applications du Windows Store : inclut le code couramment utilisé pouvant réduire le temps de développement.

Ajouter la navigation sur une seule page

Décrit en détail la prise en charge de la navigation sur une seule page par l’objet PageControl. Ajout de contrôles de page explique les différentes implémentations.

Identifier dans l’exemple : le PageControl est défini dans le fichier \js\navigator.js et est utilisé dans \pages\home\home.js et \pages\page2\page2.js.

Ajouter l’interface utilisateur et des images

Indiquez les ressources de type image (éléments visuels, tels que l’écran de démarrage et les images de vignette) pour votre application sous l’onglet Interface utilisateur de l’application du manifeste de l’application. Pour ce faire, ouvrez package.appxmanifest à partir de l’Explorateur de solutions. Voir Utilisation du concepteur de manifeste.

Remarque L’application d’exemple comprend des espaces réservés d’image conforment aux exigences du Windows Store. À titre de démonstration, des images supplémentaires qui prennent en charge l’accessibilité avec différents paramètres de contraste, et la localisation en français (fr-FR) sont également incluses dans le modèle. La plupart des images sont fournies en plusieurs résolutions.

	Choisir des images pour représenter votre application Indiquez les images qui fournissent la meilleure expérience. Ajoutez différentes versions pour les différentes résolutions d’écran. Votre application requiert un ensemble d’images de base pour réussir la certification du Windows Store. Logo Windows Store Affiché avec votre application dans les résultats de la recherche et avec la description de l’application. Logo Affiché dans la vignette carrée pour l’application dans l’écran de démarrage. Voir Création de vignettes et de badges et Exemple de vignettes et de badges d’application. Petit logo Le petit logo s’affiche avec le nom complet de votre application dans les résultats de recherche apparaissant sur l’écran de démarrage. Il s’affiche également dans la liste des applications recherchées et lorsque la page d’accueil fait l’objet d’un zoom arrière. Écran de démarrage Affiché au lancement d’une application, il disparait dès que l’application est prête à être utilisée. L’écran de démarrage est constitué d’une image et d’une couleur d’arrière-plan que vous pouvez personnaliser. Voir Ajout d’un écran de démarrage et Exemple d’écran de démarrage.
	Ajouter des ressources de fichiers ou d’images Suivez ces instructions pour attribuer un nom et organiser les ressources de fichier dans des dossiers.
	Optimiser les images pour différentes résolutions d’écran Créez des ressources de type image pour votre application, ajoutez-les au projet et identifiez-les dans le manifeste de l’application.
	Ajouter des barres d’application Présentez la navigation, les commandes et les outils aux utilisateurs à la demande. La barre d’application affiche les commandes en rapport avec le contexte de l’utilisateur, généralement la page ou la sélection active. À personnaliser selon vos besoins. Pour un exemple détaillé, voir Exemple de contrôle AppBar HTML.
	Ajouter des paramètres d’application Fournissez l’accès à tous les paramètres pertinents au contexte de l’utilisateur. À personnaliser selon vos besoins. Voir Exemple de paramètres d’application. L’application complément comprend une déclaration de confidentialité et un contenu d’aide accessibles à partir de l’icône Paramètres.

Rendre les données d’application itinérantes

Gérer les données d’application

Gérez les données d’application, notamment l’état d’exécution, les préférences utilisateur et d’autres paramètres. Les données d’application sont créées, lues, mises à jour et supprimées lors de l’exécution de l’application.

Rendre les données d’application itinérantes

Synchronisez les données et l’état de votre application sur plusieurs appareils et éliminez des tâches d’installation et les tâches répétitives entre les appareils. Windows réplique les données sur le cloud quand elles sont mises à jour et les synchronise sur les autres appareils sur lesquels l’application est installée.

Globaliser

Soyez cohérent pour la globalisation et assurez-vous que vos captures d’écran montrent clairement que votre application est localisée. N’oubliez pas que les langues sont différentes des marchés.

En savoir plus sur les ressources et la localisation des applications

Concevez des applications du Windows Store de sorte à pouvoir gérer et localiser leurs ressources de manière indépendante, mais aussi à les personnaliser en fonction de facteurs d’échelle différents, d’options d’accessibilité et d’autres contextes d’utilisateur et d’ordinateur. Voir Exemple de ressources d’application et de localisation.

Localiser le manifeste du package

Localisez le nom complet de votre application, sa description et les autres fonctionnalités qui l’identifient, qui se trouvent dans le manifeste de l’application.

Globaliser votre application

Adaptez votre logiciel à d’autres langues, marchés, cultures et régions.

Prendre en charge l’accessibilité

Ne déclarez pas votre application comme accessible à moins de l’avoir spécifiquement conçue et testée pour des scénarios d’accessibilité.

Tester l’accessibilité de votre application

Découvrez les outils de test d’accessibilité fournis dans le Kit de développement logiciel Windows (Kit SDK Windows) pour Windows 8, qui vous permettent de vérifier l’accessibilité de votre application.

Déclarer votre application comme accessible dans le Windows Store

Si vous avez testé votre application en matière d’accessibilité, vous pouvez l’indiquer en activant la case à cocher Accessibilité de la page Détails de vente.

Conclusion

icône de conditions requises du Windows Store

Certifiez votre application avec le Kit de certification des applications Windows.

Exécutez le Kit de certification des applications Windows pour vérifier que votre application répond à toutes les exigences du Windows Store. Procédez ainsi quand vous ajoutez des fonctionnalités à votre application.