The “Great Attraction” (2)
Les outils numériques au service des sources : s’adapter aux contraintes techniques et scientifiques
La formation en Humanités Numériques, largement consacrée aux outils de développement web, est particulièrement réjouissante sur le plan théorique : il y a une excitation candide à manipuler des lignes de code pour faire émerger sa “créature” numérique et à imaginer tout un potentiel interactif que l’on sait pouvoir mettre en œuvre, puisqu’au terme de ces deux années nous sommes, techniquement parlant, capables de monter un site de A à Z. Ainsi, nous avions pour ambition de monter un site internet autonome, qui aurait permis d’héberger toute une série d’expositions virtuelles, chacune autorisant des parcours chronologiques, géographiques ou thématiques, et présentant des contenus résolument multimédias. Ce souhait ayant été formulé avant même d’avoir achevé le dépouillement de nos sources, il a fallu, à plusieurs reprises, reconnaître avoir été un peu vite en besogne et abandonner certains outils qui s’étaient finalement révélés peu adaptés à la valorisation des documents à notre disposition. C’était omettre aussi, bien naïvement il faut l’admettre, un principe de réalité qui nous a forcées à revoir nos ambitions à la baisse : le virtuel s’appuie sur des infrastructures matérielles, et ces dernières ont un coût qui se répercute sur les offres d’hébergement.
Hébergement virtuel, loyer réel
Un site internet peut être créé de deux façons. La première consiste à créer l’intégralité de l’arborescence de son site, à rédiger, manuellement, le code permettant de définir les contenus, la charte graphique et les interactions possibles, puis à verser l’intégralité de ces fichiers dans un serveur (un hébergeur) afin que ces fichiers soient mis en ligne. Cette solution de “stockage” fonctionne comme une location, elle est donc payante. Nous aurions pu utiliser le domaine détenu par les archives municipales, toutefois le coût en temps pour le développement et l’intégration du projet auraient été trop importants pour les deux partis.
La seconde solution est l’utilisation d’un CMS (content management system), faisant en quelque sorte office de site préfabriqué. On trouve sur internet une multitude de plateformes proposant de créer et gérer gratuitement son site web, le leader incontesté en la matière étant le logiciel WordPress. Très simple d’utilisation, il permet de disposer d’une adresse pour son site, offre un catalogue d’interfaces graphiques convenant au rendu attendu d’un projet professionnel, facilement personnalisables grâce à un accès direct au code de la page, et offre la possibilité de supporter tout type de contenu (vidéo, audio, images, cartes interactives, etc.). Ayant été amenées à travailler avec ce logiciel durant notre formation, via des licences détenues par l’université (un détail qui aurait dû nous interpeller), notre choix s’est naturellement porté sur lui pour régler la question de l’hébergement de notre site.
En réalité, WordPress, comme les autres CMS, n’est utilisable gratuitement que tant que l’on se contente de ses fonctionnalités les plus basiques : grossièrement, publier du texte et des images en utilisant une interface graphique prédéfinie. Toute personnalisation ou toute intégration d’un autre type de contenu réclame l’acquisition d’une licence payante qui, dans notre cas, représente la modique somme de 300 euros à l’année1, enterrant ainsi pour de bon notre projet initial et répondant à nos interrogations quant à l’absence de site web parmi les projets présentés par les promotions précédentes.
Trouver le compromis entre impératifs techniques et scientifiques
Le sujet qui nous a été confié par les archives est délimité chronologiquement (l’entre-deux-guerres) et géographiquement (Rennes). Sana avoir conscience, à ce stade, de l’étroitesse de la bibliographie disponible, nous nous sommes donc mises en quête d’un compromis qui nous permettrait de créer une carte interactive autorisant l’intégration de contenus multimédias et qui puisse facilement être intégrée au site des archives municipales. Nous avons commencé par explorer les possibilités offertes par le logiciel libre StoryMap.js, développé par une communauté d’ingénieurs, développeurs et journalistes de la communauté Knight Lab de la Northwestern University. Quoique l‘interface soit encore assez rudimentaire, StoryMap.js reste simple à prendre en main, permet de choisir son fond de carte2 et d’intégrer images, vidéos, captures audios et même une autre storymap à la présentation.

