Stage Spip à l’Injep : c’est parti !

Sur le même sujet

SPIP

- Installer SPIP sur un serveur distant

- Créer et modifier les feuilles de style d’un site SPIP

- Outils SPIP : l’interactivité du site

Dans la même rubrique

- Outils SPIP : le mystère des boucles dévoilé !
- Avril 2005 : sortie des versions 1.8 et 1.8.1 de SPIP
- Atelier : créer un site vitrine et collaboratif avec SPIP
- Les Cahiers du programmeur SPIP

Du 10 au 13 septembre 2007, quinze courageux stagiaires ont franchi la première étape d’un stage de trois mois que l’Institut national de la jeunesse et de l’éducation populaire propose pour la seconde année consécutive : Construire un site Spip de A à Z. Il faut dire qu’un pro de Spip les accompagne : Emmanuel Lamotte, développeur et webmaster indépendant, connu sous le pseudo d’Erational comme membre actif de la communauté Spip et créateur ou contributeur de plusieurs plugins : Spip2spip, squelette-éditeur, filtre "license", import d’articles en masse…

Le programme de ces quatre premiers jours de stage, centrés sur le html, les styles css et les squelettes/boucles SPIP, figure ci-dessous. Outre les outils, il s’agissait aussi d’acquérir une méthode de travail pour créer son site Spip de toutes pièces ou en réutilisant des squelettes graphiques d’un site déjà existant.

Voici un échantillon des projets de sites des stagiaires :

une association de parents d’enfants schizophrènes,

une association tournée vers le SEL - système d’échange local,

un site associatif de quartier,

le site d’une MJC de la Creuse,

le site Internet et intranet de la FNEPE (Fédération des écoles des parents et des éducateurs),

le site d’une association marseillaise mettant en rapport des artistes et des projets éducatifs,

le site du syndicat de la librairie,

un site de quartier à Paris XIIe,

le site d’une association d’insertion professionnelle pour personnes handicapées,

le site du CRIJ Bourgogne,

un site de solidarité internationale coordonné par le CIJ Cergy,

un site d’accompagnement à la formation du BPJEPS (brevet professionnel de la jeunesse et de l’éducation populaire),

…

Un stage en présenciel et à distance

Deux journées de regroupement sont prévues à l’Injep les 29 octobre et 14 décembre (journée de clôture). Trois mois au total pour achever la construction de son site, ou aller le plus loin possible dans la compréhension du fonctionnement technique de Spip afin d’établir un cahier des charges précis pour un sous-traitant et de pouvoir dialoguer avec lui sereinement.

Entre ces temps de retrouvailles, six forums en ligne permettront [1] à chacun de se réunir tous les quinze jours à distance en "synchrone" pour aborder à chaque fois un thème prévu à l’avance et faire le tour des sites.

La souplesse de la liste de discussion (pour échanger questions et réponses) et du wiki (pour déposer des ressources utiles au groupe) - voir ci-dessous - permettra également à chacun de se sentir accompagné en "asynchrone" dans son parcours du combattant (un combat contre des squelettes, ça ne vous rappelle pas quelques films ;-) ?).

Le pari de ce travail en ligne est double :

qu’une dynamique d’entraînement et de collaboration se poursuive à distance,

que les stagiaires prennent le réflexe de chercher sur les sites et les forums des réponses à leurs questions. Les communautés Spip sont réactives lorsqu’on les interroge après avoir pris le temps de regarder si la réponse à sa question n’a pas déjà été apportée 10 ou 20 fois (ce qui est souvent le cas ;-)).

Les outils de communication du stage

une liste de discussion,
Chatzilla, pour discuter en ligne tous les 15 jours,
quelques semaines avant le début du stage, un accès a été ouvert à chaque stagiaire sur un wiki privé leur permettant de :

se présenter,
prendre connaissance du déroulé de la formation
et des préparations à effectuer (installer un site Spip chez un hébergeur distant, lui adjoindre les squelettes Lebanon modifiés, installer le plugin "squelette-éditeur" permettant de modifier/créer des squelettes sans logiciel ftp, simplement depuis l’interface d’administration de son site),
trouver et déposer des ressources utiles au stage.

Ce wiki a été construit sur une partie du site www.generationcyb.net, à l’aide des squelettes "Gribouille", et a été transformé en rubrique privée grâce au plugin "Accès restreint". Cela permet aux stagiaires et tuteurs (E. Lamotte et moi), avec leurs mêmes codes d’accès, de proposer des articles à la publication sur GénérationCyb. C’est aussi un but de ce stage : produire des contenus et les diffuser sous licence libre (Creative commons) afin qu’ils soient utilisés, enrichis et rediffusés par d’autres. Un exemple : les squelettes Lebanon, conçus à l’origine par Romy de http://romy.tetue.net, ont été modifiés par Emmanuel, qui a également écrit pour Générationcyb les tutoriaux suivants : Des squelettes Lebanon 2007 pour votre site Spip, Lebanon 2007 : Analyse de la CSS du squelette, Lebanon 2007 : Modifier l’aspect graphique (programmation CSS) , Lebanon 2007 : Ajouter un menu (programmation SPIP).

