Ficha 02 · Interatividade, animação, desempenho, PWA e publicação

Exercício 1 · Programar um gesto de swipe

Um carrossel de imagens precisa de avançar quando o utilizador desliza para a esquerda e recuar quando desliza para a direita. Completa o código em falta, usando touchstart e touchend.

let inicioX = 0;
carrossel.addEventListener('touchstart', (e) => {
  inicioX = e.touches[0].clientX;
});
carrossel.addEventListener('touchend', (e) => {
  // completa aqui
});

Exercício 2 · Estados de toque num botão

Escreve o CSS de um botão que muda de tamanho ao ser premido (active), mostra um contorno visível quando navegado por teclado (focus-visible), e fica visualmente apagado e sem resposta a toques quando desativado.

Exercício 3 · Animar sem engasgar

O código seguinte anima um cartão a entrar no ecrã, mas engasga em telemóveis mais fracos. Identifica o problema e corrige.

.cartao {
  position: relative;
  left: -300px;
  transition: left 0.3s;
}
.cartao.visivel { left: 0; }

Exercício 4 · Respeitar prefers-reduced-motion

Um carrossel automático muda de imagem a cada 4 segundos, com uma transição de deslizamento. Adapta o código para que, quando o utilizador tiver ativado "reduzir movimento" no sistema, o carrossel deixe de trocar de imagem sozinho e sem transição.

Exercício 5 · Diagnosticar as métricas reais da web

Uma página tem LCP de 5,1s, CLS de 0,32 e INP de 620ms. Identifica, para cada métrica, uma causa provável em rede móvel e uma correção concreta.

Exercício 6 · Estratégias de cache num service worker

Uma aplicação tem três tipos de recursos: ícones e tipos de letra (quase nunca mudam), o horário das aulas (muda todas as semanas), e uma lista de eventos que pode ficar ligeiramente desatualizada sem problema. Associa a cada um a estratégia de cache mais adequada.

Exercício 7 · Publicar uma PWA

Antes de publicar uma PWA, um colega esquece três passos. Identifica-os e explica a consequência de cada um: (a) alojar em HTTP simples; (b) não verificar a instalabilidade no painel Application das DevTools; (c) não testar "Adicionar ao ecrã principal" em iOS.