Para usar, basta chamar o método toSource() em um objeto:

alert(objeto.toSource())

E você verá todos os argumentos da instância “objeto”.

Com a API Geolocation que está vindo com HTML5, saber a localização de quem visita seu site se tornou bem simples. As aplicações para esta API são inúmeras e a qualidade do serviços prestados por sites podem melhorar significativamente com esta facilidade, e o melhor, de forma gratuita.

Lembrando que nem todos os navegadores novos suportam esta API. Fiz testes no Google Chrome 5.0.375.99, Firefox 3.6.6 e no Opera 10.60 (todos na versão Linux, claro). Li por aí que o Internet Explorer 8 tem uma implementação de teste. Então se alguém testar no IE, favor deixar nos comentários informações sobre seu suporte.

A API Geolocation prevê a captura da posição geográfica, ou seja, latitude e longitude. E isso já resolve tudo. Com as coordenadas geográficas é possível integrar com outras ferramentas e obter o logradouro e até mesmo integrando com o Google Maps gerar um mapa com a localização do usuário.

Lembrando: Se você tem dúvida se o seu navegador suporta esta API, use o site html5teste.com e procure por Geolocation.

Segurança

Se você está preocupado com a segurança e não quer que determinados sites saibam sua localização, a documentação da API prevê autorização prévia do usuário para o compartilhamento dessa informação com o site em que você está navegando.

Ao acessar um site que deseja utilizar sua localização para agregar algum serviço, provavelmente você verá a mensagem abaixo (Opera):

Muito mais justo do que qualquer site saber a sua localização sem o seu consentimento.

Exemplo Simples: Obtendo as Coordenadas Geográficas

Para entender o funcionamento da API vamos a um simples exemplo para obter as Coordenadas Geográficas:

// verifica o suporte do navegador a API Geolocation
if(navigator.geolocation){
	// Obtem a posição atual
	navigator.geolocation.getCurrentPosition(

	// Em caso de sucesso, obtem a latitude e a longitude
	function(position){
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		alert('Latitude:' + lat + ', Longitude: ' + lon);
	},
	// Caso ocorra algum erro (Ex.: O usuário não autorizar o compartilhamento da localização)
	function(error){
		alert('Erro ao capturar localização geográfica.');
	});
}
// Caso o navegador não tenha suporte
else{
	alert('Seu navegador não tem suporte a API Geolocation.');
}

Clique aqui para ver o exemplo funcionando.

Agora que temos as Coordenadas Geográficas, o que fazer com esses números?

Podemos simplesmente saber em qual cidade se localiza essas coordenadas:

Obtendo o Endereço Através das Coordenadas

Existem algumas maneiras de se obter o endereço através de coordenadas. Este processo é chamado de “reverse geo-coding”. Como no Brasil nós não temos um web service que faz esse trabalho a exemplo do geoNames.org que possui os endereços dos EUA, nós temos que arrumar outra solução.

Então vamos criar uma solução utilizando a API do Google Maps. De acordo com os Termos e Utilização da API do Google Maps, você somente pode usar essas informações para exibi-las em um mapa. Qualquer outra forma de exibição é proibida. Porém, existe um meio de extrair essas informações sem imprimi-las em um mapa e que será demonstrado. Lembrando que o código a seguir é apenas um estudo de caso e não pode ser utilizado por ir contra os Termos de Utilização da API do Google Maps.

Para começar, vamos precisar chamar a API do Google Maps e para isso antes temos que gerar uma Chave para autenticação de acordo com o domínio que você for utilizar:

<script type="text/javascript" src=http://maps.google.com/maps?file=api&v=2.x&key=sua-chave"></script>

Para conseguir obter os dados de endereçamento, vamos utilizar um método chamado GClientGeocoder. Originalmente, este método serve para gerar um endereço que será marcado em um mapa (como no último exemplo deste artigo). Mas não vamos trabalhar com mapas ainda. O código a seguir é capaz de pegar informações separadamente, como na imagem abaixo.

