Programação para Web 3

Como a Web Funciona

Prof. Me. Danilo Bueno

Agenda

  1. O modelo cliente-servidor
  2. O protocolo HTTP
  3. Anatomia de uma URL
  4. Métodos HTTP
  5. Códigos de status
  6. Cabeçalhos HTTP
  7. Ferramentas do desenvolvedor (DevTools)

O modelo cliente-servidor

Definição e papéis

Arquitetura em que dois programas se comunicam pela rede com papéis fixos:

  • Cliente: solicita recursos (o navegador)
  • Servidor: atende às solicitações (o site)

"Cliente" e "servidor" são papéis, não tipos de máquina: um mesmo computador pode exercer os dois.

O ciclo requisição–resposta

[ Navegador ]  ──── requisição ───▶  [ Servidor ]
   (cliente)   ◀─── resposta ─────     (site)
  • O cliente sempre inicia a comunicação
  • Para cada requisição, exatamente uma resposta

Características do modelo

  • O servidor permanece em execução, aguardando requisições
  • Cada requisição é independente das anteriores
  • O servidor não toma iniciativa: apenas responde

Essa independência entre requisições é uma decisão de projeto do HTTP: o protocolo é dito stateless (sem estado).

O protocolo HTTP

O que é o HTTP

HyperText Transfer Protocol: o protocolo que define o formato das mensagens entre cliente e servidor.

  • Baseado em pares requisição → resposta
  • Mensagens em texto, com estrutura padronizada
  • HTTPS = HTTP sobre conexão criptografada (TLS)

Estrutura de uma requisição HTTP

GET /noticias/hoje HTTP/1.1Host: www.exemplo.comUser-Agent: Mozilla/5.0Accept: text/html
  • Linha de requisição: método + caminho + versão
  • Cabeçalhos: metadados da mensagem

Estrutura de uma resposta HTTP

HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Content-Length: 1256<!DOCTYPE html><html> ... </html>
  • Linha de status: versão + código + descrição
  • Após a linha em branco: o corpo (o conteúdo)

Anatomia de uma URL

Componentes de uma URL

https://www.exemplo.com:443/blog?tema=css&pagina=2#topo└─┬─┘   └──────┬──────┘└┬┘ └┬──┘└───────┬───────┘└─┬─┘esquema      host     porta caminho  query string  fragmento
  • esquema: o protocolo utilizado
  • host: o servidor de destino
  • porta: implícita: 80 (HTTP) / 443 (HTTPS)
  • caminho: o recurso solicitado

A query string

Parâmetros enviados na própria URL, após o ?:

/livros?categoria=romance&ordem=preco
  • Pares chave=valor, separados por &
  • Usos típicos: busca, filtros e paginação

O fragmento (#secao) não é enviado ao servidor: é de uso exclusivo do navegador.

Métodos HTTP

A semântica dos métodos

O método declara a intenção da requisição:

  • GET: obter/ler um recurso (não altera o servidor)
  • POST: enviar dados para criação ou processamento
  • PUT: substituir um recurso existente
  • DELETE: remover um recurso

Comparação entre GET e POST

GET /busca?termo=notebook HTTP/1.1

Dados transmitidos na URL: visíveis e compartilháveis.

POST /login HTTP/1.1usuario=ana&senha=segredo123

Dados transmitidos no corpo: fora da URL.

Links disparam GET; formulários podem disparar GET ou POST.

Códigos de status

As cinco classes de status

Classe Significado Exemplos
1xx Informativo 100 Continue
2xx Sucesso 200 OK, 201 Created
3xx Redirecionamento 301 Moved, 302 Found
4xx Erro do cliente 400, 403 Forbidden, 404
5xx Erro do servidor 500 Internal Error, 503

4xx: o problema está no pedido. 5xx: o problema está em quem responde.

Cabeçalhos HTTP

Cabeçalhos de requisição e de resposta

Pares Nome: valor com metadados sobre a mensagem.

  • Na requisição: Host (site de destino), User-Agent (identificação do cliente), Accept (formatos aceitos)
  • Na resposta: Content-Type (formato do corpo), Content-Length (tamanho em bytes)

O cabeçalho Content-Type

Determina como o navegador interpreta o corpo da resposta.

Content-Type: text/html         → renderiza como páginaContent-Type: image/png         → exibe como imagemContent-Type: application/json  → dados estruturados

O tratamento do conteúdo é definido pelo cabeçalho, não pela extensão do arquivo.

Ferramentas do desenvolvedor

A aba Network do DevTools

Registra, em tempo real, todas as requisições da página.

Name          Status   Type        Size
index.html    200      document    4.2 kB
estilo.css    200      stylesheet  1.1 kB
logo.png      200      png         8.7 kB

Uma única página gera várias requisições: HTML, CSS, imagens, scripts.

Inspecionando uma requisição

  1. F12 → aba Network → marcar Preserve log
  2. Recarregar a página (F5)
  3. Selecionar uma requisição da lista:
    • Headers: método, URL, status e cabeçalhos
    • Response: o corpo devolvido pelo servidor

Referência rápida

Conceito Definição
Cliente / Servidor Quem solicita / quem atende
HTTP Protocolo das mensagens requisição–resposta
URL Endereço completo do recurso
Query string Parâmetros chave=valor na URL, após ?
GET / POST Obter (dados na URL) / enviar (dados no corpo)
Status 4xx / 5xx Erro do cliente / erro do servidor
Content-Type Formato do corpo da mensagem
DevTools → Network Inspeção das requisições da página (F12)

Obrigado!

Prof. Me. Danilo Bueno
[email protected]