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

http://pt.wikipedia.org/wiki/Canvas_(HTML5)

http://pt.wikipedia.org/wiki/Plug-in

WhatsApp Fale comigo!