Pesquisar aqui

sábado, 16 de maio de 2020

CSS - Estrutura básica

Tal como referi na ultima noticia do blog, CSS deixa-nos aplicar específicos estilos no HTML para fazer um website mais apelativo. Para adicionarmos CSS ao nosso código de HTML basta escrevemos dentro das tags "head", anteriormente analisadas nas noticias sobre HTML. E depois adicionarmos, por exemplo, a tag "style" e os atributos que quisermos dentro. Este é um exemplo:

Curso de CSS (Cascading Style Sheets) - Alexandre Porfírio


<html>
   <head>
       <style>
              p {
                   color:green;
                  }
   <head>


A seguir, após escreveres um paragrafo em HTML dentro do "body", terás o resultado de um paragrafo num website com a cor verde. No entanto também podes adicionar a tag "style" diretamente dentro do paragrafo. Ficando com: 

<p style="color:green; > paragrafo </p>

Espero que esta informação te seja útil. Amanhã continuarei a análise de CSS. Até à próxima!

CSS-Porquê?

CSS - Porquê?


O CSS surgiu como forma de complementar a escrita HTML, para mudar o seu aspeto simples, em vez de texto e imagens, melhorar a maneira como se vê o texto, variar, implementar incógnitas. "Todo o x é verde", com esta pequena afirmação é facilitado muito trabalho e os limites que se considerava impossíveis de ultrapassar não passam a ser apenas uma primeira limitação que com a ajuda do CSS foi ultrapassada, formatação em grande escala, customização, atribuição de características a variáveis. No final, o CSS veio trazer a web que conhecemos hoje.

Algumas tags importantes em CSS:

sexta-feira, 15 de maio de 2020

CSS - Introdução

Hoje com o inicio de uma nova PT (PT08), começo um novo tema da curadoria do blog: CSS. Este foi decidido pelo professor, tal como no passado, para que os alunos possam focar-se mais na aprendizagem envolvente a este tema de trabalho e assim termos no final do nosso PT um melhor resultado final. Então o que é CSS?
CSS (ou  Cascading Style Sheets) é essencialmente um mecanismo para adicionar estilos, isto é cores e fontes, a um documento web. Ou seja é como fosse uma adição à linguagem de HTML (a linguagem de marcação anteriormente analisada no PT07). Esta ao ser adicionada ao código de HTML facilita e adiciona centenas de opções para colocar um website com mais estilos e visualmente mais apelativo. Amanhã irei entrar com mais profundidade nesta linguagem e explorarei a sua estrutura básica. Até à próxima!
Como funciona a propriedade background? - Diego Cezar - Medium

PT08: Passo 3 - CSS

Apresentação CSS

Hoje venho por este meio partilhar a minha apresentação de bases de CSS, realizada no âmbito da disciplina de Aplicações Informáticas B, no passo 3 da proposta de trabalho 08, sobre CSS.
Aconselho vivamente a vizualizerem pois contém de uma maneira muito simples a expicação do que é CSS, a sua realação com HTML e JavaScript, como é utilizados, entre outros, sempre complementado com alguns exercícios práticos para testar os conhecimentos:


Iniciação ao HTML: imagens

Uma peça fulcral de muitos sites são as imagens, que ajudam na sua acessibilidade e embelezamento. Como tal, vou ensinar-vos como colocá-las num site a partir de HTML.

Código



Resultado do código




Como pode ver, para incorporar uma imagem é apenas necessário utilizar a tag "img" e no seu interior colocar a localização do ficheiro (no parâmetro "source", src). É aconselhável colocar sempre as imagens na mesma pasta em que o código HTML se encontra pois, dessa maneira, não será necessário utilizar domínios próprios para indicar a localização da imagem (como "C:\nomedoutilizador\imagens\..."), que podem vir a gerar erros. Por fim, é também aconselhável colocar uma imagem alternativa para a eventualidade da imagem não ser carregada (como foi o meu caso), para além disso, essa mensagem alternativa ajuda os invisuais a perceber que naquele lugar existe uma imagem e sobre o que ela é, pois o seu software irá ler a mensagem alternativa.

