Arquivo da categoria: junho, 2010

Gráficos SVG no Internet Explorer usando uma biblioteca JavaScript

Postado em 03/06/2010 in: Dicas & Tutoriais, Padrões Web|1 comentário

É 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

Postado em 28/05/2010 in: Dicas & Tutoriais, Padrões Web|1 comentário

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG - o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
 $(function() {
 // Ao ser carregado, chamará a função draw...
 $('#svgbasics').svg({onLoad: draw});
 });

 function draw (svg) {
 // Desenhando um círculo...
 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});

 // Criando um grupo com duas linhas...
 var g = svg.group({stroke: 'black', 'stroke-width': 2});
 svg.line(g, 15, 75, 135, 75);
 svg.line(g, 75, 15, 75, 135);

 // Desenhando um retângulo que, quando clicado, chama o método alert
 svg.rect(g, 150, 100, 200, 100, 10, 10,
 {fill: 'yellow', stroke: 'navy', strokeWidth: 5, onclick:"alert('Você clicou!')"});
 }

</script>
</head>
<body>
 <h1>jQuery SVG - O Básico</h1>
 <p>Página de exemplo</p>
 <div id="svgbasics"></div>
</body>
</html>

O novo Flash Player vem aí, e muito melhor

Postado em 18/04/2010 in: Colunas|6 comentários

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. Leia mais »

Morte ao Adobe Flash. Ou não.

Postado em 22/02/2010 in: Colunas|4 comentários

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)

Leia mais »

Google Chrome com extensões

Postado em 23/01/2010 in: Dicas & Tutoriais|2 comentários
Ícone - Google Chrome

Í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. Leia mais »