Partilhar: WhatsApp
aulify · Sebenta
UC · Unidade de Competência · UC04377

Sebenta · Implementar interfaces interativas (UC04377)

HTML, CSS e JavaScript, princípios de design UX/UI, wireframes, prototipagem, testes de usabilidade e publicação responsiva
25h · 2.25 pontos crédito Curso: T. Produção de Conteúdos I ↗ Referencial oficial SNQ
Índice

Introdução

Esta sebenta ensina a construir uma interface interativa de raiz: desde a análise dos requisitos até à publicação para diferentes suportes. Uma interface interativa é o ponto de contacto entre uma pessoa e um produto digital, seja um site, uma app móvel ou um sistema interno. É construída em três camadas técnicas, HTML, CSS e JavaScript, e moldada por princípios de design visual e de experiência do utilizador (UX).

O percurso desta UC segue quatro etapas, que são também as quatro realizações do referencial oficial: analisar o layout e os requisitos, montar o protótipo, testar e ajustar a usabilidade, e publicar a interface para diferentes suportes. É o mesmo ciclo que qualquer profissional de front-end ou de UX/UI segue numa agência digital, numa empresa de software ou a trabalhar como freelancer.

Objetivos de aprendizagem (referencial): diferenciar tipos de linguagem para interfaces web (HTML, CSS, JavaScript) e tipos de frameworks; caracterizar princípios de composição e hierarquia visual; definir o layout para uma interface; diferenciar ferramentas de wireframes e mockups; aplicar os princípios de design UX e de design responsivo; usar ferramentas de prototipagem; efetuar testes de usabilidade; corrigir bugs e problemas de desempenho; usar ferramentas para gerar interfaces para diferentes dispositivos; aplicar as normas de segurança, saúde no trabalho e proteção ambiental.

1. Interfaces interativas: visão geral

Uma interface interativa é a camada com que a pessoa utilizadora comunica com uma aplicação. Não é apenas um ecrã bonito: é um sistema que responde a comandos, guia a navegação e entrega informação de forma clara.

O referencial organiza o trabalho em três camadas de linguagem:

Camada Linguagem Responsabilidade
Estrutura HTML organizar o conteúdo em elementos com significado
Estilo CSS definir cores, tipografia, espaçamentos, layout
Interatividade JavaScript reagir a eventos, validar dados, atualizar o ecrã

Estas três camadas não são independentes: uma interface real é sempre o resultado da combinação das três. Um site sem CSS é ilegível; um site sem JavaScript é surdo aos comandos do utilizador; um site sem HTML semântico é difícil de indexar e de tornar acessível.

Onde se trabalha com interfaces interativas

O referencial identifica três contextos profissionais principais: agências digitais (design, desenvolvimento e marketing digital), empresas de desenvolvimento de software, e o exercício como profissional liberal/freelancer. Em qualquer um destes contextos, o ciclo de trabalho é o mesmo: analisar, montar, testar e publicar.

Critérios de desempenho que atravessam toda a UC

Cinco critérios definem o que é uma interface bem implementada, e vão aparecer repetidamente ao longo desta sebenta:

  1. Resposta rápida e eficiente aos comandos do utilizador.
  2. Navegação rápida e eficiente na interface.
  3. Consistência dos elementos visuais em toda a interface.
  4. Adaptação adequada a diferentes tamanhos de ecrã.
  5. Ausência de redundâncias e excessos.

Vale a pena memorizar estes cinco pontos: são o critério com que qualquer interface produzida nesta UC deve ser avaliada.

2. HTML: a estrutura da interface

O HTML (HyperText Markup Language) organiza o conteúdo em elementos identificados por tags. Cada tag comunica um significado: um título é <h1>, um parágrafo é <p>, uma lista é <ul> ou <ol>.

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Interface de exemplo</title>
</head>
<body>
  <header>
    <h1>Loja de artesanato</h1>
    <nav>
      <a href="#produtos">Produtos</a>
      <a href="#contactos">Contactos</a>
    </nav>
  </header>
  <main>
    <section id="produtos">
      <h2>Os nossos produtos</h2>
      <p>Peças únicas, feitas à mão.</p>
    </section>
  </main>
  <footer>© 2026 Loja de artesanato</footer>
