Squelette SoyezCréateurs

Raccourcis Typographiques de SPIP, mode d'emploi

2020-11-19T12:08:37Z

Un préalable important : la mise en page d'un texte est au service du sens de celui-ci, pas du goût personnel de celui qui se trouve devant l'écran ! Or, les raccourcis typographiques de SPIP portent en eux-mêmes du sens. Il est important d'avoir une correspondance entre le sens typographique et le sens du texte. Par exemple, un titre du point de vue du texte doit aussi l'être du point de vue typographique.

N'oubliez pas non plus que votre site sera lu par des visiteurs pouvant être dans des résolutions d'écran différentes de la vôtre et qu'une « belle » mise en page chez vous pourrait être complètement différente pour le visiteur.

Avant d'aller plus loin, vous pouvez lire avec profit : Raccourcis typographiques indispensables de SPIP.

Le texte préexiste à la mise en page

C'est peut-être une évidence, mais pour mettre en page un texte, il faut que le texte existe.

Dans le cas de SPIP, ça veut dire qu'il vaut mieux (au moins dans un premier temps) :

disposer de tout le texte sans aucun raccourci typographique,
sauter une ligne à chaque changement d'idée (ce qui donne un changement de paragraphe, voire un titre),
faire un retour à la ligne avant chaque élément d'une énumération.

Ce n'est qu'ensuite que les raccourcis typographiques de SPIP pourront être appliqués avec discernement.

Distinction entre paragraphes et caractères

Certains attributs typographiques ne peuvent s'appliquer qu'à des paragraphes entiers, d'autres doivent être appliqués à des caractères dans le même paragraphe.

Dans la Barre Typographique de SPIP, les attributs de caractères forment le premier groupe sur la gauche, les attributs typographiques de paragraphes le deuxième.

Paragraphes

Un paragraphe dans SPIP est précédé d'une ligne vide et suivi d'une ligne vide [1].

Une règle générale est de ne mettre qu'un attribut de paragraphe par paragraphe.

Si deux paragraphes de suite ont le même attribut, il faut appliquer deux fois l'attribut, une fois pour chaque paragraphe.

Les attributs de paragraphe ne sont pas disponibles dans les champs de SPIP n'ayant qu'une ligne.

Les attributs de paragraphe sont :

les titres {{{Paragraphe du titre}}} et sous-titres {{{*Texte du titre}}}, avec un nombre d'* (étoiles) variant de 2 à 5, la barre de raccourcis ne proposant que 2 et 3.
Attention : il est essentiel de respecter la hiérarchie de la titraille et de ne pas commencer par un élément sans qu'il soit précédé de son niveau supérieur (on ne doit pas commencer à 2 !). Voir les exemples de titraille
Remarque : {{{Titre de premier niveau}}} est strictement équivalent à {{{*Titre de premier niveau}}}.

centrer [|Paragraphe centré|] : à n'utiliser que de manière exceptionnelle [2] !

Paragraphe centré

aligner à droite [/Paragraphe aligné à droite/] : essentiellement pour mettre la signature d'un auteur

Paragraphe aligné à droite

encadrer [(Paragraphe à encadrer)]

Paragraphe à encadrer

Certains attributs sont un peu spéciaux :

Poésie Le texte de la poésie, sur plusieurs lignes, les retour à la ligne simple étant pris en compte

Le geai gélatineux gégnait dans le jasmin

Voici mes infins le plus beau vers de la langue française.

Cadre Texte qui apparaitra dans une zone de formulaire facilitant le copier/coller [3]

Ceci est du texte dans un cadre. les espaces en début de ligne comptent ! Les retours à la ligne simples aussi !

Citation

Soit à l'intérieur d'un paragraphe :Texte d'une citation

Proverbe connu : C'est en forgeant que l'on devient forgeron.

Soit formant un bloc :

 L'amour naît d'un cœur déchiré tant il s'est agrandi.

L'amour naît d'un cœur déchiré tant il s'est agrandi.

Caractères

Les attributs de caractères doivent être ouverts et fermés à l'intérieur du même paragraphe (pas question de débuter le gras sur un premier paragraphe et de le terminer sur un deuxième).

Ils peuvent être utilisés dans tous les champs de SPIP.

Mise en forme

