Saltar para o conteúdo

Ajuda:Linha temporal

Origem: Wikilivros, livros abertos por um mundo aberto.
Este módulo precisa ser revisado por alguém que conheça o assunto (discuta).

É 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.

Instruções de uso da linha temporal

[editar | editar código-fonte]

A forma mais simples

[editar | editar código-fonte]

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".

Se usar a opção "vertical"

[editar | editar código-fonte]

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).
}}

Se usar a opção "horizontal"

[editar | editar código-fonte]

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.
}}
}}

Função da predefinição

[editar | editar código-fonte]

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.

Porquê usar esta predefinição?

[editar | editar código-fonte]

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.

Usando a predefinição

[editar | editar código-fonte]

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.

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).

O que significam os números

[editar | editar código-fonte]

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.

Bordas das barras

[editar | editar código-fonte]

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.

Linhas em branco

[editar | editar código-fonte]

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.

Considerações

[editar | editar código-fonte]
[editar | editar código-fonte]

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.

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!

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.

Facilidade de edição

[editar | editar código-fonte]

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.

Bugs conhecidos

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

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

Example Timeline
Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido

0Erro de expressão: Carácter de pontuação "{" não reconhecidoErro de expressão: Carácter de pontuação "{" não reconhecido
{{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.
}}
  • {{!}} 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.

Ligações externas

[editar | editar código-fonte]


Esta página é um esboço sobre o Wikilivros. Ampliando-a você ajudará a melhorar o Wikilivros.