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

CAPTCHA é um acrônimo da indagação “Entende?”, em italiano, e significa Completely Automated Public Turing test to tell Computers and Humans Apart, ou Teste de Turing público completamente automatizado para diferenciar entre computadores e humanos.

Amplamente utilizados para validar o envio de dados em formulários web, e para autenticação de usuários, os CAPTCHAs são uma arma importante para defender websites de bots e spammers. Contudo, sua implantação exige atenção para não acabar espantando os usuários.

Os CAPTCHAs mais comumente utilizados consistem em fazer o usuário digitar os caracteres apresentados em uma imagem para validação, porém, devido a existência de programas OCR, que podem facilmente reconhecer caracteres a partir de imagens, estes já não implicam a segurança desejada. Para aumentar a segurança, novos modelos de CAPTCHAs tem sido pesquisados e desenvolvidos a todo momento, como os captchas de matemática, onde o usuário deve resolver uma equação e digitar a resposta, ou aqueles em que se é necessário diferencias cores ou grupos de caracteres, por exemplo. Um CAPTCHA que acho realmente bom o atualmente utilizado pelo serviço whois do registro.br:

Descobri alguns experimentos de CAPTCHAs que seriam, supostamente, impossíveis de serem resolvidos por computadores, com o 3d-captcha, que define caracteres para certas partes de objetos 3d, e uma autenticação baseada em imagens, onde o usuário devem primeiro clicar no centro de uma imagem e, posteriormente, selecionar o termo que uma imagem lembra.

Embora sejam extremamente mais seguros, certamente estes CAPTCHAs experimentais manteriam os usuários tão longe das páginas que protegem quanto os bots.

Se você tem um website que exija cadastros de usuários, adicionar um captcha para proteção pode ser indispensável. Então, tenha certeza de utilizar um que seja fácil de ser lido por humanos, com letras grandes e cores vivas em fundo neutro, de preferência que não exija que o usuário digite muitos caracteres. Se precisar de segurança adicional, procure por um que utilize o mais próximo possível de linguagem natural, prefira um que peça determinados caracteres ligeiramente diferentes (cores, parte da string, consoantes, etc), ou então os captchas matemáticos (desde que utilizem equações simples).

Se você tem um blog, ou alguma página na internet que aceite comentários, nem pense em adicionar um captcha. O simples fato de ter que digitar algumas letras para validação pode fazer seus leitores desistirem facilmente de postar qualquer comentário. Neste caso, prefira um serviço anti-spam como o Akismet. O qual, aliás, utilizo aqui no meu blog e funciona maravilhosamente.

Johnm Willis postou em seu blog os 10 piores CAPTCHAs. Vou exibir alguns dos melhores piores aqui.

 Fonte: http://pt.wikipedia.org/wiki/Captcha

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

Uma característica que pode fazer falta no MySQL é a possibilidade de renomear bancos de dados, assim, quando esta ação é necessário, o único modo é copiando toda uma base para uma nova e removendo a antiga.

Para facilitar este processo, podemos utilizar o mysqlhotcopy, um script em perl capaz de copiar rapidamente bases de dados completa ou parcialmente, desde que todas as tabelas a serem copiadas utilizem as engines MyIsam ou Isam.

Desde que migrei meu blog para o novo servidor pretendia renomear a base de dados utilizada. Embora algumas versões do MySQL 5.1 incluam um comando para renomear bases, este foi removido recentemente e não é recomendado que seja utilizado nas versões que o possuem. Assim, eu estava prestes a utilizar o mysqldump para copiar inteiramente a base, quando me deparei com o mysqlhotcopy.

De fato, a própria documentação do mysqldump recomenda o uso do mysqlhotcopy para backups, desde que utilizado para tabelas MyIsam ou Isam, devido ao ganho de velocidade. Assim, para copiar uma base completa, basta utilizar:

$ mysqlhotcopy -u username -p password bd_origem bd_destino

Também é possível utilizar regex para selecionar as bases a serem copiadas, ou as tabelas dentro de uma base.

