FANDOM


Infobox Preview help page

A ferramenta de pré-visualização de infoboxes em ação

A funcionalidade de Pré-visualização de Infoboxes é uma ferramenta construída para ajudar os usuários a construir e experimentar com a a nova marcação de infoboxes portáteis e personalização de CSS. A ferramenta é uma sandbox - ela importa o código existente da sua comunidade mas não publica edições na página da predefinição ou do CSS.

Cada vez que você clica no botão "Pré-visualizar" a ferramenta verifica o conteúdo das três abas - marcação da infobox, CSS personalizado e invocação - e domínio fornecido e nome da predefinição para gerar a pré-visualização. Ela identificará onde a predefinição já está sendo usada na sua comunidade e mostra até 10 exemplos de como a predefinição aparecerá com o novo código que você adicionou.

Lembre-se: não há como quebrar nada na comunidade com essa ferramenta. Mudanças nas predefinições ou no CSS não serão salvas - essa é uma função independente!

Como eu acesso essa ferramenta?

Visite http://infoboxpreview.appspot.com/ no seu navegador ou clique em "Abra pré-visualização de infoboxes" dentro do editor de predefinições.

Para que servem os botões?

XML

Quando você clica no botão 'XML' e os campos 'domínio do Fandom' e 'nome da predefinição' estão preenchidos, a aba 'Marcação de Infobox' será preenchida com o conteúdo da predefinição na wiki fornecida.

Por exemplo, se você quiser testar http://scrubs.wikia.com/wiki/Predefinição:Personagem, você deve inserir 'scrubs.wikia.com' no domínio e 'Personagem' como o nome da predefinição.

Se a predefinição não existir ou se a predefinição não tiver nenhuma marcação de infobox XML, a aba 'Marcação de Infobox' mostrará uma tag <infobox></infobox> em branco.

Aprenda mais sobre a marcação de infobox XML em Ajuda:Infoboxes.

CSS

Quando você clica no botão CSS e o campo 'domínio do Fandom' está preenchido, o conteúdo inteiro da página MediaWiki:Wikia.css será importado na aba 'CSS Personalizado'.

Pré-visualização

Quando você clica em "Pré-visualizar", todas as informações disponíveis são combinadas para gerar uma pré-visualização para você. Essas três etapas acontecem simultaneamente:

1) A ferramenta olha para o seu 'domínio no Fandom' e 'nome da predefinição' para encontrar artigos onde a predefinição já está sendo usada juntamente com o valores de seus parâmetros. Por exemplo, http://scrubs.wikia.com/wiki/Template:Character olhará http://scrubs.wikia.com/wiki/Doug_Murphy e a mostrará na área de pré-visualização.

2) A ferramenta irá gerar uma infobox baseada na marcação inserida na aba 'Marcação de Infobox'. Tente rearrumar as etiquetas em 'Marcação de Infobox' e clique em 'Pré-visualizar' para ver como isso funciona.

3) A ferramenta criará o CSS para personalizar a infobox. A ferramenta verificará todo o CSS no 'domínio do Fandom' fornecido e o carregará na área de pré-visualização. O conteúdo de 'personalização do CSS' é carregado se você tiver inserido alguma mudança.

4) A ferramenta verificará a aba 'Invocação' e a gerará acima das outras opções. Veja a seção 'Construindo uma invocação personalizada" abaixo para maiores informações.

Essa ferramenta só gerará uma pré-visualização da marcação da Infobox Portátil. O resto do conteúdo da predefinição será ignorado.

Compartilhar

Infobox Preview help page - share dialog

Clicar em 'Compartilhar' gerará uma imagem do estado atual da sua pré-visualização - os campos 'domínio do Fandom' e o 'nome da predefinição' e o conteúdo das três abas. O link gerado sempre o levará para este rascunho. Você pode fazer mais mudanças e criar mais links para compartilhar.

Compartilhar é útil se você quiser colaborar com outro editor para construir uma infobox sem afetar qualquer artigo na sua comunidade. É também uma ótima maneira de salvar o seu trabalho e voltar a editar mais tarde.

What do the different tabs do?

Infobox Markup

This tab can be populated by clicking the 'XML' button at the top of the tool. Alternatively, you can build an infobox from scratch. The preview area will look to this 'Infobox Markup' tab to understand how the infoboxes should be built.

Learn more about the Infobox XML markup at Help:Infoboxes.

Custom CSS

Infobox preview - CSS tree

CSS tree

This tab can be populated by clicking the 'CSS' button at the top of the tool. Alternatively, you can write CSS from scratch. The preview will live update as you write proper CSS.

At the bottom of the screen a CSS structure tree will show you the exact class names of each element in the preview area as you hover over them. Click in the preview area to lock or unlock the tree.

Learn more about CSS on Wikia at [[Help:CSS and JS customization]] or learn CSS basics at http://www.w3schools.com/css/

Invocation

Infobox Preview - Custom Invocation

An example custom invocation which can be seen at http://infoboxpreview.appspot.com/?snapshotId=-K3bhjfXNDZBULEN3om1

If you're building a template that is not yet used on any pages, or if you want to see what a very specific combination of parameters will look like you can fill out the 'Invocation' tab exactly how you would embed a template on an article page.

For example, you would type:

{{Infobox Character
|name = EXAMPLE
|image = O-Ren Ishii.jpg
|caption = 
|full_name = THIS IS A TEST
|alias = Experiment
...
}}

and the preview will display how the Infobox will look if this wikitext were on an actual article page.

FAQ

I'm done! I want to save my changes

This feature does not publish any changes to either Template pages or CSS. You will have to copy & paste it into the appropriate location when you're done.

I want to preview an Infobox that ends in /Draft

If you are previewing a template that ends with /Draft — such as http://scrubs.wikia.com/wiki/Template:Episode/Draft the preview will search for uses of http://scrubs.wikia.com/wiki/Template:Episode instead and still display a valid preview.

Eu quero editar MediaWiki:Common.css ou outra página no CSS

Essa função só importa MediaWiki:Wikia.css para a aba 'Personalização de CSS'

The feature only imports MediaWiki:Wikia.css to the 'Custom CSS' tab but automatically loads all CSS into the preview area. You can still use the 'Custom CSS' tab to write CSS but copy & paste it to whichever CSS page you want.

Minha área de pré-visualização está em branco!

A pré-visualização pode ficar em branco se:

  • A predefinição que você forneceu não for usada em nenhum artigo no domínio que você inseriu.
  • A aba "Marcação de Infobox' estiver vazia
  • A aba 'Marcação de Infobox' tiver uma marcação que não funciona

Mais ajuda e feedback