PT07 - HTML

Processo criativo

Comecei esta proposta de trabalho pela ordem dos passos. Assim, logo aprendi mais coisas sobre HTML, a linguagem que é tema principal. Eu já tinha interesse por programação e escrever código, e HTML e criação de páginas web é algo que nunca tinha ido muito além de conhecer o básico dos básicos, mas sempre me interessei por ter o poder de facilmente criar o meu próprio site.

Passo 0 e 1 - Passos essenciais para começar a aprendizagem da linguagem com o pé direito. Conhecer a história foi bom: antes não tinha a noção que a pessoa que basicamente criou a internet (World Wide Web) também era responsável pelo HTML.

Passo 2 - Já tinha o editor de texto Notepad++ instalado. É algo útil de se ter para rapidamente modificar código, e obviamente superior ao notepad do Windows. Quando clicamos com botão direito num ficheiro, aparece a opção "Edit with Notepad++" que é mais rápido que o "Abrir com..."
Instalei também o Atom, que acabei por não utilizar tanto como o Notepad++. O Visual Studio Code é muito parecido com o Atom, razão principal de não o ter instalado. Já tinha instalado no passado mas acabei por escolher o Visual Studio Code.

Passo 3 - Estas boas práticas realmente devem ser sabidas por todos que se atrevem a programar. Ter um código bem organizado de modo a que todos possam entendê-lo sem muita dor de cabeça é mais que essencial. Mesmo se não pretendermos que outros leiam o código, no futuro poderemos voltar a mexer nele, e encontrar uma confusão que não entendemos não é bom. Por isso, é bom indentarmos bem o código, colocar comentários úteis, e seguir a mesma estrutura de ficheiros para os projetos.
O W3schools é uma ótima fonte de informação que já tinha usado no passado para aprender C++ e até um bocado de HTML. Usei muito no decorrer da proposta de trabalho.

Passo 4 - Copiei e colei os códigos no Notepad++, identei da forma que me pareceu mais adequada. Os códigos mostram bem algumas das principais formas de formatar texto e outras funções básicas como links e imagens.

Passo 5 - Comecei por ler atentamente o enunciado do passo e logo em seguida prossegui ao abrir o Notepad++ para começar a escrever código. Como não tinha muitos conhecimentos prévios de HTML, decidi pesquisar mais sobre a linguagem no site recomendado pelo professor W3Schools, o qual eu já conhecia de estudos prévios de outras linguagens. É uma ótima fonta de informação.
As dúvidas que eu tive foram esclarecidas pelo meu colega e amigo André Jesus, que me disponibilizou acesso ao seu produto final, que já tinha sido terminado. Visualizar a sua tabela tornou mais fácil a criação da minha. O produto final ficou parecido com o dele obviamente, dado que a coisa a fazer é a mesma. Acredito que todos os trabalhos vão estar muito parecidos, já que não há tanta criatividade assim em jogo (algo que combate isto é a alínea em que temos de mudar a cor das legendas de cada aluno a gosto, e a cor da background).
Para as cores originais usei o Color Picker da Google (acessei ao escrever "color picker"). Fui manuseando, procurando cores novas para colocar em cada aluno. A cor da background percebi que tinha de ser clara. Primeiramente tentei um rosa, depois um rosa mais acinzentado e acabei por usar um cinzento muito ligeiramente rosado.
Certifiquei-me de identar muito bem o código para uma leitura mais fácil e dinâmica.
Algo que não consegui resolver e acho que podia ter ficado mais agradável à vista é a forma que os corredores estão na tabela. Eu não queria ter de escrever "Corredor", mas após várias tentativas de apenas deixar um espaço, tive de o fazer. Ainda não entendo a razão de o vazio entre o André e a Camily na primeira fila funcionar, tendo um grande espaço, mas o corredor não.
Gostei da forma que a estrutura de pastas de cada projeto funciona, com uma pasta para imagens, estilos css e scripts JavaScript. Usei o IrfanView para manipular o tamanho e proporção das imagens utilizadas.

Passo 6 - Tinha também sido introduzido ao GitHub há muito tempo. A primeira vez que acessei a plataforma foi para download de alguns códigos feitos por outros programadores. Mais especificamente, modificações do jogo Minecraft, ao qual a comunidade comummente chama de "mods". Os mods permitem modificar o conteúdo do jogo de todas as formas e tendo o source completo do jogo em Java, conseguíamos adicionar novas coisas.
Devido a esta background eu já estava relativamente familiarizado com o ambiente Git. Assim, criei os dois repositórios pedidos e pus todos os ficheiros necessários sem nenhum problema.
Algo que eu não sabia é que existe um "site" para cada repositório que criamos (github.io) e fiquei feliz por aprender isso. Surgiu, porém, um problema: não era possível o site para o Passo 4 funcionar, dado que não tínhamos apenas um ficheiro html, mas sim cinco. Para resolver isto, criei um index.html (primeiro que é lido) que tinha links para os outros.

Passo 7 - No site Freenom houve dificuldades ao criar conta com o endereço escolar aebenfica.org. Por isso procedi à criação da conta com o meu email pessoal. Após criada a conta, tentei prosseguir com o passo mas deparei-me com um erro. Qualquer que fosse o nome de domínio, havia um problema ao finalizar a ordem. Disseram-me que era um problema técnico e por isso tinha sido cancelado. Após contactar o professor, a avaliação para este passo foi anulada. No futuro pretendo tentar novamente criar um domínio.

Passo 8 - Preenchi o formulário, enviando os links pedidos do repositório do Passo 5. Infelizmente, como não consegui criar o domínio, essa parte ficou em branco.

Passo 9 - SoloLearn... foi uma surpresa muito agradável ver que o professor conhecia e estava ativamente a recomendar esta aplicação. Eu e o Adolfo Morgado (aluno de outra turma mas que é assim como eu interessado por programação) ambos já usamos muito para aprender sobre programação. Uma das coisas mais interessantes para mim são os pequenos desafios que podemos fazer a outros usuários no qual 5 problemas de programação têm de ser resolvidos num curto período de tempo, vencendo quem acertou mais. Tinha já realizado o curso HTML mas entretanto grande parte dos meus conhecimentos desapareceram após eu não aplicar, ao contrário de C++.
Realizei com grande gosto o curso novamente e consegui o diploma. Pretendo voltar a realizar as vezes que forem necessárias até ficar confortável com a linguagem. Algo que não apreciei muito é que agora a aplicação mobile SoloLearn tem muitas publicidades e um "premium" que querem que compremos. Antigamente não tinha isso, e é triste que cada vez mais isso seja a norma no mobile.

Passo 10 - Postei esta memória descritiva em conjunto com a printscreen do diploma SoloLearn como uma publicação no blog público.

Conclusão

Amei realizar esta proposta de trabalho que me trouxe algumas lembranças de quando comecei a programar. As bases de HTML que foram dadas vão ajudar aqueles que querem levar uma carreira na área da informática. Foi muito bom termos sido apresentados ao GitHub, SoloLearn e W3Schools, que permitem aos programadores uma vida facilitada. Foi ótimo!


Referências

• HTML 5 (Imagem)
• SoloLearn
• W3Schools
• GitHub