Guide d'utilisation — FORGE ADMIN

Documentation technique et recommandations de gestion de contenu.

1. Définition et architecture

FORGE ADMIN est une interface d'administration sur mesure permettant de gérer le contenu d'un site web sans toucher au code. Accessible via un fichier PHP (admin.php), elle lit et écrit les données de manière structurée dans un fichier data.json.

Il n'y a pas de base de données complexe ; le système repose intégralement sur ce fichier JSON, garantissant une rapidité d'exécution maximale. Chaque configuration est adaptée aux besoins stricts du site ciblé (les sections et les champs varient).

2. Vos Options & Services

Selon l'offre sélectionnée lors de la configuration de votre projet, vous bénéficiez des prestations techniques suivantes, intégralement gérées par Forge Labs.

Le site vous appartient à 100 %. Le nom de domaine et l'hébergement sont intégralement enregistrés à votre nom.

Intégration Contenu Réel

Design & Contenu

Je remplace les textes et images de démonstration par vos éléments définitifs avec un recadrage professionnel.

Guide de gestion du contenu

Interface Administrateur

Gestion & Autonomie

Autonomie totale. Modifiez vous-même vos textes et images via un espace sécurisé, sans aucune compétence technique.

Manuel de l'interface

Formulaire Sécurisé

Technique & Performance

Connexion d'un formulaire de contact avec protection anti-spam (Honeypot) et redirection vers une page de remerciement.

Configuration Formspree

Optimisation SEO

Technique & Performance

Configuration avancée des balises metas, structure sémantique et performances techniques pour viser la 1ère page Google.

Éléments SEO   Données Structurées   Positions Google

Configuration & Déploiement

Hébergement & Suivi

Frais d'installation uniques : réservation du nom de domaine, configuration DNS et installation du certificat de sécurité SSL.

Guide FTP   Environnement

Serveur Privé Haute Performance

Hébergement & Suivi

Hébergement premium sur un serveur privé dédié garantissant une vitesse de chargement optimale et une sécurité maximale.

Gestion du cache

Maintenance & Suivi

Hébergement & Suivi

Modifications illimitées, sauvegardes régulières et support prioritaire. Je gère la vie de votre site au quotidien.

Web Analytics   Search Console

Exclusivité Totale

Droits & Propriété

Achat des droits complets. Ce design est immédiatement retiré de la vente. Le site vous est exclusivement et définitivement réservé.

Conformité RGPD

3. Stratégie & Visibilité

Un site internet optimisé techniquement est un outil puissant, mais sa rentabilité dépend de la visibilité que vous lui accordez. Voici comment transformer votre investissement en une machine à conversion.

Votre carte de visite digitale

Votre landing page ou site web est le point de chute de toutes vos actions de communication. C'est la vitrine officielle de votre activité, accessible 24h/24 et 7j/7. Contrairement aux réseaux sociaux où l'attention est volatile, votre site centralise votre expertise sans distraction. Partagez massivement votre URL pour imposer votre présence en ligne.

Distribution & Partage stratégique

Ne laissez pas votre site attendre les visiteurs de manière passive. Vous devez l'intégrer au cœur de votre écosystème :

  • Signature d'e-mail : Ajoutez systématiquement le lien sous votre nom.
  • Réseaux Sociaux : Insérez le lien dans vos biographies (Instagram, LinkedIn, Facebook, TikTok) et mentionnez-le dans vos publications pour rediriger le trafic.
  • Support physique : Imprimez un QR code ou l'URL sur vos cartes de visite, flyers, affiches, devis et factures.
  • Fiche Google (GMB) : Liez votre site à votre Google Business Profile pour capter la clientèle locale qui recherche vos services.

Comprendre l'acquisition

L'objectif de ce site est de convertir un visiteur en prospect (via le formulaire de contact ou un appel). Votre mission est de générer ce premier clic. Plus vous partagerez votre site de manière ciblée, plus le trafic augmentera, envoyant par la même occasion des signaux très positifs à Google pour votre référencement naturel (SEO) à long terme.

4. Utilisation de l'interface

Accès et Navigation

