FANDOM


90210-infobox-light

Uma infobox de amostra

As infoboxes são como fichas técnicas, ou barras laterais em artigos de revista, projetadas para fornecer um resumo do tópico da página. Elas introduzem pontos importantes de modo organizado e de fácil leitura. As infoboxes são geralmente criadas usando predefinições, para manter toda a comunidade uniforme.

O Fandom desenvolveu uma nova maneira de codificar as infoboxesa fim de que sejam bem exibidas em vários dispositivos, detalhados abaixo. Não há nenhuma mudança em como você vê uma infobox em um artigo - ao invés disso, as mudanças afetam como a infobox é escrita na página de predefinição. Uma ferramenta para lhe ajudar com a migração de infoboxes já existente também foi criada - mais informações sobre isso podem ser encontradas em Ajuda:Migração de Infoboxes.

Links úteis:

  • Para uma introdução básica para o editor visual de infoboxes, veja Ajuda:Infoboxes/editando.
  • Para uma lista detalhada de todas as opções padrões disponíveis para infoboxes portáteis, incluindo amostras de wikitexto que podem ser usadas e o resultado em HTML, veja Ajuda:Infoboxes/Tags.
  • Para informações mais detalhadas sobre como usar CSS para personalizar uma infobox, incluindo guias detalhados, veja Ajuda:Infoboxes/CSS.
  • Para instruções sobre como usar a função de pré-visualizacão de Infoboxes, veja Ajuda:Pré-visualização de infoboxes
  • Hub de Portabilidade: Guias, exemplos, e ajuda para migração, personalização das suas infoboxes.

Como adicionar uma infobox em um artigo

VE-portableinfobox

Inserindo infoboxes portáteis no EditorVisual

Você pode adicionar uma infobox a um artigo da mesma forma que qualquer outra predefinição - seja através do editor das ferramentas embutidas de predefinição, ou através do modo de recursos do editor. No Editor Visual, infoboxes portáteis podem ser rapidamente inseridas através da opção "Inserir" no menu suspenso.

No último caso, você normalmente começaria por copiar a sintaxe da documentação da predefinição (encontrada geralmente ao final da página de predefinição) e a colaria a um artigo, mudando as palavras depois dos sinais de igual a fim de fornecer a informação desejada. Por exemplo:

{{infobox personagem
 | título       = Margarida
 | imagem         = Exemplo.jpg
 | legendadaimagem  = Margarida soprando ao vento
 | posição      = Flor suprema
 | idade           = 2 meses

 | status        = Ativo
 | altura        = 5 polegadas
 | peso        = 20 gramas
}}

Com as infoboxes portáteis, isso funcionará da mesma maneira como qualquer outra predefinição. Entretanto, a marcação da página da predefinição ficará um pouco diferente, como mostrado abaixo:

Como criar uma infobox

Tutorialinfobox

Primeiro, inicie uma nova predefinição com o nome que quiser - Predefinição:ExemploInfobox, por exemplo. Vamos começar com uma infobox básica, com um título e uma imagem:

<infobox layout="stacked">
 <title source="nome"><default>{{PAGENAME}}</default></title>
 <image source="imagem" />
</infobox>

Este wikitexto informará a sua predefinição para usar variáveis de "nome" e "imagem" para elementos de título e imagem. Você pode também fornecer um marcador default (padrão), cujo valor será usado quando o usuário não especificar um nome/imagem/etc. no artigo.

Agora só necessitamos de dois campos a mais contendo informações adicionais, então vamos adicionar um:

<data source="temporada"><label>Temporada(s)</label></data>

Após adicionar um último campo com a origem determinada para "primeiro" e etiquetá-lo como "Visto primeiro", teremos o seguinte:

<infobox layout="stacked">
 <title source="nome"><default>{{PAGENAME}}</default></title>
 <image source="imagem" />
 <data source="temporada"><label>Temporada(s)</label></data>
 <data source="primeiro"><label>Visto primeiro</label></data>
</infobox>

Agora nós podemos usar esta predefinição em um artigo e obter uma infobox funcional:

