# Aula 1.1 - Como a Web funciona
## Identificação
- **Duração:** 2 horas
- **Tipo:** teoria aplicada e laboratório
- **Entrega:** mapa de uma requisição e primeira página HTML
## Introdução
### O que é a Web?
A Web é o conjunto de páginas, sistemas e recursos que acessamos por meio de um navegador. Sites de notícias, lojas virtuais, redes sociais, sistemas bancários e painéis administrativos são exemplos de aplicações da Web.
Quando digitamos um endereço e pressionamos Enter, o navegador precisa localizar outro computador, solicitar arquivos e interpretar a resposta. A página não aparece magicamente: existe uma sequência de comunicação entre cliente, rede e servidor.
### Web e Internet são a mesma coisa?
Não. A Internet é a infraestrutura que conecta dispositivos e redes. A Web é um serviço construído sobre essa infraestrutura.
Uma comparação:
```text
Internet -> estradas e conexões
Web -> um dos serviços que utiliza essas estradas
Navegador -> veículo utilizado para acessar esse serviço
```
E-mail, chamadas de vídeo e jogos on-line também utilizam a Internet, mas não são necessariamente páginas da Web.
### O que faz uma pessoa desenvolvedora Web?
Ela cria as interfaces executadas no navegador, os servidores que processam solicitações, as APIs que conectam sistemas e as regras que protegem e organizam os dados.
Antes de escrever HTML, CSS ou JavaScript, precisamos compreender onde cada parte funciona e como a informação circula. Esta aula cria esse mapa mental.
## Objetivos
Ao final da aula, o aluno deverá conseguir:
1. diferenciar Internet e Web;
2. identificar cliente, servidor, endereço e protocolo;
3. descrever o caminho básico de uma requisição;
4. reconhecer método, URL, status e corpo de uma resposta;
5. criar e abrir uma página HTML;
6. inspecionar a página com o DevTools.
## Pergunta orientadora
> O que realmente acontece entre digitar um endereço e enxergar uma página?
## 1. Internet e Web
A Internet é a infraestrutura que conecta redes e dispositivos. A Web é um dos serviços construídos sobre essa infraestrutura.
Uma analogia útil:
- a Internet é o sistema de estradas;
- os dispositivos são endereços;
- os protocolos são regras de trânsito;
- a Web é um serviço de transporte que utiliza essas estradas.
Outros serviços também utilizam a Internet, como e-mail, chamadas de vídeo e transferência de arquivos.
### Verificação rápida
Classifique cada elemento:
| Elemento | Internet ou Web? |
|---|---|
| Cabo e roteador | Infraestrutura da Internet |
| Navegador | Cliente da Web |
| Página HTML | Recurso da Web |
| HTTP | Protocolo da Web |
| Endereço IP | Identificação na rede |
## 2. Cliente e servidor
O cliente inicia uma solicitação. O servidor recebe a solicitação, executa uma operação e devolve uma resposta.
No nosso cenário:
- o navegador é o cliente;
- a aplicação NestJS será o servidor;
- o MySQL armazenará os dados;
- serviços de IA serão dependências externas do servidor.
Nesta primeira aula, trabalharemos apenas com o navegador e um arquivo local.
## 3. URL
Considere:
```text
https://app.exemplo.com:443/projetos/42?aba=documentos#resultado
```
Partes:
| Parte | Valor | Função |
|---|---|---|
| Protocolo | `https` | Define como ocorre a comunicação |
| Host | `app.exemplo.com` | Identifica o destino |
| Porta | `443` | Identifica o serviço |
| Caminho | `/projetos/42` | Identifica o recurso |
| Cadeia de consulta | `aba=documentos` | Envia parâmetros |
| Fragmento | `resultado` | Aponta para uma região da página |
## 4. DNS
Pessoas preferem nomes como `app.exemplo.com`. Redes encaminham dados utilizando endereços. O DNS ajuda a resolver o nome para um endereço utilizável na comunicação.
Fluxo simplificado:
```text
Nome do site -> consulta DNS -> endereço -> conexão com o servidor
```
O DNS não entrega a página. Ele ajuda o cliente a localizar o destino.
## 5. HTTP
HTTP organiza a comunicação por meio de requisições e respostas.
Uma requisição pode conter:
- método;
- URL;
- headers;
- corpo.
Uma resposta pode conter:
- status;
- headers;
- corpo.
### Métodos mais comuns
| Método | Intenção |
|---|---|
| GET | Consultar |
| POST | Criar ou iniciar processamento |
| PUT | Substituir |
| PATCH | Atualizar parcialmente |
| DELETE | Excluir |
O método expressa intenção. A segurança da operação depende da implementação do servidor, não apenas do nome do método.
### Códigos de status
| Faixa | Significado |
|---|---|
| 2xx | Operação bem-sucedida |
| 3xx | Redirecionamento |
| 4xx | Problema relacionado à requisição |
| 5xx | Falha no servidor |
Exemplos:
- `200 OK`: recurso retornado;
- `201 Created`: recurso criado;
- `400 Bad Request`: dados inválidos;
- `401 Unauthorized`: autenticação necessária ou inválida;
- `403 Forbidden`: usuário identificado, mas sem permissão;
- `404 Not Found`: recurso não encontrado;
- `500 Internal Server Error`: erro não tratado no servidor.
## 6. HTTPS
HTTPS utiliza uma camada segura para proteger a comunicação em trânsito e ajudar a confirmar a identidade do servidor.
HTTPS não corrige:
- senha fraca;
- banco exposto;
- autorização incorreta;
- código vulnerável;
- dados sensíveis enviados ao destinatário errado.
Ele protege o transporte, mas não substitui a segurança da aplicação.
## 7. O caminho completo
Quando o usuário acessa uma aplicação:
1. o navegador interpreta a URL;
2. o nome do host é resolvido;
3. uma conexão segura é estabelecida;
4. o navegador envia uma requisição HTTP;
5. o servidor processa a requisição;
6. o servidor devolve uma resposta;
7. o navegador interpreta HTML, CSS e JavaScript;
8. recursos adicionais geram novas requisições;
9. a interface é apresentada ao usuário.
## 8. Demonstração com DevTools
### Procedimento
1. Abra uma página no navegador.
2. Abra as ferramentas de desenvolvedor.
3. Selecione a aba **Network**.
4. Recarregue a página.
5. Selecione o documento principal.
6. Identifique:
- método;
- URL;
- status;
- tipo do conteúdo;
- tempo;
- tamanho.
### Perguntas
- Quantas requisições foram realizadas?
- Qual delas trouxe o HTML?
- Quais trouxeram CSS, JavaScript ou imagens?
- Houve redirecionamento?
- Alguma requisição falhou?
## 9. Laboratório - Primeira página
Crie a pasta:
```text
knowledge-ai/
```
Dentro dela, crie `index.html`:
```html
Knowledge AI
Transforme documentos em conhecimento útil
Organize conteúdos, faça perguntas e encontre respostas acompanhadas
das fontes utilizadas.
Conhecer recursos
Recursos
- Organização de documentos
- Busca inteligente
- Respostas com fontes
```
Abra o arquivo no navegador.
## 10. Inspeção da página
No DevTools:
1. localize o elemento ``;
2. altere temporariamente seu texto;
3. recarregue a página;
4. observe que a alteração desapareceu;
5. edite o arquivo no editor;
6. recarregue novamente.
### Conclusão
Alterações feitas apenas no DevTools modificam a representação atual da página. Para persistirem, precisam ser realizadas no código-fonte ou nos dados usados para gerar a página.
## 11. Exercício de fixação
Adicione à página:
- uma seção chamada “Como funciona”;
- três passos numerados;
- uma seção chamada “Para quem é”;
- pelo menos três perfis de usuário;
- um link para retornar ao início.
Não utilize CSS nesta aula.
## 12. Desafio individual
Desenhe o fluxo para a seguinte situação:
> Um usuário envia uma pergunta sobre um documento e recebe uma resposta gerada por IA.
O desenho deve conter:
- navegador;
- front-end;
- API;
- MySQL;
- serviço de IA;
- requisições e respostas;
- local onde a credencial do serviço de IA deve permanecer.
## 13. Erros comuns
### Confundir Internet com Web
A Web utiliza a Internet, mas os termos não são sinônimos.
### Acreditar que uma página usa apenas uma requisição
HTML, CSS, scripts, fontes, imagens e dados podem gerar requisições diferentes.
### Tratar todo erro como `500`
O status deve representar corretamente o resultado da operação.
### Colocar credenciais no navegador
O código entregue ao navegador pode ser inspecionado. Credenciais de serviços devem permanecer em ambiente controlado pelo back-end.
### Pensar que HTTPS torna toda aplicação segura
HTTPS protege a comunicação em trânsito. Autenticação, autorização, validação e armazenamento continuam sendo responsabilidades da aplicação.
## 14. Lista de verificação de entrega
- [ ] O arquivo se chama `index.html`.
- [ ] O idioma está definido como `pt-BR`.
- [ ] A página possui `title`.
- [ ] Existe apenas um título principal.
- [ ] O conteúdo utiliza `header`, `main`, `section` e `footer`.
- [ ] Os links funcionam.
- [ ] Não há erro visível no console.
- [ ] O fluxo da aplicação com IA foi desenhado.
- [ ] O aluno consegue explicar requisição e resposta.
## 15. Critérios de aceite
A entrega será aceita quando:
1. abrir corretamente no navegador;
2. apresentar todas as seções solicitadas;
3. utilizar HTML legível e indentado;
4. não expor nenhuma credencial;
5. o aluno identificar método, URL e status de uma requisição;
6. o aluno explicar onde front-end, back-end, MySQL e IA aparecem no fluxo do projeto.
## 16. Perguntas para revisão
1. Qual é a diferença entre Internet e Web?
2. O que o DNS resolve?
3. Qual é a função de uma URL?
4. Qual é a diferença entre `401` e `403`?
5. Por que uma página pode produzir várias requisições?
6. O que HTTPS protege?
7. Por que uma chave de API não deve ficar no JavaScript do navegador?
## Próxima aula
Na [Aula 1.2](02-html-semantico.md), a página será reorganizada com HTML semântico, formulários, imagens acessíveis e uma estrutura adequada para mecanismos de busca e leitores de tela.