Введение

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

OMF основан на принципах микроформатов, что позволяет соединить человеко-читаемое и машино-читаемое представление в одном тексте.

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

Описание формата

Корневой элемент должен иметь класс notification.

Типы уведомлений

Корневой элемент микроформата должен иметь класс, соответствующий типу действия (о типах см. ниже). Все остальные элементы микроформата должны содержаться внутри элемента с этим классом.

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

Общие свойства

При разборе микроформата принимаются следующие свойства:

  • actor (бывший from) – генератор; сущность, которая производит действие, о котором сообщается в уведомлении; по-умолчанию человек, если не указан явно – получатель уведомления
  • object – сущность, над которой совершается действие; по-умолчанию человек, если не указан явно – получатель уведомления
  • text – человеко-читаемый короткий текст с сутью уведомления
  • action-link – ссылка действия, в уведомлении может быть несколько, применимо только к элементу <a>
  • attachment – картинка, связанная с действием, о котором уведомление. обратите внимание, что фотографию отправителя сообщения лучше определить в свойстве actor с помощью микроформата hCard, применимо только к элементу <img>

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

Свойства содержат только текст.

Классы action-link’ов

Ссылки могут иметь дополнительные классы, которые предают им семантический смысл. Это может использоваться, например, в условии ограниченного пространства (list view) где остается только один, самый важный action link. Они не обязательны для указания, но могут улучшить представление и user expirience. Если дополнительные классы не указаны, то основной считается первая по тексту ссылка.

Модель уведомления

В этой спецификации подразумевается, что уведомление рассказывает о каком-либо действии. Одно уведомление содержит одно действие. Действие описывается следующими полями: тип действия, генератор (см. типы сущностей), объект действия (см. типы сущностей), ссылки, время действия (время генерации уведомления), источник (сервис, который сгенерировал уведомление).

Типы сущностей

Возможные значения объекта действия и его генератора определяются типом действия из списка действий.

Человек

Определяется с помощью микроформата hCard.

Пример

<span class="vcard">
<img class="photo" src="http://avt2.imgsmail.ru/corp/terekhov/_avatar" alt="" />
<a class="url fn" href="http://my.mail.ru/corp/terekhov/">Алексей Терехов</a>
</span>

Компания

Определяется с помощью микроформата hCard.

Пример

<span class="vcard">
<a class="org url fn" href="http://example.com/">Компания "Рога И Копыта"</a>
</span>

Событие

Любое событие, такое как концерт, выставка, день рождения или акция со скидками. Определяется с помощью микроформата hCalendar.

Пример

<span class="vevent">
<span class="summary">Распродажа розовых слоников</span> пройдет с
<span class="dtstart" title="2010-07-01">1 июля</span> по
<span class="dtend" title="2010-08-01">1 августа</span>
по адресу <span class="location">Москва, ул. Красных богатырей, 13</span>.
</span>

Группа

Группа или сообщество на сайте.

Родительский класс – group; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

классописаниеисточник данных
nameназвание
urlадресhref
photourlлоготипаimg src, href
iconurlиконкиimg src, href

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

<span class="group">Тестовая группа</span>

Расширенный пример

<span class="group">
<img class="icon" src="http://example.com/favicon.ico" alt="" />
<img class="photo" src="http://example.com/logo.gif" alt="" />
<a class="url name" href="http://example.com/">Тестовая группа</a>
</span>

Сервис

Веб-сервис, сайт, блог, социальное приложение или подобная сущность.

Родительский класс – service; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

класс описание источник данных
name название
url адрес href
photo url логотипа img src, href
icon url иконки img src, href

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

<span class="service">Технокранч</span>

Расширенный пример

<span class="service">
<img class="icon" src="http://example.com/favicon.ico" alt="" />
<img class="photo" src="http://example.com/logo.gif" alt="" />
<a class="url name" href="http://example.com/">Технокранч</a>
</span>

Продукт

Коммерческий продукт или услуга.

Родительский класс – product; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

класс описание источник данных
name название
url адрес href
photo url картинки img src, href

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

<span class="product">Бублегум</span>

Расширенный пример

<span class="product">
<img class="photo" src="http://example.com/logo.gif" alt="" />
<a class="url name" href="http://example.com/">Бублегум</a>
</span>

Статья

Блог пост, новостная статья или подобная сущность.

Родительский класс – article; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

класс описание источник данных
name название
summary краткое содержание
url адрес href
photo url сопутствующей картинки img src, href

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

<span class="article">Как перестать беспокоиться и начать жить?</span>

Расширенный пример

<span class="article">
<img class="photo" src="http://example.com/image.gif" alt="" />
<a class="url name" href="http://example.com/article.html">Как перестать беспокоиться и начать жить?</a>
<span class="summary">В этой статье мы раскроем вам секрет вечного счастья и долголетия.</span>
</span>

Аудио

Аудиофайл: музыка, подкаст, аудиокнига...

Родительский класс – audio; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

класс описание источник данных
name название
description описание
url адрес файла, потока или страницы с плеером href

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

<span class="audio">Phoenix – Lisztomania</span>

Расширенный пример

