1. Contexte
• Client: Print it, imprimerie familiale souhaitant dynamiser son site statique.
• Équipe: Artdantech, Lucien (directeur, donneur d’ordres via vidéo d’explications).
• Livrables: carrousel fonctionnel sur la page d’accueil, conforme aux attentes (flèches, bullet points, boucle infinie, texte/image synchronisés), code intégré au repo du site.
• Point de départ: page et CSS existants, assets fournis (arrow_left.png, arrow_right.png, images du slider), fichier script.js avec tableau slides.
2. Besoin
• Ajouter un carrousel dynamique permettant de parcourir les visuels (gauche/droite), d’indiquer la position via des bullets, de boucler en continu, et d’afficher une “tagLine” liée à chaque image.
• Conserver la charte et les styles existants (réutiliser les classes CSS, ne pas casser la mise en page).
3. Client
• Visiteurs du site Print it (desktop et mobile) pour découvrir l’offre de manière visuelle et interactive.
• Lucien (validation de l’UX simple et claire, conformité à la vidéo).
4 Objectifs
4.1 Fonctionnels
• Navigation par flèches (précédent/suivant).
• Affichage de bullets dynamiques, mise en avant du bullet actif.
• Synchronisation image + texte (tagLine) à chaque changement de slide.
• Défilement infini: retour au début/fin sans erreur.
4.2 Techniques
• HTML: insertion des flèches dans la bannière/slider, conteneur pour les bullets, structure sémantique.
• CSS: réutilisation des classes existantes pour positionner flèches et bullets (aucun changement majeur de style).
• JavaScript vanilla: listeners sur flèches, génération des bullets à partir de slides[], gestion de l’index courant, mise à jour DOM, boucle infinie.
5. Contraintes / défis
• Respect du CSS existant (classes/positions déjà prévues pour flèches et bullets).
• Robustesse: pas d’erreur aux bornes (index), comportement identique sur tous les navigateurs modernes.
• Accessibilité: contrôles au clavier et attributs ARIA pour les flèches; alt pour les images; focus visible.
• Maintenabilité: code clair, peu de globales, logique isolée (fonctions pures autant que possible).
6. Processus / méthodologie
6.1 Analyse
• Parcourir le HTML/CSS fournis: repérer la bannière, le conteneur image, l’emplacement prévu des flèches et des bullets (classes .arrow, .arrow_left/.arrow_right, .dots, .dot_selected si présentes).
• Vérifier script.js: structure du tableau slides = [{image: '...', tagLine: '...'}, …].
6.2 Découpage en issues (GitHub)
• Intégration des flèches dans le DOM (HTML).
• Mise en place des event listeners (gauche/droite) + tests (console.log).
• Génération des bullets dynamiques à partir de slides.length; gestion de l’état actif.
• Logique de changement de slide (image + tagLine + bullet actif).
• Boucle infinie (wrap-around) et cas limites (1 slide, images manquantes).
• Accessibilité clavier/ARIA + nettoyage console + tests finaux.
6.3 Architecture et logique
• Arborescence (exemple): cf github
• Données: const slides = [{ image: 'slide1.jpg', tagLine: 'Texte <span>accentué</span>' }, …];
• État: let current = 0;
• Fonctions clés: - renderDots(): crée N bullets, ajoute .dot_selected au premier, click → goTo(i).<br /> - updateSlide(): met à jour src de l’image, innerHTML de .tagline, état des bullets.<br /> - next(): current = (current + 1) % slides.length; updateSlide().<br /> - prev(): current = (current - 1 + slides.length) % slides.length; updateSlide().<br /> - goTo(i): current = i; updateSlide().<br />
• Listeners: .arrow_right.addEventListener('click', next); .arrow_left.addEventListener('click', prev); optionnel: keydown (ArrowRight/ArrowLeft).
6.4 Choix techniques (justification)
• Vanilla JS suffisant: faible complexité, contrôle fin du DOM sans dépendances.
• Boucle infinie via modulo: simple, fiable, évite les conditions imbriquées lourdes.
• Bullets dynamiques: aucune maintenance lors d’ajout/suppression de slides.
• Accessibilité: flèches en <button> avec aria-label; bullets focusables si cliquables; gestion clavier.
6.5 Flux principaux
• Clic sur flèche droite: bullet actif → suivant, image + tagline → suivantes, si fin → revient au premier (boucle).
• Clic sur flèche gauche: idem vers l’arrière, si début → passe au dernier (boucle).
• Clic sur bullet: va directement à l’index ciblé, met à jour image + texte + état actif.
6.6 Tests et qualité
• Tests unitaires légers manuels: passage d’index, wrap-around, synchro image/texte/bullets, click sur bullet arbitraire, navigation rapide (clics successifs).
• Accessibilité: navigation clavier (Tab + Enter/Espace, flèches gauche/droite si implémentées), focus visible, alt images; contrastes inchangés par le CSS existant.
• Validation: HTML/CSS (W3C), console propre (pas d’erreurs), compatibilité navigateurs modernes.
7. Analyse
• En séparant données (slides), état (current) et rendu (updateSlide), le carrousel reste simple, extensible (ajouter des slides, des légendes) et robuste. La génération dynamique des bullets supprime une source d’erreurs récurrente (mauvais comptage).
8. Choix techniques
• DOM API moderne (querySelector, classList), gestion d’événements standard, modulo pour boucle infinie, innerHTML contrôlé pour tagLine riche (provenant d’un tableau maîtrisé).
• Progressif: commandes au clavier en bonus, pas de dépendance à un framework.
9. Logique de résolution
• Intégrer les flèches (HTML) → brancher les listeners (JS) → générer les bullets (slides.length) → implémenter la navigation (updateSlide) → ajouter le wrap-around → finaliser accessibilité et tests.
10. Stack utilisée
• HTML5 (structure du slider, boutons, conteneurs).
• CSS existant (positionnement flèches, styles bullets, responsive natif du site).
• JavaScript ES6+ (script.js), aucun framework, outils navigateur (DevTools).
11. Résultat final
• Carrousel dynamique, fluide et accessible: flèches interactives, bullets synchronisés, boucle infinie, image et tagLine mises à jour en cohérence.
• Intégration respectant le style en place, code clair et maintenable, prêt pour démonstration à Lucien et déploiement sur le site Print it.