PT07: Iniciação ao HTML

Ponto de situação a 4maio: [Abrir folha de cálculo]

Principais objectivos deste trabalho:

    • Primeiros passos em HTML com a construção de uma tabela;
    • Formatação básica com CSS interno e externo;
    • Instalação e utilização de 2 editores de código: Notepad++ e Atom;
    • Entender as "Boas práticas" na Programação;
    • Realizar o curso/jogo Sololearn em HTML;
    • Primeiros passos no Github (e ainda no git, GitHub Pages e Github Desktop);
    • Criação de um domínio de 2º nível (SLD) gratuito com o FreeNom;
    • Navegação no site de aprendizagem W3Schools;

Prazos

Inicio: 6ªF, 17 abril 2020

Fim: Dom, 10 maio 2020 às 23:59

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/

PT04 - Programacao HTML (Respostas)

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]