Concluir o Mirante e conferir a entrega

Neste capítulo você vai conferir o projeto completo numa cópia extraída e registrar suas decisões. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 15. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 16-projeto-final do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Concluir significa conseguir repetir a tarefa

A referência final reúne os recursos que cresceram nas etapas. Não basta abrir o cabeçalho e declarar que terminou. Percorra agenda, orientações, formulário, mídia, ação opcional, JSON e ferramenta local. Confira uma tentativa vazia e uma válida; teste JSON indisponível e depois recupere a base. Use conteúdo fictício. Registre uma decisão de layout, uma alternativa de mídia e um resultado de falha. Esse registro mostra o que foi aprendido e facilita recuperar o trabalho sem depender de lembrar todas as experiências.

Faça na sua cópia

Use o roteiro na sua cópia final. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

Agenda → orientações → simulação → mídia → ação opcional → extras.
Conferir também: teclado, tela estreita, zoom e falha recuperada.

Mude uma coisa e preveja

Mude somente o texto de uma atividade e faça o percurso completo.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A edição aparece e os fluxos continuam disponíveis. A mudança de conteúdo não deve quebrar seletores ou caminhos.

Se não acontecer

Localize a região afetada. Compare HTML, CSS e apoio com a referência em vez de trocar todo o projeto para consertar uma frase.

Extrair numa pasta nova revela dependências

O pacote contém capítulos, exemplos completos, imagens, manifesto, README e avisos necessários. A pasta .trabalho é interna e fica fora da entrega. Extraia numa pasta nova antes de abrir; alterar arquivos dentro do ZIP pode criar cópias temporárias e impedir salvar como esperado. Cada exemplo deve encontrar seus próprios recursos por caminhos relativos. Não copie a pasta interna de fontes para corrigir uma imagem ausente: isso esconderia a dependência. O teste por HTTP continua local, mesmo quando a pasta no disco muda.

Faça na sua cópia

Extraia a entrega inteira antes de conferir a etapa final. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

python -m http.server 8772 --bind 127.0.0.1

Mude uma coisa e preveja

Troque somente a pasta da cópia: extraia novamente em outro lugar e abra o mesmo exemplo final.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

HTML, recursos e fluxos locais continuam funcionando. A mudança do caminho no disco não exige endereço público.

Se não acontecer

Confira caminhos absolutos ou recursos fora da pasta. Encerre o servidor anterior antes de iniciar o teste da nova cópia.

Próximo passo parte da habilidade necessária

O Mirante não inclui servidor de escrita, contas ou publicação. Isso mantém o percurso focado em decisões de front-end. Uma próxima tarefa pode pedir mais JavaScript, leitura com tecnologias assistivas ou um formulário processado no servidor. Escolha o volume pela habilidade que falta, não pela obrigação de completar todas as pastas. O projeto final precisa ser compreensível antes dessa ampliação. Escreva uma justificativa pequena: qual base fica no HTML, qual complemento depende de script e como a falha foi comunicada. Não transforme o fechamento numa lista de tecnologias que o aluno não usou.

Faça na sua cópia

Registre suas decisões junto da cópia de prática, sem dados pessoais. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

Decisão de layout:
Conteúdo que permanece no HTML:
Complemento opcional:
Falha conferida e recuperada:
Habilidade para o próximo estudo:

Mude uma coisa e preveja

Acrescente somente uma próxima habilidade que pretende estudar e a razão.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O registro aponta um estudo específico, como validação no servidor em PHP ou mais eventos de JavaScript, sem exigir outro framework para concluir.

Se não acontecer

Se a justificativa ficar genérica, volte a uma tarefa concreta do projeto e identifique o que precisaria para ampliá-la.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Faça o percurso final em tela estreita e com zoom de 200%.

2. Extraia uma cópia nova e confira sucesso e falha do JSON.

3. Justifique a base útil, o complemento opcional e um próximo estudo.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Registre elementos alcançados e resultados. Empilhamento é adaptação; campo ou conteúdo inacessível exige corrigir a causa.

2. A cópia encontra recursos locais. Sucesso mostra a lista; falha informa onde continuar. Restaure a referência e encerre o servidor do teste.

3. Agenda e orientações ficam no HTML. Extras acrescentam informação sem retirar a base. O próximo estudo deve corresponder a uma tarefa que exige habilidade nova.

Quando seguir

Você abre a entrega extraída, recupera uma falha e explica suas decisões no projeto. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 16-projeto-final, reproduzida aqui para que você possa conferir sem sair da página.

assets/acao.js

const button = document.querySelector('#orientar');
const message = document.querySelector('#orientacao');
if (button && message) {
  button.hidden = false;
  button.addEventListener('click', () => {
    message.textContent = 'Comece pela agenda e leia a descrição da atividade.';
  });
}