Use os exemplos como laboratório: leia o código, preveja o resultado e teste no ambiente de prática. Para guardar uma ideia, selecione qualquer trecho.
CAPÍTULO 48 DE 48
Projeto final — Site completo do briefing à entrega
Neste capítulo, você transforma briefing verificável em uma decisão de implementação que pode ser observada e revisada. Você sairá com uma implementação pequena, evidências de teste e critérios que poderão ser reutilizados nos projetos seguintes.
Escrita, marcações e comentários ficam só neste navegador, separados por capítulo e sem sincronização com a conta. Evite informações sensíveis; limpar os dados do navegador pode remover seus registros.
As seis questões têm correção comentada. Laboratório e projeto são práticas livres, sem execução automática de código.
Prepare-se — O que você vai construir
- Explicar briefing verificável sem depender de uma receita decorada.
- Relacionar sistema de interface com a estrutura e o comportamento esperado.
- Aplicar entrega documentada 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.
Entenda — Modelo mental e estrutura
1. Construa o modelo mental antes da regra
O projeto final exige síntese. Você define público e tarefa, modela conteúdo, constrói HTML semântico, cria um sistema CSS, testa responsividade e acessibilidade, mede recursos e prepara documentação para manutenção. 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 briefing verificável como ponto de partida. Relacione essa ideia com sistema de interface e entrega documentada; 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 briefing verificável e a relação que ele mantém com sistema de interface. 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
<!doctype html>
<html lang="pt-BR">
<head>…metadados próprios da página…</head>
<body>
<a class="skip-link" href="#conteudo">Pular para o conteúdo</a>
<header>…navegação…</header>
<main id="conteudo">…conteúdo do briefing…</main>
<footer>…contato e contexto…</footer>
</body>
</html>
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 briefing verificável explícito e deixa entrega documentada 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 briefing verificável reconhecível no código e verifica sistema de interface 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 é: Considerar pronto quando a página principal parece correta, deixando rotas, estados, conteúdo e manutenção sem revisão.. 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.
Analise — Código em contexto
Uma revisão de código começa pela intenção. Para “Projeto final — Site completo do briefing à entrega”, o requisito é: a solução deve comunicar briefing verificável, preservar sistema de interface e continuar estável quando houver entrega documentada. Analise a pequena variação abaixo e preveja seu resultado antes de abrir o navegador.
Entrega/
├── site funcional
├── README com decisões e execução
├── matriz de testes preenchida
├── inventário de assets e licenças
└── pendências conhecidas sem promessas falsas
A variação isola sistema de interface. Observe o que muda visualmente e o que permanece na estrutura acessível. Faça a leitura em quatro passagens. Na primeira, localize elementos e seletores. Na segunda, acompanhe de onde cada valor vem. Na terceira, imagine conteúdo curto, longo e ausente. Na quarta, percorra o resultado sem mouse. Se a ordem visual divergir da ordem do documento, se um estado existir apenas por cor ou se um campo perder seu rótulo, trate isso como um problema de implementação, não como acabamento opcional.
Compare a variação com o exemplo principal. Escolha uma única mudança e formule uma hipótese: “se eu alterar isto, espero aquilo, porque…”. Execute, observe e registre. Esse ciclo curto ensina mais do que mudar várias propriedades ao mesmo tempo. A resposta importante não é apenas qual trecho funciona, mas qual representa melhor o conteúdo, reduz acoplamento e permanece compreensível para a próxima pessoa que mantiver a página.
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 entrega documentada sem perder briefing verificável. 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.
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.
Confira — Gabarito comentado
Abrir gabarito e explicações completas
E1 — A. A implementação começa pelo contrato do conteúdo. Descreva primeiro o propósito de briefing verificável e a relação que ele mantém com sistema de interface. Isso permite avaliar o resultado por comportamento, não só por aparência.
E2 — C. A evidência precisa exercitar o mecanismo estudado. Executar a matriz completa, validar markup, percorrer por teclado, medir recursos e pedir uma revisão independente. Uma única captura em condição ideal não demonstra robustez.
E3 — B. A armadilha é Considerar pronto quando a página principal parece correta, deixando rotas, estados, conteúdo e manutenção sem revisão. Ela mascara o modelo mental e costuma criar regressões quando conteúdo ou viewport mudam.
E4 — A. A alternativa correta integra acessibilidade ao contrato do componente: Tratar semântica, teclado, foco, contraste, zoom, movimento e mensagens como critérios de aceite desde o briefing. Aparência não pode apagar informação nem operação.
E5 — C. A sequência baseada em evidência reduz o caso e relaciona causa e efeito. Alterações amplas escondem o mecanismo que realmente falhou.
E6 — B. Pronto para revisão significa atender critérios observáveis. Todas as rotas e estados do briefing foram testados, os limites estão documentados e outra pessoa consegue executar e manter a entrega. Isso ainda permite que outra pessoa encontre melhorias.
Projete — Implemente, compare e refine
Entrega incremental: um site de múltiplas páginas escolhido por você, com briefing, conteúdo real, sistema visual, componentes, testes, auditoria e documentação de entrega. 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 briefing verificável, como conferiu sistema de interface e qual limite encontrou em entrega documentada.
Consultar um modelo possível
<!doctype html>
<html lang="pt-BR">
<head>…metadados próprios da página…</head>
<body>
<a class="skip-link" href="#conteudo">Pular para o conteúdo</a>
<header>…navegação…</header>
<main id="conteudo">…conteúdo do briefing…</main>
<footer>…contato e contexto…</footer>
</body>
</html>
O modelo ilustra uma possibilidade. Use os critérios para revisar suas próprias ideias, não para copiar as mesmas frases.
Critérios para revisar
- Todas as rotas e estados do briefing foram testados, os limites estão documentados e outra pessoa consegue executar e manter a entrega.
- Tratar semântica, teclado, foco, contraste, zoom, movimento e mensagens como critérios de aceite desde o briefing.
- O código evidencia briefing verificável e sistema de interface 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.
Até 12.000 caracteres em cada versão. Produção livre, sem correção automática.
Retome — Organize sua revisão
- Explique com suas palavras a relação entre briefing verificável e sistema de interface.
- Reabra o laboratório sem consultar o texto e reconstrua a decisão ligada a entrega documentada.
- Aplique o teste “Executar a matriz completa, validar markup, percorrer por teclado, medir recursos e pedir uma revisão independente.” 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.
SEU PROGRESSO NO CAPÍTULO 48
Um capítulo, no seu ritmo.
— exercícios respondidos
Carregando progresso…Você decide quando marcar este capítulo como lido. Isso não altera seus exercícios nem suas marcações.
Progresso salvo só neste navegador, sem sincronização com sua conta.