Retour aux actualités

1 décembre 2015

3 choses à savoir sur StoryMap JS

Lors de la 2ème édition du Médialab SpeedTraining, Cédric Blondeel, journaliste à Presse Océan, est revenu sur son expérimentation de l’outil StoryMap JS au sein du journal. Cette solution opensource éditée par Knightlab (déjà à l’initiative de la frise chnonologique Timeline JS) permet de créer un récit géolocalisé.

Voici, en 3 points, ce qu'il faut retenir de sa présentation :

1) Story Map JS : un outil interactif pour agrémenter ses articles

Utile lorsque vous souhaitez raconter une histoire qui se déroule dans plusieurs endroits, StoryMap JS permet d'offrir une expérience de lecture enrichie.  Cédric Blondeel rappelle qu'il s'agit là d'une carte narrative, pas d'une carte historique.
"On peut par exemple l'utiliser pour le fait divers"
StoryMap JS Cartographie interactive de Presse Océan sur les incendies qui ont marqué la ville de Nantes   Presse Océan s'est approprié l'outil pour retracer la sinistre affaire de Tony Meilhon, depuis ses débuts jusqu'au procès en appel. Autre exemple d'utilisation journalistique : raconter à travers une carte les différents incendies qui ont marqué la ville de Nantes. Dans un registre plus léger, le journal a aussi proposé 5 bons plans de sorties en Loire-Atlantique le temps d'un week-end, permettant au lecteur de visualiser directement les lieux de sortie à proximité de chez lui. Selon Cédric Blondeel, des articles web agrémentés d'outils interactifs comme la cartographie interactive sont beaucoup plus lus par rapport à un papier classique. StoryMap JS permet également de créer des "gigapixels": de grandes images interactives sur lesquelles il est possible d'annoter du texte comme dans l'exemple ci-dessous.  StoryMap JS

2) Une interface très simple

La prise en main de l'outil est très intuitive : l'interface fait penser à celle d'un powerpoint. Il suffit d'ajouter une slide (à gauche) pour chaque nouveau lieu à commenter et de l'enrichir d'une photo ou d'une vidéo (production maison ou hébergée sur une plateforme en ligne), d'un titre, d'une légende, que l'on peut étoffer légèrement avec un peu de code (couleurs, liens...). La localisation de l'événement sur la cartographie est quant à elle très facile à gérer : il suffit d'entrer l'adresse du lieu dans une barre de recherche. Le petit plus : à chaque slide créée, une sauvegarde du projet est automatiquement réalisée, ce qui évite les mauvaises surprises. Elle est pas belle la vie ?  StoryMap MédialabSpeedTraining

3) Une localisation très précise

Nous l'avons dit, pour géolocaliser un événement sur la carte, il suffit d'entrer sa requête dans la barre de recherche prévue à cet effet et la carto fait le reste du travail comme sur Google Maps. Il est toujours possible de changer par la suite le lieu indiqué au départ en cliquant sur l'icone de géolocalisation et en le glissant manuellement sur la carte à un autre endroit (ou tout simplement en changeant l'adresse dans la barre de recherche). Un jeu d'enfant ! Autre petit plus et pas des moindres : plusieurs types de cartes sont proposés. En bref : StoryMap JS est un outil gratuit et très accessible qui permet de raconter une histoire à travers une carte enrichie de textes, photos et vidéos.

Les conseils de Cédric :

  • À la manière d'un storyboard, préparez votre travail en amont : constituez à l'avance un dossier qui répertorie vos photos dans une bonne résolution web, écrivez vos textes et votre histoire dans les grands lignes avant de commencer. Une fois qu'on a la matière, tout va très vite et on ne s'égare pas en chemin ! 
  • Proposez un lien vers une visualisation en plein écran si vous intégrez votre cartographie sur un site : en effet, la largeur d'un article de site occupe rarement tout l'écran, ce qui ne facilite pas le confort de lecture de la carto. 
  • Veillez à ne pas mettre trop de liens dans vos légendes pour ne pas obliger le lecteur à sortir de la carte interactive, ce qui risquerait d'interrompre l'expérience et de l'amener ailleurs.

Voir sa présentation :

Voir les autres tutos du Médialab SpeedTraining.