Skip to main content

La philosophie : séparer contenu et design

🎭 Chapitre 3 — LaLe philosophieprincipe :de séparerséparation entre contenu et design

SiL'approche l'onfondamentale devaitdu résumermodule InfraSStudiose enrésume à un seulprincipe principe, ce serait celui-cisimple :

« Le design appartientrelève aude la responsabilité du développeur.
 Le contenu appartientrelève àde celle de l'éditeur.
 Les deux périmètres ne se mélangentsuperposent jamais. »

ToutCette leséparation reste —détermine l'architecture du module, lesle choixfonctionnement d'interface,de lal'éditeur, façonle dont les slots fonctionnent, la philosophiedécoupage des permissions —et découlemême directementles defonctionnalités cettequi séparationne stricte.sont volontairement pas implémentées.

🎯 Pourquoi cette séparation est crucialeessentielle

Dans la plupartmajorité des CMSoutils dude marché,gestion de contenu, les deuxfrontières mondesentre contenu et structure finissent par se mélanger.s'estomper. Le rédacteur a accès au HTML, au CSS, à la mise en page. EtÀ l'usage, il cassemodifie occasionnellementsans les'en site.rendre Pascompte des éléments structurels — pas par malveillancemalveillance, : par inadvertance,mais parce que les outils l'autorisent à toucher à ce qu'ilqui ne devrait pas.pas l'être.

InfraSStudio prendadopte lela partiposition opposéinverse : verrouiller la structure est verrouillée et n'exposerseules àles l'éditeurzones queexplicitement cemarquées quecomme éditables par le développeur asont explicitementaccessibles marquéà comme éditable.l'éditeur.

LesBénéfices bénéfices concretsobservés

✅ Un clientL'éditeur ne peut pas casseraltérer la mise en page

Il nemodifie peut modifier queuniquement les zones baliséesidentifiées comme slots. Les conteneurs, les classes CSS,CSS et l'ordre des sections lui sont totalement inaccessibles.

✅ Le développeurdesign peut faire évoluer leindépendamment designdu contenu

SansUne casserrefonte lene contenu.casse S'il refait la page d'accueil,pas les slotscontenus conserventexistants. leursLes valeurs —des ilslots lessont replace au bon endroit dans le nouveau HTML,conservées et leviennent contenusimplement remplit instantanémentremplir la nouvelle mise en page.structure.

✅ La maintenance vitreste longtempscompréhensible dans la durée

SixPlusieurs mois plusaprès tard,la livraison, un autre développeur reprendpeut reprendre le projet : il lit le HTML, voit les slots, comprend immédiatement quelles zones sont éditablescode et lesquellesidentifier sontsans fixes.ambiguïté ce qui est éditable et ce qui ne l'est pas.

Les

🔧mécanismes Commentqui c'estmatérialisent implémentécette séparation

La séparation n'est pas une conventionsimple molle.convention, Elleelle est inscrite à plusieurs niveaux dans le fonctionnement technique du module à plusieurs niveaux.module.

1️⃣ Le HTML estreste lasous propriétéle contrôle du développeur

Le HTML d'une page Dolibarr Website est stocké dans deux endroitsemplacements synchronisés : la base de données et un fichier .tpl.php sur le disque. InfraSStudioLe module ne propose jamais à l'éditeuraucun demoment modifierd'éditer ce HTML.

  • ❌Il Pasn'existe pas de bouton « Voirvoir le code source ».
  • ❌, Paspas d'éditeur de texte brut.
  • ❌brut, Paspas d'option cachée.
dissimulée.

L'éditeur n'a accès qu'aux zones quimarquées portentcomme unslots, slot. Le HTML environnant — les balises de structure, les classes CSS, les attributs —le reste exactementlui commedemeure le développeur l'a écrit.transparent.

2️⃣ Les slots sont auto-découvertsdétectés automatiquement

