Idée pour sites internet : Présentation de la TimeLine des actions d’ATTAC 92

, par attac92clamart

Beaucoup utlisent SPIP pour leurs sites internet. Malheureusement, il n’y a pas encore de plugin suffisamment développé pour y installer une Time Line à partir d’un plugin pour spip.

 

C’est quoi une Time line, une ligne de temps, une frise temporelle ?

À quoi ça peut servir ?

 

Une démonstration vaut parfois mieux que des explications trop longues : exemple avec les actions d’ATTAC 92 mises en forme dans une frise temporelle.

On peut regarder ce que ça donne, en allant sur le site de Clamart :

http://local.attac.org/attac92clamart/spip.php?article518

Je l’avai aussi mise en "une" du site (voir plus bas à sujet), mais je trouve que ça alourdit un peu trop :

[http://local.attac.org/attac92clamart]

Les explications détaillées du developpeur sont ici :

http://timeline.verite.co/

 

Ça fonctionne avec un code html que l’on récupère sur le site http://timeline.verite.co/ et qu’on colle dans la page html ou php. Ce code renverra au site http://timeline.verite.co/ qui utilisera les données de notre frise à partir d’un fichier qui donne les indications des événements à afficher.

Pour cet exemple, j’ai fait simple et pas très propre (au sens informatique et libriste), mais rapide et efficace : un tableau de type excel stocké chez google (beurk !! Il faut avoir une adresse email chez eux pour accéder à cette fonction) : https://docs.google.com/ .

Ce fichier à donc une adresse de type :

https://docs.google.com/spreadsheet/ccc?key=AA0W5xpRlFlT945dCUTftpglBTjVkd2VTrVb0945sUGc&pli=1 (c’est un exemple ! Ce n’est pas l’adresse du fichier utilisé pour le site de Clamart !)

On récupéra son nom alpha-numérique à partir de son adresse, ce qui nous donne :

AA0W5xpRlFlT945dCUTftpglBTjVkd2VTrVb0945sUGc

et on le colle dans le code, ce qui donne pour notre exemple : 

 

<iframe src=’http ://embed.verite.co/timeline/ ?source=AA0W5xpRlFlT945dCUTftpglBTjVkd2VTrVb0945sUGc&font=Bevan-PotanoSans&maptype=toner&lang=en&width=900&height=650’ width=’900’ height=’650’ frameborder=’0’></iframe>

La largeur de la frise sera de 900 pixet et sa largeur de 650, avec une bordure de 0, il n’y a qu’à ajuster.

On peut aussi, utiliser un fichier json, mais c’est plus long à écrire … : du code brut.

L’intérêt du tableau est qu’il se compose de quelques colonnes : date, titre, sous-titre. On peut aussi ajouter une colonne renvoyant à des liens internet, etc …

Dans notre cas, nous avions depuis 2008 un tableau des actions réalisées, il a suffi de l’adapter aux contraintes de ce plugin.

Le code iframe est à "copier-coller" comme code html dans la page. On peut jouer sur les polices, la largeur et la hauteur, etc … Mais il n’y a pas beaucoup de paramétrage.

Une fois l’article mis en ligne, le chargement de la page est très légèrement plus long, mais la frise est très sympa : on la fait dérouler de droite à gauche. On peut agrandir ou raccourcir l’espace de temps visible.

Le tableau peut aussi contenir une colonne tag où on eut jouer sur 3 critères. Mais toutes les lignes doivent avoir au moins un des trois critères. On peut avoir un item de délestage, par exemple "-" pour les lignes qui ne correspondent pas aux deux autres, si on n’a pas trois critères, mais seulement deux … Dans l’exemple, il y un tag Clamart / ATTAC 92 / - ; ce qui donne trois lignes disctinctes.

 

D’autres projets très intéressants et esthétiques : 

http://timeline.debian.net/

http://simile.mit.edu/timeline/examples/monet/monet.html

 

Merci pour les remarques, conseils et améliorations.

Je suis, également, preneur de conseils pour une animation géographique SIMPLE de ces événements sur une carte départementale, pour continuer sur cet exemple.

 

 

#####

 

Article en Une : 

Avec le squelette "Sarka-Spip", on peut activer la mise en "Une" de certains articles. Aller dans Configuration / configurer Sarka-Spip / Onglet "Sommaire" :

"Article en Une

 

Pour le créer il suffit d’affecter à n’importe quel article (hors secteurs spécialisés) le mot-clé « article_une » du groupe « squelette_habillage ». Si le mot-clé est affecté à plusieurs articles, c’est le plus récent qui sera exposé."