<span class="audio">
<a class="url name" href="http://example.com/phoenix.mp3">Phoenix – Lisztomania</a>
</span>

Видео

Родительский класс – video; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

класс описание источник данных
name название
description описание
photo картинка-превью img src, href
url адрес файла, потока или страницы с плеером href

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

<span class="video">cut kittenz</span>

Расширенный пример

<span class="audio">
<a class="url name" href="http://example.com/kittenz.mp4">cut kittenz</a>
</span>

Фото

Родительский класс – photo; если не содержит вложенных элементов, то содержимое обозначает название.

Дополнительные элементы

класс описание источник данных
name название
description описание
photo картинка-превью img src, href
url адрес полной картинки или страницы с ней href

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

<span class="photo">cut kittenz</span>

Расширенный пример

<span class="photo">
<a class="url name" href="http://example.com/kittenz.jpg">cut kittenz</a>
</span>

Типы действий

Новое личное сообщение

Класс – new-message. Возможные типы генератора: person. Возможные типы объекта действия: person.

Дополнительные классы для action-link’ов:

  • read-link: ссылка, по которой можно прочитать сообщение
  • reply-link: ссылка, по которой можно ответить на сообщение

Базовый пример письма

<div class="new-message notification">
Здравствуйте, Дмитрий Битман!
<span class="text">На сайте Мой Мир@Mail.Ru
<span class="actor">Алексей Терехов</span> оставил Вам личное сообщение.</span>
<a class="action-link read-link" href="http://my.mail.ru/my/dialogues?thread=terekhov@corp.mail.ru">Прочитайте его</a>.
</div>

Более развернутый пример (с использованием hCard для обозначения отправителя)

<div class="new-message notification">
Здравствуйте, Дмитрий Битман!
<span class="text">На сайте Мой Мир@Mail.Ru
<span class="actor vcard">
<img class="photo" src="http://avt2.imgsmail.ru/corp/terekhov/_avatar" />
<a class="url fn" href="http://my.mail.ru/corp/terekhov/">Алексей Терехов</a>
</span>
оставил Вам личное сообщение.</span> <a class="action-link read-link" href="http://my.mail.ru/my/dialogues?thread=terekhov@corp.mail.ru">Прочитайте его</a>.
</div>

Обратите внимание, как from и vcard совмещены в одном элементе. А так же, что, хотя url и fn в одном элементе, url получается из href ссылки, а fn из ее текста.

Предложение дружбы

Предложение о дружбе, которое ожидает принятия.

Класс – friendship-request. Возможные типы генератора: person. Возможные типы объекта действия: person.

Дополнительные классы для action-link’ов:

  • accept-link: ссылка, по которой можно принять предложение
  • reject-link: ссылка, по которой можно отказаться от предложения

Базовый пример письма

<div class="friendship-request notification">
Дмитрий Битман!
<span class="text"><span class="actor">Алексей Терехов</span> предлагает Вам дружбу на проекте Мой Мир@Mail.Ru. Став друзьями, Вы всегда будете на связи и получите дополнительные возможности для общения.</span>
<a class="action-link" href="http://my.mail.ru/my/friends_requests?from_letter=friendship_request">Принять или отклонить</a> предложение.
</div>

Приглашение

Приглашение в группу, приложение, на сайт или событие.

Класс – invitation. Возможные типы генератора: person, group, service, company. Возможные типы объекта действия: service, group, event.

Дополнительные классы для action-link’ов:

  • accept-link: ссылка, по которой можно принять приглашение

Минимальный пример письма

<div class="notification invitation">
Дмитрий Битман!
<span class="text"><span class="actor">Алексей Терехов</span> предлагает Вам зарегистрироваться на сайте <span class="object service"><a class="name url" href="http://example.com">example.com</a></span>.</span>
<a class="action-link" href="http://example.com/registration">Принять приглашение</a>.
</div>

Новый контент

Новый контент: блог посты, фотографии, видео, товары в магазине и т. п.

Класс – post. Возможные типы генератора: person, group, service, company. Возможные типы объекта действия: service, group, event, product, article, audio, video, photo, person, company.

Новая оценка

Новая оценка какого-то контента, отмечание как любимое.

Класс – new_mark. Возможные типы генератора: person. Возможные типы объекта действия: service, group, event, product, article, audio, video, photo, person, company.

Покупка

Уведомление о покупке какого-либо товара.

Класс – purchase. Без генератора. Возможные типы объекта действия: product.

Истечение срока действия

Уведомление об истечении срока действия услуги.

Класс – expiration. Без генератора. Возможные типы объекта действия: product.

Подтверждение

Уведомление о действии, требующем подтверждения пользователя: регистрация, заказ товара, подписка.

Класс – verification. Возможные типы генератора: service, group. Без объекта действия.

Дополнительные классы для action-link’ов:

  • accept-link: ссылка, по которой можно пройти подтверждение

Минимальный пример письма

<div class="notification verification">
Дмитрий Битман!
<span class="text">Вы зарегистрировались на сайте <span class="actor service"><a class="name url" href="http://example.com/">example.com</a
></span>.</span>
<a class="action-link accept-link" href="http://example.com/registration/confirmation">Подтвердите регистрацию</a>.
</div>