História do HTML - PT05 Passo 0

HTML

O HyperText Markup Language ou HTML (HyperText Markup Language) é a linguagem de marcação padrão para documentos projetados para serem exibidos em um navegador da web. Pode ser auxiliado por tecnologias como Cascading Style Sheets (CSS) e linguagens de script como JavaScript.

Os navegadores da Web recebem documentos HTML de um servidor da Web ou de armazenamento local e os transformam em páginas da Web multimídia. HTML descreve a estrutura de uma página da web semanticamente e originalmente incluía dicas para a aparência do documento.

Em 1980, o físico Tim Berners-Lee, um contratante do CERN, propôs e prototipou o INQUIRE, um sistema para os pesquisadores do CERN usarem e compartilharem documentos. Em 1989, Berners-Lee escreveu um memorando propondo um sistema de hipertexto baseado na Internet. [3] Berners-Lee especificou HTML e escreveu o navegador e o software do servidor no final de 1990.

Source: https://pt.wikipedia.org/wiki/HTML

[IDS] Front-end development: HTML

Front-end development: Conceito

Front-end é a interface gráfica do website, ou seja, é a parte que se está visível aos utilizadores e portanto é a interface com a qual se interage quando se usa um website. O front-end está relacionado com o aspeto visual do website, podendo ser comummente designado como "design do website". Para além da estrutura geral do website, desenvolvedores front-end também precisam de pensar na experiência do utilizador e na interactividade do website, conjugar ambos conhecimentos e construir o website.

HTML: Conceito e história

O HTML é o "esqueleto", isto é, a estrutura de todo e qualquer processo de desenvolvimento de websites, sem o qual não existe uma página web. HTML é utilizado de modo a fornecer uma estrutura global de como o website deve ficar. A última versão do HTML chama-se HTML5, que tem uma nova e eficiente forma de tratar elementos tais como ficheiros de vídeo e áudio, que não existiam na última versão ou não tinham uma boa implementação.

HTML: Opinião

    Apesar do grande destaque que o desenvolvimento front-end tem tido nos últimos anos, bem como da constante procura por profissionais capacitados nessa área, não acredito que seja a melhor e mais interessante área dentro do desenvolvimento de software. 

    Para construir um website, podemos utilizar o nosso próprio computador e, com auxílio de um navegador, obtemos resultados instantâneos dos nossos "códigos". Por outras palavras, não é preciso mobilizar vastos conhecimentos em protocolos de comunicação, redes de computadores, serviços, processos assíncronos, Cloud e entre outros para dar um pontapé inicial, o que - por outro lado - é exigido pelo desenvolvimento back-end de qualquer produto digital. 

    Ainda que a experiência do utilizador, relativamente aos serviços desenvolvidos, seja uma das partes mais relevantes para o sucesso e melhor utilização dos processos em back-end, uma aplicação pode existir e funcionar com um front-end pobre, mas uma aplicação não pode funcionar sem um back-end bem desenvolvido e sólido.

    De forma a concluir a minha opinião acerca de HTML, devo referir que sendo uma linguagem de markup, não existe lógica matemática na construção de um código em HTML, qualquer código em HTML não é capaz de avaliar expressões e, portanto, é incapaz de reagir sobre o valor lógico das mesmas. Sendo assim, o HTML por si só é um produto inacabado. Podemos tratar o HTML como um auxílio gráfico, mas algo longe de ser uma componente indispensável para o desenvolvimento de software.

 

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

HTML 5 - 5 novas tags de média

Uma das mudanças do HTML 5 em relação às versões antigas são cinco novas tags de média.

As 5 novas tags de média introduzidas pelo HTML 5 foram:

• <audio> - permite adicionar clips de audio à pagina, neste momento existem 3 tipos de ficheiro compatíveis: MP3; WAV e OGG.
• <embed> - permite adicionar um plug-in (aplicação externa ou conteúdo interativo) à página, este plug-in não é HTML.
• <source> - serve para identificar a fonte dos elementos de audio e de vídeo.
• <track> -  permite adicionar texto a elementos de audio e video (por exemplo nome da música, legendas e notas adicionais).
• <audio> - permite adicionar clips de vídeo à página (vídeo direto, vídeo ou filmes), neste momento existem 3 tipos de ficheiro compatíveis: MP4, WebM e Ogg.

Consultei W3Schools dia 24/01/2019

HTML 5 - A estrutura

Com o HTML 5 foram introduzidos elementos como o vídeo e a música, mas também a estrutura do documento mudou.

O "body" do documento HTML 5 é disposto da seguinte forma:

• header - representa a parte de cima da página, o seu título, a sua apresentação.
• nav - é a parte de navegação da página, onde o utilizador pode navegar dentro do site dirigindo-se para diferentes sub-páginas.
• article - é onde se encontra a informação mais importante da página, é o conteúdo no qual se baseia o site.
• section (situa-se dentro do article) - é a divisão do article, podendo haver muitas sections dentro de um article.
• aside - como o nome indica é a parte da página que tem o conteúdo "à parte", podendo este conteúdo ser relacionado com o article, ou mesmo links.
• footer - é a parte de baixo da página, o rodapé, onde se pode encontrar por exemplo os contactos e os direitos de autor.

@SoloLearn

Consultei o site SoloLearn dia 14/01/2019

Javascript: 15 Jogos populares criados com HTML 5 e JavaScript