QuandLorsque le développeur ajoute un nouveau slot dans un template, ilaucune autre opération n'aest riennécessaire. d'autre à faire. Il ne déclare pas le slot quelque part dans une configuration séparée. Il ne crée pas une entrée en base de données.

Le module dispose d'un scanner qui parcourt automatiquement les fichiers .tpl.php du site, détecte les tokens {{slot:...}}, les enregistre dans la table llx_infrasstudio_slot,dédiée et génère l'interface d'édition correspondante.

<!-- Le développeur ajoute cette ligne dans son tpl.php -->
<h2>{{slot:section_title|type=text|default=Nos services|label=Titre de la section}}</h2>

Au prochain rescanrescan, (manuel ou automatique),automatique, le slot section_title apparaît dans le panneau d'éditionédition. de la page concernée. Pas deAucune configuration intermédiaire.intermédiaire n'est requise.

3️⃣ Le rendu public est complètement transparent

Quand Lorsqu'un visiteur consulte laune page publique, le navigateur ne voit jamais unde slot. Le module intercepte le rendu,HTML avant son envoi, remplace chaque token {{slot:...}} par sa valeur courante,courante et envoietransmet au navigateurvisiteur duun document HTML parfaitement classique.standard.

Cette substitution se faitintervient au moment du rendu, pasjamais au moment de l'édition. Le fichier .tpl.php surconserve le disque conservetoujours les tokens originaux.originaux, Celace signifiequi présente plusieurs avantages :

  • Le développeur peut lireconsulter et modifier le tpl.phptemplate sans craindre queune pollution par les modifications de l'éditeur l'aient pollué.éditeur.
  • Si la table llx_infrasstudio_slotdes estslots était purgée, le site neafficherait casse pas :simplement les slots affichent leur valeurvaleurs par défaut.défaut, sans cesser de fonctionner.
  • LaL'export portabilité est totale : exporter ledu code d'un site,site c'estet exporterl'export lede HTML avec ses tokens. Leson contenu suitsont séparément,deux dansopérations ladistinctes, base.ce qui simplifie les migrations.

4️⃣ Les permissions matérialisenttraduisent la séparation

Le module définit sept permissions distinctesDolibarr dans Dolibarr,distinctes, qui permettent d'attribueradapter àprécisément chaquel'accès rôleaux exactementdifférents ce dont il a besoinrôles :

Permission

ÀDestinataire qui la donnertype

paramMenu

Tout utilisateur quiautorisé doità voir le menu Studiodu module

readContent

Lecteur seulseul, (ex.par exemple un commercial qui consulte lesle pagessite avant un rendez-vous)vous

editContent

Rédacteur —autorisé peutà modifier les slots de texte

editTranslations

Traducteur —intervenant peut éditersur les versions linguistiques

editMedias

Gestionnaire dedes médiasmédias, —autorisé peutà uploadertéléverser /et remplacer des images

publish

PublicateurResponsable —de peutla basculerpublication unefinale pagedes brouillon vers publiécontenus

admin

Administrateur du module — accès: configuration, sites managésgérés, gabarits

💡En Combinaisonspratique, typiques — Unun rédacteur reçoit en général readContent +et editContent. Un traducteur reçoit editTranslations. LeL'intégrateur développeur de l'agence gardeconserve admin. PersonneAucune permission n'aest accèsattribuée àau-delà desdu chosesstrict dontnécessaire.

il

Ce qui n'aest volontairement pas besoin.

🚫 Ce que la philosophie interdit (volontairement)proposé

Pour rester fidèle à ce principe, le module refuse d'implémenter certaines fonctionnalités,fonctionnalités mêmene quandsont despas utilisateursimplémentées. lesCe demandent.choix est délibéré.

Pas de page builderd'éditeur visuel par blocs

