UC00622

Criar aplicações em HTML5

Markup semântico, CSS, JavaScript moderno

Curso profissional · 50h · Fundamentos da web

Plano

  1. Web: como funciona
  2. HTML5 — markup semântico
  3. CSS — design e layout
  4. CSS avançado (Flexbox, Grid)
  5. JavaScript fundamentos
  6. DOM manipulation
  7. Responsive design
  8. Acessibilidade e SEO

Bloco 1 · Web

Como funciona

Browser ── HTTP request ──► Servidor
   ▲                            │
   │                            │
   └──── HTML/CSS/JS ◄──────────┘
  • Browser (Chrome, Firefox): cliente.
  • Servidor: aloja ficheiros.
  • HTTP: protocolo de comunicação.
  • HTML/CSS/JS: linguagens base.

Tecnologias web

  • HTML: estrutura (conteúdo).
  • CSS: apresentação (visual).
  • JavaScript: comportamento (interactividade).

Separação de preocupações = código mais limpo.

Setup

  • Editor: VSCode (recomendado).
  • Browser: Chrome / Firefox com DevTools.
  • Servidor local:
    • VS Code "Live Server" extension.
    • Ou python -m http.server 8000.

Bloco 2 · HTML5

Estrutura básica

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A minha página</title>
</head>
<body>
  <h1>Olá mundo</h1>
  <p>Primeira página!</p>
</body>
</html>

Tags semânticas (HTML5)

<header>     Cabeçalho
<nav>        Navegação
<main>       Conteúdo principal
<article>    Artigo independente
<section>    Secção
<aside>      Lateral / sidebar
<footer>     Rodapé

Usar semântica > divs genéricos.

Tags de conteúdo

<h1> a <h6>    Cabeçalhos
<p>            Parágrafo
<ul> <ol>      Listas
<li>           Item de lista
<a href="">    Link
<img src=""    Imagem
     alt="">   (alt obrigatório!)
<video> <audio>  Mídia

Formulários

<form action="/submit" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="msg">Mensagem:</label>
  <textarea id="msg" name="msg"></textarea>
  
  <button type="submit">Enviar</button>
</form>

Input types: text, email, password, number, date, file, checkbox, radio, range, color...

Bloco 3 · CSS

Sintaxe

selector {
  propriedade: valor;
  outra-propriedade: outro-valor;
}

/* Exemplo */
h1 {
  color: blue;
  font-size: 32px;
  margin-bottom: 20px;
}

Cascata: regras mais específicas sobrepõem-se às gerais.

Selectors

/* Elemento */
p { color: black; }

/* Classe */
.destaque { background: yellow; }

/* ID */
#header { height: 80px; }

/* Descendente */
nav a { color: white; }

/* Pseudo-classes */
a:hover { color: red; }
li:first-child { font-weight: bold; }

/* Combinadores */
.btn + .btn { margin-left: 10px; }

Box model

┌─────────────────────────────┐
│      margin                  │
│  ┌───────────────────────┐  │
│  │     border             │  │
│  │  ┌─────────────────┐  │  │
│  │  │   padding        │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content   │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

box-sizing: border-box → largura inclui padding+border.

Cores e tipografia

/* Cores */
color: #ff5733;             /* hex */
color: rgb(255, 87, 51);    /* RGB */
color: hsl(11, 100%, 60%);  /* HSL */
color: var(--primary);      /* variável */

/* Tipografia */
font-family: 'Inter', Arial, sans-serif;
font-size: 16px;            /* px */
font-size: 1rem;            /* relativo ao root */
font-weight: 600;
line-height: 1.5;

Bloco 4 · CSS avançado

Flexbox

.container {
  display: flex;
  justify-content: center;     /* eixo principal */
  align-items: center;         /* eixo cruzado */
  gap: 20px;
}

.item {
  flex: 1;  /* cresce igualmente */
}

Ideal para: navbar, cards row, centering.

Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

/* Span múltiplos */
.item-grande {
  grid-column: span 2;
}

Ideal para: layouts 2D complexos.

Responsividade

/* Mobile first (recomendado) */
.container {
  display: flex;
  flex-direction: column;
}

/* Tablet+ */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* Desktop+ */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Bloco 5 · JavaScript

Hello world

<script>
  console.log("Olá!");
  alert("Aviso!");
</script>

<!-- Ou externo -->
<script src="script.js"></script>

Variáveis

