Help:EasyTimeline intro

Overzicht beheerpagina's

N.B. De meest actuele versie is hier te vinden (Engels)

Inleiding in het maken van tijdlijnen

Het onderstaande is bedoeld als een eenvoudig bevattelijke versie van de handleiding voor het maken van tijdlijnen, zoals bevat in het document dat daarover op Meta staat, gelinkt in Help:EasyTimeline. Wat daar staat klopt allemaal, maar het is meer een naslagwerk dan een "hoe zet ik het in elkaar"-handleiding. En dus niet echt geschikt om een newbie te laten zien hoe je zo'n ding maakt. Het maken van tijdlijnen wordt daar omschreven als "not trivial", hetgeen we denken te kunnen te vertalen met "is wel even een klusje". Om die reden vindt u hier een uitgewerkt voorbeeld waarin het maken van een eenvoudige tijdlijn stapsgewijs uiteen wordt gezet.

Inleiding

U komt tijdlijnen met een zekere regelmaat tegen in artikelen waar een historisch aspect aan zit.

Een tijdlijn is, typisch, een grafiek met op de horizontale as een verdeling naar tijd, van 1900 tot 2006 of zo. En daarboven staat dan iets dat aangeeft wat er op diverse momenten, of gedurende diverse perioden, gebeurd is. Bijvoorbeeld kabinetten, dynastieën of oorlogen. Dat kan in de vorm van een aansluitende set lijnstukjes zijn, of in de vorm van meerdere lijnstukken onder elkaar.

EasyTimeline is een scripttaal, hetgeen voor digibeten betekent dat het in de praktijk neerkomt op net zolang knutselen tot het leidt tot een resultaat dat overeenkomt met hetgeen voor ogen stond.

Het komt erop neer dat u in een aantal instructies uitlegt hoe die grafiek samengesteld moet worden. Voordat u dat kunt doen, lijkt het logisch om op een papiertje uit te tekenen hoe u het gehad had willen hebben.

Het is wellicht nuttig op te merken dat een tijdlijn bij voorkeur niet te gedetailleerd zou moeten worden. Daardoor vermindert de leesbaarheid en daarmee de inzichtelijkheid die u met deze tijdlijn juist wilde bevorderen.

Voorbeeld

Om het aan een concreet iets op te hangen, wordt hier een weergave gemaakt van hoe iemand in de afgelopen 30 jaar op vakantie is gegaan. Van 1976 tot 2006 heeft hij fietsvakanties gehad, kampeervakanties, met tent en met caravan, daarna hotel, en daarna een cruise. Het lijkt aardig als we daar vier balken van maken, met die kampeervakantie dan in twee delen gesplitst, tent danwel caravan. De perioden hebben we verzameld, dus we kunnen aan de slag.

(Volledigheidshalve: in dit voorbeeld wordt alleen de minimaal benodigde code gebruikt.)

Het begint en eindigt steeds met de tags <timeline> en </timeline>. Dat leidt ertoe dat de Wikipedia-server weet dat hij hetgeen daartussen in zit moet beschouwen als code die tot een plaatje omgebouwd moet worden. Daartussen in komen dus een hoeveelheid opdrachten die ieder een deel van die grafiek bepalen: omvang, schaalverdeling, aantal balken, kleuren, toelichtende teksten, etcetera.

U gaat eerst uitleggen hoe groot het resultaat moet worden. Maximaal zal dat dus een schermbreedte worden, maar vaak kan het ook kleiner. Vervolgens moet u er wat marge omheen nemen, het systeem wil minimaal 20 pixels ruimte hebben. De optelsom van beiden zet u neer in de instructie ImageSize, en de marges in de instructie PlotArea. U wilt een ding dat 30 jaar bestrijkt, dan zou 10 pixels per jaar geschikt kunnen zijn, en met een marge van 20 pixels wordt dat 340 pixels breed. Voor de hoogte lijkt, op het eerste gezicht, 100 pixels toereikend.

Uiteindelijk hebt u zelfs bij een vrij simpel plaatje een behoorlijke hoeveelheid code. Het is nuttig om die in bij elkaar horen blokjes te groeperen. Qua tikwerk nog: achter een dubbele punt hoort geen spatie. Voor een =-teken mogen wel een of meer spaties, da's nuttig om de zaak ordelijk te houden. Voor het overige is het zoals altijd met computers: één komma verkeerd en hij raakt de draad kwijt.

Het "blad" van de tijdlijn

Hiervoor is, stapsgewijs, de volgende code nodig. Eerst geven we de grootte van het totale plaatje op, plus de grootte van de gewenste marges.

ImageSize   = width:340 height:140
PlotArea    = left: 20 right:20 top:20 bottom:20