Imagem produzida pelo autor.

Interrupção HTML - Javascript e C++



Assim como já interrompi as publicações do tema C++ para introduzir HTML, novamente vou trocar de tema e focar na linguagem de programação Javascript.
Os meus posts vão ser originais pois vou relembrar como as coisas funcionam em C++, tendo assim uma constante comparação entre as duas linguagens.

Referências:

Python - Onde aprender?

ENQUANTO ESTUDANTE DE SECUNDÁRIO, TIVE DE APRENDER PYTHON POR MIM MESMO NOS MEUS TEMPOS LIVRES, ASSIM QUERO RECOMENDAR UM SITE QUE VOS AJUDARÁ A APRENDER MUITAS BASES COM MUITA FACILIDADE!

O site em que aprendi Python foi: www.w3schools.com
Lá aprende-se bases de imensas linguagens de programação, marcação entre outras, como HTML, CSS, C++, JAVA, ... Contém muita informação simples, com exemplos e exercícios práticos com soluções para maximizar a aprendizagem!


Têm imensa informação sobre Python, este seguinte link direcciona automaticamente para a página de Python: www.w3schools.com/python/default.asp

Para além deste site recomendo também bastante pesquisa autónoma, em sites, foruns e no youtube, a internet é a fonte de informação mais poderosa do Mundo, vamos dar-lhe uso!


Referências:

quinta-feira, 14 de maio de 2020

CSS-Regras de Escrita

CSS - Regras de Escrita


O CSS, como a maior parte das linguagens de programação toda a escrita é em inglês.
"Uma instrução CSS consiste em um seletor e um bloco de declaração. Cada declaração contém uma propriedade e um valor, separados por dois pontos (:). Cada declaração é separada por ponto e vírgula (;).
Em CSS, seletores são usados para declarar a quais elementos de marcação um estilo se aplica, uma espécie de expressão correspondente. Os seletores podem ser aplicados a todos os elementos de um tipo específico, ou apenas aqueles elementos que correspondam a um determinado atributo; elementos podem ser combinados, dependendo de como eles são colocados em relação uns aos outros no código de marcação, ou como eles estão aninhados dentro do objeto de documento modelo."

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:



Iniciação ao HTML: cabeçalhos

É quase impossível encontrar uma página na internet sem cabeçalho, como tal, vou mostrar-vos como construir um com HTML. Aviso já que é muito simples

Código




Resultado código



Como podem ver, para criar um cabeçalho apenas é necessário iniciar a tag, colocar o texto no seu interior e encerrar a tag. É importante que tomem em atenção o facto de que quanto maio o número a seguir ao "h", menor o cabeçalho. Por fim, quero apenas referir, que cada cabeçalho corresponde a um parágrafo, logo, se vários cabeçalhos forem criados na mesma linha, eles serão colocados na página em linhas diferentes, como mostrado na imagem do resultado.

Hilite.me


Algo que tem vindo a ser usado por mim e pelo André Jesus e é muito importante para mostrar os códigos (HTML, C++, Python) aqui no blog é o Hilite.me.

O Hilite é usado para transformar código escrito em texto normal para um formato html de forma a ser exibido mais facilmente nas publicações.

Para fazer o "highlight" temos de visitar o site, colocar o nosso código no lado esquerdo, selecionar as opções e clicar em "Highlight!". No lado direito aparecerá código HTML ao qual deveremos fazer copy paste diretamente no código do nosso blog (na posição que queremos).

A saber:

  • O código é exibido dentro de uma box.
  • Podemos escolher entre inúmeras linguagens de modo a obter o color highlight adequado à linguagem usada. Depois, podemos optar por modificar o estilo, que muda algumas opções gerais como a background e o bold das palavras chave.
  • Mais abaixo podemos modificar diretamente as opções do css, utilizando os nossos conhecimentos. Assim, podemos customizar totalmente a exibição do código.


