HTML - PT07

NESTA PUBLICAÇÃO IREI ESCREVER SOBRE A PROPOSTA DE TRABALHO REALIZADA EM APLICAÇÕES INFORMÁTICAS B SOBRE HTML!

Processo criativo

Como inspiração neste projecto, comecei por fazer logo o Passo 9 - Curso HTML da SoloLearn, assim comecei por aprender os conceitos básicos, as tags e atributos de HTML. Também já tinha começado no início do ano lectivo uma pesquisa autónoma sobre o tema porque me intrigou logo a partir do momento em que o professor o mencionou, assim revi os meus apontamentos que já tinha feito na altura. Também vi o código fonte de diversas páginas e sites que costumo utilizar para ver como é o código HTML de um site complexo, em que até a simples página de pesquisa Google.pt tem um código fonte enorme. Por fim utilizei o site W3Schools que já conhecia e o professor também partilhou em que vi diversas páginas e informação sobre HTML e CSS.

Preparação

- Instalação do Notepad++ e do Atom como editores de código;

- Configuração dos mesmos para programação em HTML;

- Instalação de alguns plugins que me pareceram úteis para o Notepad++;

- Visionamento de alguns vídeos de bases de HTML;

- Instalação do IrfanView para realização do Passo 5 - Criação de uma tabela;

- Instalação da aplicação SoloLearn para a realização do Passo 9 - Curso HTML da SoloLearn;

- Pesquisa de alguma informação básica sobre a linguagem.

Passos difíceis que tive de pedir ajuda:

- Instalação de plugins para o Notepad++ no Passo 2 - Editor de código; 

- Na criação de estrutura de pastas e nomes de documentos no Passo 4 - Primeiros passos HTML;

- Login na plataforma FreeNom no Passo 5 - Criação de uma tabela;

- Criação dos repositórios GitHub no Passo 6 - Iniciação ao Github;

Passos interessantes que mais gostei:

- Pesquisa e recolha de informação sobre a História e Estrutura do HTML no Passo 1 - HTML-Bases;

- Criação de toda a tabela e ficheiros HTML e CSS no Passo 5 - Criação de uma tabela;

- Utilização do Color Picker do site W3Schools para criar uma legenda de cada célula com uma cor diferente;

- Criação da conta GitHub no Passo 6 - Iniciação ao Github;

- Realização do curso sobre HTML no Passo 9 - Curso HTML da SoloLearn; gostei tanto da aplicação que comecei a fazer o curso de CSS, de JavaScript e de Python 3.

Resolução de Problemas:

Em todos os problemas encontrados pesquisei em fóruns e sites, a maioria deles internacionais, que contém bastante informação necessária sobre HTML e CSS e vários chats onde posso colocar as minhas dúvidas a outros programadores mais experientes. Também utilizei a plataforma Youtube com imensos vídeos sobre o tema, o site W3Schools com muitas sub-páginas destinadas a várias tags e matérias de HTML e CSS (incluindo o Color Picker) e também os apontamentos disponibilizados pelo professor. Senão encontrasse a minha resposta com os métodos descritos acima, perguntei sempre no fórum de dúvidas em que ou o professor, ou os meus colegas respondiam.

Decisões Tomadas:

- Decidi nomear todas as pastas, sub-pastas e ficheiros com nomes de acordo com as boas práticas de programação, assim não utilizei acentos e espaços, apenas escrevendo em minúsculas;

- Decidir fazer, para além do curso de HTML, os cursos de CSS, JavaScript e Python na aplicação do passo 9, SoloLearn;

- Todas as cores escolhidas para legendas das fotografias foram escolhidas sem nenhum critério apenas escolhendo algumas ao calhas no Color Picker;

- No passo 5, escrevi os estilos da tabela num ficheiro . css à parte para uma melhor organização;

- Ainda no passo 5, indentei e comentei todo o código para melhorar a sua organização e leitura;

- No passo 6, personalizei o repositório do passo 4, assim criei um ficheiro index.html que tinha links que abriam num novo separador o documento escolhido do passo.

Passo 0

O passo 0 foi bastante simples e fácil de realizar, no qual apenas tive de fazer alguma pesquisa simples sobre a história do HTML, onde e porque é que surgiu, a sua linha cronológica entre outros, não tive quaisquer dificuldades.

Passo 1

