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).
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:
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