PT 07 - Leonardo Bernardo 

A PT 07 tem como objetivo mostrar nos os fundamentos da programação em HTML.

Passos 1-3 

Introdução ao HTML e instalação do Notepad++ ou Atom.

Passo 4 

No quarto passo somos apresentados a alguns tutoriais que nos servem de exemplo e nos dá alguma noção e bases para o trabalho que iremos efetuar nos passos seguintes.

Passo 5

Neste passo tive de fazer uma pauta com a identificação dos alunos que frequentam esta disciplina. O meu código foi bastante simples e repetitivo e tive bastantes problemas com a organização de pastas e dos ficheiros de imagem e de htm. A organização está bastante desleixada por esse exato motivo. Não tive muito trabalho com o processo da criação da pauta mesmo tendo alguns percalços e algumas falhas que não foram difíceis  de resolver.

Passo 6

O passo 6 apresentou-nos ao GitHub que nos permite colocar lá o código e o trabalho desenvolvido nos passos 4 e 5. Estes são os meus links para os repositórios que criei. (Passo 4 https://github.com/leoaebenfica/passo4_leonardo / https://leoaebenfica.github.io/passo4_leonardo/ ) (Passo5 https://github.com/leoaebenfica/passo05_leonardo / https://leoaebenfica.github.io/passo05_leonardo/ ) 

Passo 7 

Não o fiz.

Passo 9

O passo 9 era fazer um curso sobre iniciação ao HTML.

Passo 10

Elaboração desta memória descritiva.

Memória Descritiva - PT07 - Iniciação ao HTML

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

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); 

RESULTADO

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

  

PT 07

Este trabalho começou com um pouco de familiarização do HTML, sendo que no passo 0 foi abordada a história do mesmo. O primeiro passo serviu para entendermos a estrutura básica de um ficheiro HTML com a ajuda do W3Schools. De seguida no segundo passo foi solicitada a instalação do programa Notepad++ e alguns plugins para o mesmo. No terceiro passo ficamos a conhecer algumas boas práticas a ter na programação. O passo 4 foi o primeiro passo prático, em grande parte o que fizemos foi apenas copiar, no entanto foi o momento que marcou o início da componente prática deste trabalho.

O passo 5 foi o passo mais extenso, comecei por fazer a estrutura básica de uma tabela apenas com os nomes das pessoas nos seus respectivos lugares em sala de aula. Formatei a tabela com as borders e cor do background. Neste passo a maior dificuldade foi descobrir como adicionar as imagens à tabela, dificuldade essa que ultrapassei com a ajuda do W3Schools e do senhor Indiano simpático no Youtube. Adicionei o texto alternativo para o caso da imagem não carregar, ou seja quando por algum motivo a imagem não abre surge o texto que escrevi. Adicionei a imagem como um link onde ao abrir o respetivo link era encaminhado para uma imagem de resolução mais alta. Para concluir este passo mudei as cores dos nomes como era pedido no enunciado.

No passo 6 criei o meu GitHub e fiz um novo repositório com o nome de pt07 para este trabalho.

Segui os passos indicados no tutorial que o professor nos forneceu e consegui meter as coisas a funcionar no GitHub.

Tive dificuldades na realização do passo 7 e por esse motivo não o irei abordar neste post.

O passo 8 foi simplesmente preencher o formulário em que tínhamos de meter os nossos links para o GitHub.

Finalmente chegamos ao passo 9, aquele que eu gostei mais de fazer, foi o curso de HTML do Solo Learn. Este curso disponibiliza muita informação de uma forma acessível, com explicações fáceis de acompanhar e questões desafiantes.

Conclui curso com distinção, o certificado em baixo comprova isso.

Por último o passo 10 foi simplesmente escrever este blog post sobre meu trabalho.

Em conclusão onde senti mais dificuldades, à semelhança do trabalho anterior, foi na parte do código. No entanto posso dizer que tenho vindo a melhorar no sentido de ultrapassar essas dificuldades e com cada trabalho elaborado fica cada vez menos difícil trabalhar com código.

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

PT 07 - Experiência Incrível

Passo 1
Neste passo pretendemos aprender a estrutura básica de um ficheiro html.
Como apoio usamos o link do professor.

Passo 2
Prosseguimos a instalação de um editor, neste caso escolhi o notepad ++ a partir deste link.
Ainda temos disponível a opção de instalar plugins, mas visto que era a primeira vez a utilizar esta aplicação, decidi usá-la mesmo sem nenhum tipo de plugin.

Passo 3
Nesta parte iremos aprender as boas práticas de programação sobretudo no momento de indentar e comentar.
Seguimos outra vez um link do professor.

Passo 4
Neste passo aprendemos, com a ajuda do w3schools as primeiras indicações do HTML.

Passo 5
Sem dúvida que este passo da construção da tabela em HTML foi muito complicado no princípio, uma vez que o conhecimento que tinha é relativamente pouco e tive de fazer vasta pesquisa até encontrar aquilo que precisava para a construção da tabela.
Consultei inúmeras vezes o site w3schools, para entender como funcionava uma tabela e como poderia construir a base desta tabela.
Usei o w3schools tanto para estudar o código html como para o código css.
Comecei por usar este link https://www.w3schools.com/html/html_tables.asp  para conhecer quais as tags de html que me eram mais importantes para a tabela. Foi aqui que aprendi as 3 tags mais importantes de uma tabela em html <tr> que representa as table rows, as tags <th> que representam o header da tabela e as tags <td> que representam a table data ou table cell. A seguir podemos ver um código exemplo fornecido pelo w3schools onde podemos ver as diferentes tags de tabela referidas em ação.  Na tabela final optei por não usar a tag <th> porque não faria muito sentido uma vez que é a tabela da planta de sala de aula e não faria muito sentido ter header a não ser que fosse para coordenadas ou assim. Agora que já conhecia o código de html avancei para a construção da tabela propriamente dita, esta foi construída com bastante código, tanto em css como em html.

