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:

• através de uma imagem feita num editor externo, que pode ser carregada no Wikilivros ou no Commons;
• através da inserção de código específico que gera a imagem, usando a extensão EasyTimeline;
• através da inserção de código usando a predefinição {{graphical timeline}}.

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

A forma mais simples

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"

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"

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

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?

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

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.

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

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.

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.

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.

Considerações

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.

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!

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.

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.

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!

Um exemplo

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

Example Timeline

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

{{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

Middle Cambrian

Phanerozoic

Precambrian

Infracambrian

Cambrian explosion

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

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.

Ligações externas

• Contacto para sugestões/correcções no desenvolvimento desta predefinição

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