Arquivo da categoria: maio, 2010

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>

As novidades do WordPress 3.0

Postado em 17/05/2010 in: Wordpress|1 comentário

Deixo aqui, nesta postagem rápida, o link de um artigo que explica quais serão as novidades da versão 3.0 do WordPress.

Dentre as novidades, o sistema ganhará encurtador de URL embutido, além de templates específicos para autores diferentes, entre outras.

Para quem não sabe, o WordPress é um sistema gerenciador de conteúdo (CMS) gratuito, inicialmente voltado para criação de blogs, mas que, com o tempo, recebeu vários plugins que tornaram possível seu uso para criação de sites de notícias, lojas virtuais, fóruns e até redes sociais. Dentre as vantagens deste CMS para outros, podemos citar que ele é mais leve e melhor para otimização do site para os buscadores (SEO) do que gerenciadores concorrentes, como o Joomla.

Usando SVG através do ActionScript – AS3 SVG Renderer

Postado em 09/05/2010 in: ActionScript, Dicas & Tutoriais|4 comentários

É possível carregar arquivos gráficos SVG (formato de arquivos de desenho em vetor, organizados em modo XML) através do ActionScript como se fossem Sprites.

A biblioteca AS3 SVG Renderer suporta boa parte dos recursos oferecidos pela linguagem SVG. Criada por um brasileiro (veja o blog), ela ainda não suporta o carregamento de arquivos de imagem (como JPEG, PNG, etc., um recurso disponível no SVG), o que não chega a atrapalhar em nada (haja vista que é possível carregar Bitmaps usando classes nativas do ActionScript). Muitos outros recursos estão disponíveis (desenhos de formas, linhas, transformações como rotação e inclinação, entre outros).

O uso da biblioteca é muito simples: basta carregar o arquivo como se fosse um XML, usando o package do ActionScript. O programa Adobe Flash torna-se dispensável.

O exemplo a seguir carrega e exibe um SVG carregado a partir de uma URL qualquer. Leia mais »

Usando Raphaël para geração de SVG através de Javascript

Postado em 02/05/2010 in: Dicas & Tutoriais, Padrões Web|3 comentários

Neste post irei abordar como usar a biblioteca Raphaël para a geração de gráficos vetoriais em SVG, usando apenas Javascript. Vale lembrar que, apesar de ser uma maneira aberta de se gerar gráficos em vetor, o uso de SVG não está disponível para navegadores como Internet Explorer 8 e versões anteriores, além de “renderizar” de maneiras um pouco distintas em navegadores como Chrome, Firefox e Opera.

Para usar esta biblioteca, é necessário que você baixe o arquivo Javascript no site oficial do projeto. Há um plugin para esta biblioteca destinado à geração de gráficos. A documentação é bem direta e completa, o que facilita muito o aprendizado, contendo a explicação dos seus métodos.

Veja o exemplo a seguir. Repare que o arquivo Javascript de Raphaël está no mesmo local do arquivo HTML e que não usamos nada de HTML e CSS na geração dos gráficos – apesar do SVG permitir formatação via folha de estilos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Raphaël - Modo de usar</title>
    <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
			// Cria um painel do tamanho 800x600, na posição x=50 e y=50
			var paper = Raphael(50, 50, 800, 600);

			// Círculo na posição x=50, y=40 e com 10 de raio
			var circle = paper.circle(50, 40, 10);
			// Define o preenchimento do círculo em vermelho
			circle.attr("fill", "#f00");

			// Define a linha de contorno como branca
			circle.attr("stroke", "#fff");

			// -------------------------

			// Criação de um retângulo
			var rectangle = paper.rect(100,50,100,100,0);

			// Definindo vários atributos de uma só vez
			rectangle.attr({
				"fill": "#00f",
				"stroke": "#0f0"
			});

			// Rotacioando o objeto
			rectangle.rotate(45);

	};
    </script>
</head>
<body>

</body>
</html>

Este código irá gerar um painel SVG (paper), criará um círculo vermelho (circle) e um retângulo azul rotacionado em 45 graus (rectangle).

Raphaël - resultado do exemplo

Resultado do exemplo.

Espero ter ajudado. Até a próxima! ;-)