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 />
Upcoming SlideShare
Loading in...5
×

HTML5 Geolocation API

3,977

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,977
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

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

×