Fundamentos da Web e Ambiente Profissional

Objetivos do Módulo

Introduzir o funcionamento da Web moderna e preparar o estudante para utilizar um ambiente profissional de desenvolvimento Front-end contemporâneo, compreendendo:

hospedagem e domínio;
DOM e CSSOM;
processo de carregamento de páginas;
ferramentas profissionais;
organização de projetos;
workflow moderno;
uso produtivo e crítico de IA no desenvolvimento web.

Base curricular do módulo:

1. Hospedagem e Domínio

Fundamentação Teórica

Para que um site fique acessível na Internet, ele precisa ser armazenado em um servidor conectado permanentemente à rede. Esse processo é chamado de hospedagem.

O domínio é o nome amigável utilizado para acessar o site.

Exemplo:

Domínio: www.exemplo.com
Hospedagem: servidor físico ou em nuvem onde os arquivos do site estão armazenados.

Conceitos Fundamentais

Conceito	Descrição
Domínio	Nome do site
Hospedagem	Local onde os arquivos ficam armazenados
Servidor Web	Software que entrega páginas
DNS	Traduz domínio para IP
Upload	Envio dos arquivos para o servidor

Fluxo Simplificado

Usuário digita o domínio.
O DNS encontra o IP.
O navegador envia uma requisição.
O servidor responde com HTML, CSS e outros arquivos.
O navegador renderiza a página.

Exemplo 1 — Estrutura mínima de site