<!DOCTYPE html>
<html>
  <body>
    <h1> Hilite é fantástico!</h1>
    <p> Como podem ver, consegui inserir o código HTML que me dão para obter isto.</p>
  </body>
</html>

Referências

Python - Sets (Parte 4)


NA ÚLTIMA PUBLICAÇÃO SOBRE SETS FALEI DE ALGUNS MÉTODOS DE SETS, NESTA IREI EXPLORAR OUTROS QUE NOS PODERÃO SER BASTANTE UTÉIS!



Apagar o set:

Para apagar o set utilizamos o comando del:~

set = {"apple", "banana", "cherry"}
del set

Limpar o set:
Limpar o set é remover todos os items do set, mas ele continua a existir, só que se encontra vazio, ou seja, é diferente de estar apagado:

set = {"apple", "banana", "cherry"}

set.clear()


Referências:

terça-feira, 12 de maio de 2020

CSS-O que é?

CSS - O que é?


CSS (Cascading Style Sheets/ Folhas de Estilo em Cascata) é "o melhor amigo do HTML", esta linguagem de programação é comum em código HTML através da tag <style>. Para iniciantes esta tag, como já disse aparece juntamente com o código HTML mas para os que já têm alguma experiência CSS é encontrado numa pasta em separado, o código HTML tem apenas um link que aponta para o CSS.

segunda-feira, 11 de maio de 2020

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

Iniciação ao HTML: p

Esta é uma das tags mais simples e mais comuns que pode ser utilizada no HTML. Serve para delimitar um parágrafo.


Código



Resultado 



Como podem ver, é extremamente simples construir um parágrafo em HTML, apenas incríamos a tag <p>, colocamos o texto que queremos que apareça, fechamos a tag </p>.

Código



Resultado



Como podem ver, é possível colocar dois parágrafos na mesma linha de código, mas como são parágrafos. vão sempre "trocar" de linha.

Imagens produzidas pelo autor

HTML - Tabelas


UMA FERRAMENTA MUITO INTERESSANTE E ORGANIZADA EM QUALQUER LADO É UMA TABELA, AJUDA A ARRUMAR OS DADOS E A INFORMAÇÃO DE UMA MANEIRA SIMPLES E AGRADÁVEL, ASSIM TAMBÉM NÃO PODE FALTAR NUMA PÁGINA WEB!

A tag utilizada para criar uma tabela HTML é a tag <table>, posteriormente fechada com </table>. Dentro dela, incluímos todos os elementos que compõem a tabela, ou seja, as células da tabela. Assim sendo, os elementos de uma tabela consistem em outras tags que poderão ser utilizadas.

As tags que vão formar a estrutura básica de uma tabela em HTML são as tags <tr> e <td>. A tag <tr> representa uma linha e a tag <td> representa uma célula. Desta forma, a criação de colunas em uma tabela HTML é feita automaticamente através da quantidade de células incluídas dentro de uma linha. Por exemplo, vejamos na imagem abaixo como é que essa estrutura é formada:


Assim vamos criar a nossa primeira tabela com o código (inserido na tag <body>) abaixo:


<table border="1">
    <tr>
        <th>Nome</th>
        <th>Idade</th>
        <th>Profissão</th>
    </tr>
    <tr>
        <td>Bruna</td>
        <td>19</td>
        <td>Bioquímica</td>
    </tr>
    <tr>
        <td>Nyckollas</td>
        <td>17</td>
        <td>Estudante</td>
    </tr>
</table>

O output deste código no navegador será:


Claro que existem muitas mais configurações e modificações que podemos fazer em tabelas, mas decidi apenas falar dos conceitos básicos.

Referências:

domingo, 10 de maio de 2020

HTML - Imagens


Como se metem imagens num código de HTML?


 Esta publicação é sobre como se metem imagens num código. Neste post também vou utilizar um exemplo da w3schools:



 Neste código a diferença é que utilizamos um image source para ir buscar a referencia a uma imagem. O alt significa alternative que é para quando não aparece a imagem, aparecer um texto a dizer "w3schools.com".

 Obrigado e até à próxima.

