Navigation hiérarchique 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 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.

Implémentation de base du modèle de navigation hiérarchique

Pages Hub, Section et Détail d’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.

Page	Description
Hub	Le hub est la page d’entrée de votre application qui donne un aperçu du champ d’application de votre application. Elle présente une ou plusieurs sections de contenu, qui proposent un petit échantillon d’éléments associés à cette section. Différents critères (en fonction des préférences de l’application ou de l’utilisateur) peuvent être appliqués pour contrôler les sections et les éléments à afficher. En règle générale, chaque élément affiche un aperçu, un résumé ou un extrait de son contenu. À partir de cette page, les utilisateurs peuvent naviguer vers une page de détail sur un élément ou une section. Nous recommandons de concevoir votre hub avec un grand nombre d’éléments visuels différents pour motiver les utilisateurs à explorer les différentes parties de votre application.
Section	Les pages Section représentent le deuxième niveau d’une application et affichent un aperçu, un résumé ou un extrait des éléments associés à cette section. Les éléments dans cette page sont affichés sous la forme qui représente au mieux le scénario et le contenu de la section. En règle générale, vous affichez davantage d’éléments dans cette page que dans la page hub. Chaque élément est lié à une page de détails.
Élément/détail	Les pages Détail représentent le troisième niveau d’une application et affichent la grande majorité, voire la totalité du contenu ou des fonctionnalités correspondant à l’élément sélectionné dans la page Hub ou Section. Certaines applications, telles que les lecteurs RSS, peuvent fournir des liens externes à des articles et des sites, si le contenu est trop volumineux pour être affiché dans l’application. Les pages Détail peuvent contenir de nombreuses informations ou un objet unique, par exemple une image ou une vidéo ou une autre fonctionnalité de l’application.

Hub

Le hub est la page d’entrée de votre application qui donne un aperçu du champ d’application de votre application. Elle présente une ou plusieurs sections de contenu, qui proposent un petit échantillon d’éléments associés à cette section. Différents critères (en fonction des préférences de l’application ou de l’utilisateur) peuvent être appliqués pour contrôler les sections et les éléments à afficher. En règle générale, chaque élément affiche un aperçu, un résumé ou un extrait de son contenu.

À partir de cette page, les utilisateurs peuvent naviguer vers une page de détail sur un élément ou une section.

Nous recommandons de concevoir votre hub avec un grand nombre d’éléments visuels différents pour motiver les utilisateurs à explorer les différentes parties de votre application.

Section

Les pages Section représentent le deuxième niveau d’une application et affichent un aperçu, un résumé ou un extrait des éléments associés à cette section. Les éléments dans cette page sont affichés sous la forme qui représente au mieux le scénario et le contenu de la section.

En règle générale, vous affichez davantage d’éléments dans cette page que dans la page hub. Chaque élément est lié à une page de détails.

Élément/détail

Les pages Détail représentent le troisième niveau d’une application et affichent la grande majorité, voire la totalité du contenu ou des fonctionnalités correspondant à l’élément sélectionné dans la page Hub ou Section. Certaines applications, telles que les lecteurs RSS, peuvent fournir des liens externes à des articles et des sites, si le contenu est trop volumineux pour être affiché dans l’application.

Les pages Détail peuvent contenir de nombreuses informations ou un objet unique, par exemple une image ou une vidéo ou une autre fonctionnalité de l’application.

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.

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 !

Page Hub de l’application d’exemple

Page Section de l’application d’exemple

Page Élément de l’application d’exemple

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

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.