Création de bannières et de bannières dynamiques pour les pages de navigation

Une bannière est un élément qui s’affiche dans la page de navigation d’une collection. Il existe deux types de bannières :

Bannières de base – Une bannière de base est une image qui s’affiche sur la page de navigation. Un appui sur une bannière peut n'avoir aucun effet ou déclencher une action. Par exemple, un appui sur une bannière peut lancer une page web, lier vers un autre article ou une autre collection ou envoyer un e-mail, un message texte ou passer un appel téléphonique. Les bannières sont également utiles pour afficher une marque ou pour fournir un séparateur visuel sur une page de navigation.

Bannières dynamiques – Une bannière dynamique affiche le contenu HTML sur une page de navigation. Par exemple, les bannières dynamiques peuvent afficher des cotes boursières, des carrousels de diaporamas ou des flux de réseaux sociaux. En exploitant les plug-ins Cordova, vous pouvez profiter des caractéristiques spécifiques AEM Mobile, telles que permettre aux utilisateurs de toucher une diapositive dans une bannière pour accéder à un article ou pour afficher l'invite de connexion avec droits directs.  

Bannières de base

L'aspect de la bannière est déterminé par la carte à laquelle la bannière est attribuée. L’image de la bannière est centrée, mise à l’échelle et recadrée en fonction de la carte à laquelle elle est mappée. Créez une image de bannière suffisamment grande pour qu’elle s’affiche correctement dans la carte. Reportez-vous à la page Optimisation de contenu utilisé dans les applications AEM Mobile.

  1. Sous Contenu et mises en page, cliquez sur Contenu, puis cliquez sur Ajouter > Ajouter une bannière.

  2. Indiquez un nom de bannière unique au sein du projet.

  3. Spécifiez les métadonnées de la bannière.

    Vous pouvez vouloir ajouter des métadonnées de manière à distinguer la bannière du reste du contenu lorsque vous utilisez des règles de mappage (pour mapper le contenu aux cartes).

  4. Indiquez ce qui se produit lorsqu'un appui est effectué sur la bannière.

    Sélectionnez Aucune action si la bannière n'a aucun effet lorsque l'utilisateur la touche.

    Si vous souhaitez que la bannière effectue une action, sélectionnez l'une des options suivantes :

    http:// - Ouvre la page web spécifiée (http: ou https:) dans un navigateur intégré lorsque l'utilisateur touche la bannière.

    Exemple : http://www.adobe.com/fr

    navto:// - Accède à l'article ou la collection spécifié. Notez que les liens vers les numéros de page dans un article ne sont pas pris en charge. Pour plus d'informations sur les formats navto, reportez-vous à la page Hyperliens dans les articles AEM Mobile.

    Exemple : navto://collection/produits_café

    mailto: - Utilise l'application de messagerie par défaut de l'appareil pour envoyer un message e-mail.

    Exemple simple : mailto:jeanne@exemple.com

    Exemple détaillé : mailto:jeanne@exemple.com?cc=marie@exemple.com&subject=Merci%20encore&body=Merci%20beaucoup%20pour%20votre%20aide.%0D%0A%0D%0ANew%20line.

    sms : - Utilise l'application de messagerie de l'appareil pour envoyer un message texte.

    Exemple simple : sms:1-206-555-2323

    Exemple détaillé (iOS) : sms:+1206-555-2323&body=Message%20texte

    Exemple détaillé (Android) : sms:+1206555-2323?body=Message%20texte

    tel : - Utilise l'application téléphonique de l'appareil pour passer un appel téléphonique.

    Exemple : tel:1-206-555-2323

    Accéder à la collection d’accueil - Renvoie au premier article ou à la première collection dans la collection globale.

    Naviguer vers l'arrière - Retourne sur la page de navigateur ou l'article précédent à partir duquel l'utilisateur a effectué un appui ou a cliqué pour accéder à la page de navigateur actuelle. (Les mouvements de glissement sur les appareils mobiles ne sont pas inclus dans la navigation arrière.)

    Les actions mailto, sms et tel ne sont prises en charge que sur les appareils mobiles. Ils n'ont aucun effet dans le lecteur web pour ordinateur.

  5. Utilisez l'onglet Images pour charger l’image de la bannière.

    Si vous ne souhaitez pas utiliser d’image pour votre bannière (par exemple, si vous préférez n'afficher que le titre de la bannière ou une couleur), vous pouvez charger le fichier image de votre choix et créer une carte n’affichant pas l’image en question.

  6. Ajoutez la bannière à une collection. Assurez-vous qu’elle est correctement placée au sein de la collection (en haut, par exemple), de manière à figurer au bon endroit sur la page de navigation.

  7. Si nécessaire, modifiez un modèle de mise en page afin d'inclure une carte chargée d’afficher la bannière.

    Par exemple, vous pouvez créer une carte couvrant la largeur de l’appareil, puis créer une règle qui mappe cette carte à toute bannière. Reportez-vous à la page Création de cartes et de mises en page.

Bannières dynamiques

Les bannières dynamiques affichent du contenu HTML sur les pages de navigation.

  • Si vous utilisez plusieurs bannières dynamiques sur une page de navigation, effectuez un test sur les périphériques cible afin de vous assurer que les performances sont fiables. Si le chargement de la page de navigation est trop long ou si vous rencontrez d'autres problèmes, envisagez d'utiliser moins de bannières dynamiques sur la page de navigation.
  • L'utilisation des images de vignettes pour les bannières est facultative. Les images peuvent être utiles si l'utilisateur n'est pas en ligne ou pour un affichage derrière un contenu HTML transparent.
  • Si vous utilisez des plug-ins Cordova dans votre bannière dynamique, assurez-vous de sélectionner l'option Activer les fonctionnalités d'extensibilité dans les propriétés de la bannière dynamique.
  • En référençant le contenu externe dans vos fichiers HTML, il est recommandé d'utiliser le protocole HTTPS au lieu du protocole HTTP. Le lecteur web pour ordinateur requiert les protocoles HTTPS.
  • Vous pouvez utiliser l'élément <video playsinline autoplay> pour lire automatiquement une vidéo dans la bannière dynamique. Si la lecture automatique de la vidéo démarre avant l'affichage de la bannière dans la vue, utilisez JavaScript qui lit la vidéo sur l'événement window.onAppear et met la vidéo en pause sur l'événement window.onDisappear.

 

Vidéo sur les bannières dynamiques

Vidéo sur les bannières dynamiques

Exemple de bannière de droits

Utilisez ce contenu HTML pour créer une bannière dynamique de droits. Si l'utilisateur n'est pas connecté, une invite de connexion apparaît dans la bannière. Si l'utilisateur est connecté, un bouton Se déconnecter apparaît dans la bannière. Lorsque vous créez la bannière dynamique, assurez-vous de sélectionner l'option Activer les fonctionnalités d'extensibilité pour activer les plug-ins Cordova.

Telechargement

Création de bannières dynamiques

  1. Créez votre contenu HTML et générez un fichier d'article.

  2. Sous Contenu et mises en page, cliquez sur Contenu, puis cliquez sur Ajouter > Ajouter une bannière dynamique.

  3. Indiquez un nom de bannière unique au sein du projet.

  4. Spécifiez les métadonnées de la bannière.

    Vous pouvez vouloir ajouter des métadonnées de manière à distinguer la bannière du reste du contenu lorsque vous utilisez des règles de mappage (pour mapper le contenu aux cartes).

    Remarque :

    si votre contenu HTML comporte des références à des plug-ins Cordova, assurez-vous de sélectionner l'option Activer les fonctionnalités d'extensibilité.

  5. Utilisez l'onglet Images pour charger l’image de la bannière.

    L'utilisation d'une image de bannière est facultative. Une image de bannière peut s'avérer utile si l'appareil est hors ligne ou en tant qu'arrière-plan pour un contenu HTML transparent.

  6. Utilisez l'onglet Fichier de contenu pour charger le fichier d'article comportant votre contenu HTML.

  7. Si la bannière dynamique est une publicité, utilisez l'onglet Publicité pour spécifier les informations pour les données d'analyse.

  8. Ajoutez la bannière à une collection. Assurez-vous qu’elle est correctement placée au sein de la collection (en haut, par exemple), de manière à figurer au bon endroit sur la page de navigation.

  9. Si nécessaire, modifiez un modèle de mise en page afin d'inclure une carte chargée d’afficher la bannière.

    Par exemple, vous pouvez créer une carte couvrant la largeur de l’appareil, puis créer une règle qui mappe cette carte à toute bannière. Reportez-vous à la page Création de cartes et de mises en page.

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