terça-feira, 4 de outubro de 2011

jQuery Visualize Radar Chart (english)


A few days ago i googled for a free (open source) radar chart to use in a project, but i didn't found anything.

Google charts has that chart, but, i will use this software in a intranet so use charts that requires web doesn't make sense..

So i grab the jQuery Visualise code that is licenced under MIT licence and implement the radar (sometimes called spider char) on it.

This is how the chart is generated:



If you need a chart api that support radar charts in javascript and that is fully compatible with HTML5, that is the deal. Another pro is that still working on older browsers like IE 6.0.

O use it is easy, create a table with the data you need, than transform that table into the radial chart using jQuery:

$(function(){
      $('#tableId').visualize({type: 'radar', height: '350px', width: '480px'});
});

For more information on how to use jQuery Visualize go to the Filament Group (it is for how to use. Download from the botton of this page if you need radar charts, the original release don't have it). 

There are two types of chart that i had created 'radar' radial 'radial' both are the same chart, the difference is that the 'radial' creates a transparent fill with the series color.

That chart is also compatible with the light style (you must import 2 css files, the base 'css/visualize.css' and the theme, 'css/visualize-light.css' or  'css/visualize-dark.css').


Download link at Evodata: link.

Download link at 4Shared: link.

sábado, 1 de outubro de 2011

jQuery Visualize Gráfico Radar Javascript Acessivel



Novo link em: http://evodata.com.br/marcosfedato/?p=18&lang_view=pt


Hoje eu precisei usar um gráfico de radar (algumas apis chamam de spider) em uma das minhas aplicações.

Procurei por um bom tempo um chart free (open source) para usar, mas o único que achei foi o do google.

Como posso precisar usar esse gráfico em uma intranet, eu preferi não usar.

Como eu já tinha postado aqui antes, eu gosto muito o jQuery visualise, e resolvi extende-lo.

E consegui, o código dessa api é lindamente simples e copiando os códigos dela e alterando foram apenas 2 horas para conseguir o que eu queria.

Vejam como ficou:



Então para quem precisa de uma api de gráfico com suporte a esses gráficos radiais compativel com HTML5, e com um esquema em javascript de retrocompatibilidade que roda até no IE6 fica o meu código.

Para usar é como o jQuery visualize mesmo, vc cria uma tabela, e depois coloca o javascript:

$(function(){
      $('table').visualize({type: 'radar', height: '350px', width: '480px'});
});

Existem agora os tipos 'radar' e 'radial' ambos são esse mesmo gráfico, mas o radial adiciona um preenchimento transparente nas áreas cobertas.

Ele também é compatível com o estilo light (você deve importar 2 css o 'css/visualize.css' e o do tema, 'css/visualize-light.css' ou   'css/visualize-dark.css'.


Download link at Evodata: link.

Download link at 4Shared: link.

segunda-feira, 19 de setembro de 2011

Backup de um banco de dados MySQL utilizando PHP

Fazer o backup do banco de dados é uma tarefa essencial para recuperar o sistema após um crash de hardware, ataque hacker, invasão alienígena etc...

Pensando nisso estou colocando nas minhas aplicações um botão de backup para que o usuário final possa fazer ele mesmo um backup do banco de dados e salvar em um Pendrive, mandar por e-mail para ele mesmo, ou mandar imprimir em formulário contínuo pra ver se chega na lua, sei lá.

Procurei um bom tanto na internet não achei algo que fosse 100% o que eu queria mas achei algo próximo que me ajudou a lot em http://www.devmedia.com.br/post-3925-Fazendo-backup-de-Mysql-atraves-de-PHP.html

Problema: se um usuário colocasse uma string com um ' no meio, ele fecha a string do sql que usa ' para delimitar a string.

Para isso escapamos as single-quotes ou aspas simples ' com um backslash ou barra invertida \ antes.

Um erro parecido acontece se no banco houver uma string que termina com backslash, pois isso anularia a single quote que fecha a string, então antes de backslash, deve-se colocar outro backslash.


Sem entrar em maiores detalhes sobre ordem dos fatores fiz uma outra adção para quem usa UTF-8 e quer validar os caracteres, erros com importações mal feitas podem ocasionar alguns erros na geração do script esse $checkUtf, se true remove caracteres que não sejam UTF-8 evitando esse pau.

Segue o código, com certeza aceito comentários e sugestões de melhoria.

<?php

// código baseado em http://www.devmedia.com.br/post-3925-Fazendo-backup-de-Mysql-atraves-de-PHP.html
// com melhorias dos comentários do mesmo post
// com adicional de escape string por Marcos Fedato marcosfedato.blogspot.com.br
// com checagem de caracteres UTF-8 por http://stackoverflow.com/questions/1401317/remove-non-utf8-characters-from-string

    $usuario = "user";
    $senha = "123";
    $dbname = "mydb";
    // use true se quiser remover caracteres que não sejam utf-8
    $checkUtf = false;
   
// conectando ao banco
    mysql_connect("localhost", $usuario, $senha) or die(mysql_error());
    mysql_select_db($dbname) or die(mysql_error());

// gerando um arquivo sql. Como?
// a função fopen, abre um arquivo, que no meu caso, será chamado como: nomedobanco.sql
// note que eu estou concatenando dinamicamente o nome do banco com a extensão .sql.
    $back = fopen($dbname . ".sql", "w");

// aqui, listo todas as tabelas daquele banco selecionado acima
    $res = mysql_list_tables($dbname) or die(mysql_error());

    // ultra importante para não dar erro nos primeiros inserts
    // principalmente de usar InnoDB e relacionar as tabelas
    fwrite($back, "set foreign_key_checks=0;\n\n");
   
    // regex para ver se o char é UTF-8
    // Link: http://stackoverflow.com/questions/1401317/remove-non-utf8-characters-from-string
    $regex1 = <<<'END'
/
  ( [\x00-\x7F]                 # single-byte sequences   0xxxxxxx
  | [\xC0-\xDF][\x80-\xBF]      # double-byte sequences   110xxxxx 10xxxxxx
  | [\xE0-\xEF][\x80-\xBF]{2}   # triple-byte sequences   1110xxxx 10xxxxxx * 2
  | [\xF0-\xF7][\x80-\xBF]{3}   # quadruple-byte sequence 11110xxx 10xxxxxx * 3
  )
| .                             # anything else
/x
END;
   
// resgato cada uma das tabelas, num loop
    while ($row = mysql_fetch_row($res))
    {
        $table = $row[0];
// usando a função SHOW CREATE TABLE do mysql, exibo as funções de criação da tabela,
// exportando também isso, para nosso arquivo de backup
        $res2 = mysql_query("SHOW CREATE TABLE $table");
// digo que o comando acima deve ser feito em cada uma das tabelas
        while ($lin = mysql_fetch_row($res2)) {
// instruções que serão gravadas no arquivo de backup
            fwrite($back, "\n#\n# Criação da Tabela : $table\n#\n\n");
            fwrite($back, "$lin[1] ;\n\n#\n# Dados a serem incluídos na tabela\n#\n\n");

// seleciono todos os dados de cada tabela pega no while acima
// e depois gravo no arquivo .sql, usando comandos de insert
            $res3 = mysql_query("SELECT * FROM $table");
            $first = true;
            while ($r = mysql_fetch_row($res3))
            {
                if ($first)
                {
                    $sql = "INSERT INTO $table VALUES ";
                    $first = false;
                }
                else
                {
                    $sql .= ',';
                }
               
               
                $sql .= "('";
               
                $imploded = '';
               
                $firstImplode = true;
               
                foreach ($r as $reg)
                {
                    if ($firstImplode)
                    {
                        $firstImplode = false;
                    }
                    else
                    {
                        $imploded .= "', '";
                    }
                   
                    if ($checkUtf)
                    {
                        $escaped = str_replace('\'', "\\'", str_replace('\\', "\\\\", preg_replace($regex1, '$1', $reg)));
                    }
                    else
                    {
                        $escaped = str_replace('\'', "\\'", str_replace('\\', "\\\\", $reg));
                    }
                    $imploded .= $escaped;
                }
               
                $sql .= $imploded;
               
                $sql .= "')\n";

            }
            if (!$first)
            {
                $sql .= ";\n";
                fwrite($back, $sql);
            }
        }
    }

// fechar o arquivo que foi gravado
    fclose($back);
// gerando o arquivo para download, com o nome do banco e extensão sql.
    $arquivo = $dbname . ".sql";
    Header("Content-type: application/sql");
    Header("Content-Disposition: attachment; filename=$arquivo");
// lê e exibe o conteúdo do arquivo gerado
    readfile($arquivo);
?>

quarta-feira, 31 de agosto de 2011

Desenvolvimento PHP no mundo real

Esse post tem o objetivo de mostrar o dia-a-dia de um desenvolvedor com uma nova línguagem e amedrontar os estudantes e possíveis estudantes na área de sistemas.

Veja a lista de problemas que tivemos na Evodata em um único projeto PHP.

Instalamos o WAMP, baixamos o NetBeans 7 (muito bom pra PHP e Javascript, integra legal com o jQuery), as bibilhotecas jQuery, jQuery UI e beleza.

Fizemos as primeiras telas do sistema, apresentamos ao cliente, ele gostou e pediu para colocarmos em um servidor dele para ele poder apresentar ao cliente dele.

Descobrimos primeiro que o servidor utilizado pelo nosso cliente estava configurado com opções não recomendadas, o pior foi o bendito REGISTER_GLOBALS, ele mistura variáveis globais com os atributos da SESSION os parametros GET e POST do PHP.

Explicando melhor o problema 1)

A sessão tinha uma variavel idioma (que grava o id do idioma do usuário logado), quando um usuário admin  cadastrava um usuário (que tinha um campo idioma que era enviado via post no formulário) o idioma da sessão se tornava o idioma do usuário recém cadastrado.

Resolver é fácil, desligue o REGISTER_GLOBALS, mas o cliente tinha uma hospedagem windows na locaweb e ele usa outros sistemas em ASP e ASP.net (a locaweb não deixa desligar o REGISTER_GLOBALS na hospedagem windows)

Com a fase inicial funcionando, passamos as novas funcionalidades do sistema, fizemos testamos e apresentamos ao cliente.

Ele novamente aprovou, e fomos subir no servidor dele novamente e adivinhe, a versão do PHP do servidor era bem antiga e não suportava comandos como o __DIR__ que haviamos usado.

Como o cliente queria muito o sistema dele no ar ele decidiu por comprar um serviço de cloud server na propria locaweb.

Ele veio com um linux beeem estranho, e foi um parto conseguir instalar todos os pacotes nele, por sorte essa parte de infra-estrutura era por parte do cliente, mas o TI dele passou alguns dias até deixar o ambiente ok.

Até que enfim subimos o sistema no servidor novo e adivinhem! Novo problema, as tabelas estavam com nome minusculo mas nossas SQL's estavam referenciando elas em upcase.

No windows isso não faz diferença (da para configurar para ser case-sensitive, mas não é o padrão), já no Linux o padrão é case-sensitive.

Alteramos todos os nomes de todas as 60 tabelas do sistema para upcase e sistema rodando.

Como antes de PHP desenvolviamos em Java, estavamos acostumados a usar parametros com placeholders como o "?", usado pelo JDBC, nossa sorte é que o PDO tem um esquema similar e usamos isto em todas as funções de banco.

Isso além de deixar as coisas um pouco mais separadas, ajuda a proteger o sistema contra SQL-Injection, então esse foi um ponto muito positivo.

Desde o começo do projeto tivemos dúvidas sobre segurança, sabiamos que usando os bindParam e bindValue estavamos protegidos contra SQL-Injection, mas isso é tudo?

Foi ai que nos deparamos com o XSS, pesquisamos e testamos várias técnicas de combate ao XSS e achamos a função htmlspecialchars(), que transforma as tags como <> em &lt; e &gt; e o

Isso faz com que se alguem tentar colocar um código javascript dentro de um form do seu sistema, ele será escapado e mostrado como texto.

E depois veio roubo de id da sessão e por assim vai...

Fato é, você só aprende a desenvolver desenvolvendo.

quinta-feira, 25 de agosto de 2011

APIs livres em softwares comercializados quais licenças usar

No dia-a-dia da Evodata Sistemas temos que escolher se vamos desenvolver algo, ou se vamos procurar algo pronto.
Uma opção é comprar components, mas as vezes o preço não compensa, ou como é algo pago e menos usado é dificil achar informação em fórums.

Então sempre que possivel utilizamos componentes e frameworks de código livre.
Porém nem todo codigo livre pode ser usado em produtos comerciais, boa parte só pode ser usada para uso próprio (pessoal) ou para compor software que também seja livre.
Então depois de uma pesquisa definimos que é seguro usar em aplicações comerciais as seguintes licenças:

LGPL: Lesser GPL, permite o uso em softwares GPL e softwares comerciais.
Licença MIT: Permite uso em sistemas livres e comerciais.
Eclipse Public Licence EPL: Permite o uso em softwares comerciais, des de que não se altere o framework (no caso de alteração, só a parte alterada deve ser obrigatóriamente licenciada em EPL, o resto do sistema pode ser comercial).
Licença Apache: Permite uso e inclusão dos fontes em sistemas comerciais.
CDDL (netbeans): Assim como a EPL permite uso em softwares comerciais, mas alterações no core devem ser devolvidas a comunidade com licença CDDL.

Muitas empresas as vezes por falta de conhecimento ou falta de tempo para avaliar as licenças dos frameworks acabam por usar inadvertidamente frameworks sob licença GPL para sistemas proprietários, o que é crime de quebra de direitos autorais contra a pessoa ou organização que criou o framework e licenciou como GPL.

segunda-feira, 11 de julho de 2011

Javascript Color Picker

Hoje vou falar de um aditivo para o JavaScript bem legal para trabalhar com a entrada de dados de cores.

É o JSColor, embora não use o jQuery (api que eu gosto muito) é muito fácil de usar e da um resultado bem legal.



O resultado final parece a ferramenta de seleção de cor do Photoshop.

Compatibilidade:

Enquanto muitos reclamam do IE 6, os desenvolvedores desse plug-in preferiram arregaçar as mangas e fazer ele compativel com tudo que é possivel, incluindo o IE 5 e IE 5.5.

Além disso ele trabalha sobre inputs, em browsers sem JavaScript ou com JavaScript desativado o usuário pode digitar o valor da cor dentro do input, ou seja perde usabilidade mas não a funcionalidade.

Facilidade de Uso:

Como ele trabalha com inputs, é só incluir o arquivo JavaScript e colocar a classe "color" nos inputs que devem selecionar a cor.

Licenciamento:

Ele é LGPL, traduzindo, pode ser usado para coisas pessoais, coisas open source e em projetos comerciais sem problemas.

Avaliação:

Algo compativel com IE 5, que não pare o sistema se o JavaScript estiver desabilitado e que possa ser usado comercialmente só pode ser bom!

Recomendo a todos que precisem de um colorpicker em JavaScript.

Link: http://jscolor.com/

terça-feira, 3 de maio de 2011

jQuery Visualize

Pessoal, este é o meu primeiro post neste blog, espero que vocês gostem.

Pretendo utilizar este blog para falar sobre desenvolvimento para internet, abordando temas como acessibilidade na web, trocar experiências sobre desenvolvimento de sistemas e temas relacionados.

Hoje venho falar de uma API muito legal para se colocar gráficos na sua página ou sistema, como o gráfico de pizza, gráfico de barras e gráfico de linha a API jQuery Visualize.

Com ela você pode transformar uma tabela em um gráfico com apenas 1 linha de comando.

Normalmente gráficos são gerados em imagem ou em flash, o legal dessa API é que se o browser do usuário não suportar imagens (como leitores de tela) ou JavaScript (por motivos de segurança, ou sei la) a informação ficará lá em forma de tabela.

Assim o usuário sempre tem acesso a informação, segue um exemplo de como o jQuery Visualize transforma uma tabela em gráfico.



$('table').visualize();



Legal né? O melhor é que mesmo usando HTML 5, o jQuery Visualize funciona no nosso grande amigo IE 6.0 graças a uma API mantida pela Google que consegue "emular" os efeitos do HTML 5 mesmo nesse browser antigo.

Saiba mais e faça o download desta API aqui [link].