AETHER

Геолокация на веб-сайтах

Александр Шабуневич — Tue, 23 Jun 2009 18:55:30 +0000

Шел я пару дней назад по улице и размышлял о том, как можно улучшить один веб-сервис, предназначенный для поиска ближайших пунктов обслуживания. Обычно такие сервисы показывают карту, на которой при помощи различных фильтров надо установить свое местоположение (например, станцию метро), а сервис вам покажет ближайшие точки. С десктопными клиентами проблем нет — там можно и все разом выложить, а вот с мобильными устройствами желательно обращаться поэкономнее. В идеале была бы такая ситуация: пользователь заходит на сайт и нажимает кнопку «Найти в радиусе 500 метров от меня». А так как во многих современных устройствах (iPhone, HTC Touch и прочие нокии) сейчас встроен GPS-приемник, такая задача должна решаться просто.

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

Порядок определения

Есть три основных способа определить местонахождение (координаты) клиента (расположены по степени уменьшения точности определения):

GPS в аппарате (высокая точность — в пределах десятка метров)
Координаты по Wi-Fi точке доступа (разброс от сотен метров до нескольких километров)
Город по IP (километры)

Таким образом, при определении координат, необходимо идти по этому списку сверху вниз — если клиент поддерживает GPS — использовать его и т.д.

Технологическое воплощение

Пока, чуть ли не единственным (ну еще HTC Dream a.k.a. гуглофон) аппаратом, который из коробки поддерживает геолокацию является iPhone с прошивкой 3.0. Если вы уже обновились на новую прошивку, то достаточно сделать простой запрос в виде javascript-кода:

navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

и вы получите доступ (после соответствующего разрешения пользователя, конечно же) к координатам клиента. В этой функции первым параметром является callback, срабатывающий при удачном определении координат, а вторым — срабатывающий при ошибке. Соответственно, в первой функции вы получаете доступ к объекту position, содержащему свойства position.coords.latitude и position.coords.longitude, которые вы сможете использовать в своих скриптах (например, для выборки ближайших объектов).

Что делать если ваши клиенты не пользуются айфоном? Выход есть, хотя пока что это своего рода экзотика.

Но у меня на маке плагин geode глючит, и Firefox вываливается с ошибкой

Во-первых, следующий релиз Firefox 3.5 будет содержать эту же функциональность в ядре. Но уже сейчас можно поставить специальный плагин Geode, который использует беспроводные сети для попытки определить координаты. Во-вторых, можно установить Google Gears, который существует для кучи платформ (например, для Opera mobile на WM6). Этот плагин использует не только Wi-Fi, но и GPS (если он есть в устройстве, конечно же).

Понятно, что вряд ли кто-то будет специально ставить непонятные плагины, позволяющие что-то там определять (тут еще встает вопрос privacy). Но я уверен, что в самом ближайшем будущем поддержка геолокации по умолчанию появится в большинстве мобильных устройств на платформах WM, symbian (или уже?) и прочих. Особенно это актуально для устройств с GPS, который дает наиболее точные результаты.

Если нет ни GPS, ни воможности определить координаты по Wi-Fi, то в качестве первого приближения стоит определить хотя бы город посетителя. Сделать это можно средствами специальных баз данных (например, бесплатной MaxMind Geo City lite) или воспользоваться сервисом от вездесущего гугла — AJAX API. Последний позволяет определять координаты по IP прямо из javascript-кода, не прибегая к серверным языкам.

Рабочий пример

Пример рекомендуется смотреть на айфоне с прошивкой 3.0

Я написал небольшой тест-драйв-скрипт, который демонстрирует все описанные в статье технологии: сначала пытается использовать встроенные возможности браузера (для iPhone или Firefox с плагином), затем пробует Google Gears, а если и это не проходит, то определяет город по IP. Результатом должна быть карта, центрированная по вашему местоположению.

Посмотреть пример

Ссылки по теме

Time Machine своими руками

