Les actions par utilisations

Je sais qu'il est facile pour un rédacteur de se perdre dans les 150 actions proposées par UP version 5.1.

Dans cet article, je vais essayer de les regrouper par fonctionnalités et utilisations, en privilégiant celles que l'on utilise (ou que l'on devrait utiliser) le plus souvent.

La première version de UP date de septembre 2017. En (presque) 8 ans, certaines actions ont été supplantées par d'autres.
Ce document sera l'occasion de faire le point.

Il existe un autre document indispensable pour comprendre les subtilités de UP, c'est l'aide-mémoire rédacteur.

L'omniprésence des smartphones et tablettes nous oblige à penser responsive lors de la mise en page de nos articles et contenus.

Les trois actions que j'utilise le plus concernent la gestion horizontale (colonnes) du contenu.

  • flexAuto est une grille responsive sur plusieurs colonnes de même largeur
  • flexbox qui permet de choisir les largeurs des colonnes. La hauteur des blocs est identique sur une même ligne.
  • masonry emboite des blocs de hauteurs différentes sur un nombre de colonnes variant selon la largeur de l'écran.

pour concevoir un bloc de contenu

  • cell, une des premières actions de UP, est utile pour définir la largeur des colonnes selon la taille de l'écran en restant sur une seule ligne.
  • center centre tous les blocs enfants en supprimant les margins superflus 
  • sameheight égalise la hauteur des enfants directs du bloc (p ou div)
  • box affiche une boite avec un tite, sous-titre, image, contenu et action

Pour gagner de la place sur la page

  • faq répartit les données dans un accordéon 
  • tab affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite. 
  • readmore permet de cacher un bloc HTML qui sera accessible à l'aide d'un bouton 'lire la suite'

Il est souvent nécessaire de passer en mode code pour ajouter des balises et définir leurs attributs.

Ce qui entraine ces inconvénients :

  • les modifications sont invisibles lors d'une relecture. Il faut repasser en mode code pour les voir
  • un éditeur mal paramétré ou un rédacteur avec moins de droits peut faire un ménage à postériori
  • l'éditeur risque d'ajouter des classes et des styles à votre insu. Combien de temps ai-je avec cela sous tinyMCE ! 
  • div et span vont ajouter les balises HTML de même nom pour faciliter la saisie des classes et styles.
  • attr ajoute des attributs à la première balise trouvée entre ses shortcodes.
  • html crée une entité HTML (balise) avec ses classes, style et attribut sans passer en mode code
  • iframe permet d'introduire une iframe responsive dans un article
  • link affiche un lien vers une URL, un numéro de téléphone ou un mail
  • bbcode pour saisir du code HTML sans quitter l'éditeur WYSIWYG

Souvent nous chargeons des ressources de façon permanente alors qu'elle ne seront utilisées que par un article.
Pour économiser du temps et de la bande passante, pensez à ces actions.

  • addcodehead ajoute du code libre dans le head.
  • addcsshead ajoute du code ou fichier CSS dans le head.
  • addfilehead Ajoute des fichiers JS ou CSS dans le head
  • addscript ajoute du code ou un fichier JS ou JQuery
  • addcsshead ajoute du code ou fichier CSS dans le head.
  • addclass permet d'ajouter une classe à un sélecteur CSS ou un de ses ancétres. Indispensable pour modifier un bloc parent.
  • color retourne la valeur d'une couleur de la feuille de style de UP

La plupart des actions proposent une option css-head qui permet définir un style qui cible uniquement cette instance de l'action. 

UP veut simplifier la tâche des rédacteurs de contenu en leur offrant une approche identique et simplifiée pour répondre à beaucoup de leurs besoins.
 

  • hr affiche un trait horizontal avec une icône et/ou du texte
  • icon uniformise l'appel des icônes. Evite de passer en mode code pour la saisie
  • listup Personnaliser des listes simples et ordonnées
  • treeview Affiche une liste sous forme d'un arbre (treeview)

Pour alléger visuellement une page, vous pouvez utiliser ces actions qui masquent une partie du contenu

  • tooltip des info-bulles au survol d'un élément
  • popover affiche une grosse info-bulle lors d'un clic sur un élément.
  • readmore afficher/cacher un bloc HTML à l'aide d'un bouton 'lire la suite'
  • ajax-view affiche un bouton pour charger le contenu d'un article ou un fichier
  • modal affiche du contenu dans une fenêtre modale (popup)

Proposer des nouveautés ou des informations

  • marquee du contenu HTML défilant horizontalement ou verticalement
  • scroller défilement vertical d'une liste d'éléments

La gestion des polices 

  • googlefont ajoute une police GoogleFont, ainsi que la classe pour l'utiliser
  • text-fit permet d'ajuster la taille de la police d'un texte à son conteneur parent. Très pratique pour faire tenir un titre sur une ligne.

Pour les contenus fréquents

  • snippet pour créer et charger des petits fichiers texte. HTML autorisé
  • jcontent-in-content Affiche le contenu d'un article dans un autre

