Projeto 01 — Perfil semântico

02

Prepare-se — O que você vai construir

• Explicar estrutura de perfil sem depender de uma receita decorada.
• Relacionar navegação entre páginas com a estrutura e o comportamento esperado.
• Aplicar conteúdo independente do estilo em um caso real e em um caso extremo.

Se precisar de apoio, consulte a capítulo anterior e volte a estas tarefas. Não há obrigação de seguir um prazo.

03

Entenda — Modelo mental e estrutura

1. Construa o modelo mental antes da regra

O primeiro projeto reúne o documento mínimo, hierarquia, links e imagens. Ele deve funcionar como um pequeno site mesmo antes de qualquer folha de estilos: identidade, trabalhos, trajetória e contato têm lugar reconhecível. O navegador não recebe uma imagem pronta: ele interpreta o documento, cria estruturas internas e combina regras para chegar ao resultado. Neste capítulo, use estrutura de perfil como ponto de partida. Relacione essa ideia com navegação entre páginas e conteúdo independente do estilo; as três decisões precisam colaborar. Uma declaração isolada pode parecer correta e ainda produzir uma experiência frágil quando o conteúdo muda, o texto aumenta ou outra pessoa navega por teclado.

Descreva primeiro o propósito de estrutura de perfil e a relação que ele mantém com navegação entre páginas. Pergunte primeiro qual informação ou relação precisa existir e só então escolha o elemento, seletor ou propriedade. Esse encadeamento evita decorar receitas sem compreender as consequências. Nomeie o comportamento esperado em uma frase curta, implemente a menor versão capaz de demonstrá-lo e mantenha o código-fonte legível. Se uma solução depende de números mágicos ou de uma ordem acidental, registre a dependência e procure uma alternativa guiada pelo conteúdo.

2. Leia o exemplo em camadas

<body>
  <header><nav aria-label="Principal">…</nav></header>
  <main>
    <article aria-labelledby="perfil-titulo">
      <h1 id="perfil-titulo">Marina Costa</h1>
      <p>Designer de produtos digitais.</p>
    </article>
  </main>
  <footer><p>Contato profissional</p></footer>
</body>

Leia o exemplo de fora para dentro. Identifique a estrutura, depois a regra que controla apresentação e, por fim, o estado que precisa continuar utilizável. O trecho torna estrutura de perfil explícito e deixa conteúdo independente do estilo disponível para evolução sem desmontar a estrutura. Digite o trecho em vez de apenas copiá-lo. Em seguida, troque nomes, quantidade de conteúdo e largura disponível. O objetivo não é preservar a captura de tela do exemplo, mas descobrir quais escolhas continuam corretas quando o cenário deixa de ser ideal.

Observe também o que o código não faz. HTML descreve significado e relações; CSS participa da apresentação e do layout. Quando uma responsabilidade é colocada na camada errada, manutenção e acessibilidade se tornam mais difíceis. Use comentários apenas para explicar uma decisão que o próprio código não consegue tornar óbvia. Comentários que repetem a propriedade ou o nome do elemento acrescentam ruído.

3. Transforme observação em critério

Uma solução forte torna estrutura de perfil reconhecível no código e verifica navegação entre páginas com conteúdo real. Um critério verificável descreve entrada, ação e resultado. Em vez de “ficou bonito”, prefira algo como “o título mantém hierarquia quando o texto dobra” ou “o controle continua visível e operável com Tab”. Verifique o DOM, os estilos calculados e o tamanho real da área disponível. Redimensionar a janela é útil, mas não substitui zoom, teclado, leitor de tela, validação de markup e teste com conteúdo extremo.

A armadilha principal desta etapa é: Criar uma única pilha de divs sem hierarquia e depender de espaçamento visual para explicar o conteúdo.. Corrija a causa antes de empilhar exceções. Desative temporariamente regras, confira qual declaração venceu e reduza o caso até entender o mecanismo. Ao terminar, você deve conseguir explicar por que a solução funciona, quais limites assumiu e como o componente se comporta quando um recurso mais novo não está disponível.

05

Construa — Teste cada decisão no ambiente

Crie uma pasta para o capítulo e preserve uma versão mínima que possa ser aberta diretamente no navegador. Reproduza o exemplo e crie uma segunda versão que aplique conteúdo independente do estilo sem perder estrutura de perfil. Primeiro implemente sem refinamentos visuais. Depois use as ferramentas de desenvolvimento para confirmar estrutura, regras aplicadas e dimensões. Por último, force pelo menos três situações adversas: texto duas vezes maior, largura de 320 CSS pixels e navegação completa por teclado.

Não corrija todos os sintomas de uma vez. Para cada falha, anote a hipótese, a evidência observada e a menor mudança feita. Valide novamente após a correção. Quando houver mais de uma solução possível, escolha pela clareza do contrato, pela adaptação ao conteúdo e pela experiência de quem usa teclado, zoom ou tecnologia assistiva. Guarde uma captura apenas como evidência complementar; o código e os critérios de aceite são a fonte principal da entrega.

06

Pratique — Seis decisões de implementação

Resolva primeiro pelo raciocínio. Consultar o capítulo e testar hipóteses no navegador faz parte do processo; depois, releia as justificativas.

08

Projete — Implemente, compare e refine

Entrega incremental: um site de perfil com três páginas, navegação consistente, uma imagem tratada semanticamente e validação do HTML. Comece descrevendo, em até cinco linhas, quem usará a interface e qual tarefa precisa concluir. Implemente a estrutura e a apresentação em arquivos separados, mantendo nomes coerentes com a função do componente. Inclua um caso de conteúdo real, um caso extremo e o estado de foco. Ao final, escreva uma nota técnica explicando onde aplicou estrutura de perfil, como conferiu navegação entre páginas e qual limite encontrou em conteúdo independente do estilo.

<body>
  <header><nav aria-label="Principal">…</nav></header>
  <main>
    <article aria-labelledby="perfil-titulo">
      <h1 id="perfil-titulo">Marina Costa</h1>
      <p>Designer de produtos digitais.</p>
    </article>
  </main>
  <footer><p>Contato profissional</p></footer>
</body>

Critérios para revisar

• A estrutura comunica estrutura de perfil, o teste de navegação entre páginas foi registrado e conteúdo independente do estilo não impede a tarefa principal.
• Preservar ordem, nome acessível e foco visível enquanto estrutura de perfil é apresentado.
• O código evidencia estrutura de perfil e navegação entre páginas sem depender de números acidentais.
• A nota técnica registra o teste de texto duas vezes maior, largura de 320 CSS pixels e navegação completa por teclado.

09

Retome — Organize sua revisão

• Explique com suas palavras a relação entre estrutura de perfil e navegação entre páginas.
• Reabra o laboratório sem consultar o texto e reconstrua a decisão ligada a conteúdo independente do estilo.
• Aplique o teste “Inspecionar estrutura de perfil, variar navegação entre páginas e confirmar o comportamento com conteúdo independente do estilo.” ao projeto acumulado e registre uma melhoria.

Feche a explicação, tente lembrar um exemplo e depois confira. Retome uma dificuldade no próximo encontro e alguns dias depois; ajuste o intervalo ao que ainda precisa praticar.

Use exemplos concretos na autoavaliação: “consigo explicar com consulta” ou “quero praticar novamente”. Marcar como lida não representa uma certificação.