aulify · Mini-Projecto
UC UC02634 · T. Multimédia
Versão · Aluno
Mini-Projecto · Página web responsiva e publicada
Do design implementado ao site no ar
Contexto
Cada aluno implementa em HTML/CSS o design da sua peça da UC02285 (UX/UI) — ou um site novo de tema livre (portfolio, evento, restaurante) — responsivo, acessível, publicado num serviço gratuito.
Requisitos
Funcionais
- HTML semântico válido (W3C zero erros).
- CSS com variáveis (mini design system); Flexbox + Grid.
- Responsivo mobile-first com pelo menos 2 breakpoints.
- Acessibilidade — contraste ≥ 4.5:1, foco visível, alts, labels.
- Imagens otimizadas (
srcset/picture,loading="lazy"). - Publicado em Netlify/Vercel/Cloudflare Pages/GitHub Pages com HTTPS.
Não-funcionais
- Lighthouse ≥ 90 em A11y/Best Practices/SEO.
- Repositório Git com commits descritivos.
- README com instruções e URL.
Fases
Fase 1 · 1h
Setup + estrutura
- Repositório Git; HTML semântico das 2-3 páginas.
Estrutura HTML válida.
Fase 2 · 1.5h
CSS base
- Reset + box-sizing; variáveis (tokens); tipografia.
Design system básico.
Fase 3 · 1.5h
Layout
- Flexbox (navbar/componentes) + Grid (galeria/layout).
Layout desktop.
Fase 4 · 1h
Responsivo + a11y
- Media queries mobile/tablet/desktop; auditoria a11y.
Versão responsiva + checklist a11y.
Fase 5 · 0.5h
Otimização + SEO
- Imagens (UC00504); meta description; OG image.
Lighthouse ≥ 90.
Fase 6 · 0.5h
Publicação + defesa
- Deploy + README + URL.
URL público + apresentação 3-5 min.
Critérios de avaliação
| Item | Peso |
|---|---|
| HTML semântico válido | 15% |
| CSS organizado (variáveis, sem !important) | 15% |
| Flexbox + Grid bem usados | 15% |
| Responsivo (2+ breakpoints) | 20% |
| Acessibilidade (Lighthouse ≥ 90) | 15% |
| Otimização + SEO | 10% |
| Publicação (HTTPS, Git) | 10% |
Reflexão
Em meia página: qual foi a parte mais difícil (layout, responsivo ou a11y)? Que pontuação Lighthouse obtiveste e o que melhorou mais? Onde o design (UC02285) precisou de ajustes para se traduzir em código?