Visuel du bouquet de services académiques

Langues vivantes

SPIP - Trucs, astuces, macros et lignes de code

Travaux pratiques : Valider quelques items du B2i ou du C2i2e

 Quelques lignes de code assez précieuses

 1. Rediriger une page

  • Code à insérer dans les meta pour forcer la redirection d’une page web vers une autre :
<meta http-equiv="refresh" content="2;URL=http://etablissements.ac-amiens.fr/...">

Il suffit de compléter l’adresse cible et de régler la durée de la transition.


 2. Intégrer une vidéo

  • Code à insérer pour intégrer une vidéo dans un article sous SPIP :
<embed src="http://etablissements.ac-amiens.fr/0601178e/quadriphonie/IMG/mpg/Capoeira_1.mpg" width="550" height="400" loop="0">

Tout d’abord, créez l’article et associez-lui un fichier video (ajouter un document).
Il suffit ensuite de copier le code encadré ci-dessus et de l’insérer à l’endroit voulu de l’article.
En dernier lieu, complétez l’adresse cible puis réglez les dimensions du lecteur (hauteur et largeur).

  • Effet produit [1] :

Ou bien, encore plus simple :

<emb94|center|height=350|width=400>

Ici, l’on ajoute simplement le numéro du document associé juste après "emb" puis on règle les dimensions du lecteur.

Ce qui nous donne :

Remarque 1 :

Dans ce cas, la vidéo se joue directement, et en boucle. (Coupez le son !!!)


Remarque 2
 : Dans notre exemple, nous avons choisi de ne la jouer qu’une fois... :
<emb94|center|height=350|width=400|autostart=true|loop=0>
 [2]


 3. Intégrer un fichier audio

Code à insérer pour intégrer un fichier audio avec son lecteur dans un article sous SPIP :

Vous connaissez le lecteur Dew Player. :

Vous désirez voir un exemple d’utilisation :
http://etablissements.ac-amiens.fr/0601178e/quadriphonie/spip.php?article301

  • Voici la marche à suivre pour l’installer et l’utiliser dans nos pages :

1. Téléchargez votre fichier son au format MP3, comme d’habitude.

2. À l’endroit où vous souhaitez placer le lecteur, collez le code qui se trouve dans le fichier ci-dessous :

Code à recopier pour faire apparaître le lecteur audio :

Copiez le code figurant ci-dessous :

<center><object type="application/x-shockwave-flash" data="IMG/swf/dewplayer-2.swf?son=IMG/mp3/truc.mp3" width="180" height="20"> <param name="movie" value="IMG/
swf/dewplayer-2.swf?son=IMG/mp3/truc.mp3" /> </object></center>
  • À la place de "truc", inscrivez le nom de votre fichier, sans mettre d’espace et sans enlever autre chose.
    Faites en sorte que le nom du fichier soit simple, court, sans espace ni signe spécial...
  • Vous pouvez redimensionner le lecteur, en remplaçant "200" par "150" ou "100" par exemple.
  • Vous pouvez aussi centrer ou aligner différemment le lecteur en utilisant les balises habituelles :
<center> </center> ou <right> </right>

Après validation de votre article rédigé sous SPIP, une zone blanche apparaîtra à l’endroit où vous avez choisi d’afficher le lecteur.

Celui-ci ne sera actif et lisible qu’au moment où l’article sera publié... OK ?!

Et le tour sera joué !

Remarque : (Vous n’avez pas à vous soucier du script du lecteur s’il est déjà installé dans le site... Dans le cas contraire, lors d’une première installation, il suffit d’en retrouver le chemin.)

  • Effet produit :

 4. Créer un lien hypertexte

 4.1 Créer un lien hypertexte vers un document du site

Cette opération doit se faire "à la main" :

Copiez le code suivant :

[  ->art12]

a) Avant la flèche, écrivez le texte du lien : "Mais où donc mène ce lien ?".

b) Après la flèche, écrivez : art1, pour renvoyer vers l’article n°1, art2, pour renvoyer vers l’article n°2,etc. .

