GUIDE DÉVELOPPEUR

AK-SOLUTIONS

Intégrez facilement des composants et respectez l'identité visuelle.

Introduction

Bienvenue sur le guide du développeur pour AK-Solutions. Ce document a pour but de vous aider à démarrer rapidement, à comprendre la structure du projet et à utiliser efficacement les composants de notre charte graphique.

Nous utilisons Bootstrap 5, la police Nunito, et un ensemble de styles personnalisés définis dans css/charte_graph.css.

Installation & Configuration

Structure HTML de base

Voici la structure minimale pour une nouvelle page :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre de la Page - AK-Solutions</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="css/charte_graph.css"> <!-- Styles personnalisés -->
</head>
<body>
  <!-- Navbar (voir composant) -->

  <main class="container py-5">
    <!-- Contenu de la page -->
    <h1>Titre de la Page</h1>
  </main>

  <!-- Footer (voir composant ou créer) -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- script src="js/script-charte-graphique.js"></script> <!-- Scripts personnalisés si besoin -->
</body>
</html>

Variables CSS Clés

Utilisez ces variables CSS (définies dans css/charte_graph.css) pour une cohérence globale :

  • var(--primary-blue): #007FFF
  • var(--primary-blue-dark): #0059B2 (Exemple, à vérifier dans le CSS)
  • var(--secondary-orange): #FF8C00
  • var(--font-family): 'Nunito', sans-serif
  • Et les variables d'espacement/rayons (--space-s, --radius-m, etc.)

Principes de Base (Rappel)

Pour une compréhension détaillée de notre identité visuelle, veuillez consulter la Charte Graphique complète. Voici des liens rapides vers les sections clés :

Couleurs
Typographie
Espacement & Rayons
Responsive

Bibliothèque de Composants

Boutons

Utilisez ces classes pour les boutons personnalisés AK-Solutions.

<!-- Bouton Principal (Orange) -->
<button class="btn btn-primary-custom">
  <i class="bi bi-check me-2"></i>Bouton Principal
</button>

<!-- Bouton Outline (Bleu) -->
<button class="btn btn-outline-custom">
  <i class="bi bi-arrow-right me-2"></i>Bouton Outline
</button>

Cartes de Service

Structure pour les cartes de présentation de services.

Titre Service

Description courte du service proposé.

En savoir plus 
<div class="service-card">
  <div class="service-icon">
    <i class="bi bi-gear"></i> <!-- Changer l'icône -->
  </div>
  <h5>Titre Service</h5>
  <p>Description courte du service proposé.</p>
  <div class="mt-auto">
    <a href="#" class="btn btn-sm btn-outline-primary">En savoir plus</a>
  </div>
</div>

Navigation (Header)

Exemple de structure pour la barre de navigation principale. Adaptez les liens selon les besoins.

<!-- La classe navbar-custom est définie dans charte_graph.css pour la navbar principale du site -->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="index.html">
      <!-- Remplacer par le logo SVG ou Image si disponible -->
      <i class="bi bi-gem me-2"></i>AK-Solutions 
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <!-- ms-auto pour aligner à droite -->
        <li class="nav-item"><a class="nav-link nav-link-custom" href="index.html">Accueil</a></li>
        <li class="nav-item"><a class="nav-link nav-link-custom" href="services.html">Services</a></li>
        <li class="nav-item"><a class="nav-link nav-link-custom" href="a-propos.html">À Propos</a></li>
        <li class="nav-item"><a class="nav-link nav-link-custom" href="portfolio.html">Portfolio</a></li>
      </ul>
      <button class="btn btn-contact btn-contact-demo ms-lg-3"> <!-- Utiliser btn-contact-demo ou btn-primary-custom -->
        <i class="bi bi-envelope me-2"></i>Contact
      </button>
    </div>
  </div>
</nav>

Cartes de Témoignage (Style Google)

Pour afficher les avis clients.

Nom du Client

"Citation du témoignage client ici..."

<div class="testimonial-card-google">
  <div class="d-flex align-items-center mb-3">
    <div class="testimonial-avatar me-3"></div> <!-- Stylez .testimonial-avatar avec une image ou initiales -->
    <div>
      <h6 class="mb-1">Nom du Client</h6>
      <div class="testimonial-stars">
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-half"></i> <!-- ou bi-star pour vide -->
      </div>
    </div>
  </div>
  <p class="mb-0">"Citation du témoignage client ici..."</p>
</div>

Icônes Bootstrap

Nous utilisons Bootstrap Icons. Intégrez-les facilement avec la balise <i>.

<!-- Exemple d'icône -->
<i class="bi bi-gear"></i>

<!-- Avec taille et couleur -->
<i class="bi bi-phone fs-2 text-primary"></i>

Modèle de Page Vierge

