Tour de l'interface Studio

🧭 CHAPITRE 9 -- EN MODE MANUEL : Tour de l'interface Studio

Ce chapitre est votre première visite guidée du Studio. Nous allons faire le tour des écrans sans encore éditer quoi que ce soit. À la fin, vous saurez où chercher et comment vous repérer.

ℹ️ Prérequis — Le module InfraSStudio doit être activé sur votre Dolibarr et au moins un site managé doit être configuré. Si ce n'est pas le cas, voyez d'abord la Partie II.

🚪 Étape 1 — Accéder au Studio

Connectez-vous à votre Dolibarr.
Dans le menu supérieur, cliquez sur Outils.
Dans le menu latéral qui apparaît, cherchez la section InfraS.
Cliquez sur InfraSStudio.

Vous arrivez sur le tableau de bord du Studio.

💡 Astuce — Vous pouvez mettre cette page en favori dans votre navigateur, vous y reviendrez souvent.

📊 Étape 2 — Comprendre le tableau de bord

Le tableau de bord est votre point d'entrée. Il se divise en plusieurs zones, de haut en bas :

🎉 L'en-tête personnalisé

Une salutation contextuelle (« Bonjour Pierre », « Bon après-midi Pierre », « Bonsoir Pierre » selon l'heure) suivie de la date du jour. C'est juste un repère visuel sympa.

🌐 Vos sites

Une grille de cartes, une par site géré par le Studio. Chaque carte affiche :

Le nom du site (ex. keaticweb).
Un lien direct « Ouvrir le site public » (icône globe) qui pointe sur le virtualhost.
Trois compteurs en couleur : pages publiées, pages brouillons, articles de blog.
Trois boutons d'action : Éditer, Articles, Produits.

✅ Bonne pratique — Cliquez sur Éditer pour entrer dans l'éditeur principal. C'est par là que vous passez 80 % du temps.

📦 Stats globales

Toujours visibles en haut : nombre de produits publiés, nombre de produits en brouillon, nombre de médias dans la bibliothèque, taille totale en MB.

⚡ Actions rapides

Cinq grandes cartes cliquables qui vous mènent directement aux opérations courantes :

Nouvel article — créer un billet de blog en deux clics.
Éditer une page — ouvrir l'éditeur unifié.
Gérer les produits — section produits dans l'éditeur.
Traductions produits — éditeur multilingue dédié.
Bibliothèque médias — gestion centralisée des fichiers.

🕒 Activité récente

La timeline des 8 derniers contenus modifiés (slots et produits), avec un lien Ouvrir pour reprendre là où vous vous êtes arrêté la dernière fois.

❓ Onboarding

Un panneau dépliable « Comment utiliser InfraSStudio ? » avec quatre étapes guides. Pratique pour vos collègues qui découvrent.

🎨 Étape 3 — Entrer dans l'éditeur

Cliquez sur le bouton Éditer de la carte d'un site. Vous entrez dans l'écran central du Studio : l'éditeur unifié à 3 colonnes.

Colonne	Rôle
🌳 Gauche (Arborescence)	Liste des pages du site, groupées par type (pages standards, articles de blog, header, footer, …). Recherche en temps réel. Compteur de slots par page. Indicateurs visuels pour les brouillons en attente.
👁️ Centre (Aperçu)	Aperçu en direct de la page sélectionnée, dans une iframe avec « chrome » de navigateur (les trois pastilles macOS et la barre d'URL). Onglets de langue avec drapeaux. Bouton de basculement Desktop / Tablette / Mobile.
📝 Droite (Inspecteur)	Quand aucun slot n'est sélectionné : la liste « Contenu de la page » de tous les emplacements éditables. Quand un slot est sélectionné : le formulaire d'édition correspondant, avec onglets de langue.

💡 Astuce — Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster selon votre écran.

🔄 Étape 4 — Le flux d'édition typique

Voici comment se déroule une session d'édition normale, étape par étape :

Vous cliquez sur une page dans la colonne de gauche.
L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur.
Vous cliquez sur un texte dans l'aperçu (par exemple le titre principal).
L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle.
Vous modifiez le texte. Le système enregistre automatiquement après 500 ms d'inactivité (auto-save).
L'aperçu se met à jour. Mais pour l'instant, votre modification est en brouillon — invisible pour les visiteurs du site.
Quand vous êtes satisfait, vous cliquez sur le bouton « Publier les modifications » en haut à droite. Votre travail devient visible publiquement.

✅ Bonne pratique — Préparez plusieurs modifications avant de publier. Le bouton « Publier les modifications » publie tout ce qui est en brouillon sur la page, en une seule fois. C'est ainsi qu'on évite les versions intermédiaires bizarres pour les visiteurs.

🎯 Étape 5 — Les boutons de la barre d'outils centrale

Au-dessus de l'aperçu, vous voyez une rangée de boutons d'action contextuels. Voici ce qu'ils font, dans l'ordre :

Bouton	Effet
🔍 SEO	Ouvre une modale avec aperçu Google SERP en direct. Voir Chapitre 16.
📋 Dupliquer	Crée une copie de la page courante (utile surtout pour les articles de blog).
🌐 Mettre en ligne / Retirer	Bascule la visibilité de la page (publiée vs cachée). Différent de « Publier les modifications » !
🚀 Publier les modifications	Publie tous les brouillons en attente de la page. Le badge à côté indique combien il y en a.
↩️ Annuler les modifications	Jette tous les brouillons et revient à la version publiée.
🔗 Voir public	Ouvre la page publique dans un nouvel onglet du navigateur.
🗑️ Supprimer	Réservé aux administrateurs. Demande confirmation. Voir l'avertissement ci-dessous.

⚠️ Attention — Le bouton Supprimer efface définitivement la page, ses traductions, ses slots, son fichier tpl.php et son wrapper Apache. Aucun retour en arrière n'est possible. À utiliser avec parcimonie.

🌳 Étape 6 — Naviguer dans la liste des pages (colonne gauche)

La colonne de gauche est plus puissante qu'il n'y paraît. Voici comment l'exploiter :

Le sélecteur de section

En haut, deux onglets : Pages et Médias. Selon le site, un troisième onglet Produits peut apparaître si le catalogue dynamique est activé.

La recherche en temps réel

Tapez quelques lettres dans le champ « Rechercher » : la liste se filtre instantanément. Cherche dans le titre, le slug et la catégorie.

Les groupes de pages

Les pages sont groupées par type de conteneur :

page — pages standards (accueil, contact, à propos, …).
blogpost — articles de blog.
other — éléments structurels (header, footer, menu).

Les indicateurs visuels

Une pastille orange à côté d'une page = elle a des modifications brouillons en attente.
Un nombre entre crochets [3] = nombre de slots éditables sur la page.
Une icône grise au lieu de colorée = la page est en mode « Retirée du site » (status=0).

Le bouton « + Nouveau »

Tout en bas de la liste. Selon le contexte :

Sur une page d'index de blog (configurée via les paramètres) : « + Nouvel article ».
Sur les autres pages : « + Nouvelle page ».

📝 Étape 7 — L'inspecteur (colonne droite)

L'inspecteur a deux états très différents.

État vide : la liste « Contenu de la page »

Quand aucun slot n'est sélectionné dans l'aperçu, l'inspecteur affiche tous les slots de la page, groupés par section. Pour chacun :

Une icône qui indique le type (📝 texte, 🖼️ image, 🎨 couleur, ⭐ icône, …).
Le libellé du slot.
Un aperçu de la valeur actuelle (60 caractères max).
Un badge orange « modifié » si un brouillon est en cours.

Cliquez sur n'importe quelle ligne pour ouvrir le formulaire d'édition.

État édition : le formulaire

Quand un slot est sélectionné, l'inspecteur bascule en mode édition avec :

Un bouton « ← Retour » pour revenir à la liste.
Le libellé du slot en titre.
Un champ d'édition principal pour la langue affichée actuellement dans l'aperçu.
Une section repliable « Autres langues » pour saisir les versions dans les autres locales.
Une section repliable « Options avancées » où vous pouvez accéder à la valeur canonique partagée (à éviter sauf cas particulier).

💡 Astuce — L'auto-save fonctionne 500 ms après la dernière frappe. Vous voyez un petit indicateur « Enregistrement... » puis « Enregistré » à côté du champ. Pas besoin de cliquer sur un bouton « Sauvegarder ».

🌍 Étape 8 — Changer de langue dans l'aperçu

Au-dessus de l'aperçu, une rangée d'onglets avec des drapeaux : 🇫🇷 FR, 🇬🇧 EN, 🇩🇪 DE, etc. Selon les langues activées sur votre site.

Cliquez sur le drapeau d'une autre langue.
L'aperçu recharge la page dans cette langue.
Si vous éditez un slot, le champ principal de l'inspecteur correspond à la langue actuellement affichée.

ℹ️ À retenir — La langue par défaut du site (généralement le français) est la langue canonique. Les autres langues sont des traductions surnuméraires. Si une traduction est manquante, le visiteur voit la version canonique. Voir Chapitre 13 pour le détail.

🏁 Récapitulatif

✅ Vous savez maintenant :

Accéder au Studio depuis Outils → InfraS.
Lire le tableau de bord (sites, stats, actions rapides, activité récente).
Entrer dans l'éditeur 3-colonnes.
Identifier les rôles des 3 colonnes (arborescence, aperçu, inspecteur).
Reconnaître les boutons de la barre d'outils centrale.
Naviguer entre les langues avec les onglets drapeaux.
Comprendre la différence entre brouillon et publication.

Dans le prochain chapitre, on entre dans le concret : éditer un texte.