HTML5 e as novas tags de estrutura [Parte 1]

HTML5 new structural tagsNa construção de um documento HTML, as tags utilizadas para atribuir significância ao conteúdo – os headings (h1-h6) – são os “responsáveis” pelo outline do conteúdo. A tag div, um elemento genérico sem qualquer peso semântico, foi o recurso encontrado pelos developers, designers e webmasters para agrupar o conteúdo espacialmente.
Imagine a seguinte estrutura, em que o documento estará dividido entre um cabeçalho, a área central à esquerda (a maior) onde teremos o conteúdo principal, a área adjacente contará com tópicos relacionados com o tema da página, e por fim teremos um rodapé.

site_exemplo

Até então, iriamos criar elementos div com id name ou class name alusivos ao conteúdo que estará presente no seu interior. No entanto essas “semânticas” servem somente como pontos de âncora para que os developers, designers e webmaster possam atribuir comportamento visuais e de interacção, através de CSS e JavaScript, pois as verdadeiras secções terão de ser feitas através de uma correcta utilização dos headings.

Em 2005, o Google analizou mais de um milhão de páginas e, três anos mais tarde, o Opera analizou cerca de quatro milhões. Ambos procuraram a mesma coisa, quais os nomes mais utilizados para atribuir significado a essas divs.

Em Outubro de 2014, o HTML5 passou a ser uma recomendação do W3C, ou seja, passou a ser o standard. Nesse documento constam quatro novas tags estruturais que foram retiradas dessa análise feita anteriormente. As novas tags estruturais são article, section, nav, aside. Iremos abordar os diferentes elementos em artigos distintos.

Comecemos pela definição do elemento nav segundo a recomendação de 28 Outubro de 2014 presente no site do W3C:

“Uma nav representa uma secção da página que liga a outras páginas ou partes dentro da mesma: uma secção com links de navegação(…)”

Este é, talvez, o novo elemento cuja interpretação é mais simples. Vejamos como é que o tradicional elemento ul, utilizado como menu de navegação será alterado:

HTML 4.1

<ul id="nav">
   <li><a>link1</a></li>
   <li><a>link2</a></li>
</ul>

HTML 5

<nav>
   <ul>
      <li><a>link1</a></li>
      <li><a>link2</a></li>
   </ul>
</nav>

Note que se eliminou o atributo id=”nav” do elemento ul.

html5_outliner

Ao visualizarmos o documento acima, através de um
HTML5 Outliner como a extensão “Headings Map” para o Google Chrome, é possível ver a secção que o elemento nav faz.

Repare que o Outliner marcou os elementos nav como um erro, e tal se deve ao facto de não ter atribuído qualquer heading à nav.

No próximo artigo continuaremos a analisar os novos elementos estruturais de HTML5 e no final será então possível compararmos as estruturas criadas na produção da página acima.

HTML5 e a simplificação das Tags

HTML5_TagsO caminho delineado para a evolução do HTML vai ao encontro da simplificação. Já num artigo anterior falei sobre a simplificação na declaração do DOCTYPE. A meta informação que se deveria de incluir para definir o tipo de conteúdo também foi simplificado, ficando somente o código de caracteres que deverá ser utilizado pelo servidor. Apesar desta simplificação, continua a ser aconselhado a inserção do charset por razões de segurança.

HTML4.01

<meta http-equiv="content-type" content="text/html" charset="utf-8">

HTML5

<meta charset="utf-8">

O atributo type foi outro elemento retirado nas especificações do HTML5:

HTML4.01

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"> 

HTML5

<link rel="stylesheet" href="style.css">
<script src="script.js"> 

Inclusivé a utilização de aspas (“) passou a ser opcional, desde que o valor do atributo não contenha espaços:

HTML5

<link rel=stylesheet href=style.css>
<script src=script.js> 

Claro que esta última utilização, somente por razões de retro-compatibilidade não é aconselhável (mas será algo que se espera encontrar de futuro).

Várias tags deixaram de exigir o seu correto “fecho” – <p>, <li>, <tr>, <td>, <body>, <html>, … – mas, e uma vez mais por razões de retro-compatibilidade, o W3C aconselha a que continue a fechar a tag.

No próximo artigo abordarei as novas tags que visam uma web semântica. Até lá.

HTML5 e o Doctype

html5 superpowers

HTML on ‘roids (imagem retirada do Google)

O HTML5 traz-nos algumas simplificações e muitas novidades – algumas delas darão boas dores de cabeça na criação de conteúdos ricos e criativos. Vamos por partes…

Todos os documentos HTML deverão começar com uma declaração da versão do HTML – o Doctype – que a página contêm. Antes da última revisão dos standards da linguagem HTML, existiam várias definição de tipo de documento – DTD (document type definition):

  • HTML 4.01
    • Strict (“strict.dtd”)
    • Transitional (“loose.dtd”)
    • Frameset (“frameset.dtd”)
  • XHTML 1.0
    • Strict (“xhtml1-strict.dtd”)
    • Transitional (“xhtml1-loose.dtd”)
    • Frameset (“xhtml1-frameset.dtd”)
  • XHTML 1.1
    • DTD (“xhtml11.dtd”)

