Marais Biestebroeck - 12 étudiants, 39 blocs, un vrai client

Il y a un an, l'Alliance du Marais Biestebroeck venait à l'école présenter son combat : 1,5 hectare de zone humide à Anderlecht, menacé par un projet immobilier. Un workshop, un travail repris au printemps, une maquette validée par l'association. À la rentrée, en un mois, nous l'avons développée. Le site est en ligne.

Le problème pédagogique

Un cours de développement web se heurte toujours au même mur : le projet fictif. L'étudiant code une page pour un client qui n'existe pas, avec une échéance qui n'en est pas une, et le travail finit dans un dossier que personne n'ouvrira. La note tombe, le code meurt.

L'Alliance du Marais Biestebroeck a changé les termes du problème. Une association réelle, un combat en cours, un permis déjà accordé au projet immobilier The Dock. La date de mise en ligne n'était pas négociable : elle dépendait de l'actualité du dossier, pas du calendrier académique.

Trente-neuf blocs, douze auteurs

La page « Histoire et contexte » est une frise horizontale qui raconte le marais, des prairies du XVI siècle à la contestation d'aujourd'hui. Elle compte 39 blocs répartis en cinq rubriques : histoire, contexte, quartier, contestation, aujourd'hui.

Chaque bloc revient à un étudiant, plusieurs par personne. Pour chacun, deux fichiers et le droit de ne toucher qu'à ceux-là : NN-slug.php pour le HTML, NN-slug.css pour le style. La page les assemble toute seule.

<?php foreach ($evenements as $evenement) : ?>
  <?php if (file_exists('template-parts/timeline/' . $evenement['fichier'] . '.php')) : ?>
    <?php include 'template-parts/timeline/' . $evenement['fichier'] . '.php'; ?>
  <?php else : ?>
    <?php include 'template-parts/timeline/a-faire.php'; ?>
  <?php endif; ?>
<?php endforeach; ?>

Cinq lignes de PHP qui portent tout le dispositif. Le else est la pièce maîtresse : si le fichier d'un étudiant n'existe pas encore, la page affiche une boîte grise avec le nom des fichiers attendus. Personne ne peut casser la page des autres en ne rendant pas son travail.

Le contrat

Douze personnes dans le même dépôt, trente-neuf blocs qui se touchent, c'est autant de façons de tout casser. Le cadre tient en quelques règles, écrites avant la première ligne de code.

• Toute règle CSS commence par la classe du bloc - .evt--04-prairies-1550 préfixe chaque sélecteur. Personne ne peut atteindre le bloc d'un autre, même en le voulant.
• Les variables sont imposées - couleurs, polices et tailles viennent de tokens.css, relevé sur la maquette Figma validée. Pas de valeur en dur, donc pas de dérive visuelle sur 39 blocs.
• Deux fichiers, pas un de plus - la mécanique de la frise, la navigation et les données sont partagées : elles passent par une pull request.
• Chaque image porte un alt qui la décrit - les blocs de départ arrivent avec alt="", à charge de l'étudiant de le remplir.
• Pas de PHP dans un bloc - du HTML et de la CSS. La logique reste dans les fichiers du professeur.

La hauteur est imposée aussi : chaque bloc occupe exactement l'écran, bande de position comprise. La largeur, elle, est libre. C'est la seule marge de manoeuvre, et elle suffit à rendre les 39 blocs différents.

Du prototype au thème WordPress

Le prototype servait à construire la frise en classe. Le site livré, lui, devait rester vivant sans nous : l'Alliance ajoute un événement, une coupure de presse, une ressource, sans jamais toucher à un fichier. D'où un thème WordPress écrit sur mesure, marais, sans page builder ni thème parent.

Trois types de contenu portent le site, déclarés avec ACF et versionnés en JSON dans le thème :

Neuf groupes de champs ACF complètent l'ensemble : accueil, coordonnées, encart pétition, événement, média, presse, ressource, rubrique, thématique. Les fichiers acf-json vivent dans le thème, donc un déploiement suffit à porter la structure d'un environnement à l'autre.

