1. Contexte
• Entreprise: Webonzaï (agence web) — Client: Riding Cities, association de skate en région.
• Équipe: Artdantech, Romain (CTO), graphiste (maquette fournie).
• Livrables: page HTML mise à jour conforme à la maquette, nouvelle section “Les membres fondateurs”, section planning avec titre et deux boutons de téléchargement (enfants/adultes), pack d’assets (images optimisées, PDFs) et notes de livraison (ou commits).
• Point de départ: vidéo d’instructions (03:57), page et code existants, maquette finale (fichiers fournis en pièces jointes).
2. Besoin
• Créer une nouvelle section “Les membres fondateurs” avec les noms et photos des créateurs (alt text descriptifs, légendes si prévues par la maquette).
• Modifier la section “Télécharger le planning de cours” pour ajouter un titre et deux boutons distincts: “Planning enfants” et “Planning adultes”.
• Ne développer qu’en HTML, en réutilisant et copiant-collant les classes CSS existantes pour reproduire précisément la maquette et préserver la responsivité.
3. Client
• Riding Cities (public cible: familles, enfants, adultes pratiquant le skate).
• Romain (CTO) pour la validation technique et la conformité à la maquette.
• Webonzaï (agence) pour la qualité, la maintenabilité et la rapidité d’exécution.
4 Objectifs
4.1 Fonctionnels
• Afficher la section “Les membres fondateurs” avec photos, noms et, si présent dans la maquette, un court descriptif/rôle.
• Proposer deux téléchargements distincts du planning: enfants et adultes, avec un titre clair au-dessus de la section.
• Conserver la cohérence visuelle du site et l’accessibilité (structure sémantique, textes alternatifs, ordre de lecture).
4.2 Techniques
• Exclusivement HTML: réutiliser les classes CSS existantes (copier-coller), ne pas modifier le fichier CSS.
• Sémantique: section, h2, ul/li ou figure/figcaption pour les fondateurs; a avec attribut download pour les plannings.
• Accessibilité: alt descriptifs, titres explicites, liens/boutons identifiables au clavier, hiérarchie de titres cohérente.
• Compatibilité et responsive: respecter la grille et les classes utilitaires existantes, images aux bonnes dimensions prévues par la maquette.
5. Contraintes / défis
• Pas de CSS/JS à écrire: tout doit être obtenu par structure HTML et classes déjà définies.
• Conformité stricte à la maquette et au design system en place (typographies, espacements, styles de boutons).
• Gestion des assets: noms de fichiers cohérents, poids optimisé (sans retoucher le CSS), bons attributs src, alt, et formats compatibles.
• Délais courts: livrer rapidement une version fidèle et validable à distance par Romain.
6. Processus / méthodologie
6.1 Analyse
• Ouvrir la maquette et repérer la structure cible des sections (titres, grilles, marges, tailles d’images, styles de boutons).
• Auditer le HTML existant: identifier les composants réutilisables (cards, boutons, grilles) et les classes utilitaires (espacements, couleurs).
• Lister les assets manquants: photos des fondateurs (tailles/ratios) et deux fichiers planning (PDF) nommés clairement (planning-enfants.pdf, planning-adultes.pdf).
6.2 Découpage en issues (GitHub)
• Préparation: lecture des fichiers fournis, création d’une branche “feature/riding-cities-update”.
• Section “Les membres fondateurs”: structure sémantique, intégration des images et noms, application des classes CSS existantes.
• Section planning: ajout du titre, duplication du bouton existant pour créer deux CTA distincts, textes et liens corrects (attribut download).
• Accessibilité et contenus: alt images, ordre des titres, textes des liens/boutons explicites.
• Vérifications: responsive, liens fonctionnels, validation W3C, corrections finales et PR.
6.3 Architecture et logique
• Document HTML global: conserver header, main, footer existants; ajouter les nouvelles sections dans main selon l’ordre de la maquette.
• “Les membres fondateurs”:
- section#founders avec h2 “Les membres fondateurs”.
- Grille d’éléments: ul > li ou cartes; pour chaque membre: figure > img + figcaption (nom, rôle).
- Classes: réemployer les classes de cartes/grilles déjà présentes (ex.: .card, .grid, .avatar si disponibles).
• “Télécharger le planning de cours”:
- section#planning avec un h2 clair.
- Deux liens de téléchargement: Planning enfants et idem pour adultes.
- Reprendre la classe du bouton existant pour la cohérence visuelle (primary/secondary si prévu).
6.4 Choix techniques (justification)
• Sémantique HTML5 pour améliorer accessibilité/SEO sans toucher au CSS.
• Réutilisation stricte des classes existantes pour assurer un rendu pixel‑perfect par rapport à la maquette et éviter les régressions CSS.
• figure/figcaption pour associer visuellement et sémantiquement image + nom/rôle des fondateurs.
• Attribut download sur les liens des plannings afin d’offrir un comportement explicite à l’utilisateur.
6.5 Flux principaux
• Intégration fondateurs: créer la section, insérer les figures (img + figcaption), appliquer la grille, vérifier le rendu desktop/mobile.
• Intégration plannings: insérer le titre, dupliquer le bouton existant, ajuster les libellés et cibles (PDF), tester les téléchargements.
• Revue rapide: cohérence des titres, alignements, marges, textes alternatifs, liens valides.
6.6 Tests et qualité
• Validation HTML: W3C Validator (aucune erreur bloquante).
• Accessibilité: navigation clavier, focus visibles, alt significatifs, titres hiérarchisés; audit rapide avec axe/Chrome DevTools.
• Responsive: tests sur largeurs clés (mobile, tablette, desktop), vérification du wrapping des cartes fondateurs et de la disposition des boutons.
• Liens et assets: vérifier les chemins, noms de fichiers, disponibilité des PDFs et affichage des images.
7. Analyse
• Le périmètre limité au HTML impose une bonne connaissance des classes existantes et une structure sémantique propre. En réutilisant les patterns de mise en page et de composants déjà présents, on garantit une intégration rapide, cohérente et accessible, sans endommager le style global du site.
8. Choix techniques
• HTML5 sémantique (sections, titres) et patterns figure/figcaption pour les portraits.
• Liens de téléchargement avec download, textes explicites et distinction claire enfants/adultes.
• Réemploi systématique des classes CSS du design system du site pour respecter la maquette et la responsivité existante.
9. Logique de résolution
• Partir de la maquette et des composants déjà en place, ajouter la section fondateurs en miroir d’une grille existante, puis refondre la zone planning par duplication contrôlée du bouton initial; finaliser par une passe accessibilité/résponsive et valider le HTML avant livraison.
10. Stack utilisée
• HTML5 uniquement (aucune modification CSS/JS).
• Outils: éditeur de code, Live Server/preview navigateur, W3C Validator, Chrome DevTools (responsive), gestion de versions Git (branche + PR).
• Assets: images optimisées (formats et dimensions conformes à la maquette), PDFs nommés clairement.
11. Résultat final
• Page Riding Cities mise à jour: section “Les membres fondateurs” fidèle à la maquette et section planning avec titre + deux boutons distincts (enfants/adultes).
• Accessibilité et sémantique respectées (titres, alt, clavier), rendu responsive conforme grâce aux classes CSS existantes.
• Livraison propre: HTML validé, liens fonctionnels, arborescence d’assets claire, notes de livraison (ou commits) prêtes pour la revue de Romain.