Langage: HTML | XAML

Navigation hiérarchique de A à Z (HTML)

Applies to Windows only

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.
  • Itinérance des données pour synchroniser votre application entre sessions et appareils.
  • Paramètres pour offrir la confidentialité, l’aide et d’autres informations sur l’application.
  • 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.

Les recommandations, tâches et exemples de code présentés ici sont spécifiques au développement d’applications du Windows Store en JavaScript. Pour les applications du Windows Store en C++, C#, ou Visual Basic, voir Navigation hiérarchique de A à Z.

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.

PageDescription

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.

Prérequis

Si vous débutez dans le développement d’applications du Windows Store en JavaScript, consultez les rubriques ci-dessous pour vous familiariser avec les technologies décrites ici.

Exemple de navigation hiérarchique

En plus des exemples et des extraits de code des rubriques référencées ci-dessous, nous avons développé un exemple de navigation hiérarchique. Cet exemple d’application du Windows Store 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.

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 !

Voici une courte description de l’exemple

Dans cet exemple, nous fournissons un shell (ou modèle) compatible avec la certification du Windows Store que vous pouvez personnaliser en fonction de vos besoins. Il s’agit d’un point de départ à adapter à votre contenu et expériences.

Voici des captures d’écran de l’exemple d’application qui montrent les fonctionnalités de base de l’exemple. Il comporte une page Hub avec 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.

Page Hub de l’application d’exemple

Page Section de l’application d’exemple

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

Voici un plan bref des tâches nécessaires pour créer une application de base qui utilise les meilleures pratiques relatives à la création d’applications du Windows Store avec un modèle de navigation hiérarchique. Nous décrivons les détails de navigation et les fonctionnalités minimales requises pour la conformité au Windows Store. Chaque tâche comporte un lien vers une rubrique correspondante plus détaillée. Le code correspondant dans l’exemple est également indiqué, le cas échéant.

Nous vous conseillons de passer en revue chaque étape si vous débutez dans le développement d’applications du Windows Store, ou si vous ne connaissez pas certains aspects de la conformité requise pour les applications du Windows Store. Les détails liés sont regroupés.

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é

Voici quelques informations générales pour vous aider et vous permettre de commercialiser votre application (simple ou plus avancée).

icône de début

S’inscrire

Obtenez un compte Microsoft et un compte de développeur du Windows Store, si vous n’en avez pas encore. Vous avez besoin de ces deux comptes pour proposer vos applications dans Windows Store.

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.

icône d’étape

Créer votre application

Suivez les étapes ci-après pour créer votre application à navigation plate. Vous pouvez commencer avec le modèle de navigation plate ou vous pouvez créer un projet d’application Hub  du Windows Store dans Microsoft Visual Studio.

icône d’étape

Commercialiser votre application

Une fois que vous avez configuré votre compte et créé votre application, le moment est venu de la proposer dans le Windows Store.

Ciblez correctement le public de votre application avant de la soumettre.

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.

 

Intéressons-nous maintenant aux détails de l’implémentation de l’interface utilisateur et des fonctionnalités pour un modèle d’application hiérarchique dans une application du Windows Store.

L’exemple implémente tous les éléments suivants, mais nous ne parcourrons pas le code ici. Chaque étape comporte une légende "Identifier dans l’exemple" pour trouver rapidement le code.

Certains de ces détails peuvent ne pas s’appliquer à votre application. Choisissez les rubriques et les détails qui s’appliquent.

Concepts de navigation

Nous avons déjà vu les concepts de base pour la commercialisation, nous allons donc nous intéresser aux modèles de navigation utilisés le plus souvent par les applications du Windows Store et les modèles fournis dans Microsoft Visual Studio 2013. À savoir :

icône d’étape

Modèles de navigation

Choisissez le modèle de navigation qui convient le mieux à votre application et à son contenu.

Nous utilisons l’exemple de modèle de navigation hiérarchique pour illustrer les concepts décrits ici. Téléchargez l’exemple et expérimentez.

Une fois identifié le modèle de navigation hiérarchique comme le mieux adapté à la structure de votre application, continuez la procédure ou utilisez directement l’exemple comme modèle pour concevoir et développer votre application.

icône d’étape

Inspiration

Les exemples de navigation de ces études de cas et guides de conseils sont fournis pour vous inspirer.

 

Implémentation de la navigation

icône d’étape

L’exemple pour cette rubrique dérive du modèle de projet Application Hub dans Visual Studio, il est donc également utile de passer en revue ces rubriques.

icône d’étape

Utilisation de 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.

 

Ressources de type image

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.
icône d’étape

Optimisation des 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.

icône d’étape

Choix des images de 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 d’accueil. 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 d’accueil. 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.

icône d’étape

Démarrage rapide : utilisation de ressources de fichiers ou d’images

Suivez ces instructions pour attribuer un nom et organiser les ressources de fichier dans des dossiers.

 

Barres d’application

L’exemple d’application implémente une seule commande dans une barre d’application standard.

Rappel:  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.

icône d’étape

Ajout de barres d’application

Proposez 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. Voir Exemple de contrôle AppBar HTML.

 

Données d’application itinérantes

icône d’étape

Accès aux 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.

icône d’étape

Démarrage rapide : 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.

 

Paramètres

L’application complément comprend une déclaration de confidentialité et un contenu d’aide accessibles à partir de l’icône Paramètres. Si votre application requiert une politique de confidentialité, elle doit également être affichée sur la page de description de votre application dans le Windows Store. (Consultez la section Politiques du Windows Store et du Windows Phone Store pour en savoir plus.)

icône d’étape

Ajout de 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.

icône d’étape

Description de votre application

Décrivez votre application aussi précisément que possible.

 

Globalisation

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. Voir Globalisation de votre application pour en savoir davantage.

icône d’étape

Ressources et 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.

icône d’étape

Localisation du 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.

icône d’étape

Globalisation de votre application

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

 

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

icône d’étape

Test de votre application en matière d’accessibilité.

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.

icône d’étape

Déclaration de 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.

icône stop

Vous avez terminé ! Votre application devrait être compact, non encombrée et fluide.

Vous pouvez souffler et admirer votre travail.

 

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

 

 

Afficher:
© 2015 Microsoft