My Timelines : traversez une ligne temporelle Ajax

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



3 commentaires pour “My Timelines : traversez une ligne temporelle Ajax”

  1. indicadesbois dit :

    Trés Sympa. Mais vraiment long à charger !

  2. Cap° dit :

    J’aurais bien vu le tout avec un peu plus de couleurs plutot que la totale en gris…. Mais bon ça doit encore être un truc de développeur ça. Faire de l’efficace et non du jolie :D !!!!!

  3. br1o dit :

    @indicadesbois -> ‘tain, c’est clair ! j’imagine qu’il faut consulter cette page en étant décalé par rapport aux US, mais bon, vu le nombre de fuseaux horaires qu’ils utilisent, la fenêtre doit être très, très étroite !

    @Cap° -> Je trouve qu’ils ont bien fait leur truc, : on peut insérer le script sans trop de problèmes d’harmonie entre les couleurs, nananère heu !



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site