• Like
HTML5 Geolocation API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,817
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
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
    Никита Лукьянец
    Департамент стратегических технологий Microsoftnikital@microsoft.com@nikiluk, Twitter
  • 2. О чем пойдёт речь?
    К чему нам HTML5
    Что значит “локально”
    Use Cases
    Пару простых примеров
  • 3. геолокация
    семантика
    l.storage, l.db
  • 4.
  • 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