Como Funciona a Web - Turmas de Informática e DS

🌐

Como Funciona a WEB

Entenda os bastidores da internet: navegadores, servidores, protocolos e muito mais.

📚 Informática · ETEC

🖥️O que é Hospedagem?

📖 Definição

Hospedagem web (hosting) é o serviço que disponibiliza espaço em um servidor para armazenar os arquivos do seu site (HTML, imagens, banco de dados…) e mantê-los acessíveis 24h por dia na internet.

🏠

Hospedagem Compartilhada

Vários sites no mesmo servidor. Barato, ideal para iniciantes.

🏢

Servidor VPS

Servidor virtual privado. Mais controle e desempenho.

🏭

Servidor Dedicado

Servidor físico exclusivo. Máximo desempenho para grandes sistemas.

☁️

Cloud Hosting

AWS, Google Cloud, Azure. Escalável, paga pelo que usa.

🗄️

Hospedagem Gratuita

GitHub Pages, Vercel, Netlify. Ótimo para estudantes.

🇧🇷

Exemplos no Brasil

Locaweb, HostGator, Registro.br, KingHost, UolHost.

🔤O que é um Domínio?

https://Protocolo
www.Subdomínio
etecDomínio
.sp.gov.brExtensão / TLD

🔤 Domínio

É o nome amigável que identifica um site. Por baixo, aponta para um número de IP como 189.112.40.1 — impossível de memorizar no dia a dia!

📒 DNS

O Domain Name System funciona como uma agenda telefônica: converte o nome do domínio (google.com) no endereço IP real do servidor automaticamente.

🇧🇷 Extensões Brasileiras

.com.br .gov.br .edu.br .org.br .net.br

🌍 Extensões Internacionais

.com .org .net .io .tech .dev

📡Protocolos de Comunicação

📖 O que é um Protocolo?

Um protocolo de comunicação é um conjunto de regras e padrões que define como dois dispositivos trocam informações em uma rede. Sem protocolos, computadores de fabricantes e sistemas diferentes não conseguiriam se entender — é como um idioma comum que todos os dispositivos precisam falar.

💡 Analogia

Imagine que dois países precisam fechar um contrato. Para se comunicar, precisam de um idioma em comum, regras de protocolo diplomático e um formato de documento acordado. Na rede de computadores funciona da mesma forma: os protocolos definem o "idioma", a ordem das mensagens e como os erros são tratados.

// tipos de protocolo

📂Principais Tipos de Protocolo

🌐
HTTP / HTTPS

Protocolo Web

Transferência de páginas e dados entre navegador e servidor. O HTTPS adiciona criptografia SSL/TLS.

📧
SMTP / POP3 / IMAP

Protocolo de E-mail

SMTP envia e-mails; POP3 e IMAP fazem o recebimento e sincronização nas caixas de entrada.

📁
FTP / SFTP

Transferência de Arquivos

Protocolo para envio e recebimento de arquivos entre cliente e servidor. O SFTP é a versão segura.

🔒
SSH

Acesso Remoto Seguro

Permite acessar e controlar servidores remotamente de forma criptografada e segura.

🗺️
IP / TCP / UDP

Protocolos de Rede

IP endereça os pacotes; TCP garante entrega confiável e ordenada; UDP é mais rápido, sem confirmação.

📡
DNS

Resolução de Nomes

Traduz nomes de domínio (google.com) para endereços IP. Funciona como a agenda telefônica da internet.

🖨️
DHCP

Configuração Automática

Atribui automaticamente endereços IP aos dispositivos que se conectam a uma rede.

NTP

Sincronização de Tempo

Sincroniza o relógio dos dispositivos na rede para que todos usem o mesmo horário exato.

// detalhamento

🔒HTTP e HTTPS em Detalhe

HTTP

HyperText Transfer Protocol

  • Protocolo de comunicação da web
  • Define como cliente e servidor trocam mensagens
  • ⚠️ Dados em texto puro
  • ❌ Sem criptografia
  • ❌ Vulnerável a interceptações
  • 🚪 Usa a porta 80

HTTPS

HTTP + SSL/TLS (Seguro)

  • Versão segura do HTTP
  • Dados criptografados de ponta a ponta
  • ✅ Cadeado verde no navegador
  • ✅ Certificado SSL/TLS
  • ✅ Obrigatório em bancos, compras etc.
  • 🚪 Usa a porta 443

💡 Analogia

HTTP é como enviar uma carta aberta pelos correios — qualquer um no caminho pode ler. HTTPS é como enviar essa mesma carta dentro de um cofre com senha.

