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:
- Em primeiro lugar deves criar um login (gratuito) no GitHub. Ver ajuda no final deste passo.
- Entra no GitHub e faça o "upload" de todos os ficheiros HTML, JPG, etc.
- 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)
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