Guia de Estilo

Bem-vindo colaborador de conteúdo, esta página foi feita para você! Este é um guia Guia de Estilo Visual com todos os passos para uma correta inserção de conteúdo no Site NES Archive através do Word Press.

Escrevendo seu texto

O método recomendado para a inserção de textos no site NES Archive atráves da área de administração de cada colaborador é o seguinte:
- Após escolher o tema redija seu texto completo no Bloco de Notas, no Word ou até mesmo em um editor HTML

- Selecione as imagens relacionadas ao seu texto e certifique-se de que a largura máxima delas é de 530 pixels

- Se você estiver trabalhando em um editor HTML, já pode começar a inserir tags básicas de formatação do seu texto; são elas: <h2>, <b>, <i>, <br>, <p>, <div style=”…”>, <table>, <span style=”…”>, <ul> + <li> e <img>

Dando vida online ao seu texto

- Acesse o endereço do painel de administração - http://nesarchive.net/v3/wp-admin/ - e entre com seu usuário e senha

- Leia com atenção os passos a seguir para começar a inserção “quente” do conteúdo

A Tela Inicial

A tela inicial de seu painel de controle é apresenta diversas funções que são descritas na legenda abaixo. Acompanhe na imagem o elemento correspondente:

1 - Escrever: Link para iniciar um novo artigo.

2 - Perfil: Link para a tela de configuração de seus dados pessoais, como e-mail e apelido.

3 - Gerenciar: Edição e remoção de artigos já escritos (caso ainda não tenham sido publicados).

4 - Últimas Atividades: Lista dos últimos textos publicados (os artigos pendentes não constam desta lista).

Escrevendo o Artigo

5 - Campo título: Entre com o título de seu texto.

6 - Aba código do editor: Recomendamos que você faça a inserção de seu texto através da aba de código do editor integrado ao WordPress, pois desta maneira é mais fácil controlar todos os aspectos de seu texto para uma correta inserção.

7 - Categorias: Muita atenção, é imprescindível selecionar a categoria de seu texto corretamente. Analize o conteúdo cuidadosamente, veja onde ele se encaixa melhor e marque na caixa correspondente.

8 - O corpo do texto: Neste espaço você pode digitar o seu texto ou então colar o trabalho pré-construído no editor externo. Não esqueça de certificar-se de que você realmente está trabalhando na aba de CÓDIGO.

9 - Gravar e continuar editando: Esta opção lhe permite salvar o trabalho feito até o momento e continuar sem encerrar a edição.

10 - Gravar: Esta opção salva seu texto e encerra a edição, mas não envia-o para aprovação da administração. Ele permanece em sua conta como um mero rascunho.

11 - Submit for Review: Esta opção finaliza seu trabalho e envia o artigo para a revisão dos administradores. Ao pressionar este botão sua edição irá encerrar e você será jogado para a tela inicial de seu painel de controle.

O corpo do texto

12 - Quebras de linha: É importante notar que ao pressionar ENTER em seu texto durante a edição na aba de Código você estará gerando uma quebra de linha. Dois ENTER irão fazer um parágrafo. Já na aba VISUAL do editor (não mostrada na imagem) um ENTER irá gerar um parágrafo.

13 - <h2>, a tag de título: Sempre que precisar mostrar títulos em seus textos, utilize a tag <h2>.

14 - <b> ou <strong>, a tag de subtítulos: Para subtítulos ou chamadas menos importantes utilize a tag <b>.

15 - Quebras de linha: Como descrito no item 12, as quebras de linha são geradas por apenas um ENTER ou então pelo uso da tag <br>.Veja no exemplo abaixo a aparência atual do texto em construção:

16 - Tag título: Um título de destaque em seu texto

17 - Sub-título: Chamada secundária e menos importante

18 - Quebras de linha: Após cada item
Se você quiser verificar como seu texto está ficando precisa primeiro efetuar uma gravação através do botão Gravar e Continuar Editando. Feito isso, uma nova opção irá surgir no topo esquerdo da caixa do corpo de texto chamada View / Preview, identificada pela letra C na imagem abaixo.

Ao pressionar o link para preview, uma nova janela de seu navegador irá abrir mostrando o atual estado de seu texto.

Se você quiser, já pode considerar o trabalho finalizado e pressionar o botão

Submit for Review, deixando o trabalho de edição complementar a cargo dos administradores. Por favor leve em consideração que encerrar um artigo neste momento poderá causar um atraso na sua publicação, pois irá demandar mais tempo dos revisores encarregados.
Entretanto, se você comparar na imagem a seguir o novo texto com os outros textos já listados na mesma categoria, vai notar que ele foi publicado na íntegra (item A na imagem), contrastando com os outros artigos que possuem apenas um resumo e uma imagem miniatura (item B na imagem). Veja:

Edição complementar

