Éducation, société et technologie

Astuces pour SPIP 2.0

André Vincent — 2008-12-23T14:25:00Z

Quelques trucs et astuces pour la version 2.0 de SPIP.

Images typo

André Vincent — 2008-05-21T18:49:00Z

Un modèle pour transformer automatiquement un texte en image typographique avec choix de la police, taille (corps), interlignage, couleur de la police, couleur de fond, alignement du texte, incrustation à gauche ou à droite, padding, etc...

Sommaire

Installation

Placer le modèle ecriture.html dans votre dossier /squelettes/modeles/ecriture.html
Placer une ou des polices au format TrueType (.ttf) directement dans le dossier /squelettes/polices/
Dans n'importe zone de Texte d'un article, d'une rubrique ou d'une brève, inscrivez :

|texte=André vous dit Bonjour
|taille=60
|hauteur_ligne=72
|couleur=0000ff
|couleur_fond=ee0|largeur=600|align=center|padding=10|float=none
>

Télécharger

Et voici le résultat

Seul l'argument texte est obligatoire, les autres arguments sont optionnels. La taille sera par défaut de 16px, la couleur sera noire et la police utilisée sera la police livrée par défaut avec SPIP : Dustismo, (dans le dossier /squelettes-dist/polices). Ainsi,

|texte=André vous dit Bonjour>

Donnera ceci :

Options

L'option float positionne la boîte d'image typographique dans le paragraphe suivant (left ou right), de la largeur spécifiée.
L'option align aligne le texte à l'intérieur de la boîte d'image. Exemple :

|police=BodoniUltraFLFCond.ttf|texte=
“...une citation, par exemple”|taille=36|align=center|padding=10
|float=right|couleur=0000ff
|largeur=240|couleur_fond=eeeeee>

Télécharger

Résultat...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam urna dui, commodo at, viverra id, pulvinar egestas, eros. Phasellus cursus. Proin ullamcorper ligula in libero. Aliquam est dolor, cursus in, consectetur nec, accumsan ut, tortor. Etiam id est eu eros pulvinar gravida. Maecenas lacus purus, hendrerit quis, auctor quis, tempus a, neque. Mauris consectetur volutpat nulla.

Et ceci...

|police=BodoniUltraFLFCond.ttf|texte=
Bonne nuit !
|taille=54
|hauteur_ligne=60
|couleur=0000ff
|couleur_fond=eeee00
|largeur=600
|align=right
|padding=10
|float=none
>

Télécharger

Résultat...

Intégrer des éléments multimédia dans SPIP

André Vincent — 2006-01-16T04:40:00Z

Intégrer de éléments multimédia (sons, vidéo, animations) dans un article de SPIP est très simple. On procéde sensiblement de la même façon que pour intégrer une image.

Il est d'abord impératif de lire la documentation en ligne de SPIP :

Joindre des documents

Attention : il faut d'abord Valider l'article avant d'y joindre un document, sinon nous perdrons nos ajouts et modifications. Une fois l'article validé cliquez à nouveau sur Modifier cet article.

À gauche, dans Ajouter un document, cliquer sur Parcourir et choisir un document multimédia sur votre poste. Assurez-vous que le nom du fichier possède bien une extension convenable (.mp3, .avi, .swf, .mpg, .ogg, .mov, .mid, etc.).
Cliquer sur Télécharger.
Dans le cas d'un document multimédia, SPIP détectera automatiquement le type de document, sa dimension et la taille du fichier. Si le document peut être affiché dans la page, SPIP vous proposera deux cases pour redimensionner le document. Selon vos besoins et la largeur de l'espace disponible dans votre page, vous pourrez ainsi redimensionner l'affichage du document. Voir plus bas le cas des dfichiers audio.
Optionnellement, vous pouvez aussi ajouter un Titre et une Description au document qui agiront comme légende sous l'affichage du document multimédia.
Une fois téléchargé, vous verrez apparaître sous la vignette du document, des balises à insérer dans votre article, du type ; copiez et collez cette balise dans le texte de l'article.