// const (preferido, imutável)
const nome = "Ana";

// let (mutável)
let idade = 25;
idade = 26;

// var (legacy, evitar)

// Tipos
const numero = 42;
const decimal = 3.14;
const texto = "olá";
const booleano = true;
const nada = null;
const array = [1, 2, 3];
const objecto = { nome: "Ana", idade: 25 };

Funções

// Function declaration
function saudar(nome) {
  return `Olá, ${nome}!`;
}

// Arrow function (moderno)
const saudar = (nome) => `Olá, ${nome}!`;
const dobro = x => x * 2;

// Função sem return
const log = (msg) => {
  console.log(msg);
};

// Default params
const greet = (name = "Mundo") => `Hello, ${name}!`;

Estruturas controlo

// If
if (idade >= 18) {
  console.log("adulto");
} else {
  console.log("menor");
}

// For
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// For of
const frutas = ["maçã", "uva"];
for (const fruta of frutas) {
  console.log(fruta);
}

// While
let i = 0;
while (i < 5) {
  console.log(i++);
}

Bloco 6 · DOM

Seleccionar elementos

// Por ID
const titulo = document.getElementById("titulo");

// Por classe (NodeList)
const items = document.getElementsByClassName("item");

// Query selector (CSS-like)
const primeiro = document.querySelector(".item");
const todos = document.querySelectorAll(".item");

Modificar elementos

// Texto
elemento.textContent = "Novo texto";
elemento.innerHTML = "<b>HTML</b>";

// Atributos
elemento.setAttribute("class", "destaque");
elemento.classList.add("active");
elemento.classList.toggle("hidden");

// Estilos
elemento.style.color = "red";
elemento.style.backgroundColor = "yellow";

Events

// Click
botao.addEventListener("click", () => {
  console.log("Clicado!");
});

// Submit
form.addEventListener("submit", (e) => {
  e.preventDefault();  // não recarregar página
  console.log("Submetido!");
});

// Input change
input.addEventListener("input", (e) => {
  console.log("Valor:", e.target.value);
});

Exemplo prático

<button id="btn">Clica</button>
<p id="contador">0</p>

<script>
  const btn = document.getElementById("btn");
  const display = document.getElementById("contador");
  let count = 0;
  
  btn.addEventListener("click", () => {
    count++;
    display.textContent = count;
  });
</script>

Bloco 7 · Responsive

Viewport

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0">

Obrigatório para mobile.

Breakpoints standard

/* Mobile (< 768px): default */

/* Tablet */
@media (min-width: 768px) {
  /* ... */
}

/* Desktop */
@media (min-width: 1024px) {
  /* ... */
}

/* Large desktop */
@media (min-width: 1440px) {
  /* ... */
}

Imagens responsive

<!-- Tamanho proporcional -->
<img src="foto.jpg" alt="" 
     style="max-width: 100%; height: auto;">

<!-- Diferentes resoluções -->
<img srcset="small.jpg 480w, 
             medium.jpg 800w, 
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.jpg">

Bloco 8 · Acessibilidade + SEO

Acessibilidade (a11y)

  • alt em imagens.
  • label em inputs.
  • aria-label quando necessário.
  • contraste suficiente (WCAG AA = 4.5:1).
  • navegação por teclado (Tab).
  • headings hierárquicos (h1 > h2 > h3).

SEO básico

<head>
  <title>Título descritivo (50-60 chars)</title>
  <meta name="description" 
        content="Descrição (150-160 chars)">
  <meta property="og:title" content="Para Facebook/LinkedIn">
  <meta property="og:image" content="og-image.jpg">
  <link rel="canonical" href="https://example.com/pagina">
</head>

Performance

  • Imagens optimizadas (WebP, lazy load).
  • CSS/JS minificados.
  • Cache apropriado.
  • CDN para assets.
  • Métrica: Lighthouse (Chrome DevTools).

UC00622 · resumo

  • HTML estrutura + CSS estilo + JS comportamento.
  • HTML5 semântico: header, nav, main, article, footer.
  • Flexbox + Grid para layouts modernos.
  • JavaScript: const/let, arrow functions, DOM, events.
  • Responsive com media queries.
  • Acessibilidade + SEO desde o início.
  • Base para qualquer framework (React, Vue).