Il règle la question de l’hébergement, la page étant supportée par les serveurs du Knight Lab, et la carte interactive peut être intégrée directement sur le site des archives en une seule ligne de code. Enfin, et c’est un argument qui nous semble crucial, la pérennité du logiciel semble garantie par la solidité et le sérieux du consortium qui œuvre à son développement et à sa maintenance, ce qui en fait un outil largement employé par les mastodontes de la presse anglo-saxonne.
Néanmoins, au fil de l’exploration des sources et de la bibliographie, nous avons réalisé qu’une histoire du sport féminin à Rennes reste encore à écrire et par d’autres que nous : l’absence de monographie nous entravant pour une interprétation des sources à l’échelle municipale, il a fallu nous résoudre à adopter un prisme d’analyse moins étroit et, par conséquent, à réviser notre méthode de valorisation des sources puisqu’une carte interactive de Rennes ne faisait plus sens sans exploitation de la variable locale.
Nous nous sommes finalement tournées vers le logiciel StoryMaps, utilisé par nos prédécesseurs de la promotion Margaret Hamilton pour le projet Vide ton sac !, malgré le retour de nos problématiques budgétaires : StoryMaps fait partie d’une suite de logiciels sous licence privative (ArcGIS) et n’autorise qu’une personnalisation limitée de la mise en forme avec laquelle nous avons dû composer. Le logiciel permet de présenter une succession de contenus (blocs de textes, images, vidéos, cartes, etc.) sur une page hébergée gracieusement par ArcGIS (garantissant ainsi sa pérennité), et dont le design général n’est pas sans rappeler ce que peut proposer WordPress, se démarquant néanmoins du blog par sa navigation interactive et la variété des présentations possibles des contenus créés ou importés. Entre autres choses, une image peut, par exemple, être intégrée à un bloc de texte, utilisée dans un diaporama, positionnée dans un volet parallèle à un autre contenu, superposée à une autre image par un système de balayage d’écran, tout ceci permettant de valoriser les sources, leur commentaire, leur comparaison à d’autres documents de nature diverse.
StoryMaps est un outil mettant l’accent sur la narration et nous a paru bien mieux adapté au plan thématique que nous avons choisi d’adopter. Pour autant, nous n’avons pas abandonné nos velléités cartographiques et avons décidé d’intégrer une carte pour chaque partie, utilisant ainsi les sources dont nous sommes certaines de pouvoir fournir un contexte local, tirant profit de l’outil proposé par le logiciel qui s’apparente de très près à celui offert part StoryMap.js (ce dernier étant la version libre et gratuite du programme d’ArcGIS). Nous sommes ainsi parvenues à un compromis satisfaisant mais n’allant pas sans contraintes, la version gratuite se montrant volontairement dissuasive pour l’élaboration d’un projet semi-professionnel, nous obligeant à bon nombres de ruses pour parvenir à un résultat s’approchant de ce que permet la version payante.
StoryMaps et le récit historique interactif
Une première étape de comparaison de différents projets élaborés sur StoryMaps3 nous a permis d’identifier certains points forts et écueils de cet outil dédié à la narration interactive, qui capte l’attention du lecteur en tirant profit d’un réflexe bien ancré chez les internautes : le scroll4.
Invitant le lecteur à une longue descente sur une page unique, trois axes de réflexion ont présidé à la réalisation technique du projet :
- Créer une identité visuelle unique
Nous avons été marquées, en observant différents projets, par la récurrence des mises en pages évoquant plus le blog qu’une véritable exposition virtuelle, et sommes arrivées à la conclusion que cet effet était dû à une absence de personnalisation des contenus, induite en grande partie par les limitations imposées à la version gratuite de StoryMaps. Pour donner quelques exemples, qui peuvent sembler aussi triviaux qu’ils sont handicapants, il n’est pas possible de modifier l’alignement des textes, la taille de la police ou de déterminer le format précis d’une image : la conséquence étant que les récits fabriqués via la version gratuite se présentent le plus souvent comme une simple succession de titres et de paragraphes que viennent égayer ponctuellement quelques images flottantes, soit exactement ce vous avez sous les yeux en lisant ce carnet Hypotheses.