🚪O que são Portas?

📖 Definição

Portas são canais lógicos numerados dentro de um servidor que direcionam cada tipo de tráfego para o serviço correto. O IP é o endereço do prédio e a porta é o número do apartamento — cada serviço "mora" em uma porta específica.

PortaProtocolo / ServiçoUsoCategoria
80HTTPSites web sem criptografiaWeb
443HTTPSSites web segurosWeb
25 / 587SMTPEnvio de e-mailsE-mail
110 / 995POP3 / IMAPRecebimento de e-mailsE-mail
21FTPTransferência de arquivosArquivo
22SSHAcesso remoto seguro ao servidorSegurança
53DNSResolução de nomes de domínioRede
3306MySQLBanco de dados MySQLBanco de Dados
5432PostgreSQLBanco de dados PostgreSQLBanco de Dados

💻Cliente e Servidor

💻
CLIENTE
Quem faz o pedido
➤ REQUEST (pedido)
◀ RESPONSE (resposta)
🖥️
SERVIDOR
Quem responde o pedido

🙋 Cliente

É qualquer dispositivo que solicita um recurso da web: seu celular, notebook, tablet. O navegador é o programa cliente mais comum.

🖥️ Servidor

É um computador sempre ligado que armazena e entrega os arquivos do site (HTML, imagens, vídeos…) quando alguém faz uma requisição.

💡 Como acontece na prática?

Você digita google.com no navegador → O navegador (cliente) envia uma requisição HTTP ao servidor do Google → O servidor processa e devolve os arquivos da página → O navegador exibe o resultado para você.

📨Verbos HTTP e RESTful

📖 O que são Verbos HTTP?

Verbos HTTP (também chamados de métodos HTTP) são comandos que o cliente envia ao servidor para indicar qual ação deseja realizar sobre um recurso. Assim como em português usamos verbos para expressar ações ("buscar", "criar", "atualizar", "deletar"), na web usamos os verbos HTTP para comunicar a intenção de cada requisição.

GET

Buscar / Ler dados

Solicita um recurso do servidor. Não altera nenhum dado. É a ação mais comum — usada toda vez que você abre uma página.

GET /produtos
POST

Criar / Enviar dados

Envia novos dados ao servidor para criar um registro. Usado em formulários de cadastro, login e envio de arquivos.

POST /usuarios
PUT

Atualizar (completo)

Substitui completamente um recurso existente pelos novos dados enviados. Todos os campos do registro são sobrescritos.

PUT /usuarios/42
PATCH

Atualizar (parcial)

Modifica parcialmente um recurso. Apenas os campos enviados são alterados — os demais permanecem intactos.

PATCH /usuarios/42
DELETE

Excluir dados

Remove um recurso do servidor. Após a exclusão, o recurso deixa de existir e não pode ser recuperado pela API.

DELETE /produtos/7
HEAD

Verificar cabeçalho

Igual ao GET, mas sem retornar o corpo da resposta. Útil para verificar se um recurso existe ou checar metadados.

HEAD /arquivo.pdf
// crud x verbos http

🔄Relação entre CRUD e Verbos HTTP

📖 O que é CRUD?

CRUD é o acrônimo das quatro operações básicas de qualquer sistema que trabalha com dados: Create (Criar), Read (Ler), Update (Atualizar) e Delete (Excluir). Os verbos HTTP são a implementação dessas operações na web.

Operação CRUD Verbo HTTP O que faz Exemplo prático
CREATE POST Cria um novo registro Cadastrar um cliente
READ GET Lê / busca dados Listar produtos
UPDATE PUT PATCH Atualiza um registro Alterar endereço
DELETE DELETE Remove um registro Excluir um pedido
// api

🔌O que é uma API?

📖 Definição

API (Application Programming Interface — Interface de Programação de Aplicações) é um conjunto de regras e endpoints que permite que dois sistemas diferentes se comuniquem entre si. Em outras palavras, uma API define como um software pode solicitar serviços ou dados de outro software, sem precisar conhecer seus detalhes internos.

💡 Analogia

Imagine que você está em um restaurante. Você não vai até a cozinha preparar seu prato — você chama o garçom, faz o pedido, e ele traz o resultado. A API é o garçom: você (cliente) faz um pedido padronizado, a API leva ao sistema (cozinha) e traz a resposta de volta. Você não precisa saber como a cozinha funciona por dentro.

✅ Para que serve?

