Guia Prático de Elementos de Interface

Apostila de UI/UX e Front-end para estudantes e profissionais em início de carreira

"Uma boa interface é como uma boa piada: se tens de a explicar, não é assim tão boa." — Martin LeBlanc

Este manual foi concebido como um glossário avançado e prático. Cada elemento de interface é apresentado com a sua nomenclatura oficial (em português e inglês), a sua anatomia, o código HTML semântico que o constrói, o papel do CSS e do JavaScript, a sua classificação no Atomic Design, o seu comportamento responsivo e dicas pedagógicas para evitar os erros mais comuns.

Índice

• Parte I — Glossário de Termos Fundamentais
• Parte II — Anatomia, Nomenclatura e Código dos Elementos
• Grupo A: Navegação
• Grupo B: Entrada de Dados (Inputs e Formulários)
• Grupo C: Apresentação de Conteúdo
• Grupo D: Feedback e Sobreposição (Overlays)
• Parte III — Tabelas de Referência Rápida e Checklist Final

PARTE I — Glossário de Termos Fundamentais

Antes de estudarmos os elementos visuais um a um, é essencial dominar o vocabulário macro da indústria. Estes conceitos são a "gramática" que dá sentido a tudo o resto.

1.1 UI — User Interface (Interface do Utilizador)

A UI é tudo aquilo que o utilizador vê e toca num produto digital: botões, cores, tipografia, ícones, espaçamentos, animações. É a camada visual e interativa.

• Analogia: se um produto digital fosse um restaurante, a UI seria a decoração, o menu impresso, os talheres e a apresentação dos pratos.
• Profissional associado: UI Designer — foca-se em estética, consistência visual e sistemas de design.

1.2 UX — User Experience (Experiência do Utilizador)

A UX é a experiência global que uma pessoa tem ao usar o produto: é fácil? É rápido? É frustrante? Resolve o problema? A UX vai muito além do visual — inclui arquitetura de informação, fluxos, tempos de carregamento e até o tom da escrita.

• Analogia: no mesmo restaurante, a UX é a experiência completa — a rapidez do serviço, a simpatia do empregado, a facilidade em reservar mesa e a vontade de voltar.
• Regra de ouro: pode existir boa UI com má UX (um ecrã lindo mas confuso), mas raramente existe boa UX com uma UI descuidada.

1.3 Utilizador (User)

O utilizador é a pessoa real que interage com o produto. Todo o design deve partir das suas necessidades, limitações e contextos de uso — e não das preferências pessoais do designer ou do programador. Técnicas como personas, entrevistas e testes de usabilidade existem precisamente para manter o utilizador no centro das decisões (User-Centered Design).

1.4 Wireframe, Mockup e Protótipo

Três níveis de fidelidade na conceção de interfaces, frequentemente confundidos:

💡 Para o Estudante: comece sempre pelo wireframe. Discutir estrutura com caixas cinzentas evita que o cliente (ou o professor!) se distraia com a cor do botão quando o problema é a organização da página.

1.5 Elementos de Interface e a sua Função

Um elemento de interface (ou UI element / component) é qualquer unidade com que o utilizador vê ou interage. Por convenção, agrupam-se por função:

• Navegação — ajudam o utilizador a deslocar-se: menus, breadcrumbs, tabs, paginação.
• Entrada de dados (Input) — recolhem informação: campos de texto, checkboxes, selects, toggles.
• Apresentação de conteúdo — organizam e exibem informação: cards, accordions, carrosséis, tabelas.
• Feedback e sobreposição — comunicam o estado do sistema: modais, toasts, tooltips, barras de progresso.

Esta categorização funcional será usada ao longo de toda a Parte II.

1.6 Atomic Design

Metodologia criada por Brad Frost que organiza interfaces como a química organiza a matéria — do mais simples ao mais complexo:

💡 Para o Estudante: o Atomic Design não é uma regra rígida — é uma linguagem comum. Numa equipa, dizer "esta molécula de pesquisa vai para o organismo navbar" é infinitamente mais claro do que "aquela coisa da lupa vai lá para cima".

1.7 Design Responsivo (Responsive Design)

Abordagem em que uma única interface se adapta fluidamente a qualquer tamanho de ecrã — do telemóvel ao monitor ultrawide. Assenta em três pilares técnicos:

1. Grelhas fluidas — larguras em percentagens (%) ou unidades relativas (rem, fr), não em píxeis fixos.
2. Imagens flexíveis — max-width: 100% para que nunca "rebentem" o contentor.
3. Media Queries — regras CSS condicionais que aplicam estilos consoante as características do ecrã.

/* Exemplo: layout de 3 colunas que passa a 1 coluna em ecrãs pequenos */
.grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

@media (max-width: 768px) {
  .grelha { grid-template-columns: 1fr; }
}

Mobile-first: filosofia recomendada em que se desenha e programa primeiro para o telemóvel (o contexto mais restrito) e depois se enriquece a experiência para ecrãs maiores com @media (min-width: ...).

1.8 Breakpoints (Pontos de Rutura)

Os breakpoints são as larguras de ecrã em que o layout "quebra" e se reorganiza. Não existem valores universais obrigatórios, mas a indústria convergiu em intervalos típicos:

⚠️ Erro Comum de Principiante: definir breakpoints com base em dispositivos específicos ("o iPhone 15 tem X px"). Os dispositivos mudam todos os anos; o correto é definir breakpoints onde o conteúdo deixa de funcionar bem — redimensione a janela e observe onde o design "parte".

1.9 Acessibilidade (a11y)

Acessibilidade (abreviada a11y — "a", 11 letras, "y") é a prática de garantir que pessoas com deficiências — visuais, motoras, auditivas ou cognitivas — conseguem usar o produto. Não é um extra: é um requisito profissional, legal (em muitos países) e ético.

Pilares práticos no front-end:

• HTML semântico — usar a tag certa para cada coisa (um <button> é focável e acionável por teclado "de graça"; uma <div onclick> não é).
• Texto alternativo — alt em imagens para leitores de ecrã.
• Contraste de cor suficiente — mínimo de 4,5:1 para texto normal (WCAG AA).
• Navegação por teclado — tudo o que se faz com rato tem de ser possível com Tab, Enter e Esc.
• ARIA — atributos (aria-label, aria-expanded, role) que comunicam estado e propósito a tecnologias de apoio, quando o HTML nativo não chega.

💡 Regra de ouro ARIA: o melhor ARIA é nenhum ARIA — prefira sempre o elemento HTML nativo que já traz a semântica embutida.

1.10 WCAG e W3C

• W3C (World Wide Web Consortium) — o consórcio internacional, fundado por Tim Berners-Lee, que define os padrões abertos da Web: HTML, CSS, acessibilidade, etc. É a "entidade normativa" da Web.
• WCAG (Web Content Accessibility Guidelines) — as diretrizes de acessibilidade publicadas pelo W3C. Organizam-se em três níveis de conformidade: A (mínimo), AA (padrão da indústria e exigência legal comum) e AAA (excelência). Assentam em quatro princípios, resumidos na sigla POUR: Perceivable (percetível), Operable (operável), Understandable (compreensível) e Robust (robusto).

1.11 DOM — Document Object Model

O DOM é a representação em memória, em forma de árvore, que o navegador constrói a partir do HTML. Cada tag torna-se um "nó" que o JavaScript pode ler e manipular em tempo real.

