Tutoriel TimelineJS - visualisation de chronologies
-
Upload
susana-nunes -
Category
Design
-
view
182 -
download
0
Transcript of Tutoriel TimelineJS - visualisation de chronologies
![Page 2: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/2.jpg)
simple et intuitif personnalisableergonomiqueinteractifresponsivemultimédiacollaboratif
Crée par Zach Wise (New York Times) et le Knight News Innovation Lab
Timeline JS
![Page 3: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/3.jpg)
Un article très riche en information mais… un poil trop long ?
Inspiration :Le projet d'aéroport à Notre-Dame-des-Landes en 21 datesLibération, 26 décembre 2012
![Page 4: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/4.jpg)
http://timeline.knightlab.com
![Page 5: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/5.jpg)
![Page 6: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/6.jpg)
1ère ligne = intro (type de contenu : titre)
format de la date : mm/dd/aaaa
possibilité d'incorporer des liens hypertexteex. <a href="http://www.ina.fr/" title="Site de l'INA">INA</a>
possibilité d'ajouter des citationsajoutez dans le champ « media » : <blockquote>xxxx</blockquote>
start date / end date = date de début / date de fin
headline & text = titre & texte / description
media, media credit, media caption & media thumbnail= contenu multimédia, crédit, légende & miniature
type = type de contenu
tag = mot-clé (création d'une ligne par mot-clé)
Timeline JS
![Page 7: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/7.jpg)
![Page 8: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/8.jpg)
Copier le lien
![Page 9: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/9.jpg)
Coller le lien
![Page 10: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/10.jpg)
![Page 11: Tutoriel TimelineJS - visualisation de chronologies](https://reader030.fdocuments.us/reader030/viewer/2022032419/55a3a5811a28ab270d8b468c/html5/thumbnails/11.jpg)
Version online.