APIs permitem integrar sistemas distintos: um app de delivery consultando o banco de dados do restaurante, um e-commerce consultando o CEP nos Correios, um site exibindo o mapa do Google — tudo isso é feito via API.

🏢 Exemplos do dia a dia

ViaCEP — consulta de CEP
Google Maps API — mapas em apps
Mercado Pago API — pagamentos online
WhatsApp Business API — chatbots
OpenWeather API — previsão do tempo

📥 Requisição

O cliente envia um pedido para a API com um verbo HTTP, uma URL (endpoint) e, quando necessário, um corpo de dados em JSON.

⚙️ Processamento

A API recebe o pedido, valida as informações, acessa o banco de dados ou serviço necessário e prepara a resposta.

📤 Resposta

A API retorna uma resposta em JSON (geralmente) com os dados solicitados e um código HTTP indicando o resultado da operação.

💻 Exemplo — Consultando um CEP via API

Requisição feita pelo cliente:

GET https://viacep.com.br/ws/12630000/json/

Resposta da API em JSON:

{
  "cep": "12630-000",
  "logradouro": "",
  "localidade": "Cachoeira Paulista",
  "uf": "SP"
}
// restful api

🏗️O que é RESTful?

📖 Definição

REST (Representational State Transfer) é um estilo arquitetural para o design de APIs web. Uma API que segue os princípios REST é chamada de RESTful. Ela usa os verbos HTTP de forma padronizada e organiza os recursos em URLs claras e hierárquicas, tornando a comunicação entre sistemas simples, previsível e escalável.

🔗

URL como Recurso

Cada URL representa um recurso específico. Ex: /produtos/5 é o produto de ID 5.

📨

Verbos como Ações

A ação é definida pelo verbo HTTP, não pela URL. Usar /deletar-produto não é RESTful.

📦

Sem Estado (Stateless)

Cada requisição carrega todas as informações necessárias. O servidor não guarda sessão entre pedidos.

🔄

Respostas Padronizadas

As respostas usam formatos padrão como JSON ou XML, fáceis de consumir por qualquer linguagem.

🎯

Códigos HTTP

200 OK · 201 Criado · 400 Erro do cliente · 404 Não encontrado · 500 Erro do servidor.

🏢

Quem usa?

Google, Facebook, Twitter, iFood, Nubank, Mercado Livre — praticamente toda API moderna é RESTful.

💡 Exemplo Prático — API de Produtos

Imagine uma loja virtual com a URL base https://api.loja.com.br/produtos. Uma API RESTful organizaria as operações assim:

VerboURLO que faz
GET /produtos Lista todos os produtos
GET /produtos/7 Retorna o produto de ID 7
POST /produtos Cadastra um novo produto
PUT /produtos/7 Substitui todos os dados do produto 7
PATCH /produtos/7 Atualiza apenas o preço do produto 7
DELETE /produtos/7 Remove o produto 7 do sistema

🚀Resumindo Tudo

🌐

Navegador: Programa que interpreta HTML, CSS e JavaScript e exibe as páginas. Exemplos: Chrome, Firefox, Edge, Safari, Brave.

🖥️

Hospedagem: Serviço que mantém os arquivos do site em um servidor conectado 24h à internet para que qualquer pessoa possa acessá-lo.

🔤

Domínio: Nome amigável (ex: etec.sp.gov.br) que aponta para o IP do servidor através do sistema DNS.

📡

Protocolos de Comunicação: Conjunto de regras que define como dispositivos trocam informações. Exemplos: HTTP/HTTPS (web), SMTP (e-mail), FTP (arquivos), SSH (acesso remoto), TCP/IP (rede).

🚪

Portas: Canais lógicos que direcionam o tráfego ao serviço correto no servidor. HTTP=80, HTTPS=443, SSH=22, MySQL=3306 e assim por diante.

💻

Cliente & Servidor: O cliente (navegador) faz requisições e o servidor responde com os arquivos do site. É a base do modelo que sustenta toda a Web.

📨

Verbos HTTP: Comandos que indicam a ação de uma requisição — GET (buscar), POST (criar), PUT/PATCH (atualizar) e DELETE (excluir). Correspondem às operações CRUD.

🔌

API: Interface que permite a comunicação entre sistemas diferentes. O cliente faz uma requisição a um endpoint, a API processa e devolve os dados em JSON. Exemplos: ViaCEP, Google Maps, Mercado Pago.

🏗️

RESTful: Padrão arquitetural de APIs web que usa verbos HTTP, URLs como recursos, respostas em JSON e comunicação sem estado. Adotado pelas principais empresas de tecnologia do mundo.

Comentários