TimelineJS3, la création de timelines à portée de main
Elliott Chiaradia |29-01-2016
Créer une chronologie pour votre site web en quelques minutes est chose possible grâce à TimelineJS. Vous n’aurez besoin d’aucun prérequis mis à part la possession d’un compte Google, car vous allez devoir enregistrer une feuille de calcul dans Google Sheets. Cependant, si vous êtes allergique à Google, vous pouvez très bien vous en passer et créer une timeline en utilisant des données JSON, la tâche vous prendra plus de temps, mais le résultat sera similaire.
Le premier chapitre sera consacré à la création d’une timeline rapide à l’aide de Google Sheets. Quant au second, il sera consacré à la création de cette même chronologie, mais en utilisant un fichier .json.
Voici le résultat que vous obtiendrez si vous suivez toutes les étapes :
TimelineJS et Google Sheets
En utilisant une iframe
La méthode la plus simple consiste à utiliser les outils online proposés par TimelineJS afin de créer une iframe que vous allez ensuite copier dans votre code html. Les différentes étapes servant à l'élaboration de cette timeline sont indiquées sur le site de la librairie, cependant, nous allons les revoir point par point.
Tout d'abord, vous devez acquérir le template par défaut du document Google Sheet en cliquant ici. Cliquez sur "Utiliser ce model" pour pouvoir y faire des modifications. Ne supprimez aucune colonne ! Par contre, vous pouvez effacer toutes les données qui sont présentes. Pour voir comment j'ai rempli le tableau, je vous invite à aller le consulter en vous dirigeant à l'adresse suivante. Il n'y a rien de compliqué non ? Si vous avez des interrogations sur la création de ce tableau, allez lire la documentation concernée.
Maintenant que vous avez rempli le document avec les données souhaitées, vous devez vous diriger dans le menu "fichier" et cliquer sur "Publier sur le web". Cliquez sur "Publier", vous avez créé un lien permettant d'accéder directement à votre tableur, copiez ce lien. Dirigez-vous sur le site de timelineJS, au point 3 ('Generate your timeline') et collez-y votre lien à l'endroit indiqué, mais avant de le générer, vous devez définir ses dimensions et ses options. Pour pouvoir configurer les options, vous devez appuyer sur "(show)" ce qui aura pour effet d'afficher quelque chose comme ci-dessous.
Après avoir choisi votre configuration, toujours sur le même site, descendez au point 4 et copiez l'iframe que vous avez générée.
Il ne vous reste plus qu'à coller l'iframe dans votre fichier HTML et le tour est joué !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1ZMgVemYRG7CGT2cevLPX860dOmQfraKUtmSn5za667c&font=Playfair-FaunaOne&lang=fr&initial_zoom=1&start_at_slide=1&height=450' width='100%' height='450' frameborder='0'></iframe>
</body>
</html>
En utilisant du javascript
Vous avez créé votre tableau Google Sheet mais vous ne voulez pas utiliser d'iframe ? Pas de problème, vous pouvez utiliser du javascript. Voici une manière de le faire :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.playfair-faunaone.css">
</head>
<body>
<div id='timeline-embed' style="width: 100%; height: 450px"></div>
</body>
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<script type="text/javascript">
var additionalOptions = {
language: 'fr'
};
timeline = new TL.Timeline('timeline-embed','https://docs.google.com/spreadsheets/d/1ZMgVemYRG7CGT2cevLPX860dOmQfraKUtmSn5za667c/pubhtml',additionalOptions);
</script>
</html>
Analysons le code morceau par morceau.
Nous devons commencer par appeler le fichier CSS de timeline en utilisant un CDN. Puis, nous chargeons le set de fonts que nous avons choisi. Si vous désirez utiliser une autre police, il vous suffira de charger un autre fichier CSS, les fonts disponibles sont listées ici.
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.playfair-faunaone.css">
Dans le body, nous allons définir une div qui va contenir notre timeline. Nous allons profiter pour lui définir une largeur et une hauteur.
<div id='timeline-embed' style="width: 100%; height: 450px"></div>
Juste après la fermeture de la balise <body>, nous allons appeler le script timeline.js à l'aide d'un CDN.
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
Maintenant que le script est chargé, nous allons créer une variable "additionalOptions, c'est grâce à elle que nous allons pouvoir configurer notre timeline. Pour l'exercice, nous allons juste changer la langue, mais d'autres options pourraient vous intéresser, si c'est le cas allez jeter un coup d'oeil à cette liste.
<script type="text/javascript">
additionalOptions = {
language: 'fr'
};
A la suite du script, nous allons créer un nouvel objet de type timeline, il suivi de lui indiquer l'id de votre div qui va contenir votre chronologie ('timeline-embed' dans notre cas), le lien de votre document Google Sheet suivi de notre variables contenant les options supplémentaires. Et voilà, vous aurez une timeline similaire à la première, à la seule différence que celle-ci n'est pas une iframe.
timeline = new TL.Timeline('timeline-embed','https://docs.google.com/spreadsheets/d/1ZMgVemYRG7CGT2cevLPX860dOmQfraKUtmSn5za667c/pubhtml',additionalOptions);
</script>
TimelineJS et JSON
Vous n'avez pas envie de vous calquer sur un document Google Sheet car vous avez besoin d'une timeline dynamique ? Pas de problème, vous pouvez utiliser des données en JSON.
Création des données JSON
Dans notre cas, nous allons enregistrer les données dans un fichier nommé "data.json". Voici ce que nous allons y mettre à l'intérieur.
{
"events": [
{
"start_date": {
"year": "2015",
"month": "11",
"day": "28"
},
"text": {
"headline": "Mise en ligne du blog",
"text": "Le développement touchant à sa fin, le blog fut mis en ligne le 28 novembre 2015"
},
"background": {
"color": "#737373"
}
},
{
"start_date": {
"year": "2015",
"month": "12",
"day": "01"
},
"text": {
"headline": "Premier article en ligne",
"text": "Le premier article mis en ligne sur le site avait pour sujet la pagination"
}
},
{
"start_date": {
"year": "2015",
"month": "12",
"day": "04"
},
"text": {
"headline": "Nouvelle catégorie",
"text": "Création de la catégorie Lifestyle, une catégorie qui contient des articles moins technique que ceux de la catégorie Web"
},
"background": {
"color": "#737373"
}
}
]
}
On va donc créer différents events. Ceux-ci auront une date de départ (pas de date de fin car j'ai choisi de créer des évènements sur un seul jour), du texte (le titre : "headline" et le texte "text") ainsi qu'un background qui contiendra une couleur de fond. Le JSON est assez explicite, si vous ne comprenez pas quelque chose, je vous invite à aller zieuter la documentation se trouvant dans leur github (documentation complète avec exemples) et sur leur site.
Affichage de la timeline
Maintenant que vous avez créé et rempli le fichier data.json, il est grand temps de l'utiliser afin d'afficher la chronologie. Voici comment le faire.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">>
</head>
<body>
<div id='timeline-embed' style='width: 100%; height: 450px;'></div>
</body>
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<script>
this.options = {
script_path: "",
scale_factor: 0.5, // How many screen widths wide should the timeline be
layout: "landscape", // portrait or landscape
timenav_position: "bottom", // timeline on top or bottom
optimal_tick_width: 100, // optimal distance (in pixels) between ticks on axis
base_class: "",
timenav_height: 150,
timenav_height_percentage: 25, // Overrides timenav height as a percentage of the screen
timenav_height_min: 150, // Minimum timenav height
marker_height_min: 30, // Minimum Marker Height
marker_width_min: 100, // Minimum Marker Width
marker_padding: 5, // Top Bottom Marker Padding
start_at_slide: 0,
menubar_height: 0,
skinny_size: 650,
relative_date: false, // Use momentjs to show a relative date from the slide.text.date.created_time field
use_bc: false, // Use declared suffix on dates earlier than 0
// animation
duration: 1000,
ease: TL.Ease.easeInOutQuint,
// interaction
dragging: true,
trackResize: true,
map_type: "stamen:toner-lite",
slide_padding_lr: 100, // padding on slide of slide
slide_default_fade: "0%", // landscape fade
api_key_flickr: "", // Flickr API Key
language: "fr"
};
var timeline = new TL.Timeline('timeline-embed', 'data.json', options);
</script>
</html>
Décortiquons ce code.
Dans le head, nous allons appeler la feuille de styles de timelineJS à l'aide d'un CDN
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">>
Dans le body, nous avons une div qui va servir de conteneur pour la timeline.
<div id='timeline-embed' style='width: 100%; height: 450px;'></div>
Après la fermeture de la balise body, nous allons appeler le script timeline.js à l'aide d'un CDN.
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
A la suite de la balise script précédente, nous allons définir une variable "options" qui va contenir la configuration de notre timeline. Si vous voulez avoir plus d'informations sur ces options, allez jeter un oeil à la documentation du github de TimelineJS3.
<script>
this.options = {
script_path: "",
scale_factor: 0.5, // How many screen widths wide should the timeline be
layout: "landscape", // portrait or landscape
timenav_position: "bottom", // timeline on top or bottom
optimal_tick_width: 100, // optimal distance (in pixels) between ticks on axis
base_class: "",
timenav_height: 150,
timenav_height_percentage: 25, // Overrides timenav height as a percentage of the screen
timenav_height_min: 150, // Minimum timenav height
marker_height_min: 30, // Minimum Marker Height
marker_width_min: 100, // Minimum Marker Width
marker_padding: 5, // Top Bottom Marker Padding
start_at_slide: 0,
menubar_height: 0,
skinny_size: 650,
relative_date: false, // Use momentjs to show a relative date from the slide.text.date.created_time field
use_bc: false, // Use declared suffix on dates earlier than 0
// animation
duration: 1000,
ease: TL.Ease.easeInOutQuint,
// interaction
dragging: true,
trackResize: true,
map_type: "stamen:toner-lite",
slide_padding_lr: 100, // padding on slide of slide
slide_default_fade: "0%", // landscape fade
api_key_flickr: "", // Flickr API Key
language: "fr"
};
Pour terminer, nous allons créer une nouvelle instance de Timeline en lui indiquant 3 choses : l'id de la div devant contenir la timeline, le fichier contenant les données en json et notre variable contenant les différentes options.
var timeline = new TL.Timeline('timeline-embed', 'data.json', options);
</script>
Et voilà, votre timeline est fonctionnelle ! Avec le code proposé, comme vous avez pu le remarquer les fonts personnalisées ne sont pas pris en compte. Pour résoudre ce problème, il vous suffira d’ajouter quelques règles CSS pour les balises concernées. Mais mise à part ce petit dérangement, le résultat est identique à celui qui nécessite un document Google Sheet.
Conclusion
TimelineJS est un outil très pratique, il permet de créer des chronologies très rapidement en utilisant le service Google Sheets, mais il permet aussi de s'en passer en utilisant des données en JSON, à vous de créer l'API qui convient afin d'avoir une timeline dynamique !
Documentations et sources
Site officiel : http://timeline.knightlab.com
Github : https://github.com/NUKnightLab/TImelineJS3
Documentation : http://timeline.knightlab.com/docs/index.html
Template Google Sheet : https://drive.google.com/previewtemplate?id=1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ&mode=public
