Raccourcis typographiques Spip pour mettre en forme un article

[Texte]

[Intertitre] 1. Conseils de mise en forme

Le titre de l’article sera toujours précédé d’un n° suivi d’un point et d’un espace pour permettre d’afficher les articles par n° de titre dans le menu.
 Les titres, sous-titres, intertitres doivent toujours pouvoir être lus de façon indépendante au reste du texte et ne font jamais de références implicites au contenu de l’article. Contre-exemple de titre : "Il y était.".
 La titraille (titres et intertitres) n’est jamais ponctuée sauf avec un point d’exclamation ou d’interrogation. Le chapeau se termine par un point.

2. Préparation des rubriques et des articles

Afin qu’il soit bien positionné dans le menu, le titre de la rubrique et de l’article sera précédé d’un n° suivi d’un point et d’un espace et sera saisi ainsi dans le document Word pour en accélérer l’intégration sous Spip. Un filtre permet de cacher la numérotation sur le web. Exemple : dans le menu de la rubrique 01. Nous découvrir > 01. Nouvelles > 01. L’Edito, l’article 01. L’Eglise est jeune se retrouvera ainsi en première place.

3. Raccourcis typographiques de Spip

Pour mettre en forme le contenu, créer un texte en gras, en italique, pour faire une note de bas de page, Spip propose des raccourcis typographiques, assez simples à mémoriser.

 Tableau synthétique des raccourcis typographiques de Spip en PDF, Philippe Allart
 Sur l’espace privé, vous pouvez à tout moment accéder à ces raccourcis dans l’aide de Spip en cliquant sur le pictogramme ?

1. Les trois premiers pictogrammes de la barre de raccourcis typographiques

1. Italique On indique du texte en italique en le plaçant entre des accolades simples. Le code {du texte en italique} donne du texte en italique.
2. Gras On indique du texte en gras en le plaçant entre des accolades doubles. Le code {{du texte en gras}} donne du texte en gras.
3. Intertitre On indique très simplement un intertitre en le plaçant entre des accolades triples. Le code {{{Un intertitre}}} donne

   Un intertitre

   . 2. Liens et notes Il existe plusieurs façons de faire un lien avec Spip. Un lien externe pointe vers un site extérieur, un lien interne à l’intérieur de votre site, une ancre nommée , c’est-à-dire un lien vers un point donné à l’intérieur d’un article ou une note à l’intérieur d’un article. Le contenu d’un site dynamique est stocké dans une base de données ; ce qui signifie que le contenu est classé par types : rubriques, articles, auteurs, images, documents, mots-clés, sites et par champs : titre, sous-titre, chapeau, texte, post-scriptum. Chacun de ces éléments a un numéro d’identifiant (id) que vous pouvez voir dans la barre d’état en bas à gauche de votre page lorsque vous passez votre souris dessus. Repérer ce n° d’identifiant est nécessaire pour faire des liens.

