Clique para ampliar

Essa idéia não é original: criar um arquivo que permita testar códigos PHP dentro do browser, no melhor estilo “linha de comando” de linguagens como Python, sendo que uma área de texto fique de um lado e o resultado seja exibido do outro. Uma vez peguei na comunidade de PHP no Orkut um programa PHP que fazia isso.

Como fico enferrujado em programação do PHP com o tempo, preciso treinar constantemente. Precisando dele, fui buscar no Google, mas não o encontrei. O jeito foi bolar um, que disponibilizo aqui para download.

O arquivo RAR para download consiste no arquivo PHP que faz todo o trabalho de execução do código, e dois arquivos JavaScript (um é o jQuery) que adicionam um recurso de numeração ao código; assim você fica sabendo em que linha ocorreu o erro do código, por exemplo. Os arquivos JS são dispensáveis: se você quiser retirá-los, vá em frente.

Linkando a biblioteca a um arquivo ela substituirá a parte em SVG (que é suportada pelos outros navegadores populares, como Firefox, Chrome e Opera) por um arquivo em Flash, que irá exibir praticamente a mesma coisa. Em outras palavras: se a biblioteca reconhecer que o navegador suporta SVG, ela não fará nada, apenas deixa o SVG ser exibido normalmente; se ele perceber que é o IE 8 e anteriores (que não suportam SVG) que o usuário está usando ele irá substituir por um arquivo em Flash que exibirá o arquivo SVG, com todos as suas configurações, como animação e interatividade.

Testei alguns exemplos e achei bem interessante. Ainda não testei na minha máquina, e sim apenas os exemplos fornecidos no site do projeto, e cumpriu bem a tarefa.

Trata-se de uma solução interessante. O iPad, por exemplo, suporta SVG, mas não animações em Flash; já o IE é o contrário. Usando essa biblioteca podemos programar apenas uma vez (SVG com JavaScript) e rodar em qualquer navegador.

Fica a dica.

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.

Google Chrome (navegador)

• Chrome 5 dev (versão de desenvolvedor) (link para versão para Windows): esta versão foi liberada pelo Google, mas ainda não é a chamada versão “estável”. No entanto, é muito mais bacana que a versão 4, pois já conta com boas mudanças, como o suporte a add-ons Greasemonkey, que são criados para Firefox, mas agora o Chrome 5 consegue rodar (veja o último tópico). Só uma porcentagem deles funciona, pois foram feitos para o Firefox, mas mesmo assim já é mais um golpe no navegador da raposa. Só clicar em “Instalar” na página e pronto.
• 15 extensões de Google Chrome para desenvolvimento Web (em inglês): links e comentários a respeito de plugins (para SEO, debug, etc.) para auxiliar no desenvolvimento de sites pelo Chrome.
• Criando extensões para Chrome (em inglês): tutorial do Google – e parece bem completo – dedicado a ensinar a criar uma extensão para o browser. Basta saber desenvolver em JavaScript, CSS e HTML.
• Usando extensões do Firefox no Chrome 5 dev: como citado no primeiro tópico, a versão de desenvolvedor suporta scripts Greasemonkey, extensões que servem para dar ainda mais funcionalidades para o navegador. Só alguns rodam em Chrome. Para instalar é só selecionar a extensão e clicar em “Install”. Não é necessário reiniciar o navegador.

Chrome OS (sistema operacional)

• Experimentando o Chrome OS: postagem do site Superdownloads ensinando a você como experimentar o sistema operacional do Google sem esquentar muito a cabeça, rodando ele através de uma máquina virtual.

Ícone do navegador Google Chrome (fonte: Blogs - Diário de Pernambuco)

Não são só os navegadores Mozilla Firefox e o Opera que suportam complementos (ou extensões, ou ainda “plugins”). O Google Chrome passou a suportar complementos com a versão 4. É a versão 4 que suporta extensões (as outras, não).

Muitos complementos ainda não têm a diversidade nem a qualidade das extensões disponíveis para Firefox. Mas nem por isso é possível deixar de experimentar as extensões do Chrome, bem mais leves (assim como o próprio navegador) do que a de seus concorrentes.

O Google Chrome é um navegador opensource rápido, leve, que respeita bem os padrões Web (assim como já dá bom suporte para a nova versão da HTML), suporta temas e trava muito pouco. Apesar de pouca gente saber, também tem campo de busca: basta digitar um site acessado anteriormente (Wikipédia, por exemplo) e apertar “Tab” que ele fará uma busca como se estivesse usando o formulário de busca do site. Para manejar os mecanismos, clique com o botão direito do mouse na barra de endereços e clique em “Editar mecanismos de pesquisa…”.

Abaixo, indicarei umas extensões que testei nestes últimos tempos. Há várias, mas estas são as que conheço relativamente bem:

• SmoothScroll – deixa a rolagem das barras do navegador suaves (semelhante à rolagem do Opera). Funciona bem.
• BubbleTranslate – tradutor de textos que usa o Google Tradutor. Basta selecionar o texto (segurando a tecla Control) da página e ele põe um balãozinho em separado por cima da seleção, exibindo a tradução. Muito legal, recomendo.
• Chromed Bird – cliente Twitter, muito semelhante ao Echofon (do Firefox). Compacta URLs, suporta listas, botões Retweet tradicional e novo, entre outros. É meio chato para logar de vez em quando, mas é ótimo mesmo assim.
• Delicious Tools – extensão para gerenciar seus favoritos do Del.icio.us. Funciona muito bem. Não é tão bacana quanto o seu equivalente do Firefox, mas mesmo assim é tão prático e fácil quanto.
• Firebug Lite – não chega aos pés do Firebug do Firefox. Para quem trampa com web design, segue aqui a dica que existe extensões para esse tipo de coisa. Recomendo também uma olhada no Web Developer Mini, que facilita o teste de uma página, se está de acordo com os padrões HTML e CSS recomendados (realiza o teste do site da W3C em um clique).

Mas existem muitas outras extensões. Para buscar mais componentes, recomendo estes sites:

• Google Chrome Extensions (“oficial”) - site do Google que serve de repositório de extensões.
• Chrome Extensions – site mais antigo relativo à extensões para o browser. Visual muito mais agradável e melhor para navegar.

E claro, vou deixar claro aqui: não estou em serviço do Google fazendo propaganda do navegador. Só gostaria de falar a respeito desse recurso por ser ainda muito pouco conhecido do grande público em geral. Espero que tenham gostado da postagem.

* Nota: o Google acabou de liberar a versão final/estável do Chrome 4 dia 25/01/2009 para Windows. Segue o link para o download.