L'interface est accessible via l'URL spécifique configurée (ex: https://votre-site.fr/admin.php). La navigation s'effectue par onglets, chaque onglet correspondant à une section sémantique du site (Configuration, Hero, Services, Contact, etc.).

Types de champs

Type de champ Usage technique Recommandations SEO & Performance
Champ texte simple Titres (H1, H2), libellés de boutons. Respectez la longueur cible (ex: 60 caractères pour un Title).
Zone de texte (textarea) Descriptions, métadonnées, listes. Idéal pour les balises meta description (max 160 caractères).
Éditeur riche Mise en forme HTML intégrée. Structurez sémantiquement vos paragraphes.
Upload d'image Médias visuels (fonds, illustrations). Important: Compressez vos images et privilégiez le format WebP avant upload.
Champ icône Classes CSS Bootstrap Icons ou Font Awesome. Utilisez les classes exactes fournies dans ce guide.

Gestion dynamique et Sauvegarde

Les éléments répétés (services, témoignages) s'ajoutent via le bouton + Ajouter et se suppriment via le bouton de suppression.

Attention : Cliquez impérativement sur le bouton Enregistrer avant de quitter un onglet. La page se rechargera pour confirmer l'écriture dans le fichier data.json. Toute fermeture sans sauvegarde entraîne la perte des données saisies.

5. Syntaxe HTML pour les champs riches

Par mesure de sécurité et pour garantir l'intégrité absolue du design et de la structure sémantique, tous les champs de l'administration sont par défaut au format texte simple.

Un champ ne bascule en mode "riche" (autorisant l'interprétation du code HTML) que s'il contient déjà une syntaxe HTML lors de sa configuration initiale. Cette restriction volontaire empêche toute erreur de formatage accidentelle, garantissant ainsi une validation W3C continue et des performances SEO optimales.

Pour les champs explicitement identifiés et configurés pour accepter du contenu riche, voici les seules balises sémantiques strictes autorisées :

Rendu souhaité Balise HTML Code à saisir
Nouveau paragraphe <p> <p>Votre texte ici</p>
Saut de ligne (même bloc) <br> Ligne 1<br>Ligne 2
Mise en évidence (Gras) <strong> <strong>Mot clé important</strong>
Emphase (Italique) <em> <em>Terme spécifique</em>
Lien hypertexte externe <a> <a href="https://lien.fr" target="_blank" rel="noopener">Texte</a>
Liste à puces <ul> / <li> <ul><li>Point 1</li><li>Point 2</li></ul>

6. Guide de référence absolu des Icônes

Les champs "Icône" requièrent l'insertion stricte d'une classe CSS. Selon l'intégration de votre site, référez-vous à la bibliothèque correspondante (Bootstrap Icons ou Font Awesome).

Rappel technique : Observez les icônes déjà configurées dans votre administration. Si elles commencent par bi bi-, utilisez la section Bootstrap Icons. Si elles commencent par fas fa- ou fab fa-, utilisez Font Awesome.

A. Liste exhaustive des classes — Bootstrap Icons

Préfixe obligatoire : bi bi-[nom]. Base de données complète sur icons.getbootstrap.com.

Contact & Communication

  • bi bi-telephone Téléphone
  • bi bi-telephone-fill Tél. plein
  • bi bi-envelope Email
  • bi bi-envelope-fill Email plein
  • bi bi-geo-alt Marqueur carte
  • bi bi-geo-alt-fill Marqueur plein
  • bi bi-chat-dots Bulle discussion

Réseaux Sociaux

  • bi bi-facebook Facebook
  • bi bi-instagram Instagram
  • bi bi-twitter-x X (Twitter)
  • bi bi-linkedin LinkedIn
  • bi bi-youtube YouTube
  • bi bi-tiktok TikTok
  • bi bi-whatsapp WhatsApp

Interface & Navigation

  • bi bi-arrow-right Flèche droite
  • bi bi-chevron-down Chevron bas
  • bi bi-search Recherche
  • bi bi-list Menu Burger
  • bi bi-x Fermer / Croix
  • bi bi-house Accueil
  • bi bi-gear Paramètres

Commerce & Services

  • bi bi-cart Panier
  • bi bi-credit-card Carte bancaire
  • bi bi-tag Étiquette prix
  • bi bi-shop Boutique
  • bi bi-star-fill Étoile (Avis)
  • bi bi-shield-check Sécurité / Garantie
  • bi bi-truck Livraison

B. Liste exhaustive des classes — Font Awesome (Free)

Préfixes : fas (Solid/Plein), far (Regular/Contour), fab (Brands/Marques). Base complète sur fontawesome.com/icons.

Contact & Localisation

  • fas fa-phone-alt Téléphone
  • fas fa-envelope Email
  • fas fa-map-marker-alt Marqueur
  • fas fa-map Carte
  • fas fa-paper-plane Envoi
  • fas fa-user Utilisateur

Réseaux Sociaux (Brands)

  • fab fa-facebook-f Facebook
  • fab fa-instagram Instagram
  • fab fa-twitter Twitter
  • fab fa-linkedin-in LinkedIn
  • fab fa-youtube YouTube
  • fab fa-tiktok TikTok
  • fab fa-whatsapp WhatsApp

Interface Utilisateur

  • fas fa-arrow-right Flèche droite
  • fas fa-chevron-down Chevron bas
  • fas fa-search Recherche
  • fas fa-bars Menu Burger
  • fas fa-times Fermer / Croix
  • fas fa-home Accueil
  • fas fa-cog Paramètres

Bureautique & Métiers

  • fas fa-briefcase Mallette / Emploi
  • fas fa-chart-line Croissance / Stats
  • fas fa-laptop-code Développement
  • fas fa-tools Outils / Réparation
  • fas fa-graduation-cap Formation
  • fas fa-heartbeat Santé
  • fas fa-balance-scale Juridique

7. Selon vos options techniques

Guides spécifiques aux fonctionnalités et configurations activées pour votre projet.

7.1 Environnement de travail et Outils

Pour modifier votre site dans de bonnes conditions et garantir l'intégrité du code, l'utilisation d'outils professionnels est strictement requise.

L'éditeur de code (Visual Studio Code)

Édition professionnelle

Ne modifiez jamais vos fichiers HTML avec des logiciels de traitement de texte (Word, OpenOffice) ou le Bloc-notes natif de votre système. Ces programmes ajoutent du formatage invisible qui détruira la structure de votre site. Téléchargez Visual Studio Code (VS Code), l'éditeur standard, gratuit et performant, développé par Microsoft.

L'extension Live Server

Prévisualisation en temps réel

Une fois VS Code installé, ouvrez l'onglet des extensions (icône de carrés sur la barre latérale gauche) et recherchez Live Server. Installez-la.

Cette extension simule un serveur web local. Pour l'utiliser : faites un clic droit sur votre fichier index.php dans l'explorateur de fichiers de VS Code, puis sélectionnez "Open with Live Server". Le site s'ouvrira dans votre navigateur. Dès que vous sauvegarderez vos modifications (Ctrl + S ou Cmd + S), la page se rafraîchira automatiquement.

7.2 Intégration du formulaire gratuit

Puisque vous utilisez un fichier HTML statique sans base de données ou script serveur PHP intégré, vous devez utiliser un service tiers pour réceptionner les e-mails envoyés depuis votre formulaire de contact.

Utilisation de Formspree

Solution gratuite et sécurisée

Formspree est un service qui agit comme un pont entre votre site statique et votre boîte de réception. Il intercepte les données validées par l'utilisateur et vous les transmet instantanément par e-mail, tout en bloquant le spam.

Comment l'utiliser et le configurer :
  1. Rendez-vous sur le site officiel : https://formspree.io/
  2. Créez un compte gratuitement avec votre adresse e-mail professionnelle.
  3. Dans votre tableau de bord Formspree, créez un nouveau formulaire ("New Project" > "New Form").
  4. Formspree va générer une URL unique (un "Endpoint"), qui ressemblera à ceci : https://formspree.io/f/xyzabcde.
  5. Ouvrez votre fichier index.php, localisez la balise <form> de la section contact, et remplacez l'attribut action par votre Endpoint :
    <form action="https://formspree.io/f/VOTRE_ID_UNIQUE" method="POST">
  6. Vérifiez que chaque champ de votre formulaire possède bien un attribut name (ex: name="email", name="message") afin que les données soient identifiées.

7.3 Éléments essentiels pour le SEO et l'identité

Pour garantir que votre site soit parfaitement référencé par les moteurs de recherche et présente une identité visuelle professionnelle lors des partages, intégrez les éléments suivants.

Le Favicon

Identité visuelle du navigateur

Ce que c'est : Le favicon est la petite icône qui s'affiche dans l'onglet de votre navigateur web.

Comment le créer : Allez sur https://favicon.io/. Générez un favicon à partir de votre logo, téléchargez le ZIP, extrayez les images à la racine de votre dossier web. Copiez le code HTML fourni dans la section <head> de votre index.php.

L'image sociale (Open Graph)

Optimisation du partage

Ce que c'est : L'image d'aperçu générée lors du partage de votre lien sur les réseaux sociaux ou messageries.

Comment la créer : Concevez une image au format 1200 x 630 pixels. Nommez-la og-image.jpg. Intégrez-la dans le <head> en modifiant l'URL absolue :
<meta property="og:image" content="https://votre-domaine.fr/chemin/vers/og-image.jpg">

Le fichier Sitemap.xml

Cartographie pour les moteurs de recherche

Comment le créer : Si votre site ne comporte qu'une seule page, créez un fichier sitemap.xml à la racine pointant vers votre URL principale. Si vous avez plusieurs pages, utilisez un générateur en ligne (XML-Sitemaps). Soumettez ce fichier via la Search Console.

Le fichier Robots.txt

Règles d'exploration

Comment le créer : Créez un fichier robots.txt à la racine de votre hébergement avec ces lignes :
User-agent: *
Allow: /
Sitemap: https://votre-domaine.fr/sitemap.xml

7.4 Intégration des Données Structurées (JSON-LD)

Les données structurées permettent aux moteurs de recherche de comprendre précisément la nature de votre activité, vos services, et votre zone géographique pour déclencher l'affichage de résultats enrichis (Rich Snippets).

Comment intégrer le script

Positionnement et Modification

Copiez le code ci-dessous et collez-le strictement à l'intérieur de la balise <head> de votre fichier index.php. Remplacez chaque valeur par vos données réelles.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Forge Labs",
  "image": "https://forgelabs.fr/social.jpg",
  "@id": "https://www.forgelabs.fr/#organization",
  "url": "https://www.forgelabs.fr/",
  "telephone": "+33-6-26-29-00-64",
  "email": "contact@forgelabs.fr",
  "priceRange": "€€",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Rue de l'oyat",
    "addressLocality": "Sérignan",
    "postalCode": "34410",
    "addressRegion": "Occitanie",
    "addressCountry": "FR"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "43.2803",
    "longitude": "3.2797"
  },
  "founder": {
    "@type": "Person",
    "name": "Romain Perez",
    "jobTitle": "Développeur Web Full Stack"
  },
  "sameAs": [
    "https://www.facebook.com/forgelabsserignan",
    "https://www.linkedin.com/"
  ],
  "areaServed": [
    {"@type": "City", "name": "Sérignan"},
    {"@type": "City", "name": "Béziers"},
    {"@type": "AdministrativeArea", "name": "Hérault"}
  ],
  "knowsAbout": ["Développement Web", "SEO Technique", "HTML5", "CSS3", "JavaScript"],
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "09:00",
    "closes": "18:00"
  },
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Services Web",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Création Landing Page" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Site Vitrine Complet SEO" } }
    ]
  }
}
</script>

