Na última semana vimos uma enxurrada de notícias e comentários (uns relevantes, outros sem total embasamento) sobre do anúncio da Adobe em por fim ao desenvolvimento do plugin Flash para dispositivos móveis (apenas dispositivos móveis, e não no geral). Realmente, acredito que a Adobe foi sensata na decisão e deva ter seus motivos para isso. Enfim, não vou falar mais acerca disso pois há muitos posts bons que tratam sobre o futuro da plataforma – recomendo este do ASDevs, que é imparcial realista sobre este assunto.

No entanto, quero me ater nesta postagem sobre o hype em torno do HTML5. De uma hora para outra começou a se anunciar que o futuro seria esse padrão aberto, e o Flash, de repente, virou uma coisa imprestável, um lixo, “lento”, “pesado”, uma tecnologia paga (é possível desenvolver usando Flex SDK sem precisar pagar pedágio para Adobe, mas enfim…), entre outras. O Flash virou um novo IE: algo que deveria ser combatido e eliminado, para dar lugar ao futuro maravilhoso e aberto proporcionado pelo HTML5…

Pois bem. É lamentável que muitas críticas, muitas vezes infundadas, tenham ganho espaço. Mas o que se é de lamentar mesmo é que muitos só tenham se prestado a criticar a tecnologia de maneira oportunista, apenas querendo se aproveitar do momento. Cursos, livros e eventos em torno do HTML5 começaram a surgir do nada tratando o padrão como salvação para tudo, em que se pode usar ele em sua plenitude substituindo o Flash (inclusive no IE 8, né?…). Para entender como essa visão é equivocada recomendo este post do blog Mochila Binária.

Não há dúvida de que o HTML5 veio para ficar, mas o que não se pode dizer é que ele está pronto em definitivo para substituir o Flash, como muitos dizem por aí. Só fico chateado de que muitos prefiram especular e acabem difundindo informações errôneas sobre o assunto, fazendo com que muitos que não são da área de Web acabem mal informados, como usuários comuns e pessoas que desejam ter um site – aliás, o que já vem ocorrendo.

SVG

Vejamos por exemplo, o uso de SVG - sigla para Scalable Vectorial Graphics, uma linguagem XML usada para descrever gráficos em vetor, que pretende dispensar o uso de plugins para realização de gráficos e até animações em alta qualidade, usando JavaScript e CSS (se preferir).

Nos navegadores – versões do Internet Explorer (todas anteriores a 8, ou seja, os usados) não “renderizam” nativamente – para isso, é necessário um plugin como o Adobe SVG Viewer. O próximo IE 9 irá suportar. Chrome, Firefox e Opera são capazes de exibir, só que em partes.

O Chrome, graças ao seu potente motor de Javascript (o V8), executa animações bem. Acredito que deverá rodar bem no Safari e iPad, pois, como estes navegadores são baseados na template engine WebKit, então sem problemas. Porém, o mesmo não se pode dizer do Firefox, muito mais popular que o Chrome: ele não suporta todos os recursos pretendidos pelo padrão. Você pode ver isto testando este exemplo, que usa o elemento animation do SVG. Roda em Chrome, mas no Firefox, não.

Aí você vai dizer: basta usar o Javascript para animar em ambos os navegadores. Pois é, mas até na exibição (visual) os navegadores não batem: o Chrome exibe a imagem com fundo branco; o Firefox não. É uma pequena diferença? Sim, mas é uma diferença que faz toda a diferença.

Elemento <canvas>

O elemento canvas, novidade do HTML 5, pretende oferecer o recurso de exibição, edição e até animação de gráficos em duas dimensões e bitmaps. É uma boa. Porém, ainda há diferenças entre os navegadores neste item.

Nos navegadores – Esqueça nas versões antigas do IE (v. 8 e anteriores), que são as mais usadas. Testei no IE 8 e deu pau. Se a versão 9 suportará este elemento é uma incógnita. Há diferenças entre os navegadores também.

Testando o SketchPad, um baita editor de imagens que usa este elemento, notei diferenças entre o Chrome e o Firefox no uso de algumas ferramentas. E rodando este exemplo de “animação-game” (que simula um ambiente em três dimensões), houve diferenças: o Chrome executou fácil; já no Firefox fica uma carroça.

Clique para ampliar.

Nossa, que relevante… são pequenos detalhes. O que você quer dizer com esta postagem?

Lembro que, anos atrás, experimentei usar Javascript com SVG. Leve, rápido, padrão aberto, achava tudo isso demais. O problema era quando tentava executar nos navegadores: os resultados não batiam.

Daí passei a entender a existência de plugins como Flash Player ou Java: eles permitem, mesmo com todos os seus problemas, executar uma animação de maneira igual em todos os navegadores. O que pode ser crucial no caso de um webgame ou aplicativo RIA, por exemplo.

Por isso, teremos que conviver com estes plugins ainda por um bom tempo para lidar com estas diferenças.

Ruim com eles, pior sem eles.

Instalei para testar. Meu micro é um Celeron 1.6 com 1GB de RAM, e placa de vídeo GeForce com 256MB. Sim: preciso, e quero colocar um processador melhor, mas estou com uma má vontade “duca”, e não uso tanto 3D, por isso a placa de vídeo um tanto limitada.Enfim, plugin instalado, fui rodar umas animações um tanto pesadas; mais precisamente, algumas que usam a biblioteca Sandy 3D. Rodei duas que pesavam usando uma versão anterior do Flash Player, mais precisamente a das naves e do chinesinho.