VousIl ne pouvezn'est pas glisser-possible de déposer undes bloc « titre »blocs à côtéla d'unsouris blocpour «composer imageune ».page. La structure estreste figéecodée par le développeur. Si une nouvelle section est nécessaire, deux options se présentent : utiliser un slot de type richtext, qui autorise une mise en forme limitée à l'intérieur d'une zone existante, ou demander au développeur d'ajouter un nouvel emplacement dans le template.

⚠️ Pourquoi ?— — Les page builderséditeurs visuels finissent toujours par produireblocs produisent fréquemment des pages laidesincohérentes oulorsque cassées dès qu'un l'utilisateur nonn'est pas formé s'à la mise en empare.page. La structure figéeverrouillée garantit la cohérence visuelle dans la durée.

Pas d'édition HTML « avancée »brute

Même un éditeur expérimenté n'ane dispose pas ded'un mode «permettant afficherde modifier le HTML brut ».directement. Les slots de type richtext proposent un éditeur WYSIWYGvisuel avec mise en forme (gras, italique, listes, liens, titres h2/h3)sous-titres) mais pas deaucun bouton « source ».

⚠️ Pourquoi ?— — L'édition de HTML brut est la première portesource d'entréeerreurs desde erreurs.mise en forme. Si une mise en formeprésentation spécifique est nécessaire, elle appartientrelève audu CSSCSS, (et donc audu développeur),développeur, pasnon audu contenu.

Pas de « gestion de menus » côté utilisateuréditeur

Les menus de navigation (header,en-tête, footer)pied de page) sont des pages Dolibarr Website de type other ou menu.particulières. Elles peuvent contenircomporter des slots (pour les libellés, URLsle sociales,logo logo)ou les liens sociaux, mais l'ordre des lienséléments et la structure du menu restent codés dans le HTML.

⚠️ Pourquoi ?— — La navigation est un élément destructurel design,du passite, denon contenu.un Ycontenu toucheréditorial. devraitSa modification doit être un acte délibéré,délibéré pasdu développeur, non un effet de bord d'unune clicmanipulation malpar placé.l'éditeur.

Pas de logique métierconditionnelle côtédans slotles slots

Les slots ne portent aucune logique conditionnelle.métier. VousIl ne pouvezn'est pas direpossible de définir une règle du type « afficheafficher ce texte uniquement si l'utilisateur est connecté ». Les slots sont purementstrictement des conteneurs de contenu.

⚠️ Pourquoi ?— — La logique appartientrelève audu PHPPHP, (donc audu développeur).développeur. MélangerMêler logique et contenu estrend lales recettesites desdifficiles CMS qu'on ne peut plusà maintenir troisau-delà ansde plusquelques tard.années.

🏠 Une analogie :pour l'comprendre

Le rapport entre développeur et éditeur peut être comparé à celui qui unit un architecte et l'occupant

Pensez à d'un appartement qu'un architecte a conçu :appartement.

Rôle

Sa responsabilitéResponsabilité

📐 L'architecte

DessineConçoit les murs, les ouvertures, les volumes, les prises électriques. Il pense au flux de circulation, aux proportions, à la lumière.circulations. Une fois le chantier livré, sonsa travailmission est fait.terminée.

🛋️ L'occupant

Choisit la peinture, le mobilier, lesl'agencement. rideaux,Vit lesdans tableaux.le Il vit dedans, change de canapé tous les cinq ans, repeint la chambre quand il a envie.

InfraSStudio applique ce même découpage à votre site web. Le développeur est l'architecte : il livre des volumes définis. Le rédacteur est l'occupant : il vit dedanslogement et l'arrangeadapte à sases façon,besoins, dans le respect des volumes existants.

NiInfraSStudio l'unapplique nile l'autremême nedécoupage marcheà survotre site. Le développeur conçoit la structure et la livre. L'éditeur en remplit les piedscontenus, desans l'autre.toucher Etaux cettevolumes.

Cette discipline est la condition pour que lequ'un site reste vivantmaintenable longtemps.et cohérent dans la durée.

Back to top