Arquivo: `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>Meu Primeiro Site</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Meu Site</h1>
    </header>

    <main>
        <p>Site hospedado na Web.</p>
    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 40px;
}

header {
    background-color: #222;
    color: white;
    padding: 20px;
}

p {
    font-size: 18px;
}

Exemplo 2 — Estrutura simulando um site profissional

Estrutura de Pastas

meu-site/
│
├── index.html
├── style.css
├── imagens/
│   └── logo.png
└── paginas/
    └── sobre.html

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Empresa X</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <img src="imagens/logo.png" alt="Logo da empresa">
        <nav>
            <a href="paginas/sobre.html">Sobre</a>
        </nav>
    </header>

    <main>
        <h1>Página Inicial</h1>
    </main>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: sans-serif;
}

header {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #333;
    padding: 20px;
}

a {
    color: white;
    text-decoration: none;
}

Referências

Livros

HTML & CSS: Design and Build Websites
Learning Web Design

Sites

2. DOM e CSSOM

Fundamentação Teórica

Quando o navegador recebe o HTML, ele cria uma estrutura em árvore chamada DOM (Document Object Model).

O CSS gera outra estrutura chamada CSSOM (CSS Object Model).

O navegador combina:

DOM;
CSSOM;

para construir a Render Tree, responsável pela renderização visual da página.

Representação Conceitual

DOM

html
 ├── head
 └── body
      ├── h1
      └── p

CSSOM

body {
   color: black;
}

Exemplo 1 — Estrutura básica DOM + CSS

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Título Principal</h1>

    <p>Parágrafo de exemplo.</p>

</body>
</html>

Arquivo: `style.css`

body {
    background-color: white;
}

h1 {
    color: blue;
}

p {
    color: gray;
}

Explicação

O HTML gera o DOM.
O CSS gera o CSSOM.
O navegador combina ambos para renderizar os elementos.

Exemplo 2 — Inspeção com DevTools

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">

    <title>DevTools</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="card">
        <h2>Produto</h2>
        <p>Descrição do produto.</p>
    </div>

</body>
</html>

Arquivo: `style.css`

.card {
    width: 300px;
    padding: 20px;
    background-color: #eee;
    border-radius: 10px;
}

Atividade

Abrir o Chrome.
Pressionar F12.
Inspecionar os elementos.
Alterar propriedades CSS em tempo real.
Observar o DOM sendo atualizado.

Para saber mais sobre “Inspeção com DevTools” clique no link.

Referências

Livros

CSS: The Definitive Guide
JavaScript: The Definitive Guide

Sites

3. Processo de Carregamento de Páginas

Fundamentação Teórica

O carregamento de uma página ocorre em várias etapas:

Requisição HTTP;
Download do HTML;
Construção do DOM;
Download do CSS;
Construção do CSSOM;
Render Tree;
Layout;
Paint;
Composição visual.

Exemplo 1 — CSS bloqueando renderização

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Renderização</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <h1>Página carregada</h1>

</body>
</html>

Arquivo: `style.css`

body {
    background-color: black;
    color: white;
}

Observação

O navegador precisa baixar e interpretar o CSS antes de renderizar corretamente a página.

Exemplo 2 — Otimização básica

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Performance</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <img src="banner.webp" alt="Banner otimizado">

</body>
</html>

Arquivo: `style.css`

img {
    width: 100%;
}

Discussão

imagens otimizadas reduzem tempo de carregamento;
WebP melhora performance;
CSS organizado reduz processamento.

Referências

Livros

High Performance Browser Networking

Sites

4. VS Code e Ferramentas Profissionais

Fundamentação Teórica

O VS Code tornou-se o editor dominante no ecossistema Front-end moderno devido:

extensibilidade;
integração com Git;
DevTools;
produtividade;
suporte ao ecossistema Web.

Extensões Fundamentais

Extensão	Finalidade
Live Server	Servidor local
Prettier	Formatação automática
HTML CSS Support	Auxílio CSS
Auto Rename Tag	Renomeação automática
Path Intellisense	Autocomplete de caminhos

Exemplo 1 — Estrutura mínima

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>VS Code</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <h1>Projeto Front-end</h1>

</body>
</html>

Arquivo: `style.css`

h1 {
    color: darkblue;
}

Exemplo 2 — Uso do Prettier

HTML mal formatado

<h1>titulo</h1><p>texto</p>

HTML formatado automaticamente

<h1>titulo</h1>

<p>texto</p>

Referências

Sites

Visual Studio Code
Prettier Official Site
Livros
Web Development with Node and Express

5. Organização de Pastas e Convenções

Fundamentação Teórica

Projetos profissionais utilizam organização padronizada para:

manutenção;
escalabilidade;
legibilidade;
colaboração.

Estrutura Recomendada

projeto/
│
├── index.html
├── css/
│   └── style.css
├── imagens/
├── paginas/
└── assets/

Exemplo 1 — Organização simples

Arquivo: `index.html`

<link rel="stylesheet" href="css/style.css">

Arquivo: `css/style.css`

body {
    font-family: Arial;
}

Exemplo 2 — Convenções de nomenclatura

Correto

minha-pagina.html
style.css
hero-banner.webp

Evitar

Minha Página FINAL 2.html
ESTILO-NOVO.css

Referências

Sites

MDN File Paths

Livros

Clean Code

6. Workflow Moderno Front-end

Fundamentação Teórica

Workflow é o conjunto de práticas utilizadas durante o desenvolvimento.

O objetivo é:

padronização;
produtividade;
organização;
manutenção.

Estrutura Recomendada

projeto/
│
├── index.html
├── css/
├── imagens/
├── components/
└── README.md

Exemplo 1 — Separação de responsabilidades

HTML

<button class="botao">Comprar</button>

CSS

.botao {
    background-color: green;
    color: white;
}

Discussão

HTML = estrutura;
CSS = apresentação.

Exemplo 2 — Projeto modular

Estrutura

components/
    card.css
    button.css

Arquivo: `button.css`

.botao {
    padding: 12px 20px;
}

Referências

Livros

Refactoring UI

Sites

Frontend Developer Roadmap

7. IA Aplicada ao Desenvolvimento Web

Fundamentação Teórica

Ferramentas de IA podem:

acelerar desenvolvimento;
gerar estruturas HTML;
sugerir CSS;
auxiliar debugging;
explicar erros.

Entretanto:

IA pode gerar código incorreto;
IA pode violar acessibilidade;
IA pode criar código redundante;
revisão humana é obrigatória.

Exemplo 1 — Prompt para geração de HTML

Prompt

Crie uma landing page simples usando HTML5 semântico e CSS3 moderno.

Revisão necessária

Verificar:

semântica;
acessibilidade;
organização;
redundância.

Exemplo 2 — IA auxiliando debugging

Código com problema

Arquivo: `index.html`

<h1 class="titulo">Olá</h1>

Arquivo: `style.css`

.title {
    color: red;
}

Problema

A classe HTML:

titulo

não corresponde ao CSS:

title

Uso da IA

Pergunta:

Por que meu CSS não está aplicando?

A IA pode identificar:

divergência de nomes;
erro de nomenclatura;
inconsistência entre HTML e CSS.

Engenharia Básica de Prompts

Estrutura recomendada

[Tarefa]
[Contexto]
[Restrições]
[Objetivo]

Exemplo

Crie um menu responsivo em HTML5 e CSS3.
Use Flexbox.
Não utilize JavaScript.
Mantenha acessibilidade básica.

Referências

Sites

Livros

AI Engineering

Fim da Aula 02

Linguagem e Técnica de Programação I – Aula 02

Fundamentos da Web e Ambiente Profissional

Objetivos do Módulo

1. Hospedagem e Domínio

Fundamentação Teórica

Conceitos Fundamentais

Fluxo Simplificado

Exemplo 1 — Estrutura mínima de site

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Estrutura simulando um site profissional

Estrutura de Pastas

Arquivo: index.html

Arquivo: style.css

Referências

Livros

Sites

2. DOM e CSSOM

Fundamentação Teórica

Representação Conceitual

DOM

CSSOM

Exemplo 1 — Estrutura básica DOM + CSS

Arquivo: index.html

Arquivo: style.css

Explicação

Exemplo 2 — Inspeção com DevTools

Arquivo: index.html

Arquivo: style.css

Atividade

Referências

Livros

Sites

3. Processo de Carregamento de Páginas

Fundamentação Teórica

Exemplo 1 — CSS bloqueando renderização

Arquivo: index.html

Arquivo: style.css

Observação

Exemplo 2 — Otimização básica

Arquivo: index.html

Arquivo: style.css

Discussão

Referências

Livros

Sites

4. VS Code e Ferramentas Profissionais

Fundamentação Teórica

Extensões Fundamentais

Exemplo 1 — Estrutura mínima

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Uso do Prettier

HTML mal formatado

HTML formatado automaticamente

Referências

Sites

5. Organização de Pastas e Convenções

Fundamentação Teórica

Estrutura Recomendada

Exemplo 1 — Organização simples

Arquivo: index.html

Arquivo: css/style.css

Exemplo 2 — Convenções de nomenclatura

Correto

Evitar

Referências

Sites

Livros

6. Workflow Moderno Front-end

Fundamentação Teórica

Estrutura Recomendada

Exemplo 1 — Separação de responsabilidades

HTML

CSS

Discussão

Exemplo 2 — Projeto modular

Estrutura

Arquivo: button.css

Referências

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `css/style.css`

Arquivo: `button.css`

Arquivo: `index.html`

Arquivo: `style.css`