Александр Шабуневич — Sun, 14 Jun 2009 10:04:39 +0000

Заметка о настройки бэкапа на Mac OS X без использования Time Machine, а с помощью Unison.

В своей первой заметке о работе с Mac OS X я хочу рассказать о собственном опыте настройки автоматического бэкапа данных без использования Time Machine. Почему без нее? Несмотря на то, что это офигенно клевая и удобная программа, она все же заточена под определенные цели, а именно: полное архивирование системы, создание ее загрузочного образа, который быстро позволяет восстановить систему в случае ее поломки. Мне же нужно было сохранять лишь часть своих рабочих документов, а кроме того, эти документы должны быть доступны потом на PC — то есть использование маковской файловой системы отпадает.

Что я имею

Внешний диск на 320 Гб с системой FAT32
Макбук
Домашний PC, который должен иметь доступ к данным с этого же диска
Желание максимально автоматизировать процесс архивации данных таким образом, чтобы при каждом подключении диска к макбуку, бэкап происходил автоматически (самостоятельно нажимать кнопку я буду постоянно забывать, а бэкап по расписанию не подходит, т.к. диск подключен к ноуту не постоянно)

Конечно же архивация должна быть инкрементарной — чтобы не перегонять старые данные снова и снова. Наличие дополнительной архивации (сохранение версий) желательно, но не обязательно.

План спасения

Time Machine не подходит по нескольким причинам: а) Файловая система внешнего диска должна быть HFS+; б) Мне не нужен полный образ системы — лишь мои отдельные документы; в) Такой способ не подходит для бэкапа на простую флешку, например.

Я начал искать бесплатное и надежное решение среди сторонних программ, наиболее подходящими мне сначала показались SilverKeeper и iBackup. Я попробовал обе, но SK не смог сделать даже первый снимок, а iBackup «сломался» на втором этапе — инкрементарном бэкапе. То есть, сначала он все файлы скопировал, а когда во второй раз надо было скопировать лишь изменения, пошли ошибки. Думаю, что дело оказалось в непривычной для обеих программ файловой системе.

Я стал копать дальше и наткнулся на простое и клевое решение — программу Unison. Это кроссплатформенная программа, которой я сначала немного испугался (все-таки она больше заточена под CLI, чем под GUI), но все оказалось довольно просто — мануал доступно все объясняет. Ее я и решил использовать. Тем более, что для моих нужд работа с командной строкой была просто необходима.

Настройка Unison

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

Unison — могучая программа. Ее возможности покрывают мои потребности с лихвой: я даже не настраивал дополнительную архивацию, но это вполне можно сделать при желании. Я остановился на том, что задал папку с документами и приказал программе зеркалировать ее в папку на внешнем диске. Вот мой файл конфига, делающий копию моей домашней папки:


# Unison preferences file
root = /Users/alex
root = /Volumes/WD320/_backup/macbook/
force = /Users/alex
ignore = Name {.DS_Store}
ignore = Name {unison.log}
ignore = Path {.*}
ignore = Path {Music}
ignore = Path {Movies}
ignore = Path {Library/Caches}
ignore = Path {Library/Mail}
ignore = Path {Library/Mail Downloads}
perms = 0

Первые две строчки означают «Откуда» и «Куда».
Параметр force указывает производить зеркалирование первого источника, а не двустороннюю синхронизацию
Правила игнорирования пропускают скрытые папки (начинающиеся с точки) и файлы .DS_Store, а также папки с музыкой и фильмами. Кроме того, я пропускаю папку с системным кешем и почтовые папки (т.к. все-равно пользуюсь IMAP от gmail, а значит все письма хранятся на сервере).
Параметр нужен для того, чтобы не было конфликтов с файловой системой FAT, которая не может сохранить юниксовые разрешения.

По большому счету, я мог бы вообще игнорировать папку /Library — а взять только свои собственные документы, но при игнорировании кеша и почты, эта папка занимает не очень много места (порядка 100 Мб), а полезные настройки и конфиги в ней тоже могут быть (см. ниже).

