FANDOM


Você sabia que o ótimo conteúdo que você escreve é lido por mais de 100 milhões de pessoas pelo mundo inteiro todo mês? E você sabia que 50% dessas pessoas estão lendo esse conteúdo em um tablet ou celular?[1]

As melhores práticas do Fandom vão lhe ajudar a construir e formatar o seu conteúdo para que ele fique bonito em qualquer aparelho, seja no site completo, no site móvel ou nos aplicativos especializados.

Quais são as melhores práticas?

O Fandom trabalhou com vários administradores experientes e membros da comunidade para estabelecer um conjunto de "O que fazer e o que não fazer" para conteúdo e predefinições. O nosso objetivo é apoiar e alimentar a criatividade que existe na plataforma do Fandom e ao mesmo tempo encorajar práticas e padrões modernos da web.

As melhores práticas são fáceis de adicionar às predefinições e conteúdo. A maioria do seu conteúdo existente vai continuar com o mesmo visual e funções do site completo, mas melhor ainda nos celulares e tabletes, incluindo os nossos Community Apps (aplicativos da Comunidade). Adicionalmente, seguir essas práticas pode melhorar o tempo que as páginas demoram para carregar.

Há várias similaridades entre as comunidades, mas seguir essas práticas vai ajudar o Fandom a identificar os diferentes tipos de conteúdo (infoboxes, navboxes, predefinições de citações, etc) e mostrá-los apropriadamente para uma ótima experiência de leitura e edição para elementos fragmentados existentes.

Melhores práticas

Infobox

Infoboxes são os elementos mais comuns nas páginas de artigo do Fandom na maioria das nossas comunidades. Para que as infoboxes apareçam legais em dispositivos móveis, use class="infobox" no topo da estrutura da infobox.

Exemplo

Veja Predefinição: Infobox Ator na Arrested Development wiki para conferir toda a construção.

{| class="infobox"
|-
[...]
Pré-visualização


Citação

Muitas comunidades incluem citações em suas páginas de artigos. Citações são ótimos fragmentos de conteúdo que leitores amam ler e compartilhar. Há duas práticas simples para predefinições de citação:

  1. Construa a sua predefinição de citação com divs, não tabelas.
  2. Use class="quote" ou class="blockquote" na construção.
Exemplo

Confira Predefinição:Citação na wikia Hunger Games para ver a construção total.

<blockquote>''{{{conteúdo da citação}}}'' — <cite>{{{autor}}}</cite>
</blockquote>
Preview

Tabelas

Tabelas são mais complicadas do que as nossas outras melhores práticas, mas o uso impróprio de tabelas pode ter efeitos adversos em como as páginas de artigo aparecem em qualquer aparelho - computador, tablete ou celular.

A primeira melhor prática para tabelas é evitar construir e formatar páginas inteiramente com tabelas. Tabelas só devem ser usadas para organizar e mostrar informações, como estatísticas de um video game or lista de atores em um episódio. Para conseguir designs específicos para as suas páginas de artigo, use HTML moderno e práticas de CSS, tais como demonstradas em W3Schools.com.

A segunda melhor prática para tabelas é evitar tabelas dentro de tabelas. Ao invés disso, una células sempre que possível.

A terceira melhor prática para tabelas é ter um número razoável de colunas e linhas que você usa para ter certeza que as tabelas são fáceis de ler em computadores e dispositivos móveis. Quebre pedaços grandes de informação em tabelas menores.

Em breve...

As seguintes são as melhores práticas que você pode seguir agora, com o apoio ao Fandom Móvel chegando em 2015:

Notificações

Notificações são elementos que aparecem no topo da página de artigo para avisar leitores e contribuidores sobre informações relacionadas ao artigo.

Para que as notificações apareçam bem no site móvel, use class="notice" no elemento do nível superior (primeiro div ou tabela) da estrutura da notificação. Para identificar qual categoria específica da notificação será mostrada, inclua a categoria da notificação na classe (exemplo:class="notice spoiler")

Há uma variedade de tipos de notificações, mas as cinco categorias que o Fandom reconhece são spoiler, disamb, stub (resumo), maintenance (manutenção) e informational (informativo).

Exemplo

Confira Predefinição:Galeria na Tron wiki para ver a construção total.

<div class="notice">
'''[[{{BASEPAGENAME}}|Gallery: {{BASEPAGENAME}}]]'''<br />Essa página contém imagens na Tron Wiki pertencentes a [[{{BASEPAGENAME}}]]. [...]
</div>
Pré-visualização

Apoio ao Fandom Móvel em breve!

Navbox

Navboxes são usadas nas comunidades do Fandom para ajudar leitores a navegar por páginas relacionadas. A maioria delas é inserida no fim da página.

Para que as navboxes apareçam apropriadamente nos aparelhos móveis, use class="navbox" no elemento do nível superior da estrutura. Nós recomendamos usar nav, como no exemplo abaixo.

Exemplo

Confira Predefinição:Ep Nav S1 na Scrubs wiki para ver a construção completa.

<nav class="navbox">
<div class="navbox-title">Season One Episodes</div>
# "[[My First Day]]"
# "[[My Mentor]]"
# "[[My Best Friend's Mistake]]"
# [...]
</nav>
Pré-visualização

Apoio ao Fandom Móvel em breve!

Elementos "dobráveis"

Para economizar espaço, muitas comunidades usam elementos "dobráveis" para esconder a navegação e detalhes de um artigo com um botão "Mostrar mais". Muitas vezes, esses elementos são navboxes, assim como esses exemplos:

Para que essa função apareça apropriadamente no site móvel e em experiência de edição, use class="mw-collapsible" na construção. Usar class="collapsible" também é uma alternativa. Essa classe pode ser combinada com outras classes.

Exemplo

Confira Predefinição:Navbox na Lostpedia wiki para ver a construção completa.

<div class="navbox mw-collapsible"> 
[...]
</div>
Pré-visualização

Apoio ao Fandom Móvel em breve!

Elementos roláveis

Assim como os elementos dobráveis, muitas comunidades usam elementos roláveis (usualmente a predefinição Scrollbox) para que listas longas apareçam em uma caixa confinada. Para que o conteúdo rolável apareça bem no site móvel, use class="scrollable" na predefinição ou na construção do elemento. Essa classe pode ser combinada com outras classes.

Exemplo

Confira Predefinição:Scroll box na Powerlisting wiki para ver a construção completa.

<div class="scrollable"> 
[...]
</div>
Pré-visualização

Apoio ao Fandom Móvel em breve!

Perguntas?

Se você tiver alguma pergunta sobre essas práticas, ou precisar de ajuda para adaptar o seu conteúdo, por favor, visite os fóruns da Central da Comunidade ou via Especial:Contact.

Lembre-se — você sempre pode usar a visualização móvel dentro do editor fonte para verificar rapidamente como o seu conteúdo renderiza em smartphones.

Notas
  1. Fandom Network — Quantcast.com

Veja também

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.