document
└── html
    ├── head
    └── body
        ├── nav
        └── main
            └── button  ← o JS pode encontrá-lo, alterá-lo, escutá-lo

Quando o JavaScript "abre um menu", o que realmente acontece é uma manipulação do DOM: document.querySelector('.menu').classList.add('aberto').

1.12 A Separação de Papéis: HTML, CSS e JavaScript

A base de todo o front-end é o princípio da separação de responsabilidades (separation of concerns). Uma analogia clássica é o corpo humano:

Na prática:

<!-- HTML: define O QUE é -->
<button class="btn-primario" id="guardar">Guardar</button>

/* CSS: define o ASPETO e os estados visuais */
.btn-primario { background: #2563eb; color: white; border-radius: 8px; }
.btn-primario:hover { background: #1d4ed8; }

// JavaScript: define o COMPORTAMENTO
document.getElementById('guardar').addEventListener('click', () => {
  guardarDocumento();
});

⚠️ Erro Comum de Principiante: resolver com JavaScript o que o CSS já faz sozinho (ex.: mudar a cor no hover com JS) ou construir com <div> o que o HTML já oferece (ex.: <div class="botao"> em vez de <button>). Regra prática: HTML primeiro, CSS depois, JS só quando é mesmo necessário.

PARTE II — Anatomia, Nomenclatura e Código dos Elementos

Cada ficha desta parte segue a mesma estrutura: Nome e sinónimos → Descrição → HTML → CSS e JS → Categorização → Comportamento responsivo → Sugestão visual → Dicas. Use-a como consulta rápida ou como percurso de estudo sequencial.

GRUPO A — Elementos de Navegação

2.1 Barra de Navegação

Nome principal: Barra de Navegação Sinónimos: Navbar, Navigation Bar, Menu Principal, Header Navigation, App Bar (no mobile)

Descrição didática: é a "espinha dorsal" da navegação de um site — a faixa, normalmente no topo, que contém o logótipo, as ligações para as secções principais e, muitas vezes, uma ação de destaque (ex.: "Entrar"). O seu propósito é responder, em qualquer página, a duas perguntas do utilizador: onde posso ir? e como volto ao início?

Estrutura HTML:

<header>
  <nav aria-label="Navegação principal">
    <a href="/" class="logo">Marca</a>
    <ul>
      <li><a href="/" aria-current="page">Início</a></li>
      <li><a href="/produtos">Produtos</a></li>
      <li><a href="/sobre">Sobre</a></li>
      <li><a href="/contactos">Contactos</a></li>
    </ul>
    <a href="/entrar" class="btn">Entrar</a>
  </nav>
</header>

A tag <nav> diz aos leitores de ecrã "isto é navegação"; o aria-current="page" identifica a página ativa; a lista <ul> comunica que as ligações formam um grupo.

O papel do CSS e do JavaScript:

• CSS: distribui os itens horizontalmente (display: flex; justify-content: space-between; align-items: center), destaca a ligação ativa (sublinhado ou cor), cria os estados :hover e :focus-visible, e pode fixar a barra no topo durante o scroll (position: sticky; top: 0).
• JavaScript: raramente é necessário no desktop. Usa-se para efeitos como esconder a barra ao fazer scroll para baixo e mostrá-la ao subir, ou para marcar dinamicamente a secção ativa numa página longa (scrollspy).

Categorização: Função → Navegação · Atomic Design → Organismo (contém átomos — links, botão, logótipo — organizados em moléculas).

Comportamento responsivo: é dos elementos que mais se transforma. No desktop, as ligações ficam visíveis em linha; no telemóvel, o espaço não chega e a lista colapsa num menu hambúrguer (ver ficha 2.2). O logótipo encolhe e a ação principal pode reduzir-se a um ícone. Regra prática: a partir do momento em que os itens começam a "empurrar-se" (≈ 768 px), colapse.

Sugestão visual: faixa horizontal com três zonas — logótipo à esquerda, ligações ao centro/direita e botão de ação no extremo direito, com a ligação ativa sublinhada.

💡 Boa prática: o logótipo deve ser sempre uma ligação para a página inicial. É uma convenção tão universal que a sua ausência confunde os utilizadores.

2.2 Menu Hambúrguer

Nome principal: Menu Hambúrguer Sinónimos: Hamburger Menu, Hamburger Icon, Menu de Três Linhas, Off-canvas Menu / Navigation Drawer (o painel que abre)

Descrição didática: ícone de três linhas horizontais (≡) que, ao ser tocado, revela o menu de navegação escondido — normalmente num painel lateral deslizante (drawer) ou em ecrã inteiro. Nasceu da necessidade de poupar espaço em ecrãs pequenos. O nome vem da semelhança com um hambúrguer: pão, carne, pão.

Estrutura HTML:

<button class="hamburguer" aria-expanded="false" aria-controls="menu-principal"
        aria-label="Abrir menu">
  <span></span><span></span><span></span>
</button>

<nav id="menu-principal" class="drawer" hidden>
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/produtos">Produtos</a></li>
  </ul>
</nav>

Repare: é um <button> (não uma <div>!), com aria-expanded a comunicar o estado e aria-controls a ligar o botão ao painel que controla.

O papel do CSS e do JavaScript:

• CSS: desenha as três linhas (três <span> com background e border-radius), anima a transformação em "X" quando aberto (transform: rotate(45deg) nas linhas exteriores, opacity: 0 na do meio) e faz o painel deslizar (transform: translateX(-100%) → translateX(0) com transition).
• JavaScript: é aqui indispensável — alterna a classe de estado no clique, atualiza aria-expanded="true/false", remove/adiciona o atributo hidden, fecha o menu com a tecla Esc e devolve o foco ao botão quando o painel fecha.

const botao = document.querySelector('.hamburguer');
const menu = document.getElementById('menu-principal');

botao.addEventListener('click', () => {
  const aberto = botao.getAttribute('aria-expanded') === 'true';
  botao.setAttribute('aria-expanded', String(!aberto));
  menu.hidden = aberto;
});

Categorização: Função → Navegação · Atomic Design → o ícone-botão é um Átomo; o conjunto botão + drawer é uma Molécula integrada no organismo navbar.

Comportamento responsivo: é a forma mobile da navbar. No desktop está escondido (display: none acima do breakpoint) porque há espaço para as ligações; no mobile substitui-as. Em aplicações muito densas (ex.: Gmail), o hambúrguer sobrevive também no desktop para arrumar navegação secundária.

Sugestão visual: dois telemóveis lado a lado — um com o ícone ≡ no canto superior esquerdo (estado fechado) e outro com o painel lateral aberto sobre a página, com o "X" de fecho visível.

⚠️ Erros Comuns de Principiantes: 1. Usar <div> clicável em vez de <button> — perde-se o foco e o acionamento por teclado. 2. Esquecer o aria-label — para um leitor de ecrã, três <span> vazios não dizem nada. 3. Não bloquear o scroll da página enquanto o drawer está aberto.

2.3 Caminho de Navegação

Nome principal: Caminho de Navegação Sinónimos: Breadcrumb, Breadcrumb Trail, Trilho de Navegação, Migalhas de Pão

Descrição didática: sequência horizontal de ligações que mostra a localização atual dentro da hierarquia do site (ex.: Início › Roupa › Homem › Camisas). O nome vem do conto de Hansel e Gretel, que deixavam migalhas para encontrar o caminho de volta. É vital em sites profundos (e-commerce, documentação), permitindo "subir" níveis com um clique.

Estrutura HTML:

<nav aria-label="Caminho de navegação">
  <ol>
    <li><a href="/">Início</a></li>
    <li><a href="/roupa">Roupa</a></li>
    <li><a href="/roupa/homem">Homem</a></li>
    <li aria-current="page">Camisas</li>
  </ol>
</nav>

Usa-se <ol> (lista ordenada) porque a sequência tem significado hierárquico. O último item não é ligação — é a página atual.

O papel do CSS e do JavaScript:

• CSS: coloca os itens em linha (display: flex), injeta os separadores com li + li::before { content: "›" } (assim os separadores não poluem o HTML nem são lidos pelos leitores de ecrã), e diferencia visualmente o item atual.
• JavaScript: normalmente desnecessário — o breadcrumb é gerado no servidor. Em aplicações SPA pode ser reconstruído dinamicamente a partir da rota.

Categorização: Função → Navegação · Atomic Design → Molécula (átomos de ligação + separadores).

Comportamento responsivo: em ecrãs estreitos, caminhos longos não cabem. Estratégias comuns: truncar os níveis intermédios com reticências (Início › … › Camisas), mostrar apenas a ligação para o nível anterior ("‹ Voltar a Homem"), ou permitir scroll horizontal discreto.

Sugestão visual: linha de texto com quatro níveis separados por "›", em que os três primeiros aparecem como ligações azuis e o último a negrito, indicando a página atual.

2.4 Separadores

Nome principal: Separadores Sinónimos: Tabs, Abas, Guias, Tabbed Interface

Descrição didática: conjunto de "abas" que divide conteúdo relacionado em painéis alternáveis dentro do mesmo espaço — como as pastas de um arquivo físico. Apenas um painel é visível de cada vez. Ideal para conteúdo paralelo e do mesmo nível (ex.: "Descrição / Especificações / Opiniões" numa página de produto).

Estrutura HTML:

<div class="tabs">
  <div role="tablist" aria-label="Informação do produto">
    <button role="tab" aria-selected="true"  aria-controls="painel-1" id="tab-1">Descrição</button>
    <button role="tab" aria-selected="false" aria-controls="painel-2" id="tab-2">Especificações</button>
  </div>
  <div role="tabpanel" id="painel-1" aria-labelledby="tab-1">…</div>
  <div role="tabpanel" id="painel-2" aria-labelledby="tab-2" hidden>…</div>
</div>

Como o HTML não tem um elemento nativo de tabs, este é um dos casos legítimos de uso de role e atributos ARIA (padrão oficial WAI-ARIA "Tabs").

O papel do CSS e do JavaScript:

• CSS: alinha os botões em linha, marca a tab ativa (borda inferior colorida, peso da fonte) e estiliza :hover e :focus-visible.
• JavaScript: obrigatório — alterna os painéis (atributo hidden), atualiza aria-selected e implementa a navegação por teclado do padrão: setas ← → para mudar de tab, Home/End para a primeira/última.

Categorização: Função → Navegação (dentro da página) / Apresentação · Atomic Design → Molécula (a caminho de organismo quando os painéis são complexos).

Comportamento responsivo: com muitas tabs em ecrã estreito, há três saídas clássicas: permitir scroll horizontal na lista de tabs (padrão Android/Material), converter as tabs num accordion vertical, ou substituí-las por um <select>. A primeira é hoje a mais comum.

Sugestão visual: três rótulos em linha no topo, com o primeiro destacado por uma linha inferior azul, sobre um painel de conteúdo retangular.

💡 Tabs ou Accordion? Tabs para 2–5 categorias curtas e paralelas em desktop; accordion quando as secções são muitas, os títulos longos, ou o ecrã é estreito.

2.5 Paginação

Nome principal: Paginação Sinónimos: Pagination, Pager, Navegação por Páginas

Descrição didática: divide listas longas (resultados de pesquisa, catálogos, artigos) em páginas numeradas, dando ao utilizador controlo e noção de posição ("página 2 de 12"). Alternativas modernas: infinite scroll (carregamento contínuo) e botão "Carregar mais" — cada uma com prós e contras (a paginação é melhor para voltar a encontrar um item; o infinite scroll é melhor para exploração casual).

Estrutura HTML:

<nav aria-label="Paginação de resultados">
  <ul>
    <li><a href="?p=1" aria-label="Página anterior">‹</a></li>
    <li><a href="?p=1">1</a></li>
    <li><a href="?p=2" aria-current="page">2</a></li>
    <li><a href="?p=3">3</a></li>
    <li><span>…</span></li>
    <li><a href="?p=12">12</a></li>
    <li><a href="?p=3" aria-label="Página seguinte">›</a></li>
  </ul>
</nav>

O papel do CSS e do JavaScript:

• CSS: transforma as ligações em "pastilhas" quadradas ou redondas, destaca a página atual com fundo sólido e cria estados :hover.
• JavaScript: dispensável se cada página for um URL real (o ideal para SEO e partilha). Em SPAs, o JS interceta o clique, pede os dados à API e atualiza a lista sem recarregar.

Categorização: Função → Navegação · Atomic Design → Molécula.

Comportamento responsivo: em mobile reduz-se o número de páginas visíveis (ex.: apenas ‹ 2 / 12 ›) e aumentam-se as áreas de toque (mínimo recomendado: 44 × 44 px). Muitos produtos trocam a paginação por "Carregar mais" no telemóvel.

Sugestão visual: fila de botões quadrados — setas nas pontas, números no meio, o número ativo com fundo azul e reticências a indicar páginas omitidas.

2.6 Rodapé

Nome principal: Rodapé Sinónimos: Footer, Page Footer, Site Footer

Descrição didática: a secção final de todas as páginas. Funciona como "último recurso" de navegação e repositório de informação institucional: ligações secundárias organizadas em colunas, contactos, redes sociais, newsletter, informação legal (privacidade, termos, cookies) e copyright. Estudos de usabilidade mostram que muitos utilizadores fazem scroll direto ao footer quando não encontram algo — trate-o como um mapa do site, não como um caixote.

Estrutura HTML:

<footer>
  <nav aria-label="Ligações do rodapé">
    <section><h2>Empresa</h2><ul><li><a href="/sobre">Sobre</a></li></ul></section>
    <section><h2>Legal</h2><ul><li><a href="/privacidade">Privacidade</a></li></ul></section>
  </nav>
  <p>© 2026 Marca. Todos os direitos reservados.</p>
</footer>

O papel do CSS e do JavaScript: o CSS organiza as colunas (Grid ou Flexbox), aplica normalmente um fundo escuro de contraste e trata a hierarquia tipográfica; JavaScript é quase sempre desnecessário (exceção: formulário de newsletter com validação).

Categorização: Função → Navegação / Informação · Atomic Design → Organismo.

Comportamento responsivo: as colunas do desktop empilham-se verticalmente no mobile. Footers muito extensos podem converter cada coluna num accordion para reduzir o scroll.

Sugestão visual: faixa escura no fundo da página com três colunas de ligações claras, ícones de redes sociais e uma linha final de copyright.

GRUPO B — Elementos de Entrada de Dados

2.7 Botão

Nome principal: Botão Sinónimos: Button, CTA (Call to Action — quando é a ação principal), Push Button

Descrição didática: o elemento interativo mais fundamental de qualquer interface: desencadeia uma ação (guardar, enviar, eliminar, abrir). Distinção crucial que separa principiantes de profissionais: botão executa ações; ligação (<a>) navega para outro lugar. Se leva o utilizador a outro URL, é uma ligação estilizada como botão — nunca o contrário.

Hierarquia visual típica:

• Primário — a ação principal do ecrã (fundo sólido, cor da marca). Um por contexto.
• Secundário — ações alternativas (contorno ou fundo neutro).
• Terciário / Ghost — ações discretas (apenas texto).
• Destrutivo — ações perigosas (vermelho): eliminar, cancelar subscrição.

Estrutura HTML:

<button type="submit">Guardar</button>
<button type="button">Pré-visualizar</button>
<button type="button" disabled>A enviar…</button>

<!-- Ligação com aspeto de botão: navega, não executa -->
<a href="/registo" class="btn btn-primario">Criar conta</a>

⚠️ Dentro de um <form>, um <button> sem type é type="submit" por omissão — e submete o formulário sem querer. Especifique sempre o type.

O papel do CSS e do JavaScript:

• CSS: define a identidade (cor, border-radius, padding, tipografia) e, sobretudo, os estados: :hover (realce), :active (pressionado), :focus-visible (anel de foco para teclado — nunca remova o outline sem substituto!), :disabled (esbatido, cursor: not-allowed). Transições suaves (transition: background-color .2s) dão sensação de qualidade.
• JavaScript: escuta o clique e executa a ação. Boas práticas: desativar o botão durante operações assíncronas para evitar duplo envio, e mostrar estado de carregamento ("A enviar…").

Categorização: Função → Entrada de dados / Ação · Atomic Design → Átomo (o exemplo canónico).

Comportamento responsivo: no mobile os botões crescem: área de toque mínima de ~44 × 44 px, e as ações principais ocupam frequentemente toda a largura (width: 100%), muitas vezes fixas no fundo do ecrã, na zona do polegar.

Sugestão visual: fila de quatro botões demonstrando os estados — primário normal, hover (tom mais escuro), desativado (cinzento) e secundário (contorno).

2.8 Campo de Texto

Nome principal: Campo de Texto Sinónimos: Text Field, Input, Text Box, Caixa de Texto

Descrição didática: permite ao utilizador introduzir texto livre. A sua anatomia completa tem cinco partes, todas com função própria: rótulo (o que pedir), campo (onde escrever), placeholder (exemplo do formato — nunca substitui o rótulo!), texto de ajuda (instruções) e mensagem de erro (o que corrigir).

Estrutura HTML:

<div class="campo">
  <label for="email">Endereço de e-mail</label>
  <input type="email" id="email" name="email"
         placeholder="nome@exemplo.pt"
         required autocomplete="email"
         aria-describedby="email-ajuda">
  <p id="email-ajuda">Nunca partilharemos o seu e-mail.</p>
</div>

<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="4"></textarea>

O atributo type é meio caminho andado: email, tel, number, date, password, url ativam validação nativa e o teclado certo no telemóvel. A associação label[for] ↔ input[id] é obrigatória: liga o rótulo ao campo para leitores de ecrã e torna o rótulo clicável.

O papel do CSS e do JavaScript:

• CSS: desenha o campo (borda, border-radius, padding), realça o :focus (borda ou sombra na cor da marca), estiliza ::placeholder e sinaliza estados de validação (.erro { border-color: red }, ou as pseudo-classes :user-invalid/:user-valid).
• JavaScript: validação em tempo real para além da nativa (força da palavra-passe, disponibilidade de um nome de utilizador via API), máscaras de formato (NIF, telefone), contadores de caracteres e mostrar/ocultar palavra-passe.

Categorização: Função → Entrada de dados · Atomic Design → o <input> é um Átomo; o conjunto rótulo + campo + ajuda + erro é uma Molécula.

Comportamento responsivo: no mobile, os campos passam a largura total, a fonte deve ter no mínimo 16 px (abaixo disso o iOS faz zoom automático ao focar) e o type correto convoca o teclado adequado (numérico, com "@", etc.).

Sugestão visual: dois campos empilhados — um em estado normal com rótulo, placeholder e texto de ajuda anotados; outro em estado de erro com borda vermelha e mensagem explicativa.

⚠️ Erros Comuns de Principiantes: 1. Usar placeholder como rótulo. O placeholder desaparece ao escrever — o utilizador esquece o que o campo pedia. Falha também os requisitos de contraste da WCAG. 2. Mensagens de erro genéricas ("Campo inválido"). Diga o que está mal e como corrigir. 3. Bloquear colar (paste) em campos de palavra-passe — prejudica quem usa gestores de palavras-passe.

2.9 Caixa de Verificação e Botão de Opção

Nome principal: Caixa de Verificação / Botão de Opção Sinónimos: Checkbox / Radio Button

Descrição didática: os dois irmãos da seleção, com uma diferença que nunca deve ser trocada:

Estrutura HTML:

<fieldset>
  <legend>Método de pagamento</legend>
  <label><input type="radio" name="pagamento" value="cartao" checked> Cartão</label>
  <label><input type="radio" name="pagamento" value="mbway"> MB Way</label>
</fieldset>

<label><input type="checkbox" name="termos" required> Aceito os termos e condições</label>

O <fieldset> + <legend> agrupa semanticamente as opções; o mesmo name é o que faz os radios excluírem-se mutuamente.

O papel do CSS e do JavaScript:

• CSS: os controlos nativos são difíceis de estilizar; a técnica moderna usa accent-color: #2563eb (uma linha!) ou, para controlo total, appearance: none e desenho personalizado mantendo o input funcional. :checked estiliza o estado selecionado.
• JavaScript: lógica dependente — mostrar campos extra quando uma opção é marcada (ex.: "Outro: especifique"), selecionar/desselecionar tudo, ativar o botão de submissão apenas quando os termos são aceites.

Categorização: Função → Entrada de dados · Atomic Design → Átomos; um grupo com fieldset e legend é uma Molécula.

Comportamento responsivo: no mobile, as opções empilham-se verticalmente com maior espaçamento e toda a linha do rótulo deve ser tocável, não apenas o pequeno quadrado/círculo.

Sugestão visual: duas colunas lado a lado — à esquerda três checkboxes (duas marcadas) e à direita três radios (um selecionado) — evidenciando quadrado vs. círculo.

💡 Boa prática: se a escolha única tiver mais de ~6 opções, troque os radios por um <select>; se tiver 2 opções do tipo ligado/desligado, pondere um toggle.

2.10 Lista Pendente

Nome principal: Lista Pendente Sinónimos: Dropdown, Select, Combo Box, Menu Suspenso, Caixa de Seleção

Descrição didática: apresenta uma lista de opções que só ocupa espaço quando aberta — a solução clássica para escolher um item entre muitos (país, distrito, categoria). Poupa espaço vertical, mas esconde as opções: para 5 ou menos, radios visíveis são geralmente melhores.

Estrutura HTML:

<label for="pais">País</label>
<select id="pais" name="pais">
  <option value="" disabled selected>Escolha o país</option>
  <optgroup label="Europa">
    <option value="pt">Portugal</option>
    <option value="es">Espanha</option>
  </optgroup>
</select>

O papel do CSS e do JavaScript:

• CSS: o <select> nativo tem estilização limitada (sobretudo o painel de opções, desenhado pelo sistema operativo). Estiliza-se a caixa fechada (borda, seta personalizada com background-image, appearance: none).
• JavaScript: para dropdowns avançados — com pesquisa incorporada, imagens, seleção múltipla com etiquetas — constrói-se um componente personalizado (role="listbox"), com todo o teclado e ARIA por nossa conta. Também trata dependências (escolher "Portugal" carrega os distritos).

Categorização: Função → Entrada de dados · Atomic Design → Molécula.

Comportamento responsivo: grande vantagem do <select> nativo — no telemóvel abre automaticamente o seletor do sistema (a "roleta" do iOS, a folha do Android), otimizado para o toque. Componentes personalizados têm de replicar isto manualmente — mais uma razão para preferir o nativo.

Sugestão visual: caixa fechada com o valor "Portugal" e uma seta ▼, e por baixo o painel aberto com quatro opções, a primeira realçada a azul claro.

2.11 Interruptor

Nome principal: Interruptor Sinónimos: Toggle, Switch, Toggle Switch, Botão de Alternância

Descrição didática: controlo binário ligado/desligado, inspirado nos interruptores físicos. A diferença para a checkbox é sobretudo de expectativa: um toggle sugere efeito imediato (mudo o tema escuro e a interface muda já), enquanto a checkbox sugere uma escolha que será confirmada ao submeter um formulário.

Estrutura HTML:

<label class="toggle">
  <input type="checkbox" role="switch" name="notificacoes" checked>
  <span class="pista" aria-hidden="true"></span>
  Notificações por e-mail
</label>

Por baixo do visual, continua a ser um <input type="checkbox"> — herda gratuitamente teclado, foco e semântica. O role="switch" afina o anúncio dos leitores de ecrã ("ligado/desligado" em vez de "marcado").

O papel do CSS e do JavaScript:

• CSS: faz toda a magia visual — esconde o input nativo (mantendo-o acessível), desenha a "pista" arredondada e o "polegar" circular, desliza-o com transition: transform .2s e muda a cor da pista quando :checked (cinzento → verde).
• JavaScript: aplica o efeito imediato — guardar a preferência (chamada à API), ativar o tema escuro, subscrever notificações.

Categorização: Função → Entrada de dados · Atomic Design → Átomo.

Comportamento responsivo: o padrão nasceu no mobile (iOS) e mantém-se praticamente igual em todos os ecrãs; basta garantir área de toque suficiente. Em listas de definições, o toggle alinha à direita da linha, com o rótulo à esquerda.

Sugestão visual: dois interruptores lado a lado — desligado (pista cinzenta, polegar à esquerda) e ligado (pista verde, polegar à direita).

2.12 Barra de Pesquisa

Nome principal: Barra de Pesquisa Sinónimos: Search Bar, Search Box, Search Field, Caixa de Pesquisa

Descrição didática: molécula que combina um campo de texto, um ícone de lupa (convenção universal) e, opcionalmente, um botão de submissão. Em sites com muito conteúdo é o elemento mais usado da interface — utilizadores orientados a objetivos vão direto a ela e ignoram a navegação.

Estrutura HTML:

<form role="search" action="/pesquisa">
  <label for="q" class="visualmente-oculto">Pesquisar no site</label>
  <input type="search" id="q" name="q" placeholder="Pesquisar produtos…">
  <button type="submit">Pesquisar</button>
</form>

O role="search" cria um marco (landmark) para navegação assistida; type="search" adiciona o "×" de limpeza nativo em vários navegadores; o rótulo visualmente oculto (classe utilitária sr-only) mantém a acessibilidade sem poluir o design.

O papel do CSS e do JavaScript:

• CSS: funde input e botão numa única "pílula" arredondada, posiciona a lupa dentro do campo e realça o :focus-within do conjunto.
• JavaScript: é o que a torna inteligente — autocompletar/sugestões enquanto se escreve (com debounce para não bombardear a API a cada tecla), histórico de pesquisas e resultados instantâneos.

Categorização: Função → Entrada de dados / Navegação · Atomic Design → Molécula (exemplo clássico usado pelo próprio Brad Frost).

Comportamento responsivo: no desktop vive expandida na navbar; no mobile colapsa num ícone de lupa que, ao toque, expande o campo a toda a largura (muitas vezes em ecrã inteiro, com teclado aberto e sugestões).

Sugestão visual: pílula arredondada com lupa à esquerda, placeholder "Pesquisar produtos…" e botão azul "Pesquisar" embutido à direita.

2.13 Formulário

Nome principal: Formulário Sinónimos: Form, Web Form

Descrição didática: o organismo que agrega campos, rótulos, opções e botões num fluxo completo de recolha de dados — registo, checkout, contacto. É onde o dinheiro muda de mãos na web: pequenas melhorias num formulário de checkout traduzem-se diretamente em conversões. Princípios de ouro: pedir apenas o essencial, uma coluna, rótulos por cima dos campos, erros junto ao campo que os causou.

Estrutura HTML:

<form action="/registo" method="post" novalidate>
  <h2>Criar conta</h2>

  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome" required autocomplete="name">

  <label for="email2">E-mail</label>
  <input type="email" id="email2" name="email" required autocomplete="email">

  <label for="pass">Palavra-passe</label>
  <input type="password" id="pass" name="password" required minlength="8"
         autocomplete="new-password" aria-describedby="pass-regras">
  <p id="pass-regras">Mínimo de 8 caracteres.</p>

  <label><input type="checkbox" name="termos" required> Aceito os termos</label>

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

Os atributos autocomplete permitem ao navegador preencher automaticamente — menos fricção, mais conversão.

O papel do CSS e do JavaScript:

• CSS: cria o ritmo vertical (espaçamento consistente entre grupos), limita a largura de leitura (~400–480 px), e sinaliza visualmente estados de validação.
• JavaScript: validação em tempo real com mensagens úteis, submissão assíncrona (fetch) sem recarregar a página, desativação do botão durante o envio, e feedback de sucesso/erro. Regra de segurança inegociável: a validação no navegador é conforto; a validação no servidor é obrigatória — o JS do cliente pode sempre ser contornado.

Categorização: Função → Entrada de dados · Atomic Design → Organismo (o exemplo académico perfeito: átomos → moléculas de campo → organismo formulário).

Comportamento responsivo: uma coluna em todos os tamanhos (campos lado a lado só quando logicamente inseparáveis, ex.: código postal + localidade), campos e botão a 100% de largura no mobile, e teclados adequados via type/inputmode.

Sugestão visual: cartão vertical com título "Criar conta", três campos empilhados com rótulos por cima, uma checkbox de termos e um botão azul de largura total.

⚠️ Erros Comuns de Principiantes: 1. Validar só no submit e mostrar todos os erros de uma vez no topo — valide campo a campo, no blur. 2. Limpar o formulário inteiro quando há um erro. Nunca faça o utilizador reescrever tudo. 3. Esconder os requisitos da palavra-passe até ao erro — mostre-os desde o início.

GRUPO C — Elementos de Apresentação de Conteúdo

2.14 Cartão

Nome principal: Cartão Sinónimos: Card, Tile, Content Card

Descrição didática: contentor visual autónomo que agrupa informação relacionada sobre um único assunto — um produto, um artigo, um perfil. Inspira-se nos cartões físicos: unidade fechada, fácil de "pegar" com os olhos. É o bloco de construção dominante da web moderna porque é naturalmente modular e reorganizável em grelhas.

Estrutura HTML:

<article class="card">
  <img src="capa.jpg" alt="Descrição da imagem">
  <div class="card-corpo">
    <h3><a href="/artigo/slug">Título do artigo</a></h3>
    <p>Resumo breve do conteúdo em duas ou três linhas…</p>
    <p class="card-meta">12 Jun 2026 · 5 min de leitura</p>
  </div>
</article>

<article> sinaliza conteúdo autónomo e redistribuível; o título dentro do card usa o nível de heading correto na hierarquia da página.

O papel do CSS e do JavaScript:

• CSS: faz o card "existir" — fundo, border-radius, sombra suave (box-shadow), recorte da imagem (object-fit: cover), e o elevar no :hover (transform: translateY(-4px) + sombra maior). A grelha de cards é território do CSS Grid: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) cria uma grelha responsiva sem uma única media query.
• JavaScript: opcional — expandir o card para tornar toda a área clicável mantendo a semântica, carregar mais cards por scroll, filtros e ordenações.

Categorização: Função → Apresentação de conteúdo · Atomic Design → Molécula (ou organismo quando agrega muitas ações e metadados).

Comportamento responsivo: a estrela da responsividade — a grelha reflui sozinha: 4 colunas no desktop, 2 na tablet, 1 no telemóvel. Em mobile, cards horizontais (imagem à esquerda) tornam-se verticais (imagem em cima).

Sugestão visual: três cartões em grelha, cada um com zona de imagem no topo, título, duas linhas de texto e botão "Ler mais".

💡 Boa prática: para tornar todo o card clicável, não embrulhe tudo num <a> gigante (péssimo para leitores de ecrã, que anunciam todo o conteúdo como uma ligação). Mantenha a ligação no título e expanda a sua área clicável com um pseudo-elemento: .card a::after { content:""; position:absolute; inset:0; }.

2.15 Acordeão

Nome principal: Acordeão Sinónimos: Accordion, Expander, Collapsible Panel, Painel Expansível

Descrição didática: lista vertical de cabeçalhos clicáveis que expandem e recolhem o respetivo conteúdo — como o fole do instrumento musical. Implementa a estratégia de divulgação progressiva (progressive disclosure): mostrar só os títulos e deixar o utilizador escolher o que aprofundar. Habitat natural: páginas de FAQ, filtros de e-commerce, menus de definições.

Estrutura HTML:

<details>
  <summary>Como faço a devolução de um artigo?</summary>
  <p>Tem 30 dias após a receção para devolver…</p>
</details>
<details>
  <summary>Quais os prazos de entrega?</summary>
  <p>Entregas em Portugal continental em 2–3 dias úteis…</p>
</details>

O par nativo <details>/<summary> dá o comportamento expandir/recolher sem uma linha de JavaScript, com teclado e semântica incluídos — um dos segredos mais bem guardados do HTML.

O papel do CSS e do JavaScript:

• CSS: estiliza cabeçalho e painel, roda a seta indicadora quando aberto (details[open] summary::after { transform: rotate(180deg) }) e pode animar a abertura (hoje possível em CSS puro com interpolate-size/transition-behavior nos navegadores modernos).
• JavaScript: só para requisitos extra: modo "apenas um aberto de cada vez" (fechar os irmãos ao abrir um — nativamente, basta dar o mesmo atributo name aos <details> nos navegadores recentes), deep-linking para uma secção específica, ou animações complexas.

Categorização: Função → Apresentação de conteúdo · Atomic Design → Molécula; uma FAQ completa é um Organismo.

Comportamento responsivo: brilha no mobile — comprime conteúdo longo em ecrãs estreitos. É o destino de transformação de outros padrões: tabs e colunas de footer convertem-se em accordions em ecrãs pequenos.

Sugestão visual: três barras horizontais empilhadas com perguntas; a primeira aberta (seta ▲ e painel de texto visível), as restantes fechadas (seta ▼).

⚠️ Erro Comum de Principiante: construir o accordion inteiro com <div> e JS quando <details>/<summary> resolve 90 % dos casos. Menos código, mais acessibilidade, zero dependências.

2.16 Carrossel

Nome principal: Carrossel Sinónimos: Carousel, Slider, Image Slider, Slideshow, Galeria Rotativa

Descrição didática: apresenta vários conteúdos (imagens, banners, cards) num espaço fixo, alternando-os por deslize — com setas laterais, pontos indicadores (dots) e, por vezes, avanço automático (autoplay). Popular em páginas iniciais e galerias de produto. Aviso honesto de UX: estudos mostram que pouquíssimos utilizadores interagem para lá do primeiro slide; use com moderação e nunca para conteúdo crítico.

Estrutura HTML:

<section class="carrossel" aria-roledescription="carrossel" aria-label="Destaques">
  <button class="anterior" aria-label="Slide anterior">‹</button>
  <ul class="pista">
    <li class="slide" aria-label="1 de 4"><img src="1.jpg" alt="…"></li>
    <li class="slide" aria-label="2 de 4"><img src="2.jpg" alt="…"></li>
  </ul>
  <button class="seguinte" aria-label="Slide seguinte">›</button>
</section>

O papel do CSS e do JavaScript:

• CSS: faz hoje o trabalho pesado com scroll snapping: .pista { display:flex; overflow-x:auto; scroll-snap-type:x mandatory } e .slide { scroll-snap-align:center } criam um carrossel deslizável ao dedo sem JS. Trata também transições, dots e setas.
• JavaScript: setas programáticas (scrollBy), atualização do dot ativo, autoplay (que deve pausar em hover, foco e quando o utilizador prefere movimento reduzido — prefers-reduced-motion), e carregamento preguiçoso das imagens seguintes.

Categorização: Função → Apresentação de conteúdo · Atomic Design → Organismo.

Comportamento responsivo: no mobile, as setas (hostis ao toque) cedem o lugar ao gesto de swipe, que se torna o modo principal de interação; os dots mantêm-se como indicador. O número de itens visíveis por slide reduz-se (3 cards → 1 card).

Sugestão visual: moldura larga com uma imagem, setas circulares ‹ › nas laterais e quatro pontos por baixo, com o primeiro preenchido a azul.

2.17 Crachá e Avatar

Nome principal: Crachá / Avatar Sinónimos: Badge, Tag, Chip, Etiqueta / Avatar, Foto de Perfil, Profile Picture

Descrição didática: dois átomos pequenos e omnipresentes.

• Badge: pequena etiqueta que comunica estado, categoria ou contagem num relance — "Novo", "Esgotado", "−20 %", ou o círculo vermelho com o número de notificações. (Quando é interativa e removível — nos filtros, por exemplo — costuma chamar-se chip.)
• Avatar: representação visual de um utilizador: fotografia, iniciais sobre cor, ou ícone genérico. Humaniza a interface e identifica autoria em comentários, mensagens e menus de conta.

Estrutura HTML:

<span class="badge badge-novo">Novo</span>

<button class="btn-notificacoes" aria-label="Notificações, 3 não lidas">
  🔔 <span class="badge-contador" aria-hidden="true">3</span>
</button>

<img class="avatar" src="ana.jpg" alt="Ana Silva" width="40" height="40">
<span class="avatar avatar-iniciais" aria-hidden="true">AS</span>

Repare no padrão de acessibilidade do contador: o número visual é decorativo (aria-hidden) e a informação completa vai no aria-label do botão.

O papel do CSS e do JavaScript:

• CSS: border-radius: 9999px para a forma de pílula/círculo, paleta semântica (verde = sucesso, vermelho = alerta, âmbar = aviso), object-fit: cover para recortar fotos de avatar, e posicionamento absoluto do contador sobre o ícone.
• JavaScript: atualiza contadores em tempo real (websockets/polling), gera as iniciais a partir do nome quando não há foto, remove chips de filtro ao clique.

Categorização: Função → Apresentação de conteúdo / Feedback · Atomic Design → Átomos por excelência.

Comportamento responsivo: quase imunes — apenas escalam ligeiramente. Num contexto apertado, um badge de texto pode reduzir-se a um simples ponto colorido (dot indicator).

Sugestão visual: três badges coloridos ("Novo" verde, "Esgotado" vermelho, "−20%" âmbar) ao lado de um avatar circular com iniciais e um contador vermelho "3" sobreposto no canto.

2.18 Secção Hero

Nome principal: Secção Hero Sinónimos: Hero Section, Hero Banner, Hero, Secção de Destaque, Above the Fold

Descrição didática: a primeira secção de uma página inicial — o "cartaz de cinema" do site. Ocupa grande parte do primeiro ecrã e tem uma missão: em 3–5 segundos, comunicar o que é o produto, para quem é e qual o próximo passo. Anatomia canónica: título de impacto (headline), subtítulo com a proposta de valor, um ou dois CTAs e um elemento visual (imagem, ilustração ou vídeo).

Estrutura HTML:

<section class="hero" aria-labelledby="hero-titulo">
  <div class="hero-texto">
    <h1 id="hero-titulo">Título de grande impacto</h1>
    <p>Subtítulo que explica a proposta de valor em uma frase.</p>
    <div class="hero-acoes">
      <a class="btn btn-primario" href="/registo">Começar agora</a>
      <a class="btn btn-secundario" href="/demo">Saber mais</a>
    </div>
  </div>
  <img src="ilustracao.svg" alt="" role="presentation">
</section>

O <h1> da página vive normalmente aqui — só deve existir um por página.

O papel do CSS e do JavaScript:

• CSS: faz quase tudo — layout de duas colunas (Grid/Flexbox), tipografia de escala generosa (o título pode usar clamp(2rem, 5vw, 4rem) para escalar fluidamente), fundos com gradientes ou imagens (background-size: cover) e garantia de contraste do texto sobre a imagem (overlay escuro).
• JavaScript: apenas decorativo — animações de entrada, efeitos parallax, rotação de headlines. Um hero funciona perfeitamente sem JS.

Categorização: Função → Apresentação de conteúdo · Atomic Design → Organismo.

Comportamento responsivo: as duas colunas do desktop empilham-se no mobile (texto primeiro, imagem depois — ou imagem omitida para poupar dados), a tipografia reduz com clamp(), e os CTAs passam a largura total. Cuidado com heros de 100 vh em mobile: as barras do navegador tornam 100vh traiçoeiro (prefira 100svh ou min-height).

Sugestão visual: retângulo largo dividido em duas metades — à esquerda título grande, subtítulo e dois botões; à direita uma imagem ilustrativa emoldurada.

GRUPO D — Feedback e Sobreposição

2.19 Janela Modal

Nome principal: Janela Modal Sinónimos: Modal, Dialog, Modal Dialog, Caixa de Diálogo, Popup (uso coloquial), Lightbox (para imagens)

Descrição didática: janela que se sobrepõe à página, escurece o fundo (overlay/backdrop) e bloqueia toda a interação com o resto até ser resolvida — daí "modal": impõe um modo. É a ferramenta certa para decisões críticas que exigem atenção total ("Eliminar ficheiro? Esta ação é permanente") e a ferramenta errada para quase tudo o resto, porque interrompe. Regra: se o utilizador não tiver de decidir já, não use modal.

Estrutura HTML:

<button type="button" id="abrir-modal">Eliminar ficheiro</button>

<dialog id="confirmar" aria-labelledby="modal-titulo">
  <h2 id="modal-titulo">Eliminar ficheiro?</h2>
  <p>Esta ação é permanente e não pode ser anulada.</p>
  <form method="dialog">
    <button value="cancelar">Cancelar</button>
    <button value="confirmar" class="btn-perigo">Eliminar</button>
  </form>
</dialog>

O elemento nativo <dialog> (suportado em todos os navegadores modernos) oferece de graça o que antes exigia bibliotecas: overlay, fecho com Esc e focus trap (o foco fica preso dentro do modal).

O papel do CSS e do JavaScript:

• CSS: centra e dimensiona a janela, estiliza o fundo escurecido com o pseudo-elemento ::backdrop, e anima a entrada (fade + scale).
• JavaScript: abre com dialog.showModal() (o método que ativa o comportamento modal — show() não bloqueia!), fecha com dialog.close(), lê o valor devolvido para saber a decisão e executa a ação correspondente.

const dialog = document.getElementById('confirmar');
document.getElementById('abrir-modal').onclick = () => dialog.showModal();
dialog.addEventListener('close', () => {
  if (dialog.returnValue === 'confirmar') eliminarFicheiro();
});

Categorização: Função → Feedback / Sobreposição · Atomic Design → Organismo.

Comportamento responsivo: no desktop é uma janela centrada com largura máxima (~500 px); no mobile ou ocupa o ecrã inteiro ou transforma-se numa bottom sheet (folha que sobe do fundo, na zona do polegar) — o padrão dominante nas apps atuais.

Sugestão visual: página escurecida ao fundo com uma janela branca centrada: título "Eliminar ficheiro?", texto explicativo, "×" no canto e dois botões — "Cancelar" neutro e "Eliminar" vermelho.

⚠️ Erros Comuns de Principiantes (o elemento com mais armadilhas de acessibilidade): 1. Construir o modal com <div> + position: fixed sem gerir o foco — utilizadores de teclado ficam a navegar a página "por baixo" do modal. Use <dialog> + showModal(). 2. Não devolver o foco ao botão de origem quando o modal fecha. 3. Modais que abrem sozinhos ao carregar a página (newsletter!) — a forma mais rápida de irritar o utilizador. 4. Esquecer o fecho com Esc e o clique no fundo.

2.20 Dica de Contexto

Nome principal: Dica de Contexto Sinónimos: Tooltip, Hint, Dica Flutuante, Balão de Ajuda

Descrição didática: pequena etiqueta flutuante que aparece ao pairar ou focar um elemento, oferecendo informação suplementar e não essencial — o nome de um botão de ícone, um atalho de teclado, a explicação de uma sigla. Se a informação for indispensável para completar a tarefa, deve estar visível, não escondida num tooltip.

Estrutura HTML:

<button type="button" aria-describedby="dica-guardar">💾</button>
<span id="dica-guardar" role="tooltip" hidden>
  Guardar as alterações (Ctrl+S)
</span>

O tooltip nativo do navegador (title="...") existe, mas é lento a aparecer, não estilizável e invisível ao toque — daí os tooltips personalizados. O aria-describedby garante que o leitor de ecrã lê a dica ao focar o botão.

O papel do CSS e do JavaScript:

• CSS: desenha o balão (fundo escuro, texto claro, border-radius), a seta apontadora (pseudo-elemento com borda triangular) e a transição de aparecimento com pequeno atraso (para não "piscar" ao atravessar o rato).
• JavaScript: mostra no mouseenter/focus e esconde no mouseleave/blur/Esc, e trata o posicionamento inteligente — se não há espaço acima, o tooltip vira-se para baixo (bibliotecas como Floating UI especializam-se nisto).

Categorização: Função → Feedback · Atomic Design → Átomo.

Comportamento responsivo: o calcanhar de Aquiles — não existe hover no ecrã tátil. No mobile, a informação do tooltip deve migrar: ou fica visível, ou passa para um popover de toque, ou o rótulo do ícone passa a texto visível. Nunca deixe funcionalidade crítica dependente de hover.

Sugestão visual: balão escuro com o texto "Guardar as alterações (Ctrl+S)" e uma seta a apontar para baixo, na direção de um botão de ícone de disquete.

2.21 Notificação Flutuante

Nome principal: Notificação Flutuante Sinónimos: Toast, Snackbar (Material Design), Notification, Notificação Temporária

Descrição didática: mensagem breve e não bloqueante que surge num canto do ecrã (ou no fundo, no mobile), confirma o resultado de uma ação — "Alterações guardadas ✓", "Artigo adicionado ao carrinho" — e desaparece sozinha após alguns segundos. É o oposto filosófico do modal: informa sem interromper. O nome vem do movimento de uma torradeira (toaster) a saltar.

Estrutura HTML:

<!-- Contentor permanente, no fim do body -->
<div class="toasts" aria-live="polite"></div>

function toast(mensagem, tipo = 'sucesso') {
  const el = document.createElement('div');
  el.className = `toast toast-${tipo}`;
  el.textContent = mensagem;
  document.querySelector('.toasts').append(el);
  setTimeout(() => el.remove(), 5000);
}

O atributo aria-live="polite" é o segredo da acessibilidade: qualquer texto injetado no contentor é anunciado automaticamente pelos leitores de ecrã, sem roubar o foco.

O papel do CSS e do JavaScript:

• CSS: posiciona o contentor (position: fixed), empilha múltiplos toasts com espaçamento, aplica a paleta semântica (verde/vermelho/âmbar/azul) e anima entrada e saída (deslizar + fade).
• JavaScript: é quem manda — cria, injeta, temporiza e remove os toasts; pausa o temporizador em hover; gere a fila quando chegam vários.

Categorização: Função → Feedback · Atomic Design → Molécula.

Comportamento responsivo: no desktop ancora num canto (convenção: inferior esquerdo ou superior direito) com largura fixa; no mobile ocupa quase toda a largura, colado ao fundo (acima da barra de navegação da app, se existir).

Sugestão visual: cápsula escura flutuante com um círculo verde de visto e o texto "Alterações guardadas com sucesso".

💡 Boa prática: nunca coloque ações críticas apenas num toast (ex.: "Anular" a eliminação) — ele desaparece antes de muitos utilizadores o lerem. Se incluir ações, aumente a duração e garanta alternativa permanente.

2.22 Indicadores de Progresso

Nome principal: Indicadores de Progresso Sinónimos: Progress Bar (barra), Spinner / Loader (circular), Skeleton Screen (esqueleto de carregamento)

Descrição didática: comunicam que o sistema está a trabalhar — a primeira heurística de Nielsen: visibilidade do estado do sistema. Escolha pela natureza da espera:

• Barra de progresso (determinada): quando se conhece a percentagem — uploads, instalações, passos de um formulário.
• Spinner (indeterminada): quando não se conhece a duração — pedidos à rede. Adequado só para esperas curtas (< 3–4 s).
• Skeleton screen: silhuetas cinzentas pulsantes com a forma do conteúdo que vem a caminho — reduz a perceção de espera e evita saltos de layout.

Estrutura HTML:

<label for="upload">A enviar ficheiro…</label>
<progress id="upload" max="100" value="65">65 %</progress>

<div class="spinner" role="status" aria-label="A carregar"></div>

O <progress> nativo traz a semântica feita; no spinner personalizado, o role="status" anuncia o estado às tecnologias de apoio.

O papel do CSS e do JavaScript:

• CSS: estiliza o <progress> (com pseudo-elementos específicos de cada navegador), cria o spinner com um simples círculo de borda parcial em rotação (animation: spin 1s linear infinite) e o pulsar dos skeletons (animation sobre o background).
• JavaScript: atualiza value com o progresso real (eventos de upload do fetch/XMLHttpRequest), alterna entre skeleton e conteúdo quando os dados chegam.

Categorização: Função → Feedback · Atomic Design → Átomos.

Comportamento responsivo: praticamente imunes — a barra estica com o contentor; o spinner mantém o tamanho. Skeletons devem espelhar o layout responsivo real do conteúdo que substituem.

Sugestão visual: barra horizontal preenchida a 65 % com a percentagem por baixo, e ao lado um arco circular azul incompleto a sugerir rotação.

PARTE III — Tabelas de Referência Rápida e Checklist Final

3.1 Mapa geral dos elementos

3.2 Transformações responsivas mais comuns (Desktop → Mobile)

3.3 Checklist de acessibilidade essencial

Antes de dar qualquer componente por terminado, verifique:

• [ ] Usei o elemento HTML nativo certo antes de recorrer a <div> + ARIA?
• [ ] Tudo funciona só com teclado (Tab, Enter, Espaço, Esc, setas)?
• [ ] O foco é visível (:focus-visible) e nunca foi removido sem substituto?
• [ ] Todas as imagens informativas têm alt; as decorativas têm alt=""?
• [ ] Todos os <input> têm <label> associado por for/id?
• [ ] O contraste texto/fundo cumpre 4,5:1 (WCAG AA)?
• [ ] Estados dinâmicos comunicados por ARIA (aria-expanded, aria-selected, aria-live)?
• [ ] Áreas de toque com pelo menos 44 × 44 px no mobile?
• [ ] Animações respeitam prefers-reduced-motion?
• [ ] Testei com o zoom do navegador a 200 %?

3.4 Palavras finais para o estudante

Dominar elementos de interface não é decorar nomes — é compreender três camadas de cada elemento: o seu propósito (que problema do utilizador resolve?), a sua semântica (que HTML comunica esse propósito à máquina?) e o seu comportamento (como o CSS e o JS o fazem responder ao contexto e à interação?).

Sugestão de estudo prático: escolha um site que usa todos os dias e faça a sua "dissecação" — identifique cada elemento deste guia, classifique-o no Atomic Design e depois redimensione a janela para observar as transformações responsivas em direto. Nenhuma leitura substitui essa observação ativa.

Bom estudo — e boas interfaces! 🚀

Guia Prático de Elementos de Interface · Versão 1.0 · 2026