Escrever para a Web

Este capítulo trata das palavras antes das tags. O mapa do site da Oficina Costeira, coletivo fictício de design em João Pessoa, fica explícito: Início, Projetos, Equipe, Agenda, Contato. O exemplo correspondente é 08-escrever-para-a-web, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Escrever para quem escaneia, não para quem lê romance.
• Colocar a conclusão no primeiro parágrafo.
• Evitar “clique aqui”.
• Desenhar um sitemap de cinco páginas.
• Priorizar conteúdo antes do visual.
• Guardar o tom do coletivo fictício, sem dado real.

A pessoa não lê tudo

Na Web a vista salta. Título, lista, palavra em negrito, primeiro período. Só então, se o assunto servir, vem a leitura linear.

Estudos antigos de rastreamento ocular descrevem um desenho em F: topo, depois mais uma linha, depois a coluna esquerda. Não copie o F como dogma. Use a lição: a informação importante não pode nascer no terceiro parágrafo.

A Oficina Costeira se apresenta em uma frase: coletivo fictício de design em João Pessoa. O resto detalha. Não esconda o quê no rodapé.

Regras curtas de texto

• Seja claro. Uma ideia por parágrafo. Frases curtas. Este volume já pede isso nos capítulos; o site do aluno também.
• Pirâmide invertida: conclusão primeiro, contexto depois.
• Palavra carregada de sentido no começo do título e do item de lista.
• Vocabulário de gente: tag, atributo, seletor, regra, publicação, repositório — quando o público for aluno. No site do coletivo, fale de cartaz, orla, oficina, não de jargão solto.
• Nunca “clique aqui”. O link deve fazer sentido fora da frase: Ver projetos , não clique aqui para os projetos.
• Não interrompa com janela, autoplay ou pedição de cadastro. Não há cadastro neste volume.

Corte o rascunho pela metade. Depois pela metade de novo. Leia em voz alta. Se você tropeça, a frase está longa.

Erro comum: texto de cartaz institucional vazio. “Excelência e inovação na orla”. Não diz o que o coletivo faz. Troque por fato fictício concreto: “Três projetos de identidade visual para a Restinga, a Lagoa e o Ateliê da Pedra.”

Inventário e prioridade

Antes de abrir o editor, liste o que existe. Uma tabela basta.

Personagens fictícios do exemplo: Lina Vasconcelos, Rui Pedrosa, Nara Queiroz. Não use nome de aluno nem de autor.

Priorize: o que a visitante precisa no primeiro olhar? Nome do coletivo, o que é, o caminho para Projetos. Agenda e Contato vêm depois. Contato não envia dado: só marcação.

Sitemap da Oficina Costeira

Cinco páginas no primeiro nível. Sem labirinto.

- Início (index.html)
- Projetos (projetos.html)
  - Farol da Restinga (ainda no mesmo arquivo, por enquanto)
  - Guia da Lagoa
  - Ateliê da Pedra
- Equipe (equipe.html)
- Agenda (agenda.html)
- Contato (contato.html)

Toda página liga às outras pelo menu. O Início resume. Projetos lista os três trabalhos inventados. Equipe apresenta as três pessoas fictícias. Agenda mostra encontros de estudo. Contato tem formulário demonstrativo.

Isso é arquitetura da informação: ordem, nome e ligação. Ainda não é CSS.

Interface em texto primeiro

Escreva a página em um arquivo de texto antes das tags. Markdown serve.

# Oficina Costeira

Coletivo fictício de design em João Pessoa.

## O que fazemos
- Identidade para festivais de fotografia na Restinga.
- Guias impressos adaptados para a Web.
- Cartaz e página de exposição temporária.

[Ver projetos](projetos.html)

Depois você marca isso com HTML no capítulo 09. Agora o exercício é o recorte das palavras.

