Aller au contenu
UFR Ingémedia
Sommaire de la journée
Atelier 3

Le Gantt en HTML

L'après-midi pour mettre en planning tout ce qu'on a décidé le matin, du kick-off au lancement, sous forme d'un fichier HTML autonome.

Après-midi · En équipe En équipe
Intention pédagogique

Sortir des slides théoriques pour produire quelque chose de tangible. Voir si les arbitrages du matin tiennent debout quand on les pose dans un planning.

Objectif

Produire un planning Gantt complet du projet RoadTrip Squad, du kick-off au lancement public, livré sous forme d'un fichier HTML autonome ouvrable directement dans un navigateur, sans serveur. Tous les assets embarqués ou liés à des CDN publics.

Périmètre temporel

Démarrage : 1er juin 2026. Mise en production publique : 15 octobre 2026. Soit dix-neuf semaines, environ 95 jours ouvrés. Vous pouvez utiliser l'outil de votre choix, y compris en vibe coding via Claude ou un autre assistant, du moment que vous comprenez ce que vous livrez et que vous pouvez le défendre.

Pour un Gantt qui tient la route

  • Échelle de temps lisible (semaine ou jour selon zoom).
  • Tâches groupées par lot de travail. Lots minimum : Cadrage et conception, Design system et UI, Développement back, Développement mobile, Recette interne, Bêta fermée, Mise en production et publication stores.
  • Dépendances visibles entre tâches (flèches ou indicateurs).
  • Au moins huit jalons identifiables : kick-off, validation maquettes, fin design, fin développement back, fin développement mobile, début bêta, fin recette, mise en production.
  • Pourcentage d'avancement par tâche (à zéro au démarrage, mais le mécanisme doit exister).
  • Date du jour matérialisée par une ligne verticale.
  • Légende complète.

Côté visuel

  • Lisibilité avant tout.
  • Une couleur par lot (5 à 7 couleurs maximum).
  • Une couleur ou un marquage spécifique pour les jalons.
  • Typographie hiérarchisée (titre projet, lots, tâches).
  • Header avec nom de l'agence, nom du projet, date de version.
  • Pas de gradients agressifs, pas d'ombres tape-à-l'œil.

Bonus valorisés

  • Tooltip au survol d'une tâche (responsable, durée, livrable).
  • Vue d'ensemble plus zoom sur une période.
  • Indication du chemin critique.
  • Mode imprimable propre via @media print.
  • Vue ressources (qui fait quoi sur la période).

Cohérence avec les ateliers du matin

Le Gantt doit être cohérent avec l'équipe et les TJM définis le matin (les profils alloués aux tâches doivent exister dans votre équipe), avec le périmètre V1 (toutes les fonctionnalités V1 doivent apparaître, rien de ce qui est en V2 ne doit y figurer), et avec le chiffrage global (la somme des charges Gantt doit recouper le coût total équipe annoncé le matin).

Pièges à éviter

  • Une seule tâche "Développement" de 10 semaines sans découpage.
  • L'oubli de la phase de recette.
  • L'oubli des temps de validation client.
  • L'oubli de la publication stores (compter 7 à 10 jours pour Apple, 2 à 3 pour Google).
  • Le démarrage du dev avant la fin du design.
  • L'absence totale de marge de sécurité.