7.6 Suivi d'audience (Web Analytics)

Mesurer le trafic de votre site est indispensable pour évaluer vos stratégies d'acquisition. Le script de suivi s'intègre généralement juste avant la balise de fermeture </head> de votre code HTML.

Google Analytics 4 (GA4)

La norme du marché

L'outil gratuit de Google est le plus complet. Créez un compte Google Analytics, configurez un flux de données web, récupérez votre "ID de mesure" (ex: G-XXXXXXX) et copiez la balise globale (gtag.js) fournie dans l'en-tête de vos pages. Attention : l'utilisation de GA4 déclenche la nécessité stricte d'une bannière de consentement cookies (voir section Conformité & RGPD).

Alternatives respectueuses de la vie privée

Exemption de consentement

Pour éviter la lourdeur d'une bannière de cookies tout en obtenant des statistiques précises, orientez-vous vers des solutions d'analyse anonymisées conformes nativement aux recommandations de la CNIL. Des outils comme Matomo Analytics ou Plausible Analytics permettent un suivi efficace sans nécessiter le recueil du consentement utilisateur.

7.7 Déploiement et Mise en ligne (FTP)

Le protocole de transfert

Client FTP

Pour rendre votre site accessible sur Internet, vous devez transférer vos fichiers locaux vers l'espace de stockage de votre hébergeur web. Téléchargez et installez un client FTP gratuit tel que FileZilla.

