Your SlideShare is downloading. ×
0
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
HTML5 Geolocation API
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 Geolocation API

3,923

Published on

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

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,923
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
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

Transcript

  • 1. HTML5 Geolocation API<br />Никита Лукьянец <br />Департамент стратегических технологий Microsoftnikital@microsoft.com@nikiluk, Twitter<br />
  • 2. О чем пойдёт речь?<br />К чему нам HTML5<br />Что значит “локально”<br />Use Cases<br />Пару простых примеров<br />
  • 3. геолокация<br />семантика<br />l.storage, l.db<br />
  • 4.
  • 5. геолокация<br />
  • 6. Что значит локально?<br />
  • 7. Локация:Контекст и Релевантность<br />
  • 8. Что определяет местность?<br />
  • 9. Что определяет местность?<br />Киев | Kyiv |Київ |Kiew<br />
  • 10. Что определяет местность?<br />
  • 11. Что определяет местность?<br />
  • 12. C чего начать?<br />
  • 13. 2 базовых метода:<br />IP<br />Триангуляция<br />GPS<br />Wi-Fi<br />Вышка<br />
  • 14. IP геолокация<br />
  • 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. Триангуляция<br />WiFi ~ 20 м<br />GPS ~ 10 м<br />Вышка сотовой связи ~ 1 км<br />
  • 17. Короткий ответ:<br />Гибрид<br />
  • 18. W3C Geolocation API<br />navigator.geolocation.getCurrentPosition(function(pos){<br />//show map at (pos.coords.latitude, pos.coords.longitude)<br />});<br />
  • 19. Пример№1<br />http://lukianets.com/uxnext/helloworld.html<br />
  • 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. Объекты 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. + 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. Пример№2<br />http://lukianets.com/uxnext/bing.html<br />
  • 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. + Опции<br />interface PositionOptions{<br />attribute booleanenableHighAccuracy;<br />attribute long timeout;<br />attribute long maximumAge;<br />};<br />
  • 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. Слежение!<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. Резюме<br />Геолокация = релевантность<br />Гибридное решение может быть дешевле<br />HTML5 => мобильный веб<br />
  • 29. ?<br />Никита Лукьянецnikital@microsoft.comtwitter.com/nikiluk<br />

×