Dan moeten we nog uitleggen dat we de jaren onderaan willen hebben, van links naar rechts, en niet van beneden naar boven. Dat mag overigens ook, maar voor deze grafiek doen we dat niet.

TimeAxis    = orientation:horizontal

En we moeten ook nog uitleggen dat we de diverse balken een beetje netjes verdeeld willen hebben over de hoogte van de grafiek, hoe precies mag het systeem zelf weten. Daar hebben we de opdracht "justify" voor:

AlignBars   = justify

Dan moet het systeem nog weten over welke periode we het hebben. Dat wordt dus 1976 tot 2006. Het mag in hele jaren neergezet worden, en omwille van de overzichtelijkheid is het nuttig om elke 5 jaar een jaartal onder de grafiek te zetten. Dat gaat zo:

DateFormat  = yyyy
Period      = from:1976 till:2006
ScaleMajor  = unit:year: increment:5 start:1976

Hiermee is de achtergrond van de grafiek, "het papier", klaar. Laat ik even op een rijtje zetten wat u nu heeft:

<timeline>

ImageSize   = width:340 height:140
PlotArea    = left: 20 right:20 top:20 bottom:20
TimeAxis    = orientation:horizontal
AlignBars   = justify

DateFormat  = yyyy
Period      = from:1976 till:2006
ScaleMajor  = unit:year increment:5 start:1976

</timeline>

Dit is het resultaat van bovenstaande code:

De balken zelf

We willen vier balken maken, en die balken krijgen allemaal een naam:

BarData     =
  bar:fiets
  bar:kampeer
  bar:hotel
  bar:cruise

Dan kunnen we elke balk van de nodige gegevens voorzien. Per balk moet opgegeven worden waar hij begint en eindigt, en welke kleur hij moet hebben. Voorts is het nuttig om de "dikte" van de balken op te geven. Als dat niet gebeurt, wordt de beschikbare hoogte over de balken verdeeld, maar wellicht wilt u dit anders aangegeven hebben.

Bij de balk "kampeer" moeten we een scheiding aan brengen tussen het tent- en het caravan-gedeelte, door verschillende kleuren te gebruiken. En verder is het wel nuttig als we een tekstje aanbrengen dat als legenda fungeert. De code:

PlotData    =
  width:20
  bar:fiets    from:1976 till:1983 color:green text:fiets
  bar:kampeer  from:1983 till:1994 color:green text:kampeer/tent
  bar:kampeer  from:1994 till:1998 color:blue  text:kampeer/caravan
  bar:hotel    from:1998 till:2001 color:green text:hotel
  bar:cruise   from:2002 till:2006 color:green text:cruise

Merk op dat er een gat in zit: in 2002 is men niet met vakantie geweest. Dat wordt, als het goed is, goed weergegeven.

Dit is de voor het ogenblik complete code:

<timeline>

ImageSize   = width:340 height:140
PlotArea    = left: 20 right:20 top:20 bottom:20
TimeAxis    = orientation:horizontal
AlignBars   = justify

DateFormat  = yyyy
Period      = from:1976 till:2006
ScaleMajor  = unit:year increment:5 start:1976

BarData     =
  bar:fiets
  bar:kampeer
  bar:hotel
  bar:cruise

PlotData    =
  width:20
  bar:fiets    from:1976 till:1983 color:green text:fiets
  bar:kampeer  from:1983 till:1994 color:green text:kampeer/tent
  bar:kampeer  from:1994 till:1998 color:blue  text:kampeer/caravan
  bar:hotel    from:1998 till:2001 color:green text:hotel
  bar:cruise   from:2002 till:2006 color:green text:cruise

</timeline>

Dit is het resultaat:

Plakt u dit eens in de Zandbak in, en gaat u daarna eens variëren. Probeer eens een andere kleur, schuif eens wat met grootten, etcetera. U hebt nu het basisrecept een keer bereid, voeg nu zelf andere ingrediënten toe.

Nog één wellicht nuttige opmerking: u kunt van die teksten Wikilinks maken met de bekende dubbele haken.

Geïnteresseerd?

Leest u dan het hierboven genoemde document, eens rustig door. Nogmaals, het maken van een "mooie" tijdlijn is een klusje waar flink wat tijd in gaat zitten. Het lijkt ook aan te raden om, ook voor uzelf, een beschrijving bij te houden van hoe u het gedaan hebt, en welke code wat voorstelt, en waarom die tot welk resultaat leidt. Die toelichting kunt u tussen de bekende <!-- en --> commentaar-tags zetten. Ook wordt alle tekst die volgt na een hekje (#) opgevat als commentaar.