Création de cartes et de mises en page

Un modèle de mise en page détermine l'affichage d'une collection dans une page de navigation. Les éléments d'une collection sont affichés sur la mise en page de la page de navigation sous la forme de cartes. Lorsque vous créez un modèle de mise en page, procédez comme suit :

• Définissez les propriétés de mise en page, telles que le nombre de colonnes, les valeurs de marge et de reliure et la forme des cellules.
• Créez des cartes et définissez leur aspect.
• Définissez les règles de mappage suivant les métadonnées afin de déterminer le contenu associé aux cartes.
  

L’aspect de la page de navigation est déterminé par le design de la mise en page et des cartes, ainsi que par les paramètres de métadonnées des éléments des collections.

Les cartes déterminent l'aspect du contenu sur la page de navigation. Il se peut que les vignettes ne s’affichent pas de la même manière sur les cartes de format différent, selon les paramètres de mise en page. Par exemple, une vignette qui apparaissait auparavant sur une carte 3x1 peut passer sur une carte 1x1 après la mise à jour des métadonnées.

Tenez compte des points suivants :

• Dans un modèle de mise en page, vous pouvez définir différentes mises en page (parfois appelées « rendus ») pour tablettes, smartphones et le web.
  
• Il n’est pas possible, à l’heure actuelle, d’épingler des cartes à un emplacement spécifique sur la grille.
• Il n’est pas possible, à l’heure actuelle, de définir des règles de mappage permettant de déterminer l’ordre du contenu. Les règles de mappage déterminent simplement quel contenu est affecté aux cartes.

L’outil de création de page de Navigation est une nouvelle méthode de création des cartes et des mises en page. Actuellement, vous pouvez utiliser le nouvel outil de création de page de Navigation ou les onglets existants Cartes et Mises en page pour concevoir vos pages de navigation.

Avec l’outil de création de page de Navigation, vous pouvez utiliser la même interface pour créer des mises en page, des cartes de conception et des cartes de mappage dans le contenu. Pendant le processus de création, vous pouvez spécifier d’afficher une collection existante tout en réglant vos paramètres de page de navigation. Vous pouvez modifier la taille de l'appareil cible, faire pivoter ou désactiver une grille ; cliquez ensuite sur une zone de carte pour modifier les paramètres pour ce texte ou cette zone d’image. Vous pouvez également réorganiser les éléments dans la collection que vous avez importée.

Vous pouvez importer des mises en page que vous avez déjà créées pour créer une nouvelle version basée sur les paramètres de mise en page existants.

Les modèles de mise en page nécessitent une application créée à l'aide de la version 2015.8 (décembre 2015) ou une version ultérieure.

La mise en page contribue à définir l’aspect des pages de navigation d’une collection.

