Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

Добавление на сайты возможности определения местоположения пользователя при помощи HTML5 Geolocation

by
Length:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

При работе с опытом пользователя может быть рискованным полагаться на предположения, однако некоторые из них могут позволить вам предоставить вашим пользователям более индивидуализированный опыт взаимодействия. Мы рассмотрим, как улучшить опыт взаимодействия пользователя за счет добавления на ваши веб-сайты возможности определения его местоположения.

Опыт пользователя занял одно из главным мест в области веб-дизайна в последние десять лет. Нас как пользователей постоянно просят предоставить обновленную информацию о себе. Все: от Твиттера, спрашивающего «Что происходит?», до Фейсбук, интересующегося, что нам «нравится». Все это позволяет этим компаниям, помимо прочего, составить ваш довольно подробный и точный профиль, благодаря чему они могут предоставить вам более персонализированный опыт пользователя.

Примерно в то же время, когда было объявлено о выходе HTML5, другой API был представлен нам W3C. Я вполне уверен, что вы, должно быть, слышали о нем – API Geolocation. За счет него на вашем сайте появляется возможность получать информацию о географическом местоположении при помощи JavaScript.


Как работает геолокация?

Данные о местоположении могут быть получены при помощи множества различных источников. Обычно на веб-сайтах они определялись бы исходя из IP-адреса посетителя. Далее на его основании при помощи сервиса WHOIS (* сокр. от who is who; сетевая интернет-программа, которая позволяет абонентам обращаться с запросами к хранимой в DDN NIC базе данных о пользователях сети, доменах, доступных сетях и прочих объектах. Здесь и далее примеч. пер.) был бы получен адрес физического местоположения посетителя за счет информации whois (* адрес, электронный адрес, номер телефона, контакты и т.д.). Однако с недавних пор стал общепринятым более популярный и точный способ получения этой информации – за счет использования встроенного GPS-чипа (* GPS – спутниковая система позиционирования, позволяющая с помощью специального приёмника осуществить быстрое автоматическое определение координат в любой точке мира (точность колеблется от 1 до 100 м) и скорости перемещения различных объектов на поверхности Земли и в воздушном пространстве). Такие чипы имеются в большинстве смартфонов и планшетов и являются причиной роста популярности сервисов с возможностью определения местоположения пользователя, которыми мы могли бы воспользоваться. Вспомните Foursquare (* мобильное приложение, предоставляющее информацию о местах, расположенных недалеко от текущего местоположения пользователей и рекомендуемых им для посещения на основании ранее полученной о них информации) или любое другое приложение, при помощи которого вы могли бы отметиться в различных заведениях.


Защита персональной информации пользователей сайта

В спецификации API Geolocation, выпущенной W3C, указано:

Пользовательский агенты не должны отсылать информацию о местоположении пользователя веб-сайтам без его согласия на это.

Перед тем как устройство или браузер смогут получить данные о местоположении посетителя, он должен для начала дать на это разрешение. Ниже показано, как это выглядит в Google Chrome:

Сейчас, как никогда, пользователи обращают внимание на то, какую информацию веб-сайты хранят о них, и ваши пользователи должны будут точно знать, для чего вы используете их данные. Проинформируйте их о том, для чего вам нужна эта информация, и подчеркните, как это поможет создать для них лучший опыт взаимодействия в сети.

При использовании веб-сайта или приложения с возможностью отметить себя на карте согласно установившейся практике следует контролировать количество информации, которой вы делитесь с другими людьми. Большинство приложений и сервисов, предоставляющих возможность поделиться своим местоположением, действительно предоставляют какую-то возможность контроля над персональной информацией, так что обязательно пользуйтесь этим и некогда не делитесь вашим домашний адресом.


Варианты использования возможности определения географического местоположения Интернет-пользователя

После добавления на ваш сайт возможности определения местоположения вы получаете возможность предоставить более точный и подходящий контент вашим пользователям. Давайте посмотрим, где может пригодиться информация о географическом местоположении пользователя.

Геомаркетинг

Геомаркетинг – относительно новый термин, определение которого может быть сформулировано следующим образом:

Использование географических данных в различных аспектах маркетинга, включая продажу и распространение товаров.

Хотя это и новый термин, фактический принцип геомаркетинга уже был популярен какое-то время. На Фейсбуке этот подход уже используется в течение некоторого времени. Фейсбук собрал бы при помощи него данные, связанные с местоположением пользователя, а затем показал бы рекламу, соответствующую найденному географическому региону. Google и другие поисковые системы также воспользовались этим принципом и добавляют для пользователей в список результатов поиска результаты, связанных с местоположением.

Краудсорсинг

