Desde que os navegadores abertos começaram a ganhar mercado, muita coisa evoluiu na forma como desenvolvemos aplicações para internet, sem envolver toda a complexidade que a programação para o desktop vem acumulando para as ideias mais simples. Para colocar certas ideias em prática sem muito esforço, empresas como Google, Mozilla e até a própria Apple (de forma indireta) vêm evangelizando uma sugestão interessante: construí-las na “nuvem”, ou seja, na internet, porém de forma que possam tirar proveito dos padrões web que se popularizaram ao longo dos anos, em vez de render desenvolvedores ao uso de plugins.

Neste ano, novas versões de alguns desses browsers já deram as caras no mercado. Mas juntos, Safari, Chrome, Firefox e Opera estão prontos para encarar a popularização de novos padrões web que estão sendo propagados entre desenvolvedores há um tempo. O que esses padrões sugerem é mais do que apenas tornar a experiência de navegação mais rápida, mas também portar aplicações que antes só ganhariam vida no desktop para a internet, de forma nativa.

Neste artigo, você poderá entender um pouco mais da especificação HTML 5, que oferece padrões empregados recentemente por Apple, Google, Mozilla e outras empresas em seus navegadores, mas dos quais nunca falamos de maneira aprofundada. Apesar das demonstrações simples, tudo que verão pode trazer uma infinidade de possibilidades à web, fundamentando-se basicamente em cinco benefícios.

Hoje falarei de dois, mas se quiser saber mais depois do que lerá e verá, recomendo que assista à keynote de abertura e às demais sessões da Google I/O 2009, que foi fundamentada nesses tópicos. Por ora, vejamos um pouco do que a essas novidades oferecem de bom para nós:

Canvas

Trata-se de um novo elemento que permite ao desenvolvedor definir APIs para gráficos e animações, sem a necessidade de plugins e com ótima precisão. As possibilidades de algo assim acessível em qualquer navegador permitem dar a aplicações web natureza e controle para elementos vetoriais, o que é capaz de dispensar a necessidade de plugins para dar-lhes maior riqueza visual.

À primeira vista suas funções podem parecer simples, mas elas abrem um leque de possibilidades para a web quando combinadas com outras linguagens. Por exemplo: sem Flash ou algo do tipo, você já conseguiu desenhar em um site antes?

Área de desenho à mão livre, desenvolvida com o elemento canvas. Desenvolvido pelo Google, adaptado da Opera Dev Community.

Para construir algo assim em HTML 5, você apenas precisa especificar em seu código a área a ser ocupada pelo elemento canvas, usando em seguida JavaScript para fazê-lo responder de forma básica ao clicar e arrastar o ponteiro do mouse. Assim, você consegue fazer de um retângulo branco na sua página uma área de desenho, que pode apresentar uma infinidade de atributos além do que está ilustrado acima.

<canvas id="imageView" width="768" height="576"></canvas>

O tipo de flexibilidade que esse elemento oferece não o torna apenas útil para trabalhar com gráficos em 2D, mas também produzir pseudo cenas em 3D, que, apesar de parecerem reais, não passam de composições gráficas comuns para o browser. Há cerca de duas décadas, criar uma cena 3D semelhante a Wolfenstein não seria possível fora do desenvolvimento nativo para Windows:

Criador: Jacob Seidelin, Opera Dev Community.

Outra aplicação interessante que merece destaque é o Bespin, IDE de desenvolvimento online produzido pela Mozilla:

Trata-se de algo aberto a todos que só pôde ser construído de forma bem sucedida graças ao controle que o elemento canvas oferece, criando uma experiência de uso relativamente boa, capaz de aumentar a produtividade dos seus usuários. A ferramenta acima ainda não está pronta — note a versão no campo superior direito da página —, mas demonstra enorme potencial com toda essa fidelidade visual.

Video e Audio

Se fomos parar para pensar no que áudio e vídeo se tornaram para internet, bastaria resumir a atuação de sites como YouTube e Last.fm. Mas esses tipos de serviços evoluíram baseando-se no uso de plugins para exibir seu conteúdo para os usuários.

De certa forma, isso não é ruim: 98% dos computadores do mundo todo possuem Flash. No entanto, quem desenvolve para web deveria ser capaz de oferecer esse tipo de conteúdo fora da “prisão” dos plugins, que costuma trazer uma série de implicações que os usuários nem percebem, mas costumam ser o pesadelo para muitos que oferecem um simples vídeo em seus sites.

Os elementos video e audio são capazes de adicionar vídeo e áudio à páginas da mesma forma que imagens: basta apontar onde está o conteúdo e deixar que o navegador faça o resto:

<video src="/demo/video.mp4" autobuffer></video>
<audio src="/demo/audio.mp4" autobuffer></audio>

Mesmo que seu computador não saiba qual é o formato especificado na página, o navegador poderá reproduzi-lo se for capaz disso. Pela especificação HTML 5, todos os browsers devem suportar os mesmos codecs (isso é o “mundo ideal”, claro), mas ainda não sabemos quais serão amplamente adotados. Ogg Vorbis e H.264 são os mais indicados, mas o problema é que o primeiro não é o adotado pela Apple no Safari e o segundo já não é usado pela Opera e pela Mozilla, devido a questões de licenciamento dos codecs. O Google Chrome é o único browser que não passa por esse dilema, suportando os dois formatos.

Mesmo assim, há grandes vantagens em usar esses elementos para inserção de conteúdo multimídia, pois eles podem tirar proveito da aceleração de hardware, dependendo do formato. Já vi um muitas pessoas reclamarem dos gráficos integrados da Intel e até da NVIDIA para assistir a vídeos no YouTube, algo que não se nota ao assistir o mesmo conteúdo no QuickTime Player. Quem sabe, no futuro, elas não terão melhor experiência ao aproveitar o YouTube sem a necessidade de Flash:

Esta demonstração é compatível apenas com o Safari e não está muito otimizada — cuidado ao abrir essa página

Outro grande ponto positivo desses elementos é a chance de combiná-los com outras técnicas nativas da web para obter resultados diversos. Se você visualizou a página acima no Safari, percebeu como os controles do vídeo puderam ser montados usando CSS e JavaScript. Exemplos mais loucos incluem até a possibilidade de rotacionar vídeos no meio da página — novamente, sem a necessidade de nenhum plugin.