sábado, 28 de maio de 2011

Google Maps API - Parte 1 - Gerando mapas estáticos (apenas imagens)

Prezados leitores,

Estou iniciando uma nova série de tutoriais, com três ou quatro partes explicando como gerar mapas em seus sites ou sistemas web utilizando a API do Google Maps, que é extremamente funcional. Os posts são semanais.

Nessa primeira parte, veremos como exibir um mapa de determinada localidade, esse mapa não é navegável, ou seja, é apenas uma imagem estática. A exibição de mapas dinâmicos utilizando JavaScript será vista na próxima parte.

Vamos iniciar com um exemplo. A imagem abaixo já está com a url no formato do mapa estático. Ela exibe o Distrito Federal do Brasil:


Vejam como a url para exibir esse mapa é simples: http://maps.google.com/maps/api/staticmap?center=Brasilia,DF&zoom=14&size=256x256&sensor=false

Ou seja, basta incluir essa url no atributo src da tag img, por exemplo:

<img src="http://maps.google.com/maps/api/staticmap?center=Brasilia,DF&zoom=14&size=256x256&sensor=false" alt="Mapa do Distrito Federal, Brasil">

Nessa url se baseia o uso de imagens estáticas, essa é a base: http://maps.google.com/maps/api/staticmap?$parametros$

São diversos os parâmetros que podem ser informados. O parâmetro sensor é obrigatório, ele indica se o dispositivo cliente possui um identificador de localidade, como um dispositivo GPS em um celular. Inicialmente definiremos sempre como false (a não ser que você deseje construir uma aplicação que utiliza a localização GPS), mas falarei mais sobre esse parâmetro na parte 2 desse tutorial.

O parâmetro center também é obrigatório, caso não haja nenhum marcador definido, como nessa url. E veja que legal, o Google geocodifica (geocodificar é o ato de transformar um endereço da forma como entendemos para números que informam as coordenadas do local) o endereço passado por parâmetro. Então como diria o meu professor: "É chuchu com tody".

Obs: Ao invés do endereço pode ser informado a latitude e longitude, separados por vírgula. Como geralmente é mais útil informar um endereço, usarei nesse tutorial apenas endereços.

Então se quiséssemos apontar o mapa para onde está localizado o estádio Maracanã no Rio de Janeiro, precisamos apenas alterar o parâmetro center da url: http://maps.google.com/maps/api/staticmap?center=Maracana,Rio+de+Janeiro,RJ,Brasil&zoom=15&size=256x256&sensor=false


Reparem que os espaços são substituídos pelo sinal +, isso é feito para codificar a URL, geralmente isso é feito automaticamente, e você poderia informar os espaços. Mas não custa nada inserir um + no lugar do espaço, isso pode evitar transtornos futuros.

Também notem que alterei o parâmetro zoom, esse parâmetro indica o nível do zoom da imagem, quanto maior, mais detalhe.

Por fim, nesse primeiro exemplo, o parâmetro size indica o tamanho da imagem retornada em pixels. Na documentação da API do Google Maps é informado o limite máximo de 640x640px. Esse parâmetro deve ser informado na seguinte ordem: horizontal x vertical. Ex: 500x400.

Existe também o parâmetro format que indica o formato de retorno, pode ser PNG (padrão), JPG ou GIF.

Um outro parâmetro interessante é o maptype. Esse parâmetro informa o tipo de mapa a ser retornado, o padrão é roadmap, que retorna um mapa desenhado com as estradas e indicações, como um Guia 4 rodas. Os outros três tipos são: satellite, hybrid e terrain.

Veremos um exemplo:

Alterando o atributo maptype para o tipo satellite, que retorna um mapa com a foto de satélite do mesmo local, o estádio Maracanã no Rio de Janeiro:


Essa foi a url utilizada: http://maps.google.com/maps/api/staticmap?center=Maracana,Rio+de+Janeiro,RJ,Brasil&zoom=15&size=256x256&sensor=false&maptype=satellite

Note que apenas alterei o parâmetro maptype.

