Módulo 17: Boas Práticas

2. Resumo da Aula Anterior

No módulo passado, aprendeste a caçar erros com o W3C Validator e as DevTools. Agora, vamos aprender a organizar o teu trabalho para que nem sequer chegues a cometer esses erros, seguindo os padrões dos profissionais da indústria.

3. O Que Vais Aprender Hoje

✅ Convenções de nomes de ficheiros (Kebab-case).
✅ Estrutura de pastas profissional (Scalable).
✅ A arte de comentar o código (O "Porquê" vs "O quê").
✅ Versionamento Semântico (SemVer: 1.0.0).

4. Teoria: Ser Arrumado é ser Rápido

Conceito: Boas Práticas não são regras que o browser impõe, são regras que a comunidade criou para que os sites sejam fáceis de manter por equipas e ao longo dos anos.

🍱 Analogia: Uma Cozinha de Restaurante

Imagina que és um Chef:

Código Desarrumado: Ficheiros com nomes como "teste1.html" ou "isto-funciona.css" espalhados pela secretária. É como ter as especiarias misturadas com os detergentes. Vais demorar horas a encontrar o sal.
Boas Práticas: Ficheiros bem nomeados dentro de pastas (/css, /js, /img). É como ter etiquetas em todos os frascos e as facas sempre no mesmo sítio. Mesmo que um novo cozinheiro (programador) chegue hoje, ele sabe onde está tudo.

5. Exemplos Práticos

Exemplo 1: Nomes de Ficheiros (Kebab-case)

O navegador odeia espaços e maiúsculas em URLs.

❌ Ruim: Minha Pagina Inicial.html
❌ Ruim: pagina_de_contacto.html
✅ Bom: minha-pagina-inicial.html
✅ Bom: contacto.html

O uso de hífens (-) é o padrão ouro porque é fácil de ler e aceite por todos os servidores.

Exemplo 2: Comentários com Propósito

Não descrevas o óbvio, explica a intenção.

<!-- ❌ Ruim: Um botão de fechar -->
<button class="close">X</button>

<!-- ✅ Bom: Este botão fecha o modal e limpa os dados do formulário por segurança -->
<button class="close">X</button>

Se o código for óbvio (como um <h1>), não precisas de comentário!

Exemplo 3: Versionamento SemVer

Como comunicar o progresso do teu projeto.

1.0.0

Lançamento oficial (Está pronto!).

1.0.1

Corrigi um pequeno erro visual (Patch).

1.1.0

Adicionei um Modo Escuro (Funcionalidade nova).

2.0.0

Mudei todo o design e apaguei metade das páginas (Mudança radical).

6. Agora é a Tua Vez!

Vamos organizar o teu workspace:

Renomeia todos os teus ficheiros para minúsculas e hífens.
Cria uma pasta chamada assets e move as imagens para lá.
Cria um ficheiro README.md e escreve a versão atual do teu site (ex: v1.0.0).
Adiciona um comentário único no topo do teu main.js com o teu nome e o objetivo do script.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Kebab-case é a lei para nomes de ficheiros na web.
📌 Pastas organizadas reduzem a frustração e o tempo de procura.
📌 Comentários existem para explicar o "Porquê", não o que já estamos a ver.
📌 Usar SemVer ajuda a manter o controlo sobre a evolução do projeto.

9. Desafios Práticos

Desafio 1: O Espaço Proibido

O que acontece se um ficheiro tiver espaços, como meu site.html, ao ser carregado num servidor?

Desafio 2: Clean Code

É melhor ter um ficheiro gigante com 2000 linhas ou 10 ficheiros com 200 linhas cada?

Desafio 3: A Próxima Versão

Se corrigiste 3 erros de digitação e mudaste a cor de um link, qual deve ser o próximo número de versão se a atual é 1.2.0?