Trucs et astuces SPIP
lundi 30 mars 2015
par Bruno , Arno , Pierre Duhem

Par Arno (01/2007), Bruno et pierred.

Formatage du texte :

{mot} : le mot est en italique

{{mot}} : le mot est en gras

{{{mot}}} : le

mot

devient un sous titre

On peut cumuler, voici un exemple :
{ {{mot}} } ou {{ {mot} }} : le mot est en gras et en italique


Liens hypertextes :

[mot->adresse du lien] : le mot devient un lien hypertexte

[mot->7] : le mot devient un lien hypertexte vers l’article n° 7

[mot->rub10] : le mot devient un lien hypertexte vers la rubrique 10

[?mot] : le mot devient un lien hypertexte vers l’encyclopédie libre wikipedia mais il faut vérifier avant que le mot existe sur wikipedia ;-)

[nom de l'ancre<-]

Pour créer une ancre.

[mot->#nom de l'ancre] : le mot devient un lien hypertexte vers l’ancre dont il faut définir le nom (nom de l’ancre).


Mise en page :

<span class="lettrine">L</span> permet de créer une lettrine.

Ce qui donnera :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

<center>Votre élément (image ou texte)</center>

Ce qui donnera par exemple :

Votre élément

----donne une barre de navigation

_ Permet un saut de ligne simple (sans interligne).

Ce qui donnera par exemple :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non risus.

Cadres

<cadre>Texte qui apparaitra dans un cadre facilitant le copier/coller</cadre>

Résultat :

Exposants et indices :

<math>$a^{b}$</math>
ou a&supb
ou a<sup>b</sup>
donne a^{b} (latex) ou ab (html)

<math>$a_{b}$</math>
ou a<sub>b</sub>
donne a_{b} (latex) ou ab (html)


4 symboles # en suivant permettent de découper un article en plusieurs pages (attention de veiller à rester lisible)
Pas d’exemple de rendu pour la raison évidente que je ne veux pas découper cet article en deux ;-)

-
 donne une puce (pas plus de 10 par page sous peine d’erreurs d’affichage !

-*

  • donne une puce (utilisable autant de fois que l’on veut, c’est donc préférable à la première solution.

-**

    • puce de second ordre si nécessaire.

-***

      • puce de troisième ordre si nécessaire.

-****

        • puce de quatrième ordre si nécessaire...

-#

  1. puce avec numéro

<quote>citation</quote>permet de mettre en évidence une citation :

citation

|#1|#2|#3|
|a|b|c|

donne un tableau :

#1 #2 #3
a b c

En mettant en gras les éléments de la première ligne, cela donnera une ligne de titre au tableau :

|{{#1}}|{{#2}}|{{#3}}|
|a|b|c|
|d|e|f|
#1#2#3
a b c
d e f
g h i
j k l

Il est également possible de fusionner une case avec d’autres, en réduisant son contenu à :

|<| pour la fusionner avec la case qui la précède horizontalement

|^| pour la fusionner avec la case qui la précède verticalement.

exemple :

|{{#1}}|{{#2}}|{{#3}}|
|a|b & c|<|
|d|e & h|f|
|g|^|i|
#1#2#3
a b & c
d e & h f
g i

Il est aussi possible d’inclure du code html mais on se limitera volontairement au code nécessaire à l’inclusion des photos de la galerie pour éviter toute erreur de validation.
En cas de besoin particulier, il serait judicieux d’en faire la demande au préalable ou de vérifier la validité du code.
A ce titre mieux vaut se référer au xhtml.

Ajout Bruno

Pour les photos, il est possible aussi de les envoyer sur le serveur via spip.
A la création de votre article, enregistrer le, même vide, ensuite cliquer sur modifier, là les options seront visibles, à gauche.(voir l’aide)

Exemple pour incorporer une image de la galerie :

<img src="adresse de l'image" alt="texte alternatif en cas de non affichage de l'image" title="titre de l'image" />

exemple illustré :

<img src="https://www.galerie-insecte.org/galerie/image/dos11/temp/dsc_0037.jpg"
alt="Photo de Rhagonycha fulva" title="Rhagonycha fulva" />

Cela donnera :

Photo de Rhagonycha fulva

Attention !
Les balises alt et title peuvent être vides (rien entre les guillemets). On perd alors en lisibilité mais il est préférable de ne pas les oublier sous peine de "planter" la visualisation du site pour toute personne utilisant un navigateur pour mal-voyant.

<img src="https://www.galerie-insecte.org/galerie/image/dos11/temp/dsc_0037.jpg" alt="" title="">

Le web appartient à tous, pensez y, certains sont obligés d’utiliser des navigateurs en mode texte comme Lynx ou apparentés et sans les balises cela devient difficile de comprendre un site avec photos.
Merci pour tous !
Nous sommes bien habitués sur le forum à avoir la possibilité de cliquer sur une image pour en voir une version à plus haute résolution. Il ne semble pas que Spip offre une fonction de cet ordre. Cependant, pour l’article de Vincent et Frédéric sur Les espèces françaises du genre Gonocerus (Coreidae), j’ai pu voir que les deux lignes de code suivantes fonctionnent :

<a href="https://www.insecte.org/IMG/jpg/Gonocerus.jpg" target="_blank">Voir l'image en grand format</a>

Cette ligne affiche une image dans une nouvelle fenêtre (en plein écran).

<a href="https://www.insecte.org/IMG/jpg/Gonocerus.jpg" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=1107,height=682,toolbar=0,resizable=0'); return false;">Voir l'image en grand format</a>

Cette seconde ligne, avec un peu de javascript dedans, permet d’ouvrir une fenêtre dimensionnée précisément, ce qui peut être nettement préférable.


Créer un lien vers un article : [->articlexxx]

Exemple :
Les espèces françaises du genre Gonocerus (Coreidae)
pour aller à l’article sur les Gonocerus.

Créer un lien vers une rubrique : [->rubxxx]

Exemple
Hyménoptères
pour aller à la rubrique des Hyménoptères.


Une fois terminée la rédaction, vous devez "demander la publication", ainsi l’article passera du statut de "en cours de rédaction" à celui de "proposé à l’évaluation".

Les autres rédacteurs du site pourront alors le voir et en discuter si nécessaire via le forum spip attaché à chaque article (tout en bas : Poster un message)

Vous pourrez alors aussi et surtout prévisualiser votre article :
Appuyez sur "prévisualiser" en haut à gauche si vous voulez voir ce que donnerait cet article s’il était publié ;-)


Inclusion d’un lien vers le site de diffusion vidéo YouTube :

Le code ci-dessous, copié sur le site de diffusion YouTube, permet d’intégrer une vidéo dans un article, d’une manière que les internautes connaissent maintenant assez bien :

<iframe width="640" height="360" src="https://www.youtube.com/embed/abyPzT6_kBE?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>


Caractères spéciaux :
Mâle (Mars) : ♂ &#9794; ou bien &#x2642;
Femelle (Venus) : ♀ &#9792;         ou bien &#x2640;


Découpe en pages des longs articles.

Mettre #### entre lignes blanches à la marge de gauche.


Signatures: 0
Date Nom Sites Web Message