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

Opinião

Padrões Web – os resultados não combinam entre os navegadores

Deve-se reconhecer que os plugins são necessários (em muitos casos) quando se está criando para a Web. Já existem padrões Web (pela W3C) que oferecem recursos destinados à criação de gráficos e animações; porém seus usos esbarram na deficiência de muitos navegadores em suportar os mesmos. Abaixo, seguem exemplos de algumas questões.

Opinião

O novo Flash Player vem aí, e muito melhor

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.

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.

Opinião

O lado bom das redes sociais

Lixo na lixeira
Lugar de lixo é na lixeira.

Quando alguém quer depreciar a internet o indivíduo se utiliza, muitas das vezes, das redes sociais como exemplo. Sites como Orkut, Facebook, YouTube – há quem considere-a uma rede social -, e Twitter (sendo este último mais um microblogging do que rede social), um antro de futilidade, de perda de tempo.

Porém, as pessoas sempre pegam mais os lados negativos do que os positivos. Não há dúvidas que há muita bobagem na internet, o que, aliás, lança a questão: o que pode ser considerado fútil? Um blog em que um adolescente fala de sua vida pessoal? Sim, isto pode ser fútil de fato, assim como não ser, uma vez que o ato de escrever treina a criatividade e o raciocínio…

Bancando o advogado de defesa, este meu post pretende mostrar o “lado bom” desses sites chamados de “redes sociais”. A seguir:

  • Orkut/Facebook – além do chamado networking, é possível usar os fóruns (ou comunidades, no caso) para aprendizado e troca de informações. Além disso, existem redes específicas para divulgação de currículo – é o caso do LinkedIn.
  • Flickr – para quem não manja muito (ou não gosta) de blogs este site de fotos é uma boa para quebrar o galho e abrigar portfólio de designers e fotógrafos.
  • Twitter – excelente para divulgação de novidades. Como há o limite de 140 caracteres e é fácil obter uma razoável popularidade, o serviço de microblogging é útil quando queremos compartilhar links de sites e dicas.
  • Blogger/Wordpress – blogs grátis também são uma boa para divulgar novidades e exibir portfólio. É claro que dá para fazer muito mais com alguma criatividade, como gente que, buscando uma vaga de trabalho, lança mão de um blog para mostrar sua personalidade e conhecimento.

Enfim, não dá para ver só o lado obscuro da internet. Os sites estão aí para você fazer uso deles da maneira como você achar melhor. O excesso de inutilidade encontrado é fruto da liberdade que só a Web disponibiliza. É uma questão de se separar o joio do trigo.

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

Opinião

Morte ao Adobe Flash. Ou não.

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)

Opinião

3D no navegador – WebGL e JavaScript

Parece lance de futurologia, mas não é. O dia em que poderemos ter games em 3D, navegar por espaços em 3D e outras coisas (que precisem usar 3D) dentro do navegador (sem precisar baixar programas ou plugins) está bem próximo. E sem uso de Flash.

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.

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

Os E-readers nacionais

Muito se fala no Kindle, e muita gente considera o recém-lançado iPad, da Apple, como um novo e-reader – sendo que, na realidade, trata-se de um tablet, que está mais para um misto de iPhone e notebook do que para um leitor digital propriamente dito.

E-reader é como chamam esses aparelhos que se destinam a facilitar a leitura de e-books/ebook (livros digitais que podem estar em formato PDF, etc.) e se utilizam de uma tecnologia chamada E-Ink, um recurso diferente dos tradicionais LED e CRT e que procura simular a tinta do papel, fazendo assim que se canse bem menos a vista do que se lendo por um monitor de computador. Sem falar, é claro, na praticidade: é possível levar uma biblioteca inteira na memória, baixar conteúdo pela internet, e muitos outros.

ActionScript

XML e Texto no ActionScript 3.0 – Tutoriais

Segue as dicas dos artigos (90% completos) sobre uso de campos de texto no AS 3.0 e uso de XML.

Estou sem postagem séria no momento e não rascunhei nada. Mas esses artigos, ainda a serem completados, já contêm bastante coteúdo.

O artigo sobre campos de texto já tem quase tudo a respeito sobre o assunto, com exceção ao uso de formatação com HTML e CSS (a ser inserido).

O sobre XML, mais completo, ainda não tem conteúdo a respeito da remoção e inserção de elementos e envio de dados. De todo resto, está completo.

O endereço do wikilivro é este aqui: http://pt.wikibooks.org/wiki/ActionScript

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.