La frise, côté WordPress

Le module inc/frise.php reconstruit la frise depuis les événements. Un bloc rendu par un étudiant garde sa mise en page ; les autres passent par un bloc générique qui prend la couleur de sa rubrique. L'Alliance peut donc ajouter un événement après notre départ : il s'insère dans la frise, au bon endroit, sans design à écrire.

La teinte des photos, à l'envoi

La maquette impose des photos teintées, une couleur par chapitre. Demander ce travail à l'Alliance pour chaque image aurait condamné le dispositif. Le thème le fait à sa place : à l'envoi d'une image, il en fabrique trois copies teintées, rangées à part.

uploads/marais-teintes/185-brun.jpg            1600 px, pleine largeur
uploads/marais-teintes/185-brun-moment.jpg      960 px, cartes de la page Alliance
uploads/marais-teintes/185-brun-vignette.jpg    450 x 300, bandeau de l'accueil

Le numéro est celui de la pièce jointe. Ce rangement à part vient d'un incident. Déposée à côté de l'original sous le nom photo-brun.jpg, la copie écrasait une autre image envoyée sous ce nom-là, puis la supprimait avec l'originale. Un dossier dédié et un nom bâti sur l'identifiant règlent le problème définitivement.

Le mode d'emploi dans l'administration

Un thème sur mesure sans documentation redevient une boîte noire au premier départ. Le thème ajoute donc une page « Mode d'emploi » sous le menu Événements, et un lien « Comment remplir un événement ? » directement dans l'écran d'édition. La page s'ouvre par-dessus, servie seule, sans le menu ni la barre de WordPress, à la manière d'une fiche d'extension.

Le reste du thème suit la même logique : inc/og.php construit les aperçus de partage de chaque page, inc/admin-evenement.php réorganise l'écran d'édition, inc/affichage.php regroupe les aides partagées par les gabarits. Huit gabarits de page, deux gabarits d'article, aucun plugin de construction.

Le déploiement comme outil pédagogique

Chaque étudiant met son bloc en ligne lui-même, depuis VS Code, avec un script Node et un fichier .env qui ne quitte jamais sa machine. Le site de démonstration se met à jour dans la minute.

Ce détail change le rapport au travail. Un bloc qui ne s'affiche pas, un chemin d'image faux, une CSS qui déborde : ça se voit immédiatement, en public, à côté des autres. La correction ne vient plus du professeur, elle vient de la page.

Le calendrier

Un an entre la première rencontre et le site. Un mois de développement effectif. L'écart entre les deux, c'est le temps qu'il faut pour qu'un projet étudiant devienne un projet tout court.

Ce que j'ai appris

• Le cadre libère. Plus les règles sont strictes sur ce qui est partagé, plus la liberté est réelle sur ce qui ne l'est pas. Les 39 blocs se ressemblent sans être identiques.
• Une boîte grise vaut mieux qu'une page blanche. Le repli sur a-faire.php a fait plus pour la sérénité du chantier que n'importe quel rappel d'échéance.
• Un vrai client ne négocie pas la qualité. L'Alliance a validé une maquette, pas une intention. Ce qui a été livré devait y ressembler.
• Automatiser ce qu'on ne peut pas exiger. La teinte des photos demandait un travail graphique à chaque image : le thème le fait à l'envoi, et la contrainte disparaît.
• Un site livré se documente dans son administration. Le mode d'emploi vit dans WordPress, pas dans un PDF que personne ne retrouvera.
• Ça reste un projet d'école. Il y a des irrégularités, des blocs plus faibles que d'autres. Le site est en ligne quand même, et c'est le point.

Voir le site

La frise, la vision alternative de l'Alliance, la revue de presse et la pétition. Projet mené avec Hélène et Sébastien, et les étudiants de bloc 3 de la Haute École Francisco Ferrer.