Fundamentos da Web
Antes de sair construindo sites e sistemas, vale entender o que acontece por baixo dos panos. Aqui você vai descobrir como a web funciona de verdade — do clique no link até a página aparecer na tela. Sem medo, sem papo de PhD, só o essencial com exemplos do dia a dia. 🚀
Como funciona a Web
Você digita www.google.com no navegador e — zap — a página aparece
em menos de um segundo. Parece mágica, mas por trás existe um processo bem organizado,
com várias etapas acontecendo a toda velocidade. Bora desvendar cada uma!
Pense que você é o navegador e a pizzaria é o servidor. Você pega o telefone (abre o browser), liga para o número certo (encontra o IP via DNS), faz o pedido (HTTP Request) e a pizzaria prepara e entrega (HTTP Response). A pizza chegou? Você come (o browser renderiza a página). Simples! 🍕
O fluxo completo — passo a passo visual
-
Você digita a URL — o navegador recebe o endereço e começa a trabalhar. Já verifica se tem resultado em cache local antes de qualquer coisa.
-
DNS Lookup — o browser pergunta ao DNS: "qual é o IP desse domínio?". O DNS devolve algo como
142.250.79.46. -
Conexão TCP — o browser abre uma conexão com o servidor usando o protocolo TCP (o famoso 3-way handshake: SYN → SYN-ACK → ACK). É como dar um aperto de mão antes de conversar.
-
HTTP Request — o browser envia uma requisição pedindo a página (geralmente um
GET /). -
Servidor processa — o servidor recebe o pedido, busca os arquivos (ou consulta o banco de dados) e monta a resposta.
-
HTTP Response — o servidor devolve o HTML, junto com metadados (status code, tipo de conteúdo, etc.).
-
Renderização — o browser lê o HTML, monta o DOM, aplica o CSS e executa o JavaScript. Pronto: página na tela!
GET / HTTP/1.1
Host: www.exemplo.com
User-Agent: Mozilla/5.0 (Windows NT 10.0)
Accept: text/html,application/xhtml+xml
Accept-Language: pt-BR,pt;q=0.9
Connection: keep-alive
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1523
Cache-Control: max-age=3600
<!DOCTYPE html>
<html lang="pt-BR">...página aqui...</html>- Confundir URL com IP — a URL é o nome legível; o IP é o endereço numérico real.
- Achar que a página vem "pronta" do servidor — o browser ainda precisa montar tudo a partir do HTML.
- Ignorar o cache — muitas vezes o browser nem precisa ir ao servidor; já tem a resposta guardada localmente.
Cliente e Servidor
A web funciona num esquema de pergunta e resposta. Tem quem pergunta e tem quem responde. Essa dupla tem um nome clássico na computação: cliente e servidor.
O cliente nunca acessa o banco de dados diretamente — ele pede ao servidor, que decide o que responder. É uma camada de segurança indispensável.
Cliente (Frontend)
Quem inicia a conversa — faz as requisições e exibe o resultado.
- Roda no dispositivo do usuário
- Lida com HTML, CSS e JavaScript
- O que o usuário vê e clica
- Exemplos: Chrome, Firefox, app React/Vue
Servidor (Backend)
Quem ouve e responde — processa os dados e devolve o que foi pedido.
- Roda em máquinas remotas (datacenter/nuvem)
- Pode usar Node.js, PHP, Python, Go, Java…
- Acessa bancos de dados e serviços externos
- Exemplos: API em Express, servidor Apache/Nginx
Frontend × Backend × Full Stack
| Perfil | O que faz | Tecnologias comuns |
|---|---|---|
| Frontend Dev | Cria a interface visual com a qual o usuário interage | HTML, CSS, JavaScript, React, Vue, Svelte |
| Backend Dev | Lógica de negócio, banco de dados, autenticação, APIs | Node.js, PHP, Python, Java, Go, Ruby |
| Full Stack Dev | Trabalha nos dois lados — o dev do bem e do mal 😄 | Tudo acima + noções de DevOps/infra |
// CLIENTE (browser) — faz uma requisição ao servidor
const resposta = await fetch('https://api.exemplo.com/usuarios');
const dados = await resposta.json();
console.log(dados); // exibe na tela do usuário
// SERVIDOR (Node.js/Express) — responde à requisição
app.get('/usuarios', (req, res) => {
const usuarios = db.buscarTodos(); // consulta o banco de dados
res.json(usuarios); // devolve os dados como JSON
});- Colocar lógica sensível (senhas, chaves de API) no frontend — qualquer um pode inspecionar o código!
- Confundir "frontend" com "só HTML" — apps React/Vue complexos são 100% frontend.
- Esquecer que servidores também podem ser clientes (quando chamam outras APIs).
HTTP e HTTPS
HTTP significa HyperText Transfer Protocol — é o idioma que cliente e servidor usam para conversar na web. Pensa nele como o roteiro da conversa: quem fala primeiro, o que pode perguntar, como deve ser a resposta.
Sem criptografia, os dados trafegam "na clara" pela rede. Alguém com acesso ao seu Wi-Fi (em cafés, aeroportos…) consegue interceptar e ler suas senhas. O HTTPS adiciona a camada TLS/SSL que embaralha tudo — só quem tem a chave certa consegue ler. 🔐
Os Verbos HTTP (Métodos)
Cada requisição usa um verbo que indica a intenção da operação:
| Verbo | Uso | Analogia |
|---|---|---|
| GET | Buscar/ler dados | Pedir o cardápio do restaurante |
| POST | Criar novo recurso | Fazer um pedido novo |
| PUT | Atualizar recurso completo | Trocar o pedido inteiro |
| PATCH | Atualizar parte do recurso | Mudar só a sobremesa do pedido |
| DELETE | Remover recurso | Cancelar o pedido |
Códigos de Status HTTP
O servidor sempre responde com um código numérico que diz como foi a operação:
| Código | Nome | Significado |
|---|---|---|
| 200 | OK | Deu tudo certo! Aqui está o que você pediu. |
| 201 | Created | Recurso criado com sucesso (resposta típica de POST). |
| 301 | Moved Permanently | Essa URL mudou de endereço para sempre. |
| 302 | Found (Redirect) | Vá para outro endereço temporariamente. |
| 400 | Bad Request | Sua requisição está malformada. Erro do cliente. |
| 401 | Unauthorized | Você precisa se autenticar primeiro. |
| 403 | Forbidden | Autenticado, mas sem permissão. Acesso negado. |
| 404 | Not Found | Não encontrado. O clássico dos clássicos. 👻 |
| 500 | Internal Server Error | O servidor bugou. Culpa dele, não sua. |
HTTP vs HTTPS
HTTP
- Dados trafegam em texto puro
- Qualquer um na rede pode interceptar
- Porta padrão:
80 - Não use para dados sensíveis!
HTTPS
- HTTP + camada TLS/SSL
- Dados criptografados ponta a ponta
- Porta padrão:
443 - Obrigatório para qualquer site sério
# Criando um usuário via POST
POST /api/usuarios HTTP/1.1
Host: api.exemplo.com
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiJ9...
{
"nome": "Maria Silva",
"email": "maria@exemplo.com"
}
# Resposta de sucesso
HTTP/1.1 201 Created
Content-Type: application/json
{
"id": 42,
"nome": "Maria Silva",
"criadoEm": "2024-01-15T10:30:00Z"
}mkcert. Browsers modernos já exibem aviso para sites
HTTP. Não deixa essa mancada passar!
DNS — A Agenda Telefônica da Internet
DNS significa Domain Name System. É o sistema que traduz nomes de domínio legíveis
(como google.com) para endereços IP numéricos (como 142.250.79.46) que as máquinas entendem.
Porque ninguém quer decorar 142.250.79.46 em vez de google.com, né? 😅
Você salvou "Mãe" no celular e já ligou pra ela centenas de vezes — mas provavelmente não
sabe o número dela de cor. O DNS faz o mesmo: você digita youtube.com e ele
descobre o número (IP) pra você. Sem DNS, você precisaria decorar o IP de cada site. 😱
Como a resolução DNS funciona
Tipos de Registros DNS
| Tipo | Para que serve | Exemplo |
|---|---|---|
A |
Aponta domínio para um endereço IPv4 | exemplo.com → 192.168.1.1 |
AAAA |
Aponta domínio para um endereço IPv6 | exemplo.com → 2001:db8::1 |
CNAME |
Apelido — aponta para outro domínio | www → exemplo.com |
MX |
Servidor de e-mail do domínio | mail.exemplo.com |
TXT |
Texto livre (verificações, SPF, DKIM) | v=spf1 include:... |
# Consultando DNS pelo terminal
$ nslookup google.com
Server: 8.8.8.8
Address: 8.8.8.8#53
Non-authoritative answer:
Name: google.com
Address: 142.250.79.46
# Usando o dig (mais detalhado)
$ dig google.com A
# Resposta inclui TTL (tempo em cache)
google.com. 300 IN A 142.250.79.46- Impaciência: mudanças podem demorar até 48h para propagar — é o TTL do registro.
- CNAME na raiz: não se usa CNAME no domínio raiz (
exemplo.com), só em subdomínios. - Ponto final faltando: em alguns painéis, CNAME precisa do ponto no fim:
outro.com.
8.8.8.8 (Google) ou
1.1.1.1 (Cloudflare). O da Cloudflare é geralmente o mais rápido do mundo
e tem foco em privacidade. Vale trocar no seu roteador!
APIs
API significa Application Programming Interface. É um conjunto de regras que define como dois sistemas se comunicam. Em outras palavras: é o contrato que diz "se você me pedir desta forma, eu te respondo desta forma".
Você (o app/cliente) não vai direto na cozinha (banco de dados/sistema interno). Você fala com o garçom (API), que leva seu pedido, traz o resultado e garante que você não mexa onde não deve. Elegante, seguro e organizado! 🧑🍳
REST API — o jeito mais popular
REST (Representational State Transfer) é um estilo arquitetural para criar APIs web. Uma API REST usa os verbos HTTP e organiza os dados em recursos (URLs). Cada URL representa algo do mundo real — um usuário, um produto, um pedido.
# Endpoints REST de uma API de produtos
GET /api/produtos # lista todos os produtos
GET /api/produtos/42 # busca o produto id=42
POST /api/produtos # cria novo produto
PUT /api/produtos/42 # substitui produto id=42 completamente
PATCH /api/produtos/42 # atualiza só alguns campos
DELETE /api/produtos/42 # remove produto id=42
# Resposta do GET /api/produtos/42
HTTP/1.1 200 OK
{
"id": 42,
"nome": "Notebook Gamer",
"preco": 4999.90,
"categoria": "eletrônicos",
"emEstoque": true
}Consumindo uma API com JavaScript
// Buscando dados de uma API pública de clima
async function buscarClima(cidade) {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${cidade}&appid=SUA_CHAVE`;
try {
const resposta = await fetch(url);
if (!resposta.ok) {
throw new Error(`Erro HTTP: ${resposta.status}`);
}
const dados = await resposta.json();
console.log(`Temperatura: ${dados.main.temp}°C`);
} catch (erro) {
console.error('Algo deu errado:', erro);
}
}
buscarClima('São Paulo');APIs famosas que você vai usar
- Expor chaves de API no frontend — qualquer um inspeciona o código e rouba sua chave!
- Não tratar erros — APIs ficam fora do ar, têm rate limits e retornam dados inesperados.
- Ignorar rate limits — Excedeu o limite? Leva um 429 (Too Many Requests) e fica bloqueado.
JSON
JSON — JavaScript Object Notation — é o formato de dados mais usado na web hoje. É uma forma de representar dados como texto legível tanto para humanos quanto para máquinas. Se você for trabalhar com APIs (e vai!), vai usar JSON o dia todo, todo dia.
Objeto JSON completo com endereço aninhado
{
"id": 1,
"nome": "João da Silva",
"email": "joao@exemplo.com",
"idade": 28,
"ativo": true,
"telefone": null,
"endereco": {
"rua": "Av. Paulista",
"numero": 1000,
"bairro": "Bela Vista",
"cidade": "São Paulo",
"cep": "01310-100"
},
"hobbies": [
"programação",
"videogame",
"café"
],
"scores": [95, 87, 92]
}Tipos de dados em JSON
| Tipo | Exemplo | Observação |
|---|---|---|
string |
"Olá mundo" |
Sempre aspas duplas |
number |
42, 3.14 |
Sem aspas. Sem separador de milhar. |
boolean |
true, false |
Minúsculo! Não True/False. |
null |
null |
Representa ausência de valor |
array |
[1, "dois", true] |
Pode misturar tipos |
object |
{"chave": "valor"} |
Chaves sempre entre aspas duplas |
JSON.parse e JSON.stringify no JavaScript
// JSON.parse — converte string JSON → objeto JavaScript
const jsonString = '{"nome":"Ana","idade":25}';
const objeto = JSON.parse(jsonString);
console.log(objeto.nome); // "Ana"
console.log(objeto.idade); // 25
// JSON.stringify — converte objeto JavaScript → string JSON
const usuario = { nome: "Carlos", logado: true };
const texto = JSON.stringify(usuario);
console.log(texto); // '{"nome":"Carlos","logado":true}'
// Com indentação (útil para debug e logs):
console.log(JSON.stringify(usuario, null, 2));
// Acessando dados aninhados:
const cidade = objeto.endereco.cidade; // "São Paulo"
const hobby = objeto.hobbies[0]; // "programação"Erros comuns no JSON
// ❌ Trailing comma — vírgula no último item
{
"nome": "Ana",
"idade": 25, // ← essa vírgula quebra tudo!
}
// ❌ Aspas simples — não são válidas em JSON
{
'nome': 'Ana' // ← deve usar aspas DUPLAS
}
// ❌ Chaves sem aspas — JSON não é JavaScript!
{
nome: "Ana" // ← chaves precisam de aspas duplas
}
// ❌ Comentários — JSON puro não suporta
{
"id": 1 // isso vai quebrar o parse
}
// ✅ CORRETO
{
"nome": "Ana",
"idade": 25
}📋 Resumão — Fundamentos da Web
Como funciona a Web
URL → DNS → TCP → HTTP Request → Server → HTTP Response → Render
Cliente e Servidor
Cliente pergunta (browser/app), servidor responde (Node.js/PHP/Python).
HTTP e HTTPS
Verbos (GET/POST/PUT/DELETE), status codes (200/404/500), HTTPS = HTTP + TLS.
DNS
Traduz domínios em IPs. Registros: A, CNAME, MX, TXT. Propagação leva até 48h.
Navegadores
Parse HTML → DOM, CSS → CSSOM, Render Tree, Layout, Paint. DevTools é essencial!
APIs
Contrato entre sistemas. REST usa HTTP + URLs como recursos. JSON como formato.
JSON
Aspas duplas, sem vírgula no final, sem comentários. JSON.parse / JSON.stringify.