Programador Profissional: fevereiro 2013

quinta-feira, 28 de fevereiro de 2013

Gráficos dinâmicos com Google Charts

O Google possui um serviço muito interessante de geração de charts a partir de URLs. Vamos analisar esse serviço, os parâmetros necessários e os tipos de gráficos que ele disponibiliza.

Veja a imagem acima. Esse gráfico é gerado em tempo real ao acessar a url:
https://chart.googleapis.com/chart?cht=p&chs=500x250&chd=t:60,30,10&chl=PHP|JAVA|ASP

O Google interpreta esses parâmetros contidos na url para renderizar o gráfico desejado. Vamos analisar os parâmetros:

Parâmetro cht: Refere-se ao tipo do chart a ser gerado. No exemplo acima eu usei o 'p' de pizza. Outros tipos são os abaixo:

cht=p3: Pizza 3d

cht=bvs: Barras Verticais

cht=gom: Velocímetro

cht=lc: Linha

cht=r: Radar

cht=rs: Radar com linhas curvas

cht=v: Círculos

Parâmetro chs: Refere-se ao tamanho do gráfico em duas dimensões (chs=LARGURAxALTURA) Ex. chs=500X250

Parâmetro chd: Aqui teremos os valores do chart. Na url está definido assim: chd=t:60,30,10. Isso quer dizer que o primeiro elemento tem valor 60, o segundo 30 e o terceiro 10.

Parâmetro chl: Trata-se do label dos valores definidos no parâmetro anterior, separados por '|'. Na url está definido assim: chl=PHP|JAVA|ASP. Perceba que devem vir na ordem do parâmetro anterior, ou seja, nesse caso PHP terá valor 60 (pois ambos estão na primeira posição), JAVA tem valor 30 (segunda posição) e ASP valor 10 (terceira posição).

É claro que, visto se tratar de uma URL, podemos modificar esses valores e labels em tempo de execução via programação colocando, por exemplo, dados diretamente do banco de dados. Assim teremos uma forma fácil e prática de implantar rapidamente gráficos em nossos sistemas.

Vários sites importantes usam esse serviço, por exemplo o Baixaki. Veja abaixo:

Acesse o baixaki e selecione algum programa para baixar, clique com o botão direito do mouse em cima do gráfico para extrair a URL da imagem e verá que o baixaki usa o serviço do google charts.

Fica a dica.

Atenciosamente,
Gustavo Marques

terça-feira, 26 de fevereiro de 2013

Ordenar HTML table com javascript

Ordenar uma tabela da maneira tradicional (com order by na consulta no banco de dados) pode dar bastante trabalho. Precisamos receber a entrada do usuário sobre qual coluna ordenar e então usar essa coluna na cláusula order by. Além de trabalhoso isso exige várias idas ao banco, prejudicando a performance de todo o sistema. Um modo bem mais simples de se ordenar uma tabela é ordenar o <table> diretamente no HTML. Ao clicar no cabeçalho de cada coluna, a tabela inteira é ordenada por ela. Se clicar novamente na mesa coluna, então a ordem é invertida.

Faça o teste na tabela abaixo (clique nos nomes das colunas para ordenar):

id	Nome	Email	Sexo
1	Gustavo	programador.gustavo@gmail.com	Masculino
2	Adriane	adri@gmail.com	Feminino
3	Bruno	bruno@yahoo.com	Masculino

Para fazer essa ordenação diretamente no HTML precisaremos de um plugin do JQuery: tablesorter.

Vamos ver como implementar. Veja o código:

<html>
<head>
<title>Teste</title>


<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>

<style>
th{
cursor:pointer;
}
</style>

</head>
<body>
<table id="myTable" >
<thead>
<tr>
<th>id</th>
<th>Nome</th>
<th>Email</th>
<th>Sexo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Gustavo</td>
<td>programador.gustavo@gmail.com</td>
<td>Masculino</td>
</tr>
<tr>
<td>2</td>
<td>Adriane</td>
<td>adri@gmail.com</td>
<td>Feminino</td>
</tr>
<tr>
<td>3</td>
<td>Bruno</td>
<td>bruno@yahoo.com</td>
<td>Masculino</td>
</tr>
</tbody>
</table>

