Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

HTML5 Geolocation API

4.589 visualizaciones

Publicado el

Presentation from HTML5 Camp, UXnext for designers, developers and UX professionals

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

HTML5 Geolocation API

  1. 1. HTML5 Geolocation API<br />Никита Лукьянец <br />Департамент стратегических технологий Microsoftnikital@microsoft.com@nikiluk, Twitter<br />
  2. 2. О чем пойдёт речь?<br />К чему нам HTML5<br />Что значит “локально”<br />Use Cases<br />Пару простых примеров<br />
  3. 3. геолокация<br />семантика<br />l.storage, l.db<br />
  4. 4.
  5. 5. геолокация<br />
  6. 6. Что значит локально?<br />
  7. 7. Локация:Контекст и Релевантность<br />
  8. 8. Что определяет местность?<br />
  9. 9. Что определяет местность?<br />Киев | Kyiv |Київ |Kiew<br />
  10. 10. Что определяет местность?<br />
  11. 11. Что определяет местность?<br />
  12. 12. C чего начать?<br />
  13. 13. 2 базовых метода:<br />IP<br />Триангуляция<br />GPS<br />Wi-Fi<br />Вышка<br />
  14. 14. IP геолокация<br />
  15. 15. Поставщики:<br />MaxMind- http://www.maxmind.com<br />Quova- http://www.quova.com<br />IPligence- http://www.ipilgence.com<br />IP2Location - http://www.ip2location.com<br />
  16. 16. Триангуляция<br />WiFi ~ 20 м<br />GPS ~ 10 м<br />Вышка сотовой связи ~ 1 км<br />
  17. 17. Короткий ответ:<br />Гибрид<br />
  18. 18. W3C Geolocation API<br />navigator.geolocation.getCurrentPosition(function(pos){<br />//show map at (pos.coords.latitude, pos.coords.longitude)<br />});<br />
  19. 19. Пример№1<br />http://lukianets.com/uxnext/helloworld.html<br />
  20. 20. W3C Geolocation API<br />Latest Published Version: http://www.w3.org/TR/geolocation-API/<br />Latest Editor's Draft: http://dev.w3.org/geo/api/spec-source.html<br />
  21. 21. Объекты Position и Coordinates<br />interface Position {<br />readonly attribute Coordinates coords;<br />readonly attribute DOMTimeStamptimestamp;<br />};<br />interface Coordinates {<br />readonly attribute double latitude;<br />readonly attribute double longitude;<br />readonly attribute double altitude;<br />readonly attribute double accuracy;<br />readonly attribute double altitudeAccuracy;<br />readonly attribute double heading;<br />readonly attribute double speed;<br />};<br />
  22. 22. + callback<br />function showMap(pos) {<br />//show map at pos.coords.latitude, pos.coords.longitude<br />}<br />function showError(err) {<br />alert(err.message + ‘, ’ + err.code);<br />}<br />navigator.geolocation.getCurrentPosition(showMap, showError);<br />
  23. 23. Пример№2<br />http://lukianets.com/uxnext/bing.html<br />
  24. 24. + Объект ошибки локации<br />interface PositionError {<br />const unsigned short UNKNOWN_ERROR = 0;<br />const unsigned short PERMISSION_DENIED = 1;<br />const unsigned short POSITION_UNAVAILABLE = 2;<br />const unsigned short TIMEOUT = 3;<br />readonly unsigned short code;<br />readonlyDOMStringmessage;<br />};<br />
  25. 25. + Опции<br />interface PositionOptions{<br />attribute booleanenableHighAccuracy;<br />attribute long timeout;<br />attribute long maximumAge;<br />};<br />
  26. 26. Всё вместе<br />function showMap(pos) {<br />//show map at pos.coords.latitude, pos.coords.longitude<br />}<br />function showError(err) {<br />alert(err.message + ‘, ’ + err.code);<br />}<br />navigator.geolocation.getCurrentPosition(showMap, showError,<br />{enableHighAccuracy:true, maximumAge:300000, timeout:0});<br />
  27. 27. Слежение!<br />function moveMap(pos) {<br />//update map to pos.coords.latitude, pos.coords.longitude<br />}<br />function showError(err) {<br />alert(err.message + ‘, ’ + err.code);<br />}<br />// Track location with periodic updates<br />watchId = navigator.geolocation.watchPosition(moveMap, showError);<br />function stopTracking() {<br />navigator.geolocation.clearWatch(watchId);<br />}<br />
  28. 28. Резюме<br />Геолокация = релевантность<br />Гибридное решение может быть дешевле<br />HTML5 => мобильный веб<br />
  29. 29. ?<br />Никита Лукьянецnikital@microsoft.comtwitter.com/nikiluk<br />

×