Animações em HTML5! Será?
Muitos programadores acreditam que o HTML5 veio para revolucionar o desenvolvimento web trazendo um diferencial em relação à sua versão anterior: Ser capaz de fazer animações. É uma pena, mas o HTML5 não faz animações e nem é esse seu objetivo.
O HTML5 é uma linguagem de marcação e não uma linguagem de programação. Por linguagem de marcação deve-se entender como sendo um conjunto de códigos aplicados a um texto ou dados com o objetivo de adicionar informações sobre eles. Além disso, o HTML em si, possui semântica de apresentação, ou seja tem em sua especificação prescreve como o dado estruturado será apresentado no navegador do cliente.
Sendo assim, o que há de tão revolucionário no HTML5?
Com a implementação do HTML5 foi possível adicionar marcadores diferenciados como as tags <video>, <audio>, <header> e principalmente os elementos <canvas>. O canvas nada mais é que um elemento do HTML5 responsável por dizer ao navegador do cliente que aquela área onde o canvas está declarado está reservada para renderização dinâmica de gráficos. Contudo, o canvas em si não faz esse trabalho. O trabalho de renderizar gráficos, ou seja fazer animações, é realizado através de linguagens de programação dinâmica, normalmente javascript. Atualmente o CSS3 tem realizado também um papel importante em animações usando seus novos recursos como as chaves @keyframes.
Antes do HTML5, usando o HTML na versão 4.0 por exemplo, a adição de vídeos, áudios e gráficos em páginas web era uma tarefa bem mais complicada, uma vez que precisávamos contar com recursos extras, plugins, add-ons, outras linguagens, tendo que criar códigos extensos para uma simples adição de um áudio interativo. Com o HTML5 isso ficou mais fácil, já que com a simples declaração da tag áudio <audio> e mais algumas informações adicionais, o navegador já é capaz de entender que trata-se de um áudio e aloca recursos necessários para a apresentação do conteúdo.
Exemplo de uso da tag <audio>:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Áudio em HTML5</title>
</head>
<body>
<audio controls autoplay>
<source src="audio.ogg" />
<!-- Mensagem explicando que o navegador não suporta áudio ou o formato usado. -->
<p>Seu navegador não suporta áudio HTML5 ou o formato Opus.</p>
</audio>
</body>
</html>
Para o caso de renderização gráfica, animações, o exemplo abaixo mostra um uso simples da tag <canvas>:
<canvas id="exemplo" width="200" height="200"> Este texto é exibido caso o navegador não tenha suporte ao Canvas. </canvas>
Contudo, o código acima não é suficiente para a renderização desejada. Deve-se adicionalmente declarar um código javaScript para fazer o trabalho:
var exemplo = document.getElementById( 'exemplo' ),
contexto = exemplo.getContext( '2d' );
contexto.fillStyle = 'red';
contexto.fillRect( 30, 30, 50, 50 );
Com isso, um retângulo vermelho será desenhado na tela. Nesse exemplo, um contexto de duas dimensões foi usado, contudo o HTML5 é capaz de lidar também com contextos em 3 dimensões.
Conclusão
HTML5 puro NÃO faz animações. É necessário o uso de linguagem de programação ou o uso de CSS3 para esse papel. Como linguagem de marcação, o HTML em sua nova versão (5.0) facilita o uso dos recursos multimídia como áudio, vídeo e gráficos. Com marcações mais objetivas o HTML5 é capaz de fornecer informações específicas aos navegadores permitindo-os executar a tarefa de apresentação dos dados de forma mais precisa.
Referências
http://pt.wikipedia.org/wiki/Linguagem_de_marca%C3%A7%C3%A3o
http://www.brunoavila.com.br/avante/html-5/no-se-iluda-html-5-no-faz-animaes.html
http://pt.wikipedia.org/wiki/HTML5
Fale comigo!