Módulo 16: Validação e Debug

2. Resumo da Aula Anterior

No último módulo, aprendeste a integrar HTML, CSS e JS. Agora que sabes construir sistemas completos, precisas de aprender a garantir que eles estão perfeitos e a encontrar erros rapidamente quando algo corre mal.

3. O Que Vais Aprender Hoje

✅ Como usar o W3C Validator para limpar erros de HTML.
✅ Dominar o Inspecionador de Elementos do browser.
✅ Ler o Console para encontrar erros de JavaScript.
✅ Identificar e corrigir os erros mais comuns de iniciantes.

4. Teoria: Ser um Detetive de Código

Conceito: Validação é o ato de verificar se o teu código cumpre as regras oficiais (W3C). Debugging (Depuração) é o processo de encontrar e remover "bugs" (erros) que impedem o site de funcionar como esperado.

🩺 Analogia: O Exame Médico

Desenvolver sem validar é como ignorar a saúde:

Código sem Erros: É uma pessoa saudável que corre uma maratona sem cansar.
Validadores (W3C): É o check-up anual. O médico diz-te se tens "colesterol alto" (erros escondidos) antes de teres um ataque cardíaco (o site partir no telemóvel do cliente).
DevTools (Console): É o Raio-X. Permite-te ver por dentro do site enquanto ele está a funcionar para perceber exatamente onde está a fratura.

5. Exemplos Práticos

Exemplo 1: Erros de Sintaxe Comuns

O que o validador deteta instantaneamente.

<!-- ERRO: Tag não fechada -->
<div> <p>Texto sem fim...
<!-- ERRO: Atributos duplicados -->
<img src="foto.jpg" src="outra.jpg">
<!-- ERRO: IDs repetidos -->
<button id="btn">A</button> <button id="btn">B</button>

Estes erros podem fazer com que o Google não indexe bem o teu site ou que o CSS não funcione.

Exemplo 2: Usar o Console (O teu melhor amigo)

Mandar mensagens para o "detetive".

console.log("O botão foi clicado!");
console.warn("Cuidado: Esta imagem é muito grande.");
console.error("ERRO CRÍTICO: Não foi possível carregar os dados.");

O utilizador normal não vê isto, mas tu vês no painel F12.

Exemplo 3: O Inspecionador (F12)

Mudar o site em tempo real (apenas no teu browser).

💡 Dica Pro: Clica com o botão direito em qualquer parte do site e escolhe "Inspecionar". Podes mudar cores, textos e tamanhos para testar ideias antes de escreveres no código real.

6. Agora é a Tua Vez!

Vamos caçar erros:

Abre o site validator.w3.org.
Copia o código do teu projeto atual e cola lá.
Lê os avisos (Warnings) e Erros.
Corrige cada um até veres a mensagem: "Document checking completed. No errors or warnings to show."

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Validar código é essencial para garantir compatibilidade entre browsers.
📌 O W3C Validator é a bitola de ouro da qualidade HTML.
📌 As DevTools (F12) permitem ver o interior do site.
📌 Erros de tags abertas ou IDs duplicados são os "bugs" mais frequentes.

9. Desafios Práticos

Desafio 1: O ID Fantasma

O que acontece se tiveres dois elementos com o mesmo id="menu" no mesmo ficheiro?

Desafio 2: Erro 404 no Console

Se vires um erro a dizer "GET .... 404 (Not Found)" no console, o que é que isso significa geralmente?

Desafio 3: O Atalho Mágico

Se o teu teclado não tiver a tecla F12 (como em alguns portáteis), qual é a combinação de teclas alternativa?