Pesquisar aqui

Mostrar mensagens com a etiqueta memória descritiva. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta memória descritiva. Mostrar todas as mensagens

quarta-feira, 13 de maio de 2020

PT07 - António Amaral

Memória Descritiva


Processo Criativo:

    A maior parte do trabalho foi feito tendo em conta as instruções dadas no enunciado, sendo que a parte que foi necessária mais criatividade foi a criação da tabela. Como inspiração para a criação da tabela utilizei os variados exemplos que existiam no curso de HTML e também um pouco de imaginação.

Preparação:

    Para este trabalho a preparação incluiu:

  • A realização de cursos HTML e CSS;
  • A instalação do programa Notepad++;
  • A criação de uma conta no Github e no Sololearn.

Execução do trabalho:

    Os passos mais interessantes neste trabalho foram facilmente a realização dos cursos HTML e CSS e a construção da tabela. Por um lado, os cursos foram interessantes pois eu conhecia pouco da linguagem HTML e passei a conhecê-la bastante melhor, descobrindo uma nova prática útil e divertida, por outro lado a construção da tabela foi interessante pois foi onde pude expressar-me criativamente e mergulhar na componente prática do HTML.
    Os passos mais difíceis foram a criação da tabela e a criação dos repositórios Github. Em ambos os casos as dificuldades apareceram pois tinha pouca experiência a trabalhar com as plataformas e deparei-me com algumas dificuldades em aprender alguns conceitos.
    Os passos que deram mais trabalho foram, por coincidência, os mesmos que eu escolhi como mais interessantes. Estes passos eram os mais demorados e os que requeriam uma maior atenção.
    Tive que pedir ajuda a alguns colegas para conseguir trabalhar com o Github. No início não consegui transferir pastas para a plataforma, mas depois de recorrer à ajuda de alguns colegas aprendi o conceito de "Dummy Files" e que não podemos colocar pastas vazias na plataforma.

Resolução de problemas:

    Os problemas que encontrei foram resolvidos em algumas chamadas com colegas e também com uma ajuda do Google.

Decisões:

    As decisões tomadas ao longo do trabalho não fugiram muito ao enunciado. As decisões que tive de tomar foram todas relacionadas com a criação da tabela e tiveram todas a ver com a forma que eu queria que ela tomasse.

Conclusão:

    O passo que eu mais gostei foi o da criação da tabela pois foi muito divertido experimentar livremente a linguagem HTML e ver o que conseguia fazer com o que tinha aprendido. Para além disso gostei muito do resultado final:

    O que podia ter ficado melhor é sem dúvida a finalização do trabalho. Apesar da mudança da data de finalização do trabalho, eu só o acabei uns dias depois da mesma.
    Com este trabalho aprendi a trabalhar com a linguagem HTML e também um pouco sobre o que é a linguagem HTML e a sua história.
    Na minha opinião a maior tristeza do trabalho foi a falha no cumprimento da finalização do trabalho na data requerida e a maior alegria foi o resultado final da tabela.

URL do domínio público com o site criado

Diploma do curso HTML:



domingo, 10 de maio de 2020

PT07- Camily Lopes

                                Memória Descritiva

  A PT07 foi criada com o objetivo de nos introduzir no mundo da programação, utilizando a linguagem mais básica de todas: HTML. O trabalho foi constituído por 10 passos obrigatórios, mais um passo opcional.

Passos 0-3

Os primeiros 4 passos baseavam-se em conhecer um pouco de HTML e na instalação do NotePad++, editor que utilizariamos mais tarde para criação do nosso código.

Passo 4

Já neste passo, tínhamos que realizar 5 tutoriais onde aprenderíamos como utilizar certas tags desta linguagem, por exemplo, como introduzir cabeçalhos, imagens, links e parágrafos no código.

Passo 5


   Este foi, na minha opinião, o passo mais importante de todo o trabalho e traduzia-se na criação de uma pauta caricaturada da nossa turma de AIB, utilizando HTML.
