Bloco 1: Fundação Tech & Desenvolvimento Acelerado (9 Horas)

Estruturas, Estilos e Comportamentos na Web

Bloco 1: Fundação Tech
Objetivos Gerais deste Bloco

Ao final das primeiras 9 horas, você dominará o funcionamento do navegador, saberá estruturar páginas limpas e semânticas de acordo com padrões modernos de SEO, criará layouts responsivos profissionais e dará vida a interfaces com scripts interativos em JavaScript.

⏱️ Horas 1-3: Estrutura e Semântica (HTML5 & Antigravity)

Hora 01: O Mapa da Web e o Novo Paradigma

O objetivo desta primeira hora é nivelar o conhecimento, apresentar as "regras do jogo" e demonstrar como a inteligência artificial muda radicalmente a forma como construímos para a web.

🏗️ A Tríade da Web Moderna (A Metáfora da Construção)

Pense no desenvolvimento web através de uma analogia física de construção civil:

A Tríade da Web Moderna: HTML, CSS e JavaScript

🌌 Apresentando o Antigravity

🤖 O que é um LLM (Large Language Model)?

LLM (Grande Modelo de Linguagem) é a tecnologia de inteligência artificial por trás de ferramentas como o Gemini e o copiloto do Antigravity. Trata-se de um modelo matemático treinado com um volume massivo de textos (livros, artigos, páginas da web e código-fonte) para prever e gerar linguagem humana ou código com alto nível de coerência.

🧠 Potencializando o Trabalho (A Mudança de Mindset)

Deixamos de ser apenas "digitadores de código" para assumir o papel de arquitetos de soluções. Dominar a formulação de pedidos precisos (engenharia de prompt) permite entregar componentes inteiros funcionando em questão de segundos, acelerando exponencialmente o processo de prototipagem e desenvolvimento.

🌐 O que é um Site?

Um site (ou sítio eletrônico) é um conjunto de páginas web interligadas, hospedadas em servidores e acessíveis através de um domínio de internet (como jorgebatista.com). Cada página é composta por arquivos estruturados contendo informações que seu navegador sabe interpretar (HTML, CSS e JavaScript).

🔄 O Modelo Cliente-Servidor (A Metáfora do Restaurante)

A comunicação fundamental da internet se baseia em duas partes principais:

O Modelo Cliente-Servidor: Requisição e Resposta

🏠 Ambiente Local vs. Ambiente Hospedado

1. Primeiros Passos com HTML (Linguagem de Marcação)

O primeiro ponto crucial: HTML não é uma linguagem de programação (ela não possui lógica de decisão, loops ou cálculos). Trata-se de uma Linguagem de Marcação de Hipertexto (HyperText Markup Language), usada para estruturar e dar significado ao conteúdo da tela através de etiquetas chamadas "tags".

Estrutura Básica: Tags, Propriedades e Estilos

Toda tag HTML segue uma estrutura padrão:

<tag nome_propriedade="valor" style="propriedade_css: valor;"> Conteúdo Visível </tag>

Dimensões Essenciais: Width e Height

Para controlar o tamanho ocupado por qualquer caixa (elemento) na página, usamos duas propriedades principais de estilo CSS:

A Divisão Mestra: <head> vs. <body>

Todo documento HTML se divide em duas grandes partes após a tag raiz <html>:

Elementos de Conexão e Mídia: Links e Imagens

Um site moderno vive de conexões e conteúdo visual. Para isso, usamos duas tags fundamentais:

⏱️ 4.1 HTML5 Semântico

O HTML5 revolucionou a forma como organizamos as páginas. Antigamente, havia a famosa "Sopa de Divs", onde todas as divisões do site eram criadas usando a genérica tag <div> (ex: <div class="topo">, <div class="rodape">). Isso tornava o código confuso e ilegível para motores de busca como o Google (SEO).

Hoje, se você quiser que seu site posicione bem no Google, você e a IA precisam utilizar as tags semânticas corretas:

<header>

Representa o topo do site, contendo geralmente a marca principal e o menu de navegação.

<main>

O conteúdo principal da página. Deve existir apenas **um** por documento e englobar a informação única da página.

<section>

Define blocos de assunto dentro da página (ex: Seção de Serviços, Seção de Planos, Contato).

<footer>

O rodapé do site. Abriga informações de copyright, links secundários e redes sociais.

Metáfora Visual

Imagine o HTML5 semântico como a planta de uma casa: a tag <header> é o hall de entrada, as tags <section> são os diferentes cômodos (quarto, sala, cozinha), o <main> indica a área útil principal habitável e o <footer> é a área externa nos fundos.

2. Código Base do Projeto Âncora: HTML do SmartCopy AI

Abaixo está a estrutura semântica inicial que criaremos para a interface da nossa ferramenta:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartCopy AI | Gerador de Copywriting Persuasivo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="app-header">
        <div class="brand">🚀 SmartCopy AI</div>
        <span class="status-badge">Modo Beta</span>
    </header>

    <main class="app-container">
        <section class="editor-section">
            <h1>Otimize sua Copy com Inteligência Artificial</h1>
            <p>Insira o seu título ou texto de vendas atual e escolha uma fórmula de conversão.</p>
            
            <form id="copy-form">
                <div class="form-group">
                    <label for="input-text">Texto Original:</label>
                    <textarea id="input-text" placeholder="Ex: Aprenda programação hoje mesmo." required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="formula-select">Fórmula de Copy:</label>
                    <select id="formula-select">
                        <option value="aida">AIDA (Atenção, Interesse, Desejo, Ação)</option>
                        <option value="pas">PAS (Problema, Agitação, Solução)</option>
                    </select>
                </div>
                
                <button type="submit" class="btn-generate">Gerar Variações</button>
            </form>
        </section>

        <section class="preview-section">
            <h2>Resultado Gerado pela IA</h2>
            <div id="result-box" class="placeholder-box">
                Seu texto gerado aparecerá aqui...
            </div>
        </section>
    </main>

    <footer class="app-footer">
        <p>&copy; 2026 SmartCopy AI. Desenvolvido na Mentoria de IA.</p>
    </footer>
