Tag: JavaScript

Formulário com GeoLocalização

Obs: este artigo pode ser lido em inglês em: https://medium.com/@sheldonled/form-with-geolocation-7c9cc0936732

Todos os dias preenchemos algum formulário na internet, e sabemos o quão chato é! Por exemplo, porque sempre temos que preencher informações de endereço? Porque o computador não simplesmente “tem” minha localização Deus sabe como? Bom, com HTML5 GeoLocation a experiência do usuário pode ficar bem melhor. Através do HTML5 Geolocation temos as coordenadas geográficas, e através da API de Geocodificação Google conseguimos o restante da informação

Eu assisti a uma palestra sobre melhores práticas em Web Mobile, e aprendi que pode ser uma boa ideia preencher os dados de endereço do formulário usando geolocalização. Você pode aprender mais sobre HTML5 GeoLocation na MDN, e você vai ver que essa API só fornece as coordenadas geográficas. Você pode ver no Can I Use o suporte dos navegadores para GeoLocation, mas por questões de privacidade, no navegador do usuário aparecerá uma pergunta se ele permite fornecer sua localização, ou seja, o preenchimento automático vai depender do usuário.

Uma vez que você tem as coordenadas geográficas do usuário, você pode mandar uma requisição à API Google de Geocodificação, para pegar as informações reais, como cidade, estado e cep. Estas informações podem vir erradas, então é importante deixar o input editável. A URL da API Google que vamos usar é a Geocodificação Reversa, e é mais ou menos assim:

https://maps.googleapis.com/maps/api/geocode/json?latlng=<latitude>,<longitude>

A informações entre tags devem ser substituidas por números reais, tipo assim:

http://maps.googleapis.com/maps/api/geocode/json?latlng=37.4319075,-122.137884

Bom, “talk is cheap show me the code”, Eu fiz um exemplo prático de como você pode usar isso no seu formulário:

Agora, Eu só quero que todo mundo (até eu) comece a usar isso porque é uma boa melhoria e economiza tempo.

OBS: Por questões de segurança, as requisições estão sendo feitas apenas dentro de sites com HTTPS, portanto preste atenção à isso.

Outra coisa, por algum motivo que ainda não descobri porque, em algumas versões do Firefox o código no Codepen não funciona, mas você pode copiar o código e colocá-lo num arquivo para testar que eu imagino que dê tudo certo =)

Sencha: ExtJS 5 Beta Lançado

Selo - ExtJS 5 Beta

No dia 03 de Abril de 2014 a Sencha tornou disponível publicamente a versão Beta do ExtJS 5 trazendo muitas novidades e mudanças importantes no framework  JavaScript que já é um padrão da indústria para a construção de aplicações SPA (Single Page Application) corporativas orientada a dados.

Essa versão vem com 3 principais focos:

  • Viabilizar o desenvolvimento multi-dispositivos
  • Não Revolucionar, Evoluir
  • Produtividade no Desenvolvimento

Já no que existe de novo alguns dos destaques são:

  • Duas formas de Vinculação de Dados (Data binding) agora com MVVM
  • Grid Gadgets
  • Gráficos otimizados para Toque
  • Roteamento

A uma grande quantidade e melhorias e aperfeiçoamento confira no links abaixo uma listagem completa de tudo que te de novo no ExtJS.

Links:

via Sencha Newsletter Abril de 2014

DOM: id dos elementos são variáveis globais

Vi no twitter e no facebook, algumas pessoas falando que para mostrar um elemento do HTML no Console do Groogle Chrome, você precisa apenas escrever o ID desse elemento. O @johnjbarton esclareceu que isso acontece porque todos os IDs dos elementos SÃO variáveis globais no javascript. Veja mais detalhes abaixo:

O Padrão:

O HTML5 especifica que o objeto window pode ter uma chave de propriedade na qual o valor dela é um elemento html se:

  • Existe exatamento 1 elemento DOM em que a propriedade ‘id’ tem o valor da chave
  • Existe exatamente 1 elemento DOM que a propriedade ‘name’ tem o valor da chave. O elemento deve ser um tipo: a, applet, area, embed, form, frame, frameset, iframe, img, object.

Exemplo, no site da Tribo do CI  você pode abrir o console do chrome e digitar: window[‘branding’] ou simplesmente branding. Aparecerá a tag header com id=’branding’. Se existe mais de uma tag encontrada, regras diferentes são aplicadas. Com isto em mente, veja outro exemplo abaixo:

<div id=”foo”></div>

O elemento acima pode ser acessado via window.foo ou, como todas as propriedades de window, apenas foo. Por exemplo, no console do Chrome, você pode fazer:

> "foo" in window
    true
> foo
    <div id=?"foo">?</div>?

Firefox

No firefox funciona um pouco diferente

> "foo" in window
    false
> typeof foo  // Essa variável existe?
    object
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> foo
    [object HTMLDivElement]
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> "foo" in window
    true

O que aconteceu? inicialmente não existe a propriedade window.foo. Mas após a primeira chamada, seja diretamente ou pela variável global, a propriedade é criada.

Conclusão

Existe uma padronização do HTML5 na qual os ID’s dos elementos se tornam propriedades de window, por isso que essa facilidade é uma novidade para nós. Cabe agora, aos maníacos de boas práticas, nos dizer qual seria a maneira mais correta de utilizar essa feature.

Esse post é uma versão brasileira de 2ality – DOM: elemtn IDs are global variables.