HTML5 é a nova versão do HTML, tecnologia utilizada para fazer as páginas web.
Ela tem suporte a automatização de áudio, vídeo e renderização de gráficos, tudo
nativo no browser, diminuindo a necessidade da utilização de plugins como o Flash.
Hoje em dia os browsers já suportam a maioria das novidades do HTML5, porém
a versão final está prometida para 2012. Alguns sites já estão utilizando a nova
Veja algumas das principais novidades do HTML5 abaixo:
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.
Edição de textos em tempo real
Esse recurso 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”>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
- Validação pronta com tipos de textos pré-definidos
Ex:numeric step, tempo e slider
- Marcação de campos obrigatórios com o atributo required
- Validação com expressão regular
- Autocompletar
Novas regiões de texto
São áreas pré-definidas de texto, evitando a necessidade do uso de várias
divs e spans, além disso, vão otimizar o site em sistemas de buscas, já que
o robô terá foco nessas áreas específicas.
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.
Aside – menu ou área de informação no canto direito do site.
Elementos de Mídia
| <audio> | Para conteúdo multimídia, sons, músicas ou outros áudio |
| <video> | Para ver o conteúdo de vídeo, como um clipe de filme ou vídeo de outros fluxos |
| <source> | Por meios de comunicação social para os elementos de mídia, definida dentro de elementos de áudio ou vídeo |
| <embed> | Para o conteúdo incorporado, como um plug-in |