NOTAS DO PROFESSOR 📖 O modelo cliente-servidor Antes de escrever código importa que os formandos visualizem o que acontece quando abrem uma página: o navegador pede ficheiros a um servidor por HTTP e recebe HTML, CSS e JavaScript para mostrar. Este mapa mental ajuda a perceber depois onde corre cada coisa. 🗣️ Pontos a desenvolver oralmente • Acompanhar uma requisição passo a passo, do clique ao render. • Distinguir o que corre no cliente (navegador) do que corre no servidor. • Mostrar o separador de rede das DevTools com pedidos reais.

NOTAS DO PROFESSOR 📖 Três linguagens, três papéis A divisão é clara: HTML é o esqueleto (conteúdo e estrutura), CSS é a pele (aparência) e JavaScript é o sistema nervoso (comportamento). Manter estas responsabilidades separadas torna o código mais fácil de manter e de trabalhar em equipa, com cada pessoa a focar a sua camada. 🗣️ Pontos a desenvolver oralmente • Usar a analogia do corpo (esqueleto, pele, comportamento). • Mostrar uma página com e sem CSS para ilustrar a separação. • Antecipar que o curso aborda as três camadas por esta ordem.

NOTAS DO PROFESSOR 📖 Ferramentas mínimas para começar Para desenvolvimento web basta um editor e um navegador, sem instalações complexas. Convém apresentar as DevTools do navegador desde já — são a ferramenta mais usada no dia-a-dia para inspecionar, depurar e testar. Um servidor local evita problemas com caminhos de ficheiros. 🗣️ Pontos a desenvolver oralmente • Abrir as DevTools e mostrar os separadores Elementos e Consola. • Explicar porque abrir o ficheiro diretamente difere de servir por HTTP. • Demonstrar a extensão Live Server com recarga automática.

NOTAS DO PROFESSOR 📖 O esqueleto de qualquer página Toda a página HTML segue esta estrutura: o `<!DOCTYPE>`, o `<head>` com metadados invisíveis e o `<body>` com o conteúdo visível. Vale a pena explicar cada metadado: o `charset` evita caracteres estranhos e a `viewport` é o que torna a página utilizável em telemóvel. 🗣️ Pontos a desenvolver oralmente • Distinguir o que está no `<head>` (invisível) do `<body>` (visível). • Explicar o `lang="pt"` e o seu valor para acessibilidade e SEO. • Sublinhar que a meta viewport é obrigatória para mobile.

NOTAS DO PROFESSOR 📖 Markup com significado As tags semânticas dizem o que cada parte da página é, não apenas como aparece. Isto beneficia os motores de busca, os leitores de ecrã e a legibilidade do código. Substituir uma sopa de `<div>` por `<header>`, `<nav>`, `<main>` e `<footer>` é uma das marcas de um bom programador front-end. 🗣️ Pontos a desenvolver oralmente • Contrastar uma página feita só com divs e a versão semântica. • Ligar a semântica à acessibilidade (leitores de ecrã) e ao SEO. • Reforçar que `<main>` deve ser único por página.

NOTAS DO PROFESSOR 📖 Os blocos de construção do conteúdo Estas são as tags que se usam mais vezes ao escrever páginas. Importa insistir na hierarquia de cabeçalhos (um único `<h1>`, depois `<h2>`, etc.) e no atributo `alt` das imagens, que é obrigatório para acessibilidade e não opcional. Os links com `href` são a essência da web. 🗣️ Pontos a desenvolver oralmente • Explicar a hierarquia de cabeçalhos e porque não se salta níveis. • Sublinhar que o `alt` descreve a imagem para quem não a vê. • Distinguir listas ordenadas `<ol>` de não-ordenadas `<ul>`.

NOTAS DO PROFESSOR 📖 Recolher dados do utilizador Os formulários são a porta de entrada de dados na web. O par `<label for>` / `id` liga o rótulo ao campo, melhorando usabilidade e acessibilidade — clicar no rótulo foca o campo. Escolher o `type` certo (email, number, date) ativa validação e teclados apropriados sem código extra. 🗣️ Pontos a desenvolver oralmente • Demonstrar a ligação `label for` clicando no rótulo. • Mostrar a validação automática do `type="email"` e do atributo `required`. • Explicar a diferença entre `id` (interno) e `name` (enviado ao servidor).

