PT07 - Iniciação ao HTML

Memória descritiva

Como sempre, começo pelo processo criativo. Devo dizer que este não é propriamente um daqueles trabalhos que o resultado final é completamente diferente de todos os dos outros colegas, pois não depende muito da nossa criatividade. O maior espaço para deixarmos a nossa identidade é na estética da nossa tabela. Se queremos aquela cor em vez de outra, se queremos corredor ou não, etc... No meu caso decidi que a tabela ia ser azul claro e branca, porquê? Porque são cores que contrastam bem e que não são demasiado vibrantes, pois esse tipo de cores dificulta a leitura e visualização da tabela no geral (esta combinação é simples e eficaz). Para além disso, decidi colocar as fotos primeiro e a legenda depois, pois o utilizador primeiro é atraído pela imagem e só depois irá ler a sua legenda (que por ser menos atrativa e até certo ponto menos relevante no primeiro contacto, fica por baixo). Decidi também brincar um pouco com as dimensões de algumas células (como o corredor ou o espaço que fica entre os quadros e a primeira fila) desta maneira a tabela fica mais dinâmica, mais atrativa, menos chata e dá uma melhor noção da disposição e da dimensão dos diversos elementos que integram a nossa sala de aula (como o facto de o professor ocupar duas células, pois na vida real ocupa uma mesa inteira). Por último mas não menos importante a escolha das cores da legenda e do tipo de borda da tabela foi simples e baseada em razões práticas, cores contrastantes com o azul para que sejam visíveis (diferentes umas das outras o suficiente para existir variedade) e bordas duplas e pretas para que a divisória entre cada célula esteja bem definida, não gerando confusões ou noções erradas sobre a distribuição do espaço na nossa sala.

Na fase inicial do trabalho (instalação e aprendizagem de novo software) tive alguns problemas mas que foram facilmente ultrapassados. Uma das primeiras coisas que fizemos nesta proposta de trabalho foi a instalação do Notepad++ (que realizei sem problema), o problema foi, primeiramente, a instalação dos plugins. O método que o professor tinha indicado não estava a funcionar para mim, por isso, pedi ajuda ao meu colega Ricardo Fialho que me sugeriu uma nova forma de os instalar. Felizmente esta forma resultou perfeitamente. Como a achei muito simples, até expliquei no meu site como utilizar plugins usando a mesma, se tiver curiosidade, está aqui.

O meu segundo problema com este programa foi o seu funcionamento no geral. Já possuo alguma experiência com programação e nunca tinha encontrado um programa que funcionasse desta maneira em que nós é que criamos o ficheiro que vamos depois editar com o Notepad++, sendo que para vermos o nosso código em funcionamento não temos que clicar em nenhum botão que dia "executar" mas sim clicar no próprio ficheiro, sendo que o mesmo abrirá no browser. Para além disso, sempre que gravamos as alterações, basta dar "refresh" na página Web que elas serão aplicadas e mostradas. Isto foi tudo novo para mim, não me lembro bem de que maneira descobri como tudo isto funcionava ou quem mo disse, apenas sei que aprendi e adorei! Apesar de me ter parecido estranho no contato inicial, agora sinto-me completamente à vontade com este tipo de "trabalho", sendo que até o acho bastante simples e prático.

Nestas memórias descritivas costumo sempre fundir os passos mais trabalhosos com os mais interessantes e hoje não é exceção. Para mim, sem dúvida, os passos que ocuparam a maioria do meu tempo foram o SoloLearn e o passo 5 (tabela da turma). São ambos muito trabalhosos pois um necessita de bastante concentração e tempo para completar o curso (para além de ter sido obrigado a fazê-lo 3 vezes, mas falarei disso mais tarde), e o outro também necessita dos mesmos "ingredientes" para que a tabela seja feita em condições. 

Mas como a vida é feita de exceções, tenho também passos que gostei muito mas que não forem assim muito trabalhosos, esses são o passo 4 (códigos de exemplo) e o passo 6 (GitHub). Pois em ambos foi necessário escrever e/ou analisar código, algo que é para mim sempre muito atrativo e prazeroso. Tive especial orgulho e alegria a fazer o passo 6, não por estar a colocar pastas na Web, algo que já se tornou rotineiro, mas sim devido a um problema que irei falar mais à frente e que me levou a ter que escrever algumas linhas de código.