1. Lien externe Un lien s’obtient en plaçant entre crochets [] (touches Alt Gras + 5 et Alt Gras + °) . Vous pouvez pour faire un lien utiliser le 4ème raccourci de la barre (pictogramme spip et main).
   1. Rédiger l’intitulé du lien choisi avec les mots clés que vous saisiriez sur un moteur de recherche
   2. Le faire suivre d’un tiret et d’un chevron fermant (appuyez simultanément sur les touches Majuscule et >), ce qui figure une flèche ->,
   3. Donner l’adresse complète du lien, appelée l’url (Uniform Resource Locator) que vous aurez copiée-collée de la barre d’adresse de votre navigateur web après avoir ouvert un nouvel onglet (CTRL + T). Le code [Site à visiter souvent pour avoir de nombreux visiteurs->http://www.bonnenouvelle.fr/] donne Site à visiter souvent pour avoir de nombreux visiteurs.
2. Lien interne au site vers un article
   1. Un lien vers un article s’obtient en plaçant entre crochets l’intitulé du lien suivi de ->n° d’article, par exemple->113. Le code [Lien interne vers l'article n°113->113] donne Lien interne vers l’article n°113.
   2. Si aucun intitulé n’est indiqué avant la "flèche" (->), le lien affichera automatiquement le titre de l’article 113 avec un lien vers cet article. Le code [->art113] donne Définir sa stratégie de mot de passe et d’adresses e-mail et protéger sa navigation sur Internet.
3. Lien vers une rubrique
   1. Un lien vers une rubrique s’obtient avec l’intitulé du lien suivi de ->rub (comme rubrique) et du n° de la rubrique, par exemple la rubrique 16 [Intitulé du lien->rub16] donne Intitulé du lien.
   2. Si aucun intitulé n’est indiqué avant la "flèche" (->), le lien affichera automatiquement le titre de la rubrique 16 avec un lien vers cette rubrique. Le code [->rub16] donne Formation web.
4. Lien vers un formulaire de contact d’auteur
   1. Ne jamais mettre une adresse e-mail en clair sur un site web, ni faire un lien "mailto" vers une adresse e-mail car elle sera scannée par les robots spammeurs et revendue aux spammeurs. Toujours utiliser les formulaires de contact e-mail pour faire un lien vers un site. Si besoin, créer d’abord la personne comme auteur, repérer son n° d’identifiant d’auteur sur l’espace privé et faire un lien vers son formulaire de contact d’auteur.
   2. Un lien vers un formulaire de contact d’un auteur s’obtient en plaçant entre crochets l’intitulé du lien, suivi de ->aut (comme auteur) et du n° de l’auteur, par exemple aut2. Le code [Contacter Mathilde Henry->aut2] donne Contacter Mathilde Henry.
   3. Si aucun intitulé n’est indiqué avant la "flèche" (->), le lien affichera automatiquement le nom de l’auteur 2 avec un lien vers son formulaire de contact. Le code [->aut2] donne Mathilde Henry.
5. Ancre nommée
   1. Placer le lien où vous désirez qu’il soit cliquable. Un lien vers une ancre nommée s’obtient entre crochets avec l’intitulé du lien suivi de la flèche ->, d’un dièse # et du nom de l’ancre. Le code [ancre nommée->#ancre] fait un lien sur le mot ancre nommée vers l’ancre placée au paragraphe Ancre nommée.
   2. Créer l’ancre à l’endroit de la page où vous souhaitez que l’ancre pointe avec entre crochets d’un dièse #, suivi du nom de l’ancre et d’un tiret et d’un chevron ouvrant <-. Le code [#ancre<-] donne .
   3. Vous pouvez aussi faire un lien vers l’ancre nommée d’un autre article qui a une ancre nommée. D’une autre page, le code [->article116.html#ancre] donne article116.html#ancre.
6. Lien sur une image Pour faire un lien sur une image que vous aurez ajoutée à un article, mettre entre crochets la balise , suivi de -> et de l’adresse du lien interne ou externe. Le code [<img20->http://www.diocese-frejus-toulon.com/don] donne
7. Lien vers un document joint Pour faire un lien sur un document que vous aurez ajouté à un article, mettre entre crochets la balise , suivi de -> et de l’adresse du lien interne ou externe. Le code [<doc20->http://www.diocese-frejus-toulon.com/don] donne . Vous remarquerez que le résultat est presque identique.
8. Note de bas de page Vous pouvez utiliser le 5ème raccourci de la barre (pictogramme spip (1)). Pour créer une note qui apparaîtra en bas de page, mettre entre doubles crochets la note juste après le mot à préciser ou à définir. Le code url [[Uniform Resource Locator]] donne url [1].

Prendre soin de renommer le document joint sur votre disque dur en lui donnant un nom de fichier explicite pour le visiteur et sans accents avant de le joindre à l’article. Exemple : inscription-titredelevenement.pdf.

3. Structurer le contenu

 1. Trait de séparation horizontal

Il peut être utile de séparer le contenu de différentes natures par un trait, par exemple un bulletin de commande par chèque à imprimer. Pour insérer un trait de séparation horizontal sur toute la largeur du texte : il suffit de placer une ligne ne contenant que quatre tirets, ainsi le code ---- donne un trait comme celui-ci :

 2. Puces et sous-puces

Un tiret du 6 - donne une puce, Un tiret du 6 - suivi d’une étoîle* donne une sous-puce, deux** ou trois étoîles*** créent deux autres niveaux de héirarchie. Le code

va apparaître ainsi :
 Ton cheval est :

• alezan ;
• bai ;
• noir ;
   mais mon lapin est :
• blanc ;
  • angora ;
  • ou à poil ras
    • à oreilles courtes ;
    • à oreilles pointues ;
• gris.
   3. Puces numérotées

Un tiret du 6 suivi d’un dièse -# donne une liste numérotée. Un tiret du 6 - suivi de deux dièses -## crée un deuxième niveau de hiérarchie dans la liste numérotée. Le code

va apparaître ainsi :

1. premier
2. deuxième
3. troisième

 4. Citation ou encadré

Le recours aux citations permet de mettre en exergue un texte important ou de servir d’encadré. Une citation s’obtient en mettant votre texte entre

donne La jeunesse veut le Beau et le Bien. Elle est tout-à-fait ouverte au Christ.
Benoît XVI [2]

Un encadré s’obtient en mettant votre texte entre

donne

L’encadré permet de mettre en exergue un texte important.

 5. Tableau

Pour réaliser des tableaux, faire des lignes dont les "cases" sont séparées par le symbole "|" (pipe, un trait vertical), lignes commençant et se terminant par des traits verticaux. Il est impératif de laisser des lignes vides avant et après ce tableau. Le code

va apparaître ainsi :

3. Ajouter des images et des documents

Il est possible d’ajouter des images ou des documents à une rubrique, dans ce cas ceux-ci apparaîtront sur la page de rubrique ou à un article. Si votre site est correctement développé, le format et le poids apparaîtront automatiquement ainsi que le titre, la description s’ils ont été précisés.

Les images utilisées comme logos de rubrique et d’article ont une valeur sémantique, c’est-à-dire qu’elles doivent révéler le sens du contenu et motiver la lecture.
 La première image ajoutée dans le texte se trouvera du côté opposé du logo de l’article. Si le logo est à droite, la première image ajoutée apparaîtra à gauche <img|left>, puis la deuxième image à droite <img|right>, et la troisième image à gauche <img|left>.

1. Ajouter des images
   1. Lorsque vous "modifiez" un article, la colonne de gauche vous propose une interface intitulée "Ajouter une image". Lorsque vous cliquez sur ce bouton, vous voulez sélectionner votre image sur votre disque dur, puis cliquez"Télécharger".
   2. Titre Si nécessaire, donner un titre le plus objectif possible qui permettrait de trouver l’image ou le document sur un moteur de recherche, le nom des personnes ou des oeuvres.
   3. Description Si nécessaire, indiquer le copyright précédé du symbôle © et suivi du nom de photographe ou de l’artiste. La description peut être un commentaire humoristique.
   4. Vous pouvez recommencer l’opération avec autant d’images que vous le désirez.
   5. Insérer une image à l’intérieur du texte. Pour insérer chaque image, copiez l’un de ces raccourcis
       
       
        et recopiez-le à l’intérieur du champs "Texte", là où vous désirez le situer dans votre article.
2. Si vous avez indiqué un titre et/ou une description, les mentions sont remplacées par :
    
    
     Votre image apparaît ainsi que le titre et la description.

1. Portfolio de photos (Exemple ci-dessous)

Lire avant l’article Rédiger du contenu adapté au web et lu par les moteurs de recherche 6/7 sur le droit à respecter pour la publication de photos sur le web.

1. Préparer vos photos à la taille désirée. Une largeur maximum de 550 pixels sont de bonnes proportions pour que les photos puissent s’afficher sur toutes tailles d’écran.
2. Une fois l’article enregistré, aller en bas à droite dans Joindre un document, cliquer sur Parcourir, sélectionner une photo, cliquer sur Ouvrir, puis Télécharger.