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 :
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 :
Ce qui donne cet aspect là
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)
Ce qui nous donne :
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
Dans le cas présent nous appelons un fichier XML nommé exemple1.xml dont voici le contenu :
−
<data>
−
<event start="May 28 2007 09:00:00 GMT" end="Jun 15 2007 09:00:00 GMT" isDuration="true" title="Préparation des vacances" image="http://simile.mit.edu/images/csail-logo.gif">
quelques jours pour penser aux vacances avant <a href="http://simile.mit.edu/timeline/">Timeline</a>.
</event>
−
<event start="Jun 16 2007 00:00:00 GMT" end="Jun 26 2006 00:00:00 GMT" title="Petite soirée entre amis">
Va falloir penser à un dessert.
</event>
<event start="Aug 02 2007 00:00:00 GMT" title="Voyage à Tombouctou" link="http://travel.yahoo.com/">
Super !
</event>
</data>
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 :
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.
Ce qui nous affiche une frise chronologique plus agréable et plus fonctionnelle.
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