Devo denotar que um dos meus momentos favoritos quando programo é chegar ao fim e fazer um ctrl - (para diminuir o zoom) e ver o código completo, fruto das horas ou minutos investidos, não sei porquê mas acho muito fixe (acho que me faz sentir um programador a sério). Por isso vou deixar aqui essa imagem que tanto gosto.

Em termos de passos mais difíceis eu diria que foram o GitHub (passo 6) e o Freenom (passo 7). A razão de estar a identificar o GitHub como um dos passos mais difíceis é o facto de a turma ter demorado algum tempo até descobrir como resolver o facto do repositório referente ao passo 4 não funcionar como esperado, o que levou a bastantes tentativas e até alguma frustração, não só minha mas da turma em geral. Isto leva-me à questão dos problemas encontrados e como foram resolvidos. Neste caso, não poderia haver uma solução melhor, utilizarmos aquilo que aprendemos na proposta de trabalho para resolver um problema da mesma. Basicamente, como o repositório do passo 4 possuía vários index.html, sempre que clicávamos no link do GitHub pages nenhum deles era aberto, o que faz sentido, pois qual o computador escolheria? Para resolver essa situação, criámos uma espécie de índice (cada um criou o seu) que possuía hiperligações para todos os códigos exemplo desse passo. Fica o registo de que esta foi uma sugestão do professor.

Em relação ao Freenom, este foi o passo mais controverso desta proposta de trabalho pois aconteceu algo de inesperado que não se tinha verificado no ano anterior. Neste passo era suposto criarmos um domínio próprio que seria depois associado ao nosso domínio do GitHub, porém, para que tal acontecesse precisávamos utilizar uma conta Google, ao qual o professor sugeriu que utilizássemos a nossa conta pessoal. Infelizmente, essa conta, para surpresa do professor, não era aceite, tendo assim sido sugerido, aos alunos que ainda quisessem completar o passo para que utilizassem a pessoal. Não sei quanto aos meus colegas, mas a mim surgiu-me outro erro que me impossibilitou de completar o passo e deixarei print.

O meu último grande problema foi o SoloLearn. Eu realizei o curso no computador (pois acho mais fácil de digitar), só que, por alguma razão, o meu progresso só era salvo até um certo ponto. Ou seja, como  disse anteriormente em comecei por fazer apenas parte do curso, o que sucede é que quando voltei à plataforma para o terminar, tive que começar quase do início porque grande parte do progresso não foi salvo. Não me importei muito e retomei o curso até parar no ponto em que tinha deixado da última vez. O que aconteceu a seguir? Quando voltei para completar o curso, não tinha outra vez o meu progresso salvo. Então como resolvi o problema? Na terceira vez que ia fazer o curso, fi-lo todo de uma vez! Desta maneira, mesmo que perca o progresso, já tenho os printscreens e o certificado (que é o mais importante).

Como é óbvio tive alguns problemas e dúvidas relativamente pequenas durante todo o trabalho (principalmente no código e na estrutura das páginas) mas tudo foi resolvido, principalmente coma a juda do professor e dos meus colegas via (o tão afamado) Discord.

Em termos de decisões, diria que a minha grande decisão deste trabalho foi começar o portefólio praticamente do zero. Na penúltima aula antes da entrega deste trabalho o professor pediu que cada um mostrasse o seu portefólio. Eu já possuía mais de metade feito, mas quando vi os dos meus colegas senti-me envergonhado pois os deles estavam significamente melhores que os meus, como tal,  foi tomando anotações e tirando ideias que depois implementei quando "refiz", o meu. Esta decisão foi crucial pois a quantidade de tempo gasto devido à mesma foi elevado. Mas como dizem: "hard work pays off".

Para concluir, quero frisar que aprendi muito sobre HTML, uma linguagem que já tinha previamente tentado aprender, mas que tinha a ideia que não tinha conseguido aprender quase nada. Porém, acabo esta proposta de trabalho sentindo-me muito mais confiante em utilizar a mesma (ficando até a gostar mais da linguagem). Tenho apenas um pequeno detalhe que gostaria que tivesse ficado melhor que é a interseção do "corredor" da tabela com o corredor entre os quadros e a primeira fila. Para realizar os dois foi necessário utilizar o rowspan e o colspan, mas pela minha experiência e a de alguns outros colegas, sempre que os dois "colidem" numa célula, fica uma borda. É um pequeno detalhe mas acho que podia ser melhorado. De resto, fiquei bastante satisfeito com o resultado final e acho que foi um trabalho bem sucedido.

URL do site

Certificado de finalização do curso de HTML

Trabalho realizado por João Silva Nº16 12º2