Utilisez ce modèle comme point de départ pour toute nouvelle page sur le site AK-Solutions. Il inclut les en-têtes, la structure de base, et les scripts nécessaires.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Titre de la Page] - AK-Solutions</title>

  <!-- Polices et CSS Bootstrap -->
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">

  <!-- CSS Personnalisé AK-Solutions -->
  <link rel="stylesheet" href="css/charte_graph.css"> <!-- Ajustez le chemin si nécessaire -->

  <!-- Favicon (exemple, à remplacer) -->
  <!-- link rel="icon" href="favicon.ico" type="image/x-icon" -->
</head>
<body>

  <!-- Barre de Navigation (copier/coller depuis la section Composants ou adapter) -->
  <nav class="navbar navbar-expand-lg navbar-custom fixed-top">
    <div class="container">
      <a class="navbar-brand fw-bold" href="index.html">AK-Solutions</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbarPage">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNavbarPage">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link nav-link-custom" href="index.html">Accueil</a></li>
          <!-- Autres liens -->
        </ul>
        <button class="btn btn-contact-demo ms-lg-3">Contact</button>
      </div>
    </div>
  </nav>

  <!-- Contenu Principal de la Page -->
  <main>
    <!-- Hero Section (Optionnel, exemple de la charte graphique) -->
    <header class="hero-section" style="padding-top: 120px; padding-bottom: 60px;"> <!-- Ajuster padding si navbar fixe -->
      <div class="container text-center">
        <h1 class="display-5 mb-3">[Titre Principal de la Page]</h1>
        <p class="lead mb-4">[Sous-titre ou description courte]</p>
      </div>
    </header>

    <!-- Section de contenu -->
    <section class="section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2>[Titre de Section]</h2>
            <p>Contenu de la section...</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Autres sections si nécessaire -->

  </main>

  <!-- Footer (copier/coller depuis la charte graphique ou adapter) -->
  <footer class="bg-dark text-white py-4 mt-auto">
    <div class="container text-center">
      <p class="mb-0">© <script>document.write(new Date().getFullYear())</script> AK-Solutions. Tous droits réservés.</p>
      <p class="mb-0 small">Site web réalisé par <a href="https://github.com/magicolala" target="_blank" rel="noopener noreferrer" class="footer-link">Cédric Oloa</a></p>
    </div>
  </footer>

  <!-- Scripts JS Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- Scripts personnalisés AK-Solutions (si besoin) -->
  <!-- script src="js/script-charte-graphique.js"></script> -->

</body>
</html>

Créer une Page Plaquette (pour Maija)

Salut Maija ! Comme convenu, tu vas créer une page "plaquette" pour l'entreprise de Karim, accessible via un QR code. Cette section est spécialement pour toi ! L'idée est de te fournir une base simple pour que tu puisses te concentrer sur la rédaction et la mise en page du contenu. Je m'occupe de la structure et des liens principaux. Tu te charges du reste ! 😉

Objectif de la page plaquette

Cette page sera une sorte de "carte de visite numérique" ou de "mini-menu" des services. Elle doit être :

  • Simple et directe : Les informations clés doivent être faciles à trouver.
  • Statique : Pas de fonctionnalités complexes, juste du contenu informatif.
  • Adaptée aux mobiles : Beaucoup de gens scanneront le QR code avec leur téléphone.
  • Cohérente avec l'image d'AK-Solutions : Utiliser les polices et couleurs de la charte.

Modèle de base pour ta page

