• Introduction
• Installation
• Manager
• Gabarits
• Développement
• Etudes de cas
• Annexe A
• Glossaire
• Table des Matières
• Retour à l'accueil

Annexe A - Du wiki au XHTML, décryptage

A.1. Les règles d'écriture wiki

Plume-CMS propose deux syntaxes pour la rédaction de ressources : wiki et XHTML. Cet article est une promenade au pays du wiki : l'utilisation de la syntaxe, son rendu dans les gabarits, des notes de fonctionnement. Ce tour d'horizon se veut une aide pour les utilisateurs, mais aussi un pense-bête pour les développeurs de gabarits.

A.1.1. Règles de formatage de type « bloc »

A.1.1.1. Paragraphe

Description

Génère un bloc de texte sous forme de paragraphe.

Syntaxe wiki	2 retours à la ligne
Rendu XHTML	<p>Un paragraphe de texte</p>

A.1.1.2. Trait horizontal

Description

Génère un trait horizontal.

Syntaxe wiki	==== + 1 retour à la ligne
Rendu XHTML	<hr />

A.1.1.3. Liste à puce

Description

Génère une liste énumérative.

Note

Chaque occurrence d’une puce ( - ou *) génère le balisage <li> </li>. Les balises <ul> </ul> se placent d’elles-mêmes.

Syntaxe wiki	une ou plusieurs occurrences de '-' ou '*' + retour à la ligne ligne à chaque occurrence
Rendu XHTML	<ul> <li>item</li> </ul>

A.1.1.4. Liste numérotée

Description

Génère une liste ordonnée

Note

