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:

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:

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:

https://app.exemplo.com:443/projetos/42?aba=documentos#resultado

Partes:

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:

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

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

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:

knowledge-ai/

Dentro dela, crie index.html:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knowledge AI</title>
  </head>
  <body>
    <header>
      <h1>Knowledge AI</h1>
    </header>

    <main>
      <h2>Transforme documentos em conhecimento útil</h2>
      <p>
        Organize conteúdos, faça perguntas e encontre respostas acompanhadas
        das fontes utilizadas.
      </p>
      <a href="#recursos">Conhecer recursos</a>

      <section id="recursos">
        <h2>Recursos</h2>
        <ul>
          <li>Organização de documentos</li>
          <li>Busca inteligente</li>
          <li>Respostas com fontes</li>
        </ul>
      </section>
    </main>

    <footer>
      <p>Projeto educacional de Engenharia de IA Aplicada.</p>
    </footer>
  </body>
</html>

Abra o arquivo no navegador.

10. Inspeção da página

No DevTools:

1. localize o elemento <h1>;
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, 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.