Voici un modèle HTML que tu peux utiliser. Enregistre-le sous un nom de fichier comme plaquette-karim.html à la racine du projet (au même niveau que index.html). 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AK-Solutions - [Titre de la Plaquette]</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="css/charte_graph.css"> <!-- Styles AK-Solutions -->
  <style>
    body { font-family: 'Nunito', sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; }
    .plaquette-header { background-color: var(--primary-blue, #007FFF); color: white; padding: 20px; text-align: center; }
    .plaquette-header img { max-height: 50px; margin-bottom: 10px; }
    .plaquette-content { padding: 20px; background-color: white; margin: 20px auto; border-radius: var(--radius-m, 12px); box-shadow: var(--shadow-100, 0px 0px 8px 2px rgba(0,0,0,.1)); max-width: 800px; }
    .plaquette-footer { text-align: center; padding: 20px; font-size: 0.9em; color: #6c757d; }
    .plaquette-actions { margin-top: 30px; text-align: center; }
    .plaquette-actions .btn { margin: 5px; }
  </style>
</head>
<body>
  <header class="plaquette-header">
    <!-- Optionnel: Logo AK-Solutions. S'il est utilisé, s'assurer que le chemin est correct, ex: "img/logo-ak-solutions-blanc.png" -->
    <!-- <img src="img/logo.webp" alt="Logo AK-Solutions" style="filter: brightness(0) invert(1);"> -->
    <h1>AK-Solutions</h1>
  </header>

  <main class="plaquette-content">
    <h2>[Titre Principal de la Plaquette par Maija]</h2>
    <p>
      [Ici, Maija, tu peux mettre le contenu principal de la page.
      Tu peux utiliser des titres (h2, h3), des paragraphes (p),
      des listes (ul, li), etc. pour présenter les services de conseil en communication, secrétariat, comptabilité, conseil en image et rédaction.]
    </p>
    <p>
      Par exemple, pour les services de Karim :
    </p>
    <ul>
      <li>Plomberie Générale</li>
      <li>Électricité HT & BT</li>
      <li>Climatisation & Froid</li>
      <li>Travaux de Second Œuvre</li>
    </ul>

    <div class="plaquette-actions">
      <a href="index.html#contact" class="btn btn-primary-custom me-2">
        <i class="bi bi-envelope me-2"></i>Demander un devis
      </a>
      <a href="tel:+33764352198" class="btn btn-outline-custom">
        <i class="bi bi-telephone me-2"></i>Nous appeler (07 64 35 21 98)
      </a>
    </div>
  </main>

  <footer class="plaquette-footer">
    <p>© <script>document.write(new Date().getFullYear())</script> AK-Solutions. Tous droits réservés.</p>
    <p><a href="index.html">Retour au site principal AK-Solutions</a></p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Comment l'utiliser ?

  1. Copie le code ci-dessus et enregistre-le dans un nouveau fichier (ex: plaquette-karim.html) à la racine du projet.
  2. Modifie le titre de la page : Dans la balise <title>, remplace [Titre de la Plaquette].
  3. Personnalise le contenu :
    • Dans la section <main class="plaquette-content">, remplace [Titre Principal de la Plaquette par Maija] et le texte d'exemple par ton propre contenu.
    • Tu peux utiliser des balises HTML classiques : <h2>, <h3> pour les titres, <p> pour les paragraphes, <ul><li>...</li></ul> pour les listes.
    • Les styles de base (polices, couleurs principales) sont déjà appliqués grâce à css/charte_graph.css et quelques styles spécifiques dans la balise <style> du modèle.
  4. Liens importants :
    • Le bouton "Demander un devis" pointe déjà vers la section contact de la page d'accueil (index.html#contact).
    • Le bouton "Nous appeler" initie un appel vers le numéro d'AK-Solutions.
    • Si tu as besoin d'autres liens, tu peux les ajouter en utilisant la balise <a href="URL_DE_DESTINATION">Texte du lien</a>. Pour un style de bouton, tu peux utiliser les classes btn btn-primary-custom ou btn btn-outline-custom (définies dans css/charte_graph.css).
  5. Optionnel : Logo
    • Si tu souhaites ajouter le logo d'AK-Solutions en haut, tu peux décommenter la ligne commençant par <!-- <img src="img/logo.webp" .... Assure-toi que le chemin vers l'image (img/logo.webp) est correct et que le logo est visible sur le fond bleu (le style filter: brightness(0) invert(1); essaie de le rendre blanc). Sinon, le nom "AK-Solutions" s'affichera.

Comment télécharger et démarrer le projet (sans Git)

Comme tu n'es pas familière avec GitHub, voici la méthode la plus simple pour récupérer les fichiers du site et commencer à travailler sur ta page :

  1. Télécharger le projet en ZIP :
    • Rends-toi sur la page du projet : https://github.com/magicolala/AK-solutions.
    • Sur la page, cherche un bouton vert " Code". Clique dessus.
    • Dans le menu qui apparaît, clique sur "Download ZIP".
    • Cela va télécharger un fichier nommé `AK-solutions-main.zip` (ou similaire) sur ton ordinateur.
  2. Décompresser le fichier :
    • Retrouve le fichier `AK-solutions-main.zip` dans tes téléchargements.
    • Fais un clic droit dessus et choisis "Extraire tout..." ou "Décompresser ici" (le nom exact peut varier selon ton système d'exploitation).
    • Cela va créer un dossier nommé `AK-solutions-main` contenant tous les fichiers du site.
  3. Commencer à travailler :
    • Dans ce dossier `AK-solutions-main`, tu trouveras le fichier `index.html`, le dossier `css/`, `img/`, etc. C'est ici que tu créeras ton fichier `plaquette-karim.html` en suivant le modèle ci-dessus.
    • Tu peux ouvrir les fichiers `.html` directement avec ton navigateur pour voir le résultat, et les modifier avec un éditeur de texte simple (comme le Bloc-notes, TextEdit, ou mieux, un éditeur gratuit comme Visual Studio Code si tu veux plus de confort).
  4. Me transmettre les fichiers :
    • Une fois que tu as terminé ta page `plaquette-karim.html` (et éventuellement modifié d'autres fichiers si besoin), tu pourras simplement me donner ces fichiers. Je me chargerai de les intégrer et de les mettre en ligne.

Cette méthode te permet de travailler tranquillement sur ton ordinateur sans te soucier des commandes Git complexes.

Quelques conseils

  • Reste simple : L'objectif est d'informer rapidement.
  • Relis-toi bien : Vérifie l'orthographe et la grammaire.
  • Teste sur mobile : Ouvre le fichier HTML sur ton téléphone pour voir comment il s'affiche. Le modèle est déjà responsive.

Si tu as des questions techniques pendant que tu crées le contenu, n'hésite pas à me demander !