Créez votre propre frise

Ecrire votre histoire de l’informatique en utilisant les sources donnés dans le cours, et en réalisant une frise chronologique grâce à la librairie javascript TimelineJS

Recherche documentaire

Pour cela vous allez devoir dans un premier temps concevoir sur le papier votre frise en sélectionnant les éléments les plus signifiants, en les ordonnant. N’oubliez pas de noter également vos sources de texte et d’images(libres de droit dans le cas d’une publication sur la toile).

Création de la frise interactive

Vous intégrerez ensuite vos éléments au sein d’un fichier de données csv(comma separated values, soit valeurs séparées par des virgules) que vous éditerez avec un tableur(LibreOffice de préférence).

Voici un exemple de rendu d’une frise avec timeline.js.

.

Vous pouvez visualiser le fichier csv de données qui a permis de créer cette frise à cette adresse: https://github.com/heoinfo/timelinejs-local/blob/gh-pages/timeline-data.csv.

La particularité de la librairie TimelineJS, est qu’elle permet d’ajouter eu plus du simple texte, des médias issus de diverses sources: Wikipedia, Youtube, SoundCloud, Instangram, Tweeter… (lien vers la liste complète sur knightlab.com)

Voici la signification des entrées de ce tableau de données:

Clef	Rôle
date	année de la découverte ou de l’invention(obligatoire sauf pour la vignette de titre)
type	laisser vide pour un événement normal et indiquer titre pour la vignette de titre de la frise.
titre	titre de la vignette.
texte	texte à inclure dans la vignette.
mediaUrl	adresse de l’élément media(exemple: https://fr.wikipedia.org/wiki/Pascaline, ou localement: mon-image.jpg)
mediaCredit	auteur et licence du média intégré
mediaLegend	légende à ajouter au media
mediaThumbnail	vignette à utiliser pour afficher la vignette sur la frise, si vide, une vignette par défaut est ajouté en fonction du média(exemple: logo Youtube pour les média youtube)
backgroundUrl	adresse url d’une image à utiliser pour le fond de la vignette.
backgroundColor	couleur du fond de la vignette, vous pouvez utiliser une couleur héxadécimale #RRGGBB ou avec transparence #RRGGBBaa, ou simplement un nom de couleur css comme white, lime… lien vers la liste complète des couleurs sur MDN

Pour créer votre frise, téléchargez le dossier compressé du code de la frise d’exemple à l’adresse suivante: https://github.com/heoinfo/timelinejs-local/archive/gh-pages.zip, puis éditez le fichier timeline-data.csv avec le tableur.

Observez le rendu dans le navigateur en ouvrant le fichier index.html et en rafraîchissant la page à chaque changement(CTRL+R).

A vos claviers!

Exemples de réalisations des élèves

Des exemples de travaux des élèves peuvent être consultés à l’adresse suivante: http://heoinfo.github.io/isn/2016-2017/#frises