Vamos aproveitar o primeiro exemplo para obter a Latitude e a Longitude da sua localização e depois pegar os dados do endereço. Veja o código a seguir:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o GeoCoder
			var geocoder = new GClientGeocoder();
			// Informamos a localização e chamamos uma função no retorno da solicitação
			geocoder.getLocations("("+lat+','+lon+")",localizacao);
			//alert(geocoder);

			function localizacao(retorno){
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					// Placemark é o objeto que contém as infos do endereço
					// Veja no exemplo as informações que contém no Placemark
					endereco = retorno.Placemark[0];
					alert(endereco.address);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Até aqui já obtivemos as Coordenadas Geográficas, já conseguimos as Informações de Endereço e agora vamos mostrar no Mapa a localização do usuário.

Exibindo a Localização no Mapa com Google Maps

Para exibir no mapa, vamos continuar utilizando a API do Google Maps modificando o exemplo acima. Veja como fica:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o Mapa
			map = new GMap2(document.getElementById("mapa"));
			// Centralizando na localização
			map.setCenter(new GLatLng(lat,lon), 15);
			// Iniciando o GeoCoder para fazer o Reverter
			geocoder = new GClientGeocoder();
			// Marcando a localização no Mapa
			geocoder.getLocations('('+lat+','+lon+')', exibeEnd);

			// Personalizando a marcação
			function exibeEnd(retorno){
				map.clearOverlays();
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					place = retorno.Placemark[0];
					point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
					marker = new GMarker(point);
					map.addOverlay(marker);
					marker.openInfoWindowHtml(
					'Coordenadas: ' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '
' +
					'Logradouro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare.ThoroughfareName+ '' +
					'Bairro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.DependentLocalityName + '
' +
					'Cidade: ' + place.AddressDetails.Country.AdministrativeArea.Locality.LocalityName + '
' +
					'País: ' + place.AddressDetails.Country.CountryNameCode);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Nenhum exemplo desse blog armazena informações do usuário e serve apenas para demonstrar o funcionamento da API Geolocation.

Conclusão

A API Geolocation realmente abre um leque de possibilidades e o que podemos esperar são aplicações cada vez mais ricas e interativas, que possam oferecer serviços de acordo com a localização do usuário, assim como já fazem alguns aplicativos para dispositivos móveis, ou simplesmente uma empresa poderá exibir em sua página de contato um “como chegar” a partir da sua localização. Isso pode ser facilmente implementado com poucas modificações no código do artigo “Traçando Rota com o Google Maps” publicando neste Blog.

Então segue um simples código para resolver esta situação de forma bem simples:

$(function(){
	$('#id-do-item-pai, #sub-menu').mouseover(function(){
		$('#sub-menu').css('display','block');
	}).mouseout(function(){
		$('#sub-menu').css('display','none');
	});
});

E o HTML seria algo como:

	Ítem Pai

Sub ítem 01
Sub ítem 02

Simples assim.

O bom dessas ferramentas, é que elas podem ser usadas em sistemas CMS onde usuários leigos podem inserir tranquilamente a imagem da matéria de capa sem ter que depender de um designer (e sem estragar o layout dele).

Uma ferramenta poderosa é o Jcrop, ela oferece bloqueio de proporção, animação e você ainda pode personalizar o css e deixar mais a cara da sua aplicação. E ainda é cross-browser.

Como usar é bem simples, basta incluir o arquivo do plugin e aplicar o plugin com o seguinte comando:

$(function(){
	$('#id-da-imagem').Jcrop();
});

Claro que esta é a forma mais simples, mas na área de exemplos do site existem os códigos para você incrementar este código da maneira que você precisar.

Mas não pára por aí, não adianta selecionar a parte da imagem que você quer se não houver o corte da imagem. Para isso vou usar o exemplo do próprio autor utilizando a biblioteca GD do PHP.

Antes de mais nada, precisamos postar as posições a serem cortadas. Para isso, utilize campos input hidden da seguinte forma:

E a seguinte função para popular esses campos:

jQuery(function(){
        jQuery('#id-da-imagem').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
        });
});

function updateCoords(c)
{
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
};

Postado as coordenadas da imagem, utilizamos o seguinte código PHP para criar a nova imagem:

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

No entanto, a maioria dos plugins que encontrei eram já desenhados pensando em imagens. Os que eram mais genéricos, eram grandes, de difícil personalização.

Perdi tanto tempo testando que nem me lembrei de como é fácil fazer as coisas com jQuery. Foi aí que resolvi escrever um código simples que resolvesse o meu problema.

E a seguir está o código. Simples, fácil de personalizar e que resolveu a situação.

var tamCarrosel = ($("#carroselEfeito li").length-1);

