Ajuda:Linha temporal

De Wikibooks

É por vezes útil apresentar graficamente uma sucessão de acontecimentos históricos num módulo, especialmente em livros de História. Tal pode ser feito usando-se uma linha temporal. Existem diversas formas de integrar uma linha temporal num módulo:

Os três métodos apresentam diferentes níveis de dificuldade e de flexibilidade. As imagens podem ser relativamente simples mas são estáticas, ou seja, se for necessária alguma actualização ou adição, é necessário fazer uma nova imagem e carregar o ficheiro sobre a antiga versão. Por outro lado, a utilização de código pode ser mais complexa mas torna-se mais simples de editar.

A extensão EasyTimeline é bastante completa mas a sintaxe é complexa e difícil de usar, especialmente para pessoas com poucos conhecimentos sobre o funcionamento de código. Foi por isso desenvolvida uma predefinição, a {{graphical timeline}}, que facilita a execução de linhas temporais.

Tabela de conteúdo

[editar] Instruções de uso da linha temporal

[editar] A forma mais simples

Escreva {{linha temporal}} ou {{include timeline}} no módulo e clique em "mostrar previsão". Aparecerá o seguinte texto:

New article Clique aqui para iniciar uma linha temporal horizontal, ou aqui para uma vertical.

Quando tiver terminado, guarde esta página; a sua linha temporal estará incluída aqui!

Para mais detalhes, veja Ajuda:Linha temporal

Siga o link desejado: você poderá querer criar uma linha temporal com orientação vertical ou uma com orientação horizontal. De acordo com a sua escolha, ser-lhe-á apresentada uma predefinição pronta-a-usar na janela de edição, com instruções já colocadas na previsão. Regressando ao módulo, a predefinição {{include timeline}} apresentará a sua linha temporal; esta ficará guardada como uma predefinição na página "Predefinição:[Nome da página] graphical timeline".

[editar] Se usar a opção "vertical"

Se seguir o link para criar uma linha temporal vertical, aparecerá o seguinte texto na página de edição:

Está pronto a criar a predefinição!
Siga estes simples passos e terá a predefinição pronta num instante!
  • Adicione uma chaveta de fecho para completar Linha_temporal.
  • Preencha os parâmetros "from" (de) e "to" (a): estes são os únicos parâmetros obrigatórios.
  • Copie tantas barras, notas, etc, quantas as necessárias, substituindo # com números 1, 2, 3… etc.
  • Apague os parâmetros desnecessários.

seguido de algumas notas importantes. Aparecerá também na janela de edição o código apresentado na coluna à esquerda (explicações na coluna da direita):

{{Graphical timeline
 | help=off
 | link-to={{subst:PAGENAMEE}<!--substitua este comentário por }-->

 | from=
 | to=
 | scale-increment=
 
 | align=
 | margin=
 | width=
 | width-unit=
 | height=
 | height-unit=
 | unit=

 | title=
 | title-colour=
 | plot-colour=

 | bar#-from=
 | bar#-to=
 | bar#-left=
 | bar#-colour=
 | bar#-border-width=
 | bar#-border-colour=
 | bar#-text=
 | bar#-nudge-left=
 | bar#-nudge-right=
 | bar#-nudge-up=
 | bar#-nudge-down=

 | legend#=
 | legend#-colour=

 | note#=
 | note#-nudge-down=
 | note#-nudge-up=
 | note#-nudge-left=
 | note#-nudge-right=
 | note#-remove-arr=
 | note#-colour=

 | caption=

}}

