Desenvolvimento - HTML

Primeiros Passos no Processo de Transição para HTML 5

Veja neste artigo algumas das características e propriedades do HTML 5 além das suas novidades e como se dá um primeiro processo de transição para este novo padrão da Web.

por Higor Medeiros


1. Introdução

O HTML 5 é um novo padrão criado pelo W3C que dispensa o uso de plug-ins podendo ser usado para diversas coisas desde simples páginas Web até complexos games como Quake. O HTML 5 também possui suporte nativo para áudio e vídeo. Por exemplo, ao invés de usarmos plug-ins Flash para o desenvolvimentos de páginas Web pode-se simplesmente utilizar Canvas e Javascript para criar incríveis animações.

Além disso, HTML 5 também fornece armazenamento no lado cliente e cachê provendo acesso off-line aos sites Web. Alterações no CSS e Javascript também foram feitas, além da criação de novas API Javascript. Dessa forma, o HTML 5 é uma família de tecnologias que combinadas nos fornecem uma vasta gama de ferramentas para criação de páginas Web e aplicações.

O HTML 5 será completamente oficializado em 2014. No entanto, os browsers atuais já suportam as suas novas funcionalidades.

Nas próximas seções do artigo será mostrado as mudanças ocorridas no HTML 5 além de exemplos.

2. Atualizando o Doctype

Para fazermos a transição para HTML 5 a primeira coisa que deve ser considerada é o topo da página. No HTML 4 tinha-se o seguinte Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Ao migrarmos para o HTML 5 a alteração é simples, basta trocar o Doctype para um muito mais simplificado como pode ser visto abaixo:

<!doctype html>

Os antigos Doctypes eram difíceis de lembrar e normalmente o que se fazia era copiar e colar os Doctypes de um arquivo para outro. Com este novo Doctype é muito mais simples de lembrar e o mais importante é que este Doctype não será mais trocado nas futuras versões do HTML, sendo portanto o oficial e definitivo para os documentos HTML. Nos padrões antigos do HTML usava-se um DTD para saber do que se tratava o documento, agora o HTML 5 simplificou e flexibilizou o processo fazendo com que os browsers apenas reconhecessem o tipo do documento como HTML no próprio Doctype para assegurar que ele está analisando um documento HTML.

3. Atualizando Meta Tags

Mais uma mudança bastante significativa esta nos Meta Tags onde tínhamos anteriormente o seguinte Meta Tag:

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

Na atualização para o HTML 5 também tem-se uma importante simplificação das Meta Tags ficando a partir de agora conforme indicado abaixo:

<meta charset="utf-8">

Todos os browsers atualmente já suportam esta Meta Tag muito mais simples e simplificada que ressalta principalmente a codificação, excluindo os antigos itens supérfluos.

O padrão UTF-8 é uma codificação de caractere que tem suporte para inúmeros alfabetos. O UTF-8 é o mais novo padrão de codificação.

4. Atualizando a Tag Link

Outra novidade trazida no HTML 5 é a atualização da Tag Link que anteriormente tinha a sintaxe abaixo:

<link type="text/css" rel="stylesheet" href="lounge.css">

A nova especificação diz que deve-se eliminar o atributo Type, pois o tipo CSS é o padrão quando não especificamos nenhum tipo. Portanto, a nova sintaxe fica como indicada abaixo:

<link rel="stylesheet" href="lounge.css">

Outra Tag atualizada foi a de Script. No HTML 5 o Javascript também é considerada a linguagem de Script padrão, assim também podemos remover o atributo “type”. Dessa forma, tem-se que temos a forma abaixo de chamar a Tag Script:

<script src="lounge.js"></script>

5. Finalizando as Atualizações

Após as modificações acima temos uma atualização de qualquer documento HTML para o HTML 5. Agora nossas páginas estão prontas para usufruir de tudo que o HTML 5 tem a nos oferecer. Se já temos familiaridade com o HTML 4.01 será ainda mais benéfico usarmos HTML 5 que é um super conjunto do HTML 4.01, usando assim o que o HTML 4.01 possui e estendendo as suas funcionalidades. Obviamente que para usarmos o HTML 5 não basta apenas atualizarmos alguns elementos, na realidade esse é um primeiro passo para começarmos a usar tudo que o HTML 5 tem a oferecer para criar aplicações Web ricas.

Abaixo segue um exemplo simples, mas que demonstra os elementos atualizados para o HTML 5:

Listagem 1: Exemplo de Página Web em HTML 5.

<!doctype html>
<html>
<head>
	<title>Exemplo em HTML 5</title>
	<meta charset=“utf-8">
	<link rel=“stylesheet" href=“css_exemplo.css">
	<script src=“js_exemplo.js"></script>
</head>
<body>
	<h1>Bem vindo a um Primeiro Exemplo em HTML 5</h1>
	<p>
		<img src="img_exemplo.gif" alt="Exemplo Img">
	</p>
	<p>
		Este é um exemplo de uma página em HTML 5, para mais informações visite <a href=“http://www.w3c.org”>aqui<a/>
	</p>
</body>
</html>

6. Outras Informações que Deveríamos Saber

As pessoas ainda perguntam o que aconteceu com o XHTML que era considerado o futuro do HTML. O que aconteceu basicamente é que o estrito, rígido deu lugar ao flexível, simples. Portanto, felizmente para muitos o XHTML acabou e quem ficou no seu lugar é o atual HTML 5. No entanto, se o desenvolvedor já conhece XHTML isso se torna muito importante e útil para dominar o HTML 5, dessa forma o conhecimento não é perdido.

Importantes empresas como Itaú, Submarino, Banco do Brasil, entre outras corporações já afirmaram fazer a migração desde já para o HTML 5. Para estas empresas isso representa várias facilidades ao leitor e ao consumidor como código limpo, maior facilidade para acessibilidade e possibilidade de incluir novas tecnologias que podem facilitar e dinamizar a navegação.

7. Conclusões

HTML 5 é a mais nova versão do HTML com novas tags simplificadas, nova semântica, novas bibliotecas Javascript, CSS, etc. O XHTML não é mais o novo padrão para páginas Web, o HTML 5 é o mais novo padrão a ser utilizado. Com Javascript e suas API’s podemos controlar todos os aspectos de uma página HTML 5 como desenho em 2D, vídeo, e muito mais. O processo de transição para o HTML 5 não é complicado, basta algumas alterações para que possamos começar a usufruir de alguns benefícios que o HTML 5 pode nos fornecer.

Peço aos leitores que continuem enviando e-mails (higorowen@gmail.com) com seus pedidos de novos artigos, este artigo é mais um pedido de alguns leitores que acharam um pouco esparso as informações sobre como começar uma atualização para o novo padrão e quais são as principais características do HTML 5. Num próximo artigo continuaremos falando sobre HTML 5 enfatizando algumas novidades.

Bibliografia

Eric Freeman. HTML 5 Programming. O‘Reilly, 2011.
Curso HTML 5, W3C. Disponível em http://www.w3c.br/Cursos/CursoHTML5
HTML 5, W3C. Disponível em http://www.w3.org/TR/2011/WD-html5-20110525/
Higor Medeiros

Higor Medeiros - Higor Medeiros (higorowen@gmail.com) é aluno da Universidade do Vale do Rio dos Sinos em Ciência da Computação cursando o 4º semestre, onde também trabalha na pesquisa científica na área de inteligência artificial com Processamento de Linguagem Natural, desde 2004. É programador em diversas linguagens, tendo mais experiência em C# onde hoje desenvolve softwares para PLN.