Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
HTML5 Geolocation API<br />Никита Лукьянец <br />Департамент стратегических технологий Microsoftnikital@microsoft.com@niki...
О чем пойдёт речь?<br />К чему нам HTML5<br />Что значит “локально”<br />Use Cases<br />Пару простых примеров<br />
геолокация<br />семантика<br />l.storage, l.db<br />
геолокация<br />
Что значит локально?<br />
Локация:Контекст и Релевантность<br />
Что определяет местность?<br />
Что определяет местность?<br />Киев | Kyiv |Київ |Kiew<br />
Что определяет местность?<br />
Что определяет местность?<br />
C чего начать?<br />
2 базовых метода:<br />IP<br />Триангуляция<br />GPS<br />Wi-Fi<br />Вышка<br />
IP геолокация<br />
Поставщики:<br />MaxMind- http://www.maxmind.com<br />Quova- http://www.quova.com<br />IPligence- http://www.ipilgence.com...
Триангуляция<br />WiFi ~ 20 м<br />GPS ~ 10 м<br />Вышка сотовой связи ~ 1 км<br />
Короткий ответ:<br />Гибрид<br />
W3C Geolocation API<br />navigator.geolocation.getCurrentPosition(function(pos){<br />//show map at (pos.coords.latitude, ...
Пример№1<br />http://lukianets.com/uxnext/helloworld.html<br />
W3C Geolocation API<br />Latest Published Version: http://www.w3.org/TR/geolocation-API/<br />Latest Editor's Draft: http:...
Объекты Position и Coordinates<br />interface Position {<br />readonly attribute Coordinates coords;<br />readonly attribu...
+ callback<br />function showMap(pos) {<br />//show map at pos.coords.latitude, pos.coords.longitude<br />}<br />function ...
Пример№2<br />http://lukianets.com/uxnext/bing.html<br />
+ Объект ошибки локации<br />interface PositionError {<br />const unsigned short UNKNOWN_ERROR = 0;<br />const unsigned sh...
+ Опции<br />interface PositionOptions{<br />attribute booleanenableHighAccuracy;<br />attribute long timeout;<br />attrib...
Всё вместе<br />function showMap(pos) {<br />//show map at pos.coords.latitude, pos.coords.longitude<br />}<br />function ...
Слежение!<br />function moveMap(pos) {<br />//update map to pos.coords.latitude, pos.coords.longitude<br />}<br />function...
Резюме<br />Геолокация = релевантность<br />Гибридное решение может быть дешевле<br />HTML5 => мобильный веб<br />
?<br />Никита Лукьянецnikital@microsoft.comtwitter.com/nikiluk<br />
Nächste SlideShare
Wird geladen in …5
×

HTML5 Geolocation API

4.581 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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 />

×