Pular para conteúdo

Aula 01 - Introdução à Web 🌐

O Início da Jornada Front-end

👋 Bem-vindos!

Nesta aula, vamos desbravar como a internet realmente funciona.

Preparem-se para entender o que acontece nos bastidores de cada clique!

Agenda de Hoje 📅

  1. O que é a Internet?
  2. Modelo Cliente x Servidor
  3. Navegadores (Browsers)
  4. Ferramentas do Desenvolvedor
  5. Estrutura de Projetos
  6. Primeiros Passos Práticos

1. O que é a Internet? 🌍

  • Uma rede global de computadores interconectados.
  • Infraestrutura física: cabos submarinos, satélites e roteadores.
  • Um sistema para troca de informações.

🏛️ 2. Modelo Cliente x Servidor

A base da Web! 🚀

👤 O Cliente

  • É quem solicita a informação.
  • Exemplos: Celular, Notebook, Tablet.
  • Na prática, o Navegador age como o cliente.

⚙️ O Servidor

  • É quem armazena e envia a informação.
  • Computadores de alta performance ligados 24h.
  • Responde às requisições dos clientes.

💡 Metáfora do Restaurante

  • Você: Cliente
  • Pedido: Requisição (Request)
  • Cozinha: Servidor
  • Prato Pronto: Resposta (Response)

📊 Fluxo de Comunicação

sequenceDiagram
    participant C as Cliente (Browser)
    participant S as Servidor

    Note over C: Usuário digita URL
    C->>S: Requisição HTTP
    S-->>C: Resposta (HTML/CSS)
    Note over C: Renderização da página

🧭 3. Navegadores (Browsers)

O que eles fazem? 🤔

  • Interpretam o código (HTML, CSS, JS).
  • Renderizam os pixels na tela.
  • Atuam como nossa principal ferramenta de trabalho.

Os Grandes Navegadores 🏆

  • Chrome: Motor V8, o mais popular.
  • Firefox: Independente, foco em privacidade.
  • Safari: Performance para o ecossistema Apple.
  • Edge: Moderno e baseado em Chromium.

🛠️ 4. DevTools (Ferramentas)

Seu melhor amigo! 🤝

  • Inspecione qualquer site.
  • Altere estilos em tempo real.
  • Depure erros de console.

Como abrir? ⌨️

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

Aba Elements 🏗️

  • Mostra a estrutura do DOM (HTML).
  • Permite alterar textos e cores visualmente.

📂 5. Estrutura de Projetos

Como organizar seus arquivos?

Pasta do Projeto 📁

  • Um site é um conjunto de arquivos.
  • Tudo deve estar dentro de uma pasta raiz.

Nomes de Arquivos 📝

  • Use apenas letras minúsculas.
  • Sem espaços (use - ou _).
  • Sem acentos ou caracteres especiais.

O Arquivo Principal 🏠

  • Todo projeto web começa pelo index.html.
  • Os servidores procuram por este nome primeiro automaticamente.

🚀 6. Prática Inicial

  • Abrir o Chrome.
  • Acessar um site popular.
  • Abrir o DevTools.
  • Tentar destruir o layout (brincadeira, apenas alterar!).

Resumo da Aula ✅

  • Internet = Rede de conexões.
  • Web = Requisição e Resposta.
  • Browser = Tradutor de código.
  • DevTools = Raio-X do site.

Próxima Aula 🏗️

Documento HTML Mínimo

Vamos escrever nossa primeira linha de código real!

Dúvidas? 🤔

"A web é a maior biblioteca da história, e agora você está aprendendo a escrever os livros."