Si vous voulez utiliser des mises en page différentes pour les smartphones et les tablettes, définissez plusieurs mises en page (appelées « rendus de mise en page » dans un modèle de mise en page, comme expliqué plus loin. 

Spécifiez les paramètres de mise en page suivants.

Proportions des cellules

Utilisez cette option pour modifier la forme des cellules, exprimée par un rapport largeur:hauteur. Par exemple, une cellule de 1:1 correspond à un carré, tandis qu’une de 4:3 est plus large que haute et une de 3:4, plus haute que large. Si vous spécifiez un nombre positif tel que 3,5, le rapport correspond à 3,5:1.

Colonnes

Spécifiez le nombre de colonnes. Notez qu'une carte ne peut pas comporter plus de colonnes que la mise en page.

Unités de la reliure et des marges

Indiquez si vous souhaitez exprimer les valeurs de reliure et de marge en DIP (Device Independent Pixel) ou en pourcentage. Les reliures déterminent l’espacement entre les cartes. Les marges définissent l’espacement entre les bords extérieurs des cartes et la zone d’affichage de l'appareil.

Couleur d’arrière-plan de la mise en page

Spécifiez une couleur pour l’arrière-plan de la page de navigation. Cette couleur est appliquée aux marges et aux reliures. Elle peut être visible en transparence sur la carte.

Image d’arrière-plan

Si vous sélectionnez cette option, l’image spécifiée comme arrière-plan de la collection est affichée dans la page de navigation. Si vous avez indiqué à la fois une image d’arrière-plan et une couleur d’arrière-plan pour la mise en page, l’image d’arrière-plan est prioritaire. Si l'image d'arrière-plan comporte des effets de transparence, la couleur d'arrière-plan est visible. L'image d'arrière-plan est affichée en plein écran et mise à l'échelle de manière à remplir l'écran. Elle est également statique ; les cartes défilent devant l'arrière-plan de la collection.

Lorsque vous créez une carte, vous en spécifiez les caractéristiques de conception, vous définissez notamment le nombre de cellules de mise en page incluses, ainsi que d’autres propriétés. Cependant, vous n’avez pas besoin de spécifier le contenu associé à la carte : pour cela, vous configurerez des règles de mappage.

La forme et la taille de la carte sont déterminées par la mise en page à laquelle la carte est appliquée. Ainsi, une même carte 3x2 paraît bien différente selon qu’elle est appliquée à une mise en page à 3 colonnes ou à 12 colonnes.

Lorsque vous définissez des paramètres, la zone d'aperçu affiche l'aspect approximatif de la carte en utilisant le contenu de la collection importée.

Pour définir correctement les paramètres des cartes, il est important de comprendre la manière dont les différents éléments d’une carte interagissent les uns avec les autres.

Ordre ou hiérarchie

L’arrière-plan de la carte vient au-dessus de la mise en page. Puis, la zone d’image de la carte vient au-dessus de l’arrière-plan. Enfin, la zone de texte de la carte vient au-dessus de la zone de l’image.

Images de carte

Les images utilisées pour les collections, les articles, les bannières et les arrière-plans des collections sont centrées, redimensionnées et recadrées de manière à remplir la zone d’image de la carte.

Les différentes cartes sont visibles dans la page de navigation d’une collection. Les cartes peuvent posséder certaines propriétés qui sont semi-transparentes, ce qui permet de laisser transparaître l’image ou la couleur d’arrière-plan de la collection. Certaines parties d’une carte peuvent être semi-transparentes afin d’améliorer la lisibilité du texte ou de teinter une image de carte, mais les images de carte sont toujours opaques.

Format de carte

Quand vous spécifiez un format de carte « Image à gauche » ou « Image à droite », assurez-vous qu’un espace suffisant a été aménagé au niveau de la mise en page sur laquelle la carte apparaît, pour que les métadonnées de la zone d’image et celles de la zone de texte puissent figurer côte à côte. Pour empêcher le rognage de la zone de texte, vous devrez peut-être modifier les proportions des cellules de la mise en page ou augmenter la largeur de la carte.  

Arrière-plans, bordures et marges

Vous pouvez définir une couleur et une transparence pour chaque carte. La couleur de la carte sert d’arrière-plan aux zones de texte et d’image de la carte.

L’arrière-plan de la carte peut être recouvert par des images, des zones de texte et des bordures. Les zones d’image and de texte viennent au-dessus de l’arrière-plan de la carte. Les zones de texte comme les images possèdent des marges.

Les marges décalent les zones d’image et de texte par rapport au bord de la carte. En définissant des marges, vous pouvez faire transparaître l’arrière-plan semi-transparent de la carte. Les images peuvent présenter des incrustations de couleur en transparence, ce qui permet de leur donner une teinte. Une zone de remplissage peut également être configurée pour les zones de texte, ce qui a pour effet d’éloigner les libellés (métadonnées) du bord de la zone de texte.

Les zones de texte possèdent également des arrière-plans de couleur qui permettent l’utilisation de la transparence. Vous pouvez utiliser des arrière-plans de couleur pour renforcer le contraste ou améliorer la lisibilité du texte.

Les bordures ne sont pas transparentes et permettent de ne pas coller le contenu au bord de la carte. Pour que le bord de votre carte soit semi-transparent et interagisse avec l’arrière-plan de la mise en page, utilisez des marges pour vos zones d’image ou de texte. Si vous souhaitez simplement espacer les cartes, ajoutez des reliures à votre mise en page.

DIP (Device Independent Pixel)

Un DIP (Device Independent Pixel) correspond à une abstraction d’un pixel qui est utilisée dans une application et qu’un système sous-jacent convertit ensuite en pixels physiques. Par exemple, une bordure de 10 dip a la même taille relative qu’elle soit affichée sur un iPad SD 1024 x 768 ou un iPad HD 2048 x 1536.

Champs de métadonnées

Lorsque vous définissez les champs de métadonnées, vous pouvez inclure du texte et deux éléments de métadonnées maximum au sein du même champ. Par exemple, si vous définissez un champ de métadonnées de type {{title}} par {{author}}, la carte affiche les métadonnées de l’article sous la forme « Pêche en Argentine par Françoise Martin ». Il est également possible de créer des champs distincts pour {{title}} et {{author}} de sorte que les métadonnées s’affichent sur différentes lignes au sein de la carte.

Si le contenu mappé sur la carte n'inclut pas de métadonnées pour le champ spécifié, le champ est ignoré, à moins qu'il ne comporte du texte supplémentaire, tel que « par » dans par {{author}}. Par défaut, les cartes comprennent trois champs de métadonnées. Cliquez sur l'icône en forme « d'œil » dans le volet le plus à gauche pour masquer ou afficher le champ de métadonnées.

Lorsque vous sélectionnez l'élément de métadonnées {{Published Date (Default)}}, les paramètres régionaux et la langue de l'appareil sont utilisés pour déterminer le format. Par exemple, la date s'affiche sous le format MM/JJ/AAAA en anglais (ÉTATS-UNIS) et sous le format JJ/MM/AAAA en français.

Vous pouvez choisir n'importe quelle police personnalisée que vous avez téléchargée en utilisant la section Polices et personnalisation appli de Portal. Reportez-vous à la page Personnalisation des applications AEM Mobile : Utilisation de polices personnalisées.

Définissez des règles de mappage afin de déterminer les cartes appliquées au contenu en fonction des métadonnées. Par exemple, vous pouvez créer une première règle de mappage qui applique une grande carte à tout article ayant une priorité « Élevée » et une seconde, appliquant une carte plus petite aux articles dont la priorité est « Normale ».

Pour chaque élément de contenu, les règles de mappage sont analysées dans l’ordre. Ainsi, la première règle de mappage correspondant aux métadonnées du contenu est appliquée. Le contenu doit être conforme à tous les paramètres constituant la règle. Par exemple, si dans une règle de mappage, la valeur Bannières est indiquée comme Type et que la valeur Élevée est affectée au champ Importance, le contenu doit être une bannière ayant un niveau d’importance élevé pour que la règle s’y applique.

Par exemple, supposons que vous avez créé une carte 3x1 et une carte 1x1. Créez la première règle de mappage avec les paramètres suivants : Type = Articles et Importance = Élevée. Pour la carte 1x1, créez une seconde règle de mappage sans préciser de métadonnée. Dans cet exemple, la règle 3x1 doit être prioritaire sur la règle 1x1 ; dans le cas contraire, les articles avec une importance élevée se retrouvent affectés aux cartes 1x1.

Dans les paramètres de règle, les métadonnées indiquées sont sensibles à la casse. Ainsi, si vous créez une règle avec « bleu » comme mot-clé interne, cette règle ne s’applique pas au contenu incluant le mot-clé interne « Bleu ». Dans le cas où le contenu comporte plusieurs mots-clés, il suffit que la règle de mappage corresponde à un seul de ces mots-clés pour que le paramètre soit appliqué.

Notez que ce mappage des cartes ne détermine pas l’ordre du contenu sur la page de navigation. Il détermine uniquement quel contenu est associé à chaque carte.

Règle active

Utilisez l'option « Règle active » pour n'appliquer une carte qu'au nombre spécifié d'éléments correspondant aux critères. Par exemple, vous pouvez créer une règle de mappage qui applique une carte grand format au premier élément de la collection uniquement. Pour modifier la règle, sélectionnez Règle active > Parfois, puis indiquez le nombre d'éléments auxquels vous voulez appliquer cette règle.

Mapper les éléments

Utilisez l'option « Mapper les éléments » pour appliquer une carte à chaque nième carte correspondant aux critères. Par exemple, si vous souhaitez créer des cartes de remplacement, créez une carte appliquant la règle à chaque deuxième carte, en commençant par le premier élément correspondant à la règle. Dans cet exemple, chaque autre élément commençant par le second élément est formaté selon la règle suivante correspondant aux critères.

Les rendus de mise en page offrent une flexibilité au niveau de la création, vous permettant de définir plusieurs aspects pour la même collection sur tablettes, smartphones et le lecteur web pour ordinateur. Grâce à cette nouvelle fonctionnalité, il est désormais possible de proposer le même contenu pour toutes les plates-formes et tous les appareils pris en charge tout en conservant un contrôle de la création. Lorsque vous créez un modèle de mise en page, vous pouvez définir différents paramètres de mise en page et de carte pour tablettes, smartphones et pour le web. Les paramètres de rendu pour chaque appareil cible déterminent l'aspect de la page de navigation, en fonction de l'appareil.

Les rendus de mise en page sont particulièrement utiles pour les projets avec 1 collection globale, mais ils peuvent également être effectifs pour les projets avec 2 collections globales dans lesquelles vous utilisez l'une des collections pour les smartphones et les tablettes.

Dans l'exemple suivant, les cartes de ce modèle de mise en page ont des aspects différents sur tablettes et sur smartphones.

Lorsque vous créez un modèle de mise en page, seul le rendu pour tablette est créé au départ. Il s'agit du rendu appliqué par défaut aux tablettes, aux smartphones et sur le web, sauf si une nouvelle mise en page pour smartphone ou pour le web est ajoutée. Lorsque vous ajoutez une mise en page (également appelée « rendu ») pour smartphone ou pour le web, le nouveau rendu hérite des paramètres du rendu pour tablette par défaut. Par la suite, toute modification apportée aux paramètres de carte ou de mise en page s'applique également à ce rendu. (Les règles de mappage des cartes s'appliquent à tous les rendus.)

Pour supprimer une mise en page, cliquez pour afficher le menu déroulant de la mise en page, puis cliquez sur l'icône en forme de corbeille. Vous ne pouvez pas supprimer la mise en page par défaut.

Pour modifier la taille de l'aperçu cible, sélectionnez une taille différente dans le menu de l'appareil.

Pour modifier la mise en page par défaut, cliquez pour afficher le menu déroulant de la mise en page, puis cliquez sur Définir comme valeur par défaut. L'affichage par défaut est alors utilisé pour tous les types d'appareils non spécifiés. Par exemple, si vous avez uniquement des mises en page pour smartphone et tablette, puis définissez le smartphone comme valeur par défaut, la mise en page pour smartphone est appliquée au web.

En général, l’ordre du contenu au sein de la collection détermine l’ordre du contenu dans la mise en page. Toutefois, si vos cartes sont organisées de telle manière qu’il reste des espaces le long d’un bord dans la mise en page, l’ordre du contenu peut être différent. En effet, ces espaces peuvent alors être comblés par des cartes petit format qui figurent, pourtant, plus bas dans l’ordre du contenu. Prenons l’exemple d’une grille à 3 colonnes. Le premier article correspond à une carte 2x1, le deuxième élément est mappé avec une carte 3x1 et le troisième, avec une carte 1x1. Dans ce cas, la carte 1x1 apparaît dans l’espace restant sur la ligne supérieure, au-dessus du second élément.

Pour supprimer une mise en page ou un modèle de mise en page, vous devez d’abord en supprimer toutes les références au sein des collections. En particulier, modifiez les collections afin de leur affecter une autre mise en page. Après avoir appliqué une autre mise en page aux collections, vous devez republier ces dernières (dans le cas où elles avaient déjà été publiées). Vous pouvez ensuite dépublier la mise page ou le modèle de mise en page et le supprimer.

Pour supprimer une carte ne faisant pas partie d'un modèle de mise en page, vous devez d’abord en supprimer toutes les références. En particulier, modifiez les mises en page afin de supprimer ou de corriger toutes les règles de mappage faisant référence à cette carte. Après avoir supprimé ou corrigé les règles de mappage des mises en page, vous devez republier ces dernières (dans le cas où elles avaient déjà été publiées). Vous pouvez ensuite dépublier la carte et la supprimer. (Si une carte fait partie d'un modèle de mise en page, vous pouvez la supprimer à tout moment.)

Vous ne pouvez pas supprimer la carte ou la mise en page par défaut.

Vous pouvez copier des modèles de mise en page d'un projet dans un autre au sein du même compte. Si le projet de destination inclut un modèle de mise en page portant le même nom, vous pouvez déterminer si vous voulez remplacer la mise en page existante ou en copier une nouvelle.