Ao rodar estas animações notei uma certa melhora no desempenho. Antes, elas ficavam muito lentas na execução de certas partes mais pesadas; testando com a versão 10.1, notei que, apesar de ainda estar massacrando um pouco o processador, as animações rodaram com um pouco mais de fluidez. Esta animação com este bonequinho ficava uma carroça no meu PC; com o novo plugin, a animação transcorre com naturalidade.

Isto é bom pelo motivo de que, antes de serem padronizados recursos como o WebGL (para criação de gráficos 3D na Web de maneira aberta) e estarem disponíveis as maravilhas do HTML 5 em todos os navegadores (como o Internet Explorer), já será possível a criação de gráficos de alta qualidade na Web, adiantando um pouco as coisas. O HTML 5 é promissor, porém as coisas ainda não estão bem regularizadas. Ainda é preciso usar o Flash para fazer animações rodarem no IE versão 8 e 7 (e, pelo jeito, na versão 9 também, pois só marca 55 pontos no Acid3, então, sem comentários…).

Enfim, é para se comemorar. Saltos de qualidade são sempre bem-vindos.

Há uma discussão muito pontual. A pontualidade faz parte, não tenha dúvida. Sempre que houve internet existiu o Flash? Não. Mas existe o Flash? Sim. O Adobe Flash continuará a existir? Talvez. É uma discussão pontual? É, mas não é. Por quê? Porque é virtual. (Francisco Prado)

Deixando a brincadeira de lado, acho que a decisão de se querer “matar” o Flash muito precipitada. Muito exagerada. O pessoal que odeia o Flash – o que não é pouca gente – alega que o Flash tem bugs demais, é lento, pesado, fechado e ruim de SEO. Nesses aspectos, eles estão cheios de razão. Isso tudo é verdade.

Porém, não adianta bradar aos quatro ventos sobre as vantagens (enormes) do HTML 5 sobre o Flash. A Microsoft – criadora do Internet Explorer, o navegador mais utilizado no mundo – parece não estar nem aí para o padrão. Se a versão 8 (a mais recente) do IE não consegue nem fazer uma boa pontuação no teste Acid3 (o teste que mensura o quanto um navegador é capaz de “renderizar” nos padrões Web – ele só faz 20 pontos, enquanto o Chrome faz a pontuação máxima: 100) imagine esperá-la lançar uma nova versão que tenha tudo de mais moderno. [[ MOMENTO PARA REFLEXÃO ]]

E por que estou falando no IE? Ora, porque para rodarmos animações nele só através do Flash. E não se pode deixar de lado esse navegador, já que é o mais usado no mundo.

Por isso, acredito que para criarmos os nossos joguinhos, os banners e vídeos do Youtube, e todo o restante de aplicativos ricos (as chamadas RIAs) que podem ser criados com ActionScript e Flex, ainda será necessário que se tenha o plugin do Flash instalado na máquina. E o HMTL 5, com toda a sua potência, fica para mais tarde.

O que acha?

Ano passado foi lançado um padrão chamado WebGL. Ainda em desenvolvimento, esta especificação provê a geração de gráficos 3D dentro de navegadores Web. Mas ele não irá fazer de modo capenga e lento – como é feito em boa parte dos vídeos em Flash, que contam com bibliotecas em ActionScript para criação de ambientes tridimensionais. Ele se aproveitará da placa de vídeo, dando desempenho de game. Sem necessitar a instalação de plugins, ele se utilizará de programação JavaScript (linguagem de programação usada para dar mais “interatividade” ao sites), e de OpenGL (uma API livre usada em computação gráfica e que já vem embutida na maioria dos sistemas operacionais). O grupo de trabalho que o está desenvolvendo inclui pesos pesados da indústria como Opera (navegador), Google, Fundação Mozilla e Apple. Ah, e claro, a Microsoft parece não estar interessada…

Este recurso já é suportado pelas versões mais novas dos navegadores Mozilla Firefox (3.7) e Google Chrome (versão de desenvolvedor), e Safari. Esse recurso usa o elemento Canvas (implementado com a versão HTML 5).

Para você visualizar este recurso nestes navegadores, você precisa fazer algumas configurações (bem simples) em um desses navegadores.

Mesmo ainda não estando plenamente desenvolvido, já há bibliotecas em JavaScript destinadas a facilitar a geração desses gráficos. Veja algumas abaixo:

• GLGE – site contendo vídeos e download da biblioteca. Parece ter poucos tutoriais.
• CopperLicht – esta parece ser bem rica, contendo bastantes recursos. A empresa também oferece um software (pago) para facilitar a criação de projetos. A biblioteca JavaScript é gratuita. Contém alguns tutoriais.
• CD3L – mais outra biblioteca gratuita. Esta parece ter uma série de tutoriais organizados.
• SpiderGL – o site da biblioteca contém bastantes exemplos e bem interativos. Vale a visita.
• SceneJS – mais um site que disponibiliza sua biblioteca. O legal deste é que ele permite que você edite os exemplos (clicando na seção “Playroom”), podendo modificar luz, posição da câmera, entre outros, sem precisar salvar nada (funciona dentro do site) e assim conhecer um pouco da biblioteca.
• WebGLU – outra biblioteca.

Completando a seção de links, veja este site: Learning WebGL (). Ele contém tutoriais ensinando a usar WebGL. Veja também o site oficial do projeto.