O passo 1 foi mais interessante, no qual continuei a minha pesquisa mas de uma maneira mais prática, agora aprendendo qual a estrutura básica de todos os ficheiros HTML, as primeiras tags como <html>, <head>, <body>, entre outras. Como já tinha estudado as bases de HTML autonomamente, não senti quaisquer dificuldades.

Passo 2

O passo 2 foi mais prático do que os anteriores, assim seguindo as instruções, instalámos o Notepad++ com alguns plugins recomendados pelo professor e também instalámos o Atom, configurando assim estes dois editores de texto. Senti algumas dificuldades na instalação dos plugins, mas consegui entender para que servem e instalar os mesmos.

Passo 3

O passo 3 foi para mim um bocado mais chato, mas bastante importante. Foi destinado às boas práticas de programação e como programo e essa vai ser a minha profissão no futuro, foi bastante aprender algumas das "regras" ou princípios de programação partilhados pelo professor, alguns deles pude colocar em prática durante a realização da proposta de trabalho.

Passo 4

O passo 4 foi o "primeiro" contacto que tivemos oficialmente com o HTML, podendo seguir os exemplos dos códigos partilhados pelo professora do site W3Schools, escrevemos os mesmos e aprendemos mais algumas tags importantes, como <img>, <h1> ou <a href>. Eram códigos com tags simples nos quais não tive qualquer dificuldade em compreender e escrever.

Passo 5

O passo 5 foi, para mim, o mais divertido de fazer, no qual era preciso escrever um código para uma tabela com a pauta caricaturada da turma, assim utilizei os meus conhecimentos e pesquisei informação sobre tabelas em sites partilhados pelo professor para realizar essa tarefa. Aprendi a utilizar tags como <table>, <td> e <tr> e também complementei a minha tabela com um ficheiro de estilos em CSS que melhoraram visualmente a mesma. Foi o passo mais trabalhoso, mas também o mais dinâmico e interessante, porque começámos um código do zero e fomos escrevendo e editando até um resultado final fantástico. Tive algumas dificuldades na utilização de algumas tags e na escrita de alguns atributos em CSS, mas consegui superá-los com alguma pesquisa.

Passo 6

O passo 6 foi o mais confuso para mim, visto que o GitHub para mim é uma plataforma bastante complexa e o meu inglês não é lá muito bom, senti por vezes dificuldades em entender alguns passos, mas consegui realizá-los com a ajuda das instruções do professor. Assim consegui criar os dois repositórios pedidos, um para o passo 4 e um para o passo 5. O domínio público do meu repositório é: https://andre-jesus02.github.io/

Passo 7

O passo 7 foi um bocado problemático no início porque não estava a conseguir fazer login com a minha conta de email escolar, por isso fiz o mesmo com a minha conta Gmail pessoal que funcionou. Consegui associar os domínios e achei que foi um passo muito interessante e simples, não sabia que sites como estes existiam e comecei a perceber como funcionam. Para além das dificuldades no login, não tive quaisquer outras a realizar e perceber o passo. O novo domínio criado é ajesus.ga.

Passo 8

O passo 8 apenas consistia em preencher um curto formulário que pedia para inserir os endereços GitHub e FreeNom registados anteriormente.

Passo 9

O passo 9 foi um dos que mais gostei, no qual instalei a aplicação SoloLearn em que realizei o curso de HTML. Foi bastante interativo e divertido, aprendi de uma maneira dinâmica, a aplicação é ótima com muitas utilidades, cursos e uma comunidade de programadores muito simpática e com espírito de entreajuda. Gostei tanto da aplicação que vou continuar a realizar cursos de lá.

Passo 10

O passo 10 foi simples e rápido de fazer, onde apenas nos foi pedido para escrever uma notícia no Blog Público com esta memória descritiva, o URL do domínio público com o site criado e um printscreen do diploma do curso. Assim escrevi essa publicação e coloquei o link na sub-página do blog.

Conclusão

Concluindo assim mais uma proposta de trabalho, esta foi uma das que gostei mais de realizar visto que pude aplicar alguns dos meus conhecimentos de programação aprendidos autonomamente, aprendi a escrever código em HTML e CSS e pude explorar melhor o mundo da programação através de fóruns e sites. A programação é a área desta disciplina que mais gosto, assim esta proposta de trabalho despertou em mim bastante interesse e assim que foi apresentada, comecei logo a trabalhar na mesma. Foi um ótimo trabalho em que tive poucas dúvidas e pude participar bastante. Irei continuar a aprender e a trabalhar com HTML e CSS e também começar a aprender JavaScript.