$('#carrosel_proximo').click(function() {
	if(i == 0)
		$('#seta_esquerda a').css({'backgroundPosition':'0 0'});
	if(i < tamCarrosel){
		$('#carroselEfeito li').eq(i).animate({ left : "-"+700}, function() {
			$('#carroselEfeito li').eq(i+1).css({ left: "700px"});
			$('#carroselEfeito li').eq(i).hide();
			$('#carroselEfeito li').eq(i+1).animate({left: "-"+0});
			i++;
			if(i == tamCarrosel)
				$('#seta_direita a').css({'backgroundPosition':'0 75px'});
		});
	}
});
$('#carrosel_anterior').click(function(){
	if(i == tamCarrosel)
		$('#seta_direita a').css({'backgroundPosition':'0 0'});
	if(0 < tamCarrosel && i>0){
		$('#carroselEfeito li').eq(i).animate({left : "+"+700}, function(){
			$('#carroselEfeito li').eq(i-1).css({right: "700px"});
			$('#carroselEfeito li').eq(i).hide();
			$('#carroselEfeito li').eq(i-1).animate({left: "-"+0});
			i--;
			if(i == 0)
				$('#seta_esquerda a').css({'backgroundPosition':'0 75px'});
		});
	}
});

E o HTML, mais simples ainda:

ítem 01
ítem 02
ítem n

Vou sempre postar os plugins mais interessantes que já testei para que outros economizem o tempo que já gastei pesquisando sobre. Obviamente que algumas cada caso é um caso.

A tendência mundial de Cloud Computing está se firmando a cada dia. Novos aplicativos plataforma web são lançados diariamente e nas mais diversas áreas.

Muita coisa boa vem sendo feita. Hoje praticamente para tudo que você precisar, você vai encontrar um aplicativo na web, desde um controle financeiro pessoal a gráficos na versão online do Photoshop.

Essa tendência de aplicativos nas nuvens não é por acaso, as tecnologias web (principalmente de interface) vem tendo uma evolução muito grande nos últimos tempos. Os navegadores estão alterando seus compiladores JavaScript para que eles se  tornem mais rápidos e confiáveis, os avanços do HTML5, CSS3, e é claro não podemos deixar de lembrar na convergência para o uso de padrões web que a cada dia que passa ganha mais força.

O uso de Frameworks sem dúvida alguma é algo que realmente enriquece a aplicação. Hoje o jQuery tem plugins para praticamente qualquer coisa que você precise, com a vantagem de um código cross-browser, organizado e de fácil personalização (ao contrário das ferramentas do Visual Studio .Net da Microsoft).

Outro framework que tenho utilizado para algumas aplicações web é o ExtJS, que está em sua terceira versão do Framework Javascript, e na minha opinião é o que tem elementos de interfaces mais ricas que as demais. Outra coisa que se destaca é a facilidade com que se cria elementos complexos como grid, menu e formulários. Já tem disponível desde a versão 2.0 a tradução para o português para calendário e outros elementos básicos. Outra vantagem é a facilidade de se abstrair o banco de dados podendo trabalhar com XML e Json. Vale lembrar que o ExtJS está licensiado pela GPL v3.0 e para uso comercial deve-se adquirir a licença.

Por último e não menos importante, vale ressaltar um grande avanço que está engatinhando e vem sendo impulsionado principalmente pelo Google que é o suporte offline de aplicações web. Isso vem sendo testado através do aplicativo Google Gears, que está em versão beta mas já trás módulos funcionais como:

• LocalServer Recursos de aplicativo de armazenamento em cache e servidor local (HTML, JavaScript, imagens etc.);
• Banco de dados Armazenamento local de dados em um banco de dados relacional que pode ser totalmente pesquisado;
• WorkerPool Seus aplicativos de web ficam com maior capacidade de resposta, executando de forma assíncrona as operações com uso intenso de recursos.

A versão 0.4 trouxe ainda Geolocation, Acesso a arquivos da máquina, dentre outras coisas. Vale lembrar que o Gears já vem instalado por padrão no Chrome, mas pode ser instalado no Firefox, IE e Safari (windows, linux e Mac).

O Google Gears realmente abre um caminho fantástico para aplicativos que requerem uma dependência mais crítica. Mais informações estão disponíveis no site do desenvolvedor da API.