HTML - Links


Como se metem links no HTML?


 A maneira mais comum de se por um link num documento do html é a seguinte (vou utilizar um exemplo da w3schools):



 Aqui a parte que queremos falar é o link. Para isso metemos o a href que vai buscar a hiperligação ao link e quando carregamos em cima do texto, vai abrir uma nova página com o link que está lá agarrado.
 Obrigado e até à próxima.

HTML - PT07

Hoje finalizo este projeto revendo todo o trabalho que foi feito no PT07. Antes de começar relato que todo este trabalho foi feito no âmbito da disciplina de AIB com o objetivo de introduzir a linguagem HTML aos alunos. Para uma organização arrumei esta memoria descritiva em passos para que seja mais fácil entender.

Processo criativo
Criatividade: o que é e como se tornar mais criativo em 11 passosNeste 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.

Etapas iniciais de preparação
Instalação do Notepad++ - passo 2
Instalação do Atom (opcional) - passo 6
Instalação da aplicação SoloLearn - passo 9





Passo 0 - Uma breve história
No primeiro passo deste longo projeto o professor decidiu começar por nos introduzir a HTML com um breve introdução a linguagem. Desta forma o professor conto-nos como foi criada a historia desta linguagem.  Após isto o professor mostrou-nos a evolução do HTML numa linha de tempo que mostra todas as versões de HTML. E por fim o professor revelou a turma uma pequena demonstração ao famoso Hello Word! em HTM.





Passo 1 - Entender a estrutura basica da linguagem
Neste curto passo o professor explicou ao alunos a estrutura básica do HTML. Demonstrando e explicando o código do, já muito conhecido, "hello world". Desta forma este passo serviu como uma introdução à linguagem explicando a tag da "head" e "body", e até como escrever "Olá Mundo!" no paragrafo de texto e no titulo do separador.




Passo 2 - Instalação do editor de código de programação
Este passo serviu para fazermos a instalação de um editor de código de programação. O professor decidiu instalarmos o Notepad++, esta aplicação simples e leve é o programa perfeito para executar em alta velocidade os nosso pequenos projetos. Este passo foi simples e rápido sem quaisqueres dificuldades.




Passo 3 - As boas praticas para qualquer linguagem
Neste passo o professor mostrou à turma umas boas práticas que devemos seguir enquanto praticamos programação. Esta inclui uma lista de 6 principais e mais 15 extras que não são obrigatórias. Este foi um dos passos mais trabalhosos pois seguir sempre esta lista foi frustrante às vezes mas sempre necessário para um bom trabalho final.





Passo 4 - Analise de HTML básico
Neste passo começamos por entender e escrever o código que representa a estrutura básica do código do HTML. Foi aqui que pude aplicar já algum conhecimento Este passo foi dividido em cinco partes, cinco documentos de HTML. Cada documento analisa umas especificas tags e como funcionam. Ao lado está o quinto documento onde analisamos como adicionar imagens ao website. Este passo também foi fácil e rápido.




Passo 5 - Pauta caricatura da turma
 Este passo foi com certeza o passo mais longo e difícil deste projeto. O objetivo deste trabalho foi criar uma tabela que seja semelhante à planta da turma na sala de aula. (Eu já dei uma analise ao projeto detalhadamente que pode ser visualizada no meu portefólio). Essencialmente neste passo pude ter mais liberdade. Pude ser criativo com as cores, tamanhos e até a adição do professor à tabela. No entanto houveram constrangimentos, por vezes o código não funcionava ou eu não entendia como fazer cada legenda ter uma cor diferente. Com a ajuda do professor e dos meus colegas eu pude resolver todos estes problemas. Por fim não me podia esquecer de seguir as boas praticas. Este passo de seguir as boas praticas foi com certeza o mais trabalhoso mas como sempre necessário.



