Há alguns dias criei um plugin para jQuery, para desenhar medidores no estilo barômetros ou marcadores de velocidade, utilizando o elemento <canvas>.

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

Nesta última quinta-feira, dia 14, foi lançada a nova versão do jQuery, a biblioteca Javascript que promete (e cumpre) simplificar o desenvolvimento de scripts escrevendo-se muito menos linhas de código. A versão 1.4, foi lançada, intencionalmente, no dia 14 de Janeiro, por ser este o dia do aniversário da biblioteca.

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/

A algum tempo eu vinha utilizando o Prototype JavaScript Framework para criar efeitos de animações simples e, principalmente, fazer requisições AJAX, em meus projetos. Mas após as constantes indicações de um amigo de que o jQuery JavaScript Framework tornava o desenvolvimento de aplicações web com JavaScript bem mais fácil, e as promessas deste de fazer grandes diferenças com poucas linhas de código, resolvi começar a utilizá-lo em meus novos projetos.

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.

É 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