Nesta página poderás encontrar várias receitas rápidas que poderás utilizar nas tuas histórias para serem mais imersivas e interativa, como, por exemplo, mudar as cores da história, abrir portas e janelas, apanhar objetos, fazer as personagens lembrarem-se alguma coisa, etc.
As receitas são sempre acompanhadas de exemplos concretos e do código necessário, portanto, nem precisas de compreender como funciona. Na maior parte dos casos, só tens de copiar e colar no sítio correto.
Lembra-te de que estas receitas são única e exclusivamente para o formato de história Harlowe 2.1.0.
Caso aqui não consigas encontrar o que precisas, podes ainda consultar o livro de receitas oficial do Twine, em língua inglesa.
Índice
A – Interatividade básica
B – Interatividade avançada
- Vídeos instrucionais
- Apanhar objetos
- Usar objetos para abrir portas, janelas, etc.
- Mostrar uma outra versão da passagem a quem já a visitou
- Regressar à passagem anterior
- Gravar/Restaurar o progresso do jogador
C – Formatar o texto numa passagem
- Fazer itálico, negrito, sublinhado, etc.
- Alinhar o texto (à esquerda, à direita, centrado, justificado, etc.)
- Criar efeitos de texto
- Mudar a cor do texto
- Mudar o tipo de letra na passagem
- Marcar tópicos graficamente
- Lidar com o espaço branco
D – Personalizar o aspeto visual global da história (através da folha de estilos da história)
- Mudar a cor do fundo
- Mudar o tipo de letra da história
- Usar uma fonte do serviço Google Fonts
- Mudar a cor do tipo de letra
- Mudar o tamanho do tipo de letra
- Mudar o espaçamento entre as linhas
- Adicionar imagens à história
- Adicionar música ou efeitos sonoros à história
- Retirar a seta para anular os movimentos
E – Personalização avançada
A – Interatividade básica
1. Criar/ligar passagens
Para adicionar interatividade ao texto, deve pôr-se a palavra ou a sequência de palavras entre colchetes duplos [[……]]. Isto irá criar uma nova passagem com o nome do texto entre os colchetes.
O caminho entrava na [[floresta]].
Quando o texto que aparece na história e o nome da passagem são diferentes, deve separar-se o texto do nome da passagem com uma destas duas formas:
COM UM BARRA VERTICAL
[[texto que aparece na história|nome da passagem]].
O caminho entrava na [[floresta|Floresta negra]].
COM UM HÍFEN E O SINAL DE MAIOR
[[texto que aparece na história->nome da passagem]].
O caminho entrava na [[floresta->Floresta negra]].
[voltar ao índice]
2. Interatividade dentro da mesma passagem
Para criarmos interatividade dentro da mesma passagem, podemos usar o comando (click: ), que tem a seguinte sintaxe:
(click: "palavra ou palavras da passagem")[texto que aparece depois de se clicar na palavra.]
O comando (click: ) transforma as palavras escolhidas em ligações que podem ser clicadas. O texto que surge depois de se clicar na ligação aparece no sítio onde se puser o comando (click: )
Com o seguinte texto no editor:
No meio do prado, havia uma formiga cinzenta. (click: "formiga cinzenta")[Baixas-te e ficas a olhar para a formiga.]
produz-se o seguinte resultado:
Com o seguinte texto no editor:
No meio do prado, havia uma pedra vermelha. (click: "pedra vermelha")[Baixas-te e apanhas a pedra.]
produz-se o seguinte resultado:
[voltar ao índice]
B – Interatividade avançada
As seguintes “receitas” poderão ajudar-vos a tornarem as vossas histórias mais ricas e cativantes, com um mundo mais imersivo e convincente. A acompanhar as receitas, há um conjunto de vídeos que vos mostra passo a passo como implementar essas formas de interatividade mais avançada e também por que razões vale a pena implementá-las. Mas recordem-se que é perfeitamente possível construir uma boa história apenas usando interatividade básica.
Deixo-vos também aqui a história completa que se vai construindo nos vídeos. Podem jogá–la ou descarregar o código-fonte. Depois importem-na para o Twine para poderem ver como é que as coisas funcionam por dentro. É uma ótima forma de aprender, ver como é que outros construíram uma coisa.
| Jogar | Descarregar o código-fonte |
|---|
1. Vídeos instrucionais.
Nestes seguintes vídeos, utilizam-se todas as técnicas avançadas. Aconselha-se que sejam vistos por ordem.
[voltar ao índice]
2. Apanhar objetos
Apanhar objetos é um processo de duas fases:
- Registar na memória do computador que o o jogador apanhou o objeto.
- Alterar a descrição do mundo para refletir o novo estado da realidade (sem o objeto).
Criem uma nova passagem, desligada da história, com um nome qualquer (eu costumo usar “Arranque”) e deem-lhe a etiqueta startup. A etiqueta é fundamental, pois informa o Twine que sempre que o jogo começar deve ler primeiro a informação desta passagem.
Inventem um nome para a variável que querem associar com o objeto. Por exemplo, se querem que o jogador apanhe uma chave, criem a variável $jogadorTemChaveDaJanela.
No Twine, todos os nomes das variáveis devem começar com o símbolo do dólar $Definam, na passagem marcada com a etiqueta startup, o valor inicial dessa variável, desta forma:
(set: $jogadorTemChaveDaJanela to false) Ou seja, estão a dizer que no começo do jogo, é falso que o jogador tenha a chave da porta.
Depois, na passagem onde o jogador apanha o objeto em questão, escrevam algures:
(set: $jogadorTemChaveDaJanela to true)A primeira fase está resolvida. O computador já sabe que o jogador apanhou o objeto. Vamos, então, à 2.ª fase, que vai exigir uma estrutura condicional simples.
Na passagem onde o jogador apanha o objeto, devem criar uma nova descrição que reflita a nova realidade, como este exemplo:
(if: $jogadorTemChaveDaJanela is true) [Estás numa sala grande, completamente vazia.] (else:) [Estás numa sala grande. No chão há uma [[chave pequena]].]Vou parafrasear o código para vos ajudar a compreender o que lá está:
Se é verdade que o jogador tem a chave da janela, então o texto desta passagem vai ser “Estás numa sala grande, completamente vazia”. Em todos os outros casos (else), por exemplo se o jogador não tiver a chave, o texto da passagem vai ser “Estás numa sala grande. No chão há uma [[chave pequena]].]”
Se quiserem usar esta receita, basta copiarem o seguinte código e introduzir o vosso texto:
(if: $jogadorTemChaveDaJanela is true) [texto que aparece se for verdade.] \ \(else:) [texto que aparece se for falso.]Quando temos uma estrutura condicional com (if: ) e (else: ) apenas uma delas será apresentada ao jogador, nunca as duas.
Vejam o vídeo n.º 5 para mais informações e formas alternativas de tratar desta situação).
E assunto resolvido!
[voltar ao índice]
3. Usar objetos para abrir portas, janelas, etc.
Usar objetos para abrir portas, janelas, etc. é em tudo semelhante à segunda fase do processo de apanhar objetos. Temos de usar a variável que indica a posse do objeto para criar duas versões da mesma passagem: uma para quando o jogador não tem o objeto e outra para quando o tiver.
Usem o seguinte exemplo, na passagem que está fechada:
(if: $jogadorTemChaveDaJanela is true)[Abres a janela com a chave que encontraste no chão. A janela está agora aberta e podes sair para o jardim.] (else:)[A janela está fechada à chave. Podes regressar ao [[quarto|Quarto]] ]
E mais um assunto resolvido. Para mais informações, vejam o vídeo n.º 6.
[voltar ao índice]
4. Mostrar uma outra versão da passagem a quem já a visitou
Por vezes, podemos querer apresentar uma certa descrição apenas durante a 1.ª visita do jogador a uma passagem, por exemplo, quando o jogador descobre que uma porta, afinal, não estava fechada. Estas “descobertas” só devem ser indicadas uma vez.
Podemos controlar o aparecimento destas informações com uma variável do Twine que se chama (history: ), que regista o nome de todas as passagens que o jogador já visitou durante uma sessão de jogo (atenção que a variável não inclui a passagem onde o jogador se encontra no momento. Esta só passará para o histórico, quando o jogador sair de lá).
Com a ajuda desta variável e de uma estrutura condicional simples, podemos criar duas versões alternativas para uma passagem. Vejam o seguinte exemplo:
(if: (history: ) contains "Biblioteca")[Entras na biblioteca. O teu cão dorme calmamente no meio da divisão.] (else:)[Entras na biblioteca e descobres o teu cão escondido atrás de uma estante]
Uma vez mais o que o código diz é:
Se o histórico do jogo mostrar que o jogador já esteve nesta passagem, então o texto a apresentar será: “Entras na biblioteca. O teu cão dorme calmamente no meio da divisão.” Em todos os outros casos (else:), por exemplo, se o jogador nunca entrou nesta passagem, o texto a apresentar será: “Entras na biblioteca e descobres o teu cão escondido atrás de uma estante”.
Se quiserem usar esta receita, basta copiarem o seguinte código e introduzir o vosso texto:
(if: (history: ) contains "Biblioteca") [texto que aparece só a partir da 2.ª vez que se visita a passagem] \ \(else: ) [texto que aparece só na primeira visita à passagem]
Para mais informações vejam o vídeo n.º 8.
[voltar ao índice]
5. Regressar à passagem anterior
Por vezes, podemos ter muitas passagens de onde o jogador pode apenas regressar. Normalmente são passagens que descrevem objetos ou estruturas ou outros elementos do mundo. Nestes casos, para poupar algum tempo e o trabalho de estar sempre a escrever o nome da passagem para onde o jogador deve regresssar, podemos usar uma frase que faz o jogador regressar à passagem de onde veio, ou seja, à última passagem da variável (history: ). E nem precisamos de saber qual é, porque o computador sabe. Usa-se assim:
(link-goto: "Voltar", (history:)'s last)
E isto é equivalente a escrever frases como:
[[voltar|Quarto azul]] [[voltar|Biblioteca]] [[voltar|Floresta]] [voltar|Barco]] ...
Para mais informações, vejam o vídeo n.º 9.
[voltar ao índice]
6. Gravar/Restaurar o progresso do jogador
Para o jogador não ter de recomeçar o jogo sempre do início, podes gravar o seu progresso em certos pontos e depois deixá-lo recomeçar a partir de um desses pontos. Para isso, basta pores na passagem onde o jogador deve recomeçar, a seguinte receita:
(save-game:"jogo A")
* o título “jogo A” pode ser alterado para qualquer outro: “cap. 1”, “progresso”, etc. Podes gravar quantas vezes quiseres, e podes ter vários jogos gravados ao mesmo tempo, desde que cada um tenha um título diferente. Se usas o mesmo título, o programa grava por cima do anterior, o que significa que só o último fica disponível.
Com o jogo gravado, o jogador já pode recomeçar a partir desse ponto. Para isso, só tens de ter uma passagem, que funcione como um menu, onde o jogador possa escolher entre começar o jogo de novo ou continuar do ponto onde estava. Para isso, cria a passagem inicial “menu” (se ainda não a tiveres) e inclui a seguinte receita:
(if: (saved-games:) contains "jogo A")[(link: "Carregar um jogo gravado")[(load-game:"jogo A")]
* atenção que o título que se põe no interior da estrutura condicional, “jogo A”, neste caso, tem de ser o título que se usou quando se gravou. O texto “Carregar um jogo gravado” pode ser alterado para qualquer outra fórmula.
[voltar ao índice]
C – Formatar o texto numa passagem
Estas formatações são aplicadas dentro das passagens para alterar uma palavra ou apenas parte do texto das passagens.
1. Fazer itálico, negrito, sublinhado, etc.
| Estilo | Marcação no Twine | Resultado |
|---|---|---|
| Itálico | //texto// | texto |
| Negrito | **texto** | texto |
| Riscado | ~~texto~~ | |
| Negrito + itálico | **//texto//** | texto |
[voltar ao índice]
2. Alinhar o texto (à esquerda, direita, centrado, justificado, etc.)
Para alinhar o texto, introduz-se um dos símbolos ==>, =><=, , <== e escreve-se por baixo o texto que se quer alinhado dessa forma:
==> Assim alinha-se o texto à direita =><= Assim centra-se o texto Assim justifica-se o texto <== Assim alinha-se o texto à esquerda
[voltar ao índice]
3. Criar efeitos de texto
Podem-se criar os seguintes efeitos de texto, associa-se o seguinte comando a uma parte de texto da passagem:
(text-style: "blink")[Estas palavras vão aparecer a piscar.]
Há vários outros efeitos:
— saltar (text-style: "rumble"). — aparecer e desaparecer (text-style: "fade-in-out"). — tremer (text-style: "shudder"). — as palavras podem aparecer tremidas (text-style: "blur" ou text-style: "blurrier"). — sujas (text-style: "smear"). — realçadas (text-style: "mark"). — como vistas num espelho (text-style: "mirror"). — ou de pernas para o ar (text-style: "upside-down).
[voltar ao índice]
4. Mudar a cor do texto
Para mudar a cor de uma palavra ou de uma parte do texto da passagem, associa-se o comando abaixo com a palavra ou o texto. Usem esta página para encontrar a cor certa:
(text-color: "#CC0000")[Estas palavras vão aparecer a vermelho.] Estas já vão estar na cor normal do texto das passagens.
[voltar ao índice]
5. Mudar o tipo de letra na passagem
Para alterar o tipo de letra de uma palavra ou de uma parte do texto da passagem, associa-se o comando abaixo com a palavra ou o texto:
Este fragmento está com a fonte habitual do Twine. (font: "courier new")[Mas este já está com o tipo de letra 'courier new'.]
[voltar ao índice]
6. Marcar tópicos graficamente
Podem-se facilmente criar listas de tópicos, iniciadas com um ponto e indentadas, utilizando o asterisco * e um espaço. Se escreverem, isto no editor do Twine:
* aqui está um tópico
O resultado será:
- aqui está um tópico
Se quisermos criar subníveis de tópicos, ainda mais indentados, basta aumentar o número de asteriscos. Se escreverem assim no Twine:
* tópico nível 1 ** tópico nível 2 ** tópico nível 2 *** tópico nível 3 ** tópico nível 2 * tópico nível 1
O resultado será:
- tópico nível 1
- tópico nível 2
- tópico nível 2
- tópico nível 3
- tópico nível 2
- tópico nível 1
[voltar ao índice]
7. Lidar com o espaço branco
Às vezes, no editor de passagens, temos de escrever frases muito longa, especialmente quando misturamos o texto da história com comandos de programação. O resultado desta frase pode não ser muito legível, e seria bom poder separar a informação para tornar a passagem mais clara. Mas criar novas linhas, pode estragar a apresentação do texto da história.
Podemos, então, usar a barra \ para criar linhas no editor da passagem, mas que não vão ser interpretadas como linhas na história.
Se colocarmos a barra \ no final da linha ou logo no início da linha seguinte, impedimos a quebra de linha, e o Twine lê tudo como se se tratasse de uma linha só. Parece mais complicado do que é.
Tentem o seguinte exemplo:
Esta linha\ mais esta linha \e ainda mais esta linha, são, na realidade, só uma linha.
Outra forma de poder espaçar o texto no editor de passagens, sem afetar a apresentação da história no modo de jogo é usar as chavetas { }.
Tudo o que estiver dentro das chavetas ficará reduzido a uma linha com um espaço entre palavras.
Tentem este exemplo:
{
Esta frase
irá aparecer
apenas
numa linha e com espaços
individuais entre palavras.
}
[voltar ao índice]
D – Personalizar o aspeto visual global da história (através da folha de estilos da história)
Vamos então começar a “falar” CSS. Atenção! As seguintes alterações terão de ser introduzidas na “folha de estilos da história”, acessível através da setinha à direita do título da vossa história. Todas estas alterações são globais, ou seja, irão afetar todas as passagens da vossa história. Para alterações locais, só de uma passagem, vejam a secção B.
1. Mudar a cor do fundo
Acrescentar o seguinte código à folha de estilos:
tw-story {background-color: #ffffff}
A cor é indicada pelo código hexadecimal: #ffffff, que significa branco. O site da W3Schools pode ajudar-vos a encontrar a cor certa, e depois mudem o valor do #ffffff para a vossa cor.
[voltar ao índice]
2. Mudar o tipo de letra
Por defeito, o Twine usa a fonte Georgia, tamanho 14,5, de cor branca, sobre um fundo preto. Para mudarmos o tipo de letra, introduzimos o seguinte código na folha de estilos:
tw-passage {font-family: arial;}
Não gostam de “arial”? Então experimentem uma destas:
Book Antiqua, Times New Roman, Arial, Helvetica, Impact, Tahoma, Verdana, Courier New.
[voltar ao índice]
3. Usar uma fonte do serviço Google Fonts
Acham as fontes acima um pouco aborrecidas? Então usem uma do serviço Google Fonts. Só têm de fazer o seguinte:
- Vão até à página do serviço Google Fonts
- Vejam as fontes disponíveis. Quando gostarem duma, carreguem no botão vermelho com um +.
- Façam isso para todas as fontes que quiserem experimentar no Twine (comecem com 1 ou duas fontes para verem como funciona).
- Quando tiverem escolhido as fontes todas, carreguem na barra que está em baixo com o texto “x famílias escolhidas” (pode estar em outra língua).
- Depois no menu “Embed Font”, escolham @IMPORT.
- Copiem a informação toda que está entre as etiquetas style, que começa com @import
@import url('https://fonts.googleapis.com/css?family=Kumar+One');
- Ainda no Google Fonts, apontem o nome da fonte, que está debaixo de “Specify in CSS”. O nome está entre aspas simples.
font-family: 'Barrio', cursive; font-family: 'Kumar One', cursive;
- Voltem à folha de estilos da vossa história no Twine.
- Colem no topo da folha de estilos da vossa história, o endereço que copiaram do Google Fonts (o que começa por @import…)
- E agora basta pôr o nome da fonte da Google no sítio correto.
tw-passage { font-family: 'Kumar One'; }
[voltar ao índice]
4. Mudar a cor do tipo de letra
Mudar a cor do tipo de letra é igualmente simples, só que, esperem, primeiro é preciso escolher que cor é que querem mudar. É que o texto, no Twine, pode ter até cinco cores diferentes. Ora vejam lá:
- A cor do texto sem ligação.
- A cor do texto com uma ligação.
- A cor do texto com uma ligação que já foi visitada.
- A cor do texto com uma ligação quando o rato lhe passa por cima.
- A cor do texto com uma ligação que já foi visitada quando o rato lhe passa por cima.
As cores mais visíveis serão sempre as 1 e a 2. Para alterarem estas cores, basta usar este código na folha de estilos (as linhas estão organizadas segundo o exemplo acima):
tw-passage {color: #000000;}
tw-link {color: black; }
tw-link.visited {color: black;}
tw-link:hover {color: #cc8800; }
tw-link.visited:hover {color: #cc8800;}
Como podem ver, a cor pode ser identificada ou pelo nome em inglês ou pelo endereço hexadecimal. Se precisarem de ajuda para escolher a cor certa, este endereço pode ajudar.
Eu, pessoalmente, não gosto que as cores (3) e (5), e (2) e (4) sejam diferentes, porque não me interessa marcar que uma passagem já foi visitada. Mas isto é uma questão de gosto, obviamente.
[voltar ao índice]
5. Mudar o tamanho do tipo de letra
Para, por exemplo, aumentar em 50% o tamanho do tipo de letra, acrescentem à folha de estilos:
tw-passage { font-size: 150%; }
* podem alterar o valor da percentagem para: 25%, 50%, 200%, etc.
[voltar ao índice]
6. Mudar o espaçamento entre as linhas
Para, por exemplo, aumentar em 50% o espaçamento entre linhas, acrescentem à folha de estilos:
tw-passage { line-height: 150%; }
* podem alterar o valor da percentagem (25%, 50%, 200%, etc.)
[voltar ao índice]
7. Adicionar imagens à história
Preparem-se para uma receita um bocadinho mais longa, mas acreditem que vale bem a pena. Vamos a isso.
O formato de história “Harlowe” permite apresentar imagens através de hiperligações, mas as imagens têm de ser ficheiros separados. Não é, por exemplo, como no Microsoft Word em que se podem pôr imagens no documento, e o ficheiro resultante é sempre um ficheiro DOC (com as imagens lá dentro). No Twine, têm de ter o vosso ficheiro da história (HTML) e as imagens (JPEG, PNG, GIF, …) separadamente.
E isto significa também que as imagens que querem usar devem ter o tamanho certo. Por exemplo, por defeito, o texto do Twine aparece numa área do ecrã com 960 pixéis. Portanto, se quiserem que uma imagem ocupe todo o comprimento do ecrã, certifiquem-se que ela tem 960 px. Se quiserem que ela ocupe metade ou 1/4 do ecrã, etc, então é só fazerem as contas 🙂
E como se faz isto? Depende da versão do Twine que estiverem a usar: a versão online ou a versão instalada no computador.
A – Versão online do Twine
Com a versão online do Twine, basta usarem o código abaixo e pô-lo na passagem onde a imagem deve aparecer (lembrem-se de mudar o endereço abaixo, pelo endereço da imagem que querem usar):
<img src="ponham o endereço http da vossa imagem aqui" alt="montanhas"/>Experimentem pôr o exemplo aqui em baixo numa passagem da vossa história no Twine. Deve aparecer-vos uma bela obra de arte quando experimentam jogar o jogo.
<img src="https://qualalbatroz.pt/wp-content/uploads/images/montanhas.png" alt="montanhas"/>Mas podemos fazer isto apenas com as imagens que estiverem online. Mas e se as imagens estiverem no nosso computador? Pois, neste caso, com a versão online do Twine, é precisa arranjar uma forma de as pôr na Internet, no vosso blogue ou no vosso site. Infelizmente, programas como o Google Drive ou o Dropbox já não permitem isso.
B – Versão instalada do Twine
Se estiverem a usar a versão instalada do Twine (descarregaram e instalaram o programa), devem fazer assim:
- ponham todas as imagens que querem usar dentro duma nova pasta no vosso computador. Deem um nome simples à pasta, por exemplo, “imgs”. Lembrem-se do nome da pasta, porque terão de o escrever exatamente da mesma forma no Twine;
- certifiquem-se de que as imagens têm o tamanho certo (máximo 960 px de comprimento);
- No Twine, acrescentem o seguinte código à passagem onde querem que a imagem apareça:
<img src="nome_da_pasta/nome_da_imagem.jpg" alt="nome da imagem"/>Imaginem que queriam usar uma imagem chamada “areia.jpg” e que estava na pasta “imgs”. O código correto para apresentar essa imagem seria:
<img src="imgs/areia.jpg" alt="areia"/>NOTA: É possível que as imagens não apareçam ao testarem o jogo dentro do Twine, mas experimentem publicar o ficheiro .html do jogo. Depois ponham a pasta das imagens na mesma pasta onde está o ficheiro .html da história. E agora se abrirem o ficheiro da história com o Chrome, elas devem aparecer.
[voltar ao índice]
8. Adicionar música ou efeitos sonoros à história
À semelhança das imagens, adicionar som ao Twine exige um pouco mais de trabalho.
Uma das formas é usar o sistema desenvolvido por Chapel, chamado Harlowe Audio Lib. É um sistema muito completo e faz tudo o que se possa querer: desde música de fundo para uma história, efeitos sonoros individuais, controle de volume, etc. É uma verdadeira maravilha. E está muito bem documentado em inglês.
Se necessitarem apenas de um breve efeito sonoro ou de um trecho musical numa só passagem, a receita abaixo deve ser suficiente.
Como na receita das imagens, os ficheiros de som também têm de ser adicionados através de ligações e têm ou (1) de estar algures na Internet, ou (2) numa pasta no vosso computador.
Depois de terem os ficheiros escolhidos e preparados, vão à passagem que querem que tenha a música/o efeito sonoro e ponham lá este código:
<audio src="endereço_do_ficheiro_áudio" autoplay>Portanto, se o ficheiro estiver algures na Internet, ponham:
<audio src="http://www.camoes.pl/FI/quatro.mp3" autoplay>(o exemplo acima deve funcionar nas vossas histórias, se quiserem experimentar)
Se o ficheiro estiver no vosso computador ponham o seguinte código na passagem:
<audio src="audio/musica.mp3" autoplay><audio src="audio/musica.mp3" autoplay>
(isto assume que o ficheiro está dentro de uma pasta chamada audio e se chama musica.mp3)
E é só isto. A música deve começar a tocar automaticamente assim que entrarem na passagem e vai parar assim que saírem. Mais uma vez, se não funcionar dentro do Twine, experimentem publicar a vossa história e abrir o ficheiro .html no vosso navegador.
[voltar ao índice]
9. Retirar a seta para anular os movimentos
Acrescentem o seguinte código à folha de estilos da história:
tw-sidebar { display: none; }[voltar ao índice]
E – Personalização avançada
1. Criar diferentes aspetos visuais na mesma história
Com o capítulo C e D, já viram como fazer alterações ao aspeto visual numa só passagem ou em todas as passagens da história. Mas e então se quiserem ter dois (ou mais) estilos diferentes para várias passagens na mesma história? Por exemplo, fundo branco para as partes da história que são de dia, e fundo preto para as partes de noite? Pois bem, podem fazê-lo, usando o campo das “etiquetas” das passagens:
Vamos então a isso:+
- Definam uma etiqueta para um conjunto de passagens. Por exemplo, noite para todas as passagens que aconteçam à noite e às quais quero dar um fundo preto e letras brancas. E dia para todas as passagens que sejam de dia e que irão ter fundo branco e letras pretas.
- E agora, no ecrã da folha de estilos, ponham:
[tags="noite"] { background: black; color: white; }
[tags="dia"] { background: white; color: black; }
O comando “background” muda a cor do fundo, e o comando “color” a cor do tipo de letra.
Veem o comando [tags=”noite”]? É isso que faz a comunicação entre a passagem e este código. Portanto, o nome da etiqueta na passagem e na folha de estilos têm de ser exatamente o mesmo.
Para as alterações acontecerem, não se esqueçam de que as passagens têm de estar marcadas com a etiqueta adequada.
E é tudo.
Fiagem 