Для того, чтобы запустить процесс копирования на диск достаточно ввести в терминале команду:

unison backup_mac -ui text -silent

где backup_mac — это имя файла backup_mac.prf, который обычно лежит в папке /Users/alex/Library/Application Support/Unison. Вы можете назвать его как угодно, хоть default.prf — как он и называется по умолчанию.

Данная команда автоматически и без показа графического интерфейса сделает копию всех изменившихся файлов (удаляя при этом файлы на внешнем диске, которые были удалены с компьютера). Теперь осталось решить проблему с автоматическим запуском Unison при вставке моего диска.

Автоматический запуск

Для этого можно воспользоваться программой Automator, а можно написать свой AppleScript. Забегая вперед, скажу, что использовать пришлось обе техники.

Жаль, что в Автоматоре совсем не развито понятие логики условий типа if..else

Automator — очень клевая и красивая вещь, которая позволяет простым смертным (т.е. «непрограммистам») делать довольно гибкие скрипты-программы для обработки файлов, папок и пр. По большому счету, в ней нет ничего, чего не было бы в AppleScript, но зато сделано все очень красиво и удобно — достаточно перетащить нужные действия и программа будет готова. В моем случае можно было бы обойтись и вовсе без Автоматора (потому что требуется простая команда терминалу). Но если у вас, к примеру, происходит что-то более комплексное, скажем, перед запуском копирования вы хотите заархивировать все PDF-файлы в своей домашней папке, то Автоматор позволит это автоматизировать всего за пару кликов. Пользователи Windows могут только жадно глотать слюни, когда познакомятся с этой программой поближе. =)

Я настроил очень простой процесс (workflow), который выдает окно с подтверждением, хочу ли я сделать бэкап на диск, и, если я отвечаю положительно, делает свое черное дело в фоновом режиме. Сразу после окончания (если все прошло удачно) вылезает маленькое окошко уведомления Growl (если он стоит у вас в системе) о том, что все прошло хорошо. Как видите, ничего сложного, но в этот процесс легко можно встроить и дополнительные шаги, например архивацию или удаление файлов, произвести какие-то манипуляции с PDF-файлами и т.д.

Указанный процесс я сохранил в виде приложения (на самом деле в виде плагина к «действиям папки» — Folder Actions). Но как же привязать запуск приложения к вставке самого диска? В этом поможет AppleScript, совсем без кода, как видите, не обошлось.

Опущу подробности того, как я искал решение для моей задачи (т.к. AppleScript я совсем не знаю), приведу лишь код, который для меня работает:


on adding folder items to target_folder after receiving added_items
	set volumeName to "WD320" -- This is the display name of your external HDD volume; any of them if you have more than one.
	repeat with added_item in added_items
		if the displayed name of (info for added_item) is equal to volumeName then
			volumeMounted()
			exit repeat
		end if
	end repeat
end adding folder items to

on volumeMounted()
	try
		-- get modification date to determine that last backup was more than 1 day ago
		set logFileInfo to info for POSIX file "/Users/alex/unison.log"
		if modification date of logFileInfo < ((current date) - 24 * 60 * 60) then
			tell application "Macintosh HD:Users:alex:code:automator:wd_backup.app" to activate
		end if
	on error
		tell application "Macintosh HD:Users:alex:code:automator:wd_backup.app" to activate
	end try
	
end volumeMounted

Этот скрипт сохраняется в папке Folder Action Scripts (/Users/alex/Library/Scripts/Folder Action scripts) и вешается на папку /Volumes (для этого надо войти в настройки Действий папки, нажать + для добавления папки, а затем нажать Shift-⌘-G), ввести /Volumes и нажать Open.

Как я говорил, Automator в таком простом случае вообще не нужен — вы можете смело указывать прямую команду для Unison.