Configuration de la connexion et transfert

  1. Récupérez les identifiants FTP fournis par votre hébergeur : Hôte, Identifiant, Mot de passe, Port.
  2. Ouvrez FileZilla et saisissez ces informations dans la barre de connexion rapide.
  3. Dans la fenêtre de droite (Site distant), naviguez jusqu'au dossier public (public_html ou www).
  4. Dans la fenêtre de gauche (Site local), naviguez jusqu'à votre projet. Sélectionnez l'intégralité des fichiers (index.php, dossiers assets/, etc.).
  5. Faites un clic droit sur la sélection, puis cliquez sur "Envoyer". Patientez jusqu'à la fin du transfert.

7.8 Vérification et gestion du Cache

Le fonctionnement du cache navigateur

Les navigateurs web conservent en mémoire les éléments statiques de votre site pour accélérer le chargement. Si vous mettez à jour votre site en ligne (via FTP), votre navigateur continuera probablement d'afficher l'ancienne version mémorisée.

Forcer le rafraîchissement (Hard Refresh)

Contournement technique

Pour forcer votre navigateur à purger sa mémoire et retélécharger l'ensemble des fichiers :

  • Sur Windows / Linux : Appuyez simultanément sur Ctrl + F5 (ou Ctrl + Maj + R).
  • Sur Mac : Appuyez simultanément sur Cmd + Maj + R.

