Jump to content

WikiPStory:Guia de estilo: Difference between revisions

From WikiPStory
Infobox passa a ser opcional; regra de alinhamento de imagem conforme a presenca dela
Reescreve o guia para a nova direcao editorial: banner, requisitos em texto, progressao da quest, tabelas centralizadas e avisos em negrito
 
Line 5: Line 5:
== Princípio ==
== Princípio ==


A wiki tem dois tipos de página, e eles usam vocabulários visuais diferentes. Confundir os dois é o erro mais comum.
Uma página de quest ou sistema é um '''guia''', não um painel. Ela deve acompanhar a mesma ordem em que o jogador vive o conteúdo, alternando naturalmente entre explicação e imagem:


{| class="wikitable"
: texto → imagem → explicação → objetivo → imagem → próxima etapa
! Tipo !! O que é !! Como se parece
 
|-
E não:
| '''Verbete''' || Explica uma coisa: um sistema, uma quest, um boss, um NPC, um Pokémon. || Texto corrido, índice nativo, infobox lateral, tabelas e listas. Sem sombra, sem gradiente, sem cantos arredondados.
 
|-
: card → card → selo → card → informação → card
| '''Catálogo''' || Lista muitas coisas equivalentes para o jogador escolher entre elas. || Grade de cards com imagem, filtros e etiquetas. É onde os componentes visuais fazem sentido.
 
|}
Se uma informação cabe em uma linha de texto, ela não precisa virar componente. O conteúdo produz a maior parte da estética: um bom banner, títulos organizados, parágrafos bem escritos, imagens bem posicionadas e tabelas simples já bastam.


