sexta-feira, 3 de setembro de 2010

Novidades do HTML5

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

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:

<!DOCTYPE Html>

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</p>

"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 sera 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></label></p>
<p><label>Tel: <input name=tel type=tel required></label></p>
<p><label>E-mail: <input name=email type=email required></label></p>
<p><label>URL: <input name=url type=url required></label></p>

<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></label>
<datalist id=hpurls>
<option value="http://www.uol.com.br/" label="UOL">
<option value="http://www.uolhost.com.br/" label="UOL HOST - Sensacional">
<option value="http://www.metadeideal.com.br/" label="Metade Ideal">
</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!
 
FONTE: http://blog.uolhost.com.br/2010/05/11/novidades-do-html5/

0 comentários:

Postar um comentário

Proibido palavras ofensivas, racistas ou descriminatórias.

[Seu Comentário será liberado no máximo em 24horas]