Dicas & Tutoriais · Padrões Web

Gráficos SVG no Internet Explorer usando uma biblioteca JavaScript

É 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. 😉

Dicas & Tutoriais · Padrões Web

Usando jQuery para manipular arquivos SVG

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

[javascript]
<!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>
[/javascript]

ActionScript · Dicas & Tutoriais

Usando SVG através do ActionScript – AS3 SVG Renderer

É 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. Continue reading “Usando SVG através do ActionScript – AS3 SVG Renderer”

Dicas & Tutoriais · Padrões Web

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

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.

[javascript]
<!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 800×600, 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>
[/javascript]

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! 😉

ActionScript · Dicas & Tutoriais

Mais sobre ActionScript 3.0 – programas, bibliotecas e dicas

Para reanimar um pouco este blog vou postar aqui algumas dicas de programas e de bibliotecas para quem programa/quer programar com ActionScript 3.0.

Programas

FlashDevelop – não conheço todas as IDEs para ActionScript, mas acredito que esta seja uma das melhores – senão a melhor. Ela automaticamente importa os packages de classes que você instancia, seu auto-complete é poderosíssimo, além de ser leve e permitir a compilação usando o Flex SDK (para configurar isso veja este tutorial).

Funciona em Windows (não sei se há versão para Mac, e não acredito que rode/possa rodar em Linux, uma vez que ele foi criado sobre o Microsoft .NET Framework – tentei emular e não deu certo).

Ambientes de Desenvolvimento para ActionScript – aqui segue uma lista com outros programas (e seus links) para programar em ActionScript.

Flex SDK – necessário ter caso queira compilar seus programas via FlashDevelop, entre outros. É opensource.

Tutoriais

Wikilivro em português – wikilivro sobre AS 3.0 hospedado no Wikilivros (da Wikipédia).

Tutorial do Mário Santos (em PDF) – parte 1 e parte 2 – talvez os mais populares tutoriais sobre AS 3.0 em português (de Portugal) da Web.

Bibliotecas

Você pode ver uma postagem minha antiga sobre algumas bibliotecas. Há sobre bibliotecas 3D apenas. Aqui vou indicar mais algumas bibliotecas que talvez não sejam tão conhecidas.

AS3ISOlib – biblioteca para geração de gráficos isométricos. A biblioteca é bem fácil de se usar e bem interessante. Ela foi feita para ser usada com o Adobe Flash apenas. Porém, mudando algumas propriedades de umas classes consegui fazer ela ser usada com o FlashDevelop (em outras palavras, mudei os objetos Vector, disponíveis apenas nos Adobe Flash CSx para Array, fácil. 😛 ).

JigLibFlashengine para simulação de física em 3D. Ela é ligada para fazer simulação usando em conjunto a biblioteca Papervision 3D, estritamente – mas há “plugins” para se utilizá-la em conjunto com Away3D, Sandy3D e outras.

O problema dela é esse: você não pode usá-la livremente (sem estar em conjunto com uma biblioteca 3D – você tem que estar atrelado a uma…). Os autores escreveram no blog deles que ainda pretendem mudar a arquitetura da biblioteca a fim de torná-la utilizável por qualquer outro modo – o que é uma boa notícia.

WOW 3D – outra engine de física em 3D. É baseada na APE, uma outra engine porém 2D. Esta aqui usa em conjunto a biblioteca Sandy3D para geração de gráficos 3D, apenas.

Dicas & Tutoriais

Instalando o Ubuntu Linux 9.10 no Windows sem complicação

Muita gente tem curiosidade de conhecer o sistema operacional Linux. Mas, para quem não é muito do ramo, teme ter que lidar com programas complexos, códigos esquisitos e tudo mais. Porém, com o lançamento da versão Ubuntu Linux, a experiência de se utilizar um sistema alternativo se tornou bem mais fácil e simples.

Tudo o que você tem que fazer é baixar o arquivo de imagem (.iso) do Ubuntu e então gravá-la num CD. Você pode rodar o Ubuntu direto do CD: o sistema irá ler o CD e “criará” o Ubuntu na memória do PC. Este método é interessante para quem só quer apenas conhecê-lo; por rodar do CD este método é lento e oferece recursos limitados (fraco desempenho). Continue reading “Instalando o Ubuntu Linux 9.10 no Windows sem complicação”

Dicas & Tutoriais

Programas bárbaros – vol. 2 – PDF, Manutenção e Desenvolvimento

Depois de quase oito meses, resolvi blogar sobre programas novamente. A seguir a lista dedicada à comentar e recomendar alguns programas que podem ser úteis (são para Windows apenas – se houver versões de algum deles para Linux ou Mac, favor comentar). Continue reading “Programas bárbaros – vol. 2 – PDF, Manutenção e Desenvolvimento”

Dicas & Tutoriais

Aí vão uns links cromados – navegador Chrome e Chrome OS

Bom pessoal, nos próximos tempos eu não poderei montar uma postagem mais trabalhada para o blog. No entanto, deixo aqui uns links dedicados ao Chrome (o navegador Chrome e o Chrome OS, o sistema operacional do Google que roda na “nuvem”).

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.
Dicas & Tutoriais

Google Chrome com extensões

Í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. Continue reading “Google Chrome com extensões”