{{Graphical timeline
 | "on": apresentam-se algumas linhas adicionais de ajuda; "off": não serão apresentadas essas linhas 
 | A sintaxe final deve ficar "link-to={{subst:PAGENAMEE}}", pelo que se deve substituir o comentário (entre <!-- -->) por uma chaveta }

 | Início da linha temporal. Este parâmetro é obrigatório.
 | Fim da linha temporal. Este parâmetro é obrigatório.
 | Incremento a ser usado na escala.
 
 | Use "left", "right" ou "center" para alinhar a linha temporal respectivamente à esquerda, direita ou centro da página.
 | Insira um valor para acrescentar uma margem.
 | Insira um valor para definir a largura.
 | Por omissão, as unidades são em "em" (a largura de um M); pode inserir outra unidades aqui (como pixel, px).
 | Insira um valor para definir a altura.
 | Por omissão, as unidades são em "em" (a largura de um M); pode inserir outra unidades aqui (como pixel, px).
 | unit=

 | Título da linha temporal (aparecerá no topo da imagem gerada).
 | Define a cor de fundo usada no título da imagem gerada.
 | Defina a cor de fundo usada na linha temporal propriamente dita.

 | bar#-from=
 | bar#-to=
 | bar#-left=
 | bar#-colour=
 | bar#-border-width=
 | bar#-border-colour=
 | bar#-text=
 | bar#-nudge-left=
 | bar#-nudge-right=
 | bar#-nudge-up=
 | bar#-nudge-down=

 | Substitua # pelo número que deseja atribuir à legenda (1, 2...) e insira um texto de legenda correspondente. A legenda aparecerá debaixo da linha temporal propriamente dita.
 | Substitua # pelo número correspondente ao texto da legenda com o mesmo número e introduza a cor desejada.

 | Substitua # pelo número que deseja atribuir à nota (1, 2...) e insira um texto desejado. Este aparecerá algures na linha temporal.
 | Substitua # pelo número correspondente à nota e insira um valor para descer um pouco a nota na linha temporal.
 | Substitua # pelo número correspondente à nota e insira um valor para subir um pouco a nota na linha temporal.
 | Substitua # pelo número correspondente à nota e insira um valor para mover um pouco a nota para a esquerda.
 | Substitua # pelo número correspondente à nota e insira um valor para mover um pouco a nota para a direita.
 | note#-remove-arr=
 | Substitua # pelo número correspondente à nota e introduza a cor desejada para o texto da mesma.

 | Texto explicativo da linha temporal (legenda geral).
}}

[editar] Se usar a opção "horizontal"

Se seguir o link para criar uma linha temporal horizontal, aparecerá o seguinte texto na página de edição:

Está pronto a criar a predefinição!
Siga estes simples passos e terá a predefinição pronta num instante!
  • Remova o comentário de modo a deixar Include_timeline/horizontal_instructions
  • Preencha os parâmetros "from" (de) e "to" (a): estes devem ser idênticos em todos os locais onde são usados.
  • Adicione barras a {{timeline row}} em ordem cronológica.
  • Apague os parâmentros desnecessários.
A documentação completa está disponível em Ajuda:Linha temporal.

Tal como acontece na opção "vertical", aparecerá o código da predefinição na janela de edição.

{{Horizontal timeline
|link-to={{subst:PAGENAMEE}<!--Apague tudo entre os <>s-->}
|title=
|title-colour=
|caption=
|margin=

|Row1={{Note row
|from=
|to=
|1-at=
|1-text=
|1-shift=
|1-lift=
}}
|Row2={{Timeline row
|from=
|to=
|colour= 
|border=solid 0.1em black
|1-text= 
|1-from=
|1-to=
|1-colour=
|
}}
|Row3={{Scale row
|from=
|to=
|increment=
}}
}}

{{Horizontal timeline
| A sintaxe final deve ficar "link-to={{subst:PAGENAMEE}}", pelo que se deve substituir o comentário (entre <!-- -->) por uma chaveta }
| Título da linha temporal (aparecerá no topo da imagem gerada).
| Define a cor de fundo usada no título da imagem gerada.
| Texto explicativo da linha temporal (legenda geral).
| Insira um valor para acrescentar uma margem.

|Row1={{Note row
| Início da linha temporal. Este parâmetro é obrigatório.
| Fim da linha temporal. Este parâmetro é obrigatório.
|1-at=
|1-text=
|1-shift=
|1-lift=
}}
|Row2={{Timeline row
| Início da linha temporal. Este parâmetro é obrigatório.
| Fim da linha temporal. Este parâmetro é obrigatório.
|colour= 
|border=solid 0.1em black
|1-text= 
|1-from=
|1-to=
|1-colour=
|
}}
|Row3={{Scale row
| Início da linha temporal. Este parâmetro é obrigatório.
| Fim da linha temporal. Este parâmetro é obrigatório.
| Incremento a ser usado na escala.
}}
}}

