FANDOM


Bonjour à toutes et à tous !

Beaucoup ne me connaissent sans doute pas, et c'est mon premier billet sur ce blog. J'ai remarqué qu'il est inactif depuis pas mal de temps (jusqu'à la publication de celui de Thegamer1604, bien sûr !), et je me suis proposé pour le faire "redémarrer". Je me présente donc, je suis Teteban41 (mais vous pouvez m'appeler Esteban), je concentre particulièrement mes activités sur des wikis littéraires (les principaux indiqués sur mon profil).

Dans ce billet, je vais parler d'une extension très peu exploitée et souvent non prise en compte : EasyTimeline. Elle risque d'intéresser particulièrement les utilisateurs travaillant sur des wikis d'Histoire (elle peut toutefois être utilisée un peu partout, en fonction des besoins).

· Avant-propos

Pourquoi ce billet ? L'idée m'est venue lorsque j'ai découvert la fonctionnalité EasyTimeline. Je me suis alors rendu compte que très peu de wikis l'utilisent, et je trouve ça assez dommage. Le but de ce billet est donc de la faire connaître au grand jour, car il semble qu'aucune documentation française n'existe pour cette extension...

Je tiens à prévenir les lecteurs que ce billet est très long, c'est pourquoi je vous conseille de le lire par tranche, ou alors vous êtes très courageux !

· EasyTimeline, qu'est-ce que c'est ?

EasyTimeline est une extension développée par MediaWiki (site web ici). Elle permet de créer une image représentant elle-même une frise chronologique. Toutefois, elle n'agit pas tout à fait comme un fichier simple, car on peu y insérer des liens, en rapport avec les statistiques évoquées.

· Comment procéder ? Frise chronologique de base

Construction globale

Voici la vue globale de la construction d'une frise, à titre d'exemple.

<timeline>
ImageSize  = width:300 height:550
PlotArea   = left:70 right:0 bottom:20 top:10
AlignBars  = justify

DateFormat = yyyy
Period     = from:1990 till:2067
TimeAxis   = orientation:vertical
ScaleMajor = unit:year increment:5 start:1990

Define $dx = 75

PlotData=
  bar:Tests color:green width:100 mark:(line,orange) align:left fontsize:S

  from:start till:2000 shift:($dx,15)   text:Test~date~1
  from:2000  till:2005 shift:($dx,5)    text:Test~date~2
  from:2005  till:2020 shift:($dx,5)    text:Test~date~3
  from:2020  till:2027 shift:($dx,5)    text:Test~date~4
  from:2027  till:2056 shift:($dx,-12)  text:Test~date~5
  from:2056  till:end shift:($dx,4)     text:Test~date~6  fontsize:L
</timeline>

À première vue, cela semble un peu compliqué, mais une fois que la signification des valeurs est connue de l'utilisateur, tout est plus simple, vous verrez !

Valeurs précises, pas à pas

Nota bene : toutes les valeurs que vous programmerez sont en pixel (px).

C'est ici que cela se complique. Ci-dessous, vous pourrez trouver les différents paramètres à modifier pour arriver à programmer une frise de niveau basique.

Dimensions de l'image

Nota bene : Cet attribut ne prend en charge que des chiffres (1, 2, 3...).

La taille de l'image en entier est réglée à l'aide des paramètres suivants :

ImageSize = width:valeur height:valeur
  • L'attribut "width" permet de définir la largeur.
  • L'attribut "height" règle la hauteur.
Exemple

Ainsi, si les paramètres sont rempis de cette manière : ImageSize = width:600 height:300, le cadre de la frise fera 600 pixels de large et 300 de haut.

Marges autour du contenu

Nota bene : Cet attribut ne prend en charge que des chiffres (1, 2, 3...).

Les marges entourant la ligne graduée, la frise et la légende sont ajustées grâce à ces paramètres :

PlotArea = left:valeur right:valeur bottom:valeur top:valeur
  • L'attribut "left" règle la marge de gauche.
  • L'attribut "right" règle la marge de droite.
  • L'attribut "bottom" règle la marge du bas.
  • L'attribut "top" règle la marge du haut.
Exemple

Par exemple, les valeurs PlotArea = left:30 right:30 bottom:10 top:10 indiquent que la marge de gauche et celle de droite sont de 30 pixels, tandis que celles du bas et du haut sont de 10 pixels.

Alignement de la frise

La frise en elle-même est alignée au sein de l'image. La paramètre qui règle l'alignement sont ceux-ci :

AlignBars = valeur

Les seules valeurs prises en charge par ce paramètre sont "justify", "early" et "late". Elles alignent respectivement la frise au centre de l'image, à la ligne graduée ou à la légende.

Format des dates

Le format des dates de la ligne graduées est personnalisable, lui aussi. Pour cela, on utilise les paramètres suivant :

DateFormat = valeur

La date est très généralement écrite en année, avec la valeur "yyyy", qui désique les quatre nombres utilisés (ex : 2020). Toutefois, on peut également entrer les valeurs "dd/mm/yyyy" (pour l'anglais day, month et year). Dans ce cas, la date est donnée comme ceci : 24/07/2020.

Période concernée par la frise

Nota bene : Cet attribut ne prend en charge que des chiffres (1, 2, 3...).

La frise concerne une période délimitée. On peut régler le début et la fin de cette période comme ceci :

Period = from:valeur till:valeur

L'attribut "from" désigne le début de la période et "till" concerne la fin de cette même période.

Exemple

Ainsi, avec Period = from:1670 till:2000, la frise s'étend de l'année 1670 à l'année 2000.

Mise en page

La mise en page est très importante en fonction du type de frise voulu. Pour la paramétrer, on fait comme ceci :

TimeAxis = orientation:valeur

L'orientation de l'image peut être horizontale (horizontal) ou verticale (vertical).

Paramètres avancés de la ligne graduée

Nota bene : Les attributs "increment" et "start" ne prennent en charge que des chiffres (1, 2, 3...).

La ligne graduée est elle aussi personnalisable. C'est un des éléments des plus importants de la frise, qui permet de s'y repérer. Pour la paramètrer, on programme de cette façon :

ScaleMajor = unit:valeur increment:valeur start:valeur
  • L'attribut "unit" permet de définir l'unité de graduation.
  • L'attribut "increment" définit l'espacement temporel entre chaque graduation.
  • L'attribut "start" définit le commencement de la ligne graduée.
Exemple

Par exemple, les valeurs ScaleMajor = unit:year increment:10 start:1800 indiquent que la ligne graduée commence en 1800, et que ses graduations sont des années espacées entre elles de 10 en 10.

Emplacement des titres

Nota bene : Cet attribut en charge que des chiffres (1, 2, 3...).

L'espace entre les titres et la frise est programmable à l'aide de ce paramètre :

Define $dx = valeur
Exemple

Avec la valeur "75", l'espacement sera de 75 pixels.

Personnalisation de la frise et des titres

La frise en elle-même est bien entendu personnalisable, notamment grâce à ces valeurs :

PlotData =
  bar:valeur color:valeur width:valeur mark:valeur align:valeur fontsize:valeur
  • L'attribut "bar" permet de définir le nom de la frise.
  • L'attribut "color" définit la couleur de fond de la frise.
  • L'attribut "width" définit la largeur de la frise.
  • L'attribut "mark" définit une bordure à la frise
  • L'attribut "align" définit l'alignement des titres.
  • L'attribut "fontsize" définit la taille du texte (attention aux valeurs : XS ; S ; L ; XL ; etc...)
Exemple

À titre d'exemple, ce paramétrage :

PlotData =
  bar:Exemple color:blue width:150 mark:(line,pink) align:left fontsize:L

Donne une frise nommée "Exemple", de couleur bleue, de largeur 150 pixels, et avec un ligne orange en tant que bordure. Les titres, eux, sont alignés à gauche et ont une taille "large".

Périodes

Note bene : EasyTimeline n'offre pas de détection automatique de collision entre les éléments, donc vous devez déplacer manuellement les textes vers le haut ou vers le bas pour éviter les chevauchements.

Une frise chronologique est composée de plusieurs "parties", ou "périodes". Chacune doit être paramétrée convenablement, car c'est un élément déterminant dans la construction de la frise.

  from:valeur till:valeur shift:valeur text:valeur fontsize:valeur
  • L'attribut "from" programme le début de la période.
  • L'attribut "till" programme la fin de la période.
  • L'attribut "shift" programme un déplacement vertical du texte.
  • L'attribut "text" programme le texte qui doit servir de titre à la période.
  • L'attribut facultatif "fontsize" définit la taille du texte.
Exemple
Note bene : Les espaces doivent impérativement être représentés par des tildés lors de l'écriture des titres.

Ainsi, si les paramètres suivants sont utilisés :

  from:start  till:1880   shift:($dx,0)  text:Titre~1~([[1|voir]])
  from:1880   till:1898   shift:($dx,15) text:Titre~2~([[2|voir]]) fontsize:XL
  from:1898   till:end    shift:($dx,-5) text:Titre~3~([[3|voir]])

La frise compte trois périodes :

  • La première a pour titre "Titre 1 (voir)". Elle commence au début de la frise et se termine à l'année 1880. Elle n'est pas déplacée et la taille du texte n'est pas modifiée.
  • La seconde a pour titre "Titre 2 (voir)". Elle commence à l'année 1880 et se termine à l'année 1898. Elle est déplacée de 15 pixels vers le haut et la taille du texte est rapportée à "very large".
  • La troisième a pour titre "Titre 3 (voir)". Elle commence à l'année 1898 et se termine à la fin de la frise. Elle est déplacée de 5 pixels vers le bas et la taille du texte n'est pas modifiée.

Mais alors, ça donne quoi ?

Avec toutes les connaissances acquises, on peut voir le résultat, non ? Voyons ce que les codes donnés au début donnent ! Et voilà :

· Pour aller plus loin...

Des frises plus complexes

Vous pensez maîtriser les frises basiques à la perfection ? Alors il est temps pour vous de vous attaquer à des niveaux beaucoup plus compliqués qu'une simple frise ! Comme l'objet de ce billet est uniquement la création de frises simples, vous pouvez désormais vous intéresser à la page de MediaWiki concernant cette extension, ici. Attention, la plupart du temps, c'est de l'anglais !

Des modèles

Vous êtes séduit(e) par cette extension ? Alors n'hésitez pas à créer un modèle simple et éfficace sur un des wiki où vous travaillez et où vous pensez qu'il sera utile ! Un petit exemple ici.

· Conclusion

Avez-vous aimé ce premier billet ?
 
0
 
4
 
2
 
0
 
0
 

Ce sondage a été créé le juillet 25, 2020 09:43 et 6 personnes ont déjà voté.

J'espère que vous avez aprécié ce billet de blog, et qu'il vous a permi d'en apprendre plus sur EasyTimeline ! Si vous avez une objection sur sa mise en page ou une question (pas trop poussée non plus, je ne suis pas (encore) un expert en frise chronologique...), n'hésitez pas à la (les) laisser dans les commentaires ! Si vous avez remarqué une faute d'orthographe dans le billet, vous pouvez également me la signaler dans le même espace.

Bonne journée / soirée à tous,

Esteban > (talk | contribs)

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .