TIC · 9.º Ano · Criação de Conteúdos e Multimédia · 3.º Período

Desenvolvimento de Páginas Web

Os alunos são introduzidos às linguagens de marcação e estilo para a criação de sites simples.

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

Sobre este tópico

O desenvolvimento de páginas web introduz os alunos às linguagens de marcação HTML para a estrutura e CSS para o estilo visual de sítios simples. Nesta unidade, exploram como o HTML define elementos semânticos como cabeçalhos, parágrafos e imagens, enquanto o CSS controla cores, fontes e posicionamento, promovendo a separação clara entre conteúdo e apresentação. Esta distinção é essencial para criar sítios mantíveis e escaláveis.

No âmbito do Currículo Nacional para o 3.º Ciclo, este tema alinha-se com os domínios de Criação de Conteúdos e Sistemas de Informação, abordando acessibilidade através de atributos como alt text para imagens e contraste de cores para utilizadores com deficiência visual, além de design responsivo com media queries para compatibilidade em dispositivos móveis. Os alunos respondem a questões chave sobre estas práticas, fomentando competências digitais críticas.

A aprendizagem ativa beneficia particularmente este tópico porque permite aos alunos codificar, testar e iterar em tempo real. Ao construírem páginas web em editores como o CodePen ou VS Code e visualizarem alterações imediatas no browser, compreendem conceitos abstractos de forma prática e colaborativa, retendo melhor as boas práticas de desenvolvimento web.

Questões-Chave

1. Como é que a estrutura HTML se separa do design CSS?
2. O que torna um website acessível para pessoas com deficiência visual?
3. Como garantir que um site é visualizado corretamente em dispositivos móveis?

Objetivos de Aprendizagem

• Estruturar o conteúdo de uma página web utilizando elementos semânticos HTML apropriados (e.g., header, nav, main, article, footer).
• Aplicar estilos visuais a elementos HTML utilizando seletores CSS básicos (e.g., tag, class, id) e propriedades de formatação (e.g., color, font-size, margin).
• Comparar a aparência de uma página web em diferentes tamanhos de ecrã, demonstrando a necessidade de design responsivo.
• Explicar como atributos como 'alt text' em imagens contribuem para a acessibilidade web para utilizadores com deficiência visual.
• Criticar o design de um website simples em termos de clareza estrutural e apelo visual, propondo melhorias com HTML e CSS.

Antes de Começar

Introdução à Informática e ao Pensamento Computacional

Porquê: Os alunos precisam de uma compreensão básica do que é um computador, como funciona e os princípios do pensamento computacional para abordar a criação de código.

Navegação e Pesquisa na Internet

Porquê: A familiaridade com a navegação em websites e a utilização de motores de busca é fundamental para que os alunos compreendam o contexto onde as páginas web que irão criar serão visualizadas.

Vocabulário-Chave

HTML (HyperText Markup Language)	Linguagem de marcação usada para criar a estrutura e o conteúdo de páginas web, definindo elementos como títulos, parágrafos e imagens.
CSS (Cascading Style Sheets)	Linguagem de estilização que controla a apresentação visual de uma página web, definindo cores, fontes, layout e espaçamento.
Elemento Semântico	Um elemento HTML que descreve claramente o seu significado para o navegador e para o programador, como <header> para o cabeçalho ou <nav> para a navegação.
Seletor CSS	Um padrão usado para selecionar os elementos HTML aos quais se deseja aplicar estilos, como o nome da tag, uma classe ou um ID.
Design Responsivo	Técnica de design web que faz com que as páginas se adaptem automaticamente ao tamanho do ecrã do dispositivo do utilizador, garantindo uma boa visualização em desktops, tablets e smartphones.
Acessibilidade Web	Prática de garantir que websites e ferramentas web sejam projetados e desenvolvidos para que pessoas com deficiência possam usá-los, incluindo o uso de 'alt text' para imagens.

Atenção a estes erros comuns

Erro comum

HTML e CSS fazem a mesma coisa.

O que ensinar em alternativa

HTML estrutura o conteúdo, enquanto CSS define a aparência; misturá-los torna o código confuso. Actividades em pares onde alteram só CSS ajudam os alunos a ver mudanças visuais sem tocar no HTML, reforçando a separação. Discussões em grupo clarificam esta distinção prática.

Erro comum

Acessibilidade é opcional.

O que ensinar em alternativa

Acessibilidade garante uso por todos, como alt text para leitores de ecrã. Testes colectivos com ferramentas revelam falhas reais, motivando correcções. Abordagens activas como role-playing de utilizadores com deficiências promovem empatia e aplicação imediata.

Erro comum

Sites funcionam igual em todos os dispositivos.

O que ensinar em alternativa

Design responsivo adapta-se via media queries. Testes em diferentes tamanhos de ecrã em browser mostram quebras, guiando iterações. Trabalho individual com inspecção de elementos torna esta necessidade tangível e memorável.

Ideias de aprendizagem ativa

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.

30 min·Pares

Flipped Classroom

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.

45 min·Pequenos grupos

Flipped Classroom

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.

35 min·Turma inteira

Ligações ao Mundo Real

• Profissionais de marketing digital utilizam HTML e CSS para criar e otimizar landing pages de campanhas publicitárias, como as vistas no site da Worten ou da FNAC, para garantir que os produtos e promoções sejam apresentados de forma apelativa e clara em qualquer dispositivo.
• Web designers em agências como a Farfetch ou a OutSystems usam estas linguagens para construir a interface de utilizador de aplicações web complexas, assegurando que a navegação seja intuitiva e o conteúdo visualmente organizado para milhões de utilizadores.
• Jornalistas e editores em publicações online como o Público ou o Observador estruturam e formatam artigos com HTML e CSS para que a leitura seja agradável e acessível a todos os leitores, independentemente do dispositivo que utilizam.

Ideias de Avaliação

Bilhete de Saída

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.

Verificação Rápida

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?'

Avaliação entre Pares

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?'

Perguntas frequentes

Como separar estrutura HTML do design CSS?

Use HTML só para conteúdo semântico com tags como <h1> ou <p>, e CSS externo para estilos via selector como body { background-color: blue; }. Esta separação facilita manutenção: altere CSS sem tocar HTML. Atividades práticas de ligação de folhas externas mostram aos alunos os benefícios em tempo real, promovendo código limpo.

O que torna um website acessível para deficientes visuais?

Elementos chave incluem alt text em imagens, contraste elevado de cores (mínimo 4.5:1), cabeçalhos hierárquicos e navegação por teclado. Ferramentas como Lighthouse verificam conformidade WCAG. Ensinar com testes colaborativos ajuda alunos a identificarem e corrigirem falhas, construindo sítios inclusivos desde o início.

Como garantir que um site é responsivo em mobiles?

Aplique media queries no CSS, como @media (max-width: 600px) { body { font-size: 16px; } }, e use unidades relativas como %. Teste com dev tools do browser simulando dispositivos. Actividades individuais de redimensionamento de janelas revelam problemas, incentivando iterações rápidas para layouts adaptáveis.

Como usar aprendizagem ativa no desenvolvimento de páginas web?

Implemente codificação em pares com editores online para feedback imediato, rotações de estações para HTML/CSS/acessibilidade e testes colectivos com ferramentas. Estas abordagens tornam conceitos abstractos concretos: alunos veem alterações no browser, debatem correcções em grupo e iteram designs, melhorando retenção e competências colaborativas em 9.º ano.