Segue a minha memória descritiva deste passo:
   Para nos introduzar a uma nova linguagem de programação, (o HTML), o professor propôs o seguinte desafio: criar, utilizando esta linguagem, uma tabela em que o resultado final fosse uma pauta caricaturada da turma de AIB do 12ºAno, da Escola Secundária José Gomes Ferreira.
   Utilizamos, neste trabalho, o editor "NotePad++", onde foi criado o código e, para nos ajudar com a criação do código, o professor nos forneceu sites como base, sendo o W3Schools o principal. Antes da criação desta tabela, fizemos 5 tutoriais, que serviram como iniciação a esta linguagem e nos ajudou na familiarização com a linguagem e tags a serem utilizadas. (Passo 4)
   Depois disso, foi a nossa vez de "inventar". Utilizando o W3Schools, fui à procura de informações para construir uma tabela, e comecei a reunir o que achava que poderia ser útil no futuro.
Para mim, quais foram:
  1.  Os passos mais interessantes: Os passos mais interessantes para mim foi modificar como queria os aspetos decorativos da tabela, tais como as cores e margens da mesma.
  2. Os passos mais difíceis: O passo que considerei mais difíceis foi fazer o resize das fotos, pois tive imensos problemas e tive que refazer várias vezes.
  3. Os passos que deram mais trabalho: Os dois passos que deram mais trabalho foram, sem quaisquer dúvidas, o resize das fotos devido aos problemas que encontrei e, claro, a construção do código por ter sido o que levei mais tempo e necessitava de mais empenho.
  4. Os passos que teve de pedir ajuda (a quem?): Tive que pedir ajuda principalmente a construir o código. Mais especificamente, precisei de ajuda para fazer o align das fotos com o texto e a definir um tamanho fixo para cada célula da tabela. Para realizar estes passos, pedi ajuda tanto ao meu padastro como ao meu pai, pois são os dois programadores. Também pedi ajuda ao Nyckollas B., pois não estava a etender como deveria configurar o link das fotos para que este ficasse "dentro" das imagens pequenas. De resto, quaisquer dúvidas que tivesse, fui capaz de esclarecer através de pesquisas e testes.
   Todas as decisões tomadas durante este trabalho tiveram todas, num geral, a ver com os aspetos decorativos e preferências minhas. Estas decisões foram todas tomadas a seguir a experimentar as várias opções que tinha, alterando o código como achasse melhor.
   Particularmente, gostei deste passo pois senti liberdade para revolucionar e experimentar. Além disso, deu-me uma boa base no que toca a programação e conheci novas formas de fazer a mesma coisa, mesmo que nem sempre conseguisse executá-las bem. Contudo, nem tudo correu bem: cometi o erro scr/src e passei, no mínimo 2 horas a tentar descobrir o porquê das minhas fotos pequenas não aparecerem na pauta. Num geral, gostei do resultado final, apesar de ainda achar que algumas fotos não estão bem alinhadas na tabela.

 Passo 6

O Passo 6 era a iniciação ao GitHub, que nos permitia publicar a nossa pauta online, além dos códigos criados no Passo 4. Para isso, criamos todos um ficheiro idex.html que nos permitia ver os códigos como sites publicados.
Este é o meu perfil no GitHub, onde se encontram os meus 3 repositórios: onde consta a página inicial, o relativo ao passo 4 e outro ao passo 5.


Passo 7

O Passo 7 era a criação de um domínio no FreeNom, onde era criado um link que nos redirecionava à página inicial do GitHub, e  nos dá acesso ao perfil GitHub, aos repositórios e a cada um dos sites publicados. O URL do meu domínio é: http://camilylopes.ga e este é o aspeto da página para onde será redirecionado:

Passo 8

Este passo era simplesmente responder a um questionário, paraonde enviamos o endereço do nosso domínio público, do repositório e site do passo 5.

Passo 9

O Passo 9 era um curso que cada um dos alunos teve de fazer sobre iniciação ao HTML. Particularmente, achei bastante produtivo e nos introduzia a novos conceitos. No fim, nos era fornecido um certificado:

Passo 10

Criação de uma notícia no Blog: basicamente, o que estão a ler.

Conclusão

Assim, foi finalizada a PT07, um trabalho que, em alguns aspetos, mereceu bastante empenho, pesquisa e trabalho árduo porém, considero bastante divertido.

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