Pour internationaliser votre contenu

  • lang retourne du contenu (texte, image) selon la langue du visiteur

Pour vous souvenir d'une info importante ou cacher temporairement du contenu

  • note ajoute des commentaires visibles dans un éditeur WYSIWYG et pas sur le site

Avec l'arrivée des smartphones, l'utilisation des tableaux est devenue une horreur sans ces actions.
 

  • table-by-columns rend la table responsive par empilement des lignes d'une colonne.
  • table-by-rows table responsive par empilement des colonnes par lignes.
  • table-fixe table responsive: la ligne d'entête reste visible
  • table-flip table responsive par permutation lignes/colonnes

Si vous souhaitez ajouter des fonctions de tri et de filtrage à vos tableaux

  • table-sort pour trier, filtrer et paginer une table 

Plutôt que la saisie fastidieuse dans un article, importez vos données

  • csv2table pour saisir ou importer du contenu au format CSV dans une table
  • data2table affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'un tableau
  • sql Requête SQL avec présentation dans une table avec  tri

Une des actions du TOP10 pour afficher une galerie avec les images contenues dans un dossier
 

Pour présenter quelques images défilantes en appui de votre contenu

  • slider-owl bandeau défilant d'images ou de blocs HTML
  • slider-tiny description de l'action. La 1ère ligne d'en-tête du script 
  • slideshow-billboard Slideshow responsive d'images avec légendes et liens

Une image avec des zones cliquables 

  • imagemap une image cliquable et responsive

Pour voir une image en relief

  • image-pannellum Affiche un panorama 3D à partir d'une image equirectangular

Quelques actions pour des effets sur les images

  • image-compare comparaison de 2 images par déplacement d'un volet
  • image-hover superpose un contenu HTML sur une image avec des effets lors du survol
  • image-logo ajoute une image ou un texte sur une image
  • image-magnify affiche un effet de loupe sur une image
  • image-random affiche aléatoirement une des images d'un dossier
  • image-rollover change l'image au survol
  • image-secure affiche une image de manière à compliquer sa récupération

Des lecteurs audio-vidéo en pur HTML

  • media-audio affiche un lecteur (HTML5) pour un ou des fichiers audio hébergés sur le serveur
  • media-video affiche une vidéo locale en HTML5

Des variantes

  • media-plyr affiche un lecteur vidéo ou audio qui s'inscrit au maxima dans son bloc parent
  • media-vimeo affiche une vidéo Viméo qui s'inscrit au maxima dans son bloc parent
  • media-youtube affiche une vidéo Youtube qui s'inscrit au maxima dans son bloc parent

Un gadget bien utile dans certains cas

  • sound-hover joue un son au survol d'un élément ou d'un événement JS
  • pdf affiche un PDF dans le contenu ou génère un bouton pour l'afficher dans une fenêtre
  • pdf-gallery la liste des PDF contenus dans un dossier
  • file-download est un gestionnaire simple de téléchargements avec stats et protection par mot de passe
  • file force le téléchargement d'un fichier
  • file-explorer permets d'explorer un dossier et ses sous-dossiers avec prévisualisation et téléchargement.
  • folder-list retourne la liste mise en forme du contenu d'un dossier sur le serveur
  • file-office-view affiche un fichier MS Office (word, excel, powerpoint)
  • file-in-content utilise tous les fichiers d'un dossier pour construire un article
  • file-view Force le chargement d'un fichier pour l'afficher en brut
  • markdown Affiche du contenu MARKDOWN provenant d'un fichier ou saisi entre les shortcodes
  • ajax-view affiche un bouton pour charger le contenu d'un article ou un fichier. Possibilité de demander un mot de passe.
  • popup ouvrent une fenêtre après un délai ou une position dans la page
  • gotop affiche un bouton avec indicateur de position pour revenir en haut de page.
  • scroll-indicator affiche la position dans la page dans un cercle autour du curseur
  • page-search cherche un mot dans la page courante
  • printer ajoute un bouton pour proposer l'impression d'une partie de la page. Idéal pour remplacer ce bouton dans les dernières versions de Joomla!
  • anim-aos affiche du contenu avec des animations lors du défilement de la page
  • text-blink attire l'attention en faisant clignoter un texte
  • text-typewriter affiche plusieurs phrases avec un effet machine à écrire
  • modal affiche du contenu dans une fenêtre modale (popup)
  • marquee du contenu HTML défilant horizontalement ou verticalement
  • scroller défilement vertical d'une liste d'éléments

Pour le prototype d'un site, il est utile d'avoir du texte et des images de remplissage

  • csv2def Conversion d'un contenu au format CSV en liste de définition (DL/DT/DD)
  • csv2list Conversion d'un contenu au format CSV en liste avec point de conduite
  • csv2table Conversion d'un contenu au format CSV en table
  • csv-info retourne la valeur brute d'un élément (ligne/colonne) d'un fichier CSV 
  • data2list affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'une liste
  • data2table affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'un tableau
  • data-info retourne des champs d'une source de données selon un template de mise en forme
  • php permet d'exécuter du code PHP dans un article.
  • php-error active les rapports d'erreurs PHP. Très pratique pour élever ponctuellement le niveau d'alerte
  • sql Requête SQL avec mise en forme et tri

