HTML5
html5logo.gif

Sumário

Introdução

O HTML5 foi criado pelo WHATWG (Web Hypertext Application Tecnhology Working Group), um grupo formado por programadores de diversas empresas, como Opera, Mozilla e Apple, que estavam descontentes com o rumo que a W3C estava a dar ao XHTML.
A proposta do HTML5 é ser uma linguagem mais bem preparada para construção de aplicações WEB, bem como ser independente de plugins, além de ter novos elementos que dão mais semântica ao conteúdo.
Actualmente o WHATWG e o W3C trabalham em conjunto no desenvolvimento do HTML5.
Embora a versão final do HTML5 esteja previsto para 2012, muitos browsers já suportam algumas das novidades do HTML5.
O HTML 5 começou a ser escrito em 2003 e é uma evolução do HTML 4.0 uma linguagem que ficou uma década sem actualização.
O objectivo do HTML 5 é criar padrões de estrutura da página, organizar e assim facilitar principalmente o trabalho de programas como por exemplo os Bots que rastreiam e catalogam informações para os motores de busca. Melhorar a interactividade e aumenta a riqueza de recursos nativos dos browsers como: animações, vídeos, áudio e aplicações com muita interacção dos utilizadores, como jogos e sistemas complexos

História do HTML

Princípios do HTML5

A visão delineada do HTML5 assenta num conjunto de vários princípios. Sendo que o primeiro e principal objectivo, é manter a convivência e compatibilidade com as versões anteriores uma vez que nem todas as páginas que foram até hoje desenvolvidas respeitaram as regras definidas ao longo dos últimos 20 anos. Os browsers têm assumido os erros de semântica do HTML e interpretam o código das páginas mostrando o seu conteúdo quer exista erros ou não. Desta forma não é possível a curto ou a médio prazo obrigar que toda a semântica de HTML existente na Web passe rapidamente a seguir o novo padrão de regras definidas nesta ultima versão.
Outro dos princípios seguidos consistiu em melhorar o suporte da separação entre conteúdo e apresentação. Como por exemplo o autor das páginas HTML deve de recorrer a elementos para definir conteúdos e definir o aspecto gráfico desses elementos através da utilização de CSS.
A simplificação da sintaxe do HTML foi outra das preocupações delineadas nesta nova versão. Foram também introduzidos novos elementos semânticos com o objectivo de facilitar o trabalho aos autores das páginas.
Por último o acesso universal foi outro dos objectivos do grupo de trabalho do html5 que trabalhou em conjunto com outros grupos para suportar a acessibilidade com o objectivo de facilitar o acesso a informação aos utilizadores com deficiências e para além disso tentaram também garantir o correcto processamento de páginas HTML em diferentes plataformas e dispositivos.

Exemplo de uma página em HTML5:

<!DOCTYPE html>
<html>
<head>
    <title>Olá Mundo em HTML5</title>
</head>
 
<body>
    <h1>página de HTML5</h1>
    <p>Elemento de exemplo paragrafo</p>
</body>
</html>

Todas as páginas de HTML5 devem usar a instrução de processamento DOCTYPE semelhante a anterior para indicarem a página deve ser processada segundo as regras do html5.

História da instrução do DOCTYPE.
Reza a “lenda” que durante o desenvolvimento do IE5 a Microsoft deparou-se com um problema. As alterações efectuadas na nova versão do browser tinham de facto melhorado a compatibilidade com o HTML, no entanto às páginas antigas deixaram de ser renderizadas correctamente. O problema não era do browser mas sim o facto das páginas antigas terem sido construídas de forma incorrecta. No entanto com o IE4 era possível renderizar estas páginas correctamente ou seja o browser admitia os erros na semântica das páginas, e esse era o comportamento que todos esperavam que o IE5 tivesse. Como ninguém iria querer refazer milhares de páginas em HTML que tinham sido construídas de forma incorrecta a Microsoft lembrou-se de utilizar a instrução DOCTYPE para definir que tipo de processamento iria aplicar a uma página. Desta forma o browser tentava sempre em primeiro lugar, encontrar a instrução DOCTYPE que deveria estar logo no início do código. Caso a instrução não fosse encontrada a página seria tratada como quirks mode ou seja processada como no IE4, por outro lado se a instrução fosse encontrada a página seria tratada como modo standard, de acordo com as regras definidas. A ideia acabou por ser reutilizada por outros browsers.