Nous avons donc massivement détourné les outils mis à notre disposition pour briser cet effet de verticalité, rompre la monotonie de la descente et créer, de force, des éléments permettant de créer une identité visuelle. Exemple parlant, les bandeaux “titres” marquant le passage d’une partie à une autre sont en réalité des diaporamas constitués d’une seule image (que nous avons dû recadrer et dont nous avons modifié la taille manuellement grâce à des logiciels tiers5) qui peuvent accueillir un court cartel où nous avons inséré nos titres de parties. Problème, ces derniers ne sont pas considérés comme tel par le logiciel qui réclame qu’un titre ne soit pas inséré dans un contenu interactif : or c’est à partir des titres “reconnus” par StoryMaps qu’est généré automatiquement le menu de navigation. Qu’à cela ne tienne, maintenez le clic-gauche de votre souris enfoncé et sélectionnez l’espace “vide” juste au-dessus du bandeau : vous verrez apparaître le titre officiellement reconnu par le logiciel, dont nous avons modifié la couleur pour qu’il se fonde à l’arrière-plan.

Autre inconvénient de la version gratuite, la palette graphique n’est pas personnalisable et doit être choisie parmi six thèmes disponibles, nous empêchant de reproduire les codes chromatiques du site des archives municipales et nous n’avons pu insérer que quelques rappels discrets dans les titres des sous-parties.
- Faciliter la navigation et la lisibilité des textes
Ce travail sur les bandeaux participe d’une série d’efforts pour délimiter clairement les contenus et mettre en valeur la progression de notre argumentation, visible dans les grandes lignes grâce au menu de navigation qui, puisqu’il est toujours disponible où que l’on se trouve dans la page, permet de se déplacer rapidement dans le récit.
Puisqu’on ne se défait pas facilement de certains réflexes académiques, notre propos est organisé en parties, sous-parties et sous-sous-parties qui très vite auraient pu former un amas indigeste et illisible. Nous avons donc fait en sorte de rendre visible la hiérarchisation des contenus en insérant des “gimmicks” : les fameux bandeaux pour les grandes parties, une citation mise en exergue à chaque début de sous-partie, et un format aussi normalisé que possible pour les sous-sous-parties, qui contiennent l’intégralité des sources et du commentaire, avec l’emploi systématique du même élément de mise en forme (compartiment latéral à volet ancré).