NOTAS DO PROFESSOR 📖 A anatomia de uma regra CSS Uma regra CSS tem um seletor (a quem se aplica) e um bloco de declarações (propriedade: valor). O nome "cascata" descreve como várias regras se combinam e qual vence em caso de conflito. Perceber a cascata e a especificidade cedo evita muita frustração com estilos que "não pegam". 🗣️ Pontos a desenvolver oralmente • Decompor a sintaxe: seletor, propriedade, valor, ponto e vírgula. • Explicar a cascata com um exemplo de duas regras em conflito. • Mostrar onde colocar o CSS (ficheiro externo é o recomendado).

NOTAS DO PROFESSOR 📖 Apontar com precisão aos elementos Os seletores são a forma de dirigir estilos a elementos específicos. Convém ensinar a preferir classes (reutilizáveis) a IDs (únicos) e a usar pseudo-classes como `:hover` para interatividade sem JavaScript. Dominar seletores é meio caminho andado para escrever CSS eficiente. 🗣️ Pontos a desenvolver oralmente • Comparar seletor de elemento, classe e ID e quando usar cada um. • Demonstrar o `:hover` ao vivo no navegador. • Explicar a especificidade crescente: elemento < classe < ID.

NOTAS DO PROFESSOR 📖 Todo o elemento é uma caixa O box model é um dos conceitos mais importantes de CSS: cada elemento tem conteúdo, padding, border e margin em camadas. A confusão típica é sobre como a largura é calculada — daí a importância do `box-sizing: border-box`, que faz a largura incluir padding e border, tornando os layouts previsíveis. 🗣️ Pontos a desenvolver oralmente • Inspecionar o box model de um elemento nas DevTools. • Distinguir padding (interno) de margin (externo). • Justificar definir `box-sizing: border-box` globalmente no início do CSS.

NOTAS DO PROFESSOR 📖 Cor e texto com unidades certas Há várias formas de expressar cor (hex, RGB, HSL) e variáveis CSS permitem reutilizar a paleta sem repetir códigos. Na tipografia, convém preferir unidades relativas como `rem` a `px` para respeitar as preferências de tamanho do utilizador, o que é também uma questão de acessibilidade. 🗣️ Pontos a desenvolver oralmente • Mostrar a vantagem das variáveis CSS para temas consistentes. • Explicar `rem` vs `px` e o impacto na acessibilidade. • Demonstrar o `line-height` na legibilidade de blocos de texto.

NOTAS DO PROFESSOR 📖 Alinhamento numa dimensão O Flexbox resolve o problema clássico de alinhar e distribuir elementos numa linha ou coluna, incluindo o centrar vertical que durante anos foi difícil em CSS. Convém clarificar a distinção entre eixo principal (`justify-content`) e eixo cruzado (`align-items`), que confunde no início. 🗣️ Pontos a desenvolver oralmente • Demonstrar o centramento perfeito com flex ao vivo. • Explicar a diferença entre os dois eixos com um diagrama. • Mostrar o `gap` como forma moderna de espaçar sem margens.

NOTAS DO PROFESSOR 📖 Layout em duas dimensões Enquanto o Flexbox trata uma dimensão, o Grid permite controlar linhas e colunas em simultâneo, ideal para a estrutura geral da página. A unidade `fr` distribui o espaço disponível em frações, e `repeat()` evita repetição. Convém apresentar Grid e Flexbox como complementares, não concorrentes. 🗣️ Pontos a desenvolver oralmente • Posicionar Grid (2D, estrutura) vs Flexbox (1D, componentes). • Explicar a unidade `fr` e o `repeat(3, 1fr)`. • Mostrar o inspetor de Grid das DevTools.

NOTAS DO PROFESSOR 📖 Uma página, vários ecrãs As media queries permitem aplicar estilos diferentes conforme a largura do ecrã. A abordagem mobile-first (estilos base para telemóvel, depois acrescentar para ecrãs maiores) é a recomendada porque resulta em CSS mais limpo e prioriza o caso mais comum hoje: o acesso por telemóvel. 🗣️ Pontos a desenvolver oralmente • Justificar a estratégia mobile-first com `min-width`. • Demonstrar o redimensionamento na vista responsiva das DevTools. • Mostrar como o mesmo container muda de coluna para linha conforme o ecrã.

NOTAS DO PROFESSOR 📖 Dar vida à página com JavaScript O JavaScript é a camada de comportamento que torna a página interativa. Convém logo distinguir `console.log` (mensagem para o programador, na consola) de `alert` (popup para o utilizador) e desencorajar o uso de alert na prática. Por boa organização, o JS deve ir em ficheiro externo, tal como o CSS. 🗣️ Pontos a desenvolver oralmente • Mostrar a consola das DevTools como ferramenta principal de depuração. • Justificar separar o JavaScript num ficheiro externo. • Desaconselhar `alert` em favor de feedback na própria página.