Olá tudo bem? Hoje vim aqui falar de um artigo bastante interessante que encontrei. Eu sei que a maior parte das pessoas gosta de jogar videojogos e como estamos a dar Javascript achei interessante mostrar que jogos foram criados como o mesmo. Podem não acreditar mas alguns jogos que vocês já jogaram de certeza foram feitos usando JavaScript em conjunto com HTML5.
Este website possui o artigo sobre o que falei.
Divirtam-se a ler e até para a semana!

https://www.digitaltrends.com/gaming/best-html-5-javascript-games/

HTML5 - Novas Tags

    Nesta nova versão de HTML, a quinta grande versão, houve tags que desapareceram e tags novas que vêm facilitar tarefas muito comuns. Aliás, tal seria de esperar pois HTML tem vindo a ter uma evolução tremenda desde a sua criação, de uma forma extremamente rápida, até para uma linguagem de programação. Assim, pode ser difícil manter-se a par de todas as alterações efetuadas com cada nova versão. Para que não se percam, aqui encontram-se todas as alterações a tags efetuadas em HTML5.

Fonte: https://www.w3schools.com/html/html5_new_elements.asp no dia 16/02/2018

           https://blog.bannersnack.com/wp-content/uploads/2017/03/How-to-Make-Responsive-HTML5-Banner-Ads-.png no dia 16/02/2018

HTML5

HTML5 (Hypertext Markup Language, versão 5) é uma linguagem para estruturação e apresentação de conteúdo para a World Wide Web e é uma tecnologia chave da Internet originalmente proposto por Opera Software. É a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semântica e acessibilidade. Possibilita o uso de novos recursos antes possíveis apenas com a aplicação de outras tecnologias. Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos (navegadores, parsers etc). O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM. Atualmente, está em fase de esboço, porém diversos navegadores já implementam algumas de suas funcionalidades.

Após seus predecessores imediatos HTML 4.01 e XHTML 1.1, HTML5 é uma resposta à observação de que o HTML e o XHTML, de uso comum na World Wide Web, é uma mistura de características introduzidas por várias especificações, juntamente com aquelas introduzidas por software, tais como os navegadores, aqueles estabelecidos pela prática comum, e os muitos erros de sintaxe em documentos existentes na web. É, também, uma tentativa de definir uma única linguagem simples de marcação que possa ser escrita em HTML ou em sintaxe XHTML. Isso inclui modelos de processamento detalhados para incentivar implementações mais interoperáveis; isso estende, melhora e racionaliza a marcação disponível para documentos, e introduz marcações e interfaces de programação de aplicativos (APIs) para aplicações web complexas. Pelas mesmas razões, HTML5 também é um candidato em potencial aplicações multi-plataforma móveis. Muitos recursos do HTML5 tem sido construídos com a consideração de ser capaz de executar em dispositivos de baixa potência como smartphones e tablets.

Fonte: https://pt.wikipedia.org/wiki/HTML5

YouTube troca em definitivo o Flash pela norma HTML5

O portal multimédia YouTube decidiu de forma oficial deixar de reproduzir os vídeos com recurso ao Adobe Flash Player e adotar a norma HTML5 para todos os utilizadores que utilizarem os browsers Google Chrome, Internet Explorer 11 da Microsoft, Safari 8 da Apple e o Firefox da Mozilla Foundation.

Prezi

O Prezi é um software na modalidade computação em nuvem feito em HTML5 utilizado para a criação de apresentações não lineares. No lugar, tudo é criado numa estrutura única, parecida com uma palheta de designer real.

A plataforma disponibiliza uma versão gratuita que roda a partir do navegador. É possível criar novas apresentações ou reutilizar apresentações públicas compartilhadas por outros usuários. Para apresentar o trabalho pronto, é possível acessá-lo pela internet ou baixá-lo numa pasta compactada que não depende de acesso à internet para funcionar.

Além da versão gratuita, há também opções de uso pagas que aumentam o tamanho disponível para armazenamento na nuvem, e permitem editar o trabalho localmente, offline. Devido a sua portabilidade, pode ser utilizado em palestras, conferências, apresentações de projetos e de trabalhos escolares ou académicos.

Wix

Wix.com é uma plataforma online de criação e edição de sites, que permite aos usuários criar sites em HTML5, sites Mobile e páginas customizadas para o Facebook.  Usando as suas ferramentas do tipo arrastar-e-soltar e a sua Loja de Aplicativos (App Market), é possível adicionar aplicativos de terceiros nos seus sites, como soluções eCommerce, formulários de contato, chats online, cupões e mais.

Wix.com oferece aos usuários da web a possibilidade de criar um site profissional, independentemente de conhecimento prévio em programação ou design. Os eus concorrentes incluem Wordpress, Yola, SitePX, Weebly, Webs e outros serviços de criação e hospedagem de sites. A empresa está sediada em Nova York.

Emaze

O emaze é uma plataforma de apresentação on-line construída em html5 . Os usuários podem criar, gerenciar e compartilhar as suas apresentações através da sua base em nuvem sistema SaaS. O emaze oferece uma variedade de modelos, incluindo formatos usando animações em 3D e fundos de vídeo. Foi oficialmente criado em 2009 pela co-fundadores Motti Nisani, Shai Schwartz e Dr. Arie Livshin.

O emaze é o futuro das apresentações online, dando-lhe o poder de criar uma impressão fantástica através de design e tecnologia. Tudo o que precisa de fazer é escolher um dos seus modelos para começar a criar uma apresentação fantástica.