Tout comme dans le cas des images, pour contrôler le défilement du document dans la page, ajoutons dans la balise :

|center pour centrer le document sur une seule ligne dans son propre pararaphe.
|left ou |right pour insérer la vignette et sa légende (s'il y a lieu) dans le paragraphe suivant, en le faisant flotter (float) à gauche ou à droite.

Exemple : pour générer ce qui suit :


Le HMSC Chicoutimi: De la glorieuse flotte militaire canadienne.

C'est donc une vignette cliquable qui s'affiche (avec une légende, s'il y a lieu). En cliquant sur la vignette, le document multimédia associé s'ouvrira dans une nouvelle fenêtre ou proposera de télécharger le document sur le poste du visiteur si celui-ci n'a pas le logiciel ou l'extension (plug-in) convenable requise pour exécuter le document.

Si l'on désire plutôt affiché directement dans l'article de la page web, il faut modifier ainsi la balise :

pour insérer le document dans l'article, comme l'exemple qui suit :

Le HMSC Chicoutimi

De la glorieuse flotte militaire canadienne.

Dans ce dernier cas, SPIP détecte automatiquement la dimension du document. Selon vos besoins et la nature du document vous pouvez modifier ces dimensions. Dans le cas de notre citron, la dimension originale était de 760 x 430 ; nous l'avons réduit à 260 x 180 afin qu'il s'ajuste à la largeur de la colonne de notre article.

Dans le cas d'un document Quick Time, il faut prévoir d'ajouter de 16 pixels à la hauteur du document pour laisser apparaître le barre de contrôle.

Pour un document Quick Time ne comportant uniquement qu'une ou des pistes sonores, il faut indiquer une hauteur d'au moins 16 pixels et d'une largeur vous convenant (dans l'exemple suivant, nous avons spécifié 400 pixels, pour faire apparaître la barre de contrôle de la séquence sonore.

Son Midi inclus dans un fichier QuickTime

Fichier QuickTime : /IMG/mov/fullmoon.mov
60k - 14 minutes (format midi inclus dans QuickTime)

Dans le cas d'une séquence vidéo Quick Time, il faut prévoir d'ajouter 16 pixels à la hauteur détectée et proposée par SPIP afin de faire apparaître la barre de contrôle sous la séquence vidéo.

Fichier QuickTime (.mov)

Haute définition - 1.6 Mo - extrait de 40 secondes
Source BBC - Fichier original : 70 Mo

Fichier Windows Media (.avi)

Basse définition - 404 ko - 8 secondes

Dans tout les cas, on peut aussi spécifier des paramètres supplémentaires de cette façon :

Voici une liste de ces paramètres pour :

De source externe

Une version rock du célèbre Canon de Pachelbel. Nous avons simplement copier/coller le code d'Embed disponible sur You Tube.

<param name="movie" value="http://www.youtube.com/v/iCVqyH1aOXg"></param><param name="wmode" value="transparent"></param></object>

Autres versions rock et classique du Canon

Pour obtenir plusieurs petites séquences vidéo disposées les unes à côté des autres, nous avons réduit leurs tailles et les avons insérés dans des divisions flottantes.

<div style="float:left"> <param name="movie" value="http://www.youtube.com/v/y6j3Fu9DES8"></param><param name="wmode" value="transparent"></param></object> </div> <div style="float:left"> <param name="movie" value="http://www.youtube.com/v/8t2oqEshlaI"></param><param name="wmode" value="transparent"></param></object> </div> <hr style="clear:both;" />

Sources de sons et musiques

Sons midi : Dictionnaire de la musique

Sources de séquences vidéo

You Tube

Modifier les styles CSS et les squelettes de SPIP

André Vincent, Étienne Lafrenière-Lemieux — 2005-12-03T05:00:00Z

Diverses méthodes de modification de l'apparence des squelettes de bases de SPIP.

Sommaire

Mise à jour de cet article effectuée le samedi 3 décembre 2005.

ATTENTION : les méthodes exposées ici remplacent celles décrites précédemment dans ce même article. Ces méthodes, beaucoup plus simples à mettre en oeuvre tiennent compte des modifications apportées dans la gestion des squelettes de SPIP à partir de la version 1.8.2. Il faudra donc veiller à mettre votre version SPIP à jour avant d'utiliser les méthodes décrites ici.

Préalable

Dupliquer le dossier /dist/ installé à la racine de SPIP (ce dossier contient les squelettes et les feuilles de styles propres à ce jeu de squelettes distribué par défaut avec SPIP).
Renommer ce dossier /squelettes/. En présence d'un dossier portant exactement ce nom, SPIP utilise les squelettes qu'il contient en lieu et place de ceux contenus dans le dossier /dist/. Lors d'une éventuelle mise à jour de SPIP, le contenu de ce dossier restera intact, contrairement aux modifications que l'on aurait apporté directement dans le dossier /dist/, qui seront écrasées lors d'une mise à jour.
Pour la suite des choses, toutes les modifications que nous apporterons aux squelettes et aux feuilles de styles de SPIP s'effectueront dans ce nouveau dossier /squelettes/.
En cas de malheur, il y aura ainsi toujours possibilité de retourner aux originaux intacts dans le dossier /dist/.

1. Modification des styles

Ici, nous n'interviendrons pas directement sur les squelettes. Nous allons plutôt modifier les feuilles de styles existantes : typographie.css et habillages.css.

1. Placer un bandeau en entête de toutes les pages du site
Exemple : Coalition pour les CÉGEPS

Nous devons d'abord dégager de l'espace dans le haut de toutes les pages pour y placer notre image. Une brève analyse de la strucutre HTML des diverses pages (à l'aide de l'excellente extension Web Developper pour Firefox), nous permet de dégager les constats suivants :
- la structure de base de tous les squelettes place la navigation et tout le contenu dans 2 divisions :
  et
- sauf la page contenant tout le Plan du site qui ne possède qu'une seule division :
- les propriétés de ces trois divisions se trouvent dans la feuille de style /squelettes/habillage.css.

Nous allons donc ajouter à la fin de la feuille de styles /squelettes/habillage.css la règle pour modifier la marge du haut des trois divisions, sachant que l'image de notre bandeau a 100px de haut et que nous désirons conserver un espace de 30px entre le bandeau et du contenu de nos pages.
Remarque : Nous pourrions modifier directement chacune des divisions, mais en l'ajoutant à la fin, nous gardons intact notre original et nous n'avons qu'une seule règle à modifier si nous augmentons la hauteur du bandeau.

#navigation, #principal, #plan { margin-top: 140px; }

Créer dans le dossier /squelettes/ un dossier pour contenir les images, dans notre exemple, le dossier /img/ et y télécharger l'image du bandeau.

Toujour à la fin de notre feuille de style /squelettes/habillage.css, nous allons maintenant établir notre règle pour placer l'image du bandeau :

body { background-image: url(img/bandeau-coalition.gif); background-repeat: no-repeat; background-position: left top;
}

Nous allons aussi cacher le petit logo de SPIP sous le menu de gauche (nous reprendrons plus loin dans cet article le lien vers SPIP dans un pied de page) :

img.spip_logos { display: none }

2. Placer une image sous le menu de gauche
Exemple : Coalition pour les CÉGEPS

Pour obtenir le résultat désiré, nous allons fixer un padding-bottom d'une dimension légèrement plus élevé que la hauteur de l'image à placer en arrière fond ; l'image est positionnée au centre, au bas de la division #navigation :

#navigation { padding-bottom: 340px; background-image: url(img/bouteille.png); background-position: center bottom; background-repeat: no-repeat;
}

3. Modifier la typographie
Exemple : Coalition pour les CÉGEPS

Pour changer les attributs typographiques, il suffit de modifier la feuille de styles /squelettes/typographie.css. Nous procéderons de la même façon que précédemment, en ajoutant nos modifications à la fin.

.contenu h1, h2.titre-extrait { font-family: Verdana, Tahoma, sans-serif; }
.extrait { border: 0; padding: .5em; background-color: #eee;
}

2. Modification des squelettes

1. Ajout d'un pied de page dans tous les squelettes.

Nous voulons ajouter des informations en pied de page sur toutes les pages. Voici le code que nous aimerions ajouter :

> <div id="pied"> <a class="spip_out" href="#URL_SITE_SPIP" title="<:accueil_site:>"> <:accueil_site:> </a> | <a class="spip_out" href="<BOUCLE_contact(AUTEURS) {id_auteur=1}>[(#URL_SITE_SPIP)/][(#URL_AUTEUR)]</BOUCLE_contact>" title="<:info_contact:>"> <:info_contact:> </a> | <a class="spip_out" href="#URL_SITE_SPIP/plan.php3" title="<:plan_site:>"> <:plan_site:> </a> | <a class="spip_out" href="#URL_SITE_SPIP/ecrire/" title="<:espace_prive:>"> <:espace_prive:> </a> | <a class="spip_out" href="http://spip.net" title="<:site_realise_avec_spip:>"> SPIP </a> | <a class="spip_out" href="#URL_SITE_SPIP/backend.php3" rel="nofollow" title="<:syndiquer_site:>"> <span style="border:1px solid; border-color:#FC9 #630 #330 #F96; padding:0 3px;font:bold 10px verdana,sans-serif; color:#FFF; background:#F60; text-decoration:none; margin:0;"> RSS </span> </a>
</div>

Voir le résultat dans le bas de la page sur Coalition pour les CÉGEPS.

Quelques explications

div id="pied"
un nouveau sélecteur de division dont nous devrons définir les propriétés à la fin de notre feuille de styles /squelettes/habillage.css
a class="spip_out"
sélecteur d'ancre (hyperlien) dont les propriétés sont déjà définis dans la feuille de style /squelettes/typographie.css
href="#URL_SITE_SPIP
balise SPIP qui n'exige pas de mise en boucle et qui rendra l'adresse absolue du site ; dans notre exemple, cette balise produira : http://coalition-cegeps.qc.ca.edu.
<:accueil_site:>, <:plan_site:>, <:info_contact:>, etc.
sont des chaînes de caractères multilingues prédéfinies dans dans les fichiers de langues de SPIP et qui seront rendu dans le contexte de langue choisie par l'administrteur du site ou le rédacteur de l'article ou encore du visiteur sur un site multilingue. Ainsi, <:accueil_site:> affichera « Accueil du site » dans des pages en français et « Home Page » dans des pages en anglais.
est une BOUCLE de SPIP qui va extraire de la base de données le nom de l'auteur numéro 1 (généralement l'administrateur ou le webmestre du site) et construira un lien vers une page de cet auteur avec un formulaire pour lui adresser un message.

 L'inclusion du formulaire dans toutes les pages
 Nous pourrions évidemment copier et coller le code dans tous les squelettes sommaire.html, article.html,rubrique.html, etc. Mais advenant la nécessité de modifier ce bout de code, il faudra aller systématiquement modifer ce code dans tous les squelettes. Il existe un raccourci SPIP qui va grandement nous simplifier la vie. C'est l'inclusion d'un fichier dans les squelettes. Voici comment procéder :
 Créer dans le fichier /squelettes/inc-pied.html ou sous tout autre nom que vous désirez.
 Dans le bas de chacun des squelettes, juste avant la fermeture de la balise , copier et coller la ligne suivante :
<INCLURE(page.php3) {fond=inc-pied} {lang}> Ainsi, on n'a qu'un seul fichier à maintenir (inc-pied.html) et dont le contenu sera inclus dans chacun de nos squelettes à l'indroit désiré. Cette technique est désignée sous le terme générique de « Construction modulaire » de gabarits par inclusion.