Navigation hiérarchique de A à Z (HTML)

[ 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 hiérarchique pour votre application du Windows Store quand son contenu peut être divisé en sections ou catégories liées mais distinctes avec plusieurs niveaux de détail. Il s’agit d’un modèle courant adapté à une architecture d’informations relationnelles, parcourues dans un ordre ou une séquence préféré.

Le modèle de navigation que vous choisissez dépend des scénarios pris en charge par votre application. Si votre application fournit de nombreuses expériences différentes et du contenu avec une structure et une organisation, un modèle hiérarchique est préférable. Cependant, si la densité d’informations de votre application n’est pas importante ou si elle ne comporte pas une hiérarchie organisationnelle, consultez Navigation plate de A à Z, qui permet aux utilisateurs de naviguer rapidement entre des pages.

Ici, nous allons expliquer comment créer une application du Windows Store en JavaScript qui utilise le modèle de navigation hiérarchique et répond à toutes les exigences de base de la certification du 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 hiérarchique de base et un graphique du modèle de navigation hiérarchique dans une application du Windows Store.

Le contrôle Hub de la bibliothèque Windows pour JavaScript est conçu pour ce type d’application. Du plus général au plus détaillé, ce contrôle utilise les pages Hub, Section, et Élément/Détail pour vous aider à lier différentes informations de façon structurée et intuitive.

La barre de navigation, utilisée dans les applications avec navigation plate, peut également être utile pour naviguer dans le contenu d’une application hiérarchique. 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).

Essayez de concevoir votre application pour que la structure du contenu guide intuitivement les utilisateurs dans votre application et supprime le besoin d’une barre de navigation. Quand cela n’est pas possible, utilisez la barre de navigation à la place des en-têtes de section dans la page Hub et pour fournir des contrôles de navigation globaux. Elle doit s’afficher sur chaque page et à tous les niveaux au sein de l’application.

Remarque  Vérifiez que les utilisateurs peuvent naviguer en ordre inverse. Pour cela, WinJS fournit le BackButton, avec le PageControl.

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

Exemple de navigation hiérarchique

L’exemple de navigation hiérarchique 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 répondant à toutes les exigences de certification du Windows Store. Comme vous pouvez le voir ci-dessous, il comporte une page Hub comportant plusieurs sections, une page Section pilotée par les données (Section 3), et des pages Détail d’élément pour cette section. Ajoutez des pages à l’application si nécessaire. 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 !

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.

Implémenter la navigation

Ouvrez l’exemple de navigation hiérarchique ou démarrez avec le modèle de projet Application de concentrateur 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.

Utiliser 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

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.

Vous avez terminé les tâches de développement et vous êtes prêt à soumettre votre application au Windows Store ! Ciblez correctement le public de votre application avant de la soumettre. Faites en sorte que la description de votre application soit aussi détaillée que possible. Lancez le processus de distribution. Utilisez les outils de promotion disponibles dans le Windows Store pour aider vos clients à trouver votre application. Utilisez les données de télémétrie pour analyser les données d’utilisation et améliorer la qualité et les performances de votre application.

Vous voulez en savoir plus ?

Planification d’applications du Windows Store

Découvrez les différentes expériences que vous pouvez fournir aux utilisateurs.

Concevoir des applications pour l’accessibilité

Découvrez les aptitudes, les handicaps et les préférences de vos utilisateurs.

Concevoir des applications pour différents facteurs de forme

Découvrez comment gérer différents appareils, méthodes d’entrées et orientations d’écran.

Index des recommandations en matière d’expérience utilisateur

Parcourez la liste complète des recommandations en matière d’expérience utilisateur.

Exemples

• Exemple de contrôle AppBar HTML
• Exemple de navigation et d’historique de navigation
• Exemple de vignettes et de badges d’application
• Exemple d’écran de démarrage
• Exemple de paramètres d’application
• Exemple de ressources d’application et de localisation