Html5 tips

12
HTML5 Tips Geolocation

Transcript of Html5 tips

Page 1: Html5 tips

HTML5 Tips

Geolocation

Page 2: Html5 tips

Geolocation API

•  Hay más de una forma de saber donde estas, no necesariamente se ocupa un GPS.

•  IP, wireless network, torre de telefono, GPS

Page 3: Html5 tips

Geolocation API

•  El usuario puede decidir compartir su ubicación con sitios de confianza.

•  Se hace usando Javascript!

Page 4: Html5 tips

Geolocation API

•  Compatibilidad Actual

Page 5: Html5 tips

Geolocation API

•  Pasos: 1.  Revisar compatibilidad 2.  Pedir permiso al usuario 3.  Ubicar!

Page 6: Html5 tips

Geolocation API •  Compatibilidad:

if (Modernizr.geolocation) { // esta al dia!, ver si quiere usarlo? } else { // salado el usuario , no tiene un mejor browser.. }

Page 7: Html5 tips

Geolocation API

•  Permiso se pide automático: if (Modernizr.geolocation) { // esta al dia!, ver si quiere usarlo?

navigator.geolocation.getCurrentPosition(show_map); } else { // salado el usuario, no tiene un mejor browser.. Reirse del mae. } Esto muestra una alerta en el browser, y el usuario DEBE dar permiso.

Page 8: Html5 tips

Geolocation API

•  Si el mae no dio Permiso L: if (Modernizr.geolocation) { // esta al dia!, ver si quiere usarlo?

navigator.geolocation.getCurrentPosition( show_map, handle_error); } else { // salado el usuario , no tiene un mejor browser.. } Ni modo hay que manejar errores.

Page 9: Html5 tips

Geolocation API •  Si el mae no dio Permiso L:

function handle_error(err) {

if (err.code == 1) { // user said no! } if (err.code == 2) { // No se pudo ubicar por algun error de red u otro… } if (err.code == 3) { // el famoso TimeOut … }

}

Page 10: Html5 tips

Geolocation API

•  Si tenemos permiso y ubicación J: function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude;

// let's show a map or do something interesting! } Ademas, se puede tener dependiendo: Altitutud, velocidad, vista al norte, nivel de exactitud..

Page 11: Html5 tips

Geolocation API

•  MEGA DEMO

Page 12: Html5 tips

Como? •  Chrome uses Google Location Services. •  Firefox on Windows uses Google Location

Services. •  Firefox on Linux uses GPSD -

http://catb.org/gpsd/. I’m not sure if this includes Android. I haven’t had a chance to test it yet.

•  Internet Explorer 9+ uses the Microsoft Location Service.

•  Safari on iOS uses Apple Location Services for iPhone OS 3.2+.