Memória Descritiva - PT07
Processo Criativo:
Esta PT, desde o ínicio cativou me imenso, achei super interessante o facto desta linguagem ser a base de tudo o que vemos na internet. Mal comecei a iniciar o trabalho (Passo 0), entendi que não era preciso assim tanto conhecimento para formar um site básico, o que achei empolgante e talvez tenha sido um dos fatores que me despertou mais curiosidade. Portanto, antes de seguir para o trabalho, dei apenas um vista de olhos em todos os passos, até ao passo 8 (pois não me apercebi dos outros passos, caso contrário teria começado efetivamente por fazer o passo 9). De seguida fui me entreter com alguns vídeos no youtube. Comecei por ver várias aulas nº1 de HTML em diversos canais, até ter escolhido em qual irei ver mais algumas aulas. Assisti, portanto, a algumas aulas de estrutura básica em HTML e CSS num canal chamado “RBTech”, numa lista de reprodução que se chamava “HTML e CSS para iniciantes”. A medida que ia vendo os vídeos, ia experimentando com a ajuda do site W3Schools. Site o qual me ajudou, de uma forma grandiosa, ao longo de todo o trabalho. Sempre que tinha uma dúvida de qualquer tag era só procurar que explicava tudo, incluindo dizia quais os atributos disponíveis nessa tag.
Preparação:
Quanto a esta parte, fiquei extremamente contente por as escolhas que fiz, uma vez que não deram quase problemas ( sem problemas, também perderia a piada ). Comecei por instalar o editor de texto. Este, infelizmente, não pude ser o recomendado pelo professor, o Notepad++, uma vez que o meu computador pessoal é um MacOS. Segui portanto a opinião do professor e instalei o Sublime Text 3. Até aqui correu tudo bem, instalei o editor de texto e adicionei o plugin Emmet, sugerido pelo professor, que deu um jeitaço espetacular. Inclusive, adorei interface do editor, simples e poderoso. O que me deu vontade de ir outra vez ver uns videozinhos no youtube. Assiste a alguns vídeos sobre o editor de texto, onde aprendi alguns atalhos e “tips” que foram extremamente úteis. Das quais destaco as combinações de teclas simples de, “CMD + CLICK” (multi-cursor) e CMD+F ou CMD+Shift+F (ambos servem para procurar algo no documento, sendo que o segundo é mais abrangente, pois no caso de termos dois ficheiros abertos, ele pesquisa em ambos).
 |
| Sublime Text 3 |
 |
| Plugin Emmet |
De seguida, o pequeno problema que tive,foi quando fui confirmar em que versão estavam os meus browsers e apercebi-me que o meu computador, que é bastante antigo, não conseguia passar daquela versão. Daí tive que passar para o computador do meu pai, instalei novamente o sublime e instalei o browser Firefox, em vez do google chrome.
Por último, instalei o GIMP 2.0, um editor de fotos gratuito, uma vez que não tinha o photoshop. Utilizei-o apenas para o resize das imagens e correu lindamente.
 |
| Editor de fotos que escolhi
|
|
|
Firefox, browser que escolhi
|
Passos mais interessantes:
- Passo 0 e passo 1 em que aprendi as bases, que me cativaram imenso para o resto do trabalho.
- Passo 5, a criação da tabela, este foi sem margem de dúvida o passo que me deu mais gosto a fazer. Comecei por uma simples tabela, até chegar a algo com melhor aspeto. Claro que tive bastantes constrangimentos, mas com a ajuda do youtube e dos meus colegas, tudo se resolveu.
- Passo 9, elaboração do curso HTML do SoloLearn, aumentou sem dúvida a minha área de conhecimento sobre a linguagem
Passos mais difíceis:
- Passo 5, apesar de ter sido o que mais gostei, tive as suas dificuldades;
- Passo 6, na criação de ambos os repositórios no GitHub
- Passo 7, na criação do domínio no FreeNom
Resolução dos problemas/ Decisões tomadas:
Em todos os problemas que tive ou resolvi-os através de fóruns, ou através do youtube, ou através da ajuda dos meus colegas ou do professor. Os problemas que tive na criação dos repositórios do GitHub foram simplesmente:
1º O facto de quando colocava as pastas tanto do passo 4, como do 5, as pastas que se encontravam vazias eram simplesmente apagadas automaticamente. Visto que eu não queria que isso acontecesse, de forma a que o professor visse que eu respeitei as boas práticas, tive adicionar um ficheiro dummy em cada pasta vazia, criando documentos “readme.md” e o problema ficou resolvido;
 |
