Field Atlas : guide interactif des filières de production

_contexte

Field Atlas est un guide interactif sur ce qu'exigent les produits d'origine animale. Le lecteur choisit quelque chose qu'il mange ou qu'il porte, et le site le guide pas à pas dans la filière de production, en associant à chaque étape une photographie de l'équipement réel, une explication et une source pour chaque affirmation. Le projet est parti d'un fichier HTML unique de 13 Mo, avec 75 photographies encodées en base64 et toutes les feuilles de style dans le même document. C'est aujourd'hui un modèle de contenu structuré qui génère 561 pages statiques en sept langues, et le site est accessible publiquement.

_mon-rôle

J'ai tout construit seul : l'architecture de contenu qui sépare la structure du texte, le système à sept langues avec sa chaîne de repli, la machine à états du parcours guidé, le pipeline d'images responsives et l'outillage qui maintient les traductions synchronisées.

_ce-que-j-ai-construit

• Un parcours guidé qui avance une étape à la fois, avec une photographie et une source à chaque étape.
• Un catalogue consultable de 50 outils documentés, et de petites énigmes générées à partir de ces mêmes données.
• Un système de contenu à sept langues avec chaîne de repli et outillage pour signaler les écarts entre les langues.

_points-techniques

• Le point de départ était un fichier HTML de 13 Mo contenant 75 photographies encodées en base64 et toutes les feuilles de style dans le même document ; c'est désormais un modèle de contenu structuré qui génère 561 pages statiques.
• Structure et texte sont stockés séparément : ajouter une langue ne touche jamais la mise en page, et une modification de mise en page n'invalide jamais une traduction.
• Chaque affirmation factuelle porte un lien de citation, et la logique des étapes du parcours est une fonction pure de l'état du lecteur plutôt que de l'état du DOM.