My Timelines : traversez une ligne temporelle Ajax

My Timelines affiche une ligne temporelle dynamique sur votre site. A partir de n’importe quel flux RSS, Atom ou RDF, elle vous permettra de naviguer à travers le contenu de n’importe quel site en ayant une représentation graphique de la distribution des billets dans le temps.

Comment ça marche ?

Cette ligne du temps est composée de deux parties que l’on peut faire glisser vers la gauche ou vers la droite : du passé vers l’avenir. Selon les options sélectionnées, vous aurez les semaines en bas et les jours en haut.

Chaque partie permet de naviguer d’un billet à l’autre à une vitesse proportionnelle à la périodicité choisie (rassurez-vous c’est beaucoup plus clair quand on le voit !)… Nous pouvons donc parcourir rapidement les jours, les semaines ou les mois, puis affiner l’affichage des billets par heure, par jour ou par semaine.

Pour afficher cette Timeline, c’est très simple. Rendez vous à l’adresse http://www.mytimelines.net/create-a-timeline/ et commencez par indiquez l’adresse du flux et la périodicité voulue : choisissez Hour/Day si vous publiez plusieurs billets par jour, Day/Week si vous écrivez plusieurs billets par semaine, ou bien Day/Month pour quelques billets par mois, ou encore Week/Month…

Il ne reste que la police, la hauteur et la largeur à choisir pour obtenir le code qui insérera, via un script appelant des fonctions Ajax, cette fameuse ligne de temps dans une div vide au départ. Le code à copier-coller se compose de deux lignes de Javascript à insérer entre les balises head, et de quelques lignes de code à coller à l’endroit où vous voulez afficher la timeline.

Notez qu’il est possible de styler certains éléments avec CSS ; vous trouverez quelques conseils en la matière sur le site. Garder également à l’esprit que ce script ne fonctionnera pas si vous tenter de le coller ailleurs qu’entre les balises head.

Les petits plus

Cerise sur le gâteau, un clic sur le titre du billet, affiche ce dernier dans une élégante bulle scrollable. Un autre point positif à noter, c’est que la timeline s’affiche correctement sur IE comme sur Firefox. Avec tout de même un léger avantage pour ce dernier ! De toute manière, l’équipe qui développe Timelines – mais qui possède d’autres co(r)des à son arc – a l’air de prendre soin de produire des scripts utilisables par un maximum d’agents utilisateurs.

Attention quand même !

Très cool, Timelines n’en est pas moins (un peu) longue à se charger. Il y a deux appels de script sur des serveurs certainement surchargés. Après avoir installé le script dans le Template de dotclear, je me suis décidé à créer une page séparée en raison du temps de chargement. Autre petit soucis, les caractères accentués ne s’affichent pas correctement !

Conclusion

Malgré ces inconvénients perfectibles, ce script risque bien de devenir indispensable si vous voulez offrir une nouvelle expérience de navigation à vos visiteurs. Rien de moins ! En ce qui me concerne, vous pouvez voir My Timelines en action. C’est gris, c’est pratique !