Desenvolvimento Web e Cocriação Assistida por IA

Recurso Educativo Digital (RED) desenvolvido no âmbito do Mestrado em Ensino de Informática.

No desenho metodológico global do projeto, identificam-se cinco etapas, das quais três correspondem a fases de natureza predominantemente prática, orientadas para o desenvolvimento progressivo da autonomia na utilização de sistemas de Inteligência Artificial Generativa (IAGen):

Fundamentos Web (HTML/CSS) com foco na descoberta guiada;
Utilização de IAGen como ferramenta, centrada na aquisição de competências de formulação de promts para a geração de código funcional e passível de integração;
Curadoria e cocriação assistida por IAGen, orientadas para a produção e integração de snippets em soluções Web desenvolvidas de forma autónoma.

Fundamentos Web (HTML/CSS)

A estratégia sugerida afasta-se da abordagem tradicional expositiva, privilegiando a Aprendizagem por Descoberta Guiada (ADG) através de microprojetos/tarefas. Ao disponibilizar o código-base funcional em ambiente online, o aluno tem a oportunidade de se tornar um editor ativo. A metodologia foca-se na modificação iterativa e controlada: o aluno é orientado primeiro a identificar a estrutura (literacia de leitura) e só depois a modificar parâmetros e seletores (literacia de escrita), obtendo feedback visual imediato.

Exercício 1: O Esqueleto da Página (HTML)

Tudo na web começa com uma estrutura. Neste primeiro exercício, vamos alterar o “esqueleto” da página. O objetivo é perceberes que o código controla o resultado: se mudares o texto dentro das etiquetas (tags) <h1>, o título da página muda instantaneamente. Experimenta escrever o teu nome!

Editor Interativo: Estrutura HTML

▼

Code

1. Declaração <!DOCTYPE html>

2. Raiz <html>

3. Head <head>
<title> Site </title>
</head>

4. Body <body>

<!– Edite abaixo –>
<h1>Olá!</h1>

</body>

</html>

o-meu-site.pt/index.html

Olá!

Exercício 2: Incorporar Multimédia (Atributos)

Uma página só com texto é aborrecida. Vamos adicionar imagens! Mas o navegador não adivinha qual a foto que queres. Precisas de usar o atributo src (source/origem) para dizer onde está a imagem. Copia um dos links de teste e vê a imagem aparecer magicamente.

Editor Interativo: Imagens (SRC)

▼

Code

<!– URLs para testar: –>
<!– 1. https://ptweb.info/imagem1.jpg –>
<!– 2. https://ptweb.info/imagem2.jpg –>

Body <body>

Elemento Imagem <h2>Imagem favorita:</h2>

<img src=““>

</body>

o-meu-site.pt/galeria.html

Imagem favorita:

Exercício 3: Maquilhagem e Estilo (CSS Inline)

HTML é a estrutura, mas o CSS é o estilo e a maquilhagem. Neste exercício, vais aprender a usar o atributo style para transformar um botão aborrecido em algo atraente. Experimenta mudar a cor de fundo (background-color) ou arredondar os cantos (border-radius).

Editor Interativo: CSS Inline (Estilo)

▼

Code

<!– Dicas de CSS: –>
<!– background-color: tomato; –>
<!– border-radius: 20px; –>
<!– color: white; –>

Body <body>

Botão   <button style=“
    background-color: #cccccc; color: #333333; border-radius: 0px;
  “>
    Clique aqui
  </button>

</body>

o-meu-site.pt/loja.html

Oferta Especial!

Exercício 4: A Regra do Espaço (Box Model)

Esta é a regra de ouro do design web. Como é que separamos os elementos? Vamos distinguir o padding (encher o balão, espaço interior) da margin (afastar os balões, espaço exterior). As caixas que vais ver estão coladas — usa a margem para lhe dar espaço para respirar!

Editor Interativo: Box Model (Espaço)

▼

Code

<!– padding: espaço interior (encher) –>
<!– margin: espaço exterior (empurrar) –>

Body <body>

Caixa 1   <div class=“caixa-azul”>
    Eu estou bem.
  </div>

Caixa 2 (Tu)   <div style=“
    background-color: tomato; margin: 0px; padding: 0px;
  “>
    Preciso de espaço!
  </div>

</body>

o-meu-site.pt/layout.html

Eu estou bem.

Preciso de espaço!

Exercício 5: Navegar vs. Agir (Interatividade)

Aqui a regra é clara: usamos um Link (<a>) quando queremos navegar para outra página (ir ler o jornal), e usamos um Botão (<button>) quando queremos que o computador faça uma ação ou cálculo (como a nossa calculadora de bónus). Testa os dois!

Editor Interativo: Links (HREF) vs. Botões (ONCLICK)

▼

Code

<!– 1. HREF = Destino (Navegar) –>

Link   <a href=“https://abola.pt“>
    Ler Jornal
  </a>

<!– 2. ONCLICK = Ação (Calcular) –>

Calculadora   <label> Nº de Jogos </label>
  <input type=“number”>

  <label> Prémio por Jogo </label>
  <input type=“number”>

  <button onclick=“calcular()”>
    Calcular Bónus
  </button>

o-meu-clube.pt/ferramentas

Navegação (HREF) 🔗 Ler Jornal

Ação (ONCLICK)

Nº de Jogos

Prémio por Jogo

Total: 0

Exercício 6: A Física da Animação

Neste desafio vais controlar a física e o tempo. Utilizando os @keyframes, tens de definir a trajetória da bola em três momentos: o chuto inicial (0%), a curva da trivela (40%) e o destino final (100%). Ajusta os valores para acertar no ângulo e desbloquear a mensagem de Golo!

Editor Interativo: Animação com CSS (Pontapé de trivela)

▼

                    @keyframes trivela-master {
                
                    0% { 
                    /* 1. Onde a bola arranca */
                
                    left: 
                    35%;
                    /* Posição Inicial */
                
                    }
                
                    40% { 
                    /* 2. O Efeito da Curva */
                
                    bottom: 
                    120px;
                    /* Altura do Arco */
                
                    left: 
                    15%;
                    /* Abre p/ esquerda */
                
                    }
                
                    100% { 
                    /* 3. Onde entra na baliza? */
                
                    bottom: 
                    140px;
                    /* Altura (Ângulo) */
                
                    left: 
                    28%;
                    /* Alvo Lateral */
                
                    transform: 
                    translateX(-50%)
                
                    scale(0.25) 
                    /* Profundidade */
                
                    rotate(720deg);
                    /* Rotação */
                
                    }
                
                    }

GOLO!!!

⚽

Questionário

Valida os teus conhecimentos.

Fundamentos Web

Pergunta 1 de 6

A carregar...

Explicação:

0%

Quiz Concluído!

Vamos ver como correu.