O tipo hybrid é uma união dos tipos roadmap e satellite. Já o tipo terrain apenas mostra o terreno e vegetação.

Marcadores

Essa parte é muito importante, ao informar marcadores, não é necessário informar o parâmetro center. É difícil explicar o que é um marcador, então vou mostrar no mapa abaixo:


Esse balão com um "A" é um marcador.

A url para desenhar esse marcador no mapa: http://maps.google.com/maps/api/staticmap?center=Maracana,Rio+de+Janeiro,RJ,Brasil&zoom=15&size=256x256&sensor=false&maptype=satellite&markers=label:A|color:red|Maracana,Rio+de+Janeiro,RJ,Brasil

Para inserir um marcador basta adicionar o parâmetro markers, para cada marcador deve ser adicionado um parâmetro. Dentro desse parâmetro temos atributos de estilo. Se informarmos apenas o endereço (ou latitude,longitude) é exibido um marcador na cor vermelha com um ponto no lugar do label. Para mudar isso inserimos os estilos, que são color, label e size.

O atributo color pode ter qualquer valor válido de cor de 24 bits, como um número hexadecimal: 0xFFFFFF (Branco) ou uma das seguintes cores definidas: black, brown, green, purple, yellow, blue, gray, orange, red, white.

Os valores de atributos são separados por um pipe (|).

O atributo label é o nome do marcador, no exemplo acima o label é A.

O atributo size possui três opções: tiny, mid, small. E como o nome indica, informa o tamanho de cada marcador.

Os valores de marcador são informados como a notação CSS, atributo:valor, ou seja, utilizando dois pontos (:). O último elemento da url, depois de um | é o endereço ou coordenada, sem nenhum par, apenas o valor, como no exemplo acima.

Agora um exemplo prático com mais de um marcador:


Esse exemplo mostra o mapa com o parâmetro center no Brasil, como zoom 5 e dois marcadores, um no Rio de Janeiro (R) e outro em Brasília. Todos possuem estilos.

Essa é a url da imagem acima: http://maps.google.com/maps/api/staticmap?center=Brasil&zoom=3&size=256x256&sensor=false&maptype=satellite&markers=label:B|color:blue|Brasilia,DF,Brasil&markers=label:R|color:0xFFFFCC|size:mid|Rio+de+Janeiro,RJ,Brasil

Há outro recurso da API que é o de exibição de rotas ou caminhos (paths), mas explicarei sobre ele nos próximos tutoriais. Então até lá!

Referência (Documentação da API do Google Maps): http://code.google.com/intl/pt-BR/apis/maps/documentation/staticmaps/

Obs: Segundo a documentação, há um limite para solicitações de desenho de mapas, que é de 1000 por dia. Porém, ao solicitar um mesmo endereço não é contado como uma nova solicitação.

sábado, 21 de maio de 2011

Controle de tempo - NeoTriad

Acredito que o NeoTriad é o tipo de ferramenta, além de uma idéia, que é de extrema importância para todos que trabalham em um emprego formal ou autônomo (principalmente).

A organização do tempo é muitas vezes vista como perda de tempo, ou que é algum tipo de idéia que nos impulsiona a trabalharmos mais. Porém o sentido é totalmente contrário, é difícil visualizar essa questão a curto prazo, mas organizando o tempo é possível aproveitar ao máximo o tempo de trabalho e ter mais tempo livre, mesmo gastando um tempo para planejar o seu dia, semana, mês e por aí vai.

A administração do tempo permite aproveitar ao máximo, mas é preciso ter força de vontade para conseguir se organizar, não é uma tarefa fácil e nem algo que você consegue "da noite pro dia". Por isso é importante o uso de uma ferramenta que te auxilia nesse objetivo.

A empresa NeoTriad possui alguns produtos nesse segmento. O destaque é o NeoTriad.com que é um sistema online para gerenciamento de tempo, nele você tem um controle sobre tarefas e projetos, além de gráficos para controle e a divisão de tarefas entre a chamada Triad (Urgente, Importante e Circunstancial), que permite se organizar e focar no que é importante.