Copie o bloco para index.html só como parágrafos, se quiser ver no navegador. Mude uma linha do menu mental: troque “Trabalhos” por “Projetos”. Preveja que o sitemap e o href devem usar a mesma palavra. Recarregue. Confira.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design em João Pessoa.</p>
    <nav>
      <ul>
        <li><a href="index.html">Início</a></li>
        <li><a href="projetos.html">Projetos</a></li>
        <li><a href="equipe.html">Equipe</a></li>
        <li><a href="agenda.html">Agenda</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </body>
</html>

Tom, adaptação e o que não escrever

O coletivo fala como oficina: direto, local, sem grife inventada em inglês. João Pessoa entra como lugar, não como slogan.

O mesmo conteúdo aparece em tamanhos diferentes: título da aba, primeiro parágrafo, item de lista, futuro cartão de busca. Cada um precisa fazer sentido sozinho.

Não escreva e-mail real, telefone real, CNPJ, depoimento de cliente verdadeiro. Formulário de Contato não envia. Publicação pública deste exercício não é pedida.

Arquivo no disco guarda o texto. A página no navegador mostra o texto. 127.0.0.1 testa o menu. Publicação é outro passo, fora da lista deste capítulo.

Erro comum: nomear a página pagina2.html e o item de menu “Saiba mais”. O sitemap some. Use equipe.html e o rótulo Equipe.

Wireframe de caixas, ainda cinza

Desenhe retângulos: cabeçalho, menu, bloco principal, rodapé. Escreva as palavras reais dentro, em cinza. Sem cor de marca ainda.

A home prioriza o h1 e o parágrafo de definição. Projetos prioriza a lista dos três trabalhos. Não inverta: um carrossel vazio não substitui o nome do projeto.

Leia o Início em voz alta. Se a primeira frase não diz o que é o coletivo, reescreva. Depois metade do restante.

Links do rodapé também precisam de texto útil. Início e Contato bastam. Saiba mais e Clique não.

A página Contato, quando chegar a formulário, avisa que nada é enviado. Esse aviso é conteúdo, não rodapé jurídico de banco.

Arquivo no disco: o Markdown ou o HTML com as palavras. Página no navegador: o scan da visitante. 127.0.0.1: o menu de cinco itens. Publicação: não peça nesta série.

Card sorting, se a equipe fictícia crescer: um papel por projeto. Agrupe Restinga, Lagoa e Pedra sob Projetos, não sob Equipe. Nomes de menu iguais aos arquivos.

Erro de tom: “sinergia na orla”. Troque por ofício: “Cartaz, guia e site de exposição, todos fictícios.”

Rascunho da Equipe, ainda sem HTML caprichado:

<h1>Equipe</h1>
<p>Três pessoas fictícias em João Pessoa.</p>
<ul>
  <li>Lina Vasconcelos — direção de arte.</li>
  <li>Rui Pedrosa — conteúdo e acessibilidade.</li>
  <li>Nara Queiroz — páginas.</li>
</ul>

Mude só a ordem da lista. Preveja o scan de cima para baixo. Recarregue. Confira. A prioridade visual segue a ordem do HTML até existir CSS.

Atividades

1. Reescreva “Clique aqui para ver nossos trabalhos” em um link útil para a Oficina Costeira.
2. Quais são as cinco páginas do sitemap deste volume?
3. Por que o primeiro parágrafo da home deve dizer o que o coletivo é?
4. No exemplo, mude só um rótulo do menu e o title da mesma página. O que você previu nas duas pontas?

Respostas comentadas

1. Algo como Ver projetos. O destino e o assunto vão no texto do link. “Clique aqui” some se a pessoa ouvir só a lista de âncoras.
2. Início, Projetos, Equipe, Agenda e Contato. Arquivos index.html, projetos.html, equipe.html, agenda.html, contato.html.
3. Porque a pessoa escaneia. Se a definição vier tarde, ela já foi embora. Pirâmide invertida: conclusão primeiro.
4. Menu e aba devem usar a mesma palavra. Se só o menu muda, a aba mente. Disco e janela precisam bater depois do save e do recarregar.

Referências

• Títulos HTML
• Elemento nav
• Elemento a
• Estrutura de um documento HTML

O arquivo completo

Referência do exemplo 08-escrever-para-a-web, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}