Mini-Projecto · PWA de eventos culturais para telemóvel
Contexto
A câmara de uma pequena cidade quer divulgar a sua agenda de eventos culturais (concertos, feiras, exposições) numa aplicação pensada de raiz para telemóvel, que os visitantes possam consultar mesmo com pouca rede nas ruas do centro histórico. Foste contratado/a para desenhar e desenvolver essa aplicação como uma PWA.
Trabalhas individualmente ou a pares, e entregas uma aplicação a funcionar, testada em dispositivo real, mais um pequeno dossiê de decisões de desenho e desempenho.
Requisitos
Funcionais
- Lista de eventos com imagem, título, data, local e descrição breve, navegável com o polegar.
- Media query com pelo menos 2 pontos de rutura, que dão 3 layouts (telemóvel como base, tablet e desktop).
- Imagens adaptativas com
srcset/sizespara a imagem de cada evento. - Pelo menos um gesto de toque programado (ex.: swipe entre imagens de um evento, long press para guardar como favorito).
- Animação de entrada dos cartões de evento, que respeita
prefers-reduced-motion. - manifest.json completo e service worker com pelo menos uma estratégia de cache, para a lista de eventos abrir offline após a primeira visita.
Não-funcionais
- LCP abaixo de 2,5s e CLS abaixo de 0,1, medidos com o Lighthouse.
- Todas as imagens comprimidas (WebP) e com
width/heightdefinidos. - Contraste mínimo de 4,5:1 em todo o texto, verificado com uma ferramenta de contraste.
- Alvos de toque com, no mínimo, 44x44pt.
Fases
Fase 1 · Desenho para o polegar (3h) Wireframe da lista de eventos e da ficha de um evento, com a zona do polegar marcada. Definir a hierarquia visual e os pontos de rutura.
Fase 2 · Estrutura HTML/CSS adaptativa (4h) Construir a lista e a ficha de evento em HTML e CSS mobile-first, com media queries e imagens adaptativas.
Fase 3 · Interatividade (4h) Programar o gesto de toque escolhido em JavaScript e os estados visuais (active, focus-visible, disabled) dos elementos tocáveis.
Fase 4 · Animação e desempenho (4h)
Animar a entrada dos cartões com transform/opacity e prefers-reduced-motion. Medir LCP e CLS no Lighthouse e corrigir o que faltar.
Fase 5 · PWA e funcionamento offline (5h)
Criar o manifest.json, registar o service worker e escolher a estratégia de cache. Testar a instalação e o modo offline.
Fase 6 · Acessibilidade e teste em dispositivo real (3h) Verificar contraste e foco visível. Testar em pelo menos um telemóvel real, com depuração remota.
Fase 7 · Apresentação (2h) Demonstrar a aplicação à turma, incluindo o funcionamento offline, e justificar as decisões do dossiê.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Desenho para o polegar e layout adaptativo | 15% |
| Interatividade programada (gestos e estados) | 15% |
| Animação e Core Web Vitals (LCP/CLS/INP) | 20% |
| PWA (manifest, service worker, offline) | 20% |
| Acessibilidade e teste em dispositivo real | 15% |
| Dossiê e apresentação | 15% |
Erros comuns
- Desenhar primeiro para o ecrã de computador e adaptar o telemóvel depois.
- Esquecer a meta viewport, fazendo o layout aparecer minúsculo.
- Animar
left/topem vez detransform, engasgando em telemóveis mais fracos. - Publicar sem HTTPS, impedindo o service worker de registar.
- Não testar em dispositivo real, só no emulador do computador.
- Servir imagens sem compressão nem
srcset, disparando o LCP.
Bónus (opcional)
- Notificações push para novos eventos adicionados.
- Filtro de eventos por categoria (concertos, feiras, exposições), com estado guardado localmente.
- Publicação real num alojamento com HTTPS e teste de instalação em dois sistemas operativos diferentes.
Reflexão
No dossiê final, responde: que decisão de desenho ou de código teve o maior impacto na redução do LCP e do CLS? E porque é que uma PWA foi a escolha certa para este projeto, em vez de uma aplicação nativa?