Le plus difficile a sans doute été de restreindre le nombre de caractères par sous-parties sans pour autant compromettre la qualité de la contextualisation et du commentaire des sources : 2000 à 2500 caractères espaces compris, cette limitation, fondée sur nos propres expériences de lecture, étant nécessaire pour maintenir l’attention de l’utilisateur à qui l’on propose une exposition virtuelle et non pas un article scientifique.
- Mettre en valeur les sources dans la diversité de leurs formats et contenus
StoryMaps est un outil particulièrement adapté à la narration grâce au soin porté aux effets de transitions entre les contenus, faisant du site un redoutable scroller. Toutefois, c’est bien sa capacité à mettre en valeur des sources de nature diverse qui nous a convaincues de l’employer. Il serait trop long de détailler l’intégralité des fonctionnalités disponibles6, même pour la version gratuite, que nous avons volontairement limitées dans un soucis de cohérence graphique. Nous n’évoquerons donc que celles que nous avons choisi d’utiliser pour chaque type de sources.
Pour les sources iconographiques (photographies, cartes postales, affiches ont été insérées dans les compartiments latéraux à volet ancré que nous avons présentés précédemment. La place occupée par l’image pouvant être réglée selon trois positions (1/2, 2/3 ou 3/4 de l’écran), nous avons opté pour un demi écran, de sorte à conserver une belle qualité d’image et une longueur de texte peu dissuasive. Quelques-unes ont été insérées dans le corps du texte lorsque leur commentaire participe de l’argumentation. Enfin, pour illustrer des comparaisons (entre hommes et femmes ou d’une époque à une autre), nous avons utilisé l’outil de balayage qui permet de juxtaposer deux images et invite le lecteur à interagir avec le site pour passer de l’une à l’autre.

Les sources imprimées ont été traitées différemment selon leur longueur et leur lisibilité : notre récit ayant également vocation à faire découvrir l’outil aux archivistes afin qu’ils puissent le réemployer ultérieurement, nous avons choisi de présenter plusieurs procédés, sans pour autant compromettre la cohérence graphique du site. L’article de La Femme Sportive a fait l’objet d’une lecture vidéo7 qui met en valeur l’étonnant argumentaire de Marie Houdré et épargne à l’utilisateur la lecture de deux pages en petits caractères ; d’autres articles ou archives administratives ont été traités avec des effets de zoom sur les passages faisant l’objet du commentaire, ou bien convertis en vidéo pour pouvoir présenter l’intégralité d’un livret ou d’un programme. Nous ne sommes pas parvenues à un résultat satisfaisant pour une transcription diplomatique, nous l’avons donc évitée autant que faire se peut : à nouveau, la version gratuite ne donne pas accès à l’intégralité des outils de mise en forme du texte, nous n’avons donc pu respecter l’ensemble des règles de paléographie qui nous ont été communiquées par les archives.

Les cartes interactives, au-delà d’une simple fonction de géolocalisation, enrichissent la narrative sur le(s) espace(s) des femmes sportives dans l’histoire du sport à Rennes. Initialement, et encore beaucoup ancrées à la méthode d’organisation imposée par l’outil StoryMap.js, nous avions prévu de localiser toutes les sources, en leur attribuant des coordonnées GPS qui guideraient leur distribution sur une carte de Rennes. La réflexion méthodologique nous a cependant amenées à ne pas “forcer” la localisation géographique de toutes les sources – ce qui risquerait d’imposer une organisation arbitraire à la narration – , mais, au contraire, à utiliser les cartes en fonction de la cohérence du parcours thématique.
Storymaps propose l’ajout de deux types de cartes : la carte statique, ou “carte express”, qui est intégrée en tant que “contenu multimédia”, de la même façon qu’une image ou une vidéo, sur laquelle nous pouvons définir des points, dessiner des formes géométriques et même rajouter du contenu iconographique sous le format de pop-ups. Utile pour illustrer des extraits du contenu, ce type de carte nous paraissait moins parlant dans la structure de notre projet, et nous avons alors choisi d’intégrer le deuxième type, la carte interactive. Intégrée en tant que “contenu immersif”, la carte permet de faire défiler un “Map tour”, qui sera exposé en mode “guidage” ou “exploration”. Dans le premier mode, les lieux défilent dans l’ordre séquentiel défini en amont (guidé) ; dans le deuxième, le public doit cliquer sur les marqueurs (ou sur les médias) pour explorer plus librement les contenus.

Chacun des modes d’exposition offre à son tour deux options de mise en page : axée sur les médias ou sur la carte pour le mode “guidage” ; avec les médias organisées en liste ou en grille pour le mode “exploration”. Pour bien coupler le potentiel de localisation géographique exploitable de nos sources, nous avons choisi d’intégrer deux modes d’exposition différents de cartes interactives à notre récit.
Une première carte est intégrée à la première section de contenu, présentant la naissance des sociétés sportives rennaises. Nous nous sommes tournées vers le mode “guidage”, puisqu’il s’agit d’une narration factuelle, largement basée sur les dates de création des sociétés. Le lecteur est donc guidé dans la succession de quatre points numérotés de la carte, affichées en ordre avec le “scroll” du contenu.

Notre deuxième carte est conçue en mode Exploration, avec une mise en page “grille”. Le rendu nous a paru assez cohérent avec le contenu de la troisième section du récit : placée juste avant la conclusion, la carte expose une “vitrine” de trois plans de bâtiments où la question de la présence des femmes dans l’espace s’impose.

Aline Benvegnú dos Santos et Célia Tily
- Grille tarifaire de WordPress : https://wordpress.com/fr/pricing/. On trouve des modèles économiques similaires chez les autres acteurs du marché (PlanetHoster, Webhost. [↩]
- une simple manipulation via le logiciel Map Warper, déjà utilisé par les archivistes, permet de lier des coordonnées géographiques à une image et de la transformer en fond de carte exploitable [↩]
- Storymaps met à disposition un annuaire permettant de consulter une grande quantité de projets réalisés à l’aide de l’outil. Nous nous sommes particulièrement inspirées des récits Stolen et Off the Bench réalisés par la Library of Congress, ainsi que, bien sûr, Vide ton sac ! de nos camarades de la promotion Margaret Hamilton. [↩]
- Alloing, Camille. « Scroll et Swipe », dans Comprendre la culture numérique., sous la direction de Escande-Gauquié Pauline, Naivin Bertrand, Dunod, 2019, pp. 165-169 [↩]
- Les forts pratiques ConvertImage et IloveIMG [↩]
- Ces fonctionnalités sont amplement documentées sur le site officiel [↩]
- La version gratuite ne permet pas d’insérer du contenu audio que l’on aurait préféré employer. [↩]
OpenEdition vous propose de citer ce billet de la manière suivante :
celiatily (5 mai 2022). The “Great Attraction” (2). Master Humanités numériques - Rennes 2. Consulté le 19 mai 2025 à l’adresse https://doi.org/10.58079/r9yg