Blog do Mario: 2012

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:

	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>HTML 5 - Geolocalização e API de Mapa Google</title>

	<!-- Adiciona arquivo externo de javascript - API de Mapa do Google -->
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

view raw Geolocation1.html hosted with ❤ by GitHub

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

	<!-- Inicia os scripts: o que recupera a geolocalização e o que exibe o mapa -->
	<script type="text/javascript">

	var mensagens = document.getElementById("mensagens");

	// Função que recupera a Geolocalizacao, utilizando funções do próprio navegador.
	function recuperaGeolocalizacao() {

	// Se o navegador suporta geolocalização, recupera as informações e chama a função que vai usá-las para exibir o mapa;
	if (navigator.geolocation) {
	//Sucesso
	navigator.geolocation.getCurrentPosition(MostraLocalizacao, Erro);
	}
	//Erro
	else {
	mensagens.innerHTML = "A geolocalização não é suportada pelo seu navegador.";
	}
	}

view raw Geolocation2.html hosted with ❤ by GitHub

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:

	// Essa é a função que recebe os dados de Geolocalização, no objeto position
	function MostraLocalizacao(position) {

	// Recupera a latitude
	lat = position.coords.latitude;
	lon = position.coords.longitude;

	latitude = document.getElementById('latitude')
	latitude.innerHTML = "Latitude: " + lat;

	longitude = document.getElementById('longitude')
	longitude.innerHTML = "Longitude: " + lon;

	latlon = new google.maps.LatLng(lat, lon)
	divMapa = document.getElementById('divMapa')
	divMapa.style.height = '250px';
	divMapa.style.width = '500px';

	var Opcoes = {
	center: latlon, zoom: 15,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControl: true,
	navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
	};
	var map = new google.maps.Map(document.getElementById("divMapa"), Opcoes);
	var marcador = new google.maps.Marker({ position: latlon, map: map, title: "Você está aqui" });
	}

view raw Geolocation3.html hosted with ❤ by GitHub

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):

	function Erro(error) {
	switch (error.code) {
	case error.PERMISSION_DENIED:
	mensagens.innerHTML = "A permissão para buscar Geolocalização foi negada pelo navegador.<br /><br />Tente gerenciar as configurações de compartilhar local."
	break;
	case error.POSITION_UNAVAILABLE:
	mensagens.innerHTML = "Sua localização está indisponível."
	break;
	case error.TIMEOUT:
	mensagens.innerHTML = "A busca pela sua localização excedeu o tempo limite."
	break;
	case error.UNKNOWN_ERROR:
	mensagens.innerHTML = "Ocorreu um erro desconhecido."
	break;
	}
	}

view raw Geolocation4.html hosted with ❤ by GitHub

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

	<!-- No P id = mensagens é apresentada mensagem de sucesso ou de erro, quando o caso -->
	<p id="mensagens">Esta é a sua geolocalização:</p>
	<p>
	<!-- Em caso de sucesso, nos itens latitude e longitude serão adicionados os dados de geolocalização -->
	<span id="latitude"></span>
	<span id="longitude"></span>
	</p>

	<!-- div que recebe o mapa através do uso da API Google -->
	<div id="divMapa"></div>

view raw Geolocation5.html hosted with ❤ by GitHub

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.

	</head>
	<!-- Quando carrega a página, chama a função recuperaGeolocalizacao() do script javascript da página.
	Esta função também pode ser chamada por botões. -->
	<body onload="recuperaGeolocalizacao();">

view raw Geolocation6.html hosted with ❤ by GitHub

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!

sábado, 24 de novembro de 2012

Git - Dicas básicas e práticas

Há alguns meses trocamos na Foco o uso do source control do Team Foundation pelo GIT + o GibHub. De cara parecia bem difícil, mas depois nos acostumamos e agora está bem tranquilo.

Os conceitos são quase sempre os mesmos, mas a praticidade do controle de versões locais + repositório remoto são mais simples e fáceis de fazer.

Para quem estiver começando, deixo as dicas e lembretes sobre o GIT que utilizamos bastante no começo. Quem precisa configurar GIT e GITHUB, recomendo este link http://blog.dmatoso.com/2011/09/git-no-windows-github/ que tem um passo a passo bem bacana.

Segue então a lista, espero que ajude bastante:

Listar as configurações
git config --list

Configurando usuário
$ git config --global user.name "Mario Moraes neto"

Configurando e-mail
$ git config --global user.email mariomoraesneto@gmail.com

Ajuda
git help

Ajuda sobre um comando específico
git help commit (onde commit é o comando sobre o qual se quer ajuda)

Subir um nível de diretório
cd ..

Entrar num diretório
cd nomedodiretorio

Clonar um repositório remoto GitHub (cria um diretório e inicia um repositório)
git clone git://github.com/repositorio/projeto.git

Clonar um repositório remoto GitHub com nome diferente (criar um diretório específico e inicia um repositório)
git clone git://github.com/repositorio/projeto.git NomeDoDiretorio

Status do repositório para ver alterações na branch por exemplo
git status

Ver branches existentes
git branch

Ver branches existentes num diretório remoto
git branch -a

Baixar ultima versão de um branch remoto (origin = diretório remoto)
git pull origin nomedobranch

Ir para uma branch existente
git checkout nomedobranch

Criar uma nova branch e acessá-la
git checkout -b nomedobranch

Adicionar todas as mudanças feitas à branch
git add .

Commit - Marcar como concluídas as mudanças de uma branch
git commit -m "descrição"

Adicionar e commitar as mudanças de uma só vez
git commit -a -m "descrição"

Desfazer alterações de um arquivo
git checkout -- caminho\nomedoarquivo.ext

Baixar uma branch remota e criá-la localmente
git checkout -b nomedabranchlocal origin/nomedabranchremota

Enviar as mudanças para o repositório remoto
git push origin nomedobranch

Enviar as mudanças para o repositório remoto quando o branch local e remoto são diferentes
git push origin nomedobranch_local:nomedobranch_remoto

Remover arquivos excluídos
git add -u

Apagar um branch no repositório remoto:
git push origin :nomedobranch

Apagar uma branch local
git branch -d nomedobranch

Forçar deletar um branch local
git branch -D nome do branch

Merge - Juntar branchs (a partir da master no caso)
git merge nomedobranch

Ignorar/Abortar merge da branch
git merge --abort

Limpar a tela
Clear

Sair
exit

Sair de um comando, como quando usa o git log por exemplo
q

Zerar alterações da branch
git clean -d -x -f

Reinicia a master para origin/master
$ git reset --hard origin/master

Diferença de arquivos entre branchs
$ git diff -- caminhoenomedoarquivo branch1..branch2

Outras Dicas
- Auto completar funciona usando a tecla TAB
Exemplo: git checkout Bran<TAB>

- É possível configurar alias para os comandos, exemplos:
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status

- Referências completas nos links http://git-scm.com/book/en e http://gitready.com/

Espero ter colaborado!