Pular para conteúdo

Aula 01 - Introdução à Web 🌐

Objetivo

Objetivo: Compreender os fundamentos de como a internet funciona, a relação entre cliente e servidor, e preparar o seu ambiente de desenvolvimento profissional.

1. Como a Internet Funciona? 🌍

Muitas vezes pensamos na internet como uma "nuvem" mágica, mas na verdade ela é uma infraestrutura gigantesca de cabos e servidores conectados ao redor do mundo.

🔌 O Modelo Cliente x Servidor

Toda interação na web acontece seguindo este modelo básico:

  1. Cliente: É você (ou melhor, o seu navegador). Você faz uma Requisição (Request).
  2. Servidor: É um computador potente que "serve" o site. Ele envia uma Resposta (Response).

[!NOTE] Imagine que você está em um restaurante. Você é o cliente, o garçom leva o seu pedido (requisição) para a cozinha (servidor), que então devolve o seu prato (resposta).

📊 Fluxo de Requisição

sequenceDiagram
    participant C as Cliente (Navegador)
    participant S as Servidor (Host)

    C->>S: Requisição HTTP (Quero o site x.com)
    S-->>C: Resposta HTTP (Aqui está o HTML/CSS/JS)
    Note over C: O navegador renderiza a página

2. Navegadores Modernos 🧭

O navegador (Browser) é a ferramenta que traduz o código que escrevemos em interfaces visuais bonitas.

  • Google Chrome: O mais utilizado, excelente motor V8.
  • Firefox: Focado em privacidade e padrões abertos.
  • Edge: Baseado em Chromium (mesmo motor do Chrome).
  • Safari: Padrão da Apple, focado em performance energética.

3. DevTools: O Superpoder do Desenvolvedor 🛠️

Todo navegador moderno possui ferramentas de desenvolvedor integradas. Com elas, podemos inspecionar, editar e depurar sites em tempo real.

Como abrir?

  • Windows/Linux: F12 ou Ctrl + Shift + I
  • Mac: Cmd + Option + I

[!IMPORTANT] A aba Elements permite ver o HTML/CSS de qualquer site na internet. É a melhor forma de aprender observando o que já existe!

4. Estrutura de Projeto 📂

Um projeto web bem organizado é o primeiro passo para um código limpo.

$ mkdir meu-primeiro-site
$ cd meu-primeiro-site
$ touch index.html estilo.css script.js
$ ls
index.html
estilo.css
script.js

[!TIP] Sempre use nomes de arquivos em letras minúsculas, sem espaços e sem acentos para evitar problemas de compatibilidade nos servidores.

5. Mini-Projeto: Explorando a Web 🚀

Sua missão hoje é puramente investigativa:

  1. Abra o site do Google.
  2. Abra o DevTools (F12).
  3. Use a ferramenta de seleção (ícone de seta no canto superior esquerdo do DevTools) e clique no logo do Google.
  4. Tente alterar o texto de algum botão ou cor na aba Elements. (Não se preocupe, você não quebrou o Google, as mudanças são apenas locais!).

6. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre Cliente e Servidor?
  2. O que acontece quando você digita uma URL no navegador e aperta Enter?

Intermediários

  1. Cite 3 navegadores modernos e o motivo de termos ferramentas de desenvolvedor neles.
  2. Por que é recomendado usar nomes de arquivos sem espaços na web?

Desafio 🧠

  1. Pesquise o que significa a sigla HTTP e qual o seu papel fundamental na comunicação web.

Próxima Aula: Vamos criar o nosso primeiro Documento HTML Mínimo! 🏗️