[editar] Função da predefinição

Esta predefinição fornece uma forma intuitiva, simples de utilizar e flexível de inserir linhas temporais num módulo. Foi feita de forma a requerer um número mínimo de variáveis e de se inserir numa tabela - embora possa ser adicionada uma margem.

[editar] Porquê usar esta predefinição?

Esta predefinição é uma alternativa a m:EasyTimeline, que usa uma sintaxe <template>. A EasyTimeline apresenta os seguintes pontos fracos:

  • Produção de imagens pixeladas e que aumentam o tempo de carregamento da página.
  • Longo tempo de edição - pode levar mais de meia hora mesmo sabendo o que está a fazer.
  • Código difícil que requer uma sintaxe precisa.
  • Difícil de colocar barras no local exacto desejado.
  • Pequenas mudanças em datas e tamanhos requer modificação em diversos locais.
  • Todos os parâmetros têm de ser especificados - nenhum é automático.
  • Não tem escalável, ou seja, não aumenta com o tamanho do texto.

[editar] Usando a predefinição

[editar] Onde a usar

Enquanto que é possível inserir pequenas linhas temporais num módulo, foi notado que linhas temporais complexas e longas podem interromper o fluxo da página e tornar difícil a edição desta. Assim, pode ser desejável usar {{Include timeline}} numa página separada, automaticamente incluída no texto final.

[editar] Início

Você pode incluir |help=on na predefinição para que esta produza alguns links rápidos.

Ao iniciar, você poderá querer utilizar {{Graphical timeline|help=on}} de modo a gerar uma predefinição pronta a preencher; em alternativa, escreva {{subst:Graphical timeline/blank}} na página de testes, guarde a página e edite o código resultante. Os nomes dos parâmetros são intuitivos (em inglês).

[editar] O que significam os números

Os valores numéricos encontram-se, por omissão em unidades em, isto é, a altura e largura de uma letra M maiúscula.

A excepção encontra-se nps parâmetros left e right de uma barra, que usam coordenadas fraccionais. Isto é, o código |bar1-left=0 |bar1-right=0.5 |bar2-left=0.666 |bar3-left=0.5 |bar3-right=0.666 produz bar1, que cobre a parte esquerda da área, bar2 que cobre a parte direita e bar3 que cobre o espaço ao meio. Por razões operacionais, as unidades de altura são sempre utilizadas para gerar espessuras das bordas.

[editar] Bordas das barras

As bordas aparecem apenas no topo e fundo de uma dada barra. Infelizmente, tal não pode ser modificado - para ter uma borda apenas num, deve ser criada uma barra em separado para cobrir a zona pretendida.

O estilo da borda pode seguir os standards CSS solid, dotted, dashed, double, groove, ridge, inset ou outset. A largura encontra-se nas mesma unidades que a altura e, se não for especificada, 0,1 a 0,2 é um valor adequado para obter uma linha fina.

[editar] Linhas em branco

Deixar um parâmetro em branco NÃO é o mesmo que não o especificar - prevalecerá sobre o valor or omissão da predefinição. Certifique-se que retira as linhas que não deseja especificar.

[editar] Considerações

[editar] Navegadores web

Infelizmente, diferentes navegadores possuem diversas formas de lidar com linhas de texto que extravazam a sua caixa de edição - alguns expandem a caixa, enquanto outros envolvem o texto. Tal significa que é útil verificar a linha temporal em pelo menos dois navegadores diferentes, como o Internet Explorer e o Firefox, especialmente se fizer uma linha particularmente complexa.

[editar] Cores

