Timeline JS


Comme son nom l’indique, “Timeline JS” est un outil pour fabriquer et personnaliser des Timelines. Il permet de créer des frises chronologiques interactives où on peut inclure pas mal de contenu multimédia.

Fiche d’identité :

  • Timeline est 100% gratuit, il n’y a pas de version premium.
  • Le back office de cet outil est basé sur une feuille de calcul google doc. Il est donc nécessairement collaboratif puisqu’on peut inviter n’importe qui à rejoindre le document.
  • L’intégration se fait en code Iframe, mais il y a aussi une version pour wordpress (le blog). Le site donne un lien pour installer un plug-in qui rend lisible les timelines sur WP.
  • Timeline est en anglais sur la page d’accueil et sur le back office, mais il est possible de régler la publication finale sur 40 langues dont le français.

Utilisation en plusieurs étapes :

Etape 1 :

Se rendre sur la page Timeline JS où la procédure est expliquée
de A à Z.

screenshot-by-nimbus

Etape 2 :

Utiliser le template fournis sur cette page en cliquant sur :

Sans titre

 

Etape 3 :

Une fois ouvert, il prend la forme d’une feuille de calcul google doc. Il est rempli de dates, de texte et de contenu multimédia de substitution. A l’auteur de changer le contenu aux endroits correspondants. Par exemple, il change la date de départ et de fin d’un évènement pour mettre celles qui l’intéressent. Tous les contenus sont évidemment changeables et adaptables à ce que l’on veut réaliser.

MAIS ! Il ne faut ni changer l’ordre des colonnes, les renommer ou les effacer, sous peine de voir la Timeline buguée à la publication.

2

Exemple de « back office » de Timeline JS. Il faut modifier le contenu de chaque colonne (titre, légende, média etc.)

Etape 4 :

Pour intégrer les éléments multimédia, il suffit de coller dans la colonne “Média” le contenu désiré. Timeline prend en charge :
Vidéos Youtube, Viméo, Daylimotion ou Vine. Les sites web (image cliquable). Des google maps. Des photos flickr. Des photos venant du web. Des tweets. Du son SoundCloud.

A chaque fois, pour intégrer quoi que se soit, pas besoin de code Embed, il suffit de coller le lien de chaque élément dans la colonne “Média”. Juste une précision pour inclure une citation, il faut insérer le code html suivant dans la même colonne :
<blockquote>“La citation que vous voulez mettre en avant”</blockquote>

Etape 5 :screenshot-by-nimbus (1)

Une fois que tous les éléments de la future timeline sont paramétrés, il suffit de suivre la méthode suivante pour l’intégration :
– Cliquer sur Fichier >> Publier sur le web

– Dans la fenêtre qui s’ouvre cliquer sur “Démarrer la publication” si ce n’est pas déjà activé.
– Copier le lien qui apparaît en bas de la fenêtre.
– Le coller dans l’endroit prévu à cet effet sur la page principale de Timeline (au titre numéro 3)

Petites précisions : dans les options de publication, on peut régler plusieurs choses comme la taille de la Timeline une fois publiée, les polices utilisées, la forme que vont prendre les google map que l’on a inséré (satellite ou plan par exemple), choisir de faire commencer la timeline par la fin, ou alors à une case précise.

Astuces :

  • Se servir du modèle sans le modifier, pour voir quoi correspond à quoi sur la version finale. C’est à dire, publier sans rien toucher pour constater de la forme que prennent les titres, leur placement etc…
  • Quand on publie, dans la fenêtre Publier sur le web, il faut cocher “republier automatiquement après chaque modification”. Cela permet de mettre à jour automatiquement la timeline.
  • Attention à la manière dont on inscrit les dates, modèles anglo-saxons.

Utilisation en journalisme :

Raconter des événements passés, ou à venir en les enrichissant avec du contenu audio, vidéo ou des infographies.

Exemples :

  • Elections présidentielles sur lemonde.fr
  • L’évolution du progrès sur le site de Arte

Avantages

  • Super simple d’utilisation
  • Permet de faire un encart sympa à propos d’une personnalité

Inconvénients

  • En effaçant une case que l’on veut remplacer, si on clique sur “supprimer” à coté du lien, ça n’enlève pas le texte, mais le renvoi du lien. Et si on en recolle un autre, il n’apparaîtra quand même que en tant que texte
  • Si on superpose beaucoup de dates proches, on se perd dans la Timeline
  • Impossible de personnaliser l’arrière-plan de la Timeline

A propos Obsweb

Le programme de recherche OBSWEB - Observatoire du webjournalisme (CREM - Université de Metz) étudie les transformations en cours au sein de la presse d’information avec l’avènement d’Internet et de l'écriture multimédia.