Un menu pour aller vers les sections de votre article

  • toc sommaire automatique

Un menu minimaliste pour se déplacer dans un article

Un menu graphique

  • imagemap une image cliquable et responsive

Pour accompagner un lien vers un site

  • website affiche un screenshot d'un site avec un lien.
  • website-preview affiche une prévisualisation du site au survol d'un lien

Proposer des nouveautés ou des informations

  • marquee du contenu HTML défilant horizontalement ou verticalement
  • scroller défilement vertical d'une liste d'éléments

Ces actions permettent d'animer votre site en ajoutant un fond de page, une information dans l'angle de la page. Celles-ci peuvent être limitées à une période. 

  • bg-image une image comme fond de site ou d'un bloc
  • bg-slideshow une série d'images défilantes en fond du site ou d'un bloc
  • bg-video une vidéo locale ou youtube en fond de site ou dans un bloc
  • corner affiche un texte sur ruban dans un angle de la page
  • snowfall pour simuler des chutes de neige ou autres pour des événements
  • tabslide ajoute des onglets pour ouvrir un panneau sur les bords de la fenêtre
  • osmap affiche une carte OpenStreetMap avec des marqueurs
  • gmap affiche une carte google pour une adresse
  • mapael affiche une carte vectorielle interactive
  • chart des graphiques statistiques avec GoogleChart
  • chart-org affiche l'organigramme d'une organisation
  • mapael des données une carte vectorielle interactive
  • barcode création de code à barres à partir de la librairie TCPDF. 
  • qrcode génère des QRCodes avec Google API
  • countdown un compte à rebours ou une horloge digitale
  • countdown-simple un compte à rebours simple et facilement adaptable par CSS
  • counter un compteur avec préfixe et suffixe
  • clocks-gmt une horloge analogique et/ou digitale avec l'heure d'un fuseau horaire
  • date calcule et retourne une date avec ou sans mise en forme
  • meteo-concept les prévisions météo pour à date donnée pour une ville FRANCAISE
  • meteo-france affiche le widget de Météo France

Quelques actions ont pour but de fournir des listes de liens vers des articles

  • jcontent-by-categories, une action du TOP10, liste les articles d'une ou plusieurs catégories
  • jcontent-by-subcat, les articles classés par catégories et sous-catégories avec un treeview optionnel.
  • jcontent-by-tags liste des articles avec un mot-clé (tag)
  • jcategories-by-tags liste des catégories d'un mot-clé (tag)
  • jcontent-in-content Affiche le contenu d'un article dans un autre
  • jcontent-info affiche des informations sur l'article courant
  • jcontent-list, l'ancêtre de jcontent-by-categories, est conservée pour les anciens utilisateurs. elle liste des articles d'une catégorie
  • field retourne la valeur d'un custom field pour le contenu courant
  • jcat-image affiche une image en rapport avec la catégorie de l'article courant
  • filter affiche le contenu si toutes les conditions sont remplies (date, utilisateur, …)
  • cache-cleaner efface les fichiers du cache pour un besoin ponctuel
  • random sélectionne une ou plusieurs valeurs dans une liste ou un dossier
  • replace subtitue un texte par un autre dans le contenu entre ses shortcodes. Pratique pour du contenu généré par UP
  • donation formulaire de donation avec Paypal
  • kawa sert un café virtuel. Parce que UP sait tout faire même le café ?

Certaines actions servent quasi-exclusivement pour Créer le dossier technique du site 

Référencement et fréquentation

  • jcontent-metadata pour contrôle des métadonnées des articles d'une ou plusieurs catégories
  • jmenus-metadata les metadatas des menus et articles dépendants. Très pratique pour contrôler les statuts robots, les dates de publication et mise en vedette, la longueur des titres, ...
  • sitemap Création d'un fichier 'sitemap.xml' en racine du site
  • site-stat comptabilise le nombre d'appel de cette action et affiche le nombre de visite
  • site-visit ancienne version de site-stat conservée pour les anciens utilisateurs

Quelques actions sont réservées au webmaster pour la maintenance de son plugin préféré

  • upactionslist liste des actions de UP avec infos et paramètres. Un moyen, avec l'option ? dans le shortcode, d'avoir la documentation des actions avec vos prefsets facilement accessible. 
  • upprefset affiche la liste de tous les prefsets de UP pour le site et permet leurs exportations vers un autre site
  • upscsscompiler recompile tous les fichiers SCSS présents dans les dossiers des actions
  • upsearch recherche une action dans le contenu des articles et/ou modules
  • upbtn-makefile créé les fichiers HTML pour le plugin editors-xtd avec vos prefsets, vos conseils aux rédacteurs et actions préférées
Détails