En cas de doute, ouvrez votre site dans une fenêtre de navigation privée.

7.9 Utilisation de la Google Search Console

La Google Search Console (GSC) est l'outil officiel gratuit fourni par Google pour surveiller l'indexation et la santé technique de votre site.

Configuration de la Search Console

  1. Connectez-vous à search.google.com/search-console avec votre compte Google.
  2. Ajoutez une propriété : Choisissez "Domaine" ou "Préfixe de l'URL".
  3. Validez la propriété : Suivez les instructions pour ajouter l'enregistrement TXT dans la configuration DNS de votre nom de domaine.

Indexer son site sur Google

Forcer la découverte
  • Soumission du Sitemap : Dans "Sitemaps", saisissez l'URL de votre fichier et envoyez.
  • Inspection de l'URL : Copiez l'URL de votre page d'accueil, collez-la dans la barre de recherche GSC en haut. Une fois l'analyse terminée, cliquez sur le bouton "Demander l'indexation".

7.10 Gagner des positions sur Google

Votre template Forge Labs garantit un socle technique parfait (Mobile-first, vitesse, accessibilité, structure W3C). Pour exploiter cette base :

La Sémantique et le Contenu

Les moteurs de recherche lisent du texte. Vos balises <title> et <h1> doivent inclure les termes exacts que vos futurs clients tapent sur Google. Visez des mots-clés localisés (ex: "Développeur web à Sérignan").

L'Autorité (Netlinking)

Google fonctionne comme un système de recommandation. Obtenez des liens externes (backlinks) pointant vers votre site (annuaires de qualité, chambres de commerce, partenaires) pour améliorer vos positions.

Le Référencement Local

Créez une fiche Google Business Profile. Remplissez-la exhaustivement et demandez des avis à vos clients. Une fiche active renforce considérablement la visibilité locale.

8. Foire Aux Questions (FAQ)

Que se passe-t-il si je quitte la page sans cliquer sur "Enregistrer" ?

Toutes les modifications non sauvegardées seront définitivement perdues. Le système écrit dans le fichier source uniquement lors de la validation explicite. Assurez-vous de toujours enregistrer vos actions avant de changer d'onglet ou de fermer le navigateur.

Puis-je casser le design ou la structure du site en modifiant les textes ?

Non. L'architecture de FORGE ADMIN sépare strictement le contenu (les textes et images) de la structure technique (le code HTML/CSS global). Le design est protégé nativement ; vos modifications se limitent au contenu affiché.

Comment annuler une erreur de saisie ou revenir en arrière ?

Si vous n'avez pas encore cliqué sur le bouton d'enregistrement, rechargez simplement la page (touche F5) : les champs reprendront leurs valeurs initiales. Si vous avez déjà enregistré, la sauvegarde écrase l'ancien contenu ; vous devrez alors ressaisir manuellement la valeur précédente.

Pourquoi certains champs n'acceptent pas de mise en forme HTML ?

Afin de garantir une validation W3C parfaite, un temps de chargement optimal et un rendu pixel-perfect, seuls les champs spécifiquement prévus pour de la mise en page riche autorisent les balises HTML. Cela empêche les injections de code accidentelles qui pourraient altérer les performances SEO du site.

9. Besoin d'assistance ?

Pour toute demande d'intervention, besoin d'évolution sur votre site, ou support technique, l'équipe Forge Labs est à votre disposition :