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

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

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

Statistics

Views

Total Views
3,878
Views on SlideShare
3,744
Embed Views
134

Actions

Likes
0
Downloads
15
Comments
0

4 Embeds 134

http://uxnext.org.ua 127
http://uxx.azurewebsites.net 4
http://www.uxnext.org.ua 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Geolocation API HTML5 Geolocation API Presentation Transcript

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