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

1. HTML5 Geolocation API Никита Лукьянец Департамент стратегических технологий Microsoftnikital@microsoft.com@nikiluk, Twitter

2. О чем пойдёт речь? К чему нам HTML5 Что значит “локально” Use Cases Пару простых примеров

3. геолокация семантика l.storage, l.db

5. геолокация

6. Что значит локально?

7. Локация:Контекст и Релевантность

8. Что определяет местность?

9. Что определяет местность? Киев | Kyiv |Київ |Kiew

10. Что определяет местность?

11. Что определяет местность?

12. C чего начать?

13. 2 базовых метода: IP Триангуляция GPS Wi-Fi Вышка

14. IP геолокация

15. Поставщики: MaxMind- http://www.maxmind.com Quova- http://www.quova.com IPligence- http://www.ipilgence.com IP2Location - http://www.ip2location.com

16. Триангуляция WiFi ~ 20 м GPS ~ 10 м Вышка сотовой связи ~ 1 км

17. Короткий ответ: Гибрид

18. W3C Geolocation API navigator.geolocation.getCurrentPosition(function(pos){ //show map at (pos.coords.latitude, pos.coords.longitude) });

19. Пример№1 http://lukianets.com/uxnext/helloworld.html

20. W3C Geolocation API Latest Published Version: http://www.w3.org/TR/geolocation-API/ Latest Editor's Draft: http://dev.w3.org/geo/api/spec-source.html

21. Объекты Position и Coordinates interface Position { readonly attribute Coordinates coords; readonly attribute DOMTimeStamptimestamp; }; interface Coordinates { readonly attribute double latitude; readonly attribute double longitude; readonly attribute double altitude; readonly attribute double accuracy; readonly attribute double altitudeAccuracy; readonly attribute double heading; readonly attribute double speed; };

22. + callback function showMap(pos) { //show map at pos.coords.latitude, pos.coords.longitude } function showError(err) { alert(err.message + ‘, ’ + err.code); } navigator.geolocation.getCurrentPosition(showMap, showError);

23. Пример№2 http://lukianets.com/uxnext/bing.html

24. + Объект ошибки локации interface PositionError { const unsigned short UNKNOWN_ERROR = 0; const unsigned short PERMISSION_DENIED = 1; const unsigned short POSITION_UNAVAILABLE = 2; const unsigned short TIMEOUT = 3; readonly unsigned short code; readonlyDOMStringmessage; };

25. + Опции interface PositionOptions{ attribute booleanenableHighAccuracy; attribute long timeout; attribute long maximumAge; };

26. Всё вместе function showMap(pos) { //show map at pos.coords.latitude, pos.coords.longitude } function showError(err) { alert(err.message + ‘, ’ + err.code); } navigator.geolocation.getCurrentPosition(showMap, showError, {enableHighAccuracy:true, maximumAge:300000, timeout:0});

27. Слежение! function moveMap(pos) { //update map to pos.coords.latitude, pos.coords.longitude } function showError(err) { alert(err.message + ‘, ’ + err.code); } // Track location with periodic updates watchId = navigator.geolocation.watchPosition(moveMap, showError); function stopTracking() { navigator.geolocation.clearWatch(watchId); }

28. Резюме Геолокация = релевантность Гибридное решение может быть дешевле HTML5 => мобильный веб

29. ? Никита Лукьянецnikital@microsoft.comtwitter.com/nikiluk