Elles fleurissent sur les sites Internet de médias, d'établissements culturels... Elles ? ce sont ces jolies frises chronologiques sobres et fluides, qui intègrent des textes, des images, des vidéos ou autres médias, et proposent à l'internaute une entrée en douceur dans la découverte des contenus d'un site.
 
Frise chronologique sur l'histoire de Rennes - Archives municipales de Rennes
 
 
La bonne nouvelle, c'est que l'un des outils les plus répandus, Timeline JS, est gratuit, open-source, facile à utiliser, responsive web design et très adapté au tactile par dessus le marché. Seul pré-requis, avoir un compte Google : les données affichées dans la frise (contenu et médias) doivent en effet être stockées dans une feuille de calcul Google Drive (équivalent d'Excel)
 

Créer une frise chronologique Timeline JS pas à pas

Tout est expliqué (en anglais) sur Timeline.verite.co

19 copy template

Le tableau va permettre de saisir les données qui seront affichées sur la frise chonologique sous forme de diapos.

  • Saisir les données dans le tableau (nul besoin de mettre les événements dans l'ordre chronologique, ce sera fait automatiquement) :
    • Start date : date de début, réparti en 3 colonnes : année, mois, jour, heure. Si aucune date n'est saisie, la diapo s'affichera en tout début de frise chonologique, idéal pour faire la page de titre.
    • End date : date de fin. Mettre une date de fin permet de définir une période sur la frise (par exemple pour la vie d'un individu, un événement).
    • Display date : permet de surclasser l'affichage de la date par défaut (par exemple pour mettre vers 1850 en cas de date imprécise).
    • Headline : titre, qui sera affiché en gros caractères gras.
    • Text : texte à afficher. Second champ obligatoire.
    • Media : adresse web (url) du média à afficher, qu'il s'agisse d'une image, d'une vidéo, d'un fichier pdf, d'une localisation Google Maps, etc. Le média doit être en ligne.
    • Media credit : comme son nom l'indique, crédit du média ; peut servir à indiquer la source ou cote du média.
    • Media caption : description ou sous-titre du média. On peut saisir du code HTML dans le tableur et par conséquence créer un lien cliquable : <a href="http://www.adresseweb.fr" title="Titre de la page">Titre de la page</a>.
    • Media thumbnail : s'il y a besoin d'une image miniature, coller l'adresse web correspondante
    • Type : indique la slide considérée comme titre, les éléments (non utilisé)
    • Group : définir des tags permet de répartir les diapos sur (au maximum) 6 lignes dans la frise chronologique. Exemple ci-dessous : tags Famille et tag Profession.
    • Background : permet de changer le fond de la diapo, soit avec le code d'une couleur (#3333), soit avec une image (en mettant le lien vers l'image de fond).

 

19 frise chrono notice elizano tableur

 

… telles qu’elles s’affichent sur la frise (avec localisation des différents champs) – d’Aïeux et d’Ailleurs

voir sur d'Aïeux et d'Ailleurs

 

  • Le fichier de données doit être ensuite Publier sur le web (File > Publish to the web > Start publishing / Republish now s'il y a eu des ajouts)

Publier sur le web la feuille de données

 

  • Copier le lien obtenu ci-dessus (il commence par https://docs.google.com/spreadsheet...) et coller-le sur Timeline.verite.co dans le champ Google Spreadsheet URL

19 timeline option

 

  • En cliquant sur Optional settings (show), il est possible de faire quelques réglages supplémentaires : taille de la frise (laisser la largeur 100%, ne modifier que la hauteur), langue, police de caractères, première diapo à afficher, etc.
  • On approche de la fin : cliquer sur Preview pour avoir un aperçu du résultat, et si cela convient, copier-coller le code <iframe ... > sur votre site Internet (voir le tutoriel Insérer des médias dans une page web) ou utiliser le lien vers la carte (lien qui commence par https://cdn.knightlab.com/libs/timeline...)

 

Les données peuvent être enrichies, modifiées à l'envie ; des lignes peuvent être rajoutées a posteriori : il suffit de republier la feuille de calcul pour que la mise à jour de la frise chronologique se fasse.

Voir aussi le résultat avec les frises chronologiques des fonds de presse ancienne numérisée des Côtes-d'Armor et de Loire-Atlantique.

 

La même, avec une carte !

Sur le même principe, il est possible de créer une frise chronologique avec du contenu et une carte avec TimeMapper : la feuille de calcul de base est un peu différente (elle contient notamment les colonnes nécessaires à la géolocalisation) mais le principe reste le même.

Frise chronologique et carte - d'Aïeux et d'Ailleurs

Voir sur d'Aïeux et d'Ailleurs 

 

Pour aller plus loin


Comments est propulsé par CComment

À propos

Le numérique c’est fantastique (et non dramatique), surtout quand on travaille dans le domaine du patrimoine.

« C’est compliqué… ». « Je n’ose pas… ». « Je ne sais pas comment faire… »

Nul besoin d’années de code pour se simplifier la vie et le boulot sur un ordinateur. Archiviste et formatrice sur les outils et la médiation numérique, j'ai créé en 2015 ce blog pour partager et diffuser auprès des acteurs des archives et du patrimoine des tutoriels et des outils simples, pratiques et gratuits.

Idées, requêtes, questions, contributions sont les bienvenues.

Maïwenn Bourdic