Your SlideShare is downloading. ×
0
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
HTML5 Geolocalizacion
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Geolocalizacion

4,897

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. HTML5 Geolocalizacion Rodolfo Finochietti
    • 2. HTML5 Geolocalizacion
    • 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. Demo
    • 5. Arquitectura
    • 6. Informacion de localizacionLa informacion de localizacion consisteen coordendas de latitud y longitud, einformacion de presicion
    • 7. Informacion de localizacion• Dependiendo del dispositivo, metadata adicional puede ser provista: • Altitud • Velocidad• Si no hay informacion adicional se recibe a null
    • 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. Privacidad
    • 10. Usando la API de Geolocalizacion Copyright © 2010, Kaazing Corporation,. All rights reserved.
    • 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. Tipos• Hay dos tipos: 1. Por unica vez (getCurrentPosition) 2. Actualizacion de la posicion (watchPosition)
    • 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. 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. 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. 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. 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. 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. Browser Support• Firefox 3.5• Safari 5.0• Chrome 5.0• Opera 10.6• IE 9+
    • 20. ¿Preguntas?
    • 21. rodolfof@lagash.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!

    ×