Que de choses à dire sur les articles !
C’est en effet l’essentiel du contenu d’un site. Si le texte à proprement dit dépend de l’auteur·e, il y a de nombreux éléments à prendre en compte pour que ces articles soit agréables à lire.
Cet article va justement utiliser quelques-uns de ces éléments. Et tenter de vous apporter aussi quelques astuces.
Voir aussi ce
guide du rédacteur, notamment la partie sur les médias et les traitements à appliquer à vos images, sons et vidéos avant des les ajouter à vos articles.
Même si c’est trivial pour certains, d’autres ne savent pas faire de liens hypertextes dans un article. Voici donc comment procéder.
- les liens externes
- aller d’abord sur le site cible et copier l’adresse URL de ce site
- dans l’article taper un texte "En savoir plus" par exemple et sélectionner ce texte
- cliquer sur l’icône de lien dans la barre d’édition et coller l’URL précédemment copiée
- valider en cliquant sur "OK"
- les liens internes
La démarche est la même sauf qu’on ne copie pas l’URL de la page
- aller sur l’article ou la rubrique cible et notez son numéro
- dans l’article taper un texte "Allez voir ici" par exemple et sélectionner ce texte
- cliquer sur l’icône de lien dans la barre d’édition et indique "artXX" ou rubXX" (XX étant le numéro précédemment noté)
- valider en cliquant sur "OK"
Pour ajouter un texte descriptif qui apparait au survol de la souris, le code sera
[Escal|Escal, c'est de la balle !->https://escal.edu.ac-lyon.fr/spip/]
qui donnera Escal
Agrémenter vos articles d’images est une bonne idée mais attention aux droits de ces images et attention à la taille et au poids de ces images. Voici quelques conseils .
Droit à l'image
Toutes les images sur Internet ne sont pas réutilisables. Certaines le sont à condition de citer leur auteur ou leur site source à minima. Pour trouver de images et logos réutilisables, on peut aller sur des sites dédiés comme par exemple :
et pour trouver des icônes et des logos
On peut aussi demander à Google de ne proposer que des images réutilisables. Pour cela, dans le moteur de recherche, on clique sur "Outils" puis sur "Droits d’usage" et enfin sur "Réutilisation autorisée"
Taille et poids
Une erreur classique est de téléverser une image prise avec un appareil photo directement dans un article sans aucune modification de cette image qui souvent fait plus de 4000px de large et pèse plus de 4Mo.
Il est donc nécessaire de retravailler cette image en amont pour qu’elle ne fasse que 500 ou 600 px de large, voire moins.
Utile aussi de vérifier sa résolution qui ne doit pas dépasser 72 ppp. Au delà, aucun intérêt pour un affichage sur un écran.
Et votre image aura subi une sérieuse cure d’amaigrissement et ne fera plus que 100 à 200 Ko, d’où un gain non négligeable en terme de vitesse d’affichage et de d’occupation de votre espace web.
Des outils
Quels outils pour travailler ses images ? Pas besoin de logiciels hautement performants comme Photoshop ou GIMP. Quelques logiciels plus basiques suffisent amplement comme par exemple :
Et un outil en ligne assez bluffant pour supprimer le fond d’une image pour le remplacer ou le rendre transparent : https://www.remove.bg/fr
Galeries d'images
On peut aussi utiliser des plugins pour afficher des galeries d’images :
Vous voulez mettre du texte en évidence pour que vos lecteurs ne le ratent pas ? Escal a pensé à vous !
Le gras et l’italique sont déjà 2 façons de mettre du texte en évidence mais parfois, on en voudrait plus.
Le plugin Enluminures Typographiques permet (entre autres) de mettre du texte en couleur. Seulement 2 couleurs sont proposées, ce qui est une bonne chose car cela évite les articles "sapin de Noël" dont certains auteur·e·s raffolent ...
Escal va plus loin en proposant 4 raccourcis permettant de mettre un texte en évidence.
Voir ici pour plus de détails.
Un article long peut rebuter certains de vos lecteurs. Voici quelques astuces pour ne pas les perdre.
Quelques plugins permettent des améliorations notables de la présentation d’articles longs comme celui que vous êtes en train de lire :
- le plugin Sommaire automatique dans "Améliorations des textes" qui va donc ajouter un sommaire en haut de chaque article. Ce sommaire est construit à partir des intertitres de votre article.
- le plugin Des blocs dépliables dans "Raccourcis typographiques" qui permet de créer des blocs dont le titre cliquable peut les rendre visibles ou invisibles, comme les différentes parties de cet article
- le plugin Onglets dans le texte dans "Raccourcis typographiques" qui permet de créer un bloc avec des onglets comme dans la partie "Les images" de cet article
L’activation de ces 2 derniers plugins fait apparaître des icônes dans la barre d’édition des articles, vous permettant d’utiliser simplement ces raccourcis typographiques.
NB : Escal a retravaillé pour vous le rendu graphique de ces 2 plugins
En plus des images, on peut vouloir enrichir son article d’une vidéo ou d’un autre contenu. On peut parfois l’insérer comme une image mais on peut aussi vouloir préserver son espace web. Voici comment intégrer un contenu distant sans surcharger son site.
Un certain nombre de sites proposent d’intégrer du contenu dans vos articles tout en laissant ce contenu sur ce site distant. Il fournit donc un code commençant le plus souvent par <iframe ... que l’on peut copier-coller dans son article.
Quelques exemples :
- Peertube dela DANE de Lyon : on récupère le code en faisant un clic droit sur la vidéo puis en choisissant "Copier le code d’intégration"
Mais aussi :
- Dailymotion : on récupère le code en cliquant sur "Partager"
- Vimeo : on récupère le code en cliquant sur "Partager"
- Youtube : on récupère le code en cliquant sur "Partager" puis "Intégrer"
- OpenStreetMap : sur le site https://umap.openstreetmap.fr/fr/ on peut créer ses propres cartes avec marqueurs. On récupère ensuite le code en cliquant sur l’icône "Partager" (nécessite de se créer un code)
- Géoportail : on récupère le code en cliquant sur l’icône "Partage" en haut à droite
- GoogleMaps : on récupère le code en déroulant le menu puis en cliquant sur "Partager ou intégrer la carte" puis sur "Intégrer"
- Genially : on récupère le code en cliquant sur le menu à droite de "Présenter" puis "Partager" puis "Insérer"
- Framindmap : on récupère le code en cliquant sur l’icône "Publier" puis en cochant "Activer le partage". Ne pas oublier de cliquer sur "Accepter". (je conseille de mettre 100% pour le width au lieu d’une largeur en px)
- LearningApps : le code est visible sur la page de l’exercice
- Calaméo : on récupère le code en cliquant sur "Intégrer" puis en cochant "HTML". Options possibles pour personnaliser le rendu.
Un test dans cet article
- Digipad : on récupère le code en cliquant sur l’icône de paramètres du Pad.
- France Culture : on récupère le code en cliquant sur le bouton "Exporter"
- Spotify : on récupère le code en cliquant "share" puis "Embed"
- Soundcloud : on récupère le code en cliquant "share" puis "Embed"
Nhésitez pas à m’en proposer d’autres !
La colonne réservée à l’affichage des articles vous parait trop étroite pour certains articles ? Pas de souci, Escal prévoit d’afficher certains articles en pleine page, sans les colonnes latérales.
C’est très simple : il suffit d’ajouter le mot-clé pleinepage du groupe "affichage" à votre article et Escal se charge du reste.
Attention néanmoins aux textes trop larges qui peuvent devenir difficiles à lire. Une ligne devrait idéalement contenir une quinzaine de mots maximum.
Vous avez déjà le contenu d’un article dans un fichier LibreOffice avec ses intertitres, ses images et/ou vous n’avez pas envie de vous casser la tête à construire un tableau un peu sophistiqué dans SPIP ? Voilà une solution.
Il vous faut d’abord installer et activer le plugin odt2spip qui va vous permettre de créer un article reprenant tous les éléments de votre fichier .odt : titres, paragraphes, listes, images, tableaux, ...
Voir un exemple ici
Le plugin pdf.js permet d’afficher un lecteur de pdf assez complet dans votre article
Ce puissant plugin permet de mettre en forme le texte des articles avec des blocs
De nombreuses possibilités de présentation.
- 10 blocs
- 8 multi colonnes
- 12 ensembles de blocs et/ou colonnes prêts à l’emploi
- 186 icônes
- 5 boutons
Les blocs et les colonnes sont "responsives".
Tout est expliqué dans cet article
Ce plugin offre 15 widgets à ajouter dans le texte des articles.
Pour afficher un fil tweeter, un graphique dynamique, une infographie, un flux RSS, une vidéo en streaming, ...
Plus de détails dans cet article
Avec tout cela vos articles seront maintenant aussi beaux qu’intéressants !
