Atividade Como a Web Funciona

Disciplina: Programação para Web 3
Assunto: Como a Web funciona (cliente-servidor, HTTP, URL, status, DevTools)
Professor: Prof. Me. Danilo Bueno
Grupos: duplas
Duração: 4 aulas de 50 minutos (em sala)

Importante

Antes de começar, leia o material de apoio sobre como a Web funciona. É imprescindível ler antes de investigar, pois a atividade é justamente para reconhecer, em sites reais, os conceitos apresentados no material. Se tiver dúvidas, releia o material, pergunte ao professor ou aos colegas. Você também pode consultar os slides da aula.

• Material de apoio
• Slides da aula

Contextualização

Antes de construir aplicações web, é preciso enxergar o que realmente acontece quando um navegador abre um site: quem conversa com quem, em que formato viajam as mensagens, e por que às vezes aparece um “404”.

Nesta atividade você e sua dupla assumem o papel de investigadores: vão abrir o “capô” de sites que já existem, usando o DevTools do navegador, e produzir um diagnóstico do que observaram.

Sua entrega desta semana não é código: é um relatório de investigação com o que você viu nas requisições HTTP reais.

Como começar

Crie um documento de relatório para registrar as descobertas da dupla, no editor da sua preferência (Word, Google Docs, LibreOffice). A entrega será em PDF, com o nome:

relatorio-web.pdf

Estruture o documento com estas seções e vá preenchendo ao longo das missões:

Relatório: Como a Web Funciona
Dupla: <nome 1> e <nome 2>

Missão 1: Cliente e servidor
Missão 2: Anatomia das URLs
Missão 3: Métodos e códigos de status
Missão 4: Cabeçalhos e Content-Type

Ferramentas que você vai usar:

• Um navegador (Chrome, Edge ou Firefox) com DevTools (tecla F12 → aba Network).
• Dois sites de apoio, ambos públicos:
  • https://pt.wikipedia.org: um site real e cheio de requisições, para observar o cenário completo.
  • https://httpbin.org: um site feito para testes, que permite provocar status e ver cabeçalhos sob controle.

Dica: na aba Network, marque Preserve log e recarregue a página (F5) para as requisições aparecerem.

Fallback (httpbin fora do ar). O httpbin.org cai com frequência. Se ele não responder, rode uma cópia local com Docker e, em todas as missões, troque https://httpbin.org por http://localhost:8080:

docker run -p 8080:80 kennethreitz/httpbin

Assim, https://httpbin.org/status/404 vira http://localhost:8080/status/404, e o mesmo para /forms/post, /get e /json. Para encerrar, Ctrl+C no terminal.

Como funciona

• A atividade é feita em dupla, mas o relatório final é enviado individualmente por cada integrante no Moodle.
• Cada missão vira uma seção do relatório, respondida com suas próprias palavras e acompanhada de capturas de tela (print) do DevTools que comprovem o que você observou.
• Responda também, dentro do relatório, às perguntas em destaque (marcadas com >). Elas voltam no questionário do Moodle.

Cronograma

Missão 1: Cliente e servidor

Objetivo: enxergar a primeira requisição de uma página e identificar os papéis de cliente e servidor.

1.1. Abra https://pt.wikipedia.org. Antes de recarregar, abra o DevTools (F12) na aba Network, marque Preserve log e então recarregue (F5).

1.2. Localize na lista a requisição do documento HTML (Type = document, normalmente a primeira). Clique nela e, na aba Headers, registre no relatório: o método, a URL completa (Request URL) e o código de status.

1.3. Explique, com suas palavras, quem foi o cliente e quem foi o servidor nessa requisição, e qual dos dois iniciou a conversa.

Nessa primeira requisição, o método foi GET. Por que faz sentido que abrir uma página use GET, e não POST?

Missão 2: Anatomia das URLs

Objetivo: decompor URLs reais em suas partes e observar uma query string sendo usada.

2.1. Ainda na Wikipedia, use a busca do site para procurar por dom casmurro (ou outro termo). Observe a URL que aparece na barra de endereço após a busca. Copie-a para o relatório e separe suas partes: esquema, host, caminho e query string.

2.2. Na aba Network, encontre a requisição gerada por essa busca e confirme o método usado. Registre onde o termo buscado aparece: na URL ou no corpo da requisição?

2.3. Monte, no papel/relatório, uma URL fictícia que buscaria livros de categoria “romance” ordenados por preço num site de sebo, usando query string com dois parâmetros. Explique o que cada parte faria.

A busca colocou o termo na query string (na própria URL). Que vantagem prática isso traz, por exemplo, se você quiser compartilhar o resultado dessa busca com um colega?

Missão 3: Métodos e códigos de status

Objetivo: provocar diferentes códigos de status e distinguir GET de POST.

3.1. No navegador, acesse https://httpbin.org/status/404 e depois https://httpbin.org/status/500. Com o DevTools na aba Network, registre o código e a família (2xx/4xx/5xx) de cada um e explique, em uma frase cada, quem é o responsável pelo erro (cliente ou servidor).

3.2. Provoque um 404 de verdade: na Wikipedia, tente acessar um caminho inventado, como https://pt.wikipedia.org/wiki/PaginaQueNaoExiste12345. Registre o status retornado e explique por que é um erro 4xx e não 5xx.

3.3. Acesse https://httpbin.org/forms/post, preencha o formulário e envie. Na aba Network, encontre a requisição do envio e registre: qual foi o método? Onde foram os dados preenchidos, na URL ou no corpo?

Compare a busca da Missão 2 (GET) com o envio do formulário da Missão 3 (POST). Por que um cadastro de cliente do sebo, com nome e senha, deveria usar POST e não GET?

Missão 4: Cabeçalhos e Content-Type

Objetivo: ler cabeçalhos de requisição e resposta e entender o papel do Content-Type.

4.1. Acesse https://httpbin.org/get. Essa página devolve, no corpo, os cabeçalhos que o seu navegador enviou. Registre no relatório os valores de Host, User-Agent e Accept, e explique com suas palavras o que cada um informa.

4.2. Volte à Wikipedia (Network, recarregue). Compare três requisições de tipos diferentes: o documento HTML, um arquivo de estilo (CSS) e uma imagem. Para cada uma, registre o valor do cabeçalho de resposta Content-Type. O que muda e por que isso importa para o navegador?

4.3. Conte quantas requisições a página inicial da Wikipedia dispara ao carregar (número total de linhas na aba Network após o F5). Explique por que uma única página gera várias requisições.

4.4. Desafio (opcional): acesse https://httpbin.org/json. Observe o Content-Type da resposta e o conteúdo do corpo. Explique por que esse conteúdo não é exibido como uma página normal e o que o Content-Type tem a ver com isso.

Se um servidor devolvesse uma imagem PNG mas com Content-Type: text/html, o que o navegador provavelmente tentaria fazer com aquele conteúdo?

Entrega individual

Cada integrante da dupla deve, individualmente, no Moodle:

1. Responder o questionário da semana (perguntas de reflexão sobre a atividade).
2. Enviar o arquivo relatorio-web.pdf com as quatro missões respondidas e as capturas de tela do DevTools que comprovam as observações. Somente PDF: outros formatos não serão aceitos.