BioSPIP et BioSquelettes v. 4.0
Essayez BioSPIP 4.1 béta 2 !
Sur le Web : Site tournant sur BioSPIP 4.1 beta2
Voici une version 4.1 béta 2 de BioSPIP : c’est probablement la dernière version avant la version stable finale de BioSPIP 4.1. Il ne devrait pas y avoir de problème à son utilisation sauf bug passé inaperçu lors des nombreux tests.
Quoi de neuf dans la version 4.1 beta 2 ?
La version beta 2 passe les tests de validation XHTML 1.0 strict et CSS2 sur quasiment toutes les pages (il reste encore des problèmes sur les formulaires générés par SPIP lui-même, mais BioSPIP 4.1 n’y est pour rien !).
La version beta 2 intègre les mots-clés et les sondages liés aux articles. Il y a encore, éventuellement, de la mise en page pour rendre ces fonctionnalités plus jolies et efficaces.
...et certainement encore d’autres trucfs que j’aurais oublié.
Quoi de neuf dans la version 4.1 beta 1 ?
D’abord, nous allons détailler les différences par rapport à la version précédente de BioSPIP 4.0 :
De nombreux bugs d’affichage ont été corrigés (les participants au forum peuvent être fiers de leurs contributions, elles ont été très utiles pour cette mise à jour).
De nombreuses fonctionnalités ont été repensées et automatisées :
la feuille de style a été simplifiée et commentée. Les parties compliquées ont été déplacées dans deux autres feuilles de styles CSS : _biospip_style.css et _spip_style.css. Il n’est pas conseillé de modifier ces deux feuilles de styles tant que les commentaires n’y auront pas été ajoutés (ce sera fait dans la version finale) ;
le fichier d’étiquetage ICRA a été automatisé pour les sites de l’éducation nationale. Elle est désactivée par défaut mais vous pouvez l’activer dans /squelettes/inc_meta.html ;
la page /squelettes/sommaire.html a été simplifiée et la page /squelettes/rubrique.html a été repensée pour y faire apparaître un encart de droite plus "fun" (en fait c’est éhontément plagié sur le site de Télérama, mais eux ont une mise en page par tableaux alors que BioSPIP utilise exclusivement les CSS !) ;
même si une page /squelettes/breves.html a été ajoutée (elle avait été oubliée lors du packaging de la 4.0) elle n’est pas utilisée car une page /squelettes/liste_breves.html a été pensée pour être bien plus pratique ;
devant le tollé du moteur de recherche Google, j’ai laissé la possibilité à tous les utilisateurs de choisir (par défaut c’est le moteur interne à SPIP, mais vous pouvez régler sur Google dans /squelettes/inc_recherche.html). Ainsi, une page de résultats de recherches à été mise en place et elle affiche les pertinences de résultats dans des graphiques jauge tout en CSS (/squelettes/recherche.html) ;
fini les pubs par défaut, il n’y en a pas dans BioSPIP 4.1 (en fait ce n’était pas prévu qu’elles le soient non plus dans BioSPIP 4.0 mais on était allé un peu vite dans le packaging !) ;
Les réglages encore à faire !
Et oui, il y a encore des réglages à faire avant de sortir la version finale. En voici la Todo List :
les squelettes ont été testés essentiellement sous Firefox/linux. Les rares utilisateurs de MS Internet Explorer sont les bienvenus pour testes ces squelettes sur ce navigateur étrange ;
vérifier que l’ensemble du squelette BioSPIP est multilingue (en l’occurence, le fichier /squelettes/recherche.html ne l’est pas encore car une fonctionnalité en php empêche encore la chose) ;
commenter et améliorer les feuilles de styles appronfondies : /squelettes/rep_css/_biospip_style.css, /squelettes/rep_css/_spip_style.css et /squelettes/rep_css/_print.css. Il y a des tags à ajouter car ils sont dans les squelettes mais pas utilisés dans les feuilles de styles (designs particuliers pour les chapo, adresses mails, liens internet, surtitre, soustitre...) ;
la fonctionnalité d’agenda n’est pas encore pleinement opérationnelle à cause de bugs de SPIP (la date ne passe pas dans les fichiers inclus) ;
la fonctionnalité album Walma3 est à corriger au niveau des CSS de cette page (/squelettes/article-album.html) afin de mieux l’intégrer au site ;
certains auront peut-être des erreurs du type "fond interdite". Dans ce cas, je les invite à trouver une solution (il faut généralement modifier le fichier .htaccess) dans les archives de la liste spip@rezo.net sur http://www.spip.net/fr.
Les configurations par mots-clés
La tentative de normalisation a été utilisée pour cette version de BioSPIP :
des explications ici : http://spip-epona.org/article.php3?... ;
Il faut créer un groupe de mots-clés "Configuration" et y placer le mot-clé "edito" : en attribuant "edito" à un article, celui-ci passe en édito de la première page du site (en lieu et place de la liste des derniers articles). Le groupe de mots-clés "Configuration" est désigné pour les "Articles" et accessible aux seuls "Administrateurs" ;
Il faut créer un groupe de mots-clés "_Article" et y placer les mots-clés "album" et "credits". Le mot-clé "album" permet de transformer un article avec des images jointes en un diaporama Walma3. Le mot-clé "credits" permet de transformer un petit article des crédits du site en reprenant les crédits automatiques de BioSPIP.
Il peut être créé un groupe de mots-clés "_Rubrique" avec le mot-clé "agenda" mais cette fonctionnalité n’est pas encore pleinement opérationnelle (voir la raison ci-dessus).
Les deux derniers groupes de mots-clés doivent être réglé pour "Un seul mot à la fois" et utilisation exclusive des "Administrateurs".
La feuille de style simplifiée
Le principe de personnalisation est le même qu’avec la version 4.0 à ceci près que c’est devenu beaucoup plus simple.
Pour personnaliser votre site vous n’avez besoin que de 5 images (profitez-en pour regarder les exemples fournis : ATTENTION car aucune image n’est libre de droit dans les exemples de sites, vous devez donc impérativement en changer) et trouver 3 ou 4 couleurs différentes en accords avec les images en question.
La feuille de style est reprise ci-dessous. Elle est configurée, dans l’exemple, pour le site du lycée professionnel de Kawéni.
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* partie à adapter pour modifier fondamentalement le style du site */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* couleur de fond du site (bande vide à droite et à gauche) */
body
{
background-color: #589 ;
}
/* Ici on règle la taille du bandeau haut en fonction des tailles des images insérées */
h1#header
{
height: 238px ;
background-image: url(../rep_pics/kaweni/hippocampe.jpg) ;
}
h1#header a
{
width: 480px ;
height: 238px ;
background-image: url(../rep_pics/kaweni/en_tete_kaweni.jpg) ;
left: 310px ;
top: 0px ;
}
div#menu
{
top:238px ;
}
/* la petite image qui permet d'effectuer un roll-over sur les titres des rubriques */
div#menu, div#menu dl dt a:hover, #menu dt a.lienon
{
background-image: url(../rep_pics/kaweni/bg_menu.gif) ;
}
/* réglage des couleurs des sous-menus déroulants */
#menu li
{
background-color: #528a9c;
}
#menu li a
{
color: white;
}
#menu li a:hover
{
background-color: white ;
color: black;
}
/* décoration de gauche du site */
div#contenu
{
background-image: url(../rep_pics/kaweni/bordure_mosaique.jpg) ;
}
/* couleurs des liens et des bordures (en général on préfère qu'elles soient identiques) */
div#menu dl dt a {
border-right-color: #d43;
}
div#menu dd, div#conteneur {
border-color: #d43;
}
div#contenu h2
{
background-image: url(../rep_pics/kaweni/mini_frangipanier.gif) ;
border-bottom-color: #d43 ;
}
div#contenu h3
{
border-bottom-color: #d43 ;
border-left-color: #d43 ;
}
div#contenu h2, div#contenu h3, div#contenu a, p#footer, p#footer a, div.forum-repondre a, div.forum-chapo a, div.forum-repondre-message a, div.forum-titre a:hover
{
color: #d43 ;
}
/* couleur des liens pour le survol : plus foncée */
div#contenu a:hover, p#footer a:hover, div.forum-repondre a:hover, div.forum-chapo a:hover, div.forum-repondre-message a:hover, div.forum-titre a:hover
{
color: #900 ;
}
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* fin de la partie à adapter pour modifier fondamentalement le style du site */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
à titre de comparaison, voici la feuille de style pour le site du Collège de M’Gombani. Si vous modifiez uniquement ces quelques lignes vous pouvez donc obtenir un site vraiment différent.
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* partie à adapter pour modifier fondamentalement le style du site */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* couleur de fond du site (bande vide à droite et à gauche) */
body
{
background-color: #dea ;
}
/* Ici on règle la taille du bandeau haut en fonction des tailles des images insérées */
h1#header
{
height: 200px ;
background-image: url(../rep_pics/mgombani/mgombani_redim.jpg) ;
}
h1#header a
{
width: 400px ;
height: 150px ;
background-image: url(../rep_pics/mgombani/logo_ColMgombani.png) ;
left: 370px ;
top: 50px ;
}
div#menu
{
top:200px ;
}
/* la petite image qui permet d'effectuer un roll-over sur les titres des rubriques */
div#menu, div#menu dl dt a:hover, #menu dt a.lienon
{
background-image: url(../rep_pics/mgombani/bg_menu.gif) ;
}
/* réglage des couleurs des sous-menus déroulants */
#menu li
{
background-color: darkgreen;
}
#menu li a
{
color: white;
}
#menu li a:hover
{
background-color: white ;
color: black;
}
/* décoration de gauche du site */
div#contenu
{
background-image: url(../rep_pics/mgombani/logo_ColMgombani_vert.png) ;
}
/* couleurs des liens et des bordures (en général on préfère qu'elles soient identiques) */
div#menu dl dt a {
border-right-color: #ab4;
}
div#menu dd, div#conteneur {
border-color: #ab4;
}
div#contenu h2
{
background-image: url(../rep_pics/mgombani/little_apple.gif) ;
border-bottom-color: #ab4 ;
}
div#contenu h3
{
border-bottom-color: #ab4 ;
border-left-color: #ab4 ;
}
div#contenu h2, div#contenu h3, div#contenu a, p#footer, p#footer a, div.forum-repondre a, div.forum-chapo a, div.forum-repondre-message a, div.forum-titre a:hover
{
color: #ab4 ;
}
/* couleur des liens pour le survol : plus foncée */
div#contenu a:hover, p#footer a:hover, div.forum-repondre a:hover, div.forum-chapo a:hover, div.forum-repondre-message a:hover, div.forum-titre a:hover
{
color: darkgreen ;
}
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* fin de la partie à adapter pour modifier fondamentalement le style du site */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
Pour ceux qui ont déjà configuré un BioSPIP 4.0, vous n’aurez qu’à faire de simples copier-coller vers cette nouvelle génération de feuille de style simplifiée.
Comment créer son style de page sous BioSPIP 4.1
Pour créer votre style, c’est la même méthode qu’avant :
vous créez un répertoire /squelettes/rep_pics/mondesign dans lequel vous placez vos 5 images ;
vous copiez le contenu de la page /squelettes/rep_css/biospip.css dans un nouveau document /squelettes/rep_css/mondesign.css ;
vous configurez votre fichier /squelettes/rep_css/mondesign.css pour qu’il prennent en charge vos images et vos couleurs ;
vous modifiez l’appel à la feuille de style dans /squelettes/inc_meta.html :
[(#REM) Feuille de styles a modifier pour personaliser son design]
@import url(#DOSSIER_SQUELETTE/rep_css/mondesign.css);
rechargez la page après l’avoir recalculée et c’est tout.
Installation
Ne sont disponibles que les BioSquelettes, ce qui signifie que vous devez installer au préalable SPIP 1.8.3 (dernière version qui corrige bien des failles de sécurité).
Ensuite vous dézippez l’archive de BioSquelettes 4.1 béta 2 à la racine de votre site web et vous passez le répertoire /IMG/_article_PDF en autorisation lecture/ecriture/execution (chmod 777) ou au maximum que peut le faire votre hébergement.
C’est tout, quasiment tous les fichiers se trouvent dorénavant dans le répertoire /squelettes et vous n’avez plus de fichiers .php3 à la racine de votre site.
Rapportez tous les problèmes et améliorations possibles sur le forum, dans le salon réservé à cette version en développement.
Si vous avez besoin d’aide vous pouvez utiliser le forum dédié à cette dernière version en tests : http://biospip.frbb.net/viewforum.f.... Merci