É comum encontrarmos scripts para gerar gráficos dinamicamente como imagens, utilizando PHP, ou em Flash, porém também é extremamente fácil gerar gráficos utilizando apenas padrões web, com JavaScript e <canvas> ou SVG.

Recebi hoje um e-mail de um estudante de engenharia elétrica solicitando ajuda para gerar gráficos dinamicamente em um microcontrolador utilizando apenas HTML, CSS, XML e JavaScript. Embora sempre tenha utilizado PHP para gerar gráficos em imagens, já sabia que isto seria perfeitamente possível apenas com linguagens client-based, mas nunca me preocupei em desenvolver algo do tipo.

Pesquisando um pouco sobre o assunto, pude encontrar vários plugins e scripts para gerar gráficos utilizando JavaScript, como por exemplo, existem pugins para gerar gráficos utilizando jQuery ou Dojo, mas um que me chamou a atenção é um extremamente simples e fácil de usar, o Javascript Chart Widget.

O script pode desenhar gráficos utilizando <canvas>, SVG ou mesmo <div>. O padrão é que seja utilizado <canvas>, por ser mais rápido e proporcionando um visual mais bonito que os demais, podendo inclusive ser visualizado no MSIE, com a adição do JavaScript ExplorerCanvas.

Para utilizar o Chart Widget em uma página, primeiro é necessário adicionar os scripts chart.js, canvaspainter.js e o CSS canvaschart.css, adicionalmente, o excanvas.js deve ser incluído para suporte ao MSIE.

<script src="includes/excanvas.js" type="text/javascript"></script>
<script src="includes/chart.js" type="text/javascript"></script>
<script src="includes/canvaschartpainter.js" type="text/javascript"></script>
<link href="includes/canvaschart.css" rel="stylesheet" type="text/css" />

Após os scripts estarem incluídos corretamente, basta adicionar um elemento <div> ao corpo do documento HTML, com a largura e altura desejadas para exibir o gráfico:

<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>

Então baste adicionar o código Javascript para criar o gráfico. É importante verificar que este código deve ser executado no evendo load da página, ou então ser adicionado logo após o elemento <div> que exibirá o gráfico.

ieCanvasInit('includes/iecanvas.htc');
 
var c = new Chart(document.getElementById('chart'));
c.setDefaultType(CHART_AREA | CHART_STACKED);
c.setGridDensity(5, 5);
c.setVerticalRange(0, 100);
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
 