Chaque occurrence d’un dièse ( # ) génère le balisage <li> </li>. Les balises <ol> </ol> se placent d’elles-mêmes.

Syntaxe wiki	une ou plusieurs occurrences de '#' + un retour à la ligne à chaque occurrence
Rendu XHTML	<ol> <li>item numéroté</li> </ol>

A.1.1.5. Tableau

Description

• Génère un tableau, avec ou sans titre de colonne.
• Par défaut, les bordures ne sont pas apparentes, et le titre s’affiche en gras.

Notes

• | cellule correspond à une cellule du tableau ; | !titre! est un titre de colonne. Chaque nouvelle ligne représente une ligne du tableau.
• Chaque occurrence de | cellule génère le balisage <td> </td>.
• Chaque occurrence de | !titre! génère le balisage <th> </th>.
• Chaque nouvelle ligne produit <tr> </tr>.
• Les balises <table> </table> se placent d’elle-mêmes.
• Toute variation du nombre de cellules d’une ligne à l’autre sera reconnue comme un nouveau tableau. En conséquence, un nouveau jeu de balises <table> </table> sera créé.

Syntaxe wiki	| !titre! | !titre! + un retour à la ligne | cellule | cellule + un retour à la ligne
Rendu XHTML	<table class="wiki-table"> <tr> <th>titre</th><th>titre</th> <td>cellule</td><td>cellule</td> </tr> </table>
CSS	table.wiki-table {}

A.1.1.6. Sous-titre de niveau 1

Description

Génère un titre de première importance.

Syntaxe wiki	!!!Titre 1 + retour à la ligne
Rendu XHTML	<h1>Titre 1</h1>

A.1.1.7. Sous-titre de niveau 2

Description

Génère un titre de seconde importance.

Syntaxe wiki	!!Titre 1.1 + retour à la ligne
Rendu XHTML	<h2>Titre 1.1</h2>

A.1.1.8. Sous-titre de niveau 3

Description

Génère un titre de moindre importance.

Syntaxe wiki	!Titre 1.1.1 + retour à la ligne
Rendu XHTML	<h3>Titre 1.1.1 </h3>

A.1.1.9. Texte pré-formaté

Description

Génère un bloc de texte respectant la pagination appliquée durant la saisie (retours à la ligne respectés par exemple) .

Syntaxe wiki	un espace + mon texte pré-formaté + retour à la ligne
Rendu XHTML	<pre>mon texte pré-formaté</pre>

A.1.1.10. Bloc de citation

Description

Génère un bloc de texte dont la mise en valeur diffère de celle du Paragraphe (faire un lien !). Cette syntaxe est notamment fort utile pour effectuer des citations longues.

Note

L’ajout d’un > pour une seconde citation, directement à la suite d’une première, créé un retour à la ligne <br /> au sein du balisage <blockquote> <p> </p> </blockquote>.

Syntaxe wiki	>une citation longue + un retour à la ligne
Rendu XHTML	<blockquote> <p>une citation longue</p> </blockquote>

A.1.1.11. Définition

Description

Génère un bloc de texte composé d’un « titre » et d’un « corps » ; représentant respectivement terme à définir et définition.

Notes

• Le terme sera entouré par <dt> </dt>, la définition par <dd> </dd>. Les balises <dl> </dl> délimitant le bloc se placent de manière automatique.
• L’ajout d’un second terme à définir, directement à la suite d’un premier, créé un nouveau jeu de balises <dt> </dt> <dd> </dd> au sein des balises <dl> </dl> pré-existantes.

Syntaxe wiki	;terme + un espace + : + un espace + définition du terme + un retour à la ligne
Rendu XHTML	<dl> <dt>quod erat demonstrandum</dt> <dd>ce qui était à démontrer </dd> </dl>

A.1.1.12. Galerie

Description

• Par défaut, la galerie n’a pas de style propre. Elle est donc affichée sous la forme d’une unique colonne composée par les images dont la largeur est celle d’une vignette.
• Un lien vers l’image originale est appliqué à chaque vignette.
• La légende est placée sous chaque miniature générée.

Notes

• Une miniature ne sera pas créée si l’image originale est distante (i.e. externe).
• Les attributs width et height (respectivement largeur et hauteur) de la balise <img /> sont renseignés par la taille de la miniature générée.
• La taille de la vignette est définie (en pixel) par le champ gal:200×200 dans la syntaxe wiki. Par défaut, la taille proposée est de 200 pixels en largeur et hauteur.
• La génération des vignettes permet d’en préserver les proportions ; ainsi la taille finale de la miniature sera, la plupart du temps, une valeur approchante de celle voulue.
• Des erreurs peuvent survenir si les champs de la syntaxe wiki relatifs au texte alternatif, à la taille de la vignette et à la légende sont laissés vides ou bien sont omis.

Syntaxe wiki	$ ((/lien/vers/image|texte alternatif|gal:200x200|légende de l'image))
Rendu XHTML	<div class="gallery"> <div class="gallery-top"> </div> <div class="gallery-img"> <a href="/lien/vers/image/originale" title="texte alternatif"> <img class="gallery-thumb" src="/lien/vers/vignette" alt="" width="L" height="H" /> </a> <p class="gallery-legend">Légende</p> </div> <div class="gallery-bottom"> </div> </div>
CSS	div.gallery {} div.gallery-top {} div.gallery-bottom {} div.gallery-img {} img.gallery-thumb {} p.gallery-legend {}

A.1.2. Règles de formatage de type « inline »

A.1.2.1. Gras

Description

Le texte apparaît en gras.

Syntaxe wiki	__du texte en gras__
Rendu XHTML	<strong>du texte en gras</strong>

A.1.2.2. Italique

Description

Le texte apparaît en italique.

Syntaxe wiki	''du texte en italique''
Rendu XHTML	<em>du texte en gras</em>

A.1.2.3. Retour à la ligne forcée

Description

Force un retour à la ligne.

Syntaxe wiki	%%%
Rendu XHTML	<br />

A.1.2.4. Lien

Description

Créé un lien vers un site et/ou un fichier.

Notes

• Le champ relatif à l'URL doit obligatoirement contenir la mention http://, le cas contraire, le lien renverra vers une erreur 404.
• Des décalages dans la génération des attributs peuvent survenir si tous les champs de la syntaxe wiki ne sont pas renseignés (par exemple : la description du lien qui renseigne l'attribut lang).

Syntaxe wiki	[nom du lien|http://www.mon-lien.tld|langue|description du lien]
Rendu XHTML	<a href="http://www.mon-lien.tld" lang="fr" title="description">nom du lien</a>

A.1.2.5. Lien vers une ressource

Description

Créé un lien vers une ressource du site géré par Plume-CMS.

Note

Le « ressource-id » peut-être trouvé dans le manager de Plume. Dans la liste des ressources, déployer les informations avancées ( i.e. « tout afficher » ou bien l'icône « + »). L'information est de la forme : « Identifiant pour faire un lien : news-3 ».

Syntaxe wiki	[nom du lien|xlink://ressource-id/]
Rendu XHTML	<a href="lien/vers/ressource">nom du lien</a>

A.1.2.6. Courriel

Description

Créé un lien spécifique à l'affichage des adresses courriel.

Note

L'adresse e-mail ainsi écrite sera automatiquement protégée contre le spam.

Syntaxe wiki	[courriel|mailto:email@domaine.tld]
Rendu XHTML	<a href="mailto:email.protege@contrelespam.tld">courriel</a>

A.1.2.7. Image

Description

Ajoute une image dans une ressource. Plusieurs cas de figures sont envisageables car la syntaxe ici est moins restrictive. Vous trouverez le détail ci-dessous.

Image positionnée

• Le champ « position » peut être renseigné par les valeurs suivantes : D (droite), C (centré), G (gauche).
• Selon que l'on choisit l'un ou l'autre des positionnements, la valeur dans le rendu XHTML changera pour l'attribut class. Une position à droite ( D ) donnera class="px-right", une centrée ( C ) donnera class="px-center" et une à gauche ( G ) donnera class="px-left".

Syntaxe wiki	((lien/vers/image|texte alternatif|position|description))
Rendu XHTML (G)	<img longdesc="description" class="px-left" alt="texte alternatif" src="lien/vers/image" style="" />
Rendu XHTML (C)	<img longdesc="description" class="px-center" alt="texte alternatif" src="lien/vers/image" style="" />
Rendu XHTML (D)	<img longdesc="description" class="px-right" alt="texte alternatif" src="lien/vers/image" style="" />
CSS	img.px-left {} img.px-center {} img.px-right {}

Image non-positionnée

• On entend par « non-positionnée » les images insérées dans une ressource dont on omet l'information de positionnement dans la syntaxe wiki.
• L'omission du positionnement entraîne dans le rendu XHTML la disparition des attributs longdesc et class. De ce fait, la syntaxe la plus cohérente reste la dernière présentée parmi les exemples ci-dessous :

Syntaxe wiki	((ien/vers/image|texte alternatif||description))
Syntaxe wiki	((lien/vers/image|texte alternatif|description))
Syntaxe wiki	((lien/vers/image|texte alternatif|))
Syntaxe wiki (*)	((lien/vers/image|texte alternatif))
Rendu XHTML	<img alt="texte alternatif" src="lien/vers/image" style="" />

Image générée

• On entend par image « générée » les images qui sont insérées dans une ressource via le gestionnaire d'images et de fichiers du manager.
• L'écriture obtenue par cette méthode est réduite à son plus simple appareil.

Syntaxe wiki	((lien/vers/image|texte alternatif))
Rendu XHTML	<img alt="texte alterntif" src="lien/vers/image" style="" />

A.1.2.8. Code

Description

Le texte est affiché comme le serait le code source d'un langage informatique. Contrairement au texte pré-formaté, il est du type « inline » et ne respecte pas la pagination donnée lors de la saisie.

Syntaxe wiki	@@<?php phpinfo(); ?>@@
Rendu XHTML	<code> <?php phpinfo(); ?> </code>

A.1.2.9. Citation courte

Description

Le texte est affiché entre guillemets. Habituellement, cette structure est utilisée pour faire des citations courtes.

Notes

• Soit le premier, soit tous les champs de la règle d’écriture doivent être renseignés. Dans le cas contraire, on risque de voir les informations saisies renseigner les mauvais attributs.
• Lorsque l’on renseigne uniquement le premier champ de la syntaxe wiki, les attributs lang et cite ne sont pas générés.

Syntaxe wiki	^^citation courte|langue|www.lien-source.tld^^
Rendu XHTML	<q lang="fr" cite="http://www.lien-source.tld>citation courte</q>

A.1.2.10. Référence

Description

Par défaut, le texte est affiché en italique. Habituellement, cette syntaxe est utilisée pour faire référence à un site ou un document distant, ce qui diffère très légèrement des autres types de citation (cf. Citation et Citation courte).

Syntaxe wiki	{{référence|www.lien-de-la-reference.tld}}
Rendu XHTML	<cite title="http://www.lien-de-reference.tld">la référence</cite>

A.1.2.11. Acronyme

Description

Par défaut, le texte affiché est souligné afin de signaler l’utilisation d’un acronyme (ou d’une abréviation). Passer le curseur sur l’acronyme permet d’afficher dans une infobulle sa signification.

Syntaxe wiki	??abréviation|signification??
Rendu XHTML	<acronym title="ce qu'il fallait démontrer">CQFD</acronym>

A.1.2.12. Ancre

Description

Place une ancre dans le texte.

Note

Le nom de l’ancre ne doit contenir qu’un seul « mot », composé de caractères alphanumériques et éventuellement de tirets ( - ) et/ou d’underscores ( _ ). Dans le cas contraire, la validité XHTML Strict sera perdue.

Syntaxe wiki	~~nom_de_l_ancre~~
Rendu XHTML	<a id="nom_de_l_ancre"> </a>