NOTAS DO PROFESSOR 📖 Declarar variáveis com const e let A regra prática moderna é: usar `const` por defeito e `let` apenas quando o valor precisa de mudar; evitar `var`, que tem regras de âmbito problemáticas. JavaScript é dinamicamente tipado, pelo que a mesma variável pode receber qualquer tipo, mas isso exige disciplina. 🗣️ Pontos a desenvolver oralmente • Justificar preferir `const` e quando recorrer a `let`. • Explicar porque `var` é desencorajado (hoisting, âmbito de função). • Mostrar os tipos básicos e o array e objeto como estruturas compostas.

NOTAS DO PROFESSOR 📖 Duas formas de escrever funções A function declaration e a arrow function fazem o mesmo na maioria dos casos, mas a arrow function é mais concisa e tem um comportamento diferente do `this`, importante mais tarde. As template literals com crase e `${}` são a forma moderna de compor strings, equivalentes às f-strings de Python. 🗣️ Pontos a desenvolver oralmente • Comparar a sintaxe das duas formas com o mesmo exemplo. • Mostrar a forma curta sem chavetas (return implícito) das arrow functions. • Introduzir as template literals para juntar variáveis a texto.

NOTAS DO PROFESSOR 📖 Controlar o fluxo do programa As estruturas de controlo do JavaScript são semelhantes às de outras linguagens em C: `if`, `for`, `while`. O `for...of` é a forma limpa de iterar sobre os valores de um array. Convém alertar para a diferença entre `for...of` (valores) e `for...in` (chaves/índices), uma confusão comum. 🗣️ Pontos a desenvolver oralmente • Distinguir `for...of` de `for...in`. • Mostrar o uso de chavetas para delimitar blocos. • Ligar estas estruturas ao processamento de listas de dados.

NOTAS DO PROFESSOR 📖 Encontrar elementos na página O DOM é a representação da página como uma árvore de objetos que o JavaScript pode manipular. Para alterar algo é preciso primeiro selecioná-lo. O `querySelector` é o mais versátil porque usa a mesma sintaxe dos seletores CSS já aprendidos, reaproveitando esse conhecimento. 🗣️ Pontos a desenvolver oralmente • Mostrar a árvore do DOM no separador Elementos das DevTools. • Ligar os seletores do `querySelector` aos seletores CSS. • Distinguir `querySelector` (o primeiro) de `querySelectorAll` (todos).

NOTAS DO PROFESSOR 📖 Alterar a página dinamicamente Depois de selecionar, pode-se mudar texto, atributos, classes e estilos via JavaScript. Convém alertar para o risco de `innerHTML` com dados do utilizador (vulnerabilidade XSS) e preferir `textContent` quando não se precisa de HTML. Manipular classes com `classList` é a forma recomendada de aplicar estilos. 🗣️ Pontos a desenvolver oralmente • Distinguir `textContent` (seguro) de `innerHTML` (pode injetar código). • Recomendar alterar classes com `classList` em vez de estilos inline. • Demonstrar `toggle` para alternar um estado visual.

NOTAS DO PROFESSOR 📖 Reagir a ações do utilizador O `addEventListener` é a forma moderna de responder a eventos como cliques, submissões e digitação. O objeto do evento (`e`) traz informação útil, e `e.preventDefault()` é essencial em formulários para impedir o recarregamento. Esta é a ponte entre a interface e a lógica. 🗣️ Pontos a desenvolver oralmente • Mostrar vários tipos de evento (click, submit, input). • Explicar o `preventDefault` no contexto de formulários. • Reforçar passar a função sem a invocar (sem parêntesis).

NOTAS DO PROFESSOR 📖 Juntar as peças num exemplo completo Este exemplo integra tudo o que vimos: selecionar elementos, guardar estado numa variável, reagir a um evento e atualizar o DOM. É um excelente ponto para os formandos reproduzirem e experimentarem variações, consolidando o fluxo selecionar → ouvir evento → atualizar. 🗣️ Pontos a desenvolver oralmente • Acompanhar o fluxo completo do clique à atualização do número. • Propor variações (decrementar, repor a zero) como exercício imediato. • Comparar mentalmente com o exemplo declarativo do React, se o grupo conhecer.

