UC02833 · Desenho e construção de interfaces web
Aulify · Componente Tecnológica

Desenho e construção de interfaces web

HTML5 semântico, CSS moderno, responsivo, acessibilidade
UC02833 · 50 horas · 4,5 pontos Nível 4 · TDS · Ano 3
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Resultados de aprendizagem

  1. Estruturar páginas com HTML5 semântico.
  2. Estilizar com CSS moderno (Flexbox, Grid).
  3. Construir layouts responsivos.
  4. Aplicar acessibilidade e boas práticas.
O frontend é a primeira impressão. Funcional + acessível + bonito — por esta ordem.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Bloco 1 · HTML5

Estrutura semântica

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Elementos semânticos

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aulify</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>
      <section>...</section>
    </article>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>
</html>

<div> é o último recurso. Tag semântica primeiro.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Porquê semântica

  • Acessibilidade — leitores de ecrã entendem a estrutura.
  • SEO — motores de busca dão peso a <h1>, <article>.
  • Manutenção — código auto-documentado.
<!-- MAU -->
<div class="header"><div class="title">...</div></div>

<!-- BOM -->
<header><h1>...</h1></header>
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Formulários

<form action="/registar" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="idade">Idade</label>
  <input type="number" id="idade" name="idade" min="13" max="120">

  <fieldset>
    <legend>Plano</legend>
    <label><input type="radio" name="plano" value="free"> Grátis</label>
    <label><input type="radio" name="plano" value="pro"> Pro</label>
  </fieldset>

  <button type="submit">Registar</button>
</form>

<label for> ligado ao id — clicável e acessível.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Bloco 2 · CSS

Estilizar

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Seletores e cascata

/* Elemento */
p { color: #333; }

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

/* ID (evitar para estilo) */
#topo { position: sticky; }

/* Descendente */
nav a { text-decoration: none; }

/* Estado */
button:hover { opacity: .8; }
input:focus { outline: 2px solid blue; }

Especificidade: inline > ID > classe > elemento. Evita !important.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Box model

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

* { box-sizing: border-box; }
/* width passa a incluir padding e border */
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Variáveis CSS

:root {
  --cor-primaria: #6366f1;
  --espaco: 16px;
  --raio: 8px;
}

.botao {
  background: var(--cor-primaria);
  padding: var(--espaco);
  border-radius: var(--raio);
}

Centraliza o design. Mudar 1 linha → muda tudo.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Bloco 3 · Layout

Flexbox e Grid

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Flexbox · 1 dimensão

.barra {
  display: flex;
  justify-content: space-between; /* eixo principal */
  align-items: center;            /* eixo cruzado */
  gap: 16px;
}

.item { flex: 1; }        /* cresce igual */
.logo  { flex: 0 0 auto; } /* tamanho fixo */

Ideal para: navbars, toolbars, alinhar elementos numa linha.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Grid · 2 dimensões

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

/* Responsivo automático */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

Ideal para: galerias, dashboards, layouts de página inteira.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Bloco 4 · Responsivo

Mobile-first

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Media queries

/* Base: mobile (sem media query) */
.container { padding: 16px; }

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

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

Mobile-first: começar pelo pequeno, adicionar para ecrãs maiores.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Unidades responsivas

Unidade Significado
px Pixel fixo
% Relativo ao pai
rem Relativo à raiz (recomendado p/ tipografia)
em Relativo ao elemento
vw / vh % da viewport
fr Fracção (grid)
clamp() min, ideal, max 
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Bloco 5 · Acessibilidade

A11y · para todos

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Princípios WCAG

  • Contraste — texto/fundo ≥ 4.5:1.
  • Alt text em imagens informativas.
  • Teclado — tudo navegável sem rato.
  • Foco visível — não remover outline sem alternativa.
  • Labels em todos os inputs.
  • Hierarquia de headings (h1 → h2 → h3, sem saltar).
  • ARIA só quando HTML semântico não chega.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Exemplos

<!-- Imagem informativa -->
<img src="grafico.png" alt="Vendas subiram 30% em Maio">

<!-- Imagem decorativa -->
<img src="enfeite.svg" alt="">

<!-- Botão só com ícone -->
<button aria-label="Fechar">✕</button>

<!-- Skip link -->
<a href="#main" class="skip">Saltar para conteúdo</a>
Testar com Lighthouse, axe DevTools e navegação só por teclado (Tab).
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Bloco 6 · Ferramentas

Workflow moderno

Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Stack típica 2026

  • Editor: VSCode + Live Server.
  • DevTools: inspeccionar, depurar CSS, responsivo.
  • Frameworks CSS: Tailwind, Bootstrap (opcionais).
  • Pré-processadores: Sass (variáveis, nesting) — menos necessário com CSS moderno.
  • Versionamento: Git.
  • Deploy: Netlify, Vercel, GitHub Pages (estático grátis).
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web

Boas práticas finais

  1. Mobile-first sempre.
  2. HTML semântico antes de <div>.
  3. Variáveis CSS para o design system.
  4. Sem CSS inline (excepto casos pontuais).
  5. Acessibilidade desde o início, não no fim.
  6. Performance — imagens optimizadas, CSS minificado.
  7. Validar HTML (validator.w3.org) e Lighthouse.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02833 · Desenho e construção de interfaces web
Aulify · UC02833 · Fim

Primeiro acessível, depois bonito. Sempre funcional.

📧 geral@aulify.pt
Aulify · Componente Tecnológica · Cursos Profissionais