(* краудсорсинг – по аналогии с аутсорсингом (outsourcing) - привлечение работников-добровольцев, часто неквалифицированных Интернет-пользователей, например для наполнения сайта тем или иным контентом; расходы на содержание таких нештатных сотрудников минимальны). Не только маркетологи могут извлечь пользу из сервисов с возможностью определения местоположения, но и представители творческой деятельности также выгадали от их использования (вероятно, даже не подозревая об этом). Люди воспользовались ими для получения доступа к большой аудитории людей, все члены которой располагаются на той же самой территории и объединены одной целью «что-то сделать». Это могут быть как флеш-мобы (* краткая массовая акция, как правило, не имеющая определённой цели и организованная с помощью интернета или мобильной связи: люди собираются в условленном месте, выполняют определённые, заранее оговорённые, действия и быстро расходятся), так и крупномасштабные танцевальные номера, так и создание групп активистов для людей с общими интересами.

Также такие сервисы были использованы в ситуациях вроде землетрясения на Гаити в 2010, когда большие группы обычных людей собрались вместе для оказания помощи пострадавшим только за счет возможностей социальных сетей и возможности определения местоположения.

Предложения

Недавно стало появляться повсюду большое количество «сайтов с предложениями». Одним из наиболее ярких их представителей является Groupon (* крупнейший в мире сайт коллективных покупок), запущенный в ноябре 2008 года. Groupon предлагает своим пользователям сервисы быстрой продажи (* от англ. deal-of-the-day ( daily deal, или flash sales, или one deal a day); ежедневная сделка) и каждый день на сайте предлагается заранее установленное количество скидок для каждого предложения. Необходимо, чтобы для каждого предложения набралось достаточно заинтересованных лиц; в этом случае они получают его, но только если достигается предопределенное количество людей.

За счет этого подхода для продавцов снижается риск и появляется возможность продавать оптом, что делает его беспроигрышным вариантом. Секрет Groupon заключается в его тесной интеграции с местоположением пользователей. За счет предложения своим пользователям локальных предложений и сделок он стал одним из наиболее популярных купонных сайтов и его формат был повторен много раз.


Практические примеры

Теперь, когда вы знаете немного больше об определении местоположения, давайте взглянем на некоторые примеры из реального мира разработки.

The Rocky Horror Show

Этот веб-сайт позволяет вам узнать время показа шоу в близко расположенных к вам местах. Просто перейдите на сайт и нажмите "Find my location".

Проект Places Flickr

При помощи той же самой технологии Flickr показывает, что было закачено другими пользователями на веб-сайт из мест, расположенных рядом с вами.

Mapumental

Mapumanetal появился примерно в 2006 году, когда Министерство транспорта Соединенного Королевства (Великобритании и Северной Ирландии) связалось со стартапом для разработки сервиса, использующего имеющуюся у него информацию насчет общественного транспорта. Они описали то, чем занимаются в Mapumental, как «Мы создаем карты, которые помогают людям принимать лучшие решения и быстрее». Этот сайт предлагает множество инструментов и сервисов, которые предоставляют способы визуализации данных о поездках в режиме реального времени.


Реализация возможности определения местоположения пользователя

Если вы ранее не реализовывали возможность определения местоположения ни на одном веб-сайте или приложении, то хорошая новость заключается в том, что это чрезвычайно просто. В этом руководстве я покажу вам, как вы можете получить данные о местоположении пользователя на вашем веб-сайте или в вашем веб-приложении.

HTML-разметка

Я ее создал таким образом, чтобы вы могли довольно просто добавить ее на ваш веб-сайт. Цель состоит в том, чтобы у пользователя была возможность нажать кнопку, при помощи чего будут получены и отображены на сайте данные о его местоположении за счет небольшой помощи со стороны API Google Maps.

Мы начинаем с элемента-обертки для выравнивания нашего дизайна по центру. Я задал для него в качестве значения ширины 960px, однако вы можете установить любой необходимый для вашего дизайна размер. В обертке я добавил div, который является местом, где будет располагаться карта сразу после создания. Я задал для него в качестве ID 'map'.

В div с ID 'map' я затем поместил элемент span, для которого добавил класс под названием 'helper'. Он будет выступать в роли небольшой подсказки, информирующей пользователей о том, что им необходимо выполнить. Может показаться, что это излишне, однако согласно установившейся практике всегда следует по возможности помогать пользователям.

Далее идет изображение предварительного загрузчика, для которого я добавил ID 'preloader'. Если вы подыскиваете предварительные загрузчики, то вы можете посетить preloaders.net.

Ниже показано, что у вас должно быть на данный момент:

После div с ID 'map' я добавил простой якорный элемент, который будет выступать в роли кнопки, которую сможет нажать пользователь. В качестве класса для него задано (да, верно) 'button'.