c.add('Spam',            '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
c.add('Innocent',        '#8080FF', [ 8,  7, 12, 20, 24, 16, 36, 28, 28, 45]);
c.add('Missed Spam',     '#A5A5FF', [ 8,  7, 12, 20, 24, 16, 36, 36, 18,  5]);
c.add('False Positives', '#DEDEFF', [ 1,  2,  3,  2,  1,  4, 18, 12,  8,  7]);
 
c.draw();

A primeira linha do script carrega os ExplorerCanvas, sendo necessária para compatibilidade com MSIE, as cinco linhas subseqüentes criam o objeto canvas (importante especificar o id utilizado no div), definem o tipo de gráfico, a densidade da grade do gráfico, a distância vertical, e os rótulos horizontais do gráfico, respectivamente. As linhas a seguir definem as cores e valores de cada linha do gráfico, e a legenda, e o método draw(), finalmente exibe o gráfico.

O resultado, é como exibido na imagem abaixo (lembrando que o resultado real não é uma imagem <img>, mas um elemento <canvas>:

Fonte: http://webfx.eae.net/dhtml/chart/usage.html

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Recentemente, Enéas Gesing postou sobre o ProtoRPG (link aqui), um RPG feito com o framework Javascript Prototype, e que pode ser jogado via browser.

O conceito é bem interessante, e lembra bastante antigos jogos de Nintendinho ou Game Boy Color visualmente. As ações (abrir portas, atacar, falar com NPCs) são feitas através de hotkeys, ou seja, basta segurar uma tecla do teclado + a direção onde executar a ação (exemplo: A+Direita = Atacar inimigo a direita), o que aumenta a velocidade do jogo. O único ponto fraco que achei são as conversas com NPCs, que abrem uma janela de conversa que impede a ação.

Apesar de interessante, o jogo não chega a ser inovador. Um outro RPG online chamado Triglav, produzido pela empresa SmokyMonkey, existe desde 2002 e, posso dizer, tem ótimos gráficos e animações, além de uma jogabilidade a lá Diablo, onde controla-se o personagem com o movimento do mouse.

Apesar da boa qualidade, por ser tão antigo, o jogo foi feito com técnicas JS ultrapassadas e, por isso, só funciona no MS Internet Explorer (Ugh!). A esta altura de produção deve ser extremamente difícil tornar o jogo multiplataforma, mas se você tiverum Internet Explorer 6 rodando no Wine já é suficiente.

O interessante desses jogos é que, como têm apenas Javascript como requerimento, podem ser jogados de qualquer lugar, e mesmo com poucos recursos, pois o jogo não fica tão pesado e tem suas imagens carregadas apenas quando necessário. Se um multiplayer for feito deste modo certamente fará sucesso.

Se você gostou deste artigo, inscreva-se em meu RSS feed!

A web e seus navegadores já evoluíram muito desde sua concepção em tratando-se de recursos mas ainda há gente que acredita que sobrecarregar páginas com imagens *.GIF e Flash são os únicos métodos de exibir animações na web.

Eu, particularmente, desgosto muito de GIFs animados, acho algo irritante e ultrapassado, e Flash, apesar de seus excelentes recursos, tem três pontos negativos: os arquivos costumam ser demasiado grandes, é necessário um plugin proprietário para exibí-los e os usuários não tem acesso aos fontes.

Mas diferente do que muitos acham, a linguagem HTML também evoluiu muito e, sendo integrada com outras linguagens como XML e Javascript, dispõe de outras alternativas.

Imagens SVG são hoje um padrão que deve ser exibido por qualquer navegador web recente, e estas também aceitam animações. Como SVGs são basicamente arquivos XML, elas tendem a ser, desde que usem traços simples, extremamente menores que imagens binárias, e suas animações são implementadas alterando as coordenadas das imagens, e não duplicando-as, como acontece com GIFs.

E existe também o elemento <canvas> (que é onde quero chegar), que pode exibir gráficos criados em tempo real e até mesmo animações interativas no navegador. Atualmente compatível com Firefox 1.5+ e Safari.

<canvas> é um novo elemento HTML especificado na documentação do que deverá ser o HTML 5, e pode ser usado para desenhar imagens usando linguagens de scripts (geralmente Javascript). Podendo criar composições de fotos e animações simples e até interativas. Veja um exemplo simples a seguir e seu respectivo código:

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Desenvolvido originalmente pela Apple para seu Dashboard (os widgets de desktop do Mac OS X) e posteriormente implementado no Safari. Navegadores baseados na engine Gecko 1.8 e posterior também suportam o elemento <canvas>.

Executar Javascript constantemente em uma página deixa a navegação extremamente lenta, estão, o simples relógio exibido na imagem a direita prejudica bastante a navegação, quando em execução. Assim vale lembrar que apesar da praticidade, utilizar o elemento <canvas> pode não ser a melhor opção em alguns casos, mas de qualquer modo é impressionante o que pode-se fazer com ele. Veja alguns exemplos nos links abaixo:

Um labirinto interativo feito em <canvas>

Um efeito de reflexão tipo água de imagens

Um editor de imagens como o Ms Paint

O melhor. Um clone do jogo Mario, do Nintendinho, que um amigo divulgou aqui, feito inteiramente com <canvas> (ele também tem uma versão usando DIVs, para funcionar no IE), e sem nenhuma imagem.

Vale lembrar que estes demos só funcionam no Firefox e Safari.

Fonte: MDC: Canvas Tutorial

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Desenvolvedores Web costumam ter grandes problemas para debugar JavaScript. Enquanto programas como a extensão FireBug do Firefox fazem milagres para debugar, o programador ainda precisa colocar sucessivos alert()s para descobrir os valores que suas variáveis assumem em determinados pontos. Certo?

Errado!

Estava pesquisando agora a pouco algumas funções de js no MDC quando fiquei meio curioso com o modo como os exemplos de código eram mostrados e, em especial, de uma função print(). Como no fragmento a seguir:

var names = "Harry Trump ;Fred Barney; Helen Rigby ;";
print(names);
var re = /\s*;\s*/;
var nameList = names.split(re);
print(nameList);

Ora, bolas! Javascript não pode imprimir nada em stdout, então, como pode existir uma função print()?

Então que, pesquisando mais um pouquinho, cheguei ao SpiderMonkey Javascript Shell.

O SpiderMonkey é o mecanismo interpretador de Javascript do Gecko, escrito em C, e utilizado em vários produtos Mozilla, como o Firefox, por exemplo e a boa notícia é que ele provê também um Shell para executar js em linha de comando.

Com isso fica extremamente fácil criar e testar scripts para usar posteriormente. Veja o exemplo a seguir:

diovani@debian-websul:~$ js
js> var frase = 'Hello World!';
js> var tamanho = frase.length;
js> var teste = frase + ' tem ' + tamanho + ' caracteres.';
js> print(teste);
Hello World! tem 12 caracteres.
js>

Para instalar o SpiderMonkey JS Shell no Debian GNU/Linux basta executar o comando:

# aptitude update && aptitude install spidermonkey-bin

Após a instalação, basta executar em um terminal o comando $ js para entrar no Shell interativo:

Para entrar no shell interativo use o comando:
$ js

Para executar os scripts de um arquivo (foo.js) use:
$ js -f foo.js

Para executar os scripts de um arquivo (foo.js) e entrar no shell interativo (muito útil para carregar funções ou bibliotecas) em seguida use:
$ js -f foo.js -f -

Mas mesmo para outras distribuições, e até mesmo Windows, deve ser extremamente fácil instalá-lo. Veja o link abaixo para a Documentação do Javascript Shell e exemplos de uso:

Link: Introdução ao Shell Javascript

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Nós, desenvolvedores e designers web, muitas vezes praguejamos contra certos navegadores web (alguém aí disse ie6?) por não exibirem corretamente nossas páginas, mas dificilmente pensamos no outro lado. A vida também não é muito fácil para quem desenvolve esses navegadores.

O AcidTests trata-se de um projeto do webstandards.org para testar o comportamento e eficiência dos navegadores frente aos padrões web.

O primeiro Acid (Acid1) testava os navegadores quanto a apresentação e exibição de páginas HTML 4.0 e CSS 1, o Acid2, criado em 2005, queria fazer os navegadores “sorrirem” testando as capacidades deste de exibirem imagens PNG e CSS2.

Agora, o Acid3 vai além, exigindo dos navegadores renderização de imagens SVG animadas e Javascript.

Eis a lista de especificações testadas:

• DOM2 Core
• DOM2 Events
• DOM2 HTML
• DOM2 Range
• DOM2 Style (getComputedStyle, …)
• DOM2 Traversal (NodeIterator, TreeWalker)
• DOM2 Views (defaultView)
• ECMAScript
• HTML4 (<object>, <iframe>, …)
• HTTP (Content-Type, 404, …)
• Media Queries
• Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
• XHTML 1.0
• CSS2 (@font-face)
• CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…)
• CSS3 Color (rgba(), hsla(), …)
• CSS3 UI (’cursor’)
• data: URIs
• SVG (SVG Animation, SVG Fonts, …)

Segundo o desenvolvedor Ian Hickson, a internet não se resume mais a apenas designs HTML/CSS, assim é importante testar também as capacidades dos navegadores de DOM e Javascript.

O autor do Site DrunkenFist.Com fez uma série de teste e divulgou os resultados. Vou postá-los aqui tb:

• Camino 1.51 Mac OS 10.5 [49/100]
• Firefox 2 Mac OS 10.5 [50/100]
• Firefox 3 Mac OS 10.5 [53/100]
• Internet Explorer 6 Windows XP [11/100]
• Internet Explorer 7 Windows Vista [12/100]
• Internet Explorer 7 Windows XP [12/100]
• Firefox 2 Windows XP [50/100]
• Firefox 3 Windows XP [59/100]
• Safari 3 Mac OS 10.5 [39/100]
• Safari 3 Mac OS 10.5 Latest [87/100] (incrível!)
  
• Opera 9.24 Windows Vista [46/100]
• Konqueror built from SVN 2008.03.06 [63/100]
• IE8 Beta [17/100]
• Opera 9.5 [61/100]
• Firefox 3 Beta 4 on Windows XP [67/100]

Fontes: http://info.abril.com.br/blog/juliano/20080306_listar.shtml, http://www.drunkenfist.com/304/2008/03/04/acid3-test-released-
i-took-some-screen-captures-lots-of-fail/, http://www.webstandards.org/action/acid3/

Se você gostou deste artigo, inscreva-se em meu RSS feed!

O highslide é um visualizador de miniaturas feito em JavaScript. Ele exibe as imagens em pop-ups sobre sua página (em html, nao novas janelas), podendo ser movidos ou abertos em sequencia. O efeito visual é melhor que qualquer visualizador de imagens já visto, mesmo em sistemas operacionais. Veja minhas imagens e screenshots para ter uma idéia. Vou mostrar aqui como intalar o plugin para Wordpress e como adicionar automaticamente o highslide a TODAS as imagens do blog, sem precisar editar os posts antigos.

O visualizador de miniaturas Highslide é free para uso não-comercial, e custa $29, dólares para cada domínio deu8m website comercial, então, caso você possua um blog comercial (?) você deverá pagar pelo Highslide.js. Veja a licença.

Primeiramente, baixe e instale o plugin wp-highslide (descompacte-o dentro de uma pasta ‘highslide’ em wp-content/plugins/) e também baixe a biblioteca highslide (copie apenas o arquivo highslide.js para dentro de wp-content/plugins/highslide). Após isso vá em ‘Plugins’ (ou ‘Extenções’, em português), na administração de seu blog e ative o wp-highslide. Com isso você terá o plugins instalado, podendo usar a tag <highslide></highslide> para adicionar miniaturas usando a biblioteca, o que é um saco. Então, para facilitar as coisas, vá em ‘Opções’ e clique em ‘wp-highslide’, ajuste as opções como deseja e em ‘JAVASCRIPT settings’ adicione o seguinte:

Caso seu tema não utilize ‘prototype‘ (um framework JavaScript), adicione no início do textarea o seguinte código:

<script>
src="http://prototypejs.org/assets/2007/6/20/prototype.js"
 type="text/javascript"></script>

E abaixo da linha: ‘hs.preloadImages();’

var elements = $A(document.getElementsByTagName('a'));
elements.each
(
    function(element)
    {
        if(element.href.endsWith('jpg')
            || element.href.endsWith('png')
            || element.href.endsWith('gif'))
        {
            element.className = 'highslide';
 
            Event.observe
            (
                element,
                'click',
                function(event)
                {
                    Event.stop(event);
                    var element = Event.element(event);
                    return hs.expand(this);
                }
            );
        }
    }
)

Isso vai adicionar automaticamente o Highslide a todos os links para imagens da página, inclusive dos posts antigos.

Se você gostou deste artigo, inscreva-se em meu RSS feed!