Vidéo sur les modèles de mise en page et création

Vidéo sur les modèles de mise en page et création
Concevez l'aspect de l'application mobile à l'aide de modèles de mise en page et de cartes. (8 min)
Adobe

Présentation des mises en page, cartes et pages de navigation

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.

Mise en page à 3 colonnes de la page de navigation
Cette page de navigation utilise une mise en page à 3 colonnes, qui comprend des cartes en pleine largeur, en 2x1 et en 1x1 correspondant aux bannières, aux articles et aux autres 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.

Mises en page de carte
La zone en jaune représente la même carte 2x2 au sein d’une mise en page à 3 colonnes (à gauche) et d’une à 5 colonnes utilisant des proportions de cellules différentes (à droite).

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.

Utilisation de modèles de mises en page pour créer des cartes et des mises en page

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.

 

  1. Créez une collection et ajoutez du contenu.

  2. Sur le portail à la demande (https://aemmobile.adobe.com), cliquez sur Contenu et mises en page > Modèles de mise en page.

  3. Cliquez sur Créer pour définir un modèle de mise en page à partir de zéro.

  4. Définissez les propriétés de mise en page.

    Définissez les propriétés de mise en page

    Sur le côté droit de l’outil de mise en page des pages de navigation, spécifiez un nom de mise en page et définissez les propriétés de mise en page telles que le nombre de colonnes, les marges et l’espacement des reliures.

    Importer la collection

    Cliquez sur Importer la collection et importez l’une de vos collections afin de voir l’impact de vos modifications sur le contenu cible. Lors de l’enregistrement de la mise en page, vous pouvez choisir de l’appliquer à la collection. Vous pouvez réorganiser les éléments dans les collections. Ces modifications apportées à la collection sont conservées lorsque vous sauvegardez le modèle de mise en page.

    Menu Aperçu

    Utilisez le menu Aperçu pour sélectionner l'orientation Paysage ou Portrait. Sélectionnez une taille d'appareil cible. Lorsque vous apportez des modifications à votre mise en page, sélectionnez de prévisualiser différentes tailles d'appareil afin de vous assurer que votre conception fonctionne sur tous les appareils cibles.

  5. Créez des cartes.

    Créez des cartes

    Cliquez sur le signe plus (+) pour créer une carte. Dans le panneau le plus à droite, indiquez un nom de carte et modifiez les paramètres. Les options figurant sur le panneau le plus à droite changent suivant la zone de carte sélectionnée.

    Pour modifier la zone de texte, développez les propriétés de carte sur la gauche, puis choisissez l’élément sur lequel vous souhaitez travailler, tel qu’Image ou Zone de texte. Si vous ne souhaitez pas que les métadonnées de carte apparaissent, cliquez sur l’icône Masquer en regard des métadonnées.

    Vous pouvez également cliquer dans la zone d’aperçu centrale pour modifier les paramètres de cette zone. Testez des paramètres au-dessus de la zone d’aperçu pour modifier le facteur de zoom, afficher la mise en page ou la carte ou afficher/masquer le contenu.

  6. Définissez les règles de mappage pour les cartes.

    Définissez les règles de mappage pour les cartes

    Cliquez sur « Mappage » et puis sur « Ajouter une règle » en regard de la carte sélectionnée.

    Définissez les propriétés de mappage. Par exemple, vous pouvez définir une règle pour les bannières avec une importance élevée. Lorsque vous définissez des règles de mappage, vous pouvez afficher un aperçu du contenu de votre collection affecté à cette carte.

    Faites glisser des éléments dans la collection pour modifier leur ordre. Lorsque vous enregistrez un modèle de mise en page, ces modifications sont appliquées.

  7. (Facultatif) Créez des mises en page supplémentaires (appelées « rendus ») pour définir différents paramètres d'aspect pour les tablettes, les smartphones et le web, comme expliqué plus loin.

  8. Enregistrez et fermez le modèle de mise en page.

    Lorsque vous sauvegardez le modèle de mise en forme, vous êtes invité à l'appliquer à la collection importée, si la mise en page n'a pas été affectée à cette collection.

  9. Affectez le modèle de mise en page aux collections.

    Vous pouvez affecter le modèle de mise en page à une collection en modifiant le modèle de mise en page lui-même ou en modifiant les propriétés de la collection.

    Affectez une mise en page à une collection

Paramètres de mise en page

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.

Paramètres de carte

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.

Options de paramètres de carte
La zone d’image de la carte vient au-dessus de l’arrière-plan de la carte. La zone de texte de la carte vient au-dessus de la zone d’image.

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.

Mappage du contenu aux cartes

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.

Dans cet exemple, la règle applique la carte grand format au premier élément de la collection uniquement.

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.

Cette règle applique la carte à chaque autre élément. La prochaine règle éligible est appliquée aux éléments de remplacement.

Rendus de mise en page pour smartphones et tablettes

 

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

Remarque :

Si vous créez une mise en page tôt dans le processus, puis réalisez que vous l'avez créée trop tôt, vous pouvez supprimer ce rendu, modifier les paramètres s'appliquant à tous les rendus, puis recréer le rendu.

  1. Créez un modèle de mise en page. Créez des cartes et appliquez les règles de mappage. Spécifiez les paramètres s'appliquant à tous les appareils cibles.

    Nous vous conseillons de commencer par la mise en page pour tablette, d'ajouter les cartes et les règles de mappage, puis de modifier les paramètres de carte et de mise en page s'appliquant à tous les appareils. Créez ensuite une mise en page pour smartphone et modifiez les paramètres s'appliquant uniquement au smartphone (puis au web, si nécessaire). Ainsi, vous n'avez pas à spécifier les mêmes paramètres pour chaque rendu.

  2. Pour créer un rendu pour smartphone, cliquez sur Smartphone > Ajouter une mise en page, puis cliquez sur Créer une mise en page. L'option Smartphone étant sélectionnée, indiquez les paramètres de carte et de mise en page spécifiques au smartphone.

  3. Pour créer un rendu pour le lecteur web pour ordinateur, cliquez sur Web > Ajouter une mise en page, puis cliquez sur Créer une mise en page. L'option Web étant sélectionnée, indiquez les paramètres de carte et de mise en page spécifiques au lecteur web pour ordinateur.

  4. Enregistrez le modèle de mise en page et appliquez-le aux collections. Testez les résultats.

    Les rendus 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.

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.

Utilisez le menu pour modifier les options d'aperçu, définir une valeur par défaut ou supprimer la mise en page.

Ordre des cartes

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.

Définition de l’ordre de carte
Le troisième élément vient se placer avant le deuxième afin de combler l’espace vide.

Suppression de cartes et de mises en page

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.

Copie de mises en page dans un projet différent

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.

  1. Sélectionnez les modèles de mise en page que vous voulez copier et choisissez Copier la mise en page dans un autre projet.

  2. Dans la liste des projets disponibles dans votre compte, sélectionnez le projet dans lequel vous voulez copier les mises en page.

  3. Si vous voulez copier la mise en page de manière à remplacer la mise en page portant le même nom dans le projet cible, sélectionnez Remplacer en cas d'existence.

    Si vous ne sélectionnez pas cette option, un message d'erreur s'affiche si le projet cible comporte une mise en page portant le même nom que la mise en page copiée.

  4. Cliquez sur Copier vers la cible.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne