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.
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.
]]>Abrindo uma Conexão
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.
Criando uma Tabela
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.)
Executando Consultas
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:
Inserindo um Registro
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);
});
});
Lendo os Registros
// 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']);
});
});
Exemplo Funcional
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!
]]>Web Storage
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.
Web SQL Database
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:
- Internet Explorer 8.0 –Não Suporta
- Firefox 3.6.3 –Não Suporta
- Chrome 5.0 – Suporta (acho que desde a versão 4)
- Safari 5.0 –Suporta
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!
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.
Se você está pensando em trocar de aparelho, esta é a hora de fazer a escolha certa:
(clique para ampliar)
O Cloud Computing (ou Computação em Nuvens), está criando uma nova e promissora fase da internet. Não apenas para a internet, mas para a nova geração de softwares como conhecemos. O aumento da qualidade e da velocidade da internet tem mudado a vida de milhões e pessoas, ao mesmo tempo que os custos de armazenamento, processamento e largura de banda tem caído de preço formam o principal aspecto que permitiu o surgimento de novos conceitos de software.
A Web se tornou o nosso album de fotos, nossa loja de livros, nossa enciclopédia, nosso agênte de viagens e hoje cobre a maior parte das coisas feitas offline. A tendência agora é que as corporações passem a utilizar a web como plataforma e passe a focar seus esforços apenas em seus negócios. As empresas começam a pensar fora de seus firewalls corporativos.
Os benefícios da computação em nuvens são indiscutíveis. Software nas nuvens tornam aplicativos mais democráticos. Com a redução de custos de infra-estrutura, necessidade de altos investimentos, suporte, manutenção, e é claro, o valor de desenvolvimento e atualização de softwares para gerir os negócios, a virtualização de aplicativos faz com que empresas de pequeno porte tenham acesso a tecnologias antes restrita a grandes corporações. Há quem compare este novo modelo de software a propagação barata da energia elétrica.
Uma aplicação nas nuvens não permite apenas interligar escritórios distantes fisicamente. Para considerar a Internet como meio de transmissão ponto-a-ponto é, certamente, perder a oportunidade de uma rede multi-direcional e complexa de nós conectados de várias maneiras. A Web deixou de ser apenas um corredor para bits e bytes. Os dados não precisam mais residir em uma única aplicação. Numa era de integração e tendência de ‘widget‘, ‘dashboards‘ e ‘API‘ a interação com a aplicação não está mais restrita para a navegação dentro da própria interface do usuário.
Em Agosto, acontecerá em São Paulo um evento focado em Cloud Computing chamado Cloud Computing Summit Brasil. Acredito eu que seja o primeiro evento de relevância no Brasil focado no assunto. Palestrantes:
Cezar Taurion (IBM)
Varia (Amazon Web Service)
Marcos Sinhoreli (Xen)
Francisco Gioielli (Google Apps)
Antônio Carlos Pina (Tecla Internet)
]]>Ele também coloca aquele ícone nas pastas/arquivos para mostrar quais arquivos foram modificados, ignorados, etc. O que é bastante produtivo.
Suporta várias distribuições.
Clique aqui para escolher a distribuição e fazer o download.
Se você usa Ubuntu (Karmic and Lucid), segue o PPA:
ppa:rabbitvcs/ppa
]]>
Estava com problemas ao colocar um video Flash em FullScreen no Ubuntu e encontrei a solução no site omgubuntu de Londres:
Digite no terminal:
sudo mkdir /etc/adobe
sudo echo \”OverrideGPUValidation = 1\” >> /etc/adobe/mms.cfg
Pronto! Agora o Flash não vai mais ficar preto quando sair do Fullscreen.
]]>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:
Simples assim.
]]>