</body>
</html>
Copiloto IA: Prompt para Gerar Estrutura no Antigravity

Utilize este prompt no chat da IA para que ela crie ou melhore a estrutura semântica e tags meta de acessibilidade do seu site:

"Quero criar a estrutura HTML5 semântica para uma ferramenta web de copywriting. Ela precisa ter um header com logo e indicador de status, uma seção principal com um formulário que contenha campo de texto, seleção de fórmula persuasiva e botão, além de uma área lateral para exibir o resultado. Inclua tags de acessibilidade (como aria-labels e for nos inputs) e tags meta de SEO em português brasileiro."

⏱️ Horas 4-6: Estilização e Responsividade (CSS3 Moderno)

1. Box Model e Disposição com Flexbox e Grid

Tudo na web é uma caixa (Box Model). Para alinhar essas caixas lado a lado, ou empilhá-las em telas de celulares, usamos seletores modernos do CSS:

2. Folha de Estilo Inicial: style.css

:root {
    --void: #06080f;
    --surface: #0f1318;
    --slate: #1c2028;
    --soft: #9aa0b0;
    --bright: #eaecf2;
    --accent: #0084ff;
}

body {
    background-color: var(--void);
    color: var(--soft);
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

.app-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--slate);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--bright);
}

.app-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.editor-section, .preview-section {
    background-color: var(--surface);
    border: 1px solid var(--slate);
    border-radius: 12px;
    padding: 2rem;
}

textarea {
    width: 100%;
    min-height: 120px;
    background-color: var(--void);
    border: 1px solid var(--slate);
    color: var(--bright);
    border-radius: 8px;
    padding: 0.75rem;
    resize: vertical;
}

.btn-generate {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.btn-generate:hover {
    background-color: #006cd4;
}

/* Responsividade Mobile-First */
@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 1fr;
    }
}
Copiloto IA: Prompt para Layout Responsivo com CSS Moderno
"Escreva regras CSS modernas e responsivas usando variáveis CSS para o layout da aplicação SmartCopy AI. O estilo deve seguir uma estética escura sofisticada (fundo quase preto #06080f, painéis cinza escuro #0f1318, bordas finas e botões com cantos arredondados azuis). Use CSS Grid para dividir a tela ao meio em computadores e empilhar em dispositivos móveis abaixo de 768px."

⏱️ Horas 7-9: Dinâmica e Comportamento (JavaScript)

1. O DOM e a Interatividade

O DOM (Document Object Model) é a representação do seu HTML na memória do navegador. Usando JavaScript, podemos acessar esse DOM, escutar eventos (como cliques em botões) e alterar dinamicamente o conteúdo da tela sem precisar recarregar a página.

2. Script de Controle: app.js

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('copy-form');
    const inputText = document.getElementById('input-text');
    const formulaSelect = document.getElementById('formula-select');
    const resultBox = document.getElementById('result-box');

    form.addEventListener('submit', (event) => {
        // Evita o recarregamento padrão da página ao enviar formulário
        event.preventDefault();
        
        const originalText = inputText.value;
        const chosenFormula = formulaSelect.value;
        
        resultBox.innerText = 'Processando com Inteligência Artificial...';
        resultBox.style.color = 'var(--accent)';

        // Simulação de chamada assíncrona da IA
        setTimeout(() => {
            let copyResult = '';
            
            if (chosenFormula === 'aida') {
                copyResult = `📢 ATENÇÃO: ${originalText}!\n` +
                             `🎯 INTERESSE: Descubra como economizar tempo e focar no que importa.\n` +
                             `💎 DESEJO: Domine a tecnologia que as grandes empresas usam diariamente.\n` +
                             `⚡ AÇÃO: Clique aqui agora e garanta sua vaga!`;
            } else {
                copyResult = `❌ PROBLEMA: Você se sente travado tentando escrever textos persuasivos?\n` +
                             `🔥 AGITAÇÃO: Perder clientes porque suas páginas não convertem é frustrante.\n" +
                             `✅ SOLUÇÃO: Com o SmartCopy AI, você gera variações profissionais em 3 segundos.`;
            }
            
            resultBox.innerText = copyResult;
            resultBox.style.color = 'var(--bright)';
        }, 1500);
    });
});
Copiloto IA: Prompt para Lógica Interativa
"Crie um código JavaScript puro (ES6) que escute o clique de envio de um formulário. Ele deve ler o valor de um textarea e de um seletor dropdown. Em seguida, deve atualizar uma div de resultados exibindo uma mensagem temporária de 'Carregando...' e, logo após, aplicar uma alteração no texto contido na div simulando duas respostas de copy baseadas nas fórmulas AIDA ou PAS."
Voltar para a página anterior ← Visão Geral