Nova Semântica

Estrutura

Canvas

Até agora a renderização avançada de gráficos obrigava a que o HTML utiliza-se plugins como por exemplo flash, silverlight etc. Com o HTML5 é introduzido um novo elemento designado por canvas que dispensa desta forma a utilização de plugins para executar operações gráficas.

O elemento canvas é definido como um bitmap que fornece uma superfície que serve para renderizar gráficos on the fly. No entanto o facto deste elemento recorrer a um bitmap faz com que os seus conteúdos não possam ser redimensionados da mesma forma que uma imagem vectorial.
Actualmente este elemento suporta apenas operações realizadas em 2D apesar de já existir alguns browsers que iniciaram experiencias em 3D.

No fundo a utilização do canvas permite introduzir uma área rectangular numa página que por omissão reserva uma área de 300x150 pixéis e que através do javascript torna-se possível desenhar gráficos, imagens, gradientes e texto.

<canvas id="myCanvas" width="200" height="100"></canvas>

Conforme indicado anteriormente o javascript pode ser utilizado para desenhar o conteúdo deste elemento em seguida temos um exemplo que ilustra esta funcionalidade através da utilização de coordenadas.

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
 
<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
 
</script>
 
</body>
</html>

Vídeo e áudio

Formulários Web

Web Storage

O web storage implementado no HTML5 oferece a possibilidade de guardar informações do lado do cliente, anteriormente este mecanismo só era possível através da utilização de cookies. No entanto a utilização de cookies tinha diversas desvantagens em primeiro lugar só permitia guardar blocos de informação até 4kb e em segundo lugar essa informação era enviada constantemente em todos os pedidos de HTTP introduzindo alguns atrasos na comunicação.
O HTML5 tenta resolver estes problemas através do armazenamento de dados na máquina do utilizador, cada domínio pode conter cerca de 5MB e os dados não são enviados pelos pedidos de HTTP efectuados pelo browser a não ser que sejam dadas instruções especificas.

Em seguida um exemplo de como criar a aceder ao LocalStorage:

<!DOCTYPE html>
<html>
<body>
 
<script type="text/javascript">
 
localStorage.lastname="STI";
document.write("Last name: " + localStorage.lastname);
 
</script>
 
</body>
</html>

A funcionalidade localStorage permite uma longevidade da informação do lado do cliente ilimitada.
Existe tambem outra funcionalidade que pode ser utilizada com um tempo de vida limitado. Esta funcionalidade é a SessionStorage. Em seguida deixamos um exemplo:

<!DOCTYPE html>
<html>
<body>
 
<script type="text/javascript">
 
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
 
</script>
 
</body>
</html>

Web Sockets

O refrescamento dos dados é uma necessidade de muitas aplicações. As soluções que têm sido utilizadas até gora foram os métodos polling e pushing. O modelo polling consiste em gerar pedidos HTTP em intervalos de tempo predefinidos e o modelo push envia dados do servidor para o cliente e funciona apenas neste sentido. Os Web Sockets desenvolvidos para o HTML5 permitem estabelecer um canal de comunicação bidireccional com uma entidade remota para suportar a troca de informação nos dois sentidos e em tempo real.

Casos de Estudo

Adobe Admite: "Apple Won, Flash For Mobile is Done, HTML5 is the Future"

Após a Adobe anunciar que o Flash Player 11.1 poderá ser a última versão do Flash para browsers em dispositivos móveis, Mike Chambers, chefe dos programadores da Adobe, publicou uma explicação sobre o motivo que levou a empresa a tomar esta decisão. "A decisão é parte de uma grande mudança estratégica da Adobe", escreveu Chambers. "Uma dessas mudanças é focar-nos no HTML5, assim como no Adobe Creative Cloud e nos serviços que ele pode providenciar". 