Passo 6 - GitHub
Neste passo, após a criação dos projetos do passo 4 e 5, criamos uma conta no GitHub usando o email da escola e deu-mos upload dos nossos ficheiros nos repositórios criados. Desta forma qualquer pessoas pode visualizar os sites criados anteriormente a partir do URL criado. Foi um passo que demonstrou ter mais dificuldades do que eu esperava mas com o ajuda dos meus colegas e professor pude resolver todas essas dificuldades.
https://sebastiaoantunes.github.io/passo5/


Passo 7 -Freenom
Este passo teve o objetivo da criação e redireccionamento de um domínio de 2º nível. Infelizmente após varias tentativas este passo não foi realizado. O professor notou que o passo tinha algumas dificuldades e falhas. Desta forma ele decidiu que era melhor não contar para a avaliação. No entanto ele ainda recomendou realiza-lo para  que cada aluno possa aprender um pouco mais sobre como esta criação de domínios funciona. Eu ainda tentei criar após a recomendação do professor mas mais uma vez encontrei-me com problemas e decidi que o passo ocupara demasiado tempo útil e deveria seguir para o próximo.
Freenom - A Name for Everyone

Passo 8 - Envio de endereços
Este passo foi, sem duvida o mais fácil. Neste foi feito uma simples entrega de endereços num formulário. Estes endereços foram os criados anteriormente nos passos 6 e 7. No entanto, como eu já referi, o passo 7 não foi realizado, por isso só entreguei os endereços do GitHub.

Passo 9 - SoloLearn
Neste penúltimo passo eu tive de fazer um curso online de HTML a partir da aplicação SoloLearn. Este programa deu a possibilidade de aprender sobre o HTML no computador ou pelo telemóvel (este foi o que eu optei por). Como já tinha mencionado anteriormente este foi um dos primeiros passos que eu comecei por fazer, isto foi porque eu queria ter um melhor conhecimento da linguagem antes de entrar nos exercícios e começar a escrever código. Então após a instalação do programa e a criação de uma conta comecei a aprender HTML. Foi um passo fácil e, sem duvida, o que eu aprendi mais.


Passo 10 - A noticia final
O ultimo passo é exatamente o que estas a ler neste preciso momento. É a entrega final de uma noticia relatando o progresso do PT, com ainda o URL do domínio publico e uma printscreen do diploma obtido no SoloLearn.

Conclusão
Concluindo gostei deste projeto. Houveram algumas dificuldades e constrangimentos, no entanto esses foram superados com a ajuda dos meus colega e do professor. Alguns passos foram muitos fáceis, enquanto outros mais difíceis mas contudo achei o  PT07 um projeto com sucesso. Pois no fim achei que concretizou o seu objetivo: ensinou aos alunos a estrutura básica de HTML, criando um projeto que pode manter o interesse e criatividade de cada aluno. Estou interessado para o que o próximo projeto poderá trazer. Até à próxima!

PT07

Memória descritiva do PT07:
  1. Processo criativo: Visto que foi um trabalho de aprendizagem, limitei-me a seguir as instruções do professor e das fontes de informação sugeridas. No entanto o visual da tabela do passo 5 foi totalmente editado por mim sendo esse o único passo em que uso a minha criatividade.
  2. Preparação do trabalho: Para este trabalho apenas utilizei o notepad++, para escrever o código, e o photoshop para redimensionar a minha caricatura, tudo o resto foi feito online utilizando como fonte de informações o w3schools e o sololearn e também todas as funcionalidades do G suite para apresentar o meu trabalho.
  3. Execução do trabalho: 
    • Passo mais interessante: Passo 5 pois foi onde aprendi mais sobre html e ccs, o que se deve ao facto de ter estado constantemente explorar autonomamente as melhores maneiras de escrever o código e construir a planta da sal.
    • A parte mais díficil: Utilizar as boas práticas foi díficil devido ao facto de ter escrito o código todo de seguida inicialmente e apenas depois ter editado de modo a parecer mais organizado.
    • O que deu mais trabalho: Foi também o passo 5, pois era único totalmente realizado por nós mesmos e portanto mostrou ser o mais trabalhoso.
  4. Resolução de problemas: Tireis todas as minhas dúvidas com os meus colegas algo que resultou pois terminei o trabalho sem qualquer dúvida por tirar.
  5. Conclusão:
    • O que mais gostei de fazer: Gostei particularmente pois encarei-o como um desafio que consegui vencer, pois até agora ainda não tinha realizado algo parecido, resultado final:













    • O que podia ter ficado melhor: Penso que a apresentação do trabalho no portefólio podia ter ficado mais completo.
    • O que aprendi: Aprendi duas linguagens de programação extremamente importantes (html e css) e também desenvolvi o meu trabalho autónomo

