Introdução ao HTML 5 | Thiago Galbiatti Vespa

O HTML 5 é a nova especificação de HTML, XHTML e DOM que está sendo feita em conjunto pela World Wide Web Consortium (W3C) e Web Hypertext Application Technology Working Group (WHATWG). Ainda está em progresso, mas alguns browsers já possuem suporte parcial à essa especificação, como as últimas versões do Firefox, Chrome, Opera, Safari e Internet Explorer 9.

Essa especificação possui algumas características interessantes, como a redução da necessidade de plugins externos com o uso de tags de vídeo, áudio e desenho (canvas) já embutidas na especificação, armazenamento offline, além de novas tags específicas para conteúdo como article, footer, header, nav, section e entrada de dados de calendário, data, hora, e-mail URL, busca.

Para estrutura melhor o conteúdo foram criados os seguintes elementos:

<article> - Utilizado para conteúdos externos, como por exemplo, blog, forum, notícias;
<aside> - Para conteúdo que adicional e relacionado (interno) à outro conteúdo;
<command> - Botão, radio ou checkbox;
<details> - Descrição de detalhes ou partes de um documento;
<summary> - Legenda ou sumário interno ao detalhe;
<figure> - Conteúdo periférico com legenda;
<figcaption> - Legenda da seção figure;
<footer> - Rodapé de um documento ou seção, pode conter nome do autor, data do documento, informação de contato, copyright;
<header> - Introdução de um documento ou seção, pode incluir navegação (nav);
<hgroup> - Seção de agrupamento de elementos de headings: <h1>, ..., <h6>;
<mark> - Para textos que devem ser destacados;
<meter> - Para medidas, utilizada somente quando é conhecido o valor máximo e mínimo;
<nav> - Seção para navegação;
<progress> - Indicador de progresso;
<ruby> - Ruby annotation;
<rt> - Descrição da ruby annotation;
<rp> - Conteúdo a ser exibido se o browser não tiver suporte ao ruby annotation;
<section> - Para uma seção em um documento como por exemplo capítulos;
<time> - Para definir uma data, hora ou as duas;
<wbr> - Quebra de linha;

Elementos de mídia:

<audio> - Para sons, música ou streams de áudio;
<video> - Para clips ou streams de vídeos;
<source> - Recursos de midia definidos dentro de um elemento de vídeo ou áudio;
<embed> - Conteúdo interno: plugins;

Elemento de desenho:

<canvas> - Para desenhar gráficos com script;

Elementos de formulário:

<datalist> - Lista de elementos para selecionar;
<keygen> - Gera chaves para usuários autenticados;
<output> - Para tipos diferentes de saída, como saídas feitas por javascript;

Elementos input type="?????":

tel - Valor de número de telefone;
search - Campo para busca;
url - Valor de URL;
email - Valor de e-mail;
datetime - Data e hora;
date - Data;
month - Mês;
week - Semana;
time - Hora;
datetime-local - Valor local de data e hora;
number - Valor numérico;
range - Intervalor número;
color - Cor em valor hexadecimal;

Exemplos

Caso queira obter detalhes sobre os atributos necessários e mais informações, consulte a especificação: http://www.w3.org/TR/html5/.

Para colocar um vídeo é só inserir a tag vídeo com o atributo src apontando para um vídeo do tipo ogg ou mpeg4. Como no exemplo abaixo:

<video width="400" height="300" controls="controls">
 <source src="video.ogg" type="video/ogg" />
 <source src="video.mp4" type="video/mp4" />
 Browser sem suporte ao elemento de vídeo.
</video>

Caso o browser não tenha suporte a ogg, ele irá tocar o mp4 e se mesmo assim não tiver suporte ele irá mostrar o conteúdo "Browser sem suporte ao elemento de vídeo". Para tocar uma música o procedimento é semelhante, bastanto utilizar a tag audio, que deve ser no formato ogg, mp3 ou wav.

<audio controls="controls">
 <source src="musica.ogg" type="audio/ogg" />
 <source src="musica.mp3" type="audio/mpeg" />
 Browser sem suporte ao elemento de áudio.
</audio>

Outro recurso interessante e poderoso é o canvas, que possibilita desenhar utilizando javascript. Para criar um canvas basta utilizar a tag <canvas> por exemplo.

<canvas id="exemploCanvas" width="200" height="200"></canvas>

Aí é só desenhar com javascript:

<script type="text/javascript">
 var c=document.getElementById("exemploCanvas");
 var cxt=c.getContext("2d");
 cxt.fillStyle="#00FF00";
 cxt.fillRect(50,20,100,75);
</script>

Existem vários outros recursos interessantes, como armazenagem web (estilo cookie) e vários tipos input diferentes, mas ainda poucos browsers oferecem suporte à esses novos inputs, com exceção do Opera.
Para visualizar alguns desses recursos do HTML5, é só acessar o site do meu filho e visualizar o código fonte: http://daniel-vespa.appspot.com
Em breve novos posts utilizando HTML5. Esse é só o começo :)...

Share on Facebook

Google+

Exemplos

Sobre: Thiago Galbiatti Vespa

Profile cancel