Conheça o HTML5

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

 tecnologia como o Youtube e este site da Microsoft.

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>

Veja exemplo aqui.

“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

.:DIRETO DA FONTE:.

Posted in: TUTORIAIS