gras : {{texte en gras}} ; à utiliser pour un élément que l'on souhaite appuyer (sera prononcé plus fort dans un logiciel de lecture vocal) : texte en gras
italique : {italique} ; à utiliser pour une élément sur lequel on veut insister (sera prononcé avec emphase) : italique
mise en évidence [*texte en évidence*] : élément que l'on souhaite appuyer en attirant le regard par un changement de couleur : texte en évidence
mise en exposant : texte en exposant : pour l'abréviation de saint : S^t
petites capitales : texte en petite capitales : à utiliser essentiellement pour les noms propres : Charles de Gaulle
code : du code (raccourcis typographiques, html…) que l'on ne souhaite pas que SPIP interprète
biffé : texte biffé : pour indiquer qu'on avait pensé à un autre mot et que l'on a changé d'avis : SPIP, c'est ~~bien~~ fantastique !

Comportement spécifique

Aides à la compréhension du texte

bulle d'aide : [GPL|Gnu Public Licence] : pour donner la signification d'un terme ou d'une abréviation : GPL
Ce raccourcis est beaucoup moins nécessaire depuis que vous disposez de À bord du Joshua automatiques.

Liens internes et externes

lien : [texte du lien->https://www.spip.net/] : lien : texte du lien
À noter qu'il est possible de faire des liens à l'intérieur du site SPIP à l'aide des numéros des éléments et de leur type (se reporter à l'aide en ligne fournie par SPIP).
lien avec bulle d'aide : [texte du lien|Le site officiel de SPIP->https://www.spip.net/] : texte du lien
lien avec langue de destination (non visible sur Internet Explorer) : [texte du lien|{fr}->https://www.spip.net/] : texte du lien
lien avec bulle d'aide et langue de destination : [texte du lien|Le site officiel de SPIP{fr}->https://www.spip.net/] : texte du lien
ancre et retour à l'ancre : [definition_ancre<-] et [retour à l'ancre->#definition_ancre] : retour à l'ancre
définition dans Wikipedia : [?GPL] : appelle l'encyclopédie libre Wkipedia pour obtenir la définition du mot [4] : GPL
Avec bulle d'aide : [?GPL|Définition sur Wikipédia] : GPL
note de bas de page : texte[[note de bas de page]] : crée une note de bas de page avec le texte entre les doubles crochets [5]

Listes

Les listes sont à utiliser pour tout ce qui à le sens d'une énumération.

Attention : il faut entourer un bloc de listes à puces d'une ligne vide avant et après.

Listes à puces

-* première ligne -* deuxième ligne -** une sous liste à puce -* de retour dans le niveau initial

Donnera :

première ligne
deuxième ligne
- une sous liste à puce
de retour dans le niveau initial

Listes numérotées

-# première ligne -# deuxième ligne -## une sous liste à puce -# de retour dans le niveau initial

Donnera :

première ligne
deuxième ligne
1. une sous liste numérotée
de retour dans le niveau initial

Tableaux

Pour être complètement accessible, un tableau dans SPIP doit avoir un titre et une description.

Ainsi :

||Produits bio et prix|Ce tableau sert d'exemple de mise en forme spip|| | {{Produit}} | {{Prix €}} | | Beurre Bio | 5€ | | Lait Bio | 3€ | | Choux Bio | 4€ |

Donnera :

Produits bio et prix
Ce tableau sert d'exemple de mise en forme spip
Produit	Prix €
Beurre Bio	5€
Lait Bio	3€
Choux Bio	4€

Notez les doubles || [6] sur la première ligne du tableau !

Attention : les pièges classiques avec les tableaux sont :

ne pas avoir le même nombre de | sur une ligne
avoir un espace après le dernier | de la ligne (un moyen simple de vérifier : la touche fin du clavier amène à la fin de la ligne)

Tableaux avec fusion de cellules

||Tableau avec fusion|Ce tableau sert d'exemple de mise en forme spip|| | {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} | | {{ligne 1}} | Cellule fusionnée avec la suivante |<| | {{ligne 2}} | Cellule fusionnée _ avec celle du dessous | normale | | {{ligne 3}} |^| normale aussi |

Donnera :

Tableau avec fusion
Ce tableau sert d'exemple de mise en forme spip
Colonne 1	Colonne 2	Colonne 3
ligne 1	Cellule fusionnée avec la suivante
ligne 2	Cellule fusionnée avec celle du dessous	normale
ligne 3	Cellule fusionnée avec celle du dessous	normale aussi

Principe :

|<| fusionne avec la cellule de gauche
|^| fusionne avec la cellule au dessus

Images

Pour les images et documents, reportez-vous à l'aide en ligne de SPIP. Seule contrainte pour l'accessibilité (et donc un meilleur référencement) : donnez un titre à toutes vos images décrivant le sens de chacune d'elles.

Caractères spéciaux

~ (espace insécable ou espace dur — correspond au du HTML) placé entre deux mots remplace l'espace en ayant l'avantage d'être insécable, c'est-à-dire, qu'il empêchera les deux mots d'être séparés par un retour à la ligne malvenu. S'utilise en particulier entre le prénom et le nom propre.
--> : → (flèche vers la droite)
<-- : ← (flèche vers la gauche)
<--> : ↔ (flèche vers la gauche et vers droite)
==> : ⇒ (double flèche vers la droite)
<== : ⇐ (double flèche vers la gauche)
<==> : ⇔ (double flèche vers la gauche et vers droite)
-- : — (tiret cadratin) à utiliser pour les incises dans un texte
... : … (3 petits points) points de suspension
(c) : (c) : CopyRight
(r) : (r) : Registered
(tm) : ™ : Trade Mark

Ligne horizontale

---- : 4 signes moins en seuls sur une ligne (précédés d'une ligne vide et suivis d'une ligne vide) donneront un trait de séparation horizontal.

Éléments dangereux

Il y a deux éléments dangereux dans SPIP :

le retour à la ligne simple : _ (souligné espace) en début de ligne.
Usage toléré pour donner adresse et numéro de téléphone/fax.
Usage toléré : dans une liste à puce pour passer à la ligne sans passer à une nouvelle puce (comme ici).
Usage interdit : pour mettre plus d'espace vertical entre deux éléments de la page.
le HTML pur : il est possible dans SPIP de mettre du code HTML. Le faire est fortement déconseillé :
- parce que c'est la porte ouverte à toutes les dérives, ne serait-ce que celle de sortir de la charte graphique du site, ou celle de produire un code HTML non valide (voire non interprétable ailleurs que sur Internet Explorer
- parce que c'est partir du postulat que votre site ne sera visité qu'en tant que site web ; il pourrait très bien être un jour disponible sous forme de fichiers PDF…

Exemples de titraille : Titre principal

{{{Exemples de titraille : Titre principal}}}

Titre niveau deux

{{{**Titre niveau deux}}}

Titre niveau trois

{{{***Titre niveau trois}}}

Titre niveau quatre

{{{****Titre niveau quatre}}}

Titre niveau cinq

{{{*****Titre niveau cinq}}}

Placement des images

Piclens, une merveille

Galerie avec Piclens

Piclens, une merveille

Galerie avec Piclens

Piclens, une merveille

Vidéo

Validation
par Kurt Kuenne

https://www.youtube.com/watch?v=Cbk980jV7Ao

Formulaire

Voir en ligne : Original de l'article

[1] Sauf les listes à puce et les tableaux

[2] J'avais mis ça en place à l'époque de la version 1.7 de SPIP qui gérait mal le centrage des images

[3] Essentiellement utilisé sur spip-contrib pour donner des exemples de code

[4] Si le mot n'existe pas, vous pouvez le créer vous-même !

[5] Et la note de bas de page est automatiquement numérotée, rendue clicable, pour la consulter, et pour revenir au texte l'ayant appelée

[6] Le signe | se fait sous Windows avec la combinaison AltGR-6.

Une extension pour FireFox est très utile pour savoir rapidement si vous avez fait une erreur de raccourcis typographiques : HTML VALIDATOR (based on Tidy).

Quant à l'écriture pour le Web, vous pouvez visiter l'excellent Redaction.be

Redirection

2018-12-11T10:38:00Z

La bulle d'aide sera utilisée

- Fourre-tout

Une vidéo en grande largeur

2017-01-19T17:19:10Z

mon 2e article sur les réseaux sociaux

2013-08-06T05:05:37Z

mon texte pour mon 2^e article sur les réseaux sociaux

- Réseaux sociaux / Quoi de neuf ?

Lorem Ipsum

2013-08-04T11:59:51Z

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non purus et leo bibendum laoreet. Fusce vitae pellentesque arcu. Pellentesque aliquet venenatis lectus, et molestie leo faucibus feugiat. Sed sit amet odio lectus. Quisque sit amet lobortis arcu, a consectetur libero. Curabitur hendrerit dolor iaculis tempus pulvinar. Cras porta semper pretium. Suspendisse vitae enim et sapien congue vehicula. Vestibulum ut posuere turpis. Integer bibendum id eros non volutpat. Integer quis facilisis elit, in rhoncus dolor. Aenean quis lacus sodales, tempus quam tempus, tristique libero.

In eget massa sed sapien interdum sagittis. Fusce condimentum arcu vulputate ullamcorper facilisis. Integer quam turpis, vestibulum at odio ac, ultrices bibendum est. Suspendisse ornare semper ligula, in gravida neque. Aliquam at justo risus. Phasellus ut pharetra odio, ac iaculis enim. Quisque consectetur lacus dignissim mauris lobortis tincidunt. Ut dignissim dui vitae sem suscipit sollicitudin. Vivamus sit amet nulla eget erat ullamcorper ullamcorper.

Etiam posuere elit vitae luctus commodo. Sed ac ligula sit amet est convallis mollis. Ut accumsan posuere purus, eget consequat tortor luctus sit amet. Vivamus rhoncus convallis lacus, ut hendrerit sapien ultrices sed. Maecenas congue adipiscing imperdiet. Curabitur volutpat ultrices placerat. Morbi mi turpis, hendrerit quis volutpat nec, viverra non sapien. Praesent sit amet dolor elementum, adipiscing neque eget, blandit lacus. Nam id sem vitae sem sodales feugiat. Cras semper, urna dignissim facilisis viverra, velit nunc elementum sapien, et condimentum elit dui vitae libero. Praesent placerat purus lobortis quam bibendum, vel ornare sem faucibus. Vestibulum ac mollis leo. Nulla ut ipsum in orci suscipit convallis vitae ac lorem. Nullam nec purus risus. Aliquam sodales congue adipiscing.

premier article emile

2011-12-05T16:06:45Z

je peux mettre du texte

- Essai 16

Edito de Karine

2011-02-21T15:13:31Z

Présentation du projet

Le site web SigesSN est un Système d'Information et de Gestion des Eaux Souterraines à l'échelle du bassin Seine-Normandie.

La gestion qualitative et quantitative des eaux souterraines sur le bassin Seine-Normandie est une préoccupation majeure pour l'ensemble des acteurs locaux du domaine de l'eau. Depuis plusieurs décennies, des moyens importants ont été progressivement mis en place sur le bassin pour assurer l'acquisition et le suivi des données sur les eaux souterraines.

Les données collectées ont été saisies dans des bases de données afin de rassembler, traiter, gérer et assurer la pérennité de ces données. Le développement du réseau Internet a également permis la diffusion d'une grande partie de ces informations, notamment via le site Internet ADES (Accès aux Données sur les Eaux Souterraines) et le site Infoterre du BRGM. Toutefois, ces bases de données à vocation nationale ne permettent pas, à elles seules, de répondre totalement aux préoccupations des décideurs et des acteurs locaux du domaine de l'eau. Ainsi, la mise en place du Système d'Information pour la Gestion des Eaux Souterraines (SIGES) vise à mutualiser et diffuser les informations sur les eaux souterraines.

À ce titre, il constitue l'un des objectifs des Schémas Directeurs des Données sur l'Eau (SDDE) développés dans chaque grand bassin hydrologique, de la Directive Cadre Européenne (DCE), et du Système d'Information sur l'Eau (SIE) mis en place par le Ministère en charge de l'Environnement (circulaire 2002).

Un serveur couplé aux bases de données a donc été mis au point pour constituer le site Internet du SIGES, portail d'accès aux informations sur les eaux souterraines, l'objectif étant de :

rendre disponible l'information sur les eaux souterraines du bassin ;
mettre en place un outil constitué de bases de données géoréférencées, et de documents cartographiques associés ;
faciliter l'accès à ces données pour aider à la gestion des eaux souterraines, en favorisant les consultations et les traitements de ces informations ;
favoriser l'exploitation des données dans le cadre de bilans, diagnostics…

Entièrement gratuit et libre d'accès, le SIGES est destiné à être utilisable et compréhensible par tous, et de s'adapter au niveau de spécialité de l'utilisateur. Le SIGES est voué à se développer localement, à l'échelle régionale voire départementale, suivant les besoins et motivations des gestionnaires des eaux souterraines. Ce site Internet constituera alors un portail unique aux informations synthétisées à ces échelles.

Galerie de Jacques

2010-06-01T08:48:16Z

Le texte présente globalement la galerie. Une datation est la bienvenue. Localisation. IGN.

C'est quoi l'IGN ?

Ben regarde la bulle d'aide en passant la souris sur IGN.

Art 1 rub2

2010-05-31T15:10:26Z

- Jacques 2

Art 2, rub 2

2010-05-31T15:10:24Z

Je peux placer une image dans le texte.

Chambre avec vue

J'ai placé mon image au dessus.