Ficha 02 · Layout, responsivo e publicação · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Aplicar Flexbox/Grid
Construir responsivo
Acessibilidade
Publicar

Parte I · Layout

Exercício 1 · Flexbox vs Grid (10 pts)

Quando usar Flexbox e quando Grid? Dá um exemplo de cada.

Flexbox — uma dimensão (linha ou coluna). Ex.: navbar com logo à esquerda e links à direita.
Grid — duas dimensões (linhas e colunas). Ex.: galeria com colunas auto-responsivas; layout de página inteira (header/sidebar/main/footer).

Regra prática: Flexbox para componentes, Grid para layout.

Exercício 2 · Navbar com Flexbox (15 pts)

Escreve o CSS para uma navbar com logo à esquerda e menu à direita, alinhados verticalmente ao centro, com 16 px de espaço entre links.

<nav class="navbar">
  <div class="logo">Aulify</div>
  <ul class="menu">
    <li><a href="/">Início</a></li>
    <li><a href="/recursos">Recursos</a></li>
    <li><a href="/sobre">Sobre</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0; padding: 0;
}
.menu a { text-decoration: none; color: inherit; }

Exercício 3 · Galeria responsiva (15 pts)

Escreve o CSS para uma galeria de cards que tem colunas de mínimo 240 px, preenche automaticamente o espaço e tem 20 px de gap — sem usar media queries.

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

auto-fit + minmax(240px, 1fr) ajusta automaticamente o número de colunas ao espaço disponível. Responsivo sem media queries.

Parte II · Responsivo

Exercício 4 · Mobile-first (10 pts)

Reescreve este CSS desktop-first em mobile-first:

.menu { display: flex; }
@media (max-width: 768px) {
  .menu { display: none; }
}

/* base: mobile */
.menu { display: none; }

@media (min-width: 768px) {
  .menu { display: flex; }
}

Mobile-first começa no caso mais simples (ecrã pequeno) e adiciona para ecrãs maiores — melhor performance em mobile e priorização do conteúdo essencial.

Exercício 5 · Toque (10 pts)

Que cuidados ter no design responsivo para toque (mobile/tablet)?

Alvos clicáveis grandes (≥ ~44 px) e espaçados (dedo é impreciso).
Sem interações essenciais apenas em hover (não existe no touch).
Considerar a zona alcançável do polegar (ações principais em baixo/centro).
Imagens flexíveis (max-width:100%; height:auto).
Texto legível sem zoom (mínimo ~16 px).

Parte III · Acessibilidade

Exercício 6 · Auditoria (20 pts)

Identifica 5 problemas de acessibilidade e corrige:

<div onclick="abrir()">Abrir</div>
<img src="grafico.png">
<input type="text" placeholder="Email">
<a href="#" style="outline:none;">Link</a>
<p style="color:#aaa; background:#ccc;">Importante</p>

<div onclick> — não acessível por teclado nem anunciado como botão. → <button onclick="abrir()">Abrir</button>
Imagem sem alt — leitor de ecrã não a descreve. → <img src="grafico.png" alt="Gráfico de vendas — subida de 30% em maio">
Input sem label — placeholder desaparece e não substitui label. → <label for="email">Email</label><input id="email" type="email" required>
outline:none — utilizadores de teclado perdem-se sem foco visível. → remover, ou substituir por a:focus-visible { outline: 2px solid; }.
Contraste fraco (#aaa sobre #ccc) — falha WCAG. → cores com contraste adequado, ex.: color:#1a1a2e; background:#fff;.

Bónus: validar com Lighthouse / axe.

Parte IV · Publicação

Exercício 7 · Deploy (10 pts)

Indica 3 opções gratuitas para alojar uma página estática com HTTPS automático.

Netlify, Vercel, Cloudflare Pages, GitHub Pages. Todas: - HTTPS (Let's Encrypt) automático. - Deploy a partir de Git (push → build → publica). - Domínio próprio configurável. - CDN global.

(3 quaisquer.)

Exercício 8 · Antes de publicar (10 pts)

Lista 5 verificações a fazer antes de pôr o site no ar.

Validar HTML (validator.w3.org) sem erros.
Lighthouse ≥ 90 em Acessibilidade/SEO/Best Practices.
Imagens otimizadas (UC00504): srcset, formatos modernos, loading="lazy".
SEO: <title>, <meta description>, Open Graph (og:image/og:title/og:description).
Links todos funcionais; 404 custom.
Backup em Git; HTTPS forçado; domínio apontado.

(5 quaisquer.)