<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</body>
</html>

Para que a ordenação ocorra, a tabela precisa ter as tags <thead> e <tbody> para orientar o script. O trabalho grosso o script já faz, agora podemos pesquisar os temas disponibilizados no site para melhorar a aparência da tabela, ou estilizar nós mesmos.

atenciosamente,
Gustavo Marques

segunda-feira, 25 de fevereiro de 2013

Exportando planilhas para Excel com PHP

Existem vários motivos para querermos exportar nossas listagens online para excel. Um deles é que, uma vez que os dados são carregados no excel ou libreoffice, podemos utilizar excelentes ferramentas desses programas tais como os poderosos filtros deles. Esses programas também permitem formatação na aparência do documento e, finalmente, os usuários estão acostumados com eles.

É bem simples a geração da planilhas com PHP. O segredo está na definição correta dos headers e em tratar a planilha como um <table> do HTML.

Vamos ver um exemplo:

<?php
//Informa ao browser que o tipo de documento será uma planilha do excel
header('Content-type: application/vnd.ms-excel');

//Força o download da planilha, o nome do arquivo será planilha.xls
header('Content-Disposition: attachment; filename="planilha.xls"');

//Monta a planilha
echo '<table>';

//cabeçalho
echo '<tr>';
echo '<td>Nome</td>';
echo '<td>Email</td>';
echo '<td>Sexo</td>';
echo '</tr>';

//conteudo

echo '<tr>';
echo '<td>Gustavo Marques</td>';
echo '<td>programador.gustavo@gmail.com</td>';
echo '<td>Masculino</td>';
echo '</tr>';

echo '<tr>';
echo '<td>Fernanda</td>';
echo '<td>fe@gmail.com</td>';
echo '<td>Faminino</td>';
echo '</tr>';

echo '<tr>';
echo '<td>Henrrique</td>';
echo '<td>h@gmail.com</td>';
echo '<td>Masculino</td>';
echo '</tr>';

echo '</table>';
?>

Ao acessar esse arquivo PHP o browser irá exibir a caixa de download. Baixe o arquivo e abra no seu programa preferido. Aberto no LibreOffice ele ficou assim:

Atenciosamente,

Gustavo Marques

segunda-feira, 4 de fevereiro de 2013

Layouts para Aplicativos Mobile

Hoje sem dúvida o acesso a internet através de dispositivos móveis, tas como smartphones e tablets, estão em alta. O baixo custo de alguns destes dispositivos possibilita que um público crescente acesse a internet. Naturalmente as empresas devem repensar a apresentação de seus sites para esse meio de acesso. Isso se dá por que a usabilidade de um dispositivo móvel é bem diferente de um computador tradicional.

Em um computador tradicional o espaço na tela fornece liberdade de layout e o poder de processamento possibilita o uso de plugins tais como o flash e o java para maior interatividade. Porém isso não ocorre em um dispositivo móvel, onde além do pequeno espaço de tela, possui recursos limitados. Enquanto num PC o mouse fornece precisão no click, telas touch dos dispositivos móveis precisam de muito mais espaço para os clicks, levando em conta o tamanho da superfície do dedo do usuário.

Assim, ao desenharmos telas das aplicações para mobile, é bom seguirmos alguns padrões de layout e usabilidade. Existem muitos padrões, mas nesse artigo só vou citar 2 deles: Galeria e Menu de Lista.

Padrão Galeria

No padrão Galeria temos os links dispostos em forma de icones grandes. São facilmente visualizados em uma tela pequena, também fornecem precisão no toque do usuário.

Como deve ser:

Na parte superior, é comum um banner com a marca da empresa e algumas operações globais, tais como a busca.

Exemplos:

Padrão Menu de Lista

Nesse padrão os itens são apresentados em forma de lista. Ele é melhor quando forem muitos ítens. Muitos itens no padrão Galeria talvez exija uma grande quantidade de downloads de imagens dos itens.

Como deve ser:

Ao clicar em um item pode-se exibir um subitem com nova listagem.

Exemplos:

Pode-se perceber claramente que esses padrões são pensados para a facilidade de uso nos dispositivos móveis, onde a facilidade, praticidade e performance são prioridade.

Atenciosamente,
Gustavo Marques

Páginas