Introduction à la rédaction

Le contexte de base pour écrire un article.

Pour le rédacteur d’un site sous SPIP, il est très simple de publier un article (ou autre document, photo, image...) sur le site. Il n’a pas besoin d’apprendre un code de programmation complexe, d’utiliser un éditeur de site web, ou un logiciel externe à SPIP.
La publication sur un site géré par SPIP se fait au travers d’un navigateur web (Firefox, Chrome, Edge, etc.), comme celui qui est utilisé pour visiter les autres sites Internet.
En arrivant sur le site, il rentre dans le back-office avec ses codes d’accès. Puis en naviguant dans cette interface, il va pouvoir demander la publication des articles dans des rubriques créées par les administrateurs du site ^[1].

Il faudra bien sûr que le rédacteur apprenne à se servir de l’interface de rédaction, mais elle est très intuitive ^[2]. Elle est également très bien documentée : des bulles d’information donnent la fonction des différents boutons. Et après un court temps d’adaptation et d’apprentissage, l’utilisation de SPIP s’avère être "un jeu d’enfant" pour faire "un travail professionnel".

Il faut aussi changer sa manière de voir la rédaction d’un texte.

• Lorsqu’on écrit un texte manuscrit, il faut bien sur écrire un texte qui se tienne mais aussi gérer l’orthographe, la présentation (pagination, souligné, paragraphe, etc.) : on imprime en même temps qu’on écrit ! Pendant qu’on écrit on peut imaginer le rendu final à atteindre.
• Lorsqu’on utilise un éditeur de texte, pour écrire une lettre par exemple, le rédacteur s’attache au contenu d’abord, à la signification, à ce qu’il veut dire. Puis vient la phase de mise en page ou il introduit la présentation (pagination, souligné, paragraphe, etc.) pour obtenir une vision de son texte. L’impression lui donne un rendu final. Ici, l’écriture et la mise en forme sont séparées : c’est au moment de la mise en page qu’on imagine l’apparence du document. La plupart d’entre-vous ont aujourd’hui (souvent inconsciemment) atteint ce niveau.
• Lorsqu’on écrit un article sur un site Internet, c’est encore différent. Certes, tout se passe comme lorsqu’on utilise un éditeur de texte. Là où le changement est radical, c’est que le rendu final n’est pas figé, il y en a autant que de lecteur et il faut impérativement en tenir compte :
  • la taille de l’écran modifie considérablement l’apparence de l’article ^[3] ;
  • la police de caractère utilisée dans l’article peut être remplacée par une de substitution si elle n’existe pas sur l’appareil de lecture ;
  • les capacités d’affichage sont totalement différentes d’un appareil à un autre (imprimante, ordinateur portable, smartphone, etc.).

Dans tout le site, l’affichage d’une page correspond généralement à l’affichage d’une rubrique. La structure de la page est toujours la même :

1. une en-tête (avec le logo de l’informatidien) ;
2. un menu de navigation dans les rubriques racines (secteurs) ;
3. le pavé de la rubrique (titre, descriptif, menu des sous rubriques, texte, liste des articles de la rubrique) ;
4. les articles, les uns à la suite des autres dans l’ordre voulu par l’administrateur.

Cette structuration d’affichage des rubriques et des articles donne au site une certaine homogénéité qui autorise la publication d’article par des auteurs différents. Aux auteurs ensuite de garder la même philosophie et de faire apparaitre les éléments sous la même structure ^[4]. Cette homogénéité facilite la lecture, les comparaisons, la compréhension du lecteur même puisque la logique est toujours la même.

Synopsis d’écriture d’un article

Guide global de rédaction

Pour écrire un article, il faut préalablement se positionner sur la rubrique à laquelle cet article va être rattaché ^[1].

Puis cliquer sur le bouton, en bas, à gauche, Écrire un nouvel article.

Dans la page d’édition de l’article, remplissez les différents champs :

• titre ^[2] ;
• descriptif ^[3] ;
• texte.