Como ponto negativo, o mysqlhotcopy só pode copiar bases de dados locais, e é necessário especificar a senha (se houver senha) do usuário a fazer a copia na linha de comando. Mas ainda assim é uma ótima opção para copiar bases completas, uma vez que tabelas MyIsam são hoje as mais utilizadas em bases de dados MySQL.

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

Há algum tempo estive falando sobre aplicações Web 3.0 aqui, principalmente sobre o Freebase, uma base de dados aberta com relacionamentos entre os dados, e o Powerset, um mecanismo de busca em linguagem natural. Na época em que estive experimentando as aplicações, ambas requeriam convites para uso, por estarem em fase Alpha e, apesar de promissoras, ainda deixavam bastante a desejar, podemos dizer, úteis apenas àqueles que realmente se interessam sobre novidades nesta área.

Recebi hoje uma newsletter (mensal) do Freebase notificando sobre o crescimento da base e comunidade e novas aplicações, entre estas, me chamou a atenção o lançamento do PowerSet, e o fato deste estar realmente utilizando o Freebase como base de pesquisas. Eu mesmo não imaginei que este pudesse evoluir tanto em tão pouco tempo.

Como primeira grande novidade, cabe dizer que tanto o Powerset como o Freebase, estão agora disponíveis para o público em powerset.com e freebase.com, respectivamente.

O primeiro, que antes apenas pesquisava entre artigos da Wikipédia, agora com adição da base do Freebase, me supreendeu com uma simples pesquisa sobre “Quem escreveu Dagon”, exibindo em primeira instância o perfil do autor. A mesma pesquisa no Google, por exemplo, exibe uma série de páginas com as palavras digitadas ou referências a estas, sem qualquer cuidado com a semântica d a frase.
Infelizmente, as pesquisas estão disponíveis apenas em inglês por enquanto, mas com o uso do mecanismo crescendo, suporte a outros idiomas deverão ser adicionados em breve.

Além do Powerset, algumas outras aplicações interessantes tem surgido, utilizando a base do Freebase:

O Thinkbase, que exibe graficamente os relacionamentos entre dados, como os livros publicados publicados por um autor, seguidos dos filmes baseados nestes, por exemplo.

O Influence Viewer, assim com o Thinkbase, exibe um gráfico clicável sobre relacionamentos, desta vez sobre um domínio de influência, ou seja, quem influenciou quem (tratando-se principalmente de filósofos e pensadores).

E também os testes de conhecimento Shot or Not?, Taught or Not? e Pull Quotes. Sendo estas as primeiras aplicações a utilizar a API do Google.

Você pode encontrar uma lista completa (ou quase) de aplicações Freebase aqui.

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

Já pensou se fosse possível ganhar uma grana apenas navegando em diversas páginas pelo internet?

Sim, isto é possível. O website CliquePago.com.br oferece um novo serviço de publicidade que paga aos usuários que clicarem e navegarem nas páginas de seus anunciantes.

Diferente de serviços como o Google AdSense/AdWords, o CliquePago é voltado para os usuários finais, e não para proprietários de páginas web, assim, qualquer usuário que não possua nenhum website, blog, ou página pessoal, pode se cadastrar, e ganhar dinheiro apenas navegando nos websites anunciados no CliquePago.

Para os anunciantes, cabe a certeza de que seus websites serão visitados pelos usuários do CliquePago, uma vez que estes irão intencionalmente clicar nos links que mais os interessem, visando receber o pagamento pelo clique, e não apenas, as vezes acidentalmente, acessar o link de um anúncio que não faz parte da página atual fazendo-o sair do contexto desta.

O CliquePago ainda está em fase beta, contento um pequena comunidade. Porém, exibindo um crescimento exponencial no último mês, trata-se de uma nova ótima opção para anunciar seu site, ou ganhar uma graninha extra sem fazer quase nada.

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

Neste última semana notei que o favicon dos sites do Google mudou de um ‘G’ para um ‘g’:

Nada contra a mudança… Na verdade achei até este icon melhor que o antigo (apesar de também ser, simplesmente uma letra), mas acho que, como a grande maioria dos usuários do Google (eu, por exemplo) devem estar bem acostumados ao antigo ‘G’, a aceitação não deve ser tão boa.

Não me parece que estou visitando uma página do Google quando vejo este novo favicon em minhas abas… :(

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