Enunciado

PT09: Introdução ao Javascript

Note bem:

    • Trabalho com duas vertentes: Individual e de Grupo (2 elementos máximo).
    • Preencha o formulário com a proposta dos grupos, URL do Disco Partilhado e Site público: Grupos , Drives de Equipa e Site público
    • Todas as evidências pedidas devem estar bem identificadas em sub-páginas cujo nome deve começar por Passo 1, Passo 2, etc.

Utilização do DRIVE:

Pessoal - O meu disco: Para os passos elaborados individualmente.

De Equipa - Discos Partilhados: Para os passos elaborados em grupo

Cada grupo deve criar um "Disco Partilhado" e adicionar o professor como Gestor (Luis.Pitta@aebenfica.org).

Como criar um Disco Partilhado?

Esta Proposta de Trabalho pretende atingir os seguintes objetivos:

1. Introdução aos principais blocos de programação: variáveis, condições, operadores, ciclos e funções.

2. Introdução à linguagem de programação Javascript.

3. Ler e identificar nos apontamentos fornecidos as áreas com texto, código e video mais relevantes.

4. Construção de um storyboard para um video tutorial com recurso a ferramentas de NLE simples (por exemplo: Screencastify ).

5. Utilização do GitHub como plataforma de partilha de código.

6. Desenvolvimento, partilha e divulgação dos produtos finais a partir de um site público comum.

Elabore os seguinte passos

1. Introdução à programação e ao Javascript

Tarefa individual

Partindo da página de apoio "O que é programar? Principais blocos" (ver Material 1) apresentada na aula execute os seguintes tópicos:

a. Abre o seguinte PDF que contem somente os capítulos 1, 2 e 3 do livro de apoio: Índice dos capítulos 1, 2 e 3 do livro de apoio

b. Lê os capítulos 1 e 2 e identifica os 5 tópicos apresentados na referida página de apoio (ver Material 1)

c. Utiliza as ferramentas de edição do Adobe Acrobat Reader ou do Foxit Reader (ambos gratuitos) para sublinhar e

marcar com marcadores e caixas de texto os blocos que representam cada um dos 5 tópicos apresentados na

página de apoio "O que é programar? Principais blocos" (ver Materiais: 1).

d. Guarda o PDF editado com o nome "PT09 - Os meus apontamentos - Nome e apelido" dentro da pasta DRIVE

criada para o efeito ( AIB \ PT09 \ Passo1 )

e. Insere o PDF na página criada para o efeito no teu portefólio digital.

Evidências:

Carregar o ficheiro PDF com a versão anotada para o DRIVE.

Inserir o mesmo ficheiro PDF no teu portefólio (na pasta certa!).

(1) Enviar para o Classroom o PDF anotado.

Materiais:

1. O que é programar? Principais blocos. Ver sites.aebenfica.org/apontamentos-tic/programacao/oqueeprogramar

2. Índice e PDF dos 3 primeiros capítulos: Índice dos capítulos 1, 2 e 3 do livro de apoio

3. Javascript por onde começar. Ver 0. Javascript: Material utilizado (PDF, online e cursos video)


2. O curso Javascript da Sololearn

Tarefa individual

Foram apresentados diversos exemplos de código Javascript a partir do site W3Schools.com

Agora vamos realizar o curso Javascript da Sololearn:

a. Acede ao site Sololearn.com com a tua conta @aebenfica.org (a mesma conta Sololearn utilizada na PT anterior)

b. Verifica que tens a App Sololearn instalada no teu telemóvel (Google Play Store: play.google.com/store/apps/details?id=com.sololearn)

c. Realiza o curso online de Javascript da Sololearn a partir do:

c1. Telemóvel: App Sololearn ou a partir do

c2. Computador pessoal: Aceder ao site: www.sololearn.com/Play/JavaScript

d. Durante o curso toma nota de três tópicos que consideraste de mais difícil compreensão, ou seja que não foi entendido logo à primeira.

