Ajuda:Linha temporal

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

A forma mais simples

editar

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

  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

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

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

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

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

Onde a usar

editar

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.

Início

editar

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

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

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

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

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!

Capacidade

editar

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

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

Um exemplo

editar

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


 

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