Octopatlas

Octopatlas est une expérience narrative, interactive et ludique qui invite chacun à naviguer librement à travers une pluralité de scénarios explorant les transformations profondes de la Route du Nord.

L’ouverture de ce nouveau passage maritime, rendue possible par la fonte des glaces arctiques, redéfinit les enjeux politiques, économiques, culturels et écologiques de la région. Les recherches ethnographiques et exploratoires menées par les équipes de KHiO et AHO nourrissent cette cartographie.

De l’extractivisme à la militarisation des glaces, en passant par les droits des peuples autochtones et le tourisme de la dernière chance, l’atlas confronte ses visiteurs aux espoirs, aux risques et aux opportunités de cette nouvelle réalité polaire.

À mi-chemin entre spéculation contemplative et poésie anticipatrice, ses récits invitent chacun à imaginer son évolution personnelle et professionnelle dans ces futurs possibles.

Octopatlas est le premier projet web professionnel sur lequel j’ai travaillé. Il s’agissait de créer une carte interactive évolutive à partir d’interfaces conçues dans Illustrator puis exportées en SVG par le web designer du projet.

Je travaillais également avec un chef de projet chargé de la communication client, de la direction globale et de la rédaction. L’un des défis majeurs consistait à rendre l’équipe et le client autonomes malgré l’absence de compétences techniques en développement web.

L’optimisation était tout aussi importante : la carte devait rester fluide sur une grande variété d’appareils et compatible avec Chrome, Firefox et Edge. J’ai aussi adopté SCSS pendant le projet afin de structurer plus efficacement les nombreux styles.

Après près de trois semaines de développement, la carte gérait correctement ses trois états. J’ai cependant constaté un problème majeur : le site était déjà lent au repos, et chaque nouvelle icône validée accentuait le ralentissement.

J’ai dû repartir presque de zéro. Une semaine de débogage, de relecture de la documentation et de tests m’a permis de résoudre le problème tout en améliorant nettement les performances et l’apparence visuelle.

J’ai mis en place plusieurs Google Sheets pour centraliser les textes et les options de personnalisation. L’équipe et le client pouvaient ainsi faire évoluer le contenu sans intervenir dans le code.

Gestion des icônes Chaque icône possédait un identifiant unique, un titre de chapitre, une histoire et des options de personnalisation : direction du tooltip et offsets sur les axes X et Y. Au clic, le JavaScript récupérait la bonne ligne, appliquait les valeurs via des attributs et variables CSS, puis injectait le titre et le récit dans le tooltip et la modale.

J’ai développé un script Google Sheets qui exportait le contenu en deux fichiers JSON : le premier pour les tooltips et les histoires, le second pour les ères et les conséquences.

Il suffisait ensuite de glisser-déposer ces fichiers dans le dossier prévu sur le serveur ou en local. Le JavaScript lisait et interprétait automatiquement les nouveaux textes, ce qui rendait la maintenance possible avec ou sans moi.