Francisco Prado » plugin

Gráficos SVG no Internet Explorer usando uma biblioteca JavaScript

Francisco — Thu, 03 Jun 2010 14:49:53 +0000

É conhecida a limitação do Internet Explorer no que diz respeito a padrões Web. Uma das mais conhecidas é sobre o suporte à exibição de gráficos vetoriais SVG. No entanto, existe uma biblioteca Javascript chamada svgweb que procura cobrir essa limitação.

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.

Usando jQuery para manipular arquivos SVG

Francisco — Fri, 28 May 2010 14:31:18 +0000

Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

jQuery SVG - o Básico

jQuery SVG - O Básico

Página de exemplo

O novo Flash Player vem aí, e muito melhor

Francisco — Sun, 18 Apr 2010 15:45:52 +0000

Depois de ser acusado de lento, parece que a Adobe resolveu se mexer. Uma nova versão do Flash Player, ainda a ser lançada (versão 10.1 – Release), promete usar bem a placa de vídeo para geração dos gráficos (caso queira fazer o download para testar clique aqui). Isto significa que agora gráficos em 3D e em HD podem ser rodados com melhor desempenho.

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.

Morte ao Adobe Flash. Ou não.

Francisco — Mon, 22 Feb 2010 17:07:59 +0000

Com o surgimento da versão 5 da linguagem HTML muitas dúvidas sobre certas coisas surgiram no ar. Uma delas é sobre o Adobe Flash. Se as inovações pregadas pela HTML 5 pegarem (o que inclui animações, vídeos, sons, e até 3D), o Flash será considerado obsoleto, ultrapassado.

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?

Google Chrome com extensões

Francisco — Sat, 23 Jan 2010 19:00:54 +0000

Í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.