Mike Chambers listq ainda cinco razões principais que levaram a empresa a decidir-se por esse caminho:

  • O Flash nunca ganhará muita visibilidade em dispositivos móveis, já que a Apple não quis adoptar a tecnologia nem no iPhone nem no iPad. "Não importa o que fizéssemos, o Flash nunca estaria disponível no iOS da Apple".
  • Entretanto, o HTML5 é omnipresente. "Em dispositivos móveis, o HTML5 oferece um nível similar de presença que o Flash Player oferece ao desktop", afirmou.
  • Os utilizadores não costumam visualizar conteúdo em aparelhos móveis da mesma forma que o fazem em desktops. As diferenças nos tamanhos dos ecrãs, os problemas com as redes sem fio e a disseminação das lojas de aplicativos fizeram do Flash irrelevante em dispositivos móveis.
  • Desenvolver plugins para dispositivos móveis é um desafio maior do que para desktops. Pois isso requer mais parcerias com programadores de sistemas operativos, de hardware para dispositivos móveis e de componentes manufacturados. "Desenvolver o Flash Player para mobile mostrou que é preciso muito mais recursos do que imaginávamos", admitiu.
  • A Adobe quis alocar mais recursos para HTML5, sendo que ao deixar de desenvolver o Flash para dispositivos móveis vai permitir isso mesmo.Depois, Chambers assegurou aos programadores que o Flash está saudável, e explicou que a Adobe tem um compromisso a longo prazo com o Flash Player para desktops, e que tem como foco permitir aos programadores criarem aplicativos móveis através da plataforma Adobe AIR.

Ao final, Chambers disse que cada vez mais o HTML5 vai substituir as funcionalidades do Flash. "Se um recurso Flash é bem-sucedido, ele será integrado no browser, e os programadores e utilizadores vão usá-lo cada vez mais pelo browser, e não pelo Flash". "Muitas das coisas que no passado já foram feitas usando o Flash, serão cada vez mais feitas usando com HTML5 e CSS3 directamente no browser", concluiu

O HTML5 está a ganhar cada vez mais espaço

54% dos vídeos publicados na internet já estão disponíveis em formato HTML5 de acordo com a MeFeedia. Para além disso novas ferramentas de edição para HTML5 foram anunciadas pela Adobe e Sencha,o que revela que o HTML5 está a ganhar terreno.

A MeFeedia, um portal de vídeos online, conduziu um estudo para descobrir qual a quantidade de conteúdo feito em HTML5 que existia no seu portal. Possuindo um índice com milhões de vídeos e mais de 33,000 publicadores, o estudo concluiu que o conteúdo de vídeo online disponível em HTML5 duplicou nos últimos 5 meses passou de 26% para 54% e cresceu 5 vezes desde o começo do ano, quando na altura apenas possuía 10%. O crescimento é dirigido por dispositivos móveis. O Flash ainda é o player escolhido para desktop. Outra conclusão obtida foi que a maioria dos websites oferecem vídeos em HTML5 e também em Flash, e o formato apropriado é escolhido baseado no dispositivo que está no momento a aceder ao vídeo.
Ao mesmo tempo, novos editores visuais para HTML5 são anunciados. Um deles é o Edge da Adobe, uma ferramenta de protótipo destinada a utilizadores do Photoshop, Illustrator e do Flash Pro que têm a intenção de criar animações em HTML5. A Adobe é a empresa que foi mais afectada pelo padrão HTML5, e depois de um tempo em que se opôs ao HTML5, agora é líder quando se trata de ferramentas de edição para HTML5.
Outra ferramenta que foi lançada recentemente é a Sencha Animator, um editor para designers interactivos que estão interessados em criar animações em HTML5. O Animator foi criado com o Ext JS, uma biblioteca JavaScript cross-browser que provê widgets para aplicações RIA, e que gera animações puras em CSS3 essas por sua vez podem ser integradas em qualquer outra biblioteca JS. Podem ser criados objectos 2D ou 3D, mover, aumentar, torcer e rodar, adicionar efeitos como gradient, blur, reflexos e sombras. O código por ser acelerado pelo hardware da Apple IOS criando animações mais suaves.
A quantidade de conteúdo HTML5 presente na web e as novas ferramentas, especialmente as desenvolvidas pela Adobe, empresa por trás do Flash, mostra que o HTML5 está cada vez mais a ganhar espaço

Considerações Finais

David Lima
Sérgio Floriano
Paulo Martinho

W3C HTML5