Também no site da NeoTriad existem vídeos que explicam sobre diversos assuntos dentro do tema "Gerenciamento de tempo", pode parecer perda de tempo ver esse tipo de vídeo e estudar essas informações, mas garanto que não é.

Já existe uma versão Desktop do NeoTriad, só não acho muito vantajoso já que é um produto separado do NeoTriad.com, no entanto não há renovações ou assinaturas, e os dois podem sincronizar informações.

O preço, acho bem em conta: R$12,90 por mês. Você pode pagar com PagSeguro, Cartão de Crédito e Boleto Bancário. E pode testar o produto gratuitamente por um mês.

Acesse o NeoTriad e confira: http://www.neotriad.com

domingo, 15 de maio de 2011

Controle de Finanças - Contas OnLine

Um sistema de controle de finanças, em uma atualidade onde todas as pessoas estão sempre "correndo", é uma ferramenta importante.

As vezes fazemos o controle de contas a pagar ou receber de memória, mas comumente esquecemos uma ou outra o que nos leva a pensar que vai sobrar uma grana no final do mês (ou que vai faltar, no caso de esquecer as contas a receber, porém esse é um erro bem menos comum..).

O controle utilizando papel e caneta é algo muitas vezes inviável, pois todos já sabemos o quanto é difícil manter papéis de forma organizada: como escrever, aonde guardar, que padronização utilizar e etc. Ou mesmo utilizando arquivos eletrônicos, o que muitas vezes ainda incorrerá em questões desse tipo.

Durante uma busca por esse tipo de ferramenta, encontrei o Contas On-line, que é um sistema de gerenciamento financeiro que possui diversos recursos e ao mesmo tempo tem uma interface simplificada, ou seja, fácil de usar e aprender.

Entre os recursos que se destacam no Contas On-line estão:
- Lançamentos automáticos (cadastro de contas fixas e parcelamentos)
- Organização de centros de custo/lucros
- Integração com pagamentos em Cartão de Crédito
- E diversos outros

E o preço é justo, o plano básico com até 45 lançamentos por mês é grátis, e pode ter dois usuários cadastrados. O maior plano é de 1200 lançamentos mensais que sai por um valor de R$50,00 por mês, permitindo 20 usuários por conta.
A cada 100 lançamentos a mais deve ser acrescido o valor de R$50,00 anual.

Todos os planos são renovados anualmente.

Então acesse a ferramenta, faça o seu cadastro e planeje-se: https://www.contasonline.com.br/Default.aspx?PRP=IN&Ind=11883511012

É importante ressaltar que essa ferramenta por si só não é capaz de fazer o planejamento de sua vida financeira por você. É preciso dedicar um tempo para se organizar e inserir suas informações na ferramenta, e assim manter um controle sobre suas contas.

sábado, 14 de maio de 2011

Sistema de exibição de dicas (tooltips) com javascript

As tooltips são textos que geralmente são exibidos para auxiliar o usuário a preencher um formulário, por exemplo.

É extremamente importante que um sistema de informação contenha informações claras acerca do objetivo traçado. Isso inclui ajudar o usuário a entender partes do sistema que não está familiarizado ou que realmente seja difícil de compreender.

Uma tooltip geralmente segue a estrutura de uma imagem com um ponto de interrogação que quando o mouse passa sobre ela, é exibido um quadro com a dica para preencher determinado campo ou apenas com informações sobre um texto ou algo do tipo.

É esse tipo de tooltip que irei descrever nesse post.

Pré-requisitos: jQuery

O uso da biblioteca jQuery tem o intuito de simplificar, diminuir as linhas de código, mas o mesmo objetivo pode ser conseguido sem muitas alterações para ser utilizado sem jQuery.

Esse é o código JavaScript que faz todo o trabalho:

// Executa a função passada por parâmetro quando a página é carregada
$(document).ready(function() {
// Atribui uma função para o evento onmouseover do elemento imagem
$('div.dica img').mouseover(function(e) {
var el = $('div.dica .texto-dica');
// Atribui ao elemento de texto o valor do atributo alt da imagem, que contém o texto da dica
el.html($(this).attr('alt'));
// Exibe o elemento com o texto
el.show();
// Ajusta com css para que o elemento se localize na posição Y e X do mouse
el.css({
'position':'fixed',
'top':e.pageY,
'left':e.pageX
});
});
// Quando o usuário tirar o mouse da imagem, retira o elemento com o texto
$('div.dica img').mouseout(function(){
var el = $('div.dica .texto-dica');
// Esconde o elemento com texto
el.hide();
});
});

A partir desse código devemos definir a estrutura do código html que exibirá a estrutura:

Você deve utilizar uma imagem para que ao passar o mouse, a dica seja exibida, pode utilizar uma imagem como essa:

<div class="dica"><img src="dica.png" alt="A dica deve ser escrita aqui" /> <div class="texto-dica"></div> </div>

Importante!

A dica deve ser escrita no atributo alt da imagem, para manter o padrão que exige um atributo alt nas tags img.
A formatação dos itens pode ser da forma que achar necessário. Abaixo um exemplo de código css:

.dica { display:inline; } .texto-dica { display:none; background:#FFF; border:1px solid #333; padding:4px; width:200px; text-align:justify; }

Apenas uma propriedade é obrigatória, o display:none no .texto-dica para que o texto não esteja em exibição ao iniciar a página.
A propriedade display:inline na div .dica tem a função de manter a div na mesma linha que está inserindo as informações, por exemplo ao lado de um campo de texto.

Então, por enquanto é isso pessoal, se precisarem de ajuda ou tiverem qualquer dificuldade envie um comentário.

sábado, 7 de maio de 2011

O Gmail é grande

Ao efetuar logout no Gmail hoje, comecei a calcular o quanto de espaço disponível aumenta em nossas contas do Gmail. Já havia percebido a contagem muito antes, desde o meu primeiro acesso ao Gmail a alguns anos atrás, mas não tinha parado para fazer o cálculo. Então observe a conclusão nesse post.

O contador que aparece na página inicial do Gmail informa um aumento de segundo em segundo na casa de bytes. Lembrando que 1B (Byte) = 8 bits, 1KB (KiloByte) = 1024B, 1MB (MegaByte) = 1024KB e 1GB (GigaByte) = 1024MB.

Fiz duas coletas de informação. Com intervalo de 2 minutos cada uma, avaliando quantos bytes aumentaram.

Na primeira, das 21:14:30 às 21:16:30, a diferença foi de 0,000489MB (7580,573984MB - 7580,574473MB), ou seja 512,753664 Bytes.

Na segunda amostra, das 21:20:00 às 21:22:00, a diferença foi de 0,000485MB (7580,575327MB - 7580,575812MB), ou seja 508,55936 Bytes.

São poucas amostras e de pequeno tamanho para informar um valor mais preciso, mas podemos estimar uma média: 510,656512 Bytes, e simplificamos para 510B e chegamos às definições à seguir:

  • Em um minuto ganhamos 510B de espaço em disco para armazenar nossos e-mails
  • Em uma hora ganhamos em média 30KB a mais de espaço.
  • Em um dia ganhamos em média 717KB.
  • Em uma semana ganhamos em média 5MB
  • Em um mês (30 dias) ganhamos em média 21MB.
  • E em um ano ganhamos em média 255MB.
É um valor baixo. Se analisarmos o contador na página inicial do Gmail, veremos que a impressão é de que o armazenamento aumenta rapidamente, porém ele cresce na casa de Bytes, causando essa interpretação fora da realidade.

Porém, acredito que esse valor possa ser incrementado de acordo com o tempo e até duplicado ou triplicado, não implicando necessariamente que teremos apenas 255MB de armazenamento disponível a mais nas contas do Gmail por ano.

Na minha opinião, o que mais "pesa" em utilidade do Gmail não é o espaço e sim o sistema de webmail que é extremamente funcional.

Até a próxima.