Se você definir cores usando valores html (com o aspecto #e0b539). tenha em consideração que alguns monitores mais antigos e diversos projectores não conseguem mostrar algumas cores. Ao manter-se cores que sejam múltiplos de 33 - por exemplo, #ff99cc ou #03C - assegurará compatibilidade máxima. Veja uma lista de cores na Wikipédia para se inspirar!

[editar] Capacidade

Se você verificar que barras, notas ou legendas com numeração alta não aparecem, poderá ser porque a predefinição não foi programada para lidar com tão alta numeração. Existem instruções na própria predefinição de como adicionar mais barras, etc (é uma simples acção de copiar e colar). Se ainda assim não conseguir o resultado que pretende, contacte o usuário Verisimilus na Wikipédia anglófona.

[editar] Facilidade de edição

Se criar uma linha temporal numa subpágina, use o parâmetro | link-to= . Especifique o nome da página (por exemplo Predefinição:A minha linha temporal); aparecem então links para "editar" e para o "histórico" da página.

[editar] Bugs conhecidos

  • Aparece um pipe ( | ) misterioso no canto superior esquerdo, que pode ser coberto com um div opaco. Agradece-se ajuda na erradicação deste bug!

[editar] Um exemplo

O código mostrado à esquerda produz o resultado à direita. Este exemplo mostra algumas das limitações da predefinição.

Example Timeline
|{{for/aux5 
 |v@=
 |c=scalemarkers
 |pv=loop
 |prefix=
 |postfix=
 |s=
 |pc1=from=-550
 |pc2=to=-500
 |pc3=height=250
 |pc4=unit=px
 |pc5=increment=10|

1=0|2=1|3=2|4=3|5=4|6=5|7=6|8=7|9=8|10=9|11=10|12=11|13=12|14=13|15=14|16=15|17=16|18=17|19=18|20=19|21=20|22=21|23=22|24=23|25=24|26=25|27=26|28=27|29=28|30=29|31=30

|32=@|33=@|34=@|35=@|36=@|37=@|38=@|39=@|40=@|41=@|42=@|43=@|44=@|45=@|46=@|47=@|48=@|49=@|50=@|51=@|52=@|53=@|54=@|55=@|56=@|57=@|58=@|59=@|60=@|61=@|62=@|63=@|64=@|65=@|66=@|67=@|68=@|69=@|70=@|71=@|72=@|73=@|74=@|75=@|76=@|77=@|78=@|79=@|80=@|81=@|82=@|83=@|84=@|85=@|86=@|87=@|88=@|89=@|90=@|91=@|92=@|93=@|94=@|95=@|96=@|97=@|98=@|99=@|100=@|101=@|102=@|103=@|104=@|105=@|106=@|107=@|108=@|109=@|110=@|111=@|112=@|113=@|114=@|115=@|116=@|117=@|118=@|119=@|120=@|121=@|122=@|123=@|124=@|125=@|126=@|127=@|128=@}}
{{Draw Bar|text= |nudgedown=0|nudgeright=0|colour=#6ca|border=|border-colour=|border-style=|left=0|right=0.1|from=-542|to=-500|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text= |nudgedown=0|nudgeright=0|colour=#ff9|border=|border-colour=|border-style=|left=0|right=0.2|from=-550|to=-542|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text= |nudgedown=0|nudgeright=0|colour=#e0aacc|border=|border-colour=|border-style=|left=0.1|right=0.2|from=-550|to=-534|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text=Ediacaran|nudgedown=0|nudgeright=0|colour=#cc9999|border=1|border-colour=|border-style=|left=0.2|right=1|from=-550|to=-540|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text=Nemakit-Daldynian|nudgedown=0|nudgeright=0|colour=#99cc99|border=0.1|border-colour=|border-style=|left=0.2|right=1|from=-542|to=-534|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text=Tommotian|nudgedown=0|nudgeright=0|colour=#99cc99|border=0.1|border-colour=|border-style=|left=0.1|right=1|from=-534|to=-530|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text= |nudgedown=0|nudgeright=0|colour=black|border=|border-colour=|border-style=|left=0.2|right=1|from=-530.1|to=-529.9|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text=Atdabanian|nudgedown=0|nudgeright=0|colour=#99cc99|border=|border-colour=|border-style=|left=0.1|right=0.95|from=-530|to=-524|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text=Botomian|nudgedown=0|nudgeright=0|colour=#99cc99|border=0.1|border-colour=|border-style=|left=0.1|right=1|from=-524|to=-518|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text=Toyonian|nudgedown=0|nudgeright=0|colour=#99cc99|border=0.1|border-colour=|border-style=|left=0.1|right=1|from=-518|to=-513|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}{{Draw Bar|text= |nudgedown=0|nudgeright=0|colour=red|border=|border-colour=|border-style=|left=0.95|right=1.05|from=-530|to=-520|tl-from=-550|tl-to=-500|tl-height=250|tl-hu=px|tl-width=10|tl-wu=em}}
←
Base of the Cambrian
An approximate time-scale of events
at the base of the Cambrian Period.
Axis scale is in millions of years ago.
{{Graphical timeline

|title=Example Timeline
|align=right

|plot-colour=#bbeebb

|from=-550
|to=-500
|scale-increment=10

|width=10
|height=250
|height-unit=px

|legend1=[[Phanerozoic]]

|bar1-from=-542
|bar1-left=0
|bar1-right=0.1

|legend2=[[Precambrian]]

|bar2-to=-542
|bar2-left=0
|bar2-right=0.2


|legend3=[[Infracambrian]]
|legend3-colour=#e0aacc

|bar3-to=-534
|bar3-left=0.1
|bar3-right=0.2
|bar3-colour=#e0aacc

|<!-- If this was bar 4 it would be overlapped by the Botomian bar -->
|bar14-from=-530
|bar14-to=-520
|bar14-left=0.95
|bar14-right=1.05
|bar14-colour=red
|legend14=Cambrian explosion

|<!--Epochs & stages-->
|bar5-text=[[Ediacaran]]
|bar5-to=-540
|bar5-left=0.2
|bar5-border-width=1
|bar5-border-colour= #996666
|bar5-colour=#cc9999

|bar6-text=[[Nemakit-Daldynian]]
|bar6-from=-542
|bar6-to=-534
|bar6-left=0.2
|bar6-border-width=0.1
|bar6-colour=#99cc99

|bar7-text=[[Tommotian]]
|bar7-from=-534
|bar7-to=-530
|bar7-left=0.1
|bar7-colour=#99cc99
|bar7-border-width=0.1

|bar8-from=-530.1
|bar8-to=-529.9
|bar8-left=0.2
|bar8-colour=black

|bar9-text=[[Atdabanian]]
|bar9-from=-530
|bar9-to=-524
|bar9-left=0.1
|bar9-right=0.95
|bar9-colour=#99cc99

|bar10-text=[[Botomian]]
|bar10-from=-524
|bar10-to=-518
|bar10-left=0.1
|bar10-colour=#99cc99
|bar10-border-width=0.1

|bar11-text=[[Toyonian]]
|bar11-from=-518
|bar11-to=-513
|bar11-left=0.1
|bar11-border-width=0.1
|bar11-colour=#99cc99


|note1=Base of the Cambrian
|note1-at=-542
|note1-colour=green

|note2=[[Middle Cambrian]]
|note2-nudge-left=8.5
|note2-nudge-down=0
|note2-at=-507
|note2-remove-arrow=yes

|caption=An approximate time-scale of events<br>at the base of the [[Cambrian]] [[Period (geology){{!}}Period]].
<br>Axis scale is in millions of years ago.
}}

[editar] Notas

  • {{!}} tem de ser usado sempre que desejar que apareça um | (por exemplo na legenda).
  • Se não especificar quando uma barra deve iniciar ou acabar, ela continuará até ao limite da caixa.
  • O texto não deve ser demasiado longo na barra.
  • A forma como o texto excessivo é tratado nas duas bordas difere em diferentes navegadores web - sai da caixa no Firefox mas é envolvido no Internet Explorer. Tente adicionar manualmente novas linhas quando tal é necessário em vez de confiar no que os navegadores conseguem fazer. Em alternativa, coloque uma nota sobre a barra - veja o parâmetro note2, que está colocado na esquerda sobre o fundo da caixa da linha temporal.

[editar] Ligações externas


Esta página é somente um esboço.
Ampliando-a você ajudará a melhorar o Wikilivros.
Obtido em "http://pt.wikibooks.org/wiki/Ajuda:Linha_temporal"
Ferramentas pessoais