NOTAS DO PROFESSOR 📖 A meta tag que torna o site usável em telemóvel Sem a meta viewport, o telemóvel finge ser um ecrã de desktop e encolhe tudo, tornando a página ilegível. Esta única linha é a base de qualquer design responsivo e é frequentemente esquecida por quem começa. Vale a pena mostrar uma página com e sem ela. 🗣️ Pontos a desenvolver oralmente • Demonstrar o efeito de remover a meta viewport num telemóvel. • Explicar o que `width=device-width` e `initial-scale=1` significam. • Reforçar que esta tag vem sempre no `<head>`.

NOTAS DO PROFESSOR 📖 Pontos de quebra para cada tamanho Os breakpoints são as larguras onde o layout muda para se adaptar ao dispositivo. Estes valores (768, 1024, 1440) são convenções comuns, mas o ideal é deixar o conteúdo ditar onde quebra. Numa abordagem mobile-first usam-se `min-width` para acrescentar estilos à medida que o ecrã cresce. 🗣️ Pontos a desenvolver oralmente • Justificar os valores típicos mas relativizar a sua rigidez. • Reforçar a coerência com a estratégia mobile-first e `min-width`. • Sugerir testar em vários tamanhos com a vista responsiva.

NOTAS DO PROFESSOR 📖 Imagens que se adaptam ao dispositivo A técnica básica `max-width: 100%; height: auto` evita que imagens estoirem o layout. O `srcset` vai mais longe: serve resoluções diferentes conforme o ecrã, poupando dados em telemóveis. Imagens são muitas vezes o maior peso de uma página, pelo que esta otimização tem impacto real no desempenho. 🗣️ Pontos a desenvolver oralmente • Demonstrar como uma imagem sem `max-width` quebra o layout. • Explicar o `srcset` e a poupança de dados em redes móveis. • Ligar este tema à secção de performance que vem a seguir.

NOTAS DO PROFESSOR 📖 Web para todos A acessibilidade garante que pessoas com deficiência conseguem usar o site, e em muitos casos é uma obrigação legal. A boa notícia é que muito se consegue com HTML correto: `alt`, `label`, contraste e hierarquia de cabeçalhos. Convém apresentá-la como parte de fazer bem, não como um extra opcional. 🗣️ Pontos a desenvolver oralmente • Demonstrar a navegação por teclado (Tab) numa página. • Mostrar uma ferramenta de verificação de contraste. • Reforçar que markup semântico já entrega grande parte da acessibilidade.

NOTAS DO PROFESSOR 📖 Ser encontrado pelos motores de busca O SEO técnico começa no HTML: um `<title>` e uma `<meta description>` bem escritos influenciam como a página aparece nos resultados de pesquisa. As tags Open Graph controlam o aspeto quando o link é partilhado em redes sociais. São detalhes pequenos com grande impacto na visibilidade. 🗣️ Pontos a desenvolver oralmente • Mostrar como title e description aparecem nos resultados do Google. • Demonstrar uma pré-visualização de partilha com Open Graph. • Explicar o papel do link canónico para evitar conteúdo duplicado.

NOTAS DO PROFESSOR 📖 Sites rápidos retêm utilizadores O desempenho não é um luxo: páginas lentas perdem visitantes e penalizam no SEO. As otimizações principais passam por reduzir o peso dos recursos (imagens, CSS, JS) e usar cache e CDN. O Lighthouse, integrado nas DevTools, dá uma pontuação e sugestões concretas, sendo a ferramenta ideal para medir. 🗣️ Pontos a desenvolver oralmente • Correr uma auditoria Lighthouse ao vivo e ler o relatório. • Explicar lazy loading e o formato WebP para imagens. • Ligar desempenho a SEO e à experiência do utilizador.

NOTAS DO PROFESSOR 📖 As fundações de toda a web Este resumo recapitula o tripé HTML, CSS e JavaScript. Vale a pena reforçar que estes fundamentos não são substituídos pelas frameworks — são a base sobre a qual React, Vue e tudo o resto assenta. Quem domina o HTML semântico, o CSS de layout e o DOM tem o alicerce para qualquer caminho front-end. 🗣️ Pontos a desenvolver oralmente • Pedir aos formandos que liguem cada camada a algo que construíram. • Sublinhar que frameworks pressupõem estes fundamentos, não os dispensam. • Apontar React ou Vue como próximos passos naturais.