Identifiants personnels


Moi ... Moi ... et re Moi
« [UBUNTU] Compiler Flvtool2   Informatique  [SPIP] Spip.ici.ous »

[SPIP Plugin] Plugin Timeline pour agenda

mercredi 25 octobre 2006, modifié le 19 août 2007, par Quentin Drouet

Développé pour le site Lx5.net

PNGUtilisation de la timeline en javascript du laboratoire SIMILE du MIT.

Ce plugin est en cours de développement.... Ceci est un bloc-note de développement constituant également un début de documentation.

Lorsque le plugin sera jugé apte à devenir stable, cette documentation sera déplacée sur spip-contrib

Objectifs

En complément du plugn agenda de Cedric Morin, offir aux webmasters une autre méthode d’afficher ces évènements que l’utilisation d’un calendrier à la dotclear.

- Utilisation de la timeline en javascript du laboratoire SIMILE du MIT.
- Adaptation au maximum à SPIP.
- SPIP utilise par défaut la librairie javascript Jquery... on va donc l’utiliser également un petit peu.

La boucle des évènements à récupérer

Il semble nécessaire de pouvoir spécifier quels évènements nous souhaitons récupérer en particulier...

Pour cela il suffit d’appeler la timeline de cette manière :
- <timeline1|article=12> : récupère les évènements de l’article 12
- <timeline1|mot=12> : récupère les évènements dans tout le site qui ont le mot clé numéro 12

Un peu de doc pour SIMILE Timeline

La documentation étant assez peu fournie et en anglais ... on va expliquer ici ce que l’on comprend...

2Le Javascript2

Tout d’abors et avant tout il faut insérer le js de la timeline... Le plus simple est de le chopper directement chez eux ... Donc on insère entre les balises head ceci :

<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>

Ensuite ... il va falloir bien entendu définir notre timeline :

2Le XML Contenant les évènements2

"start" est la date de début de l’évènement "end" est la date de fin "latestStart" "earliestEnd" "isDuration" != "true", "title" ... Le titre description "image" ... L’image "link" ... Le lien de l’évènement "icon" ... L’icone de l’évènement "color" ... La couleur dans laquelle appraîtra l’évènement dans la timeline "textColor" ... La couleur que prendra le texte dans l’infobulle

Ces éléments sont définis dans le fichier "sources.js" inclus automatiquement par "timeline-api.js".

Dépendances pour spip

- Plugin CFG
- Plugin Agenda de Cédric Morin
- Plugin Widget calendar de Cédric Morin

Configuration à travers CFG

La plupart des options sont configurables dans CFG et sont réparties en plusieurs parties ...

Design de la timeline
- largeur : largeur en pourcentages ou pixels du cadre de la timeline. Il est nécessaire de mettre "%" ou "px" à la fin de la valeur. Par défaut : 100%
- hauteur : hauteur en pixels du cadre de la timeline. Il est nécessaire de mettre "px" à la fin de la valeur. Par défaut : 300px

Méthode de mise en place

- Rajouter la balise #AGENDA_TIMELINE entre les balises de vos squelettes
- Rajouter le modèle agenda_timeline à l’emplacement ou vous souhaitez faire apparaitre votre timeline...

Note : il sera possible de modifier l’affichage dans le futur (taille couleur...).

Portfolio

Répondre à cet article


commentaires fermes
  • D’après témoignage ça marche aussi en SPIP2.

    http://permalink.gmane.org/gmane.co...

    Voir en ligne : référence

  • [SPIP Plugin] Plugin Timeline pour agenda 15 août 2008 18:24, par rcaron

    Est-ce que le projet de ce plugin est toujours d’actualité ou abandonné (ce serait vraiment dommage !) ?

    Où peut-on le télécharger ?

    Merci et bravo

    Robert Caron

  • [SPIP Plugin] Plugin Timeline pour agenda 19 février 2008 12:00, par opopop

    Bonjour,

    Excellent boulot ! Je suis étonné que ton plugin Timeline ne soit pas plus connu !

    Je l’utilise sur un site pour annoncer des spectacles dans un café en Bretagne.

    J’aimerai intégrer dans le bubble une image, voir même un lecteur MP3 en liant un mp3 en comme il est possible de le faire avec GoogleMap et le plugin Gis.

    Mais ça coince : je pensai que cela fonctionnerait en intégrant une image dans le chapeau de l’article, mais non ! Aurais-tu une piste pour me venir en aide ?

    Sinon, où puis-je supprimer les dates qui apparaissent en gris à la fin du bubble comme tu l’as fait sur le site de Lx5.net (je suis un peu débutant en programmation ) ?

    Merci en tout cas, ce plugin a de l’avenir...

    • [SPIP Plugin] Plugin Timeline pour agenda 9 mars 2008 02:15, par Quentin Drouet

      Merci ... il va prendre une autre dimension cet été mais là ... je n’ai pas de temps du tout pour m’en occuper...

      Pour tes questions ... je n’ai malheureusement pas le temps de me plonger de temps en ce moment... Désolé...

      Peux tu mettre ton site dans la pétition dans la colonne de droite de ce site stp ?

      Merci... Kent1

  • [SPIP 1.9.1] Plugin Timeline pour agenda 14 décembre 2006 14:28

    have a look on http://www.linb.net/docs/examples/l... trop top !

    touti

Propulsé par : SPIP 2.1.26 SVN [21335]