Biotechno pour les profs

Adapter son SarkaSPIP

Patrice HARDOUIN — 2011-01-30T17:20:52Z

Les prérequis

Pour commencer ce tutoriel nous avons besoin d'un site internet avec SPIP d'installé. Nous utilisons la version 2 de SPIP. Pour nous faciliter la vie nous allons également utiliser un squelette prêt à l'emploi (SarkaSPIP 3). Mais les procédures indiquées ci-après fonctionnent pour tous les plugins de squelettes existants (il faudra juste chercher un peu pour retrouver quel fichier affiche quoi dans cet autre squelette prêt à l'emploi).

– SPIP ;
– SarkaSPIP.

Les plugins de SPIP 2

Pour installer les plugins de SPIP il suffit de suivre la procédure énoncée dans l'article Utiliser la fonction d'installation automatique des plugins de SPIP.
Nous choisissons au minimum le plugin CFG et SarkaSPIP 3.

– La liste des plugins fonctionnant bien avec SarkaSPIP 3 ;
– Un autre plugin fonctionnant avec SarkaSPIP 3.

Pour ma part, j'ai également ajouté le plugin Boutons d'administration supplémentaires qui a le mérite de nettement me simplifier la vie et évite d'utiliser le plugin crayon que je trouve peu pratique (surtout en bas débit internet).

Modifier les icônes des fichiers joints aux articles ou aux rubriques

La liste des icônes choisis pour remplacer ceux fournis par défaut avec SPIP est donnée dans l'article Icônes LibreOffice pour SPIP.

Il suffit de recopier les icônes choisis dans le répertoire de SPIP /squelette/vignettes et c'est tout (il faudra peut-être les renommer par exemple depuis odt-2-86923.png vers odt.png).

Aider les visiteurs pour ouvrir les fichiers OpenDocument

Tous les fichiers joints présentés sur le site sont dans un format OpenDocument (et, le cas échéant, au format svg et pdf). Nombreux sont les collègues ne connaissant pas l'existence de la suite LibreOffice.

Nous avons donc décidé de faire afficher une note en haut de chaque article renfermant un ou plusieurs fichier au format OpenDocument.

Résultat de l'annonce concernant les fichiers OpenDocument dans la partie publique du site

Dans le répertoire /squelette/lang nous créons le fichier local_fr.php dans lequel nous plaçons :

 'INFORMATION : à cet article est joint un fichier OpenDocument. En cas de difficultés pour ouvrir ce fichier, se référer à la notice suivante : Comment utiliser les fichiers OpenDocument ?',
'annonceooos' => 'INFORMATION : à cet article sont joints des fichiers OpenDocument. En cas de difficultés pour ouvrir ces fichiers, se référer à la notice suivante : Comment utiliser les fichiers OpenDocument ?'
); ?>

Les quelques lignes de code de notre nouveau fichier local_fr.php pointent vers un article déjà écrit sur le site Comment utiliser les fichiers OpenDocument ? et expliquant comment installer et utiliser LibreOffice pour lire et éditer les fichiers présentés dans l'article.

Nous avons 2 versions de cette annonce : une au singulier (un seul fichier OpenDocument dans l'article) et une au pluriel (au moins 2 fichiers OpenDocument dans l'article).

