Comment faire une frise chronologie en ligne ?

Comment faire une frise chronologie en ligne ?
Fausse Piste
http://fausse-piste.net/piste1
Comment faire une frise chronologie en ligne
?
le long du temps...
- LA FAUSSE PISTE DES MANCHOTS - Les Manchots de la Toile -
Red Herring
Publication le jeudi 2 août 2007
Modification le mercredi 5 novembre 2008
Fichier PDF créé le samedi 24 janvier 2015
Fausse Piste
Page 1/9
Comment faire une frise chronologie en ligne ?
ARTICLE EN COURS DE FINALISATION... il reste encore quelques problèmes d'affichage...
en raison de l'accès très aléatoire sur le site de Timeline au script, nous avons décidé à compter du
1/11/2008 de suspendre provisoirement le lien avers Simile... ce qui fait que vous ne pouvez voir le
résultat graphique des frises dans cet article.
Faire des frises chronologiques en ligne n'est pas si aisé que cela puisse paraître, certe des sites proposent de
construire et d'héberger vos frises [1], mais rien ne vaut ce que l'on fabrique soi-même... à la sueur de son front et un
peu de cambouis !
Donc, nous allons voir comment faire en se basant sur le TimeLine de SIMILE du célèbre MIT (USA).
La méthode peut être utilisée pour créer ces propres pages web ou pour intégrer la frise dans un article de CMS
(comme SPIP par exemple).
Une partie de notre article repose sur le tutoriel de Timeline (disponible en anglais ICI
L'appel à l'API
Le système fonctionne un peut comme l'intégration des cartes de Google Maps dans un site web (sauf que vous n'avez
pas besoin d'obtenir une clé personnelle pour l'API). Avant toute chose il faut que votre page fasse appel à l'API de
TimeLine. Il suffit d'insérer entre les 2 balises head l'appel :
dans le cadre d'un article de SPIP, ça ne fonctionne pas si vous intégrez l'appel dans l'article lui-même, il faut
placer l'appel dans les balises head du squelette
inclusion d'un élément DIV
Nous définissons le cadre élément dans lequel se situera la frise chronologique :
Fausse Piste
Page 2/9
Comment faire une frise chronologie en ligne ?
Fausse Piste
Page 3/9
Comment faire une frise chronologie en ligne ?
Ce qui donne pour l'instant... pas grand chose... :
Appel de Timeline.create()
Il s'agit maintenant de faire appel à la frise, en ajoutant le script principal
...
Puis rajouter le code javascript suivant :
var tl;
function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width:
"70%",
intervalUnit:
Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width:
"30%",
intervalUnit:
Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
Ce qui donne cet aspect là
var tl1; function onLoad() { var bandInfos = [ Timeline.createBandInfo({
width:
"70%",
intervalUnit:
Timeline.DateTime.MONTH,
intervalPixels: 100 }), Timeline.createBandInfo({
width:
"30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200 }) ]; tl1 =
Timeline.create(document.getElementById("tl1"), bandInfos); } var resizeTimerID = null; function onResize() { if
(resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
Fausse Piste
Page 4/9
Comment faire une frise chronologie en ligne ?
tl1.layout();
}, 500);
}}
pour synchroniser les 2 bandes
Il suffit de rajouter les 2 lignes suivantes dans le script (entre le 13e et la 14e lignes (cadre ci-dessus)
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
Ce qui nous donne :
var tl2; function onLoad() { var bandInfos = [ Timeline.createBandInfo({
width:
"70%",
intervalUnit:
Timeline.DateTime.MONTH,
intervalPixels: 100 }), Timeline.createBandInfo({
width:
"30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true; tl2 = Timeline.create(document.getElementById("tl2"), bandInfos); } var resizeTimerID =
null; function onResize() { if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl2.layout();
}, 500); } }
Ajouter des événements
Pour cela, il faut créer un fichier XML qui contiendra toutes les données des différents événements à intégrer dans la
frise chronologique. Et rajouter un peu de code pour faire appel à ce fichier XML
Fausse Piste
Page 5/9
Comment faire une frise chronologie en ligne ?
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource:
eventSource,
date:
"Jun 28 2007 00:00:00 GMT",
width:
"70%",
intervalUnit:
Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
eventSource:
eventSource,
date:
"Jun 28 2007 00:00:00 GMT",
width:
"30%",
intervalUnit:
Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("tl"), bandInfos);
Timeline.loadXML("exemple1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
Fausse Piste
Page 6/9
Comment faire une frise chronologie en ligne ?
Dans le cas présent nous appelons un fichier XML nommé exemple1.xml dont voici le contenu :
quelques jours pour penser aux vacances avant Timeline.
Va falloir penser à un dessert.
Super !
Le premier événement a une durée de plusieurs jours du 28 mai 9h au 15 juin 2007, le deuxième est sur une journée le
16 juin 007 sans plus de précisions et le 3e commence le 2 août 2007. En cliquant sur les événements des bulles
d'informations supllémentaires apparaissent.
Voilà ce que ça donne :
var tl3; function onLoad() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date:
"Jun 28 2007 00:00:00 GMT",
width:
"70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100 }), Timeline.createBandInfo({
eventSource: eventSource,
date:
"Jun 28 2007 00:00:00 GMT",
width:
"30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true; tl3 = Timeline.create(document.getElementById("tl3"), bandInfos);
Timeline.loadXML("exemple1.xml", function(xml, url) { eventSource.loadXML(xml, url); }); } var resizeTimerID = null;
function onResize() { if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl3.layout();
}, 500); } }
Différencier les 2 bandes
Pour des raisons de redondance de l'informations sur les 2 bandes, il peut paraître utile que la 2e bande soit moins
précise.
Fausse Piste
Page 7/9
Comment faire une frise chronologie en ligne ?
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource:
eventSource,
date:
"Jun 28 2006 00:00:00 GMT",
width:
"70%",
intervalUnit:
Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
showEventText:
false,
trackHeight:
0.5,
trackGap:
0.2,
eventSource:
eventSource,
date:
"Jun 28 2006 00:00:00 GMT",
width:
"30%",
intervalUnit:
Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
Fausse Piste
Page 8/9
Comment faire une frise chronologie en ligne ?
Ce qui nous affiche une frise chronologique plus agréable et plus fonctionnelle.
var tl4; function onLoad() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date:
"Jun 28 2007 00:00:00 GMT",
width:
"70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100 }), Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.5,
trackGap:
0.2,
eventSource: eventSource,
date:
"Jun 28 2007 00:00:00 GMT",
width:
"30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl4 =
Timeline.create(document.getElementById("tl4"), bandInfos); Timeline.loadXML("exemple1.xml", function(xml, url) {
eventSource.loadXML(xml, url); }); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl4.layout();
}, 500); } }
La suite ?
Dans une deuxième partie nous traiterons de la personnalisation de la frise chronologique, et dans une troisième nous
aborderons une technique permettant de créer des fichiers XML d'événements grâce au tableur en ligne EditGrid
[1] lire l'article du blog de Pisani à ce propos
Fausse Piste
Page 9/9

Download Report