Identifica esses tópicos e descreve as estratégias utilizadas para as tentar compreender?

Para cada um dos três tópicos responde às 4 perguntas disponíveis na página "Conselhos de um programador amigo" (ver Material 2)

e. Captura somente um printscreen do Diploma Final do curso, onde deve surgir o teu nome.

Insere o printscreen no DRIVE.

Evidências:

Deve surgir no portefólio a resposta à alínea d. e o printscreen do Diploma final do curso Sololearn.

(2) Enviar para o Classroom o printscreen do Diploma final do curso Sololearn.

Materiais:

1. O curso Sololearn sobre Javascript. Ver www.sololearn.com/Play/JavaScript

2. Conselhos de um programador amigo. Ver sites.aebenfica.org/apontamentos-tic/programacao/iniciacao

3. Identificação, tradução e listagem dos blocos de texto, código e imagens

Tarefa de Grupo (ver Disco Partilhado)

A partir do PDF comentado chegou a altura de escolher somente um pequeno grupo de tópicos a ser utilizado

como matéria de apresentação no video tutorial que se vai desenvolver a seguir.

Cada grupo vai ser o "grupo especialista" desse(s) tópico(s).

a. Escolha do tópico a desenvolver:

1. Consultar os títulos dos tópicos dos capítulos 1 e 2 na seguinte página: Índice dos capítulos

2. Verificar as escolhas já efetuadas na seguinte folha: Tópicos já escolhidos

3. Escolher 3 tópicos (deve somar um total de aproximadamente 4 páginas) e enviar para o seguinte formulário:

Formulário Escolha do tópico

b. Traduzir, adaptar e recriar o conteúdo escolhido incluindo os códigos HTML, CSS e Javascript que lá surgirem.

Separar e identificar os textos, imagem (desenhos, esquemas, etc.) e código.

Criar uma folha de cálculo com a identificação de todos os pedaços de texto, imagens, código.

Evidências:

Preencher o formulário da alínea a.1.

A folha de cálculo com a identificação/listagem de todas as "peças" a utilizar no produto multimédia final.

Tudo colocado no Disco Partilhado.

(3) Enviar para o Classroom a folha de cálculo com a identificação/listagem de todas as "peças" a utilizar no produto multimédia final.

Materiais:

1. Os apontamentos Javascript fornecidos pelo professor.

Ver lista com 12 páginas de apoio: Materiais de apoio

4. Construção do storyboard e do video tutorial

Tarefa de Grupo (ver DRIVE de equipa)

O trabalho de edição deve ser simples e deve seguir o seguinte workflow.

Proposta de workflow de trabalho:

1. Planear no Storyboard

2. Fazer as gravações com o Screencastify (adicionar webcam e mic se for o caso)

3. Descarregar as filmagens do DRIVE para o computador local (*.webm)

4. Criar uma pasta de trabalho no computador local e inserir todos os clips audio e video necessários para o projeto

5. Abrir o NLE escolhido e carregar os clips para a area de ficheiros

6. Elaborar a composição conforme planeada no Storyboard

7. Guardar o projeto

8. Exportar o video final no formato .MP4

9. Carregar o video final em MP4 para dois locais: Youtube (não listado) e para o DRIVE.

10. Inserir a pasta DRIVE e o video do Youtube no portefólio.

Deves inserir o produto final e os teus comentários no Portefólio. Onde?

Numa página com o nome Propostas de Trabalho \ PT09 \ "Workflow "

O Storyboard

O storyboard e a representação gráfica do nosso filme.

Para isso deve começar por pensar na sequência do "filme" e transcrevê-la para o storyboard.

Cada quadrado representa uma cena e deve conter:

a. um pequeno rascunho visual (desenho, croqui, esquema, etc.) que define o plano de "filmagem"

b. os tempos aproximados de cada cena.

c. o S/W e o H/W utilizados para produzir cada cena.

Como digitalizar o storyboard com o smartphone: sites.aebenfica.org/apontamentos-tic/gsuite/drive/scancomodrive