Что этот скрипт делает? Он проверяет, чтобы при добавлении в указанную папку (/Volumes) новых элементов (дисков, флешек и пр.), при совпадении имени (у меня — «WD320») запускалась бы функция volumeMounted(). Внутри этой функции я проверяю дату модификации файла unison.log. Этот файл автоматически создается при каждой синхронизации. И если этот файл менялся больше суток назад (или файла вообще нет), то запускается мой скрипт Автоматора, который и дает команду Unison'у.

Другие возможности

Естественно, такой способ можно использовать не только для создания бэкапа на внешнем диске, а, например, для синхронизации работы между двумя компьютерами через флешку. Для этого уберите параметр force из конфига Unison (а также можно убрать проверку даты последней синхронизации). И тогда, при каждой вставке флешки, у вас будут синхронизироваться изменения сделанные и на другом компьютере (правда, разрешение конфликтов при одновременном изменении одних и тех же файлов видимо придется взять на себя).

Вот и все. И еще раз, я вовсе не хочу сказать, что все описанное отменяет Time Machine. Для полного бэкапа своей системы я пользуюсь именно Time Machine, потому что она очень проста и удобна. Данная заметка показывает как связать Unison (позволяющий гораздо более гибко настраивать синхронизацию и архивирование), Automator (облегчающий выполнение автоматических действий над файлами) и AppleScript с Folder Actions — чтобы получить гибкую и простую систему синхронизации/архивации ваших данных. Если у кого есть какие замечания — пишите, с удовольствием выслушаю, так как сам в этих вопросах новичок и мог что-то не досмотреть.

Верстка веб-форм

Александр Шабуневич — Wed, 06 May 2009 07:30:31 +0000

Верстка веб-форм является одной из самых распространенных задач при создании сайта. Формы бывают простыми (типа обратной связи) и сложными (например, анкета на получение кредита). Но все формы объединяет то, что их надо сверстать, и желательно как можно проще и быстрее. Учитывая, что большинство форм состоит из одинаковых элементов, можно использовать для этого шаблон, который я привожу в конце статьи. Серверную часть (генерацию и прочее) я рассматривать не буду, статья касается только клиентской части — разметки.

Элементы формы

Большая часть веб-форм состоит из двух видов элементов: подписей и самих элементов управления (виджетов). Элементами управления могут быть текстовые поля, раскрывающиеся списки, флажки и т.д. В большинстве случаев форма представляет собой пары «подпись—элемент». Бывают и более тяжелые случаи, когда вместо одного элемента используется несколько, вида «подпись—элемент1—элемент2—элемент3». Например, выбор даты, состоящий из трех раскрывающихся списков «число, месяц, год». Часто в связках «подпись—элемент» предусматривается место для подсказки, объясняющей назначение поля.

Визуальное представление форм

Подробнее о визуальном представлении форм читайте в книге Люка Роблевски (Luke Wroblewski) «Web Form Design: Filling in the blanks»

Самыми распространенными способами представления веб-форм являются:

Подписи слева от полей, на одном уровне
Подписи над полями

У обоих способов есть достоинства и недостатки. Лично я предпочитаю размещать подписи на одном уровне с элементами управления (выравнивая текст подписей вправо) — на мой взгляд, это делает форму более понятной, хотя исследования показывают, что времени на заполнение в этом случае требуется чуть больше, чем в случае расположения подписей над элементами.

Способы разметки формы

Способов разметки веб-форм существует довольно много. Задача, конечно же сверстать форму с наименьшим количеством «лишних» тегов, желательно не нарушая семантики. Из самых распространенных вариантов:

Таблицы


<table>
  <tr>
    <th><label>Подпись</label></th>
    <td>Элемент</td>
  </tr>
</table>

Данный способ подходит для расположения подписей на одном уровне с элементами, но затрудняет другие возможности форматирования.

Списки (ul или ol)


<ul>
  <li>
    <label>Подпись</label>
    Элемент
  </li>
</ul>

