Olá pessoal!
Vim falar da novidade mais comentada na net: a nova versão do HTML (HyperText Markup Language), o HTML5 que vem causando bastante discussão pela sua real viabilidade e os rumos da internet.
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
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: 300x150px.
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
Concluindo...
Apesar de todas essas novidades a nova versão do HTML ainda está em desenvolvimento e passa por fases de testes e só deve ser finalizada e recomendada por volta de 2013 ou 2014. Porém ela já vem sendo largamente usada pelos webdesigners e grande parte de seu código reconhecido pelas mais novas versões dos browsers mais usados. Mesmo assim antes de qualquer coisa quem for desenvolver seu site deve ter em mente duas premissas:
quem verá o site e o qual o seu conteúdo. Essas duas premissas são de vital importância pois deve-se levar em consideração na hora da implementação do site qual o público alvo do mesmo, pois a maior dificuldade, agora, será se seus usuários utilizarem browsers mais antigos e conexões mais lentas de internet. Se seu grupo de usuários for dos browsers mais novos e conexões melhores ainda sim deve-se conhecer quais versões dos browsers suportam quais funcionalidades da nova linguagem.
Ainda assim o
WHATWG e o W3C incetiva a utilização do HTML5 visando seu desenvolvimento.
Se você deseja saber quais funções e quais navegadores suportam o HTML5 e CSS3 acesse: http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
Bem é isso ai pessoal, espero que tenham gostado e viva a informação livre para todos!