html - PT07


PT07


  Este post é sobre o trabalho de html que tenho vindo a desenvolver ao longo destas semanas.

  A ordem do que vai estar neste post é a seguinte:

1. Printscreen da finalização do curso de html
2. URL do site criado (no GitHub)
3. Memória descritiva do trabalho

1.




3. (agora vem o grande texto...)

  Este trabalho em geral foi giro de se fazer mas a principal complicação foi o esclarecimento das dúvidas pois ao estarmos fechados nas nossas casas, não foi tão fácil e isso acabou por complicar as coisas um bocado.

Passo 0

  Este paço foi simples pois era só ler o que aparecia na página de apoio do professor, o que rápido de fazer pois eram só 3 parágrafos. Entretanto tive curiosidade e fui investigar um pouco mais sobre a história do html para por mais alguma informação no portefólio pois eu não queria deixar aquela página só com um link.

Passo 1

  Este pode ter sido um dos passos mais importantes do trabalho pois foi o primeiro que nos fez ver como se escrevia. Quando comecei por ver do que se tratava o programar em html, visto que nunca tinha tido nenhuma experiência, achei confuso no início, mas com o tempo, foi ficando mais fácil de compreender pois comecei a associar tudo.

Passo 2

  Nesta parte do trabalho o professor pedia-nos constantemente para irmos instalando os editores de texto, que eram o Notepad ++ e o Atom. Quando o professor disse aquilo, estava tudo na normalidade. Quando fui à procura do Notepad ++, apareceu o primeiro problema. Visto que o Notepad ++ não existe para mac, fiquei tramado. Antes de perguntar ao professor por alternativas, fui tentar procurar por mim próprio. Vi algumas aplicações mas mesmo assim não sabia quais eram as melhores alternativas. Mandei o mail ao professor. Quando me respondeu ao mail, mandou um link de uma página que tinha as melhores alternativas. Grande coincidência, mandou o link da página que eu tinha ido ver. Conclusão, acabei por instalar o Sublime Text e o Atom. Finalmente chegou a parte que eu tinha de por alguma coisa no drive e no portefólio, que acabei por por os instaladores das duas aplicações que instalei.

Passo 3

 Neste passo 3, o professor dava-nos uma lista com algumas boas práticas em que eu já usava uma porque deixava o código mas limpo e simples, que era o identar o código. O segundo que era escrever sempre comentários e eu até pus um link para uma página minha do blog público em que escrevi sobre como se faziam os comentários em dois tipo diferentes de linguagens de programação que são as que utilizamos neste trabalho.

