TIC · 9.º Ano

Ideias de aprendizagem ativa

Desenvolvimento de Páginas Web

A aprendizagem ativa funciona especialmente bem aqui porque os alunos precisam de ver e manipular diretamente as consequências das suas escolhas. A separação entre HTML e CSS só se torna clara quando os alunos alteram uma coisa de cada vez e observam o impacto imediato. Esta abordagem hands-on reduz a abstração e aumenta a retenção de conceitos fundamentais.

• Aprendizagens Essenciais
• DGE: 3o Ciclo - Criação de Conteúdos
• DGE: 3o Ciclo - Sistemas de Informação

• 30–45 min
• Pares → Turma inteira
• 4 atividades

Atividade 01

• Ensino pelos Pares
• 30 min · Pares

Ensino pelos Pares: Estrutura HTML Básica

Os alunos em pares criam um ficheiro HTML com cabeçalho, secção principal e rodapé, usando tags semânticas como <header> e <section>. Adicionam uma imagem com atributo alt e um link. Testam no browser e partilham o código com o par para revisão mútua.

Como é que a estrutura HTML se separa do design CSS?

Sugestão de Facilitação

Durante 'Estrutura HTML Básica', peça aos pares que façam uma única alteração de cada vez no CSS e observem em conjunto o que muda na página, reforçando a distinção entre estrutura e estilo.

O que observar

Entregue a cada aluno um pequeno pedaço de papel. Peça-lhes para escreverem uma tag HTML que usariam para um título principal e uma propriedade CSS que mudaria a cor desse título. Peça também que expliquem brevemente porque escolheram essa tag e propriedade.

• Compreender
• Aplicar
• Analisar
• Criar
• Autogestão
• Competências Relacionais

Atividade 02

• Flipped Classroom
• 45 min · Pequenos grupos

Pequenos Grupos: Estilo com CSS

Em grupos de 3-4, ligam uma folha CSS externa ao HTML anterior e aplicam regras para cores de fundo, fontes e centralização. Experimentam propriedades como flexbox para layout simples. Cada grupo apresenta uma alteração visual ao resto da turma.

O que torna um website acessível para pessoas com deficiência visual?

Sugestão de Facilitação

No 'Estilo com CSS', circule pelos grupos para garantir que todos experimentam não só a aplicação de estilos, mas também a remoção para ver o contraste com o HTML puro.

O que observar

Mostre aos alunos duas versões da mesma página web simples: uma sem CSS e outra com CSS aplicado. Pergunte: 'Qual a principal diferença que observam entre as duas páginas?' e 'Que linguagem é responsável pela aparência visual?'

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 03

• Flipped Classroom
• 35 min · Turma inteira

Turma Inteira: Teste de Acessibilidade

A turma acede a ferramentas online como WAVE ou Lighthouse para avaliar páginas criadas. Discutem em plenário problemas como falta de alt text ou baixo contraste, propondo correcções colectivas num documento partilhado.

Como garantir que um site é visualizado corretamente em dispositivos móveis?

Sugestão de Facilitação

No 'Teste de Acessibilidade', simule deficiências visuais usando extensões de browser e peça aos alunos que descrevam as barreiras que identificam em voz alta.

O que observar

Divida os alunos em pares. Cada aluno cria uma secção simples de uma página web (e.g., um título com um parágrafo e uma imagem). Os alunos trocam os seus códigos e avaliam mutuamente: 'O HTML está bem estruturado?' e 'O CSS torna a página mais legível?'

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 04

• Flipped Classroom
• 40 min · Individual

Individual: Design Responsivo

Cada aluno adiciona media queries ao CSS para adaptar o layout a ecrãs móveis, testando com o modo de inspecção do browser. Registam screenshots antes/depois e submetem para feedback.

Como é que a estrutura HTML se separa do design CSS?

Sugestão de Facilitação

Para 'Design Responsivo', forneça aos alunos dispositivos ou emuladores de diferentes tamanhos de ecrã para testarem as suas páginas sem depender de suposições.

O que observar

Entregue a cada aluno um pequeno pedaço de papel. Peça-lhes para escreverem uma tag HTML que usariam para um título principal e uma propriedade CSS que mudaria a cor desse título. Peça também que expliquem brevemente porque escolheram essa tag e propriedade.

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Algumas notas sobre lecionar esta unidade

Comece sempre com exemplos visuais: mostre duas páginas, uma com HTML puro e outra com CSS aplicado, para tornar concreto o propósito de cada linguagem. Evite explicar demasiado antes da prática, pois a experimentação direta gera mais perguntas significativas. Use analogias simples, como 'o HTML é o esqueleto e o CSS é a roupa que veste o esqueleto', mas não se prenda a elas. Pesquisas mostram que a aprendizagem de linguagens de programação é mais eficaz quando os alunos constroem algo desde o início, mesmo que seja mínimo.

Os alunos compreendem que HTML e CSS são linguagens distintas com propósitos diferentes, aplicam corretamente tags semânticas e propriedades CSS, e identificam problemas de acessibilidade ou design responsivo em páginas web simples. O sucesso mede-se pela capacidade de justificar escolhas técnicas com base em critérios claros.

---

Atenção a estes erros comuns

• Durante a atividade 'Estrutura HTML Básica', os alunos podem pensar que 'HTML e CSS fazem a mesma coisa'.

  Peça aos pares que comecem com uma página em HTML puro e, em seguida, adicionem apenas CSS. Peça-lhes que descrevam por escrito o que mudou visualmente e porquê, usando os termos 'estrutura' e 'apresentação' nos seus registos.

• Durante o 'Teste de Acessibilidade', alguns podem considerar que 'Acessibilidade é opcional'.

  Use uma ferramenta de leitor de ecrã durante a atividade para que os alunos ouçam como uma página sem texto alternativo soa, comparando com uma página bem estruturada. Peça-lhes que anotem as diferenças e discutam em grupo o impacto para utilizadores reais.

• Ao longo da atividade 'Design Responsivo', os alunos podem assumir que 'Sites funcionam igual em todos os dispositivos'.

  Forneça aos alunos um conjunto de dispositivos ou emuladores e peça-lhes que testem as suas páginas em três tamanhos de ecrã diferentes. Peça-lhes que fotografem ou descrevam as quebras de layout que encontram e proponham soluções usando media queries.

---

Metodologias usadas neste resumo

• Ensino pelos Pares
• Flipped Classroom