Para corrigir o problema anterior faz-se necessária a edição complementar. Caso você ja tenha apertado em algum momento a opção Submit for Review ou até mesmo esteja retornando para concluir o trabalho iniciado anteriormente em um rascunho, siga os passos descritos:

19 - Gerenciar: Selecione a opção gerenciar na página inicial de seu painel.

20 - Status: Selecione o status de seu texto. Os únicos modos que permitem a edição são Pending review ou Rascunho.

21 - Filter: Utilize o botão Filter para exibir os resultados.

22 - Título: No item 22 temos o título e a categoria do texto exemplo.

23 - Ver: Esta opção abre uma nova janela do navegador exibindo o estado atual do texto

24 - Editar: Caso o texto ainda não tenha sido publicado pelos administradores é possível a edição do mesmo

25 - Apagar: Nesta opção você pode remover o texto da base de dados, mas cuidado, este processo é irreversível!

Criando um bloco com o resumo

Após selecionar a opção Editar no texto exemplo, o próximo passo agora é adicionar uma tag especial que separa a parte inicial do corpo do texto em uma parágrafo de resumo, conforme mostra a próxima figura:

26 - More: Separe ou escreva um parágrafo introdutório ao seu texto.

27 - Parágrafo resumo: Pressione ENTER uma vez ao final dele, e então pressione o botão MORE.

28 - Tag: Uma tag especial irá surgir logo abaixo de seu parágrafo. Pressione ENTER mais uma vez para separa a tag do resto do texto que vem abaixo.

29 - Gravar e continuar editando: Você pode gravar o atual estado do texto agora e prosseguir à próxima etapa que é a inserção da miniatura e imagens.
A imagem a seguir mostra como seu texto irá ficar agora na listagem da categoria, após a inserção da tag MORE. Por favor note que não é possível ao colaborador de conteúdo verificar como irá ficar seu texto na lista de categorias pois o mesmo precisa ser antes aprovado por um administrador.

30 - Texto exemplo: Já usando o parágrafo de introdução.

31 - Texto já publicado por um moderador: Utilizando além da introdução também uma imagem em miniatura.

Inserindo imagens - Miniatura do Resumo

A inserção de imagens é relativamente simple no editor. Você precisa localizar o arquivo ems eu computador para enviar, selecionar o modo de publicação do mesmo, escrever um título, colocar o cursor na posição do texto onde a imagem deve aparecer, e enviar. Veja os detalhes todos a seguir:

32 - Posição do cursor: Posicione o cursor no ponto exato onde você quer que a imagem apareça, neste caso - da miniatura, antes do parágrafo resumo.

33 - Arquivo: Localize a imagem em seu computador. Os formatos válidos são JPG, GIF e PNG. O tamanho máximo na largura deve ser 530 pixels. No caso da miniatura para o resumo deve ser 40×40 pixels. Faça também o acabamento de 1px de borda utilizando um programa gráfico como o Photoshop.

34 - Título e descrição: Cuidado ao inserir o título da imagem! Esta informação será a legenda da mesma em seu texto. Caso não saiba o que escrever, deixe o campo em branco! O campo descrição não tem necessidade de ser preenchido.

35 - Upload: Finalizado o processo, você já pode fazer o upload de seu arquivo.
Após o upload a imagem ainda não vai estar em seu texto. Para isso é necessário um último passo. Veja abaixo:

36 - Tamanho original: Selecione a opção de tamanho original.

37 - Link para: A menos que a imagem seja um link, selecione nenhum.

38 - Enviar para o Editor: E então envie a imagem para o editor. Lembre-se de que ela irá aparecer no lugar em que você posicionar o cursor.

39 - A Imagem no Código: A seleção do item 39 na imagem acima mostra o código correspondente à imagem adicionada ao texto. Para inserir o espaçamento ideal na miniatura, basta escrever align=”left” class=”thumb” dentro da tag da imagem, exatamente como mostra a seleção verde na figura acima, e identificada pelo número 40.

Inserindo imagens - Imagens no corpo do texto

O mesmo processo descrito acima se repete para inserir imagens no corpo do texto. O único ponto a observar é que você não precisa escrever class=”thumb”, pois esta classe é usada somente na miniatura. O único elemento especial utilizado nas imagens dentro de seu texto são os alinhamentos. Você pode escrever align=”right” ou align=”left” para resultados indentificados pelos números 41 e 42, em verde, na imagem abaixo. Note também a class=”thumb” fazendo seu papel no item 40.
Imagens sem nenhum alinhamento especificado serão centralizadas no texto.

Considerações Finais

Lembre-se que a largura máxima das imagens é de 530 pixels. Lembre-se que o tamanho das miniaturas para o resumo é de 40×40 pixels.

E por favor, siga os padrões visuais do site. Utilize <h2> para títulos e <b> para subtítulos. Não faça chamadas coloridas, textos com fontes diferentes ou longos parágrafos em negrito. Isto apenas atrapalha a leitura de seu texto.

Siga OS PADRÕES!

Obrigado!
A equipe de administração NES Archive.