Tutoriel | Créer un bandeau d'info défilant "Le Monde" (communication)

Pingview Tutoriels & astuces
1

Tutoriel | Créer un bandeau d’info défilant « Le Monde »

:hourglass: Temps nécessaire : 7-15 min
:thermometer: Niveau de difficulté : 2/5
:penguin: Sources de données nécessaires : 1

Résultat souhaité :

bandeau-defilant (7)

image

1. Créez une nouvelle source « Webservice »

  • Nom : Le Monde
  • URL : https://www.lemonde.fr/rss/une.xml
  • Méthode HTTP : GET
  • Format des données de sortie : XML
  • Cliquez sur « Tester »

Retrouvez les URL d’autres thématiques « Le Monde » : https://www.lemonde.fr/actualite-medias/article/2019/08/12/les-flux-rss-du-monde-fr_5498778_3236.html (copiez/collez l’URL terminant par .xml)

2. Connectez les champs de la source

  • Cliquez sur le + à gauche du 1, puis sur le + à gauche de rss, puis sur le à gauche de channel. Identifiez l’élément « item »

image
image795×389 33.3 KB

  • C’est cet élément qui contient les informations que nous souhaitons : cliquez sur la flèche qui permet d’ancrer l’élément
  • Cliquez sur le +1
  • Sélectionnez les colonnes : « link », « pubDate », « title »
  • Dépliez aussi l’élément « content » puis sélectionnez aussi la colonne « url »

image
image778×356 35.1 KB

  • Cliquez sur « Sauvegarder »
  • Si vous ne voyez plus les données lors de la sauvegarde, cliquez une fois sur la source « Le Monde » à gauche, puis à nouveau une fois sur « Sauvegarder » (bug en cours de résolution)

image

3. Déposez-glissez les widgets

  • 1 widget image
  • 2 widgets texte
  • 1 widget date
  • 1 widget QR code

4. Dans un widget texte, connectez le champ « title»

Saisie libre (plus rapide) : Copiez-collez : {{Le Monde:1:title}}

Pensez à modifier Le Monde par le nom exact de votre source, ou passez par la saisie assistée pour vous aider.

image
image1015×268 95.5 KB

5. Dans l’autre widget texte, écrivez « Scannez le QR code pour lire l’article depuis votre smartphone / tablette »

6. Dans le widget image, connectez le champ « url »

Saisie libre (plus rapide) : Copiez-collez : {{Le Monde:1:content/url}}

Pensez à modifier Le Monde par le nom exact de votre source, ou passez par la saisie assistée pour vous aider.

image
image1008×262 97.7 KB

6. Dans le widget date, connectez le champ « pubDate »

  • Supprimez le format d’entrée déjà écrit
    image
  • Dans les paramètres, ajustez le format de sortie à votre convenance (ou allez à la prochaine étape)
  • Format d’affichage : cliquez sur « Format personnalisé » puis : copiez-collez : LL à HH[h]mm
    image

7. Dans le widget QR Code, connectez le champ « link »

Saisie libre (plus rapide) : Copiez-collez : {{Le Monde:1:link}}

image
image1005×204 88.7 KB

Pensez à modifier Le Monde par le nom exact de votre source, ou passez par la saisie assistée pour vous aider.

8. Déposez-glissez 1 widget répétition

  • Ajustez-le de sorte que le rectangle soit un peu plus grand que l’ensemble de votre création
  • Cliquez sur le cadenas
  • Glissez vos éléments à l’intérieur ; pour cela, sélectionnez tous les éléments en une seule fois à l’aide de la touche « Maj » puis déplacez-les dans le rectangle du widget répétition

bandeau-defilant-tuto (1)

9. Dans les paramètres (bouton « roue crantée ») du widget répétition, ajustez les réglages d’affichage

  • Direction : Horizontale
  • Défilement : Tout
  • Ligne (nombre de lignes affichées) : 2
  • Vitesse de défilement : 6 (fera défiler les articles toutes les 6 secondes)

9. Dans les propriétés de style (bouton « pinceau ») du widget répétition, ajustez les réglages

  • Couleur : Rendez la couleur par défaut 100% transparente

bandeau-defilant-tuto2

Bravo !