À tout moment, il est possible de cliquer sur le bouton, en bas, à droite, Enregistrer pour sauvegarder l’article qui reste dans l’état En cours de rédaction. Il faut ensuite cliquer sur le bouton Modifier cet article, en haut ou en bas, à droite pour venir l’enrichir. Tant qu’on ne demande pas sa publication, passage dans l’état Proposé à l’évaluation, un article peut être rédigé en plusieurs fois en venant le compléter plus tard ^[4].

Lorsque l’article est terminé, il faut le passer à l’état Proposé à l’évaluation en choisissant cet état dans l’encadré en haut à gauche. Puis en cliquant sur le bouton Changer ^[5]. Une autre possibilité consiste à cliquer sur le bouton Demander la publication de cet article.

Les articles suivants détaillent chacune de ces phases.

Documentation

• Premier article

Titre de l’article

Le titre est obligatoire

Le titre est la seule zone qui soit obligatoire dans un article.
Le titre est constitué de deux zones :

1. La première zone est optionnelle et est constituée, d’un nombre quelconque, suivi de la chaine de caractère ". " (point suivi d’un espace) ;
2. La seconde est obligatoire et représente le titre effectif de l’article.

La première zone permet au webmestre de trier les articles d’une rubrique pour les afficher dans un ordre voulu et logique par rapport à leur contenu. Et cet ordre n’est pas forcément celui de création des articles qui est naturellement retenu.

La seconde zone est le titre de l’article comme on l’entend trivialement ^[1].

Le titre est modifiable par le rédacteur tant qu’il n’a pas été soumis à publication. Il peut ensuite être modifié par l’administrateur.

Le descriptif de l’article

Descriptif rapide

Le descriptif vient en complément du titre de l’article pour en préciser le sens.

Contrairement au texte, il ne donne pas accès directement aux raccourcis typographiques de SPIP mais ils sont acceptés et interprétés sur le site public. Si le besoin s’en fait sentir, il est possible de rédiger le descriptif dans la partie texte, d’utiliser les outils typographiques puis de procéder par copier/coller pour documenter le descriptif.

Le descriptif est modifiable par le rédacteur tant qu’il n’a pas été soumis à publication. Il peut ensuite être modifié par l’administrateur.

Rédaction du texte

Les outils directement accessibles

Les articles SPIP sont affichés dans le langage des pages web : le HTML , ce qui présente quelques particularités et limitations. On évite le soulignement,les effets de tabulations, de marges sont ignorés, et les espaces blancs multiples ne sont pas pris en compte.

 
Comme tous les éditeurs de texte élaboré, SPIP propose :

• une correction orthographique classique (le mot est souligné en rouge, un clic droit sur le mot et SPIP propose des solutions) ;
• des mises en forme du texte (titre interne ^[1], gras, italique, liste) ;
• la possibilité d’insérer :
  • des liens hypertextes ;
  • des notes de bas de page ;
  • des citations ;
  • des guillemets ;
  • les caractères absents du clavier français ;
  • des zones non formatées par SPIP ;
  • etc.

L’insertion des espaces insécables est automatique, comme dans Word ou Writer, pour les caractères où c’est obligatoire en français (voir documentation). Toutefois, le fonctionnement diffère de celui de Word et Writer : l’espace insécable n’est pas ajouté en temps réel mais au moment de l’affichage dans l’espace public.

SPIP ne propose pas d’éditeur WYSIWYG qui permette, comme dans un traitement de texte, au rédacteur de choisir sa police, sa taille, etc. Il s’agit de préserver une cohérence entre tous les articles. Comme dans un journal papier, les articles ne changent pas de police ou de couleur d’un article à l’autre. SPIP préserve ainsi le texte pour optimiser :

• sa présentation (on peut l’afficher au mieux depuis un grand écran ou un portable),
• sa diffusion (moteur de recherche, flux, ...),
• sa pérennité (on peut changer les couleurs,le design du site sans reprendre tout le contenu).

Documentation

• Écrire un texte
• Ce clavier manque de caractères
• Insérer les caractères absents du clavier
• Les raccourcis SPIP

Les tableaux