Além de existirem múltiplos DTD, a forma de escrever o doctype também não era muito simplificado:

HTML4.01 / XHTML1.0 / XHTML1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Felizmente, com as especificações do HTML5 a passarem à fase de “recomendação”, já podemos começar a utilizar a nova forma de declarar o doctype:

HTML5

<!DOCTYPE html>

De momento passou mesmo a ser desaconselhado a utilização dos doctypes obsoletos por serem demasiado longos.

Espero que tenham gostado deste primeiro artigo de uma série sobre as novas funcionalidades do HTML5.

Internet ou World Wide Web?

Global Network

Global Network

Internet ou World Wide Web?
São duas coisas diferentes ou somente duas designações para a mesma coisa?
Esta questão não é só colocada por indivíduos info-excluidos, mas também por muitos indivíduos da geração Y, os chamados Millenniums. Pessoalmente considero quase um contra-senso, mas já me deparei com essa situação inúmeras vezes nas minhas turmas, e que regra geral são constituídas por elementos Millenium. Esta geração trata a tecnologia pelo nome próprio, no entanto são menos curiosos sobre os porquês.

A Internet e a World Wide Web não são a mesma coisa, mas encontram-se intrinsecamente ligadas uma à outra.

Internet é uma rede massiva de redes, uma infraestrutura global. Como tal, liga milhões de computadores uns aos outros, permitindo que os mesmos comuniquem entre si. Isto só foi possível devido à invenção de diversos protocolos que facilitam estas comunicações em diferentes linguagens. Alguns desses protocolos são utilizados diariamente, como por exemplo o SMTP para o email (mais sobre protocolos noutro post).

World Wide Web, vulgo Web, é uma forma de aceder a informação através do meio Internet. Ou seja, um modelo de partilha de informação que utiliza um dos protocolos que compõem a Internet para a partilha de informação, o HTTP – HyperText Transfer Protocol. Este protocolo permite que a informação contenha texto, imagens, vídeo e áudio e, mais importante, que toda a informação esteja ligada entre si através de hyperlinks.

Se por acaso utilizar um browser para “navegar na Internet”, na realidade estará a navegar na Web!

Novo Ano Lectivo

O novo ano lectivo já iniciou para os três cursos com quem terei o prazer de trabalhar e debater.

Uma vez mais, este semestre, estarei dedicado a algoritmos e a comunicação multimedia, para turmas de “Multimedia” e “Fotografia”

No segundo semestre, será “Desenvolvimento Frontend para a Web” para a turma de “Multimedia” e para a Pós-Graduação em “Web Design”.

Como sempre, as expectativas são altas…espero ter alunos sedentos de aprender. Por isso, let the “games begin”!!!

Renascer esta coisa chamada blog

Olá Mundo, à muito tempo que não nos “viamos”. Passou imenso tempo em que nem eu próprio visitava o meu próprio blog, aliás, considerei até em lhe por termo à existência.

O mercado português para computação criativa não está na melhor forma, e até para projectos simples de Flash e ActionScript3. O futuro não se apresenta muito risonho.

Usei o ano que passou para ver como é que o mercado iria reagir, e para onde se iria virar, a resposta foi HTML e JavaScript. Isso, leram correctamente, estou a falar do bom “velhinho” HTML e não do “novo puto do bairro” HTML5. Actualmente todas as agências criativas querem algum tipo de trabalho em HTML5, quando na realidade estão mesmo é a falar de algum tipo de animação e/ou interacção em JavaScript.

Felizmente para mim, sempre fui um agnostico tecnológico. Trabalhei com tecnologias como o Adobe Flash quase desde o seu surgimento, desde os bons tempos da Macromedia; usei HTML, CSS e JavaScript quando era obrigatório e até usei o Microsoft Silverlight que foi bom o suficiente para a Microsoft aprender e delinear o caminho a tomar com o Windows 8 etc etc.

Quando a Apple tomou a decisão de não incluir o plugin Flash no iphone e ipad, houve uma grande comoção – e agora?
Então a Adobe tomou a decisão de direccionar o Flash para o Game Development. Acho que foi uma boa decisão!! O Flash está a ficar mais forte e robusto.
Mas e agora neste microsistema chamado Internet? Pessoal, o velhinho HTML com um grande facelift está ai para ficar, mesmo que todo o Mundo saiba que os standards para o HTML5 ainda demorem a chegar!!

Assim, com maior ou menor dano, temos de construir o mesmo tipo de websites, mas agora sem o Flash. Será um grande problema? Claro que será, mas a Adobe está a lançar um conjunto de ferramentas para ajudar a resolver essa transição.
Mas não temam, o futuro é sempre sorridente…afinal de contas, isto é só tecnologia, o nosso cérebro é a nossa ferramenta mais valiosa!! Por isso, vamos lá…WebDesign e WebDevelopment irão sempre prosperar, independentemente do código que escreverem e eu irei continuar a escrever sobre o assunto.

Até breve.