Manter o conteúdo quando recursos falham

Neste capítulo você vai preservar agenda e orientações quando CSS ou JavaScript não estão disponíveis. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 11. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 12-web-resiliente 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.

Identifique o que a pessoa veio buscar

O aluno visita a página para saber quais atividades existem e como se orientar. Essas informações estão no HTML, antes de qualquer carregamento adicional. O CSS organiza a apresentação e o JavaScript oferece ações opcionais. Melhoria progressiva é acrescentar uma capacidade sem retirar a base útil. Isso não significa que toda aplicação pode executar todas as tarefas sem script; significa decidir qual base faz sentido para o projeto e dizer o que depende de outro recurso. No Mirante, agenda e orientações não dependem da simulação nem de JSON.

Faça na sua cópia

Leia agenda e orientações no HTML. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<h2 id="agenda">Agenda de prática</h2>
<p>Horários inventados, sem reserva ou inscrição real.</p>

Mude uma coisa e preveja

Mude somente o nome de um horário no HTML e recarregue.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A informação principal muda sem exigir uma resposta de JavaScript ou pedido de JSON.

Se não acontecer

Se o horário estiver apenas num script, a base perdeu essa informação. Compare com a referência e devolva o conteúdo necessário ao HTML.

CSS indisponível muda a apresentação

O navegador possui estilos próprios para o HTML. Se a folha do projeto não carregar, títulos, parágrafos, listas e controles nativos ainda podem aparecer. A página não mantém o mesmo desenho, mas precisa continuar com uma ordem compreensível. Um link desenhado apenas como imagem de fundo pode perder seu nome quando a apresentação falha. O Mirante conserva textos reais para menu, agenda e orientações. A experiência não exige apagar arquivos: um caminho errado temporário basta para observar a diferença.

Faça na sua cópia

Confira o link da folha CSS. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<link rel="stylesheet" href="assets/styles.css">

Mude uma coisa e preveja

Troque somente styles.css por sem-estilo.css na cópia.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A apresentação muda, mas a ordem e os nomes principais permanecem legíveis. Restaure o caminho depois.

Se não acontecer

Confira a página inteira. Não aprove apenas o cabeçalho; agenda e orientações também precisam estar presentes.

JavaScript indisponível precisa de uma explicação

A simulação usa script e não recebe dados num servidor. Sem JavaScript, seu botão continua desabilitado e a mensagem noscript explica a condição. A informação de visita continua no texto. Isso é uma limitação explícita, não uma falsa promessa de funcionamento completo. Quando criar outro projeto, diferencie conteúdo necessário e ação que pode depender de script ou servidor. Retirar todo o HTML e esperar que uma aplicação o reconstrua aumenta a dependência de sucesso do código. Esta página mantém uma base simples e oferece complemento quando disponível.

Faça na sua cópia

Abra a referência com JavaScript desativado numa cópia ou contexto de teste. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<noscript>
  <p>A simulação está indisponível sem o apoio de JavaScript.</p>
</noscript>

Mude uma coisa e preveja

Desative somente JavaScript e recarregue.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Agenda e orientações continuam. A simulação não envia dados e apresenta sua limitação. Reative JavaScript depois.

Se não acontecer

Não confunda apagar uma tag script com testar noscript: noscript responde à disponibilidade de scripting do navegador.

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. Identifique três informações essenciais que já estão no HTML.

2. Confira a página com CSS indisponível e restaure o caminho.

3. Confira sem JavaScript e explique qual ação ficou indisponível.

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. Agenda, descrição das atividades e orientações de visita são conteúdo necessário. Elas não são criadas somente depois de um pedido externo.

2. A base conserva ordem e nomes. Um desenho diferente não é perda de informação; texto ausente exige corrigir o HTML.

3. A simulação depende do apoio e fica indisponível. Isso é explicado, sem envio acidental; as informações de visita permanecem.

Quando seguir

Você reconhece a base útil e comunica quais capacidades dependem de outros recursos. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

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

assets/simulacao.js

const form = document.querySelector('#visita');
const send = document.querySelector('#simular');
const status = document.querySelector('#retorno');
if (form && send && status) {
  send.disabled = false;
  form.addEventListener('submit', event => {
    event.preventDefault();
    status.textContent = 'Simulação concluída. Nada foi enviado ou guardado.';
    status.focus();
  });
  form.addEventListener('reset', () => { status.textContent = ''; });
}