Insérer des tableaux dans le texte

Création d’un tableau

Exemple simple

Les tableaux sont créés dans SPIP de la façon suivante :

||Légende du Tableau|Résumé du Tableau||
| {{Nom}} | {{Date de naissance}} | {{Ville}} |
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Nice |
| Marie | 23/12/1948 | Perpignan |

ce qui produit cet affichage :

Création d’un tableau

Exemple plus complexe

||Taille et bordure des logos des productions BIG|Tableau récapitulant les tailles qui doivent être
employées pour logos des articles et sites placées en Une du site BIG||
| {{type d'article}} | {{taille horizontale}} | {{taille verticale}} | {{type de bordure}} |
| Article pédagogique | 130px | 57px | si fond blanc, tracez un cadre noir autour |
| Images du mois | 280px | 210px | ne rajoutez pas de cadre, c’est automatique |
| Événements du mois | 280px | 120px | si fond blanc, tracez un cadre noir autour |
| Sites coup de cœur | 280px | 100px | ne rajoutez pas de cadre, c’est automatique |
| Analyse de produit | 300px | 300px | si fond blanc, tracez un cadre noir autour|

Ce qui donne :

Fusionner des cellules

Cellules de la même ligne

Il est possible de fusionner des cellules. Les deux colonnes identiques de la dernière ligne « 300px » par exemple. Pour cela, il faut utiliser le caractère « < » à la place du contenu de la deuxième cellule.

||Taille et bordure des logos des productions BIG|Tableau récapitulant les tailles qui doivent être
employées pour logos des articles et sites placées en Une du site BIG||
| {{type d'article}} | {{taille horizontale}} | {{taille verticale}} | {{type de bordure}} |
| Article pédagogique | 130px | 57px | si fond blanc, tracez un cadre noir autour |
| Images du mois | 280px | 210px | ne rajoutez pas de cadre, c’est automatique |
| Événements du mois | 280px | 120px | si fond blanc, tracez un cadre noir autour |
| Sites coup de cœur | 280px | 100px | ne rajoutez pas de cadre, c’est automatique |
| Analyse de produit | 300px | < | si fond blanc, tracez un cadre noir autour|

Ce qui donne :

Fusionner des cellules

Cellules de la même colonne

Il est possible de fusionner des cellules. Les trois lignes identiques « 280px » par exemple. Pour cela, il faut utiliser le caractère « ^ » (AltGr 9) à la place du contenu des deux cellules suivantes.

||Taille et bordure des logos des productions BIG|Tableau récapitulant les tailles qui doivent être
employées pour logos des articles et sites placées en Une du site BIG||
| {{type d'article}} | {{taille horizontale}} | {{taille verticale}} | {{type de bordure}} |
| Article pédagogique | 130px | 57px | si fond blanc, tracez un cadre noir autour |
| Images du mois | 280px | 210px | ne rajoutez pas de cadre, c’est automatique |
| Événements du mois | ^ | 120px | si fond blanc, tracez un cadre noir autour |
| Sites coup de cœur | ^ | 100px | ne rajoutez pas de cadre, c’est automatique |
| Analyse de produit | 300px | 300px | si fond blanc, tracez un cadre noir autour|

Ce qui donne :

Documentation

• Pour des informations plus techniques : Voir

Insérer des éléments extérieurs

Incorporer des documents, des images, des fichiers...

SPIP peut enregistrer des illustrations affichés au sein des textes d’articles, ou des documents joints qui seront téléchargeables par les visiteurs.

Préparer les documents à télécharger

Il est important de préparer les documents sur l’ordinateur avant de les publier. Voici quelques points à vérifier :

• Le poids du document : ne pas dépasser les 5 Mo, pour des fichiers multimédia, insérer un lien vers un stockage distant. Pour les images, la résolution doit être de 72 dpi en mode RVB (Rouge Vert Bleu). L’affichage réduira votre image dans les limites de l’écran, perdant en « piqué » : peu d’écrans peuvent afficher en totalité une photo courante de smartphone (largeur limitée à 2000 pixels) et le design Web impose souvent une réduction à l’affichage (ralentissant le chargement de la page).
• Le type du document : utiliser des formats de fichiers reconnus par tous les internautes (pdf, txt, zip, rtf, etc.) et donc, éviter tout fichier de type potentiellement dangereux ou propriétaire (docx, exe, php, js, etc.). Pour les images, choisir les types de format web : jpg (photos), png ou gif (logos, dessins), svg (vectoriel) & maintenant webp est à privilégier. Les types inconnus de SPIP seront archivés en zip à l’enregistrement.

Ajouter les documents

Il est possible d’ajouter des documents depuis :

• l’ordinateur (fichiers du disque dur) ;
• la médiathèque (fichiers déjà présents sur le site du Club) ;
• internet (URL de fichiers placés sur internet sur des services externes de type : YouTube, Vimeo, Dailymotion, etc.)

 
Pour ajouter un document, au lieu d’aller chercher sur l’ordinateur, il est possible de le sélectionner (par son numéro) depuis la médiathèque qui répertorie tous les documents référencés sur le site du Club. Ceci permet d’éviter d’ajouter plusieurs fois un document commun à plusieurs articles. Mais aussi facilite les mises à jour du document puisque c’est le même qui est référencé partout.

 
Le besoin d’utiliser des documents depuis internet ne s’est jamais fait sentir : cette fonction n’a pas été testée.

 
Sur la page Web affichant l’article enregistré, les documents seront ajoutés sous le texte, avec la description fournie.

Les fichiers images

Les images (<doc393> dans l’exemple) sont habituellement insérée dans le texte de l’article.

• Position par défaut :

  

  <doc393> sans attribut - L’image se place dans le fil du texte, comme une lettre ;

• Position à gauche :

  

  <doc393|left> - L’image se place à gauche en début de la ligne, et le fil du texte continue sur sa droite jusqu’à descendre en-dessous de l’image en hauteur ;

• Position centrée :

  

  <doc393|center> - L’image se place au centre sur une nouvelle ligne, prenant toute la largeur, et le texte passe à la ligne ;

• Position à droite :

  

  <doc393|right> - L’image se place à droite et le fil du texte continue sur sa gauche jusqu’à dépasser l’image en hauteur par en-dessous.

Lors de l’ajout du document, le raccourci choisi devrait préciser le positionnement du texte autour de l’objet. Visiblement, il n’en est rien. Le besoin de mettre des images dans le texte ne s’étant pas fait sentir, cette fonction n’a pas été mise au point pour le site du Club.

Les fichiers texte

Les fichiers qui ne sont pas des images sont accessibles via un lien hypertexte :

• [Insérer les caractères absents du clavier->doc400]

Devient :

• Insérer les caractères absents du clavier

Documentation

• Ajouter des images à un article

La médiathèque

Gestion des documents

Rédaction à l’étude.

Les ancres

Des marque-pages

Les ancres sont des repères invisibles que l’on peut placer dans un texte. Elles permettent d’accéder directement à une zone précise dans une page, ce qui peut s’avérer pratique pour renvoyer les internautes vers un paragraphe dans une page très longue.

Nommer une ancre

Le nom de l’ancre doit être unique dans la totalité de la page qui s’affiche.
Quand vous rédigez un article et que vous voulez utiliser des ancres mettez le nom que vous désirez toujours suivi de "_axxx" : vous serez sûr ainsi que le nom de l’ancre n’est pas utilisé dans un autre article de la page.

Mécanisme

En général, il y a en fin des articles de l’Informatidien un paragraphe nommé "Support" qui contient les fichiers de tests, les PDF d’explication, les liens vers des articles internes ou externes au site, etc. bref tout ce qui sert à la compréhension de l’article et à la mise en œuvre de ce qu’il contient.
Les références à l’intérieur de l’article à ce paragraphe sont fréquentes :
Les explications pour ce faire sont dans le paragraphe "Support".
Il peut être judicieux de poser une ancre devant "Support" et, chaque fois que l’on mentionne ce paragraphe d’ajouter un lien vers cette ancre.

Poser une ancre

Le code pour poser une ancre :

[ancre_a{xxx}<-]

Pour reprendre l’exemple précédent, on pose une ancre devant "Support" que nous allons appeler "support_a378". Ce qui donne :

[support_a378<-]Support

C’est ce qui est fait pour le paragraphe "Support" à la fin de cet article.
 
C’est ce qui est utilisé par "Voir" dans la liste des articles générée automatiquement en-tête de rubrique. Chaque article commence par une ancre "axxx" ou xxx est le numéro de l’article. Le présent article débute par :

[a378<-]

Cette notation est invisible, bien sûr.
 
C’est aussi ce qui est utilisé pour remonter au menu de la page (bonhomme blanc qui lève la flèche) lorsqu’on est en fin d’article. Il y a dans chaque page une ancre nommée "menu" devant le menu de navigation.

Faire le lien

Là, il suffit d’utiliser le petit trombone d’insertion de lien dans le menu de rédaction et d’indiquer "#ancre_axxx" dans le nom du lien. On génère :

[->#ancre_a{xxx}]

 
Dans l’exemple du "Support" :
Les explications pour ce faire sont dans le paragraphe "Support".
Le code :

{Les explications pour ce faire sont dans le paragraphe "[Support->#support_a378]".}

 
Pour se retrouver en-tête d’article.
Le code :

Pour se retrouver [en-tête d'article->#a378].

 
Pour se retrouver en-tête de page.
Le code :

Pour se retrouver [en-tête de page->#menu].

Support

• Utiliser les ancres dans SPIP

Faire un saut de page à l’impression

Lorsqu’on veut imprimer un article, en utilisant l’image du petit bonhomme blanc en fin d’article, il se peut que la pagination coupe des paragraphes à des endroits qui ne conviennent pas.

Déjà, il vous faut prendre en compte que si vous êtes connecté comme rédacteur, SPIP génère automatiquement une en-tête :
« Article xxx Recalculer cette page * »
qui peut venir perturber la pagination d’impression.
Cette en-tête n’est pas générée pour un utilisateur Lambda.
 
Pour introduire un saut de page à l’impression, il suffit d’introduire la ligne de code :

<p class='saut_de_page'>~</p>

J’en ai mise une avant :
Déjà, il vous faut prendre en compte...
Demandez l’impression de cet article ci-dessous pour voir ce que cela donne.

Mettre en valeur des éléments de texte

Faire clignoter, mettre en vert, etc.

Exceptionnellement, il peut être indispensable de mettre un mot ou une phrase en valeur. SPIP ne donne pas à ma connaissance de moyen de le faire. Il faut là aussi passer des commandes sur mesure.

Faire clignoter

Pour faire clignoter une partie de texte, il suffit de l’encadrer avec :

<a class=clignot>

et

</a>

Par exemple :

<a class=clignot>jeudi 16 février</a>

Donne :
jeudi 16 février

Mettre en vert

Pour mettre en vert une partie de texte, il suffit de l’encadrer avec :

<a class=vert>

et

</a>

Par exemple :

<a class=vert>jeudi 16 février</a>

Donne :
jeudi 16 février

Les sous-titres

Les titres à l’intérieur d’un article

L’intertitre de SPIP

Si on applique à "Intertitre de SPIP" la fonction Intertitre du menu (T), il s’affiche :

{{{Intertitre de SPIP}}}

Ce qui génère pour l’affichage :

<h2 class="spip">Intertitre de SPIP</h2>

Pour donner :

Intertitre de SPIP

Les intertitres Informatidien

Il est bien sur possible de modifier SPIP pour faire ce que l’on veut de cet habillage pour "Intertitre de SPIP".
Mais il existe plusieurs balises de titre. Deux, les balises <h4> et <h5> sont utilisées dans les articles de l’Informatidien pour faire respectivement titre et sous-titre :

<h4>Intertitre h4</h4>

donne

Intertitre h4

et

<h5>Intertitre h5</h5>

donne :

Intertitre h5