Ayuda:Líneas de tiempo

Las líneas de tiempo permiten crear gráficas de líneas de tiempos a partir de un lenguaje de marcado especial.

Información original en Wikimedia:

• m:EasyTimeline
• m:Help:EasyTimeline syntax
• m:Help:EasyTimeline activation
• Gallería de gráficas de líneas de tiempo

En el texto de la gráfica se pueden poner además enlaces al estilo wiki, [[enlace]], [http://www.cia.gov], como siempre.

En Meta piden que se enlace cualquier línea de tiempos desde esta página, para comprobar si falla en caso de hacer un cambio en el software.

En la práctica, conviene poner cada línea de tiempos en un Template aparte, para facilitar su edición, y que no estorbe al editar el resto del artículo. Además, así se puede reutilizar cómodamente en otros artículos relacionados.

[editar] Ejemplos

<timeline>
#ff25ff las longitudes se miden en píxeles
ImageSize  = width:160 height:550 #f5f5ffño de la imagen: ancho, alto 
PlotArea   = width:50 height:530 left:50 bottom:10 #f5f5ffño de la gráfica en sí dentro de la imagen: ancho, alto, margen izquierdo, margen derecho
DateFormat = yyyy #f0fff5o de fechas= y-cifra de año, m-cifra de mes, d-cifra de día.
Period     = from:1919 till:1991 #f1ffffíodo de tiempo representado: desde, hasta
TimeAxis   = orientation:vertical #fff1ffación del eje de tiempos: horizontal o vertical
ScaleMajor = unit:year increment:5 start:1920 #f135f5
 
# No se da cuenta de cuándo chocan dos frases, así que hay
# que moverlas a mano con la variable $dx
 
Define $dx = 25 # shift text to right side of bar
 
PlotData=
#45fff5, color, ancho, ?, alineamiento, tamaño de fuente (XS,S,M,L,XL)
  bar:Líderes color:red width:25 mark:(line,#000000) align:left fontsize:M
 
 #21f2f1     hasta desplazamiento($dx, píxeles) texto y enlace
 from:start till:1922 shift:($dx,15)  text:Vladímir~Ilich~[[Lenin]]
 from:1922  till:1953 shift:($dx,5)   text:Iósif~[[I%C3%B3sif Stalin|Stalin]]
 from:1953  till:1964 shift:($dx,5)   text:Nikita~[[Nikita Jruschov|Jruschov]]
 from:1964  till:1982 shift:($dx,5)   text:Leonid~[[Leoniz Brezhnev|Brezhnev]]
 from:1982  till:1984 shift:($dx,-12) text:Yuri~[[Yuri Andropov|Andropov]]
 from:1984  till:1985 shift:($dx,4)   text:Konstantin~[[Konstantin_Chernenko|Chernenko]] fontsize:XS
 from:1985  till:end  shift:($dx,10)  text:Mijaíl~[[Mija%C3%ADl Gorbachov|Gorbachov]]
</timeline>

Que queda así:

A continuación vienen tres líneas de tiempo horizontales

<timeline>
ImageSize  = width:800 height:100
...
  from: start  till: -3800  text:[[Hadean]]
</timeline>
----
<timeline>
ImageSize  = width:800 height:120
...
  from: -360   till:  -325  text:[[Mississippian|Missis-~sippian]] shift:(0,0.5)
</timeline>

[editar] Referencia

[editar] Estructura

Con el código mínimo:

<timeline>
ImageSize  = width:200 height:40
PlotArea   = width:100 height:30 left:50 bottom:10
Period     = from:1900 till:1930
TimeAxis   = orientation:horizontal
PlotData=
  bar:prueba width:20 color:red
  from:1900 till:1920
</timeline>

[editar] Órdenes disponibles

• Maquetación: ImageSize, PlotArea, Colors, BackgroundColors, AlignBars
• Interpretación y presentación de fechas y períodos de tiempo: DateFormat, Period, ScaleMajor, ScaleMinor, TimeAxis
• Eventos, períodos y textos descriptivos: PlotData, TextData
• Ordenar, dividir y dar nombre a grupos de eventos y períodos: BarData, Legend, DrawLines
• Abreviaturas para trozos de código que se repiten: Define

Según el manual, son obligatorios: ImageSize, PlotArea y Period. Además, deben estar PlotData o TextData. Todo lo demás es opcional.

Las órdenes pueden escribirse en mayúsculas o en minúsculas, o mezclando mayúsculas y minúsculas; funcionan igualmente.

[editar] Sintaxis

Los comentarios (cosas que ponemos para aclararnos los seres humanos, y que las máquinas ignoran) se ponen así:

# Esto es un comentario. Cualquier cosa que ponga aquí no va a afectar a la gráfica.

También se pueden hacer de varias líneas, pero poniendo signos de > y <:

#> Esto es un comentario de varias líneas, 
    para cuando quieres explicar algo que no te cabe
    sólo en una línea, o te queda más bonito, o quieres
    quitar un trozo de código porque algo no sale y no 
    sabes muy bien el qué.
<#

La estructura de las órdenes es es:

Orden [nombre]= atributo1:valor1 atributo2:valor2 atributo3:valor3 ...

Un ejemplo:

ImageSize = width:160 height:64

Se pueden poner en varias líneas, dejando al menos un espacio antes de cada trozo tras el primero:

ImageSize  =
 width:160
 height:64

Otro ejemplo:

PlotData =
  fontsize:XS width:20
  bar:Japón from:start till:19/02/1945 color:JT
  bar:Japón from:19/02/1945 till:14/03/1945 color:AI

[editar] Bloques de datos

Algunas órdenes (BarData, PlotData, TextData, Colors...) piden un bloque de datos, que no es más que una serie de líneas con datos. Cada línea debe empezar con al menos un espacio, ya que el bloque se acaba cuando aparece una línea cuya primera letra no es un espacio (a menos que sea una línea en blanco).

Un ejemplo:

# Este ejemplo dibuja dos grupos de barras, uno en rojo y otro en azul
# pero una barra de cada grupo (marcando guerras) estará en verde.

PlotData =
  color:red fontsize:S                               # color y tamaño de fuente por defecto
  bar:URRS from:1919 till:1922 text:Lenin            # barra roja
  bar:URRS from:1922 till:1953 text:Stalin           # barra roja
  bar:URRS from:1939 till:1945 text:2ªGM color:green # barra verde
  bar:URRS from:1953 till:1964 text:Krushchev        # barra roja

  color:blue                                         # cambio color por defecto
  bar:EEUU from:1913 till:1921 text:Wilson             # barra azul
  bar:EEUU from:1917 till:1918 text:1ªGM color:green    # barra verde
  bar:EEUU from:1921 till:1923 text:Harding            # barra azul
  bar:EEUU from:1923 till:1929 text:Coolidge           # barra azul

[editar] Caracteres especiales

• ~ (tilde) en texto (text) significa: cambio de línea.
• ^ (acento diacrítico ??) en texto (text) significa: tabulador.
• _ (subrayado o guión bajo) en texto (text) significa: espacio.
• $ (signo del dólar) indica una constante de usuario.

[editar] Referencia de órdenes

Los atributos opcionales se marcan así: (O).

[editar] AlignBars

early (por defecto) 

La primera barra se pinta pegada al eje, la última deja algo de espacio hasta el final del gráfico.

late 

Lo contrario de early.

justify 

La primera y la última barras se pegan a los extremos, no dejando espacio vacío en ninguno de los dos lados.

[editar] BackgroundColors

canvas (O) 

Color de fondo de toda la imagen.

bars (O) 

Color de fondo para todas las barras.

Los colores deben definirse primero utilizando Colors.

Ejemplos:

BackgroundColors = bars:darkgrey
BackgroundColors = canvas:lightgrey bars:darkgrey
BackgroundColors = canvas:lightgrey

[editar] BarData

Orden opcional, indicado para líneas de tiempos muy complejas. Sirve para mostrar u ocultar las barras, u ordenarlas de otra forma distinta.

bar 

nombre de la barra (no admite espacios, usar "_" cuando se necesiten), utilizado para otras órdenes (como PlotData). También será la etiqueta mostrada para la barra, a menos que se especifique text.

text (O) 

texto a mostrar en la etiqueta para la barra (ver text input)

link (O) 

enlace (URL). La etiqueta será entonces un enlace azul.

Aviso: Se debe usar "text" o "link", pero nunca ambos.

Ejemplo:

BarData =
  bar:Asia
  # En PlotData podremos poner que la barra es "Filipinas", pero el texto mostrado será "Islas Filipinas"
  bar:Filipinas       text:"Islas Filipinas"  
  # La etiqueta China se mostrará como un enlace azul al artículo sobre China
  bar:China    text:[[China]]        

[editar] Colors

Sirve para definir colores.

id

Nombre que queremos dar al color, y que nos pedirán otras órdenes.

value

Color. Se puede especificar de varias formas:

• Constante predefinida (hay 32, todas en inglés)

rgb (rojo, verde, azul)

• Describimos el color por medio de sus componentes RGB (roja, verde y azul), expresadas por números entre 0 y 1.
• hsv (hue, saturación, valor): lo mismo, pero con valores HSV.
• gray (valor): Tono de gris entre 0 (negro) y 1 (blanco).

legend (O) 

Texto que se mostrará en la leyenda para este color.

Ejemplo:

Colors =
  id:guerra     value:red   legend:Periodo bélico
  id:paz        value:blue  legend:Tiempo de paz
  id:tregua     value:rgb(0.6,0,0.6)
  id:grisclaro  value:gray(0.9)
  id:grisoscuro value:gray(0.1)

[editar] DateFormat

Formato en el que se especifican las fechas.

dd/mm/yyyy 

Día/Mes/Año (sólo para fechas posteriores a 01/01/1800).

mm/dd/yyyy 

Mes/Día/Año (sólo para fechas posteriores a 01/01/1800)

yyyy 

Año (así deben especificarse 4 cifras, si tiene menos, rellenar con ceros a la izquierda, o poner menos "y"es).

Ejemplo:

DateFormat = dd/mm/yyy

nos permitiría usar fechas como 28/02/372

[editar] Define

Sirve para definir abreviaturas ("text constants") para trozos de código que se usen varias veces. Los nombres de las abreviaturas deben empezar con un "$".

Ejemplo:

Define $estrecho        = width:10
Define $ancho           = width:30
Define $barrapordefecto = $ancho fontsize:S

[editar] DrawLines

Pinta líneas a lo largo de la gráfica, para poder separar distintas épocas, o lo que se nos ocurra.

at 

Fecha en la que la línea se pintará, en el formato que pusimos con DateFormat.

color 

Color de la línea (debe definirse con Colors, como siempre).

Ejemplo:

DrawLines=
  at:start      color:rojo
  at:end        color:rojo
  at:07/12/1941 color:verde

[editar] ImageSize

Tamaño de la imagen final, en unidades absolutas (por defecto, píxeles).

width 

ancho, como máximo 1600 pixeles.

height 

alto, como máximo 1200 pixeles.

Ejemplo:

ImageSize = width:800 height:600

[editar] Legend

Leyenda o título de la línea de tiempos.

orientation (O) 

Orientación del texto: horizontal (hor), vertical (ver) (que es el valor por defecto). No podemos tener "orientation = 'horizontal'" y "position = 'right'" a la vez.

position (O) 

posición respecto a la zona de la gráfica. Puede ser top (encima), bottom (debajo, por defecto), o right (a la derecha).

columns (O) 

Número de columnas: 1, 2, 3 o 4.

Para perfeccionistas:

columnwidth (O) 

distancia entre columnas. La distancia puede se absoluta (píxeles) o relativa (porcentaje del gráfico). Este valor se ignora si hemos puesto "columns = 1".

left (O) 

margen izquierdo, puede ser una distancia absoluta o relativa.

top (O) 

margen superior, puede ser una distancia absoluta o relativa.

Ejemplos:

Legend = orientation:vertical position:bottom columns:3 columnwidth:140
Legend = orientation:horizontal position:bottom
Legend = left:100 top:120 columns:3

[editar] Period

Periodo de tiempo que cubre la línea de tiempos. Los dos parámetros son obligatorios, y deben cumplir el formato especificado por DateFormat.

from 

Fecha inicial, que será el valor que tome "start" en órdenes como PlotData y TextData.

till 

Fecha final, que será el valor de "end".

Ejemplo:

Period = from:01/09/1939 till:02/09/1945

[editar] PlotArea

Zona en la que irá realmente la gráfica. Todo puede estar en unidades absolutas (píxeles) o relativas (porcentaje).

width 

ancho.

height 

alto.

left 

margen izquierdo.

bottom 

margen inferior.

Ejemplos:

PlotArea = width:640 height:420 left:160 bottom:120
PlotArea = width:80% height:70% left:20% bottom:20%

[editar] PlotData

Define las barras (cada una de las cuales simboliza un periodo de tiempo), y pone un texto junto a ellas.

Para textos que no están relacionados con ningún período o fecha, o que requieren un formato especial, usa mejor TextData.

Los atributos text, at, from y till se aplican sólo a la barra en cuya línea aparecen. Los demás, si aparecen aparte, serán los valores por defecto en el resto del bloque de órdenes, o hasta que se den otros.

[editar] Atributos de posición

at 

Fecha en la que se pone el texto. Según el valor de align, el texto empezará, terminará o estará centrado en esa fecha. Se le puede dar también los valores start o end. Incompatible con from o till.

from 

Fecha en la que empieza una barra. Se permite start. Se utiliza combinado con till.

till 

Fecha en la que acaba una barra. Se permite end. Usar combinado con from.

shift 

Desplazamiento del texto en unidades absolutas (píxeles), para poder moverlo y que no "choque" con otras cosas.

Ejemplo:

PlotData=
  bar:Japan from:start      till:19/02/1945 color:JT
  bar:Japan from:19/02/1945 till:14/03/1945 color:AI
  bar:Japan from:02/09/1945 till:end        color:AO

  at:07/12/1941 shift:(0,-15) text:"<-- WW2 reaches Asia"

[editar] Atributos de las barras

bar 

Nombre de la barra que se describe en esa línea. Las barras se dibujan en el orden en el que aparecen en los bloques de PlotData, a menos que se haya usado BarData.

color 

Color de la barra, que debe haberse definido con Colors.

width 

Anchura de la barra en unidades absolutas o relativas.

Ejemplo:

BarData=
  bar:EEUU text:Estados Unidos
  bar:BM text:Batallas_marinas

Colors=
  id:EEUU value:blue legend:Estados_Unidos
  id:BM value:rgb(0.8,0,0.7) legend:Batallas_marinas

PlotData=
  #f5f3ff por defecto de las barras
  width=0.3 
  #f1f5ff barra va a tener un texto:
  bar:BM     from:07/08/1942 till:09/02/1943 text:Guadalcanal color:BM 
  #11ffff aparecerá antes que BM, aunque aquí vaya después, obligado por BarData:
  bar:EEUU   from:start      till:end color:EEUU 
  #fff2f5 no se dibujará, porque no viene en BarData:    
  bar:Midway from:start      till:end color:EEUU
  #f1ffff no es una barra, es una línea de texto para un hecho puntual
  bar:EEUU   at:07/12/1941   text:7/12 Pearl Harbour

[editar] Atributos de texto

text 

El propio texto a mostrar en la barra. Puede incluir enlaces. Véase Texto.

textcolor (O) 

Color del texto, que debe definirse antes con Colors. Por defecto, es negro.

fontsize (O) 

Tamaño de la fuente. Puede valer (de menor a mayor) XS, S, M, L, o XL ; o venir en puntos (entre 6 y 30). Véase Fuentes de letra.

align (O) 

Alineamiento del texto: center (centrado, por defecto), left (a izquierda) o right (a la derecha).

link (O) 

Enlace, se pintará en azul. No es compatible con enlaces en el atributo text.

Sólo se mostrará un enlace por línea de texto (así que, si pones cambios de línea "~", ya podrás poner más)

Ejemplo:

PlotData=
   bar:EEUU at:07/12/1941 align:left textcolor:#FFFFFF fontsize:XS text:7/12 [[Pearl Harbour]]

Nos da lo mismo que:

PlotData=
   bar:EEUU at:07/12/1941 align:left textcolor:#FFFFFF fontsize:XS text:"7/12 Pearl Harbour" link:http://es.wikipedia.org/wiki/Pearl_Harbour

[editar] Atributo marca

mark

(tipo, color) : marca (línea) que se va a poner en la barra.

Por ahora, el único tipo de marca posible es una línea. El color, como siempre, debe definirse antes con Colors, o será negro.

Ejemplo:

PlotData=
  bar:prueba width:15 color:red
  from:1900 till:2000
  at:1990 mark:(line,#000000)

Queda así

[editar] ScaleMajor

Indica la "escala mayor", es decir, las rayas "grandes" del eje de tiempos, que llevan la fecha escrita.

gridcolor (O) 

Color de las líneas de la rejilla. Si no se pone, no hay rejilla. Defínelo primero con Colors.

unit (O) 

Unidad de tiempo de la escala: day (día), month (mes) o year (año). Si se ha puesto DateFormat yyyy, sólo pueden ser años.

increment (O) 

Tiempo entre raya y raya. Por defecto, vale 1.

start (O) 

Cuándo empiezan las rayas. Por defecto, start.

Ejemplos:

ScaleMajor = gridcolor:red start:1940
ScaleMajor = gridcolor:red unit:month increment:3 start:01/09/1939

[editar] ScaleMinor

Rayas pequeñas de la escala de tiempos. Funciona igual que ScaleMajor.

Ejemplo:

ScaleMajor = grid:red  unit:year  increment:1 start:01/01/1940
ScaleMinor = grid:blue unit:month increment:3 start:01/10/1939

[editar] TextData

Párrafo de texto, que se puede poner en cualquier parte de la gráfica.

text 

El texto a mostrar, puede tener enlaces. Véase Texto.

pos

(x, y) : Coordenadas de la esquina superior izquierda del párrafo, en unidades absolutas o relativas.

link (O) 

Enlace web (URL) de #f5f5ff clicables, que se mostrará en azul. Es incompatible con enlaces en text.

textcolor (O) 

Color del texto, que debe definirse antes con Colors, o será negro.

fontsize (O) 

Tamaño de la fuente de letra. Puede valer XS, S, M, L o XL; o ser en puntos (entre 6 y 30). Véase Fuentes de letra.

tabs (O) 

Defines position and alignment for tab character: ^ (caret). Specify multiple tab settings as tabs: (x¹-a¹,x²-a²,x³-a³, etc..) where

• xⁿ is the horizontal displacement in absolute measurements from the left side of the text
• aⁿ is the alignment for the text segment (specify center, left or right)

lineheight (O) 

Interlineado en píxeles, como máximo 40.

Ejemplo:

TextData =
  pos:(20,67) textcolor:#FFFFFF fontsize:S
  tabs:(10-right,14-left,50-left,90-left,230-left)
  text:^1^1940^27/9^Alemania, Italia y Japón firman el [[Pacto Tripartito]]
  text:^10^1944^1-22/7^En Bretton Woods 44 países fundan
  text:^^^^^el FMI y el Banco Mundial

Se verá así:

[editar] TimeAxis

Eje de tiempos.

format (O) 

Formato con el que se presentan las fechas en el eje. Por ahora, sólo puede ser yyyy, que es el valor por defecto. Así que este atributo, hoy por hoy, es inútil.

orientation (O) 

Puede ser horizontal (hor, por defecto) o vertical (ver).

Ejemplo:

TimeAxis = orientation:horizontal format:yyyy

[editar] Valores posibles

[editar] Longitudes

Las unidades absolutas se miden siempre en píxeles. Se escriben simplemente poniendo el número.

Ejemplo:

PlotArea = width:800 height:600 left:50 bottom:50

Las unidades relativas se miden siempre en porcentajes del ancho o alto de la imagen. Se escriben poniendo un número y el símbolo "%".

Ejemplo:

PlotArea = width:80% height:80% left:10% bottom:5%

[editar] Texto

El texto no puede ser Unicode, lo que hace que algunos caracteres se pinten mal. Véase Fuentes de letra.

Los espacios sólo se pueden poner si se pone el texto entre comillas ("texto"). También se puede poner el texto sin comillas, y poner "_" donde se quieran los espacios, o colocar el texto al final de la línea.

Ejemplos (todos dan el mismo resultado):

BarData =
  text:Bajo_dominio_japonés_desde_1914 bar:Marshalls
BarData =
  text:"Bajo dominio japonés desde 1914" bar:Marshalls
BarData =
  bar:Marshalls text:Bajo dominio japonés desde 1914

En párrafos creados con TextData, hay dos caracteres especiales:

~ (tilde) señala un cambio de línea.

^ (caret) indica un tabulador.

Ejemplo:

TextData =
  .. text:Generado por Wikipedia~Version 1.1 - 2 de enero de 2004

# quedará así:
#
#  Generado por Wikipedia
#  Version 1.1 - 2 de enero de 2004

TextData =
  tabs:(4-right,12-right,14-left,34-left)
  text:^1^1940^27/9^Berlin Ger,It,Jap firman el Pacto Tripartito
  text:^10^1944^1-22/7^En Bretton Woods 44 países fundan el
  text:^^^^^FMI y el Banco Mundial

# quedará así:
#
#      1    27/9 Berlin Ger,It,Jap firman el Pacto Tripartito
#     10  1-22/7 En Bretton Woods 44 países fundan el
#                                    FMI y el Banco Mundial

[editar] Mapas clicables

En Wikipedia, las líneas de tiempo pueden aparecer en dos formatos: PNG y SVG. En ambos podemos usar enlaces, que serán barras o textos en azul

Los enlaces pueden aparecer en las órdenes BarData, PlotData o TextData, ya sea en el atributo link, o como parte de text.

[editar] Enlaces en texto

Son los enlaces que aparecen como parte de un texto (text). Se hacen igual que en cualquier otra parte de Wikipedia: [[artículo]], pudiendo ponerse incluso enlaces a otras Wikipedias, indicando su prefijo. También se puede especificar una URL: [http://www.microsoft.com|monopolio]

Ejemplos

  text:1642 [[Rembrandt]] pinta un cuadro

Queda así:

  text:1642 [[Rembrandt|Rembrandt van Rijn]] pinta un cuadro

Queda así:

  text:1642 [http://es.wikipedia.org/wiki/Rembrandt|Rembrandt van Rijn] pinta un cuadro

Queda así:

Ahora, uno a la Wikipedia en inglés:

  text:1642 [[en:Rembrandt|Rembrandt van Rijn]] pinta un cuadro

Queda así:

Los dos últimos enlaces van a distintas Wikipedias. Además, el texto que aparece al pasar el ratón sobre el enlace cambia.

[editar] Fuentes de letra

El tamaño de la letra se especifica con el atributo fontsize, con valores (de menor a mayor): XS, S, M, L, XL:

[editar] Enlaces relacionados

En inglés:

• Manual oficial de EasyTimeline
• Manual de EasyTimeline en Meta
• Todas las líneas de tiempos de esta wikipedia