Ensuite nous créons la noisette (fichier renfermant un petit bout de code réutilisable) suivante (/squelette/noisettes/article/inc_annonceooo.html) :


   [(#TOTAL_BOUCLE|>{1}|?{<:annonceooos:>,<:annonceooo:>})]

Cette noisette (inc_annonceooo.html) va regarder dans l'article s'il y a des fichiers avec les extensions nommées dans le script (odt, ods...). Nous y ajoutons également les extensions pour le "vieux" format StarOffice car le site existant depuis 2001 nous avons peut-être encore des fichiers de ce type qui traînent.

Enfin, il nous faut appeler cette noisette dans l'affichage de chaque article. Dans SarkaSPIP 3, l'affichage des articles est géré par la noisette inc_article_description.html qui se trouve dans le répertoire (si vous avez utilisé l'installation automatique citée ci-dessus) /plugins/auto/sarkaspip3/noisettes/article/

Nous allons donc recopier cette noisette dans notre répertoire de squelettes (/squelette/noisettes/article/inc_article_description.html) afin de pouvoir l'amender d'un appel vers notre nouvelle noisette OOo sans modifier les fichiers originaux de SarkaSPIP3.

Une fois recopiée, nous éditons la noisette /squelette/noisettes/article/inc_article_description.html pour y ajouter cela (appel à notre noisette inc_annonceooo) :

[(#REM)  ]
[(#INCLURE{fond=noisettes/article/inc_annonceooo}{id_article})]

L'emplacement le plus pratique serait avant la ligne du "logo gauche" comme indiqué ci-après :

 [(#REM)  ]
[(#INCLURE{fond=noisettes/article/inc_annonceooo}{id_article})] [(#GET{logo}||image_reduire{#ENV{taille_logo}})
]

Ajouter une validation de la licence de diffusion lors de la demande de publication

J'aurais souhaiter placer un système de case à valider avant de lancer la demande de publication d'un article afin que chaque rédacteur confirme que sa production respecte bien la licence CCbySA.

Mais, devant mes faibles compétences en PHP (et avec les idées des participants à l'IRC freenode #spip), j'ai décidé de faire simple en modifiant juste les messages de SPIP.

Pour cela, j'ai ajouté au fichier local_fr.php (dans squelette/lang) les 2 appels suivants qui modifient les appels originaux contenus dans les fichiers de traductione en français de l'espace privé de SPIP /ecrire/lang/ecrire_fr.php).

'text_article_propose_publication' => 'Cet article est maintenant proposé à la publication. Cela sous-entend qu\'il respecte toutes les clauses énoncées dans l\'article "Concevoir un cours de A à Z" et notamment que tout son contenu adhère à la licence du site. Si ce n\'est pas le cas il faut repasser cet article sous le statut "rédaction".',
'text_article_propose_publication_forum' => '

Le forum attaché à cet article (en bas de page) est là pour que vous puissiez donner votre avis concernant cette demande de publication.'

Ce qui nous donne le fichier local_fr.php complet suivant :

 'INFORMATION : à cet article est joint un fichier OpenDocument. En cas de difficultés pour ouvrir ce fichier, se référer à la notice suivante : Comment utiliser les fichiers OpenDocument ?',
'annonceooos' => 'INFORMATION : à cet article sont joints des fichiers OpenDocument. En cas de difficultés pour ouvrir ces fichiers, se référer à la notice suivante : Comment utiliser les fichiers OpenDocument ?',
'text_article_propose_publication' => 'Cet article est maintenant proposé à la publication. Cela sous-entend qu\'il respecte toutes les clauses énoncées dans l\'article "Concevoir un cours de A à Z" et notamment que tout son contenu adhère à la licence du site. Si ce n\'est pas le cas il faut repasser cet article sous le statut "rédaction".',
'text_article_propose_publication_forum' => '

Le forum attaché à cet article (en bas de page) est là pour que vous puissiez donner votre avis concernant cette demande de publication.'
); ?>

Voici le résultat lorsqu'un auteur passe en "demande de publication" son article :

message concernant la licence (affiché lors de la demande de publication)

Éviter la confusion entre les forum

Le site de Biotechno pour les Profs a mis en place rapidement un forum extérieur (sous Vanilla). Il y a donc régulièrement des visiteurs qui souhaitent s'inscrire au forum en s'inscrivant en fait pour la partie rédactionnelle du site.

Cela se traduit par un nombre délirant de faux auteurs dans SPIP et surtout des mails en pagaille de visiteurs qui n'arrivent pas à se connecter à Vanilla avec leur login/mdp de SPIP.

Pour tenter de régler ce problème on va utiliser la même "astuce" qu'au précédent item : modifier le message par défaut de SPIP concernant les inscriptions.

On veut arriver à cela :

Annonce pour éviter la confusion avec l'inscription du forum phpBB

On va donc ajouter ce script dans le fichier /squelette/lang/local_fr.php :

'pass_espace_prive_bla' => 'L\'espace privé de ce site est ouvert aux visiteurs, après inscription. Une fois enregistré, vous pourrez consulter et commenter les articles en cours de rédaction, proposer des articles et participer à toutes les discutions sous les articles. 
Si vous souhaitez participer au forum de biotechno vous n\'êtes pas au bon endroit ! Inscrivez-vous au forum en cliquant sur ce lien : forum.biotechno.fr.
',

Vous remarquerez que nous avons intégré directement la mise en page CSS dans le script de traduction. Ce n'est pas très académique (il faudrait placer ces commandes CSS dans une feuille de style séparée, mais cela risquait de compliquer un peu trop la chose surtout que le site n'a aucune vocation à devenir multilingue).

Le fichier /squelette/lang/local_fr.php est dorénavant de la sorte :

  'INFORMATION : à cet article est joint un fichier OpenDocument. En cas de difficultés pour ouvrir ce fichier, se référer à la notice suivante : Comment utiliser les fichiers OpenDocument ?',
'annonceooos' => 'INFORMATION : à cet article sont joints des fichiers OpenDocument. En cas de difficultés pour ouvrir ces fichiers, se référer à la notice suivante : Comment utiliser les fichiers OpenDocument ?',
'text_article_propose_publication' => 'Cet article est maintenant proposé à la publication. Cela sous-entend qu\'il respecte toutes les clauses énoncées dans l\'article "Concevoir un cours de A à Z" et notamment que tout son contenu adhère à la licence du site. Si ce n\'est pas le cas il faut repasser cet article sous le statut "rédaction".',
'text_article_propose_publication_forum' => '

Le forum attaché à cet article (en bas de page) est là pour que vous puissiez donner votre avis concernant cette demande de publication.',
'pass_espace_prive_bla' => 'L\'espace privé de ce site est ouvert aux visiteurs, après inscription. Une fois enregistré, vous pourrez consulter et commenter les articles en cours de rédaction, proposer des articles et participer à toutes les discutions sous les articles. 
Si vous souhaitez participer au forum de biotechno vous n\'êtes pas au bon endroit ! Inscrivez-vous au forum en cliquant sur ce lien : forum.biotechno.fr.' );
?>

Personnaliser le favicon

Le favicon est le petit icone qui apparait à côté de l'adresse du site dans Mozilla Firefox (ou tout autre butineur internet).

affichage du favicon "bio" sous Mozilla Firefox

La procédure pour créer son favicon.

Une fois créé, votre icone prendra place dans le répertoire /squelette/images et sera (moyennant quelques rechargement de page et vidage de cache du butineur) affiché en lieu et place du favicon de SPIP (ou de SarkaSPIP le cas échéant).

Article suivant : Gestion des sites dans SPIP

Simplifiez-vous le forum avec Vanilla

Patrice HARDOUIN — 2011-01-30T16:50:18Z

Quelques trucs et astuces pour vous faciliter l'installation de Vanilla

Pourquoi opter pour un forum comme Vanilla

Après plusieurs années passées à utiliser phpBB force est de constater qu'il faut consacrer un temps énorme en administration sur un tel forum pour ne pas risquer de se faire spammer ou pire, utiliser les ressources de votre serveur pour expédier, à votre insu, des milliers de spams à travers le monde.

Vanilla est tellement simple à utiliser et à configurer pour peu que l'on n'utilise que des fonctionnalités de base, c'est à dire un forum pour discuter et communiquer.

Le forum de Biotechno pour les Profs regroupe de nombreux collègues de Biotechno mais, avec un ou deux post par jour, ne nécessite pas la mise en place d'une véritable usine à gaz comme phpBB.

Il existe d'autres solutions de forum légers ou encore d'autres mais là n'est pas le lieu de les comparer. Le choix s'est porté sur Vanilla uniquement pour des raisons de facilité et de rapidité d'installation dans notre cas de figure (surtout en prenant en compte la faiblesse de l'accès internet dans ce Tiers-Monde des télécommunications que sont les DOM-TOM-COM) ainsi que des fonctionnalités simples et faciles à administrer.

Vanilla

Le site officiel de Vanilla

Le forum Vanilla est très simple et trivial à installer que l'on ne peut que renvoyer au site officiel pour le téléchargement et l'installation.

Une fois installé il faut placer les fichiers de traduction de l'interface vers le français

Utiliser la fonction d'installation automatique des plugins de SPIP

Patrice HARDOUIN — 2009-01-18T08:21:40Z

Préparation de l'installation automatique

La fonctionnalité d'installation automatique de SPIP est à activer. Pour cela vous devez créer les répertoires suivants (par FTP [1]) sur votre installation de SPIP :
– /lib
– /plugins
– /plugins/auto

Ajout de listes de plugins

Vous devez être administrateur. Allez dans Configuration->Gestion des plugins dans l'espace privé de votre site SPIP.

Deux listes de plugins sont présentées par défaut. Vous pouvez les activer en cliquant dessus puis en cliquant sur "Valider".

Vous aurez alors une liste de plusieurs centaines de plugins utilisables avec votre SPIP.

Installation automatique des plugins SPIP.

ATTENTION : certains plugins ne sont pas dédiés à la version 2 de SPIP (bien lire la description des plugins que vous souhaitez installer). De plus, il est conseillé d'installer un nombre minimum de plugins car certains peuvent interférer entre eux et provoquer des dysfonctionnements du site. Moins vous en aurez installés plus facile ce sera pour vous de trouver lequel pose éventuellement des problèmes et le désactiver (en le décochant simplement de la liste des plugins installés).

L'avantage de ce type d'installation est la facilité de mise à jour. Il suffit de relancer une installation automatique du plugin à mettre à jour (Attention toutefois car certains fichiers qui auraient pu être supprimés dans la nouvelle version du plugin ne seront pas supprimé par l'utilisation de l'installation automatique).

Les liens de SPIP

Si vous ne savez pas ce qu'est SPIP (CMS) alors je vous conseille la lecture des liens suivants :
– Site officiel de SPIP ;
– SPIP Contrib ;
– Plugins SPIP

[1] Je précise aux heureux possesseurs d'une distribution GNU-Linux Ubuntu que vous avez accès au FTP directement depuis Nautilus. Pour cela faites Raccourci/Se connecter à un serveur

Plugins de Squelettes SPIP

Patrice HARDOUIN — 2008-11-05T03:04:45Z

Voici quelques productions personnelles qui méritent d'être testées et corrigées (pas complètement conformes XHTML strict).

Le site des Naturalistes de Mayotte

capture du site www.naturalistes.info

– copyright : le design est largement inspiré d'un ancien template WordPress utilisé pour une ancienne version du site Orange Blender. Si quelqu'un retrouve la trace de ce template je remettrai le nom de son auteur à sa place.
– site : http://www.naturalistes.info ;
– visible sur tous les navigateurs : http://browsershots.org/website/htt... ;

– le dernier article en date muni du mot-clé "edito" se place automatiquement à gauche de la page sommaire.

plugin squelettes des Naturalistes de Mayotte

Squelette sous la forme d'un plugin.

Le site de Biotechno pour les Profs

capture du site www.biotechno.fr

– copyright : Creative Commons Share Alike ;
– site : http://www.biotechno.fr ;
– visible sur tous les navigateurs : http://browsershots.org/website/htt... avec quelques nuances pour certaines versions de MSIE ;
– ATTENTION : ce plugin ne modifie que la page sommaire pour l'instant car il est encore en développement pour les autres pages.

plugins squelettes de Biotechno pour les Profs

Construire ses propres squelettes SPIP (cours n°1)

Patrice HARDOUIN — 2008-11-04T18:53:55Z

Ce tutoriel montre comment créer ses propres squelettes 100% personnalisés en utilisant les boucles de SPIP et le langage CSS de mise en page.

Imaginer un design

Je conseille toujours à tous les webmestres qui utilisent SPIP depuis peu de temps de toujours utiliser les squelettes par défaut (installés d'office dès l'installation de SPIP) puis de réfléchir aux orientations que l'on souhaite prendre une fois que le site est véritablement lancé et qu'il possède du contenu.

Le site pris en exemple est le site de Biotechno pour les Profs (www.biotechno.fr). Ce site est déjà bien rôdé et à déjà eu pas mal de liftings les années précédentes. Dorénavant, nous avons besoin de clarifier la navigation sur ce site afin de permettre un accès facile à tous les articles et publications proposés.

L'équipe d'administration du site à donc soumis plusieurs remarques importantes comme la mise en évidence des mises à jours d'articles qui sont quasiment aussi importantes que les publications de nouveaux articles...

Pour cette première étape, rien de tel que de griffoner sur un bout de papier ce que l'on cherche à avoir pour son site :

Rechercher des exemples de mise en page

Il est très pratique de se référer au site Alsacreation qui renferme des tas d'informations et de tutoriels sur le design Web.

Pour commencer rabattons-nous sur la page Modeles de mise en page en CSS. Le modèle se rapprochant le plus de notre schéma précédent serait le n°16 :

gabarit de mise en page original d'Alsacreations

Premières adaptations du gabarit de mise en page choisi

On va commencer par recopier le fichier html de gabarit sous un autre nom de manière à toujours garder le modèle original au cas où. Pour tout de suite correspondre aux exigences de SPIP, on va dénommer ce fichier sommaire.html.

Peu importe où nous recopions ce fichier, l'essentiel c'est de savoir le retrouver facilement. Le premier travail d'adaptation concerne uniquement le fichier en question (sommaire.html) et ne nécessite pas d'utiliser ni d'installer SPIP (pour l'instant).

En ouvrant notre fichier sommaire.html avec notre navigateur préféré (Firefox évidemment) on peut lire le code source (Affichage/Code source de la page).

Tout ce code représente la mise en page (partie CSS au début du fichier) et le contenu (code HTML). Nous verrons par la suite qu'il sera important de séparer le CSS du HTML en deux fichiers.

Dans mon schéma il n'était pas question d'une colonne de gauche. Je vais donc alléger mon code HTML et modifier le code CSS pour obtenir ce que je recherche :
– Je retire toute la div de la colonne gauche :

   menu gauche 
  largeur fixe : 150px avec utilisation de la propriété float:left; 
   Menu 1 
  Menu 2 
  Menu 3 
  Menu 4

– et je retire tous les bouts de CSS qui s'y rapportent :

#gauche {
float:left;
width: 150px;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}

J'ai donc le résultat suivant :

premiere modif du gabarit

La colonne de gauche est toujours virtuellement présente. Il nous faut procéder à quelques rectifications du code CSS :

– on retire le margin-left: 150px; de la partie #centre du code CSS et l'affaire est dans le sac :

seconde modif du gabarit

Il ne reste plus qu'à faire passer la colonne de droite sur toute la hauteur. Pour cela, je déplace uniquement le code HTML suivant :

  header  (voir tous les modèles) 
    Menu 1 
  Menu 2 
  Menu 3 
  Menu 4

Et je le mets juste après le

troisième modif du gabarit

Approfondissements de la mise en page générale

Je souhaite avoir le bas de la colonne principale scindé en deux sous-colonnes de taille identique.

Pour cela j'ajoute le code suivant dans la partie CSS de la page (avant le /*]]>*/) :

div#moitie_gauche { width:50%; float:left; position: relative;
} div#moitie_droite{ width:50%; float:right; position: relative;
}

Puis j'ajoute les blocs correspondants dans la page, juste après

Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.
Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

(NOTE : le texte aléatoire inséré dans l'exemple ci-dessus a été généré automatiquement par http://lorem.game-on-net.com/).

Le résultat obtenu se rapproche beaucoup du schéma rapide de départ :

quatrième modif du gabarit

Pour terminer sur ce premier tutoriel, nous allons simplement déjà élargir la colonne de droite qui n'est pas assez grande à notre goût pour pouvoir y intégrer un menu SPIP convenable.

On modifie donc la partie CSS comme suit :

#centre {
background-color:#9999CC;
margin-right: 260px;
} #droite {
float:right;
width: 260px;
}

Ce qui donne le résultat final suivant :

cinquième modif du gabarit

On a maintenant une bonne trame (gabarit) pour notre site ou, au moins, pour notre première page "sommaire". Il ne reste plus qu'à préparer ce design à recevoir les boucles SPIP.

La suite : Construire ses propres squelettes SPIP (cours n°2)

Construire ses propres squelettes SPIP (cours n°2)

Patrice HARDOUIN — 2008-11-04T18:53:35Z

Le but de ce second cours de tutoriel est de préparer sereinement l'intégration des boucles SPIP dans notre gabarit de page pour créer notre premier squelette.

Nous allons donc créer tout ce qui sera nécessaire pour le travail qui suivra.

Quels logiciels utiliser

Avant toute chose, nous aurons besoin d'un bon navigateur internet qui ne nous fera pas de mauvaises surprise. Nous choisirons donc Firefox que nous augmenterons de l'extension Web Developer.

Puis nous aurons besoin d'un bon logiciel d'édition. Sous GNU-Linux on utilisera BlueFish ou Quanta+ (ou tout autre éditeur de son choix). Sous MS Windows il en existe également de bons qui proposent la coloration syntaxique évitant bien des erreurs de saisie : http://www.framasoft.net/rubrique15... et http://www.framasoft.net/rubrique32....

Nous aurons également besoin d'un logiciel de traitement d'images qui est cité dans le chapitre suivant (The Gimp).

Mise en place de DIV supplémentaires

Les DIV sont des blocs dans lesquels nous pourrons placer du texte, des images... Chaque DIV délimite une zone sur l'écran.

Comme l'a déjà expliqué (entre autres) Raphaël Goetter dans son livre sur les CSS : Trop de DIV tue les DIV !

Mais nous serons bien obligé de rajouter quelques DIV afin d'obtenir le design que nous recherchions dans le précédent cours : Construire ses propres squelettes SPIP (cours n°1).

Nous allons également attribuer une couleur à chacune des DIV pour pouvoir mieux visualiser nos transformations.

préparation de la coloration des DIV sur notre schéma

À propos des couleurs...

Dans les CSS nous utiliserons préférentiellement les couleurs nommés par leur code hexadécimal. Il existe des générateurs de codes couleur sur le web : http://www.informatiquegifs.com/ser.... De manière plus générale, tous les logiciels de traitement d'image donnent les valeurs hexadécimales des couleurs. Je ne peux que vous conseiller d'installer un logiciel du genre The Gimp que nous utiliserons d'ailleurs dans un autre tutoriel.

Nous obtenons donc le résultat suivant (je vous laisse éditer le code pour noter les changements effectués dans ce dernier) :

sixième modif du gabarit

Truc CSS

Pour éviter bien des problèmes de différences de mise en page entre navigateurs, le code suivant a été saisi au début des CSS :
* {
margin:0;
padding: 0;
}
Ce dernier mets les valeurs des marges et écarts intra-blocs à zéro : http://blog.alsacreations.com/2004/...

Préparer l'accueil du futur squelette

À cette étape de notre tutoriel, nous devons avoir déjà compris comment installer SPIP ainsi que son arborescence de fichiers.

Pré-requis concernant SPIP

– Installation de SPIP ;
– SPIP pas à pas.

Nous verrons dans un autre tutoriel comment transformer nos squelettes en plugins. Pour l'instant, nous allons placer nos squelettes dans le répertoire /squelettes à la racine de notre site SPIP. Le répertoire /squelettes n'existe pas par défaut dans SPIP, il va vous falloir le créer si besoin.

Répertoire /squelettes de SPIP

Dans ce répertoire /squelettes nous allons créer un sous-répertoire /squelettes/css qui nous permettra de placer les feuilles de styles. Un autre sous-répertoire /squelettes/images nous sera également utile pour placer les images du design du site.

Pour finir notre préparation à l'intégration des boucles SPIP à notre squelette, nous allons séparer le code CSS du code XHTML de notre fichier sommaire.html :
– le code CSS se retrouvera dans le fichier /squelettes/css/bio_habillage.css
– le code XHTML restera dans le fichier /squelettes/sommaire.html

Dans le fichier sommaire.html nous ferons tout simplement un appel au fichier de code CSS :

Dans le morceau de code précédent, des balises SPIP ont déjà été intégrées. Pour plus de détail sur ces balises, veuillez vous référer à la documentation en ligne : http://www.spip.net/fr_rubrique143.html.

septième modif du gabarit

première version des CSS

Dorénavant, lorsque vous allez sur votre site SPIP vous avez une page d'accueil ressemblant à cela :

sixième modif du gabarit

Dans un prochain cours nous intègrerons toutes les balises et boucles de SPIP nécessaires à l'affichage de notre page de squelette.

Construire ses propres squelettes SPIP (cours n°3)

Patrice HARDOUIN — 2008-11-04T18:53:09Z

Dans ce troisième volet de notre tutoriel, nous allons faire afficher ce que l'on souhaite à SPIP à l'intérieur de notre gabarit prédéfini.

Pour cela nous allons vraiment contruire la première page de notre squelette SPIP : la page sommaire du site (sommaire.html).

Nous ne nous occuperons pas de la mise en page fine pour l'instant. Nous ne nous soucierons ici que de faire apparaître les informations que l'on souhaite à l'endroit que l'on veux.

Toutes les étapes du tutoriel ci-après sous-entendent que vous ayiez du contenu dans votre site sinon les boucles n'afficheront rien et ce sera normal.

La documentation officielle sur les boucles et balises de SPIP

À ce point de notre tutoriel, la consultation régulière de la documentation officielle de SPIP est inévitable : http://www.spip.net/fr_rubrique143.html. il est conseillé d'avoir en permanence un onglet de notre navigateur ouvert sur cette même documentation officielle.

Épurer le squelette sommaire de la distribution SPIP

D'accord, nous créons de squelettes de toutes pièces, mais la seule référence à la documentation officielle ne va pas nous donner toutes les astuces pour afficher rapidement et sûrement les informations que l'on veut voir apparaître sur nos pages du site.

Tutoriel fully compatible avec SPIP X.X.X

Les squelettes de la distribution ont le mérite de toujours être à jour des dernières nouveautés de SPIP (en ce qui concerne les boucles et les balises). Nous allons donc réutiliser les morceaux de code fournis avec les squelettes par défaut afin de ne pas perdre de temps et, surtout, d'avoir un squelette 100% compatible avec la dernière version de SPIP que l'on utilise.

Ce tutoriel est basé initiallement sur la version 1.9.2b de SPIP mais le respect des quelques consignes qui suivent permettent à ce tutoriel d'être compatible avec toutes les versions futures de SPIP.

Nous allons donc récupérer le fichier /dist/sommaire.html que nous allons copier et le renommer : /squelettes/sommaire-dist.html afin de l'avoir à portée de main et ne pas le confondre avec notre /squelettes/sommaire.html déjà présent dans ce répertoire.

Ensuite, nous allons effacer toutes les DIV et les ID, CLASS du fichier /squelettes/sommaire-dist.html afin de ne garder que les boucles et les balises de SPIP intégrée au code XHTML de la page.

Exemple :
– Le code suivant :

[(#REM) Les deux derniers articles ]


<:derniers_articles:>



[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
[(#SURTITRE)]
#TITRE
[(#SOUSTITRE)]
[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]
[(#INTRODUCTION)]

– devient :

[(#REM) Les deux derniers articles ]

<:derniers_articles:>



[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
[(#SURTITRE)]
#TITRE
[(#SOUSTITRE)]
[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]
[(#INTRODUCTION)]

Des fichiers supplémentaires

Lors de la lecture du code du fichier sommaire-dist.html on peut noter la présence de plusieurs . Ces codes permettent d'insérer tout un paquet de code présent dans un autre fichier (fichier répondant au nom xxx.html).

Nous allons donc rapatrier les 4 fichiers appelés par des INCLURE dans le fichier sommaire-dist.html.

Nous aurons donc, dorénavant, les fichiers supplémentaires suivants (après renomage par l'ajout, ici, du suffixe "bio") :
– /squelettes/inc_biorubriques.html
– /squelettes/inc_biohead.html
– /squelettes/inc_bioentete.html
– /squelettes/inc_biopied.html

Adaptation de l'en-tête XHTML

On va simplement recopier l'en-tête du fichier sommaire-dist.html vers le fichier sommaire.html en remplaçant la fonction INCLURE () par

#CACHE{7200}



[(#NOM_SITE_SPIP|textebrut)]
[]

Puis, dans le fichier inc_biohead.html, nous allons rajouter le préfixe "bio_" à tous les noms des feuilles de style, même pour les feuilles de style que nous n'avons pas encore créées ([(#CHEMIN{css/bio_habillage.css}|direction_css)]). Nous ne devons pas oublier le "css" au début de l'adresse afin de bien préciser que nos feuilles de style sont dans le sous-répertoire du même nom.

Mais cette dernière manipulation ne donne pas de résultats visibles. Pour voir un effet sur le site, il faut procéder à des modifications entre les deux balises XHTML et .

Adaptation du menu des rubriques

Pour cela, rien de plus simple. Nous insérons juste un dans la

de notre page sommaire.html :


[(#REM) Menu de navigation par rubriques ]

Nous avons perdu l'affichage prévu du moteur de recherche.
Pour corriger cela, nous ajoutons la balise [(#FORMULAIRE_RECHERCHE)] tout au début de notre fichier inc-biorubriques.html.

Les boucles manquantes

Dans le fichier sommaire.html ci-joint, nous avons remplacé toute les boucles manquantes de manière à faire apparaître les informations que nous souhaitons faire figurer sur la première page du site.

Je vous invites à lire le code pour voir quels ajouts ont été faits pour obtenir le résultat suivant :

L'image qui est visible sur la capture d'écran est celle qui a été chargée directement depuis l'espace privé de SPIP, dans la partie Configuration (image du site).

tous les fichiers ci-dessous (tutoriel SPIP n°3) en une seule archive .zip
bio_habillage.css	inc-bioentete.html
inc-biohead.html	inc-biopied.html
inc-biorubriques.html	sommaire.html

Dans le tutoriel qui suivra on va peaufiner les paramétrages d'affichage (internationalisation, personnalisation, validation XHTML...) avant de pouvoir s'attaquer aux CSS afin de produire un site esthétiquement valable (enfin, on l'espère).

Construire ses propres squelettes SPIP (cours n°4)

Patrice HARDOUIN — 2008-11-04T18:52:57Z

Le résultat obtenu au précédent cours ne nous satisfait pas encore au niveau des informations publiées.

Pour obtenir exactement ce que l'on souhaitait initialement, nous allons devoir travailler sur de nouveaux fichiers.

Internationalisation des termes utilisés

SPIP est fort pratique et vous permet de créer un site multilingue. Mais si les termes utilisés dans vos squelettes sont écrits directement dans la langue de Molière cela posera des problèmes lorsque vous afficherez vos articles anglais ou hongrois.

Pour cela, des termes génériques ont été utilisés dans les squelettes. Ils se présentent sous la forme suivante <:mon_mot_a_traduire:>.

Certains mots existent déjà dans SPIP (Configuration/Gestion des langues/Fichiers de langues) et il convient d'utiliser ceux-là en priorité car ils bénéficient de leurs traductions dans un sacré paquet de langues.

Mais, et c'est notre cas, il existe des situations où nous avons besoin d'augmenter ce fichier de langues. Nous allons faire cela en ajoutant un fichier local_fr.php dans notre répertoire de squelettes (/squelettes/local_fr.php).

fichier local_fr.php

S'approprier les formulaires

Les deux formulaires utilisés dans la page sommaire présentent des inconvénients. Ils ne sont pas adaptés pour être contraints à tenir dans une colonne de 260 pixels de large.

Il va donc falloir les modifier.

Pour cela, nous allons créer un répertoire /squelettes/formulaires dans lequel nous allons coller les fichiers /dist/formulaires/inscription.html et /dist/formulaires/recherche.html.

Pour le formulaire de recherche nous allons complètement le modifier pour utiliser le moteur de Google (cela diminue un peu la charge du serveur et augmente le référencement des pages du site sur ce moteur de recherche).

Pour cela nous avons besoin d'ajouter une image au répertoire /squelettes/images :

et le code du fichier /squelettes/recherche.html sera le suivant :

[(#REM) formulaire utilisant google en lieu et place du moteur de recherche interne]




...') this.value=''" maxlength="255"
value="<:info_rechercher:>..." />  : #NOM_SITE_SPIP"
alt="OK" src="#URL_SITE_SPIP/#CHEMIN{images/ok.gif}" />

Pour le formulaire inscription.html, nous allons juste diminuer la taille des champs de saisie de manière à ce que ces derniers ne dépassent plus de la page :

formulaire inscription.html

Amélioration de l'affichage du menu des Rubriques

Le simple affichage des rubriques du site ne nous satisfait pas. Nous voulons extraire une des rubriques pour qu'elle figure en fin de liste. De plus, nous voulons ajouter des liens à cette liste, liens qui ne sont pas des rubriques du site mais des renvois vers le forum phpBB ou vers des pages d'aide à la navigation qui n'existent pas encore (mais qui seront créées dans un prochain tutoriel).

Nous allons donc modifier les boucles et les affichages de la page /squelettes/inc-biorubriques.html :

fichier in-biorubriques.html

Personnalisation du pied de page

Nous modifions le pied de page (/squelettes/inc-biopied.html) de manière à afficher toute une liste de lien-images. Les images sont placées dans la rubrique /squelettes/images et le fichier inc-biopied.html modifié comme suit :

fichier inc-biopied.html

Note : nous avons décidé d'intégrer les balises 'div id="pied"' directement dans le fichier /squelettes/inc-biopied.html ; nous avons donc retiré ces mêmes balises du fichier /squelettes/sommaire.html :

fichier sommaire.html

Ajout de la publicité pour OpenOffice.org

Le site de "Biotechno pour les Profs" présente la particularité de ne proposer au téléchargement quasiement que des fichiers OpenDocument.

Une publicité en page d'accueil aiguillant les visiteurs vers le téléchargement de la suite bureautique OpenOffice.org est donc prévu.

Il suffit d'ajouter ce code au fichier /squelettes/sommaire.html :


[(#REM) Menu de navigation par rubriques ]

[(#REM) Telecharger OOo ]

<:telecharger_ooo:>

Linux
Macintosh
Windows

 [(#REM) fin div id="telecharger_ooo"]
[(#REM) Inscription au site ]
#FORMULAIRE_INSCRIPTION
[(#REM) fin div id="droite"]

La validation du code XHTML

Avant de pouvoir passer au design proprement dit (avec la personnalisation des fichiers CSS) nous devons nous assurer qu'aucune erreur de syntaxe n'est présente dans le code.

Nous utilisons pour cela le validateur de la W3C :
http://validator.w3.org/

Si vous travaillez en local vous pouvez copier le code de votre page (le code produit par SPIP) dans le validateur "by File Upload". Une extension de Firefox : Offline Page Validator permet de faire la même chose qu'expliqué juste avant, mais d'un seul clic.

Une fois que notre squelette est complètement débuggé et complètement conforme à la norme XHTML 1.0 strict nous pouvons passer au tutoriel suivant...

Le squelette à la fin du cours n°4

Construire ses propres squelettes SPIP (cours n°5)

Patrice HARDOUIN — 2008-11-04T18:52:43Z

Nous allons maintenant travailler sur la (les) feuille(s) de styles ou CSS (Cascading Style Sheet). La fréquentation assidue de ressources comme le site Alsacreations (déjà cité en exemple dans de précédents tutoriels) est impérative. De même, la possession d'un aide-mémoire CSS comme CSS précis & concis des éditions O'Reilly ou Aide-mémoire CSS2 des éditions OEM EYROLLES (il en existe plein d'autres chez d'autres éditeurs) est fortement recommandé afin d'accélérer notre travail et s'assurer que les codes utilisés existent bel et bien.

Nous allons configurer d'abord l'affichage de chacune des parties de notre squelette puis nous nous attaquerons aux couleurs générales du site pour finaliser notre page.

L'en-tête de la page

Notre en-tête présente le logo du site et sa description (cette dernière avait d'ailleurs été oubliée dans les précédents tutoriels : ajouter la balise [(#REM) Description du site ][

(#DESCRIPTIF_SITE_SPIP)

] dans le fichier /squelettes/inc-bioentete.html).

Le titre du site n'apparaît à l'affichage que pour permettre une navigation aisée sans les CSS (cas des navigateurs textuels pour les mal-voyants...).

Nous allons donc supprimer de l'affichage ce titre inutile (inutile car repris dans l'image du site) :

/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }

Cette portion de notre page /squelettes/css/bio_habillage.css aura pour effet de supprimer de l'affichage tout bloc possédant la class="invisible".

Il nous reste une bodure inesthétique autour de l'image du site. Pour cela, jettons un oeil sur le code de la page (source de la page sous Firefox). Nous nottons que l'image en question possède la classe .spip_logos.

.spip_logos {
border: none;
}

Pour faire un peu "première page d'hebdomadaire", nous rajoutons un code barre en décoration de fond :

div#header {
height: 190px;
background-image: url(../images/biotechno_barcode.png) ;
background-position: right;
background-repeat: no-repeat;
}

Enfin, la petite phrase de présentation du site est un peu trop collée a bord gauche de la page :

div#header p {
padding-left: 1em;
}

Notre en-tête est maintenant finalisée au niveau de la forme. Nous reviendrons pour les couleurs plus tard.

écran 1280x1024

écran 800x600

Les deux captures d'écran ci-dessus montre le résultat obtenu suivant deux résolutions d'écran différentes. Le design passe bien, même avec des résolutions plutôt faiblardes (800x600)

L'affichage du menu des rubriques

Nous souhaitons un affichage des rubriques un peu plus joli qu'une simple liste à puces rondes. Pour cela, nous allons utiliser les icônes du projet Tango.

/* Menu des rubriques */ div.rubriques li { margin-left: 30px;
} div.rubriques li, div.rubriques li a{ list-style-position: outside; text-decoration:none; font-family: verdana,helvetica,sans-serif; font-size : 1em; vertical-align:middle;
} div.page_principale li, div.page_principale li a { } div.rubriques a:hover {
} div.page_principale li a:hover { } div.rubriques li { list-style-image: url(../images/repertoire.png);
} div.rubriques li.on { list-style-image: url(../images/repertoire_ouvert.png);
} li#mots_cles { list-style-image: url(../images/mots_cles.png);
} li#docs_joints { list-style-image: url(../images/fichier_joint.png);
} li#lien_forum { list-style-image: url(../images/forum_mini.png);
} div.rubriques li.le_cercle { list-style-image: url(../images/le_cercle.png);
} div.rubriques li.le_cercle_on { list-style-image: url(../images/le_cercle_ouvert.png);
} div.rubriques a.on { }

Le formulaire de recherche

Nous allons assortir notre champ de recherche avec le bouton que nous avons choisi :

/* Formulaire de recherche */ form.formrecherche div input.formrechercheimage { vertical-align: text-bottom; } form.formrecherche { padding: 6px;
} input.formrecherche {
vertical-align: text-bottom; top : 6px; padding-left: 6px; width: 150px; border: 0px solid; font-weight: bold; font-family: verdana,helvetica,sans-serif; font-size : 1em;
} /* couleurs formulaire de recherche */
input.formrecherche { border-color: blue; color: #ececec; background-color: #0255c2;
}

Le formulaire d'inscription

On va le détacher un peu des bords et lui redonner un peu plus de présence :

/* Formulaire Inscription */
.formulaire_inscription { padding:10px;
} .formulaire_inscription legend { font-weight: bold;
} .formulaire_inscription p { margin: 10px 10px 10px 10px; text-align:justify;
} .formulaire_inscription label { font-family:sans-serif; text-align: left;
} .formulaire_inscription input#nom_inscription, .formulaire_inscription input#mail_inscription { border:none; font-family:sans-serif; font-weight:bold;
} .formulaire_inscription .spip_bouton input { border:none; font-family:sans-serif; font-weight:bold;
} .formulaire_inscription .spip_bouton input:hover,.formulaire_inscription input#nom_inscription, .formulaire_inscription input#mail_inscription { }

Le Fil d'Ariane

Nous prévoyons déjà que certains liens seront cliquables sur ce Fil d'Ariane :

/* Fil d'Ariane */ div#haut, div#haut>a { font: 0.71em sans-serif; text-decoration:none;
} div#haut>a:hover { text-decoration:underline; }

Le pied de page

On peaufine un peu le pied de page en centrant les icône-liens et en retirant la bordure des images :

/* Pied de page */
div#pied { padding-top: 3px; clear:both; text-align:center;
}

On complète le CSS concernant l'absence de bordure aux images. On en profite pour supprimer les bordures aux boutons du plugin Boutons d'admin supplémentaires qui est certainement LE plugin à installer sous SPIP pour travailler rapidement :

/* En-tete du site et boutons admin supplementaires (plugin) et pied de page */
.spip_logos, div#boutons_admin_supp img, div#bouton_montrer img, div#pied img {
border: none;
}

La publicité pour OpenOffice.org

Nous allons créer un joli encart dont le but est d'inciter les visiteurs du site à télécharger la suite bureautique OpenOffice.org :

/* Telecharger OOo */
div#telecharger_ooo { background:white url(../images/ooo_mascote.png) no-repeat bottom right; border: inset; margin:10px 10px 10px 10px; padding: 5px 5px 5px 5px;
} div#telecharger_ooo h2 { font-family: sans-serif; text-align: center;
} div#telecharger_ooo ul li { list-style-position: inside;
} li#linux{ list-style-image: url(../images/linux.png);
} li#mac { list-style-image: url(../images/macosx.png);
} li#windows { list-style-image: url(../images/windows.png);
} div#telecharger_ooo ul li a { vertical-align:super; text-decoration: none; font-size:1.15em; font-weight: bold;
} div#telecharger_ooo ul li a:hover {
}

Le Centre de la page

Tout le reste de la page est réservé à l'affichage particulier à la page sommaire. Nous allons donc créer les styles dédiés correspondant. Mais c'est le but du prochain tutoriel...

la feuille de style bio_habillage.css en fin de tutoriel n°5

Construire ses propres squelettes SPIP (cours n°6)

Patrice HARDOUIN — 2008-11-04T18:49:19Z

Nous allons travailler un peu différemment que dans le tutoriel n°5. Les caractéristiques de mise en page se trouvent répétées dans les 7 parties (7 DIVs) de notre centre de page. Essentiellement, nous aurons deux types de mise en page : les 3 premières bandes (dernier article publié, dernière brève publiée, dernier article modifié) et les 4 blocs de listes (les derniers articles publiés, les derniers articles modifiés, les derniers posts du forum phpBB, les derniers articles syndiqués des sites référencés).

Une touche graphique

Nous avons décidé d'agrémenter notre corps de page de gros icônes. Le projet Tango présente l'avantage de proposer leurs icônes dans un format vectoriel. Un simple export en format Bitmap de 100pixels de large convient tout à fait à ce que nous souhaitons faire.

Edition d'un fichier image vectoriel avec Inkscape

Le logiciel Inkscape permet de travailler sur les fichiers images vectoriels de type .svg

Les logos communs

Parmi les 5 icônes choisis, certains vont de retrouver à plusieurs endroits similaires :

	dernier article publié	liste des derniers articles publiés
	dernier article modifié	liste des derniers articles modifiés
	dernière brève
	les derniers posts du forum phpBB
	les derniers articles syndiqués

/* ****************************** */
/* */
/* Les listes de la page sommaire */
/* */
/* ****************************** */ /* les logos */
div#dernier_article, div#liste_derniers_articles, div#derniere_breve, div#liste_forum, div#derniere_modif, div#liste_dernieres_modifs, div#liste_sur_web {
background-repeat: no-repeat;
} div#dernier_article, div#derniere_modif, div#derniere_breve { background-position: 0 0.3em ;
} div#liste_derniers_articles, div#liste_forum, div#liste_dernieres_modifs, div#liste_sur_web { background-position: right 0.3em ;
} div#dernier_article, div#liste_derniers_articles {
background-image: url(../images/article.png);
} div#derniere_breve {
background-image: url(../images/breve.png);
} div#liste_forum {
background-image: url(../images/forum.png);
} div#derniere_modif, div#liste_dernieres_modifs {
background-image: url(../images/miseajour.png);
} div#liste_sur_web {
background-image: url(../images/web.png);
}

Les 3 premières bandes d'accroche

Voici tout simplement le code CSS des 3 premières bandes d'accroche :

/* dernier article */
div#dernier_article { text-align: center; padding: 0.77em 0.77em 0.77em 0.77em; min-height:105px; height:auto !important; height:105px; } div#dernier_article a { font: small-caps bolder 2.5em sans-serif; text-decoration: none;
} div#dernier_article a:hover { } div#dernier_article div.texte { font-family: cursive; font-style:italic;
} /* derniere modif */ div#derniere_modif { text-align: center; padding: 0.77em 0.77em 0.77em 0.77em; min-height:102px; height:auto !important; height:102px; } div#derniere_modif a { font: small-caps bolder 2.5em sans-serif; text-decoration: none;
} div#derniere_modif a:hover { } div#derniere_modif div.texte { font-family: cursive; font-style:italic;
} /* derniere breve */ div#derniere_breve { padding: 0.77em 0.77em 0.77em 0.77em; text-align: center; min-height:80px; height:auto !important; height:80px; } div#derniere_breve a { font: small-caps bolder 2.5em sans-serif; text-decoration: none;
} div#derniere_breve a:hover {
}

(Note : une petite modification de l'affichage a été faite pour la dernière brève publiée, cette modification a été portée au fichier /squelettes/sommaire.html)

Les 4 blocs de listes

Tout d'abord un travail sur les dates pour les faire apparaître dans une image. L'image n'est autre que l'icône de la dernière brève à laquelle nous avons retiré la date du "31" qui était inscrite et nous l'avons légèrement réduite. Toutes ces manipulations sur l'image ont été faites avec le logiciel The Gimp.

/* Dates des 4 encarts */ dl.date_list { clear:both; display:block;
} dl.date_list dt { clear:both; padding-top:7px; line-height:13px; float:left; text-align:center; height:60px; width:60px; background:url(../images/blocnotes.png) no-repeat; font-weight:bold; font-size:10px;
} dl.date_list dt small { display:block; font-weight:bold; font-size:13px;
} dl.date_list dd { padding-left:5px; padding-top:8px; padding-bottom:2px ; min-height:60px; height:auto !important; height:60px; position:relative;
}

Enfin, le style d'affichage des 4 encarts sera identique pour chacun d'entre eux :

/* Les 4 encarts de la page sommaire */ div#liste_derniers_articles, div#liste_forum, div#liste_dernieres_modifs, div#liste_sur_web { padding: 0.65em 0.65em 0.65em 0.65em; } div#liste_derniers_articles h2, div#liste_forum h2, div#liste_dernieres_modifs h2, div#liste_sur_web h2 { font-family: sans-serif; text-align: center; font-size: 1.6em; padding-bottom: 1.5em;
} div#liste_derniers_articles a, div#liste_forum a, div#liste_dernieres_modifs a, div#liste_sur_web a { text-decoration: none; font-size: 1.4em;
} div#liste_derniers_articles a:hover, div#liste_forum a:hover, div#liste_dernieres_modifs a:hover, div#liste_sur_web a:hover {
}

La mise en couleurs du site

L'état du site à la fin du tutoriel n°6

La dernière couche de peinture fera l'objet du prochain tutoriel...