xoxo-ru
XOXO
XOXO — это микроформат, с помощью которого вы можете разметить на странице информацию о её содержимом, создать оглавление или обособить методы навигации по содержимому на странице. XOXO — это один из микроформатов.
Преамбула
Данный формат был предложен при обсуждении Attention.xml Тантеком, который указал на то, что очень часто на страницах используются подобные структуры данных (например, список соседей в блогролле). Было предложено создать такой формат, который легко бы обрабатывался браузерами, не нарушая при этом его строгой и иерархичной структуры.
Имя
XOXO (Extensible Open XHTML Outline) — расширяемая сводка содержимого, оглавление и т.п. Произносится как «Икс-о-икс-о», «Жо-жо» или «Шо-шо».
Общее описание
XOXO — это один из микроформатов. Данная спецификация определяет новый тип в XHTML, который основан на модульности последнего. Назначение XOXO указано в преамбуле.
Тип документа XOXO
XOXO построен на основе следующих элементарных XHTML-модулей. Элементы, атрибуты и минимальное содержимое указано в «Модуляризации XHTML» (см. подробности). Элементы указаны здесь в информативных целях; нормативно он указаны в ранее упомянутом документе W3C.
Структурный модуль (structure module)
body, head, html, title
Модуль гиперссылок (hypertext module)
a
dl, dt, dd, ol, ul, li
Модуль метаинформации (metainformation module)
meta
Модуль стилей (stylesheet module)
Элемент style
Модуль атрибутов стилей (style attribute module)
Атрибут style
Модуль прикрепляемого содержимого (link module)
link
Модуль атрибутов списков (legacy module)
Атрибут compact в элемента ol и ul
XMDP
См. XMDP XOXO профиль.
Простой XOXO фрагмент
Разметка
<ol class='xoxo'>
<li>Тема 1
<ol>
<li>Подтема А</li>
<li>Подтема Б</li>
</ol>
</li>
<li>Тема 2
<ol compact="compact">
<li>Подтема В</li>
<li>Подтема Г</li>
</ol>
</li>
<li>Тема 3
<ol>
<li>Подтема Д</li>
</ol>
</li>
</ol>
Рендеринг
1. Тема 1
a. Подтема А
b. Подтема Б
2. Тема 2
3. Тема 3
a. Подтема Д
Использование атрибута 'compact'
Использование атрибута compact указывает на скрытие даной ветки (подветки). Отсутствие данного атрибута где-либо говорит об обратном.
Возможные стили по умолчанию.
ol.xoxo { list-style:decimal; }
ol.xoxo ol { list-style:lower-latin; }
ol[compact="compact"] { display:none; }
Простые примеры
MarkP has a set of examples that demonstrates both the simplicity of the markup and the presentational richness that is possible:
- Простой XO-файл, который можно внедрить в XHTML-страницу
- XO с вложенными группами, может быть напрямую интегрирован в XHTML
- XO как отдельная XHTML-страница (валидный XHTML)
- XO как отдельная XHTML-страница с CSS-стилями (также валидный XHTML)
- Chris Holland Outline Helper: настройки вышеприведённых примеров, CSS, руководство к outlines.css и outlines.js, различные комбинации ul/ol/li с атрибутом compact.
Основные свойства оглавлений
Оглавления часто состоят из иерархии пунктов и подпунктов. Каждый пункт может иметь несколько свойств (т.н. метаданные), которые должны быть представлены. Вот некоторые свойства:
- text
- description
- url (часто называется xmlurl или htmlurl; иногда — permalink)
- title
- type (указание MIME-типа документа по URL)
В целом, свойства пункта на элементе <li> отображаются через вложенный лист <dl>. Строго говоря, это первый <dl> внутри <li> перед последующим <ol>, <ul> или <li>.
Например:
<ol class='xoxo'>
<li>Пункт 1
<dl>
<dt>description</dt>
<dd>Данный пункт описывает основное, что мы должны сделать, к примеру.</dd>
</dl>
<ol>
<li>Подпункт А</li>
<li>Подпункт Б</li>
</ol>
</li>
Специальные свойства оглавлений
Существует также некоторое количество специальных свойств, которые мы можем представить более семантично, используя существующие блоки XHTML. Наиболее часто используемые свойства:
- text
- url
- title
- type
- rel (отношение, relation)
Например:
<ol class='xoxo'>
<li>
<dl>
<dt>text</dt>
<dd>Пункт 1</dd>
<dt>description</dt>
<dd>Данный пункт описывает основное, что мы должны сделать, к примеру.</dd>
<dt>url</dt>
<dd>http://example.com/more.xoxo</dd>
<dt>title</dt>
<dd>Заголовок 1 пункта</dd>
<dt>type</dt>
<dd>text/xml</dd>
<dt>rel</dt>
<dd>help</dd>
</dl>
</li>
Помимо этого, используя преимущества семантики элемента a, мы можем во многих случаях упростить более общие случаи разметки. Парсеры же должны смотреть на первый элемент a, вложенный в <li>.
Пример XOXO с использованием элемента a:
<ol class='xoxo'>
<li><a href="http://example.com/more.xoxo"
title="Заголовок пункта 1"
type="text/xml"
rel="help">Пункт 1</a>
<!-- Заметьте, что свойство ''text'' теперь просто является содержимым ссылки -->
<dl>
<dt>description</dt>
<dd>Данный пункт описывает основное, что мы должны сделать, к примеру.</dd>
</dl>
</li>
Все другие свойства добавляются аналогично использованному нами свойству description..
Свойства с мультизначениями
Свойства, которые могут принимать не одно, а несколько, значений, могут быть внедрены путём использования списков, вложенных в требуемый элемент dl:
<ol class='xoxo'>
<li>item 1
<dl>
<dt>multivalproperty1</dt>
<dd><ul>
<li>value-a</li>
<li>value-b</li>
</ul></dd>
</dl>
</li>
</ol>
Публикация XOXO
XOXO может быть опубликован в двух формах:
- Валидный XHTML
- Валидный XML
XOXO в валидном XHTML
Валидная XOXO-страница — это полный XHTML-документ.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Страница XOXO</title>
</head>
<body>
<ol class="xoxo">
<li><a href="URL-one">Текст 1</a></li>
<li><a href="URL-two">Текст 2</a></li>
...
</ol>
</body>
</html>
XOXO в валидном XML
Корневой элемент в случае внедрения XOXO в XML — это ol или ul с именем класса xoxo. Такой вариант идеален для синдикации и внедрения/использования в (X)HTML-страницы через AHAH.
<ol class="xoxo"> <li><a href="URL-one">Текст 1</a></li> <li><a href="URL-two">Текст 2</a></li> ... </ol>
Content-Type
Валидный XHTML XOXO следует отдавать со следующим Content-Type заголовком для достижения максимальной совместимости:
Content-Type: text/html; charset=utf-8
Он должен быть отдан с одним из следующих заголовков:
Content-Type: text/html; charset=utf-8 Content-Type: application/xhtml+xml Content-Type: application/xml
Примеры в сети
Данный раздел является информативным.
Существует довольно большое количество примеров (возможного) внедрения XOXO. Например, почти каждый blogroll может быть обработан как XOXO, так как они обычно являются несортированными списками или списками с гиперссылками, которые дозволены XOXO-профилем.
Реализации
Данный раздел является информативным.
- CVarious S5 tools
- Christian Neukirchen написал XOXO-парсер и генератор для Ruby
- Odeo публикует подписки в XOXO. См. список Ryan King.
- Les Orchard написал XOXO-редактор с использованием JavaScript.
- Демонстрация динамического интерактивного XOXO.
- Другая демонстрация сортируемых и перемещаемых динамических XOXO-списков, созданых с помощью CSS и JavaScript.
- Отображение XOXO на списки свойств Mac OS X
- Конвертация XOXO в HTML
Примеры кода
- См. страницу с примерами.
- См. также примеры с атрибутом compact, с исходными кодами CSS и JavaScript реализации свойства compact для XOXO.
XOXO-схемы
Данный раздел является информативным.
Ссылки
Нормативные
Информативные
Данный раздел является информативным.
Подобные работы
- XHTML Outlines - подобная идея (октябрь 2003 года, месяц перед тем, как Тантек и Кевин пришли к XOXO) (DannyAyers).
- XOW - Как сделать их редактируемыми, экспортируемыми в RDF и используемыми в закладках (DannyAyers).
- XBEL — XML Bookmark Exchange Language
- OPML (Outline Processor Markup Language), XML-формат для списков оглавлений.
Связанные работы
Несвязанные работы
- Questionable Content comic #493 — комикс на тему XOXO.
Продвижение XOXO
Обсуждения
Работа над спецификацией всё ещё продолжается. Отдельные аспекты реализации XOXO ещё обсуждаются. Вы можете посмотреть текущие наработки и идеи:
- См. брейнсторминг (англ.).
- См. также блоги по теме.