Одной из многих проблем, с которыми мы столкнулись во время нашей работы над конкурсами SitePoint и Marketplace, является выбор оптимального способа представления дат и времени нашим пользователям.
Это звучит просто, но есть несколько соображений, которые мы должны иметь в виду.
Легко читается людьми
«Началось 2 часа назад» и «Заканчивается через 2 дня» гораздо легче понять, чем «Началось в понедельник, 4 июня 2007 года, 10:04 + +1000» и «Концы в среду, 6 июня 2007 года, 9:28 + +1000».
Кэшируется поисковыми системами
«Начато 2 часа назад» или «Заканчивается через 2 дня» не имеют смысла, если посмотреть на фрагмент или полную копию страницы, кэшированной поисковой системой 2 дня назад. Аналогично, «Начато в понедельник, 4 июня 2007 года, 10:04 утра +1000» трудно понять человеку в совершенно другом часовом поясе.
Cachable для производительности
Нам нравится иметь возможность распределять время жизни кэша как можно большему количеству частей наших страниц. Текст «Started Mon, 4 June 2007, 10:04 am +1000» не требует истечения срока действия кэша, в то время как «Started менее минуты назад» можно надежно кэшировать только в течение 1 секунды.
Местное время
В то время как большинство людей могут понять, что означает «Начато в понедельник, 4 июня 2007 г., 10:04 по Гринвичу» в их местном часовом поясе, было бы очень ценно, если бы мы могли сделать для них суммы, поэтому им не нужно тратить 30 секунд выяснили, что торги закончились… 1 секунду назад.
Устаревшие страницы
Поскольку жизнь уже не была достаточно сложной, был изобретен просмотр с вкладками, так что мы можем заставить еще больше вкладывать в наши головы сразу. С помощью вкладок также можно легко отследить несколько часов, прежде чем вернуться к этому списку SitePoint Marketplace. Но в настоящее время нет никакой возможности узнать, что аукцион «Кончается через 28 минут» на самом деле давно прошел.
Микро Решение
Чтобы решить все эти проблемы одним махом, мы создали очень простой внутренний микроформат и немного умного JavaScript. Вместе они позволяют нам представлять даты и время так, чтобы они были полезными, значимыми и доступными для всех пользователей.
Мы начнем с некоторой базовой разметки HTML:
<span class="sitepoint-datetime">Mon, 28 May 2007 01:30:49 GMT</span>
Это увидят пользователи без JavaScript и некоторые пользователи вспомогательных технологий. Это может быть не так красиво, как «7 дней назад», но это самый правильный, значимый и кэшируемый формат, когда мы не знаем, как, когда и где страница фактически просматривается. Мы поставили перед именем класса «sitepoint-», чтобы было ясно, что это не стандартный микроформат.
Мы использовали форматирование RFC 2822 для даты / времени, которое легко читается людьми, а также может быть передано прямо в конструктор объекта JavaScript Date .
Наш JavaScript находит все экземпляры этого микроформата и преобразует их в местное время пользователя, отображая его в удобном формате без отвратительного идентификатора часового пояса.
Затем мы можем добавить дополнительную информацию к атрибуту класса диапазона. Код JavaScript использует их для определения наилучшего способа отображения информации. Например, с дополнительным классом «endtime» JavaScript преобразует время в обратный отсчет, отображая его в формате «1 день, 3 часа». Оставшееся время пересчитывается каждые 30 секунд, поэтому на открытых вкладках браузера больше нет устаревшей информации. Скрипт даже визуально пометит конкурсы и аукционы как закончившиеся, когда обратный отсчет достигнет нуля.
Мы с нетерпением ждем возможности опубликовать эти и многие другие улучшения в Интернете на Конкурсах дизайна и Marketplace.
Между тем, я уверен, что существует множество мнений относительно такого использования микроформатов и JavaScript, и даже того, применим ли термин «микроформаты» к этому шаблону разметки. Пожалуйста, принесите их.