Planeamento

Aulas

Apresentação da unidade curricular

1

Apresentação da unidade curricular: objetivos, corpo docente, bibliografia, método de avaliação, datas importantes, tópicos das aulas, entregas do projeto; história da Web, síntese de HTML e sua evolução, ferramentas (editores e developer tools).

HTML (parte 1)

2

HTML (parte 1): estrutura, texto, links, listas, imagens.

HTML (parte 2)

3

HTML (parte 2): tabelas, div, span, iframe, audio, video; semântica (header, nav, ...) e DOM; validação.

CSS (parte 1)

4

CSS (parte 1): introdução; seletores, folhas de estilos, cor, texto, hierarquias.

CSS (parte 2)

5

CSS (parte 2): caixas e bordas, posicionamento, tamanhos de ecrãs, formatação de imagens.

Framework W3.CSS

6

Framework W3.CSS: introdução; containers e o sistema de grelhas, algumas componentes da interface com o utilizador, atribuição de cores, temas de cores e formatação de elementos.

JavaScript (parte 1)

7

JavaScript (parte 1): introdução; nomes, tipos de dados, variáveis e operadores, if, switch, funções.

JavaScript (parte 2)

8

JavaScript (parte 2): ciclos, objetos, arrays.

JavaScript (parte 3)

9

JavaScript (parte 3): objeto Window, manipulação do DOM.

JavaScript (parte 4)

10

JavaScript (parte 4): processamento de eventos.

Formulários

11

Formulários: estrutura e tipos de campos em HTML, processamento dos dados nos campos com JavaScript, e armazenamento de dados em session ou local storage do browser.

Frameworks Web

12

Frameworks web: full stack development, frontend e backend, frameworks de frontend. Dicas para o projeto, enquadramento de ITW na LTI.

Avaliações da etapa 2 do projeto

13

Avaliações da etapa 2 do projeto.

Aulas

Início na semana de 24 a 28 de fevereiro

1

Só a partir da semana de 24 a 28 de fevereiro é que há matéria de base para os exercícios teórico-práticos.

Exercícios de HTML (parte 1)

2

Exercícios de HTML (parte 1): imagens, listas, headings, p.

Exercícios de HTML (parte 2)

3

Exercícios de HTML (parte 2): tabelas, div, span.

Exercícios de CSS (parte 1)

4

Exercícios de CSS (parte 1): seletores e propriedades de cor e tipo de texto.

Exercícios de CSS (parte 2)

5

Exercícios de CSS (parte 2): propriedades de posicionamento.

Exercícios de CSS (parte 3)

6

Exercícios de CSS (parte 3): ajuste automático da apresentação de uma página HTML em função da largura do ecrã e versão de impressão em papel.

Exercícios de JavaScript (parte 1)

7

Exercícios de JavaScript (parte 1): invocação automática de uma função aquando do carregamento de uma página HTML, inserção de texto no documento HTML, criação de funções para processar números introduzidos pelo utilizador, utilização da consola para testar funções.

Avaliações da etapa 1 do projeto.

8

Avaliações da etapa 1 do projeto.

Não há aula.

9

Não há aula.

Não há aula.

10

Não há aula.

Exercícios de JavaScript (parte 2)

11

Exercícios de JavaScript (parte 2): realização de um jogo, com uso de ciclos, fluxos de controlo, estruturas de dados, e objetos.

Exercícios de JavaScript (parte 3)

12

Exercícios de JavaScript (parte 3): enriquecimento das funcionalidades do jogo, com manipulação do DOM e tratamento de eventos.

Exercícios com formulários

13

Exercícios com formulários: construção de formulário em HTML, gestão de dados usando código JavaScript, armazenamento de dados no local storage do browser.

Avaliações da etapa 2 do projeto

14

Avaliações da etapa 2 do projeto.

Aulas

Apresentação do projeto

1

Apresentação do projeto: exercício de desenho do mapa do site e dos esboços das páginas do site, usando papel e lápis.

Desenvolvimento do projeto

2

Objetivo: definir a estrutura de pastas do site, criar páginas de acordo com os esboços da aula anterior, e ligar as páginas entre si.

Desenvolvimento do projeto

3

Objetivo: colocar conteúdos de texto, imagens, áudio, e vídeo adequados ao tema no site.

Desenvolvimento do projeto

4

Objetivo: formatar texto usando regras CSS, separando a apresentação do conteúdo, e recorrendo a classes e identificadores nos elementos HTML.

Desenvolvimento do projeto

5

Objetivo: posicionar elementos e formatar imagens e vídeos usando CSS.

Desenvolvimento do projeto

6

Objetivo: suportar vários browsers e tamanhos de janelas.

Desenvolvimento do projeto

7

Objetivo: definir objetos para representar os conceitos do jogo do projeto, bem como funções para mostrar esses objetos na página HTML.

Avaliações da etapa 1 do projeto

8

Avaliações da etapa 1 do projeto.

Não há aula.

9

Não há aula.

Não há aula.

10

Não há aula.

Não há aula.

11

Não há aula.

Desenvolvimento do projeto

12

Objetivo: implementar um ou mais requisitos essenciais do jogo do projeto.

Desenvolvimento do projeto

13

Objetivo: implementar dois ou mais requisitos do jogo do projeto, incluindo o registo e identificação de jogadores através de formulários em páginas HTML.

Desenvolvimento do projeto

14

Objetivo: calcular estatísticas e implementar funcionalidades adicionais do jogo do projeto.

Avaliações da etapa 2 do projeto

15

Avaliações da etapa 2 do projeto.