Leia com atenção:

Todas as evidencias pedidas devem estar bem identificadas em sub-páginas cujo nome deve começar por Passo 1, Passo 2, etc.

Há algumas entregas pelo Classroom.

Passos

0. Investigue um pouco sobre a historia do HTML. Pode começar por ler aqui: História do HTML.

1. Entender a estrutura básica de um ficheiro HTML

2. Instalação de um editor de código de programação

a. Vamos instalar e abrir o editor Notepad++

• Descarregar e instalar a aplicação a partir do site oficial: notepad-plus-plus.org/download/
• Abrir o editor e alterar os menus para Português (opcional). Aceder ao menu Settings > Preferences > General: Localization
• Configurar o editor para a linguagem HTML. Aceder ao menu Linguagem > H > HTML
• (Opcional) Instalar os Plugins Emmet e Snippets para acelerar a construção de código. Ver a seguinte página de apoio sobre os referidos Plugins.

b. Mais adiante vamos instalar o Atom que vai ser o nosso editor preferido quando começarmos a utilizar o GitHub (ver mais abaixo).

3. Na programação as boas práticas são muito importantes, por isso, devem ser, rigorosamente, cumpridas.

Abrir ler e cumprir as seguintes "Boas Práticas"

[W3Schools] Para o ensino de HTML (e tambem CSS e Javascript) vamos utilizar o seguinte manual online disponível na W3Schools

4. Primeiros passos em HTML (Retirado do W3Schools)

Vamos começar por entender e escrever o código que represente a estrutura básica de um documento HTML. A seguir escrevemos texto de cabeçalho (headings) de h1 a h6. Faremos a escrita de parágrafos de texto (<p>), de links (<a>) e terminamos com a inserção de imagens no documento HTML (<img>).

Escreva os seguintes códigos HTML (de 1 a 5) de exemplo utilizando o editor Notepad++:

HTML Básico: Estrutura do documento HTML, texto de cabeçalho (headings), parágrafos de texto, links e imagens

1. HTML document (h1 e p)

2. HTML headings (h1 a h6)

3. HTML paragraphs (p e p)

4. HTML links (a href)

5. HTML images (img src)

Evidência: Coloca os códigos HTML que criaste no Notepad++ (ou no Atom) no portefólio.

Procedimento:

Computador: Todos os pedaços de código HTML devem ser criados no disco local (em pastas e sub-pastas devidamente separadas).

DRIVE: No final deves copiar toda a estrutura de pastas do computador para a pasta DRIVE criada para o efeito.

SITEs (Portefólio): A seguir deves inserir essa pasta DRIVE na página criada para o efeito no Portefólio.

Classroom: Envio da pasta DRIVE, criada para o efeito para este passo.

5. Criação de uma tabela em HTML

Para este passo vamos realizar o seguinte mini projeto HTML: "Pauta caricaturada da turma":

Acede ao enunciado.

Evidência: Coloca no portefólio a memória descritiva do trabalho.

6. Iniciação ao Github

Vamos carregar o mini projeto da tabela elaborado no passo 5 e os códigos HTML elaborados no passo 4 em repositórios diferentes no GitHub. Para isso seguimos os seguintes passos:

1. Em primeiro lugar deves criar um login (gratuito) no GitHub. Ver ajuda no final deste passo.
2. Entra no GitHub e faça o "upload" de todos os ficheiros HTML, JPG, etc.
3. Verifica o funcionamento do site online. Verifica se não há ligações quebradas. Caso haja corrige-as.

Ajuda: sites.aebenfica.org/apontamentos-tic/programacao/githubpages

Evidência: A existência de 2 repositórios distintos: um para o passo 4 e outro para o passo 5.

7. Associar o domínio github pessoal (username.github.io) a um domínio personalizado

Os domínios são nomes lógicos que apontam para páginas web.

O registo de um domínio é normalmente pago, mas há casos em que pode ser gratuito.

No nosso caso vamos fazer um registo gratuito utilizando o FreeNom.

Ajuda: sites.aebenfica.org/apontamentos-tic/programacao/dominiosgratuitos

Testar o funcionamento do novo domínio criado no FreeNom que deve apontar para o URL inicial do github.

(ver ajuda do passo 6)

8. Enviar os endereços GitHub e FreeNom (registados anteriormente) para o seguinte formulário:

Formulário: Recolha dos URLs GitHub e site público

Ver folha de cálculo com as respostas e respetiva indicação colocada pelo professor: OK / NOT OK:

docs.google.com/spreadsheets/d/1oPzgTl9dBDAWDxLt84O24baAGYRDA5dS5Z5A1odbGYM/

9. Elaborar o curso HTML da SoloLearn

a. Cria uma conta no site Sololearn.com (utiliza o teu email escolar @aebenfica.org)

b. Instala a App Sololearn no telemóvel a partir de play.google.com/store/apps/details?id=com.sololearn

c. Realiza o curso online de HTML da SoloLearn a partir do:

c1. Telemóvel: App Sololearn. (Ver passo b.) ou

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

d. Captura pelo menos 3 PrintScreens de progressão ao longo do curso (web ou mobile) incluindo o Diploma Final.

Evidência: Coloca no teu portefólio o que achares relevante do curso da SoloLearn, incluindo os printscreens capturados anteriormente.

10. Publicitar o trabalho através de uma noticia no Blog Público, onde deves incluir os seguintes tópicos:

• Memória descritiva do trabalho;
• Indicação do URL do domínio publico com o site criado;
• Um printscreen da finalização do curso HTML.

Blog público: aebenficaonline.blogspot.pt

Evidência: Coloca no teu portefólio uma ligação para a noticia criada no Blog público.

(Esta entrada é também contabilizada para a avaliação do PT Geral 1)

11. Apresentação sumária dos trabalho/produtos finais a partir do computador do aluno.

Vamos utilizar o "Cast for Education". Ver como em sites.aebenfica.org/apontamentos-tic/gsuite/cast/Cast-Educacao

[Este passo não entra na avaliação]

Materiais de apoio

Em informaTICa para todos:

HTML, CSS e Javascript: Cursos online e tutoriais (BR)

HTML: A minha primeira página HTML com CSS

HTML: Aprender HTML em 12 minutos

HTML: Criar um jogo em HTML5 (Video aula EN)

HTML: Curso online de web design (EN, Univ. Washington)

HTML: Um pouco de historia

Desafios de 10 minutos: sites.aebenfica.org/apontamentos-tic/programacao/desafios

Introdução ao HTML, CSS e Javascript (Apostilha CAELUM, BR): sites.aebenfica.org/apontamentos-tic/programacao/htmlecss/caelum

Manual de HTML: W3Schools

Lista alfabética de todas as tags HTML: www.w3schools.com/tags/default.asp

Sololearn: https://sites.google.com/a/aebenfica.org/apontamentos-tic/programacao/aplicacoesandroid