Como um plugin requer uma atenção especial e atualizações periódicas, dediquei para ele uma página deste blog. E também o wave jQuery.canvasmetter, para o pessoal poder participar. Mais informações podem ser encontrados nestes.

Links:
página jQuery.canvasmetter
página de download do plugin jQuery.canvasmetter
wave jQuery.canvasmetter

Como comemoração pelo dia de lançamento, o time do jQuery colocou no ar um hot-site, 14 dias de jQuery, que divulgará a cada dia, uma das novas melhorias da versão 1.4, e ainda terá promoções para os desenvolvedores que usam e apoiam a biblioteca. Visite o site http://jquery14.com/ para maiores informações. O download da nova versão pode ser feito no site oficial: http://jquery.com.

Não vou me estender muito neste post, visto que estou alguns dias atrasado, e outros blogueiros já o fizeram. Então vou apenas adicionar alguns links blogs de alguns amigos que falaram sobre o lançamento. Não deixem de ler os posts, e baixarem a nova versão.

Links:

http://ruancarlos.com.br/Blog/jquery-1-4-e-lancado/

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

Acontece que o jQuery realmente cumpre o que promete, facilitando trabalhos como alteração de objetos em tempo de execução, requisições ajax e também conta com ótimas animações, tudo com poucas linhas de código muito fáceis de entender. Por isso resolvi fazer uma pequena comparação entre o uso de Prototype, jQuery, ou apenas JavaScript sem se utilizar nenhum framework.

Algumas vantagens do jQuery:

• Tamanho: O jQuery.js (versão 1.2.6) tem apenas 97KB, contando com toda sua API, Ajax e algumas animações básicas (Fade, Slide e o Animate, que pode ser utilizado para se fazeranimações customizadas). Já o prototype.js (versão 1.6.0.2), sem o Script.aculo.us, que provê as animações e efeitos, tem 123KB;
• Seletores: Enquanto com JavaScript é necessário linhas como elemento = getElementById(‘myDiv’); com o jQuery vc pode selecionar qualquer elemento com seletores CSS, utilizando a função $(). Ex: elemento = $(‘#myDiv’); Note que, como ele utiliza seletores CSS, é possivel selecionar facilmente quaisquer elementos, como todas as âncoras de uma página, ou todas as ancoras com a classe link, por exemplo: anchor = $(‘a’); anchorLink = $(‘a.link’);
• Eventos: O Prototype possui uma função para observar determinado evento em um elemento. Para disparar funções no Evento Click de meu link de id ‘myLink’, por exemplo, é necessário: Event.observe(‘myLink’, ‘click’, function(e) { [...] } );. Com jQuery basta fazer: $(‘myLink’).click( function() { [...] });

Vou um exemplo de código para uma aplicação bem comum, dois <select>s relativos de estado e cidade. Não vou postar HTML ou código PHP desnecessário, apenas o código Javascript.

Considere dois <select>, um com id ‘StateId‘ que exibirá os estados para selecionar, e irá atualizar com AJAX as opções do segundo <select>, que terá o id ‘CityId’, contendo as Cidades do estado selecionado previamente.

A url enviada, é uma típica url segmentada, comum em Frameworks MVC, e corresponde ao controle cities, a ação update, e deve receber o id do estado como parâmetro. Seria equivalente a seguinte url: ‘/cities/update.php?state_id=’.

Primeiramente, eis como o código para atualização seria, utilizando-se apenas JavaScript, e nenhum Framework:

//Apenas JavaScript, Nenhum framework
function updateCities(stateId) {
    var httpRequest;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    httpRequest.open("GET", '/cities/update/' + stateId, true);
    httpRequest.onreadystatechange = function() {
        document.getElementById("CityId").innerHTML = httpRequest.responseText;
    }
    httpRequest.send(null);
}

Ainda, como o JavaScript por padrão não possui métodos para observar eventos em elementos diversos, será necessário adicionar explicitamenteuma chamada para a função updateCities() no evento onChange do <select>:

<select id="StateId" name="StateId" onchange="updateCities(this.value)">

Utilizando-se Prototype, o trabalho torna-se bem mas fácil:

//Prototype
Event.observe (
    'StateId',
    'change',
    function(e) {
        new Ajax.Updater('CityId', '/cities/update/' + this.value);
    }
);

Já com jQuery, o código é reduzido significativamente, além de ficar bem mais legível e fácil de entender a uma primeira olhada:

//jQuery
$('#StateId').change(
    function() {
        $('#CityId').load('/cities/update/' + this.value);
    }
);

Este é um exemplo simples de como fica fácil reduzir código e torná-lo mais legível com uso do framework Js jQuery.
Veja a documentação do jQuery para mais métodos e exemplos de uso.

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

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.

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

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

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/

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.