sexta-feira, 7 de dezembro de 2012

Geolocation com HTML 5 e API Mapas do Google

O HTML 5 traz bastante simplicidade: Geolocalização (Geolocation), LocalStorage (Armazenamento local), EditableConteúdo editável, PlaceHolders, Expressões regulares e etc.

Neste post vou escrever sobre a Geolocation. A propósito, se não autorizou o acesso à sua localização, volte e autorize para vê-la no mapa.


              

<< Sua geolocalização vai aparecer aqui >>

A Geolocation do HTML 5 recupera a localização do usuário, especificamente a longitude e a latitude do ponto de acesso à internet. Isso pode variar de rede à rede e das configurações que cada uma pode ter. Mas em situações normais, a localização do acesso será identifica.

Juntando a Geolocation com a API de mapas do Google, temos o resultado acima, que é a exibição da localização no mapa.

Vamos lá, aos códigos! Primeiros exemplos e comentários e depois todo código disponível para download.

Como vamos monta um mapa, é preciso fazer referência à API de Mapa do Google, linha 8. O parâmetro sensor=false indica que não estou usando a API a partir de aplicação com sensor, como um GPS de um Smartphone por exemplo:

É preciso criar as funções javascript para ordenar os acontecimentos, que são 3: Recuperação da localização, Montagem do mapa e tratamento de erros.

Primeiro criamos a que recupera a localização. Ela verifica se o Navegador suporta Geolocalização e em caso positivo segue para a montagem do mapa:
Depois, criamos a função que monta o mapa. Ela recebe os parâmetros de latitude e longitude do resultado da função que recupera a Geolocalização.

O objeto retornado, o position, tem as propriedades latitude e longitude, dentro de coords. Para a API de mapa do Google, precisamos apenas dessas duas informações:
No uso da API, podemos configurar opções, como altura (height), largura (width), tipo de mapa (MapTypeId) e etc. Para conhecer mais sobre esta API, o ideal é acessar a documentação completa on-line em https://developers.google.com/maps/documentation/javascript/.

Acima foi a função de sucesso. Abaixo a função de erro (quando não o navegador não suporta Geolocation):

É preciso também preparar os elementos que receberão as mensagens de sucesso ou erro e uma <div> que receberá o mapa da API do google. Veja o exemplo das mensagens:


Concluídos estes passos, basta chamar a função que recupera a Geolocalização, no caso a recuperaGeolocalizacao(). Pode ser no onclick de um botão ou no onload da página dentro da tag <body> , como no exemplo a seguir. A própria função se encarregará de montar o mapa ou mostrar o erro, a depender do resultado.


E é isso, o resultado é o local exibido no mapa. Se copiar a latitude e longitude e lançar no Google, o resultado é exatamente o mesmo. Teste!

Fica o código completo disponível para download aqui. Espero ter sido útil!

sábado, 1 de dezembro de 2012

Recortar imagens no photoshop com demarcadores

É muito comum precisar recortar imagens no photoshop. É muito comum também para os que não são especialista - como no meu caso - saber qual o melhor método para conseguir a melhor qualidade.

Vou deixar hoje uma dica de usar demarcadores no photoshop, ao invés de ferramentas de seleção.

Temos a imagem abaixo e queremos tirar dela o fundo branco para, por exemplo, fazer um .png com fundo transparente:



Umas das estratégias seria usar a ferramenta varinha mágica e clicar no espaço branco, conforme as imagens abaixo:



Com controle de tolerância, suavização de serrilhado e ajustes manuais com as ferramentas laços, podemos até ter bons resultados, mas tem outro jeito: utilizar a ferramenta caneta para marcar as áreas de corte do fundo da imagem:



Com a ferramenta caneta escolhida, clicamos ponto a ponto e marcamos as áreas de corte do fundo da imagem.


Note que a própria ferramenta tenta ajudar na criação das marcações, a partir do segundo clique, já traçando curvas automaticamente, o que muitas vezes acaba atrapalhando. Neste caso é preciso (no primeiro clique) cortar a ação automática dele, clicando em cima do segundo ponto com a tecla ALT pressionada:


Após terminar a marcação conforme desejado, termos o seguinte:

O marcador fica na aba Demarcadores e para utilizá-lo como seleção e recortar a imagem basta: 1º Selecionar camada da imagem; 2º Clicar no demarcardor segurando a tecla Control; 3º Inverter a seleção Ctrl + Shit + I e deletar.


Os resultados são as possibilidades de sobrepor imagens com recortes mais bem apurados:
 

Daí pra frente é com a imaginação e criatividade.

Espero que tenha sido útil!