O grupo deve criar um pequeno video tutorial com as seguintes características:

      • Duração mínima sugerida: 2min. (máxima: 3min 30seg.);
      • Com audio explicativo (voz do aluno) em certas partes;
      • Deve incluir introdução e créditos finais (cerca de 10seg. cada) no inicio e no fim do clip, respetivamente;
      • Opcional: Utilização da webcam com a cara do locutor;
      • Opcional: legendas em EN para o Youtube (ficheiro .srt);

Genérico inicial:

Deve conter o titulo do tutorial, sub-titulo (opcional) autor e data;

Créditos finais:

Deve incluir texto com uma lista das pessoas envolvidas direta e indiretamente no projeto, o nome da Escola e da disciplina. O ano lectivo e a data atual.

Montagem no editor de video (escolhido em grupo alargado - deve ser simples e gratuito)

Evidências:

A folha do storyboard (opcional: assinada pelo professor no canto inferior direito), digitalizada e inserida no portefólio de cada aluno.

Os ficheiros fonte do projeto video. O ficheiro final em MP4 (exportação).

O URL do Youtube com o mesmo video MP4.

Tudo colocado no Disco Partilhado.

(4) Enviar para o Classroom a folha do storyboard em PDF + Link do video final do Youtube.

Materiais:

1. Storyboard: Sobre storyboards, planos de filmagens e os 4Ps de uma boa historia

2. Gravadores de ecrã: Programas de captura video do ecrã

3. Programas NLE sugeridos:

        • Adobe Premiere Portable. (melhor opção)
        • Open Shot: www.openshot.org/download/ - Totalmente gratuito e abre o formato video do screencastify .webm (120MB)
        • Filmora: Get started: youtu.be/ZcE9TRJ8K5s - Na versão gratuita exporta com uma barra!
        • DaVnci Resolve: 1GB!!! Grande e poderoso. Talvez grande demais.
        • Lightworks: Na versão gratuita exporta só para o Vimeo.

5. Desenvolvimento do site apoio (um site por grupo)

Tarefa de Grupo (ver Disco Partilhado)

Criar o site público com um nome sugestivo.

Partilhar o URL do site público e o URL do drive de equipa no seguinte formulário:

Ver respostas, no final da mesma página: Grupos , Drives de Equipa e Site público

O que inserir no site público? Deves inserir os seguintes elementos:

Texto > Google Apresentações e Google Documentos => Google SITEs

Imagens (esquemas, gráficos, desenhos, etc.) > Google Fotos, Google DRIVE de equipa => Google SITEs

Videos (tutoriais, clips) > Google DRIVE de Equipa e Youtube => Google SITEs

etc.

Evidências:

Um site autónomo que apresente o produto final ao público.

Deve ser organizados por páginas e sub-páginas devidamente identificadas.

Deve surgir no DRIVE de Equipa.

Materiais:

1. O G. Disco Partilhado

2. O G. Sites

3. O G. Slides

6. Apresentação em direto ["OBS > Youtube"] + partilha e divulgação do site público.

Tarefa de Grupo (ver Disco Partilhado)

Escolhe a data para a apresentação oral do teu grupo: Formulário Escolha da data

Criação de uma noticia no blog escolar com a divulgação do site como se fosse a venda de um produto

Cada grupo deve promover o seu espaço da melhor maneira possível.

Para a sala de aula será feita uma apresentação de 6 minutos com apoio de uma Apresentação Electrónica elaborada no G. Apresentações.

Evidências:

Blog Escolar

Apresentação de apoio para a sala de aula.

Materiais:

1. O G. DRIVE de equipa

2. O G. Sites

3. O G. Apresentações

4. Blog Escolar

Auto e hetero avaliação

Todos os alunos devem preencher a seguinte grelha.

No dia da apresentação abrir: sites.aebenfica.org/apontamentos-tic/pts/autoehetero-avaliacao

Fim do enunciado