HTML 5 – Nova tecnologia
Muito se fala sobre as novidades do HTML5 e o que ela irá representar para as novas aplicações WEB. Este post tem a proposta de apresentar o que está sendo discutido na atual especificação, o que já está efetivamente sendo suportado por alguns browsers, bem como analisar o impacto destas novidades no futuro das aplicações web.
O HTML5 foi criado pelo WHATWG (Web Hypertext Application Tecnhology Working Group), grupo formado por desenvolvedores de diversas empresas, como Opera, Mozilla e Apple, que estavam descontentes com o rumo que a W3C estava dando ao XHTML. A proposta do HTML5 é ser uma linguagem melhor preparada para construção de aplicações WEB, bem como ser independente de plugins, além de ter novos elementos que dão mais semântica ao conteúdo. Atualmente o WHATWG e o W3C trabalham em conjunto no desenvolvimento do HTML5.
Embora a versão final do HTML5 esteja previsto para 2012, muitos browsers já estão suportando algumas das principais novidades do HTML5, e a cada dia aparecem exemplos de bom uso dos novos recursos da linguagem na WEB. O Youtube, por exemplo, já possui uma versão experimental do portal em HTML5. http://www.youtube.com/html5
De acordo com a avaliação do HTML5Test, que classifica de 1 a 160 pontos o suporte dos browsers ao HTML5, temos:
1- Google Chrome 4.1 – 118 pontos
2- Opera 10.51 – 102 pontos
3- Firefox 3.6.3 – 101 pontos
4- Internet Explorer 7/8 – 19 pontos
Como podemos perceber a Microsoft – em suas atuais versões de browsers – não tem um bom suporte ao HTML5, porém já anunciou que suportará integralmente o HTML5 em seu novo browser, o IE 9 – com expectativa de lançamento no segundo semestre de 2010.
Um DOCTYPE de fácil memorização
O DOCTYPE possui uma nobre função: orientar o browser como ele deve renderizar o seu conteúdo, porém a memorização da sintaxe dos DOCTYPEs não é tarefa das mais fáceis, principalmente quando lembramos que são três as versões para o HTML 4.01/xHTML (transational, frameset e strict). Geralmente recorremos ao “copy+paste” para inseri-los na página. No HTML5, a declaração é feita em uma linha com 15 caracteres:
Gráfico nativo com canvas
Uma das principais novidades do HTML5 é o elemento canvas, que através do javascript permite a criação de animações e jogos bem interessantes e, junto com o SVG, promete substituir tecnologias que exigem instalação de plugins, como o Flash, Silverlight e JavaFx.
Vamos utilizar como exemplo a criação de um gráfico simples. Veja a sintaxe do canvas:
<.canvas id=”elementoCanvas” width=”900px” height=”200px”.>
Seu browser não suporta elemento canvas
<./canvas.>
<.script type=”text/javascript”.>
var canvas=document.getElementById(’elementoCanvas’);
var ctx=canvas.getContext(’2d’);
// desenha um retângulo 100px X 100px, com cor vermelha, 50% de transparência
ctx.fillStyle=’rgba(255,0,0,0.5)’;
ctx.fillRect (20, 20, 100, 100);
// desenha um retângulo 100px X 100px, com cor verde, 50% de transparência
ctx.fillStyle=’rgba(0,255,0,0.5)’;
ctx.fillRect (40, 40, 100, 100);
// desenha um retângulo 100px X 100px, com cor blue, 50% de transparência
ctx.fillStyle=’rgba(0,0,255,0.5)’;
ctx.fillRect (60, 60, 100, 100);
// Escreve no gráfico
ctx.fillStyle = ‘#000′;
ctx.fillText (’Gráfico em Canvas, sensacional!’, 15, 15);
<./script>
Resultado:
Obs.: Além do atributo “id” (utilizado para identificação via DOM), o elemento canvas só permite dois atributos (largura e altura), quando não especificados, temos por padrão: 300×150px.
Edição de textos em tempo real com o contentEditable
O atributo “contentEditable” foi criado pela Microsoft e incorporado no HTML5. Ele permite deixar “qualquer tag” do documento editável, os valores possíveis são “true” ou “false”.
<.p contenteditable=”true” class=”contentEditable”>Você pode editar este texto, para isto, dê duplo clique sob o texto
“Database” client-side
Um dos objetivos do HTML5 é melhorar a experiência do uso de Aplicações Web quando o usuário estiver off-line. Para isto, foi disponibilizada uma API para setar/capturar dados exclusivamente no browser. Uma espécie de “sessão” off-line em que o valor não pode ser capturado pelo servidor.
localStorage.setItem(’chave’,'valor’); // Setar o valor no ‘banco de dados local’
localStorage.getItem(’chave’) // capturar o valor;
localStorage.clear() // limpar o valor do banco de dados local;
Formulários – Novos campos de formulário
Muitas necessidades que os desenvolvedores possuíam e só preenchiam através do javascript foram implementadas no HTML5. Em apenas algumas linhas é possível disponibilizar componentes como: slider, autocomplete, campo data, além de validações de diversos campos. Veja algumas destas opções para formulários:
Telefone – <.input name=tel type=tel> - Utilizado para entrada de dados de telefones
URL – <.input name=url type=url> – Utilizado para entrada de variadas URLs. Por padrão o browser irá inserir o http:// como protocolo padrão
E-mail – <.input name=email type=email> – Caso opte por validação, automaticamente o browser valida se o valor for um e-mail válido
Data e hora – <.input name=horario type=datetime> – Utilizado para agendamento de eventos, reuniões, etc.
Número – <.input name=numero type=number> – Com os atributos “min” e “Max” é possível entrar com um intervalo de valores possíveis e com o “step” é possível definir o valor para cada incremento
Tempo – <.input name=tempo type=time>
Semana – <.input name=semana type=week>
Slider – <.input name=slider type=range min=2 max=30 step=2 >
Atributo autofocus
Uma boa recomendação para melhorar a acessibilidade e usabilidade de uma página é já deixar o campo principal do cursor selecionado (focus no campo). Normalmente utilizamos a linha de javascript (document.getElementById(’nome_capo’).focus()) para deixar o campo focado.
<.input maxlength=”256″ name=”q” value=”" autofocus>
Validações de Formulários
Não será mais necessário a utilização de javascript para validação de formulários, no HTML5 existe o atributo “required”, que dentro de um elemento input torna o campo obrigatório e transfere para o browser a tarefa da validação do campo.
<.p><.label>Nome: <.input name=name required>
<.p><.label>Tel: <.input name=tel type=tel required>
<.p><.label>E-mail: <.input name=email type=email required>
<.p><.label>URL: <.input name=url type=url required>
<.button>Enviar<./button>
Validação por expressão regular
Além de deixar o campo apenas como obrigatório, é possível colocar um padrão de entrada para aquele determinado campo, que será validado pelo browser.
Por exemplo, em um campo em que só possa entrar valores numéricos com 3 dígitos:
<.input pattern=”[0-9]{3}”
name=”digito”
required
title=”Validação apenas para 3 dígitos”/>
Observe que o atributo pattern aceita expressões regulares.
Validação por range de valores
No tipo de campo “numérico”, é possível fazer uma validação dos valores possíveis de entrada utilizando os atributos min e max.
<.input type=number min=2 max=10 />
Autocomplete
Com HTML5 é simples exibir um input com “autocompletar”, este recurso é bem interessante, pois melhora significativamente a experiência do usuário no preenchimento do formulário – quando bem utilizado.
"
<.label>Homepage: <.input name=hp type=url list=hpurls>
<.datalist id=hpurls>
<.option value=”http://www.uol.com.br/” label=”UOL”>
<./datalist>
"
Novos elementos
O HTML5 inclui novos elementos para melhorar a semântica dos documentos e minimizar o excesso de utilização de DIVS e SPANS (tags sem semântica). Alguns dos novos elementos são:
Header – define o cabeçalho de uma seção
Article – define que o conteúdo é um artigo
Nav – define um menu de navegação
Footer – define um rodapé para a seção
Details – detalhes sobre alguma informação, caso tenha o atributo “open”, exibe o conteúdo, caso contrário esconde.
Figure – conjunto de imagens e legendas
Conclusão:
Em portais e websites de larga audiência, com público variado, ainda é cedo para utilizar HTML5 (sobretudo pelo baixo suporte dos navegores líderes de mercado), porém, em Portais ou Webapplications, cujo o ambiente é conhecido (uma intranet por exemplo), já é possível e recomendado que utilizem os novos recursos.
Porém, antes de utilizar recursos do HTML5, pense exatamente qual será o benefício para o seu usuário, usar por usar apenas pelo hype (e se vangloriar para os amigos que você já utiliza html5), e não pensar na experiência do usuário será um erro.
Ter um bom discernimento de “onde usar” e “quando usar” HTML5 será fundamental para o sucesso do seu projeto.
Os usuários de Internet agradecem!
O Autor
Esta publicação foi feita com base no artigo preparado por Marcelo Linhares. Marcelo é analista de sistemas do UOL HOST.