Сразу после нажатия кнопки нам не только нужно, чтобы была отображена карта, но также могло бы быть полезным отобразить местоположение пользователя, географическую долготу и широту. Для этого я создал div с ID 'results', который в свою очередь содержит три строчных элемента, каждый из которых имеет соответствующий класс. На этом все с разметкой. Ниже показано, как должен выглядеть весь код разметки:

Код CSS

В CSS-коде все довольно ясно. Он представлен полностью ниже:

Следует обратить внимание на то, что предварительный загрузчик – единственный элемент div, для которого установлено абсолютное позиционирование. Абсолютное позиционирование по отношению к div с ID 'map'. Для этого нужно всего лишь убедиться, что у div с ID 'map' в качестве значения position задано relative. За счет этого будет возможным задать для предварительного загрузчика позиционирование относительно его родительского элемента, а не целого документа.

jQuery

Google предоставляет набор API для своих сервисов для работы с картами, пользоваться которыми можно бесплатно, пока не будут достигнуты определенные ограничения использования. После этого будет взиматься плата.

К счастью, оба сервиса, которые мы будем использовать, полностью бесплатны; в действительности при использовании одного из приемов вообще не используется API, а используется обычный iframe (* является дочерним контекстом для браузера, за счет которого в текущую страницу встраивается другая страница-HTML) для встраивания карты, в котором мы изменим некоторые значения на те, что получаем из браузера пользователя.

Для начала давайте определим в каких-то тегах <script> или в отдельном JavaScript-файле некоторые переменные для HTML-элементов, которые будем использовать в коде jQuery.

После этого нам необходимо проверить, что браузер поддерживает API Geolocation. Мы можем это сделать при помощи следующего высказывания 'if':

После того как мы убедились, что браузер поддерживает вышеуказанную технологию, мы затем будем отслеживать нажатие кнопки в части с комментарием 'Browser supports it, we're good to go'.

Обработчик события click для кнопки должен выглядеть следующим образом:

После нажатия кнопки при помощи обработчика будет показан предварительный загрузчик. Здесь важно обратить внимание на строки со второй по последнюю, содержащей 'navigator'. При помощи него браузеру по сути сообщается примерно следующее: «получи данные о положении пользователей, и если эта операция была выполнена успешно, то отправь данные о местоположении в функцию 'exportPosition', в ином случае передай ошибку функции 'errorPosition'.

Давайте перейдем к написанию кода и создадим эти функции: В функции для обработки ошибки все довольно ясно:

Вы видите в функции выше, что при помощи нее будет выведено сообщение об ошибке, а затем снова показан предварительный загрузчик.

В функции, запускаемой при успешном выполнении операции, ниже под названием 'exportPosition' мы получаем данные о широте (* latitude) и долготе (* longitude), предоставленные API Geolocation, и устанавливаем их в качестве значений переменных под теми же именами.

После их получения мы затем можем ими воспользоваться в коде с Google Maps, встроенном в iframe. Также мы можем использовать их в строчных элементах, при помощи которых пользователю отображаются данные о долготе и широте. Ниже показано, как все это выглядит:

Важной частью здесь является URL iframe. В нем я добавил переменные '+latitude+' и '+longitude+'. Поближе это выглядит следующим образом:

За счет этого в div с ID '#map' будет добавлена карта, а также будут выведены пользователю данные о широте и долготе. Также имеется еще кое-что, что нам хотелось бы знать; это название местоположения пользователя. Для этого нам необходимо выполнить запрос API Google Maps при помощи AJAX. Мы добавляем следующую функцию AJAX в функции 'exportPosition'. Она выглядит следующим образом:

В функции, запускаемой при успешном выполнении операции, мы получаем название местоположения, данные о котором были возвращены AJA-вызовом, и добавляем его в span с классом '.location'. Если по какой-то причине при этом вызове произошла ошибка, то будет вызвана функция 'errorPosition' и выведено пользователю сообщение о том, что его местоположение не может быть определено.

API Geolocation работает во всех современных браузерах. Однако в некоторых версиях Safari для получения данных о местоположении используется CoreLocation, и это означает, что вы должны быть подключены к сети при помощи WIFI. Если вы подключены через Ethernet или что-то вроде этого, то у вас могут возникнуть проблемы при сборе данных о местоположении.

Также стоит отметить, что для успешной работы файлы этого руководства должны быть закачаны на рабочий веб-сервер и не будут работать на локальном сервере.


Заключение

Надеюсь, что теперь вы лучше понимаете API Geolocation, как он работает и как вы можете воспользоваться им, не особо напрягаясь. При творческом и эффективном подходе к использованию возможности определения местоположения у вас теперь должна иметься возможность предоставить вашим пользователям лучший опыт взаимодействия.

Воспользовались ли вы API Geolocation на каких-либо сайтах, над которыми работали, для создания лучшего опыта пользователя? Видели ли вы, как им творчески и умело воспользовались? Дайте нам знать об этом ниже в разделе для добавления комментариев.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.