aulify · Mini-Projecto
UC UC00622 · T. Desenv. Software
Versão · Aluno
Mini-Projecto · Website completo HTML5/CSS/JS
Landing page ou portfolio responsivo + acessível
Contexto
Cada par/trio constrói um website completo de raiz com HTML5 semântico, CSS moderno (Flexbox/Grid) e JavaScript vanilla. Cenários à escolha:
- A: Landing page para um produto/serviço fictício (SaaS, app, restaurante).
- B: Portfolio pessoal (about, projects, contacto).
- C: Página de evento (conferência, festival) com agenda interactiva.
- D: Mini-loja online (catálogo + carrinho com localStorage, sem checkout real).
- E: Dashboard/painel com gráficos simulados (sem backend).
Requisitos
Funcionais
- Mínimo 4 páginas ou 4 secções principais (com âncoras).
- HTML5 semântico (header, nav, main, article, section, footer).
- Formulário funcional com validação JavaScript.
- Interactividade JS: pelo menos 3 features (menu mobile, modal, slider, filtro, dark mode, contador, etc.).
- Responsive funcional em mobile (< 768px), tablet (768-1024px) e desktop (> 1024px).
- Persistência com localStorage em pelo menos 1 funcionalidade.
- Imagens optimizadas (formato adequado, lazy loading).
Não-funcionais
- Acessibilidade WCAG AA (alt, labels, contraste, navegação por teclado).
- SEO básico (title, description, OG tags, headings hierárquicos).
- Performance: Lighthouse score ≥ 85 em Performance, Accessibility, Best Practices, SEO.
- Código limpo e organizado (ficheiros separados HTML/CSS/JS).
- Deploy público (Vercel, Netlify ou GitHub Pages).
- README com descrição, screenshots, link demo, tecnologias.
Fases
Fase 1 · Design + wireframes (2h)
- Definir cenário e público-alvo.
- Sketch das páginas (papel ou Figma).
- Escolher paleta de cores + tipografia.
- Entregável: wireframes + mood board.
Fase 2 · HTML estrutura (3h)
- Marcação semântica de todas as páginas.
- Sem CSS ainda — focar conteúdo.
- Entregável: site navegável (feio mas funcional).
Fase 3 · CSS base + layout (4h)
- Reset/normalize + variáveis CSS.
- Layout principal (Flexbox/Grid).
- Tipografia, cores, espaçamento.
- Entregável: site visualmente apresentável em desktop.
Fase 4 · Responsive (2h)
- Media queries.
- Menu mobile (hamburger).
- Testar em 3 tamanhos.
- Entregável: site responsivo.
Fase 5 · JavaScript (3h)
- Validação de formulário.
- Features interactivas escolhidas.
- localStorage onde aplicável.
- Entregável: site totalmente funcional.
Fase 6 · A11y + SEO + performance (1h)
- Auditoria Lighthouse.
- Corrigir issues de acessibilidade.
- Optimizar imagens.
- Meta tags SEO.
- Entregável: Lighthouse ≥ 85 em todas as categorias.
Fase 7 · Deploy + README (1h)
- Deploy em Vercel/Netlify.
- README completo no GitHub.
- Entregável: link público funcional.
Critérios de avaliação
| Item | Peso |
|---|---|
| HTML semântico + estrutura | 15% |
| CSS + design visual | 15% |
| Responsividade | 10% |
| JavaScript funcionalidades | 15% |
| Acessibilidade (WCAG) | 10% |
| SEO + performance (Lighthouse) | 10% |
| Deploy funcional | 5% |
| README + documentação | 10% |
| Apresentação + demo | 10% |
Reflexão
Em meia página: qual foi a parte mais difícil — markup, CSS layout, ou JavaScript? Como decidiste a estrutura semântica das páginas? Que score Lighthouse atingiste e onde perdeste pontos? Voltarias a usar vanilla JS ou já querias um framework?