{{Infoboxexemplo
 |nome   = Eddard Stark
 |imagem  = eddard.jpg
 |temporada = [[Temporada 1|1]]

 |primeiro  = "[[O inverno está chegando]]"

}}

Escondendo valores

Qualquer campo ou elemento sem um valor será automaticamente escondido. Isso se aplica a todas as tags com a exceção dos grupos que são mostrados "à força" (veja #Forçar todos os elementos do grupo a serem mostrados). Quando todos os elementos estiverem vazios a infobox não irá aparecer.

Como alterar o layout da infobox

As infoboxes que usam este tipo de código são automaticamente desenhadas, usando o seu Designer de Temas. Se alguma das variáveis estiver em branco, a fileira relevante da predefinição não será exibida (a menos que a marcação 'default' tenha sido usada).

Opções de layout

Duas opções alternativas de layout estão disponíveis para as infoboxes:

Layout padrão Layout "empilhado"
etiquetas de marcador exibidas à esquerda do valor etiquetas de marcação exibidas acima do valor
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12.17

Layout padrão

Screen Shot 2015-06-16 at 12.10.54

Layout "empilhado"

Temas personalizados

O tema padrão de infoboxes pode ser substituído de duas maneiras. Há uma variável na página Especial:WikiFeatures da sua comunidade chamada Tema de Infobox Europa. Quando você a habilita, as suas infoboxes terão as mesmas cores que você escolheu para a navegação da sua wiki.

A sua outra opção é usar o CSS local da comunidade. Usar os atributos ou fonte-tema na tag infobox fará com que seja mais fácil de personalizar predefinições de infoboxes específicas usando classes.

  • O atributo theme é usado para especificar uma classe personalizada de CSS para a infobox.
  • O atributo theme-source permite a variação da classe CSS através de um parâmetro de predefinição.

Para mais informações sobre como usar estes atributos e personalizar uma infobox, incluindo guias detalhados, por favor, visite Ajuda:Infoboxes/CSS!

Cor de realce

As cores do título e do fundo dos cabeçalhos e do texto pode ser mudada por infobox quando se usa o recurso accent-color. Assim como theme-source, a cor usada é o valor do parâmetro da predefinição indicada em "accent-color-source" (para o fundo) e "accent-color-text-source" (para o texto).

Como um exemplo: se a predefinição de infobox tiver accent-color-source="bkg" e a infobox do artigo tiver bkg=#FFF, a cor de fundo dos cabeçalhos e títulos será #FFF (o valor hexadecimal da cor branca). As cores declaradas dessa maneira devem estar no formato hexadecimal, ou a aplicação das cores não funcionará.

As cores de realce serão sobrepostas às cores usadas em temas e no padrão.

Isso também inclui um parâmetro para a cor padrão, então usar accent-color-default="#FFF" configura a cor para todos os títulos e fundos dos cabeçalhos, e accent-color-text-default="#000000" funciona de uma maneira similar a configurar a cor padrão do texto usando o formato hexadecimal.

Como carregar várias imagens ou vídeos

Infoboxtabs

Imagens com abas

Para usar várias imagens em um só lugar em uma infobox, você pode simplesmente usar uma tag <gallery>.

{{Example
 |name   = Eddard Stark
 |image  = <gallery>
Eddard 1.jpg|Eddard em um cavalo 
Eddard 2.jpg|Eddard em uma casa
Eddard 3.jpg|Eddard em um carro fúnebre
</gallery>
}}

Para adicionar um vídeo a uma infobox, simplesmente use a tag <image> -da mesma maneira como você faria com uma imagem. Quando um vídeo é inserido ao invés de uma imagem, uma miniatura com um ícone play e a duração aparecerão na infobox, e clicar em um vídeo abrirá o tocador de vídeos. Se você quiser adicionar vários vídeos, adicione uma nova tag <image> para cada vídeo.

Como agrupar informações

Advancedinfobox

Agora que você criou uma infobox simples, você pode aprender como usar campos mais avançados. Nesta seção nós vamos construir uma infobox como a exibida à direita.

A infobox começa com três campos <data> e campos únicos para <title> (título) e <image (imagens). Como você pode ver, o campo do título não precisa ser o primeiro.

<infobox layout="stacked">
 <data source="anterior"><label>Anterior</label></data>
 <data source="conc"><label>Simultâneo</label></data>
 <data source="próximo"><label>Próximo</label></data>
 <title source="nome" />
 <image source="imagem" />
</infobox>

Informação de agrupamento dentro de marcações de grupo

O campo seguinte permitirá que você coloque um número de campos dentro de um grupo, cada qual com seu cabeçalho. Lembre-se: campos declarados mas que não tem um valor não serão exibidos. Esta regra também se aplica a grupos - se nenhum dos campos (excluindo a marcação do cabeçalho) dentro de qualquer grupo particular tiver um valor, o grupo todo não será exibido. It's

<infobox layout="stacked">
 <data source="anterior"><label>Anterior</label></data>
 <data source="conc"><label>Simultâneo</label></data>
 <data source="próximo"><label>Próximo</label></data>
 <title source="nome" />
 <image source="imagem" />
 <group>
  <header>Detalhes</header>
  <data source="conflito"><label>Conflito</label></data>
  <data source="date"><label>Data</label></data>
  <data source="local"><label>Local</label></data>
  <data source="resultado"><label>Resultado</label></data>
 </group>
</infobox>
Screen Shot 2015-06-16 at 13.27.08

Grupo horizontal

Layout horizontal para grupos

Marcações de grupo podem ter um layout horizontal alternativo onde todo o conteúdo é exibido lado a lado em uma única linha horizontal. Se consegue isso ao adicionar o atributo layout="horizontal a toda a marcação do grupo.

<group layout="horizontal">
   ...
</group>

Smart Layout para grupos

Similarmente ao layout horizontal (que gera linhas estruturadas), o smart layout permite que campos de informações apareçam em único grupo de uma linha para a próxima. Quando o número de campos atinge o limite definido, o próximo campo de informação aparece na linha seguinte. Os itens em uma linha serão ajustados para preencher a largura disponível.

Para usar smart grupos, adicione row-items="3" (ou algum outro número que configure o limite). Todos os itens em um smart grupo usam o layout horizontal por padrão, então não é necessário adicionar esse atributo se você estiver usando smart grupos. Entretanto, é possível misturar campos de informações verticais e horizontais ao adicionar o atributo layout=default à etiqueta individual <data>.

Para fazer com que um campo de informações use mais do que um espaço único, use o atributo span="2" em uma tag <data>.

<infobox>
  <title source="name" />
  <image source="image" />
  <group row-items="3">
    <header>Details</header>
    <data source="conflict"><label>Conflict</label></data>
    <data source="date"><label>Date</label></data>
    <data source="place"><label>Place</label></data>
    <data source="result" layout="default"><label>Outcome</label></data>
  </group>
</infobox>
 

Forçar todos os elementos do grupo a serem exibidos

Ao usar show="incomplete", você pode forçar todos os elementos do grupo a serem exibidos, ainda que vazios - a menos que "todos" estejam vazios, então o grupo não é renderizado.

<group layout="horizontal" show="incomplete">
 <header>Combatentes</header>
 <data source="side1" />
 <data source="side2" />
</group>

Somando tudo isso, chegamos ao código final da predefinição:

<infobox layout="stacked">
 <data source="anterior"><label>Anterior</label></data>
 <data source="conc"><label>Simultâneo</label></data>
 <data source="próximo"><label>Próximo</label></data>
 <title source="nome" />
 <image source="imagem" />
 <group>
  <header>Detalhes</header>
  <data source="conflito"><label>Conflito</label></data>
  <data source="date"><label>Data</label></data>
  <data source="local"><label>Local</label></data>
  <data source="resultado"><label>Resultado</label></data>
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Combatentes</header>
  <data source="side1" />
  <data source="side2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Comandantes</header>
  <data source="commanders1" />
 
  <data source="commanders2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Força</header>
  <data source="forces1" />
  <data source="forces2" />
 </group>
 <group layout="horizontal" show="incomplete">
  <header>Fatalidades</header>
  <data source="casual1" />
  <data source="casual2" />
 </group>
 <data source="civilian"><label>Vítimas civis</label></data>
</infobox>

Agora podemos usá-la em um artigo e o trabalho está feito:

{{Batalha
 |anterior       = [[Battle of Fair Isle]]
 |conc       = [[Siege of Old Wyk]]
 |próximo       = [[Siege of Pyke]]
 |nome       = [[Siege of Great Wyk]]
 |imagem       = Stannis Great Wyk.png
 |conflito   = [[Greyjoy Rebellion]]
 |data        = 289 AL
 |local      = [[Great Wyk]], the [[the Iron Islands]]
 |resultado     = [[Iron Throne]] victory
 |side1       = [[File:Greyjoy mini shield.png|20px|right|link=House Greyjoy]] [[House Greyjoy]]
 |side2       = [[File:Baratheon mini shield.png|20px|right|link=House Baratheon]] [[Iron Throne]]
 |commanders1 = Desconhecido
 |commanders2 = Lord [[Stannis Baratheon]]
 |casual1     = Desconhecido
 |casual2     = Desconhecido
}}

Grupos dobráveis

PI-Collapse

Grupos dobráveis em ação

Grupos podem ser feitos "dobráveis" quando se adiciona collapse="open" ou collapse="closed" na tag <group>. Isso fará com que se possa clicar no cabeçalho do grupo (para esconder ou expandir) e o grupo aparecerá aberto ou fechado, respectivamente.

<group collapse="closed">
  <header>Appearances</header>
  <data source="films" />
  <data source="comics" />
</group>

Obs: Um cabeçalho que contém conteúdo deve aparecer imediatamente depois da tag group para que isso funcione.

Opções Avançadas

Formatação de campo

Se você quiser agregar ou anexar informação adicional a seus dados - como a adição de alguns ícones, categorias - ou para processar valores passados, a formatação de campo permite isso.

  • Quando o marcador format for especificado para o node, a variável fornecida na font= é então formatada/modificada conforme especificado dentro do marcador format.
  • Se a variável fornecida na font= estiver vazia, o node renderiza os valores fornecidos nos marcadores default (ou não renderiza se os marcadores default não são especificados).

Alguns exemplos de casos de uso:

  • Texto extra - ${{{price}}}
  • Links - [[{{{Harry Potter}}}]]
  • Categorias - [[Category:{{{car type}}}]]

Aqui nós adicionamos um ícone:

<data source="preço">
 <label>Preço</label>
 <format>{{{preço}}} {{ícone_dinheiro}}</format>
</data>

O efeito ao lado pode ser obtido com a seguinte sintaxe:

Field mutators

Campos com formatação

<header>Preço para compra</header>
<data source="buyh">

 <label>Preço com regateio</label>
 <format>{{{buyh}}} {{oren2}}</format>
</data>
<data source="buyh">

 <label>Preço sem desconto</label>
 <format>{{{buyh}}} {{oren2}}</format>
</data>
<data source="sell">

 <label>Preço para venda</label>
 <format>{{{sell}}} {{oren2}}</format>
</data>
<data source="peso">
 <label>Peso</label>
 <format>{{{peso}}} {{peso}}</format>

</data>

Funções Parser (funções de análise)

Funções Parser podem ser adicionados a qualquer infobox. Entretanto, os resultados serão automaticamente escondidos se o parâmetro, tag ou fonte de informação não contiverem nenhum texto.

Código da predefinição Resultado
<data source="level">
  <label>Rank</label>
  <format>Orc {{#switch:{{{level}}}
         |1=peon
         |2=grunt
         |#default=grunt
  }}</format>
  <default>Orc</default>
</data>

Exemplos

Videoaulas

Universidade da Wikia - Usando predefinições de infoboxes02:52

Universidade da Wikia - Usando predefinições de infoboxes

Mais ajuda e feedback

Interferência de bloqueador de anúncios detectada!


A Wikia é um site grátis que ganha dinheiro com publicidade. Nós temos uma experiência modificada para leitores usando bloqueadores de anúncios

A Wikia não é acessível se você fez outras modificações. Remova o bloqueador de anúncios personalizado para que a página carregue como esperado.

Também no FANDOM

Wiki aleatória