По сути, строки формы являются списком элементов и подписей к ним, так что употребление списков вполне приемлемо. Мне в этом способе не нравится то, что для выравнивания подписей (label) на одном уровне с элементами управления необходимо назначать свойство display:block для инлайнового элемента label. Да и сам элемент управления иногда состоит из нескольких отдельных элементов (например, несколько флажков), в этом случае их приходится оборачивать в дополнительный div.

Параграфы или дивы


<p>
  <label>Подпись</label>
  Элемент
</p>

Замечания те же, что и у предыдущего способа.

Списки определений (dl)


<dl>
  <dt><label>Подпись</label></dt>
  <dd>Элемент</dd>
</dl>

Списки определений (definition list) связывают термин (dt) и определение (dd), а в нашем случае — подпись и элемент управления. Мне кажется такой способ разметки достаточно правильным с точки зрения семантики, а кроме того, он удобен в представлении — и dt и dd являются блочными элементами, что позволяет легко манипулировать ими, выстраивая горизонтально или вертикально без лишних оберток.

Достаточно прописать к форме стиль:


form dt{
  padding: 0;
  margin: 0.7em 1em 0.5em 0;
  width: 25%;
  float: left;
  clear: left;
  text-align: right;
}
form dd{
  margin: 0;
  padding: 0.5em 0;
  width: 70%;
  float: left;
  *float: none; /* hack for IE 6-7 - better to keep in separate file */
}

и наша форма выстроится в мой любимый вариант «подписи слева—элементы справа».

В данном случае пришлось использовать небольшой хак для Internet Explorer 6-7, чтобы высота обоих столбцов была синхронной (при длинных подписях). Этого можно избежать, убрав свойство float у dt, но возможно есть и другие варианты решения этой проблемы.

Шаблон формы

Ниже представлен небольшой шаблон, который я в последнее время использую для верстки форм. Он включает в себя подписи к полям, опциональные скрытые поля (наподобие, «откуда вы про нас узнали» → другое → появляется доп. текстовое поле) и некоторые другие мелочи.

Шаблон формы

Примечания к шаблону

Работа скрываемых полей требует использования jQuery.
Скрываемые поля работают так: каждое из них обертывается в <span class="hidden" id="...">, каждому элементу, отвечающему за показ скрытого поля (флажок или список) назначается класс hidden-trigger, а также прописывается аттрибут rel="#ID#" (где #ID# равен id скрытого элемента).
Можно нажать кнопку «Отправить», чтобы посмотреть оформление ошибок.
Ошибки выводятся в специальном блоке с классом error-block, каждая из них выводится в виде элемента списка с аттрибутом rel="#ERROR_ID#" (где #ERROR_ID# равен id элемента с ошибкой) — в этом случае, поля с ошибками автоматически подсвечиваются.

Обновился адрес RSS

Александр Шабуневич — Fri, 27 Feb 2009 19:10:14 +0000

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

Собственно, новый адрес: http://feeds2.feedburner.com/EyeBeholder

Моя тема для phpMyAdmin 3.0

Александр Шабуневич — Sun, 21 Dec 2008 18:00:12 +0000

Когда-то я сделал простую и легкую (для восприятия) версию шаблона для phpMyAdmin. Прошло 2 года, разработчики выпустили новую версию — 3.0. Наконец у меня дошли руки обновить свою тему, теперь она подходит к последней версии phpMyAdmin.

Я рад, что люди пользуются мом шаблоном — я сам смотреть не могу на стандартный интерфейс. Ниже приведены ссылки на старую (работающую с 2.x) и новую (для 3.x) версии шаблона. Изменений практически нет, просто подправлены CSS-файлы под новые элементы.

Как всегда, если заметите какие-то глюки, пожалуйста пишите в комментариях.

ClearView 3 (для PMA 3.x)
ClearView 1.31 (для PMA 2.x)

Обновлено: теперь картинки в CSS не зависят от пути.

А еще мою тему наконец-то добавили в список на официальном сайте.