Ce sont ces squelettes au look blog et au code simple et limpide qui ont été choisis pour le stge Spip Injep 2007, l’objet du stage étant de les transformer peu à peu pour apporter à son site un look "portail", de nouvelles fonctionnalités, etc.

Programme des quatre premiers jours du stage

lundi : Let’s SPIP

Matin :

9h30-10h : accueil-café

10h-10h30 : présentation du stage

10h30-12h15 : présentation des stagiaires et de leur objectif (par stagiaire : 3 mn + 3 mn de questions ; on vérifie en même temps l’état d’avancée de chaque site)

Après-midi : présentation de notions générales sur Spip avec retour des stagiaires sur leurs expériences d’installation de leur site

présentation de SPIP : objectif, historique, architecture

présentation des technologies présentes : PHP, HTML, XML, Javascript, AJAX

installer un spip : installation et configuration

maintenance de spip : sauvegarde et mise à jour

intérêt et installation des plugins ; listage des plugins les plus utiles

exercice pratique avec le plugin squelette éditeur : insertion en bas de inc/inc_pied.html d’une ligne pour la validation xhtml : <a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML 1.0</a>

Supports de cette journée :

comment installer un plugin Spip,

comment référencer et syndiquer un site : voir le chapitre "Les sites référencés" dans l’aide en ligne de l’interface privé de Spip,

les "modèles" SPIP : www.spip.net/fr_article3454.html,

installer Spip en local sur son PC avec Easyphp : site officiel : www.easyphp.org/ ?lang=fr ;


Installer Spip en local avec easyphp 1


Installer Spip en local avec easyphp 2


Installer Spip en local avec easyphp 3

mardi : Apprendre les bases du HTML et CSS (Ressources : Ressources HTML, CSS, Comment analyser une page HTML et sa feuille de style CSS ?)

Matin : le langage HTML, base du web sémantique

syntaxe principale

les principaux tags

normes et accessibilité (voir Apprendre à rendre son site conforme aux normes w3c)

exercice : création d’une page CV au format HTML


Résultat de l’exercice CV en HTML

Après-midi : les styles CSS

notion d’habillage graphique

notion de flux

comprendre la syntaxe

exercice : création d’une CSS pour mettre en page le CV

mercredi : Apprendre à analyser et à modifier un squelette pour l’adapter à ses besoins (squelette de référence : Lebanon 2007)

analyse html et css d’une page article.html d’un squelette. Exemple : Lebanon 2007 : Analyse de la CSS du squelette.

modification étape par étape du HTML et CSS de ce squelette. Exercice : Lebanon 2007 : Modifier l’aspect graphique (programmation CSS) .

Tutos utiles :

réécriture d’url

réécriture d’url et htaccess

jeudi : Ecrire ses propres boucles SPIP

Matin :

creation d’une page cv.html statique dans le dossier squelettes, puis appel dans le navigateur par l’url www.monsite.com/spip.php ?page=cv

appel d’une page inexistante (par exemple www.monsite.com/spip.php ?page=zebre), pour voir la page d’erreur 404 et le bouton debug

observation de la page www.spip.net/@. Certaines balises n’ont pas besoin de boucles, comme #NOM_SITE_SPIP ou #LANG.
Exercice : insérer la balise #NOM_SITE_SPIP ou #LANG dans sa page cv.html puis réaffichage de la page cv.html (en recalculant la page pour rafraîchir le cache)

la balise #CHEMIN

le tag Spip INCLURE (en majuscule comme tous les tags Spip). Syntaxe : <INCLURE{fond=xxx}>

exercice : création d’une première boucle, affichant par exemple dans le squelette inc-pied.html le texte de l’article n°33 : <BOUCLE_baseline(ARTICLES){id_article=33}><h1>#TITRE</h1>#TEXTE</BOUCLE_baseline>

critères intéressants : {id_rubrique ?} {!par date} {pagination 5} qui servent respectivement à choisir toutes les rubriques (par exemple sur la page d’accueil) sauf si on en spécifie une (quand on se trouve sur une page de rubrique par exemple) ; à trier par date de façon ante-chronologique ; à afficher de 5 en 5.

Après-midi :

une bonne méthode pour insérer une nouvelle boucle dans un squelette :

d’abord repérer le bloc (div) dans lequel insérer votre nouveau bloc ou directement votre nouvelle boucle,
ensuite créer le bloc en html statique et css en le colorisant pour bien voir son emplacement
lorsque tout marche bien, remplacer le texte html "en dur" par une boucle puis tester

exercice : Lebanon 2007 : Ajouter un menu (programmation SPIP)

Débriefing sur les objectifs et la suite du stage

Ressources de cette journée :

Des boucles et des balises

Créer et modifier des squelettes SPIP,

Outils SPIP : le mystère des boucles dévoilé !.

pour aller plus loin : les boucles récursives