A regra prática: '''se a página explica uma coisa, ela é texto; se ela lista muitas coisas, ela pode ser card.''' [[Champion's Path]] é um verbete. Uma futura página listando todas as quests do jogo seria um catálogo.
== Estrutura de uma página de quest ou sistema ==


== Regras visuais do verbete ==
# '''Banner''' no topo, em largura grande e centralizado.
# '''Requisitos em texto''', com rótulos em negrito, uma linha por item. Sem tabela e sem cards.
# '''Recompensas em uma frase''', logo abaixo dos requisitos, como resumo.
# '''<nowiki>__TOC__</nowiki>''' para o índice nativo.
# '''Sobre o conteúdo''' — o que é, o contexto e o que o torna diferente.
# '''As etapas''', na ordem em que o jogador as cumpre, cada uma com o seu título.
# '''Recompensas''' detalhadas, em tabela.
# '''Dicas''', em lista.
# '''Informações pendentes''', quando houver.
# '''Ver também'''.


* '''Sem sombra e sem gradiente.''' O interesse visual vem das imagens do jogo, não do CSS.
Omita o que não se aplicar, mas mantenha a ordem. Os títulos devem descrever a etapa real da quest, não categorias genéricas.
* '''Sem cantos arredondados.''' A wikitable nativa e a infobox já têm a borda certa.
* '''Use o índice nativo''' com <code><nowiki>__TOC__</nowiki></code>. Não construa menus de navegação próprios: o índice se atualiza sozinho quando alguém adiciona uma seção.
* '''Não embrulhe seções em caixas.''' Uma seção é um título mais o texto dela.
* '''Prefira uma linha de texto a um bloco.''' Se a informação cabe em uma frase, ela não precisa virar componente.
* '''Uma cor forte por página''', na barra da infobox. O resto é filete cinza.


== Estrutura de uma página de sistema ou quest ==
== Regras de escrita ==


A ordem das seções segue a ordem das perguntas que o jogador faz. Omita as seções que não se aplicam, mas não troque a ordem.
* '''Um parágrafo, uma ideia.''' Não misture história, requisito, objetivo e recompensa no mesmo bloco.
* '''Parágrafos curtos''', de duas a quatro linhas.
* '''Negrito''' para nomes de NPCs, itens, valores e a informação que o jogador precisa reter. Não para frases inteiras.
* Avisos entram como '''<nowiki>'''Atenção:'''</nowiki>''', '''<nowiki>'''Observação:'''</nowiki>''' ou '''<nowiki>'''Dica:'''</nowiki>''' no início do parágrafo. '''Não use caixas coloridas para isso.'''
* Escreva para quem nunca viu o sistema.
* Nomes oficiais do jogo ficam em inglês: ''Champion's Path'', ''Poké Sync'', ''Held''.
* '''Não invente mecânicas, valores ou regras.''' Se a informação não está confirmada, registre-a em "Informações pendentes".


# '''Introdução''' — o que é, em dois parágrafos. O primeiro define; o segundo diz o que torna esse conteúdo diferente dos outros. A infobox lateral é '''opcional''': use quando houver uma imagem que identifique o conteúdo e fatos que não caibam naturalmente na prosa. Se todos os dados já aparecem no texto, a infobox só repete informação e tira largura da leitura — foi o caso de [[Champion's Path]], que não usa infobox enquanto não tiver arte própria.
== Imagens ==
# '''Como chegar''' — onde começa, e como o jogador chega lá.
# '''Requisitos''' — nível, itens, quests anteriores, liberações necessárias.
# '''Etapas''' ou '''Como funciona''' — o passo a passo, em lista numerada.
# '''O que você enfrenta''' — Pokémon, bosses, mecânicas.
# '''Recompensas''' — o que o jogador leva.
# '''Cooldown e reset''' — quando dá para repetir.
# '''Dicas''' — o que só quem já jogou sabe.
# '''Informações pendentes''' — o que ainda não foi confirmado.
# '''Ver também''' — links para as páginas vizinhas.


== Modelo para copiar ==
O interesse visual da página vem das imagens do jogo, não do CSS.


<pre>
* Capturas de cenário: <code><nowiki>[[File:Nome.png|center|450px|link=]]</nowiki></code>, seguidas de <code><nowiki><div class="pst-legenda">Legenda.</div></nowiki></code>.
{| class="pst-infobox"
* Painéis e telas de interface: '''600px''', porque o texto dentro delas precisa ser legível.
|+ Nome da Quest
* Banner do topo: '''800px'''.
| class="pst-infobox-img" colspan="2" | [[File:Arquivo.png|300px|link=|Texto alternativo]]
* Toda imagem precisa de legenda. A legenda explica o que o jogador está vendo; não repete o título da seção.
|-
* Nomeie os arquivos com o nome do conteúdo na frente: <code>ChampionsPath_Painel.png</code>.
| class="pst-infobox-legenda" colspan="2" | Legenda curta da imagem.
* Evite GIFs grandes. Um GIF de dezenas de megabytes trava a página no celular.
|-
| class="pst-infobox-sub" colspan="2" | Informações gerais
|-
! Tipo
| Quest solo
|-
! Nível
| 300
|-
! Início
| Nome do NPC, em Cidade
|-
! Cooldown
| 7 dias
|}


O '''Nome da Quest''' é ... (primeiro parágrafo: define o que é)
=== Imagens lado a lado ===


(segundo parágrafo: o que torna essa quest diferente)
Quando duas imagens contam a mesma coisa — mapa e NPC, área externa e interna, item e local de uso — use:


__TOC__
<pre>
&lt;div class="pst-figs"&gt;
[[File:A.png|440px|link=]]
[[File:B.png|440px|link=]]
&lt;/div&gt;
&lt;div class="pst-legenda"&gt;Legenda das duas.&lt;/div&gt;
</pre>


== Como chegar ==
Elas se reorganizam sozinhas em telas estreitas. Não use só para preencher espaço: se uma imagem grande conta melhor a história, prefira uma só.
...


== Requisitos ==
=== Imagens que ainda não existem ===
...


== Etapas ==
Deixe o espaço preparado como comentário, para não exibir link quebrado ao jogador:
# Primeiro passo.
# Segundo passo.


== Recompensas ==
<pre>
{| class="wikitable"
&lt;!-- Placeholder: gravação da mecânica em execução.
! Recompensa !! Quantidade
[[File:Nome Da Mecanica.gif|center|600px|link=]] --&gt;
|-
</pre>
| ... || ...
|}


== Dicas ==
Em células de tabela que aguardam ícone, use <code><nowiki>[[File:ArquivoExemplo.png|40px|link=]]</nowiki></code>.
* ...


== Informações pendentes ==
== Tabelas ==
&lt;div class="pst-todo"&gt;
'''Esta página ainda não cobre tudo.'''
* ...
&lt;/div&gt;


== Ver também ==
Tabela serve para comparar ou listar elementos, não para embrulhar texto corrido. Alterne: texto explicando → tabela centralizada → continuação da explicação.
* [[Página relacionada]]


[[Category:Quests]]
<pre>
{| class="wikitable" style="margin:0 auto; text-align:center;"
! Campeão !! Expedition !! Mega Stone
|-
| class="pst-icone" | [[File:ArquivoExemplo.png|40px|link=]]
| Tyranitar || Tyranitarite
|}
</pre>
</pre>
* '''Sempre centralizada''' com <code>margin:0 auto</code>.
* '''Largura natural.''' Não force 100%: a tabela deve ocupar o que o conteúdo pede.
* Coluna de ícone recebe <code>class="pst-icone"</code>.
* Linha de conteúdo indisponível recebe <code>class="pst-indisponivel"</code>.
* Em tabelas com muito texto na primeira coluna, use <code>style="text-align:left"</code> nessas células.


== Classes disponíveis ==
== Classes disponíveis ==


=== Verbete ===
{| class="wikitable" style="margin:0 auto; text-align:left;"
 
{| class="wikitable"
! Classe !! Onde usar
! Classe !! Onde usar
|-
|-
| <code>pst-infobox</code> || Na tabela da infobox lateral. O <code><nowiki>|+</nowiki></code> da tabela vira a barra colorida do título.
| <code>pst-legenda</code> || Legenda logo abaixo de uma imagem ou de um par de imagens.
|-
| <code>pst-infobox-img</code> || Célula da imagem da infobox, ocupando as duas colunas.
|-
| <code>pst-infobox-legenda</code> || Célula de legenda logo abaixo da imagem.
|-
|-
| <code>pst-infobox-sub</code> || Célula que divide a infobox em blocos, ocupando as duas colunas.
| <code>pst-figs</code> || Contêiner de imagens lado a lado, responsivo.
|-
|-
| <code>wikitable</code> || Toda tabela de conteúdo. É a tabela nativa do MediaWiki, já ajustada ao tema.
| <code>pst-icone</code> || Célula de tabela que contém apenas um ícone.
|-
|-
| <code>pst-indisponivel</code> || Em uma linha da tabela, para conteúdo bloqueado ou indisponível.
| <code>pst-indisponivel</code> || Linha de tabela para conteúdo bloqueado ou indisponível.
|-
|-
| <code>pst-arte</code> || Em uma célula que contém apenas um sprite ou arte.
| <code>pst-infobox</code> || Infobox lateral. '''Opcional''', e hoje pouco usada: só vale quando existe uma imagem que identifica o conteúdo e fatos que não cabem na prosa. Se os dados já estão no texto, ela apenas repete informação.
|-
| <code>pst-quote</code> || Fala de NPC, com <code><nowiki><cite></nowiki></code> para o nome.
|-
| <code>pst-hatnote</code> || Observação curta, de uma ou duas linhas.
|-
| <code>pst-todo</code> || Caixa de informações pendentes.
|}
|}


=== Catálogo ===
Existe também uma camada mais antiga de componentes — <code>pst-hero</code>, <code>pst-badges</code>, <code>pst-boss-grid</code>, <code>pst-facts</code>, <code>pst-split</code> — junto dos templates [[Template:Selo]], [[Template:Fato]] e [[Template:Boss]]. '''Não use nada disso em páginas de quest ou sistema.''' Eles existem para páginas de catálogo, que listam muitos itens equivalentes e têm filtros, como um futuro índice geral de quests.
 
Estas vêm da camada anterior e continuam válidas em páginas que listam muitos itens: <code>pst-hero</code>, <code>pst-badges</code>, <code>pst-boss-grid</code>, <code>pst-boss-card</code>, <code>pst-facts</code>, <code>pst-split</code>, <code>pst-role-card</code>, <code>pst-reward</code>. Os templates [[Template:Selo]], [[Template:Fato]], [[Template:Boss]] e [[Template:Figura]] pertencem a essa camada.
 
Em um verbete, prefira sempre a tabela nativa a essas classes.
 
== Imagens ==
 
* Use <code><nowiki>[[File:Nome.png|thumb|center|480px|Legenda.]]</nowiki></code> para capturas de tela. O <code>thumb</code> dá a moldura e a legenda. Centralize as imagens quando a página não tiver infobox; use <code>none</code> para alinhá-las à esquerda quando houver uma infobox flutuando à direita, porque a centralização em uma coluna estreitada deixa um vazio visível.
* Toda imagem precisa de legenda. A legenda explica o que o jogador está vendo, não repete o título da seção.
* Nomeie os arquivos com o nome do conteúdo na frente: <code>ChampionsPath_Painel.png</code>. Isso mantém os arquivos do mesmo assunto juntos na listagem.
* Evite GIFs grandes. Um GIF de dezenas de megabytes trava a página no celular.


== Escrita ==
== O que evitar ==


* Escreva para quem nunca viu o sistema. Se a página não responde "o que é isso e por onde eu começo" nos dois primeiros parágrafos, ela precisa ser reescrita.
* Vários cards lado a lado, e cards dentro de cards.
* Nomes oficiais do jogo ficam em inglês: ''Champion's Path'', ''Poké Sync'', ''Held''. O resto é português.
* Blocos com estatísticas gigantes e aparência de painel.
* '''Não invente mecânicas, valores ou regras.''' Se a informação não está documentada, registre-a em "Informações pendentes" em vez de preencher com suposição.
* Gradientes, sombras e cantos muito arredondados.
* Ligue os nomes que terão página própria, mesmo que ela ainda não exista. Os links vermelhos formam a lista de trabalho da wiki.
* Selos e etiquetas para qualquer informação.
* Seções de abertura com título gigante, no estilo de página de divulgação.
* Ícones decorativos que não carregam informação.
* Transformar toda etapa em tabela.


[[Category:Wiki]]
[[Category:Wiki]]

Latest revision as of 02:54, 10 September 2026

Esta página define como as páginas da Wiki do PStory Online devem ser escritas e apresentadas. O objetivo é que qualquer pessoa consiga criar uma página nova que pareça parte do mesmo conjunto, sem precisar inventar estilo próprio.

Princípio

Uma página de quest ou sistema é um guia, não um painel. Ela deve acompanhar a mesma ordem em que o jogador vive o conteúdo, alternando naturalmente entre explicação e imagem:

texto → imagem → explicação → objetivo → imagem → próxima etapa

E não:

card → card → selo → card → informação → card

Se uma informação cabe em uma linha de texto, ela não precisa virar componente. O conteúdo produz a maior parte da estética: um bom banner, títulos organizados, parágrafos bem escritos, imagens bem posicionadas e tabelas simples já bastam.

Estrutura de uma página de quest ou sistema

  1. Banner no topo, em largura grande e centralizado.
  2. Requisitos em texto, com rótulos em negrito, uma linha por item. Sem tabela e sem cards.
  3. Recompensas em uma frase, logo abaixo dos requisitos, como resumo.
  4. __TOC__ para o índice nativo.
  5. Sobre o conteúdo — o que é, o contexto e o que o torna diferente.
  6. As etapas, na ordem em que o jogador as cumpre, cada uma com o seu título.
  7. Recompensas detalhadas, em tabela.
  8. Dicas, em lista.
  9. Informações pendentes, quando houver.
  10. Ver também.

Omita o que não se aplicar, mas mantenha a ordem. Os títulos devem descrever a etapa real da quest, não categorias genéricas.

Regras de escrita

  • Um parágrafo, uma ideia. Não misture história, requisito, objetivo e recompensa no mesmo bloco.
  • Parágrafos curtos, de duas a quatro linhas.
  • Negrito para nomes de NPCs, itens, valores e a informação que o jogador precisa reter. Não para frases inteiras.
  • Avisos entram como '''Atenção:''', '''Observação:''' ou '''Dica:''' no início do parágrafo. Não use caixas coloridas para isso.
  • Escreva para quem nunca viu o sistema.
  • Nomes oficiais do jogo ficam em inglês: Champion's Path, Poké Sync, Held.
  • Não invente mecânicas, valores ou regras. Se a informação não está confirmada, registre-a em "Informações pendentes".

Imagens

O interesse visual da página vem das imagens do jogo, não do CSS.

  • Capturas de cenário: [[File:Nome.png|center|450px|link=]], seguidas de <div class="pst-legenda">Legenda.</div>.
  • Painéis e telas de interface: 600px, porque o texto dentro delas precisa ser legível.
  • Banner do topo: 800px.
  • Toda imagem precisa de legenda. A legenda explica o que o jogador está vendo; não repete o título da seção.
  • Nomeie os arquivos com o nome do conteúdo na frente: ChampionsPath_Painel.png.
  • Evite GIFs grandes. Um GIF de dezenas de megabytes trava a página no celular.

Imagens lado a lado

Quando duas imagens contam a mesma coisa — mapa e NPC, área externa e interna, item e local de uso — use:

<div class="pst-figs">
[[File:A.png|440px|link=]]
[[File:B.png|440px|link=]]
</div>
<div class="pst-legenda">Legenda das duas.</div>

Elas se reorganizam sozinhas em telas estreitas. Não use só para preencher espaço: se uma imagem grande conta melhor a história, prefira uma só.

Imagens que ainda não existem

Deixe o espaço preparado como comentário, para não exibir link quebrado ao jogador:

<!-- Placeholder: gravação da mecânica em execução.
[[File:Nome Da Mecanica.gif|center|600px|link=]] -->

Em células de tabela que aguardam ícone, use [[File:ArquivoExemplo.png|40px|link=]].

Tabelas

Tabela serve para comparar ou listar elementos, não para embrulhar texto corrido. Alterne: texto explicando → tabela centralizada → continuação da explicação.

{| class="wikitable" style="margin:0 auto; text-align:center;"
! Campeão !! Expedition !! Mega Stone
|-
| class="pst-icone" | [[File:ArquivoExemplo.png|40px|link=]]
| Tyranitar || Tyranitarite
|}
  • Sempre centralizada com margin:0 auto.
  • Largura natural. Não force 100%: a tabela deve ocupar o que o conteúdo pede.
  • Coluna de ícone recebe class="pst-icone".
  • Linha de conteúdo indisponível recebe class="pst-indisponivel".
  • Em tabelas com muito texto na primeira coluna, use style="text-align:left" nessas células.

Classes disponíveis

Classe Onde usar
pst-legenda Legenda logo abaixo de uma imagem ou de um par de imagens.
pst-figs Contêiner de imagens lado a lado, responsivo.
pst-icone Célula de tabela que contém apenas um ícone.
pst-indisponivel Linha de tabela para conteúdo bloqueado ou indisponível.
pst-infobox Infobox lateral. Opcional, e hoje pouco usada: só vale quando existe uma imagem que identifica o conteúdo e fatos que não cabem na prosa. Se os dados já estão no texto, ela apenas repete informação.

Existe também uma camada mais antiga de componentes — pst-hero, pst-badges, pst-boss-grid, pst-facts, pst-split — junto dos templates Template:Selo, Template:Fato e Template:Boss. Não use nada disso em páginas de quest ou sistema. Eles existem para páginas de catálogo, que listam muitos itens equivalentes e têm filtros, como um futuro índice geral de quests.

O que evitar

  • Vários cards lado a lado, e cards dentro de cards.
  • Blocos com estatísticas gigantes e aparência de painel.
  • Gradientes, sombras e cantos muito arredondados.
  • Selos e etiquetas para qualquer informação.
  • Seções de abertura com título gigante, no estilo de página de divulgação.
  • Ícones decorativos que não carregam informação.
  • Transformar toda etapa em tabela.