| Dummy Files |
 |
Para conseguir colocar estas pastas "vazias" tive adicionar dummy files
|
|
2º O facto de quando acedia ao link da página pública ,do repositório do passo 4 do GitHub, não aparecer as páginas criadas por mim. Em vez disso, aparecia apenas o texto que eu tinha colocado como descrição do repositório. Para resolver este problema bastou me criar um pequena página HTML em que coloquei os links que davam acesso as outras páginas das respectivas partes do passo 4; (para aceder basta clicar aqui);
3º O último problema que tive com o GitHub, foi simplesmente nessa mesma página pública criada por o GitHub Pages, onde um dos links para uma das páginas da parte dos “HTML_links” não abria a suposta página e aparecia o erro 404.
Quanto aos problemas com o FreeNom, simplesmente não os consegui resolver, tentei perguntar aos meus colegas e muitos deles disseram ter o mesmo problema ou um semelhante. Assim sendo, acabei por não realizar este passo. E uma vez que era opcional, não me importei muito, porque percebi a ideia do passo e preferi gastar o meu tempo a melhorar certos passos que não eram opcionais.
Relativamente ao passo 5:
As ideias que me surgiram para a criação desta tabela/planta caricaturada da turma derivaram das diversas pesquisas sobre tabelas e atributos que fiz no W3Schools. Para a escrita do código utilizei o Sublime, como referi acima. Toda a elaboração do trabalho foi interessante, desde a construção da tabela (HTML) à sua personalização (CSS interno).
Quanto às partes mais difíceis deste mini-projeto e sua resolução:
1º Conseguir por todas as imagens, tanto as pequenas como as grandes a aparecerem. Ao início nem sabia como pôr o caminho correto para ir buscar as fotografias. Descobri depois que tinha que colocar o nome da pasta onde as fotografias se encontravam antes do nome da fotografia. De seguida, como havia ainda fotografias que não abriam, tive horas a tentar perceber onde estava o erro. Assisti a dúzias de vídeos e reli os apontamentos do professor sobre como colocar uma imagem. No dia seguinte, mal olhei para o código, visualizei logo que havia fotografias cujo nome acabava em “.jpg” e outras em “.jpeg”. Corrigi e ficou tudo a funcionar perfeitamente.
2º Conseguir colocar a cor de fundo do corredor principal a branco. Tentei utilizar “style="background-color: white” dentro da abertura da tag “td”. Porém como tinha definido, na linha seguinte, outro corredor que intercetava este, através de um atributo chamado “colspan”, o corredor principal ficava como mostro na printscreen. Mal retirei esta interseção, o corredor ficou como pretendia. Contudo ao retirar a interseção, a continuação do corredor horizontal, na verdade apenas continua um intervalo, pelo facto de não ter aberto mais nenhuma célula e ter mudado para a linha seguinte.
 |
| Com interseção |
 |
| Sem interseção |
De resto correu tudo às mil maravilhas. Vejo por isso, este passo, como uma grande contribuição para o aumento dos meus conhecimentos nesta nova linguagem, com a qual aprendi muito. Algo que gostaria de vos transmitir é: Não desistam da programação, por apenas uma barreira. São estas barreiras que tornam possível a nossa evolução. Algo que aprendi com este trabalho é que nem sempre iremos encontrar um erro, logo. Às vezes leva o seu tempo, por mais óbvio que ele seja.
Por último, algo que poderia melhorar na tabela poderia ser o que está contornado a vermelho na printscreen (está diferente dos dois lados, devido ao problema da cor que já referi em cima):
URL do site publicado: aqui
URL do site publicado diretamente para o PT07: aqui
Certificado de conclusão do curso de HTML:
Trabalho realizado por: João Francisco Dinis Borges, 12º2º, N13
Neste projeto o processo criativo entrou em ação no passo 5, pois foi neste que eu pude ser mais criativo com o código. Customizando a tabela com cores e tamanhos. Ainda antes de começar a trabalhar em projetos fiz o passo 9, o curso online. Isto serviu para que eu antes de começar a trabalhar com o código pudesse ter uma ideia geral de como o mesmo funciona, e ter no fim um trabalho mais eficaz e melhor.
Passo 6 - GitHub