Passo 5

Aqui criamos o site do GitHub e basicamente criamos 2 repositórios, para o passo 4 e para o passo 5 que geram 5 links para o passo 4 e 1 para o passo 5. Seguindo outra vez as indicações do profesor.

Primeiro link HTML document:

-link GitHub pages: https://12667-gv.github.io/htmldocument/
-link repositório: https://github.com/12667-GV/htmldocument

Segundo link HTML headings: 

-link GitHub pages: https://12667-gv.github.io/htmlheadings/
-link repositório(https://github.com/12667-GV/htmlheadings)

Terceiro link HTML paragraphs:

-link GitHub pages: https://12667-gv.github.io/htmlparagraphs/
-link repositório: https://github.com/12667-GV/htmlparagraphs

Quarto link HTML links:

-link GitHub pages: https://12667-gv.github.io/htmllinks/
-link repositório: https://github.com/12667-GV/htmllinks

Quinto link HTML images: 

-link GitHub pages: https://12667-gv.github.io/htmlimages/ 

 -link repositório: https://github.com/12667-GV/htmlimages

Links tabela

-link  da tabela feita no passo 5 GitHub: https://12667-gv.github.io/tabelaturma-passo5/
-link repositório: https://github.com/12667-GV/tabelaturma-passo5

Passo 7
Aqui seria criado um domínio de segundo nível, mas aparentemente existiam problemas com a plataforma e por isso não foi possível realizar esta tarefa. Se quiserem consultar o FreeNom o link está aqui https://www.freenom.com/pt/index.html

Passo 8
Neste passo o professor recolheu os links do GitHub que estão disponíveis aqui no passo 6, se quiserem consultar mais informação da tabela realizada no passo 5, está aí disponível, apenas seguir os endereços de GitHub

Passo 9
Aqui realizamos o curso SoloLearn de HTML, o SoloLearn é uma aplicação que ajuda pessoas que procuram introduzir-se a programação. Eu apenas realizei o curso de HTML e um pouco de CSS, mas as possibilidades são imensas.

Passo 10
Este passo é basicamente a razão de existência de este blogue, basicamente é realizar uma memória descritiva sobre o projeto todo, desde o início até ao fim.

Conclusão
Agradeço terem-me acompanhado até aqui para todos os leitores. Este trabalho foi realmente um prazer de se realizar, claro que com a sua dificuldade uma vez que nunca tinha programado em HTML, e honestamente reforço que toda a gente que queira aprender e não saiba como começar comece, vale a pena e irá sentir-se orgulhoso do resultado final.
-GV

PT07

Este trabalho começou de forma diferente por causa da atual condição do mundo. Em vez do professor nos apresentar o trabalho numa aula normal como de costume estávamos todos numa chamada do Google Meet. Não era um tipo de aulas ideal mas era o que era possível fazer.

Eu no inicio não sabia nada de programação em HTML mas com a ajuda de muitos colegas, trabalho em conjunto e muitas horas no discord conseguimos todos aprender o necessário. Foi só depois de eu já ter acabado a tabela do trabalho é que comecei a fazer o curso do soloLearn, apesar de achar que devia ter começado pelo mesmo. O trabalho da tabela foi relativamente fácil tendo sido a única dificuldade conseguir fazer com que os meus colegas colocassem as caricaturas com os tamanhos certos na pasta e fotos partilhadas.

O trabalho foi praticamente só o desenvolvimento do passo 5 mas no SoloLearn também desenvolvi muito o meu conhecimento sobre programação. O FreeNom não consegui fazer por causa de problemas com o mail. No Github também houve problemas mas o grupo de discord veio ao meu salvamento.

O meu PT07

Antes de começar tenho que dizer que todo este trabalho foi realizado devido á disciplina de AIB, o PT07, é basicamente o meu setimo trabalho desta disciplina e o conteúdo deste trabalho era HTML.
 Comecei este trabalho a aprender esta linguagem de marcação chamada HTML, pois inicialmente eu sabia praticamente zero de linguagens de marcação, devido a esta falta de conhecimentos na matéria os passos iniciais foram sem duvida os mais difíceis, maioritariamente o passo 5 pois neste tínhamos de construir a nossa planta de sala de aula numa tabela o que resultou em centenas de linhas de codigo o que para uma pessoa que começou a aprender código poucos dias antes de realizar esta tabela, é e foi na minha opinião extremamente difícil e nunca teria realizado esta tarefa sem a ajuda do porfessor e de alguns colegas meus que me foram esclarecendo as minhas duvidas.
 Depois disto segui para o Github, um website de código, onde funcionaria o nosso código  e se houvesse alguma má pratica o github não funcionaria, e para alguém que recentemente começou a aprender código identificar as suas más praticas foi bastante difícil, no entanto não foram só as más praticas que me atrapalharam mas se não usares o github passo a passo seguindo uma lista obrigatória de passos  o github não funcionava e terias de recomeçar o que eu tive que fazer inúmeras vezes.
 Seguiu-se depois um curso de sololearn, que depois do tempo que estive a aprender código foi bastante fácil e consegui completar o mesmo em pouco menos de 1 hora de longe o passo que me demorou menos tempo a realizar.