F0 — Como funciona a web

Objectivo: perceber o panorama antes de tocar em código. No fim, sabes o que acontece quando escreves um endereço no navegador e carregas Enter. Pré-requisitos: nenhum. Esta aula não tem código.

1. A internet em uma frase

A internet é uma rede de computadores que falam uns com os outros. Quando usas um site, o teu computador pede informação a outro computador que está sempre ligado — e esse devolve a resposta.

2. Cliente e servidor

• Cliente = quem pede. Normalmente o teu navegador (Chrome, Edge, Firefox) no telemóvel ou no PC.
• Servidor = quem responde. Um computador ligado 24h que guarda o site e os dados.

Analogia: num restaurante, tu (cliente) pedes ao empregado (servidor), que traz da cozinha (base de dados).

3. O endereço: URL e domínio

https://www.dcsc.ao/contactos
└─┬─┘   └──────┬─────┘└───┬────┘
protocolo   domínio      caminho

• Protocolo — https (seguro) ou http. Hoje usa-se sempre https.
• Domínio — o nome do site (dcsc.ao). Comprado num registrar.
• Caminho — a página específica dentro do site (/contactos).

4. DNS — a “lista telefónica”

Os computadores não se encontram por nome, mas por número (IP), tipo 188.114.96.1. O DNS traduz o nome (dcsc.ao) no número certo. (Na nossa stack, o DNS é gerido na Cloudflare.)

5. Pedido e resposta (HTTP)

Quando carregas Enter:

1. O navegador pede a página ao servidor (request).
2. O servidor responde com o conteúdo (response) — ou um erro (ex.: 404 = não encontrado).
3. O navegador monta a página no ecrã.

6. Frontend vs Backend

• Frontend = o que vês e tocas no navegador: textos, botões, cores. Feito com HTML + CSS + JavaScript.
• Backend = o que está escondido no servidor: a lógica e os dados (ex.: confirmar um pagamento, guardar um cliente).

7. Do que é feita uma página web

Três linguagens, três papéis:

São exactamente os três módulos seguintes.

✅ Exercícios

1. Anatomia do URL — escreve estes endereços e identifica protocolo, domínio e caminho: https://itlael.ao/renovar · https://www.google.com/search
2. Vê o pedido acontecer — no navegador, abre as Ferramentas de Programador (tecla F12) → separador Network/Rede → recarrega uma página. Vês a lista de pedidos e respostas reais.
3. Cliente ou servidor? — diz onde acontece cada coisa: (a) mostrar um botão vermelho · (b) verificar a tua palavra-passe · (c) guardar um cliente na base de dados · (d) animar um menu.

Respostas (3): a=cliente/frontend · b=servidor/backend · c=servidor/backend · d=cliente/frontend

⚠️ Erros comuns

• Confundir cliente e servidor — o cliente pede, o servidor responde.
• Achar que o site “está dentro do navegador” — o navegador só mostra; o site vive num servidor.
• Tratar http e https como iguais — só o https é seguro (cifrado).

✅ Soluções dos exercícios

1 (anatomia do URL):

• https://itlael.ao/renovar → protocolo https · domínio itlael.ao · caminho /renovar
• https://www.google.com/search → protocolo https · domínio www.google.com · caminho /search

(O exercício 3 já tem as respostas acima.)