c) Après la flèche, écrivez : rub1, pour renvoyer vers la rubrique n°1, mot1, pour renvoyer vers le mot clé n°1, etc

  • Exemples :
[ Mais où donc mène ce lien ? ->art12]
[ Mais où donc mène ce lien ? ->rub12]
[ Mais où donc mène ce lien ? ->mot12]
  • Effet produit :

Mais où donc mène ce lien ?

Mais où donc mène ce lien ?

Mais où donc mène ce lien ?


 4.2 Créer un lien hypertexte vers un document à l’extérieur de notre site

Un bouton existe pour créer un lien automatique.

Rédiger puis sélectionnez le texte que vous souhaitez transformer en lien.
Par exemple : Allez rechercher dans Google !

Cliquez sur le 4ème bouton de la barre outil (au-dessus de champ texte).

Un fenêtre s’ouvre, proposant un champ à compléter avec l’adresse du lien.

Renseignez l’adresse puis cliquez sur "OK".

Le tour est joué.

  • Exemples :

Allez rechercher dans Google !

 4.3 Créer un lien dont la cible s’ouvrira dans une autre fenêtre

<a href=
target= "blank">{{}}</a>

a) après "a href=" , insérer l’adresse URL ;

b) entre les doubles accolades, glisser le texte du lien cliquable

  • Exemple :
<a href=http://www.ac-amiens.fr/
target= "blank">{{Le site de l'Académie}}</a>
  • Effet produit :

<a href=http://www.ac-amiens.fr/
target= "blank">Le site de l’Académie d’Amiens


 5. Attribuer une couleur à une portion de texte

  • Code à copier-coller ci-dessous ;
  • Remplacer Coucou par le texte choisi ;
  • Remplacer le code couleur {{#CC66FF}} par le <a href=http://etablissements.ac-amiens.fr/0601178e/StagesNT/EnseignInt2005/Comprendre/couleurs.htm
    target= "blank"> code de la couleur choisie :
<font color="#CC66FF">{{Coucou}}</font>
  • Effet produit :

Coucou

  • Si la couleur désirée est "simple", il est possible d’écrire "red", blue", "green", etc.
<font color="red">{{Coucou}}</font>
  • Effet produit :

Coucou

<font color="blue">{{Coucou}} </font>
  • Effet produit :

Coucou

<font color="green">{{Coucou}} </font>
  • Effet produit :

Coucou

  • Augmenter la taille de la police
<font size="72pt">{{Coucou}} !</font>
  • Effet produit :

Coucou !


 6. Créer un lien vers un article de Wikipédia

L’on fait simplement précéder le mot du lien d’un point d’interrogation :

{{[?Papillon]}}
  • Effet produit :

Papillon

Remarque pour les linguistes : Si vous publiez un article dans une langue étrangère, les liens hypertextes de ce type vous renverront vers les articles de la Wikipédia de la langue choisie.


 7. Créer des tableaux : utiliser la macro "Word pour Spip"

Cette macro vous permet, d’un simple clic sur un bouton, de transformer un document au format Word en texte codé à insérer tout simplement dans un article sous SPIP.

  • Intérêt de la manœuvre :
    Ceux qui sont friands de tableaux apprécieront ;-)

Comment l’utiliser ? Rien de plus simple !

  • Rendez-vous sur le lien ci-dessous, téléchargez l’archive ZIP, décompressez-la à l’endroit indiqué puis suivez les instructions pas à pas :
  • <a href=http://www.spip-contrib.net/Macro-word
    target= "blank">Macro-spip

 8. Insérer une page Web dans une fenêtre au sein d’une page sous SPIP

<center><iframe
src="saisir ici l'url"  width="650"
height="850">
</iframe></center>
<iframe src="http://etablissements.ac-amiens.fr/0601178e/StagesNT/EnseignInt2005/Comprendre/couleurs.htm" width="650" height="450">
Mise à jour : 24 février 2010