# CHAPITRE 1 — Qu'est-ce qu'InfraSStudio ?

#### <span style="color: rgb(53, 152, 219);">Définition</span>

InfraSStudio est un module d'édition de contenu pour Dolibarr. Il s'installe par-dessus le module Website natif de Dolibarr et permet aux utilisateurs non techniques de modifier les textes, les images et les données affichées sur leur site web public, sans manipuler de code HTML ni de base de données.

Le module est conçu pour s'intégrer dans le quotidien d'une équipe : le développeur livre la structure d'un site, l'éditeur en remplit les contenus, et chacun reste dans son rôle.

#### <span style="color: rgb(53, 152, 219);">Le besoin auquel il répond</span>

Dolibarr propose depuis plusieurs versions un module Website complet, capable de gérer des pages, des langues, des images et des virtualhosts. Toutefois, l'édition d'une page passe par la modification directe du HTML stocké en base. Pour un développeur, cette opération est triviale ; pour la personne chargée de rédiger des contenus marketing, d'actualiser des fiches ou d'ajuster une page de contact, elle constitue un obstacle.

Sans outil intermédiaire, le scénario qui se reproduit régulièrement est le suivant :

1. Le développeur livre un site abouti.
2. Plusieurs mois plus tard, un changement mineur est demandé par le client.
3. Le client ouvre l'éditeur de Dolibarr, voit du HTML, hésite à modifier.
4. Une demande est envoyée par e-mail au développeur.
5. La modification, qui prend quelques minutes, est appliquée plusieurs jours plus tard, après deux ou trois échanges.

InfraSStudio interrompt ce cycle. Le développeur conserve la responsabilité du HTML, mais y insère des balises invisibles aux endroits qui doivent rester modifiables. Lorsque l'éditeur ouvre l'interface du module, il voit non plus du code, mais des champs de formulaire correspondant exactement aux zones éditables. Il modifie, il enregistre, le site est à jour.

#### <span style="color: rgb(53, 152, 219);">Le principe de fonctionnement</span>

<span style="white-space: pre-wrap;">L'unité de base du module est le </span>**slot**. Un slot est un emplacement nommé dans une page, déclaré par le développeur dans le HTML, qui correspond à une zone éditable. Chaque slot possède un type (texte court, texte riche, image, lien, couleur, etc.) et, si nécessaire, une valeur par défaut.

```
<!-- Page non éditable -->
<h1>Bienvenue sur notre site</h1>

<!-- Page rendue éditable via InfraSStudio -->
<h1>{{slot:hero_title|type=text|default=Bienvenue sur notre site}}</h1>
```

Le HTML reste lisible pour le développeur. Lorsqu'un visiteur consulte la page publique, le module substitue le slot par sa valeur courante avant l'envoi au navigateur. Dans l'interface du module, l'éditeur ne voit pas le HTML mais un champ de saisie nommé « Hero Title » avec un bouton de validation.

#### <span style="color: rgb(53, 152, 219);">Ce que le module n'est pas</span>

Pour situer correctement InfraSStudio, il est utile de préciser ce qu'il ne cherche pas à être :

<table id="bkmrk-ce-n%27est-paspourquoi" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 2px solid rgb(25, 5, 45);">Ce n'est pas

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 2px solid rgb(25, 5, 45);">Pourquoi

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 2px solid rgb(229, 231, 235);">Un éditeur visuel par blocs (de type Elementor, Divi, WordPress Gutenberg)

</td><td style="padding: 0.6rem 1rem; border: 2px solid rgb(229, 231, 235);">La structure des pages reste codée par le développeur. L'éditeur remplit les emplacements prévus, sans réorganiser la mise en page.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 2px solid rgb(229, 231, 235);">Un thème prêt à l'emploi

</td><td style="padding: 0.6rem 1rem; border: 2px solid rgb(229, 231, 235);">Le module ne fournit pas de composants visuels, mais une couche d'édition pour le HTML que vous écrivez.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 2px solid rgb(229, 231, 235);">Un système de gestion de contenu autonome

</td><td style="padding: 0.6rem 1rem; border: 2px solid rgb(229, 231, 235);">Le module dépend de Dolibarr et du module Website. Il fonctionne comme une surcouche, non comme un remplacement.

</td></tr></tbody></table>

### <span style="color: rgb(25, 5, 45);">Ce que le module apporte</span>

<table id="bkmrk-fonctionnalit%C3%A9savant" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Fonctionnalités

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Avantages

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Un éditeur de slots

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Détecte automatiquement les zones éditables dans le HTML et génère l'interface de saisie correspondante.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Une bibliothèque de médias centralisée

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Gère les images, vidéos et documents partagés entre les pages.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Un système de traduction local

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Aligné sur les langues prises en charge par Dolibarr.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Un éditeur de fiches produit

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Transforme le catalogue Dolibarr en pages web dynamiques.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Une gestion de blog

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Repose sur les pages standard du module Website, sans table dédiée.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Un mécanisme de brouillons et de publication

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Prépare plusieurs modifications avant de les rendre visibles.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Des outils de référencement intégrés

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Offrent un aperçu des résultats Google ainsi que la génération de sitemap et de balises hreflang multilingues.

</td></tr></tbody></table>

#### <span style="color: rgb(53, 152, 219);">La promesse du module</span>

Le développeur conserve le contrôle du HTML. L'éditeur conserve le contrôle du contenu. Chacun travaille dans son périmètre, sans empiéter sur celui de l'autre.