</body>
</html>

Tags semânticas vs genéricas

Uma das decisões mais importantes ao estruturar HTML é escolher entre tags semânticas (que descrevem o significado) e tags genéricas (<div>, <span>, que não dizem nada sobre o conteúdo).

Tag semântica Significado
<header> cabeçalho da página ou secção
<nav> bloco de navegação
<main> conteúdo principal, único por página
<article> conteúdo autónomo (post, notícia)
<section> agrupamento temático de conteúdo
<footer> rodapé
<aside> conteúdo secundário, relacionado

Usar tags semânticas melhora a acessibilidade (leitores de ecrã percebem a estrutura), o SEO (motores de busca entendem melhor a página) e a manutenção (o código lê-se como um documento organizado).

Formulários: a porta de entrada de dados

Os formulários HTML recolhem informação do utilizador: nome, email, mensagem, escolhas.

<form>
  <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="mensagem">Mensagem</label>
  <textarea id="mensagem" name="mensagem"></textarea>

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

Repara em três detalhes que fazem a diferença entre um formulário amador e um profissional: o <label for="..."> associado ao id do campo (essencial para acessibilidade e para que clicar no texto foque o campo); o atributo type="email", que já valida o formato sem uma linha de JavaScript; e o atributo required, que impede o envio de campos vazios.

Exemplo resolvido: estruturar um cartão de produto

Problema: criar em HTML a estrutura de um cartão de produto com imagem, nome, preço e botão de compra.

Passo 1: identificar os elementos: imagem, título, preço, botão. Nenhum destes tem uma tag semântica própria específica de "produto", por isso usa-se <article> para representar um item autónomo, repetível.

Passo 2: escrever a estrutura:

<article class="cartao-produto">
  <img src="tapecaria.jpg" alt="Tapeçaria artesanal em lã, tons terra">
  <h3>Tapeçaria em lã</h3>
  <p class="preco">34,90 €</p>
  <button>Adicionar ao carrinho</button>
</article>

Passo 3: validar: o alt da imagem descreve o conteúdo (não apenas "imagem de produto"); o preço está num <p> com uma classe para estilo posterior; o botão é <button>, não uma <div> clicável (o <button> já é acessível por teclado por natureza).

3. CSS: estilo e layout

O CSS (Cascading Style Sheets) aplica estilo aos elementos HTML: cor, tipografia, espaçamento, posicionamento.

