WikiPStory:Guia de estilo: Difference between revisions
Cria o guia de estilo da wiki: verbete x catalogo, estrutura padrao e classes disponiveis |
Reescreve o guia para a nova direcao editorial: banner, requisitos em texto, progressao da quest, tabelas centralizadas e avisos em negrito |
||
| (One intermediate revision by the same user not shown) | |||
| Line 5: | Line 5: | ||
== Princípio == | == 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 == | |||
# '''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'''. | |||
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 '''<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". | |||
== Imagens == | |||
O interesse visual da página vem das imagens do jogo, não do CSS. | |||
< | * 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>. | ||
* 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: <code>ChampionsPath_Painel.png</code>. | |||
* 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: | |||
<pre> | |||
<div class="pst-figs"> | |||
[[File:A.png|440px|link=]] | |||
[[File:B.png|440px|link=]] | |||
</div> | |||
<div class="pst-legenda">Legenda das duas.</div> | |||
</pre> | |||
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: | |||
<pre> | |||
<!-- Placeholder: gravação da mecânica em execução. | |||
! | [[File:Nome Da Mecanica.gif|center|600px|link=]] --> | ||
</pre> | |||
| | |||
= | Em células de tabela que aguardam ícone, use <code><nowiki>[[File:ArquivoExemplo.png|40px|link=]]</nowiki></code>. | ||
== | == Tabelas == | ||
Tabela serve para comparar ou listar elementos, não para embrulhar texto corrido. Alterne: texto explicando → tabela centralizada → continuação da explicação. | |||
[[ | <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 == | ||
{| class="wikitable" style="margin:0 auto; text-align:left;" | |||
{| class="wikitable" | |||
! Classe !! Onde usar | ! Classe !! Onde usar | ||
|- | |- | ||
| <code>pst | | <code>pst-legenda</code> || Legenda logo abaixo de uma imagem ou de um par de imagens. | ||
|- | |- | ||
| <code>pst- | | <code>pst-figs</code> || Contêiner de imagens lado a lado, responsivo. | ||
|- | |- | ||
| <code> | | <code>pst-icone</code> || Célula de tabela que contém apenas um ícone. | ||
|- | |- | ||
| <code>pst-indisponivel</code> || | | <code>pst-indisponivel</code> || Linha de tabela para conteúdo bloqueado ou indisponível. | ||
|- | |- | ||
| <code>pst- | | <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. | ||
|} | |} | ||
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. | |||
== | == 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. | |||
[[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
- 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.
- __TOC__ 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.
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.