Passo 4

 Este passo foi o que tivemos uma primeira experiência de "jeito" com o html (está entre aspas porque não foi bem uma experiência mas mais um copy paste dos 5 códigos deste passo. Não tenho muito a dizer sobre este passo porque não foi um passo que me tenha dado muito stress.  

Passo 5

  "Mini projeto". Quando vi mini projeto pensei que fosse só uma coisinha simples que não iria demorar muito tempo (sabia lá eu no que me iria meter...). Fazendo as contas todas, o resto do trabalho é que chamaria de mini projeto e eis o porque: este projetozinho pequenino demorou-me mais tempo a fazer do que as outras partes do trabalho todas juntas. O objetivo era fazer uma tabela/planta de sala de aula ou o que lhe quiserem chamar, em que iríamos utilizar as caricaturas que fizemos na PT03. Uma coisa que fazendo com que demorasse mais tempo a acabar este passo foi o facto de estar à espera que as pessoas que faltavam pusessem as suas caricaturas no álbum partilhado, até que chegou uma certa altura em que simplesmente não qui saber mais e meti sem caricatura pois já me estava a atrasar. Nunca pensei vir a escrever um código assim tão grande em 200 linhas ou lá quantas foram e esse processo todo demorou-me algumas horas que foi para perceber o que estava a escrever e depois comentar tudo/quase tudo o que escrevia. Depois começaram a surgir aqueles problemas que têm sempre de aparecer mas coisas simples de se resolver e depois lembrar-me de que as pastas todas e os nomes dos ficheiros não deveriam ter maiúsculas nem espaços nem acentos, que ainda me fez demorar mais uns 3 minutos a alterar o código, para preparar para o por online. Escrever o código foi divertido de escrever até porque enquanto que o estava a fazer, estava a falar com amigos pelo discord e estávamos todos a escrever os nossos códigos. 

Passo 6

  Este passo 6 era para fazer fazermos os repositórios dos passos 4 e 5 no GitHub que parecia bastante simples no início. No repositório do passo 5, tudo ok, mas chegamos ao repositório do passo 4 e pensamos: como vou por os 5 ficheiros num só repositório se o link só abre um ficheiro? A dúvida foi resolvida na aula de esclarecimento de dúvidas, mas eu continuei sem perceber. Visto que não tinha entendido decidi mandar um mail ao professor a explicar a minha situação. Mais tarde, o professor respondeu-me a explicar tudo muito bem explicadinho eu eu entendi, pois não foi essa parte o problema. Resumindo tive de fazer um novo html com os links de cada um dos cinco projetos e isso foi fácil. Vou a testar se funciona... e não funciona. Lá estou a trocar outra vez mails com o professor que me estava a ajudar no exato momento e ia enviando-lhe material para ver se estava tudo bem. Entretanto são nove da noite do dia anterior ao da entrega e está o professor a trocar mails comigo. Finalmente chega um mail a dizer que não encontrou qualquer tipo de problema e eu a pensar que eu só podia estar a ver mal porque comigo não tinha funcionado (já à umas horas atrás). Vou a testar, está a funcionar tudo lindamente (pelos vistos o problema era só uma questão de tempo). Lá segue um mail meu a pedir desculpa ao professor por o ter feito perder tempo. Mural da história: DAR F5. 

Passo 7

  Este passo fiz mais para o fim desta PT mas "fiz"/"não fiz", porque como já tinha sido esclarecido nas aulas, o no registo no FreeNom não estava a ser possível devido a aparecer que as nossas contas já estavam criadas quando nós não tínhamos criado nada. Em geral, quase todos não fizeram este passo devido ao que disse anteriormente ter acontecido e porque o professor disse que o passo já não ia contar para avaliação.

Passo 8

 Quando foi para enviar os links no formulário do repositório do GitHub e do Freenom, surgiu uma dúvida geral na turma que era o que seria para por no link do FreeNom pois tínhamos de por obrigatoriamente um link no espaço e o que maior parte de nós fez foi escrever http://nãofiz.ga ou algo do género.

Passo 9

  Embora uma parte de mim tenha achado que este curso do SoloLearn deveria ter sido feito antes de fazermos a nossa planta da sala de aula pois estava lá explicado o que significava cada coisa, outra parte de mim também acha que devia ter sido feita onde estava programado, pois iriam começar a aparecer coisas que não iríamos precisar neste trabalho. Demorei uns 2/3 dias a fazer este curso porque não queria fazer tudo à pressa e não ia aprender nada de nada. Maior parte do curso fiz no computador mas recordo-me que houve uma parte em que usei o telemóvel pois não conseguia estar a usar o computador. O curso em si era, bom, estava completo com as coisas mais introdutórias apesar de haver umas coisas mais complicadas do que outras mas isso é o normal e deu para aprender bem. 

Passo 10

Este passo foi dos que demorou menos tempo a fazer, pois foi só escrever uma publicação no blog com esta memória descritiva que estou a escrever no momento.




 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

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