.cartao-produto {
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.cartao-produto img {
  width: 100%;
  border-radius: 8px;
}

.preco {
  font-weight: bold;
  color: #2563eb;
}

A cascata e o box model

O nome "Cascading" vem da forma como os estilos se combinam: quando há regras em conflito, ganha a mais específica, ou, em empate, a última declarada no ficheiro. Compreender a cascata evita o hábito (mau) de resolver tudo com !important.

Todo o elemento HTML é, para o CSS, uma caixa (box model), composta por quatro camadas, de dentro para fora:

Camada O que é
content o conteúdo em si (texto, imagem)
padding espaço interno, entre o conteúdo e a borda
border a linha à volta da caixa
margin espaço externo, entre esta caixa e as vizinhas

A maior parte dos problemas de "porque é que este espaçamento não bate certo" resolve-se voltando a este modelo e perguntando: é padding ou é margin?

Flexbox e Grid: os dois motores de layout

Ferramenta Melhor para Ideia central
Flexbox alinhamento em uma dimensão (linha ou coluna) itens numa fila que se distribuem e alinham
Grid organização em duas dimensões (linhas e colunas) uma grelha explícita onde se posicionam os itens 
.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.barra-navegacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Estados, transições e feedback visual

O CSS também comunica que a interface reagiu a uma interação, mesmo antes de qualquer JavaScript:

.botao-principal {
  background: #2563eb;
  transition: background 0.2s ease, transform 0.1s ease;
}

.botao-principal:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

Exemplo resolvido: uma barra de navegação responsiva

Problema: construir uma barra de navegação que, em desktop, mostra os links lado a lado, e que se mantém legível em ecrãs pequenos.

Passo 1: estrutura HTML:

<nav class="barra-navegacao">
  <a href="#">Início</a>
  <a href="#">Produtos</a>
  <a href="#">Contactos</a>
</nav>

Passo 2: layout base com Flexbox:

.barra-navegacao {
  display: flex;
  gap: 24px;
  padding: 16px;
}

Passo 3: adaptar a ecrãs pequenos com flex-wrap, para que os links passem para a linha seguinte em vez de saírem do ecrã:

@media (max-width: 480px) {
  .barra-navegacao {
    flex-wrap: wrap;
    gap: 12px;
  }
}

Resultado: em desktop os links ficam numa fila; em telemóvel, se não couberem, quebram para uma segunda linha, sem barra de deslize horizontal nem texto cortado.

4. JavaScript: interatividade e correção de bugs

O JavaScript é a camada que torna a interface reativa: lê e altera o HTML em tempo real, em resposta a eventos.

const formulario = document.querySelector("form");

formulario.addEventListener("submit", (evento) => {
  evento.preventDefault();
  const email = document.querySelector("#email").value;

  if (!email.includes("@")) {
    alert("Introduz um email válido.");
    return;
  }

  alert("Formulário enviado com sucesso!");
});

O DOM: a ponte entre HTML e JavaScript

O DOM (Document Object Model) é a representação em árvore do HTML que o JavaScript consegue ler e modificar. document.querySelector() procura um elemento; .addEventListener() regista uma função para correr quando um evento acontece (click, submit, input, scroll, entre outros).

Corrigir bugs e problemas de desempenho

O referencial pede explicitamente a capacidade de corrigir bugs e problemas de desempenho no código. Um método simples e eficaz:

  1. Reproduzir o erro de forma consistente.
  2. Isolar: comentar ou remover código até encontrar a linha responsável.
  3. Ler a consola (DevTools do browser): a mensagem de erro indica normalmente o ficheiro, a linha e o tipo de problema.
  4. Corrigir uma coisa de cada vez e testar de novo antes de avançar.
Sintoma Causa provável
undefined is not a function a variável não é o que se pensava, ou o script correu antes do HTML carregar
Botão não responde ao clique addEventListener a apontar para um elemento que ainda não existia no DOM
Interface lenta a reagir demasiados eventos a disparar a mesma função repetidamente, ou imagens/scripts pesados

Exemplo resolvido: validar um formulário passo a passo

Problema: impedir o envio de um formulário de contacto se o campo de email estiver vazio ou mal formatado.

Passo 1: capturar o evento de submissão e impedir o comportamento padrão (que recarregaria a página):

formulario.addEventListener("submit", (evento) => {
  evento.preventDefault();

Passo 2: ler o valor do campo:

  const email = document.querySelector("#email").value.trim();

Passo 3: validar com uma condição simples (uma validação completa usaria uma expressão regular, mas uma verificação básica já evita a maioria dos erros):

  if (email === "" || !email.includes("@")) {
    mostrarErro("Introduz um email válido.");
    return;
  }

Passo 4: se passar na validação, dar feedback positivo e (num caso real) enviar os dados:

  mostrarSucesso("Mensagem enviada. Obrigado!");
});

Resultado: o utilizador nunca consegue submeter um formulário claramente inválido, e recebe sempre uma resposta visível, seja de erro seja de sucesso: o que cumpre diretamente o critério de "resposta rápida e eficiente aos comandos do utilizador".

5. Frameworks

Um framework é um conjunto de ferramentas, regras e componentes prontos que aceleram o desenvolvimento e garantem consistência.

Tipo de framework Função Exemplos
CSS framework grelhas e componentes visuais prontos Bootstrap, Tailwind CSS
JS framework/biblioteca interfaces reativas, gestão de estado React, Vue, Angular
Ferramenta de prototipagem protótipos navegáveis sem código de produção Figma, Adobe XD

Quando usar (ou não usar) um framework

A escolha certa nasce sempre da análise de requisitos, a primeira realização desta UC, e não da popularidade da ferramenta.

6. Princípios de composição e layout

Composição visual

O referencial pede a capacidade de caracterizar princípios de composição e hierarquia visual. Estes princípios vêm do design gráfico clássico e aplicam-se diretamente a interfaces digitais:

Princípio O que significa
Equilíbrio distribuição harmoniosa do "peso" visual (cor, tamanho, texto)
Ritmo repetição de padrões (espaçamentos, formas) que cria previsibilidade
Proporção relação de tamanho entre elementos, coerente com a sua importância
Hierarquia visual uso de tamanho, cor e posição para indicar o que é mais importante
Foco visual um ponto de entrada claro que guia o primeiro olhar
Perspetiva profundidade e camadas (sombra, sobreposição)

Layout: estrutura e elementos

O layout organiza estes princípios no espaço da página:

Exemplo resolvido: aplicar hierarquia visual a uma página de destino

Problema: uma página de destino (landing page) tem título, subtítulo, três parágrafos de texto corrido e um botão de ação, todos com o mesmo tamanho de letra. O cliente queixa-se de que "ninguém sabe o que fazer" na página.

Passo 1: diagnosticar: sem hierarquia, tudo compete pela mesma atenção; o olho não sabe por onde começar.

Passo 2: aplicar hierarquia por tamanho e peso:

Elemento Antes Depois
Título 16px, normal 40px, bold
Subtítulo 16px, normal 20px, normal, cor secundária
Texto corrido 16px 16px (mantém-se, é a base)
Botão de ação 16px, sem destaque 18px, fundo de cor, bem visível

Passo 3: aplicar foco visual: o botão de ação ganha uma cor de destaque que não é usada em mais nenhum outro elemento da página, para que seja inequívoco o que se espera que o utilizador faça.

Resultado: a mesma informação, reorganizada por hierarquia, resolve a queixa sem acrescentar uma única palavra de texto.

7. Tipografia, cor, texto e imagens

Tipografia

Cor

Texto: composição, tratamento e ritmos de leitura

Imagens

8. Wireframes, mockups e design UX

Wireframes: baixa fidelidade

Um wireframe é um esboço de baixa fidelidade, sem cor nem conteúdo final, focado apenas na estrutura e disposição dos elementos. Serve para validar a organização da informação antes de investir tempo em design visual.

Mockups: alta fidelidade

Um mockup já tem cor, tipografia e imagens reais (ou muito próximas do final), mas normalmente ainda não é clicável. É o passo entre o esboço e o protótipo interativo.

Etapa Fidelidade Clicável? Ferramentas típicas
Wireframe baixa não papel, Balsamiq, Figma
Mockup alta normalmente não Figma, Adobe XD, Sketch
Protótipo alta sim Figma, Adobe XD

Design UX: conhecer o utilizador

O Design UX (user experience) começa por três perguntas:

  1. Quais são as necessidades do utilizador?
  2. Quais são os seus comportamentos ao navegar?
  3. Quais são as suas preferências, moldadas por outras interfaces que já usa?

Análise da concorrência e arquitetura de informação

Início
├── Produtos
│   ├── Categoria A
│   └── Categoria B
├── Sobre nós
└── Contactos

9. Design responsivo

O design responsivo garante que a interface se adapta a diferentes tamanhos e contextos: computador, tablet, telemóvel, ecrãs de alta resolução.

Princípios

/* Base: mobile-first */
.coluna {
  width: 100%;
}

@media (min-width: 768px) {
  .coluna {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .coluna {
    width: 33%;
  }
}

Breakpoints comuns

Suporte Largura aproximada
Telemóvel até 480px
Tablet até 768px
Desktop a partir de 1024px
Ecrã grande / alta resolução a partir de 1440px

Cuidados específicos

Exemplo resolvido: adaptar uma grelha de produtos

Problema: uma grelha de produtos mostra 4 colunas em desktop. Em telemóvel, as colunas ficam demasiado estreitas e o texto corta.

Passo 1: definir a base mobile-first, com 1 coluna:

.grelha-produtos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

Passo 2: adicionar breakpoints progressivos:

@media (min-width: 768px) {
  .grelha-produtos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grelha-produtos { grid-template-columns: repeat(4, 1fr); }
}

Passo 3: testar nos três breakpoints e confirmar que nenhum texto corta e nenhuma imagem distorce.

Resultado: a mesma grelha, com 1, 2 ou 4 colunas consoante o ecrã, sem duplicar HTML nem CSS específico para cada dispositivo.

10. Prototipagem, testes de usabilidade e publicação

Montar o protótipo

Montar o protótipo é a segunda realização do referencial: transformar o mockup estático em algo navegável.

  1. Definir os ecrãs necessários, a partir do mapa do site.
  2. Ligar os ecrãs com interações (clicar em X leva a Y).
  3. Adicionar microinterações: estados de hover, transições entre ecrãs.
  4. Rever a consistência visual: mesmas cores, tipografia e espaçamentos em toda a interface, o que cumpre diretamente o critério de desempenho correspondente.

Testar e ajustar a usabilidade

A terceira realização junta dois verbos que andam sempre juntos: testar e ajustar.

Publicar para diferentes suportes

Publicar é tornar a interface acessível ao público, confirmando que funciona em todos os contextos previstos:

Checklist final antes de publicar

Item Confirmado?
Testado em desktop, tablet e telemóvel
Imagens otimizadas e com texto alternativo
Sem erros na consola do browser
Formulários validam e dão feedback
Navegação consistente, sem redundâncias
Resposta rápida e percetível aos comandos

Segurança, saúde no trabalho e proteção ambiental

O referencial inclui normas transversais que também fazem parte de uma boa prática profissional:

Erros comuns

Glossário

Síntese

Uma interface interativa nasce da combinação de HTML (estrutura), CSS (estilo) e JavaScript (comportamento), moldada por princípios de composição visual, layout, tipografia, cor e imagens. O processo de design segue o percurso wireframe → mockup → protótipo, sustentado por design UX (conhecer o utilizador, a concorrência e a arquitetura de informação) e por design responsivo (adaptar a qualquer ecrã). O ciclo de produção fecha-se em quatro etapas: analisar requisitos, montar o protótipo, testar e ajustar a usabilidade, e publicar para diferentes suportes, sempre respeitando normas de segurança, saúde no trabalho e proteção ambiental.

Exercícios resolvidos

1. Classifica cada elemento HTML como semântico ou genérico: <div>, <nav>, <span>, <article>.

Resolução: <div> e <span> são genéricos (sem significado próprio); <nav> e <article> são semânticos (descrevem o papel do conteúdo). Preferir os semânticos sempre que exista um equivalente adequado.

2. Um botão não reage ao clique, mesmo com addEventListener corretamente escrito. Qual é a causa mais provável?

Resolução: o script correu antes de o elemento existir no DOM. Solução: colocar o <script> no fim do <body>, ou envolver o código num evento DOMContentLoaded.

3. Uma página tem título, subtítulo e botão de ação todos com o mesmo tamanho de letra. Que princípio de composição está em falta, e como o corrigir?

Resolução: falta hierarquia visual. Corrige-se aumentando o tamanho e o peso do título, distinguindo o subtítulo por cor ou tamanho intermédio, e dando destaque próprio (cor de fundo, tamanho) ao botão de ação.

4. Explica a diferença entre wireframe, mockup e protótipo, com um exemplo de ferramenta para cada.

Resolução: o wireframe é um esboço de baixa fidelidade da estrutura, sem cor (ex.: papel ou Balsamiq); o mockup é uma versão de alta fidelidade, com cor e tipografia, mas normalmente não clicável (ex.: Figma); o protótipo é o mockup com ligações clicáveis entre ecrãs, simulando a navegação real (ex.: Figma em modo de prototipagem).

5. Uma equipa desenhou uma interface só para desktop e agora está a tentar "encaixá-la" em telemóvel, com dificuldade. Que abordagem deveria ter seguido desde o início?

Resolução: deveria ter seguido mobile-first: desenhar primeiro para o ecrã pequeno, definindo o essencial, e só depois expandir progressivamente com media queries para ecrãs maiores. Isto evita o retrabalho de "espremer" um design pensado só para desktop.

6. Numa fase de testes de usabilidade, três utilizadores não conseguiram encontrar o botão de contacto. O que se deve fazer a seguir?

Resolução: ajustar a interface: aumentar a visibilidade do botão (posição, cor, tamanho), simplificar a navegação até ele, e depois testar de novo com novos utilizadores para confirmar que o problema foi resolvido. Testar e ajustar é um ciclo, não um passo único.

Mais desta unidade
Vê todos os materiais de UC04377 — slides, sebenta, fichas, projecto e critérios de avaliação: Abrir a unidade →
Recursos grátis para professores · explorar todos os cursos