0
HTML5 Geolocalizacion     Rodolfo Finochietti
HTML5 Geolocalizacion
Geolocalizacion•   Permite a los usuarios compartir su ubicación•   Muestra la posición de un usuario en el mapa•   Util p...
Demo
Arquitectura
Informacion de localizacionLa informacion de localizacion consisteen coordendas de latitud y longitud, einformacion de pre...
Informacion de localizacion• Dependiendo del dispositivo, metadata  adicional puede ser provista:  • Altitud  • Velocidad•...
Fuentes de informacion de localizacion• Un dispositivo puede usar alguna de las  siguientes fuentes:  • IP Address  • Coor...
Privacidad
Usando la API de Geolocalizacion          Copyright © 2010, Kaazing Corporation,. All rights reserved.
JavaScript //Checking for browser support: if(navigator.geolocation) {      document.getElementById("support").innerHTML =...
Tipos• Hay dos tipos:  1. Por unica vez     (getCurrentPosition)  2. Actualizacion de la posicion     (watchPosition)
JavaScript //One shot request void getCurrentPosition(       in PositionCallback successCallback,       in optional Positi...
JavaScript //Update the UI function updateLocation(position) {   var latitude = position.coords.latitude;   var longitude ...
Codigos de error•   UNKNOWN_ERROR (code 0)•   PERMISSION_DENIED (code 1)•   POSITION_UNAVAILABLE (code 2)•   TIMEOUT (code...
JavaScript //Repeated position updates var watchId = navigator.geolocation.watchPosition(           updateLocation, handle...
Integración de con Google Maps• Las coordenadas no son fáciles de descifrar sin  verlas en un mapa• Google Maps tiene sopo...
JavaScript //Show coordinates on a Google Map // Create a Google Map //See Google API for more detail var map = new google...
Browser Support•   Firefox 3.5•   Safari 5.0•   Chrome 5.0•   Opera 10.6•   IE 9+
¿Preguntas?
rodolfof@lagash.comhttp://twitter.com/rodolfof   http://shockbyte.net     ¡GRACIAS!
Upcoming SlideShare
Loading in...5
×

HTML5 Geolocalizacion

4,904

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,904
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • The following steps are shown in the diagram: A user navigates to a location-aware application in the browser.The application web page loads and requests coordinates from the browser by making a Geolocation function call. The browser intercepts this and requests user permission. Let's assume that the permission is granted.The browser retrieves coordinate information from the device it is running on. For example, the IP address, Wi-Fi, or GPS coordinates. This is an internal function of the browser.The browser sends these coordinates to a trusted external location service, which returns a detailed location that can now be sent back to the host of the HTML5 Geolocation application.
  • The successCallback function parameter tells the browser which function you want called when the location data is made available. This is important because operations such as fetching location data may take a long time to complete. No user wants the browser to be locked up while the location is retrieved, and no developer wants his program to pause indefinitely—especially because fetching the location data will often be waiting on a user to grant permission. The successCallback is where you will receive the actual location information and act on it.However, as in most programming scenarios, it is good to plan for failure cases. It is quite possible that the request for location information may not complete for reasons beyond your control, and for those cases you will want to provide an errorCallback function that can present the user with an explanation, or perhaps make an attempt to try again. While optional, it is recommended that you provide one.Finally, an options object can be provided to the HTML5 Geolocation service to fine-tune the way it gathers data. This is an optional parameter that we will examine later.
  • Transcript of "HTML5 Geolocalizacion"

    1. 1. HTML5 Geolocalizacion Rodolfo Finochietti
    2. 2. HTML5 Geolocalizacion
    3. 3. Geolocalizacion• Permite a los usuarios compartir su ubicación• Muestra la posición de un usuario en el mapa• Util para Tagging de contenido (fotos/videos)• Navegación Turn-by-turn• Alertar de puntos de interés• Social networking
    4. 4. Demo
    5. 5. Arquitectura
    6. 6. Informacion de localizacionLa informacion de localizacion consisteen coordendas de latitud y longitud, einformacion de presicion
    7. 7. Informacion de localizacion• Dependiendo del dispositivo, metadata adicional puede ser provista: • Altitud • Velocidad• Si no hay informacion adicional se recibe a null
    8. 8. Fuentes de informacion de localizacion• Un dispositivo puede usar alguna de las siguientes fuentes: • IP Address • Coordinate triangulation • Global Positioning System (GPS) • Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth • GSM or CDMA cell phone IDs • User defined
    9. 9. Privacidad
    10. 10. Usando la API de Geolocalizacion Copyright © 2010, Kaazing Corporation,. All rights reserved.
    11. 11. JavaScript //Checking for browser support: if(navigator.geolocation) { document.getElementById("support").innerHTML = "HTML5 Geolocation is supported."; } else { document.getElementById("support").innerHTML = "HTML5 Geolocation is not supported."; }
    12. 12. Tipos• Hay dos tipos: 1. Por unica vez (getCurrentPosition) 2. Actualizacion de la posicion (watchPosition)
    13. 13. JavaScript //One shot request void getCurrentPosition( in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options); //Access user’s position navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);
    14. 14. JavaScript //Update the UI function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; document.getElementById("latitude").innerHTML = latitude; document.getElementById("longitude").innerHTML = longitude; document.getElementById(“accuracy”).innerHTML = “This location is accurate within “ + accuracy + “ meters.” }
    15. 15. Codigos de error• UNKNOWN_ERROR (code 0)• PERMISSION_DENIED (code 1)• POSITION_UNAVAILABLE (code 2)• TIMEOUT (code 3) Copyright © 2010, Kaazing Corporation,. All rights reserved.
    16. 16. JavaScript //Repeated position updates var watchId = navigator.geolocation.watchPosition( updateLocation, handleLocationError); // do something with the location updates! // ... // Stop receiving location updates navigator.geolocation.clearWatch(watchId); Copyright © 2010, Kaazing Corporation,. All rights reserved.
    17. 17. Integración de con Google Maps• Las coordenadas no son fáciles de descifrar sin verlas en un mapa• Google Maps tiene soporte para HTML5 Geolocation
    18. 18. JavaScript //Show coordinates on a Google Map // Create a Google Map //See Google API for more detail var map = new google.maps.Map2(document.getElementById("map")); function updateLocation(position) { //pass the position to the Google Map and center it map.setCenter(new google.maps.LatLng( position.coords.latitude, position.coords.longitude, 13); // zoom level } navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);
    19. 19. Browser Support• Firefox 3.5• Safari 5.0• Chrome 5.0• Opera 10.6• IE 9+
    20. 20. ¿Preguntas?
    21. 21. rodolfof@lagash.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×