aulify
Planificação modular · UC04377

Implementar interfaces interativas

Curso: Técnico/a de Produção de Conteúdos Interativos Carga: 25h Créditos: 2.25 Tempos: 30 × 50 min Sessões: 15
Proposta de distribuição para tempos letivos de 50 minutos (25h ≈ 30 tempos). Ajuste a blocos de 45 ou 90 minutos e ao calendário da sua escola; os conteúdos seguem os materiais da UC e os objetivos o referencial oficial, a sequência é uma sugestão.

Planificação sessão a sessão

AulaTemposSessãoConteúdosRecursos AulifyAvaliação
12Apresentação da unidadeApresentação da unidade de competência, dos conteúdos e dos critérios de avaliação. Diagnóstico inicial.🎨 SlidesDiagnóstica.
22Interfaces interativas e a linguagem da webInterfaces interativas e a linguagem da web: O que é uma interface interativa, O ciclo de trabalho desta UC; HTML: estrutura da interface: HTML: a estrutura da página, Formulários e elementos interativos em HTML.🎨 SlidesFormativa (observação e exercícios).
32CSS: estilo e layoutCSS: estilo e layout: CSS: o que é e como se aplica, Estados, transições e animações; JavaScript: interatividade: JavaScript: o comportamento da interface, Validação e correção de bugs.🎨 SlidesFormativa (observação e exercícios).
42FrameworksFrameworks: Tipos de frameworks, Escolher o framework certo; Princípios de composição visual: Equilíbrio, ritmo e proporção, Hierarquia, foco visual e perspetiva.🎨 SlidesFormativa (observação e exercícios).
52Layout, tipografia e corLayout, tipografia e cor: Layout: estrutura e elementos, Tipografia e cor; Texto, legibilidade e imagens: Texto: composição, tratamento e ritmos de leitura, Imagens na interface.🎨 SlidesFormativa (observação e exercícios).
62Wireframes e mockupsWireframes e mockups: Wireframes: o esboço funcional, Mockups e ferramentas de prototipagem.🎨 Slides📝 Ficha 01 · HTML, CSS, JavaScript e composição visualFormativa (Ficha 01).
72Design UX: utilizador, concorrência e arquitetura de informaDesign UX: utilizador, concorrência e arquitetura de informação: Conhecer o utilizador, Análise da concorrência e arquitetura de informação.🎨 SlidesFormativa (observação e exercícios).
82Design responsivoDesign responsivo: Princípios do design responsivo, Testar em diferentes suportes.🎨 SlidesFormativa (observação e exercícios).
92Montar o protótipoMontar o protótipo: Do mockup ao protótipo interativo, Ferramentas e boas práticas de prototipagem.🎨 Slides📝 Ficha 02 · UX, wireframes, responsividade, prototipagem e publicaçãoFormativa (Ficha 02).
102Testar e ajustar a usabilidadeTestar e ajustar a usabilidade: Testes de usabilidade, Ajustar a interface: iteração e correção.🎨 SlidesFormativa (observação e exercícios).
112Publicar para diferentes suportesPublicar para diferentes suportes: Publicar a interface interativa, Checklist antes de publicar.🎨 SlidesFormativa (observação e exercícios).
122Segurança, ambiente e boas práticasSegurança, ambiente e boas práticas: Segurança e saúde no trabalho, Proteção ambiental e fecho, Recapitulando.🎨 SlidesFormativa (observação e exercícios).
131Consolidação e sínteseConsolidação e síntese da unidade. Esclarecimento de dúvidas.📖 Sebenta · sínteseFormativa.
143Mini-projetoAplicação integrada dos conteúdos a um problema proposto.🧩 Mini-projetoSumativa (mini-projeto).
152Avaliação sumativa e balançoRealização do teste de avaliação sumativa. Correção e balanço da unidade.·Sumativa (teste).

Sumários prontos a copiar

Aula 1Apresentação da unidade de competência, dos conteúdos e dos critérios de avaliação. Diagnóstico inicial.
Aula 2Interfaces interativas e a linguagem da web: O que é uma interface interativa, O ciclo de trabalho desta UC; HTML: estrutura da interface: HTML: a estrutura da página, Formulários e elementos interativos em HTML.
Aula 3CSS: estilo e layout: CSS: o que é e como se aplica, Estados, transições e animações; JavaScript: interatividade: JavaScript: o comportamento da interface, Validação e correção de bugs.
Aula 4Frameworks: Tipos de frameworks, Escolher o framework certo; Princípios de composição visual: Equilíbrio, ritmo e proporção, Hierarquia, foco visual e perspetiva.
Aula 5Layout, tipografia e cor: Layout: estrutura e elementos, Tipografia e cor; Texto, legibilidade e imagens: Texto: composição, tratamento e ritmos de leitura, Imagens na interface.
Aula 6Wireframes e mockups: Wireframes: o esboço funcional, Mockups e ferramentas de prototipagem. Resolução da Ficha 01.
Aula 7Design UX: utilizador, concorrência e arquitetura de informação: Conhecer o utilizador, Análise da concorrência e arquitetura de informação.
Aula 8Design responsivo: Princípios do design responsivo, Testar em diferentes suportes.
Aula 9Montar o protótipo: Do mockup ao protótipo interativo, Ferramentas e boas práticas de prototipagem. Resolução da Ficha 02.
Aula 10Testar e ajustar a usabilidade: Testes de usabilidade, Ajustar a interface: iteração e correção.
Aula 11Publicar para diferentes suportes: Publicar a interface interativa, Checklist antes de publicar.
Aula 12Segurança, ambiente e boas práticas: Segurança e saúde no trabalho, Proteção ambiental e fecho, Recapitulando.
Aula 13Consolidação e síntese da unidade. Esclarecimento de dúvidas.
Aula 14Desenvolvimento do mini-projeto: aplicação integrada dos conteúdos a um problema proposto.
Aula 15Realização do teste de avaliação sumativa. Correção e balanço da unidade.