Proposition de refonte des outils Géoproject
Julie Blanc, Sarah Garcin et Adrien Payet
Géoproject est un projet visant à offrir un espace de création et d’édition de récits cartographiques à disposition des bibliothèques et médiathèques lors d’ateliers publics. L’objectif est de construire un outil de mise en page et d’impression de ces récits basé sur les technologies du web (paged.js). L’interface de l’outil, spécialement conçue pour le projet, combinera une vue code et un paradigme WYSIWYG (What You See Is What You Get), afin de permettre un apprentissage du code à ses utilisateur·ices. Nous utiliserons le CMS Kirby pour une refonte globale du site web. L'objectif est d'améliorer l'ergonomie, l'accessibilité et la sobriété de l'ensemble, tout en offrant une solution flexible et durable grâce à l'utilisation de technologies open source et à faible empreinte écologique.
Note d’intention
Geoproject est un site-outil qui permet de composer des récits cartographiques faits de textes, d’images, de sons, de vidéos et de cartes géographiques, de les éditer au format web et imprimé grâce à la technologie paged.js. Il est utilisé par tout type de public lors d’ateliers supervisés à vocation créative, pédagogique et conviviale.
Il combine trois composants :
— un site qui organise et présente différents contenus, accompagné d’actualités et de la documentation de l’outil
Nous proposons une refonte et une réorganisation du site actuel afin qu'il devienne un véritable outil de documentation, d'archivage et de présentation des récits.
— un outil d’édition web de récits
L'outil permettra de créer et d'éditer des récits cartographiques, qui seront visualisables et partageables en version web.
— un outil de composition de la version imprimée, incluant un dispositif d'apprentissage du code
Basé sur paged.js, l'outil permettra la mise en page et la prévisualisation de la version imprimée des récits. Pour réaliser cette mise en page, il proposera un panneau d'édition de code (CSS), servant également de support pour des ateliers d'apprentissage du code. Cette fonctionnalité sera développée à partir du prototype Tool for Awesome Course que nous avons réalisé (http://nancy.sarahgarcin.com/annee2/echos/app/).
Nous proposons de retravailler ces composantes en deux temps. D’abord, à l’horizon de la fin de l’année 2025, la refonte des outils d’édition web et imprimé, ainsi que l'intégration d'un dispositif d'apprentissage de code. Ensuite, à condition d’un second budget, la refonte du site qui organise et présente les récits, la documentation de l’outil et les actualités de Geoproject.
Basé au départ sur un thème Wordpress, il s’agit désormais de travailler sur-mesure pour ajuster finement l’outil aux différentes pratiques qu’il permet, appuyés sur ses années d’expérience. Ainsi nous proposons d'utiliser le CMS Kirby.
Certains objectifs de ce chantier sont transversaux, d’autres sont spécifiques aux composants. Au global, il s’agit d’améliorer l’ergonomie, l’accessibilité et la sobriété de l’ensemble.
Nous proposons d’articuler l’apprentissage du code à celle de l’édition web et imprimé, en se fondant sur nos propres expériences en la matière. Articulation naturelle, puisque la maitrise technique est directement liée au possibilités formelles. La maitrise du code permet de dépasser les marges de manœuvre formelles prévues par l’outil. Elle est par ailleurs de nos jours une compétence cruciale. Nous sommes convaincues qu’au-delà des services qu’il rend, le code est une matière foncièrement intéressante et réflexive.
Pour améliorer cette plateforme, les objectifs du projet incluent :
- Migration de WordPress à Kirby pour une plus grande flexibilité.
- Refonte de l’outil d’édition des formats imprimés, permettant aux porteurs de récits de concevoir leurs propres formats imprimés
- Intégration d'un dispositif d'apprentissage du code, afin de rendre les utilisateurs autonomes (possibilité d’utilisation de l’outil dans le cadre d’ateliers d’écritures cartographiques)
- Accessibilité et inclusion: Garantir que la plateforme soit utilisable par le plus grand nombre, indépendamment des niveaux de compétence technique.
- Durabilité/écoconception : Concevoir un outil respectueux des ressources, en mettant l’accent sur les technologies open source et à faible empreinte écologique (Kirby + Paged.js)
Première partie du projet (septembre - décembre 2025)
Cette phase repose sur quatre pôles de développement.
1. Réflexion et élaboration du cahier des charges fonctionnel
- Analyse approfondie des besoins pour l’architecture des récits (sections, edito, page de couverture, sommaire, etc.)
- Définition de l’interface d’entrée des contenus
- Définition des fonctionnalités attendues pour l’outil d’édition des récits imprimés
- Migration de l’infrastructure de WordPress à Kirby pour faciliter l’alimentation des récits
- Conception d’une interface intuitive pour l’entrée des contenus (avec différents rôles utilisateur·ices possibles)
- Développement d’une architecture de navigation claire permettant de se repérer parmi les différentes sections des récits (sections, edito, page de couverture, sommaire, etc.)
- Intégration des contenus multimédias (cartes, vidéos, images).
- Développement d’une interface graphique intuitive pour la création de formats imprimables, avec intégration de Paged.js
- Interface divisée en trois parties :
- - Aperçu de la publication
- - Code CSS.
- - Fonctionnalités ajustables graphiquement (sliders, boîtes de sélection, etc.).
- Les trois parties de l’interface sont interconnectées et se mettent à jour en temps réel. Exemple : http://nancy.sarahgarcin.com/annee2/echos/app/.
- Enregistrement des modifications des utilisateur·ices via leur compte Kirby
Nous estimons l’enveloppe globale à 21 000 € pour cette première partie (voir devis joints).
Deuxième partie du projet (2026)
La deuxième partie du projet vise à compléter la refonte de Géoproject en se concentrant sur la conception et la réalisation du site web du projet. Cette phase inclut la création d'un site web de présentation et d’actualité, ainsi qu'une section de documentation et de tutoriels. L'objectif est de créer un espace centralisé où les utilisateur·ices peuvent non seulement découvrir et explorer les récits cartographiques, comprendre les objectids du projet, mais aussi apprendre à utiliser l'outil d'édition de manière autonome.
Cette deuxième partie du projet est essentielle pour transformer Géoproject en une plateforme complète et autonome. En investissant dans cette phase, nous garantissons non seulement la pérennité de l'outil, mais aussi son adoption par un public plus large et diversifié.
Cette deuxième partie est une proposition, dont le chantier pourra être mené en 2026 et nécessitera une estimation à la fin de la première partie.
Présentation de l’équipe
Pour mener à bien ce projet, nous proposons une collaboration entre trois profils complémentaires, alliant des expertises en conception technique, design d’interfaces, édition imprimée, pédagogie du code ainsi qu’une maîtrise approfondie de Paged.js et du CMS Kirby.
Julie Blanc
Julie Blanc est designer graphique, chercheuse et développeuse spécilisée en CSS. Elle utilise les technologies du web pour concevoir toutes sortes de publications numériques et imprimées. Elle porte un intérêt particulier la mise en place de publications légères et multisupports et basées sur des technologies libres permettant la collaboration. Spécialiste du domaine CSS print (ou web to print), Julie a contribué au développement de Paged.js, un outil permettant d’utiliser les technologies du web pour l’impression. Elle propose de nombreux ateliers et outils (plugins, kits de démarrage, documentation, etc.) pour faciliter sa prise en main. Diplômée d’un doctorat en ergonomie et design de l’Université Paris 8 et de l’École National des Arts Décoratifs, sa thèse porte sur l’utilisation des technologies du web pour l’impression par les designers graphiques
Sarah Garcin
Sarah Garcin est designer graphique, designer d'interaction et développeuse. Elle s’intéresse aux pratiques collaboratives d’écriture, aux interfaces homme-machine, au web frugal, au partage de connaissance, à la pédagogie, aux systèmes alternatifs de publication, au logiciel libre, à la radio, à la cuisine. Elle travaille au sein de plusieurs collectifs: l'Atelier des Chercheurs, le collectif g.u.i, radio psg matin et a co-fondé PrePostPrint. Elle partage ses pratiques lors d’ateliers en milieu scolaire et universitaire. Diplômée de l’École National des Arts Décoratifs (DNSEP) et de l’EESAB Rennes (DNAP), elle vit et travaille à Paris.
Adrien Payet
Adrien Payet pratique la philosophie, le design et le code informatique. Diplômé du Master 2 en philosophie, mention éthique et développement durable de l’Université Jean-Moulin Lyon 3, développeur autodidacte, il travaille avec des designers, architectes, artistes, institutions culturelles, chercheurs et chercheuses. Ancien membre du collectif Bam et du studio Praticable, dans sa pratique du code Adrien cherche à articuler praticabilité, accessibilité et sobriété. Il enseigne à l’ENSCi et l’École des Arts de Paris 1. Il préside l’association époque qui édite actuel / inactuel, un espace de réflexion critique des arts, des techniques et de la modernité qui sera publié sur internet à partir de fin février 2025.
Références :
- Tool for Awesome Course : design et code par Sarah Garcin (http://nancy.sarahgarcin.com/annee2/echos/app/) (#WYSIWYG)
- https://praticable.fr/ : design par Praticable, code par Adrien Payet (#WYSIWYG)
- https://decarb.one, design par Praticable, code par Adrien Payet (#sobriété)
- https://idftierslieux.org, design par Praticable, code par Adrien Payet (#carto)
- A collection of starter kits for Paged.js, code par Julie Blanc (https://pagedjs.org/posts/2020-04-15-starterkits-for-pagedjs/) (#web-to-print)
- https://regarts.huma-num.fr: design par Julie Blanc et Lola Duval, code par Julie Blanc et OuestWare (#carto)
- do•doc (https://test11.dodoc.fr/): design et code par L'Atelier des Chercheurs (Louis Eveillard, Sarah Garcin et Pauline Gourlet) (#WYSIWYG)
- https://poeme-graphique.ch/app.html : design Demian Conrad, code Sarah Garcin (#WYSIWYG)
- Tool for Awesome Icons (http://site.sarahgarcin.com/tool-for-awesome-icons/) : design et code Sarah Garcin (#WYSIWYG)
- https://smartforests.net, design et code Sarah Garcin (#sobriété)