O Método toSource() do Javascript é uma mão na roda para quem trabalha com JavaScript orientado a objetos e consiste basicamente em mostrar como String todos os argumentos de um objeto.
Para usar, basta chamar o método toSource() em um objeto:
alert(objeto.toSource())
E você verá todos os argumentos da instância “objeto”.
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 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.
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.
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:
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.
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.
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.
Como vimos no artigo anterior, uma das novidades do HTML 5 é o Web SQL Database, que permite utilizar SQL para armazenar dados no lado do cliente através do SQLite. Vamos ver o seu funcionamento passo-a-passo a seguir:
var db = openDatabase('CONTATOS', '0.1', 'Lista de contatos', 200000);
O código acima cria um objeto de banco de dados “db” com 4 argumentos:
1. Nome do banco de dados;
2. Versão;
3. Descrição;
4. Tamanho estimado da base de dados.
Não se preocupe com o tamanho da base de dados pois ela é flexível. Aparentemente ao exceder o tamanho o navegador mostrará ao usuário uma janela pedindo autorização para expandir o espaço.
Para testar se a conexão foi criada com sucesso, basta verificar se “db” é nulo:
if (! db) alert ("Falha ao conectar no banco de dados.");
É muito importante fazer este teste de conexão antes de qualquer outro código pois existem várias razões pela qual o navegador poderá negar acesso ao banco, como por exemplo por questões de segurança e espaço.
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS contatos (id INTEGER PRIMARY KEY AUTOINCREMENT, nome VARCHAR, tel INTEGER)');
});
(Para saber os Datatypes do SQLite visite a página Datatypes In SQLite Version 3.)
O bacana desta API é que ela trata as operações como transações. Com transações é possível reverter as operações em caso de erro. Cada transação pode conter várias SQL e caso alguma apresente falha, nada é alterado no banco, preservando sua consistência.
Há também erro e callbacks de sucesso na transação, assim você pode gerenciar os erros, mas é importante entender que as operações têm a capacidade de reverter as mudanças.
Transação é uma simples função que contém os códigos SQL:
db.transaction(function (tx) {
// Aqui acontece a mágina com a SQL utilizando o objeto "tx" que foi passado por parâmetro
});
Para ficar mais claro, vamos a alguns exemplos:
db.transaction(function(tx) {
tx.executeSql('INSERT INTO contatos (nome, tel) VALUES (?,?)', ['Marcos', '2222-3333'], null, function(tx, e) {
// caso ocorra algum erro
alert(e.message);
});
});
// busca os contatos do banco
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) {
for (i = 0; i &lt; resultado.rows.length; i++)
alert(resultado.rows.item(i)['nome']);
});
});
Atenção, verifique se o seu navegador tem suporte a Web SQL Database antes de clicar no exemplo.
Simples Exemplo de uso do HTML Web SQL Storage.
Gostou? Deixe um comentário!
Ouvimos e lemos todos os dias sobre as funcionalidades do HTML5 e suas benfeitorias para um design mais interativo e eficiente, porém existe uma novidade que ainda foi pouco comentada não diz respeito a layout especificamente.
O Web Storage (ou DOM Storage) é uma API que permite gravar dados no lado do cliente. Provavelmente no futuro ela será responsável pela extinção do Cookie.
Suas vantagens são grandes em relação ao Cookie, a começar pela capacidade de armazenamento de dados, que varia de navegador para navegador mas mantém uma média de 5mb por domínio, outra vantagem é que ao contrário do cookie ele não tem data para expirar, isso acontece somente por questões de espaço e falha de segurança. Um detalhe interessante, é que os dados não são transitados a cada requisição de página com o servidor, como faz o cookie.
Para quem quiser testar a API Web Storage:
Para definir uma variável:
sessionStorage.setItem('chave','valor');
e para resgata-la:
sessionStorage.getItem('chave');
No entanto, o Web Storage continua sendo uma forma simples de armazenamento de dados chave/valor, o que não resolve o problema de aplicações que desejam funcionar de maneira Offline como faríamos com o extinto Google Gears.
Para um armazenamento mais elaborado e de forma estruturada, o W3C criou Web SQL Database. Este é o cara que faz a revolução no armazenamento de dados no lado do cliente.
Como parte do HTML 5, o W3C está trabalhando em um rascunho do Web SQL Database API, uma especificação que abrange armazenar e acessar dados através de SQL. A especificação da linguagem SQL que é descrito na documentação é o de SQLite 3.6.19.
Esta API permite que as páginas da web interajam com um banco de dados incorporado no cliente, o que é útil para aplicações que desejam armazenar dados localmente ou para navegação offline.
Infelizmente nem todas as versões novas de navegadores implementaram esta API:
Por ser um pouco maior, (vou colocar) coloquei o exemplo de utilização desta API no próximo artigo.
Queria saber a opinião das pessoas que leem este blog se tem ideias ou projetos em mente para utilização de recursos offline.
Então comente abaixo!
Pouca gente sabe, mas é possível traduzir arquivos inteiros de legendas (de filmes, documentários, séries, etc.) através do Google Translator Toolkit.
Além de arquivos .srt, também é possível traduzir outros arquivos como: html, doc, odt, txt, rtf e sub. Infelizmente o limite para upload de arquivo é de apenas 1 mb. Mas para legendas .srt isso é mais do que suficiente.
O mais bacana é que após o upload do arquivo ele divide a tela em duas partes e você pode fazer os ajustes da tradução.
Lembrando: Antes de fazer o download da legenda, é preciso marcar como concluída! clicando em: Editar -> Tradução Concluída. Se você não fizer isso, o arquivo baixado não vai vir completo.
