View source for xoxo-id

{{DISPLAYTITLE:XOXO 1.0: Extensible Open XHTML Outlines}}
XOXO itu sederhana, susunan garis besarnya ditulis dalam XHTML stardar dan cocok ditancapkan di (X)HTML, Atom, RSS, dan seluruh XML. XOXO adalah salah satu dari beberapa standar [[microformats|microformat]] terbuka.

__TOC__

== Spesifikasi Konsep 2004-10-01 ==

=== Editor ===
[http://tantek.com/ Tantek Çelik] ([http://technorati.com Technorati, Inc])

=== Pencipta ===
* [http://epeus.blogspot.com/ Kevin Marks] ([http://technorati.com Technorati, Inc])
* [http://tantek.com/ Tantek Çelik] ([http://technorati.com Technorati, Inc], formerly of [http://microsoft.com/ Microsoft Corporation])
* [http://diveintomark.org/ Mark Pilgrim] ([http://ibm.com IBM])
* [http://www.blogologue.com/ Morten W. Petersen]

=== Hak Cipta ===
{{MicroFormatCopyrightStatement2003}}
* Saya memberikan seluruh kontribusi kepada spesifikasi ini untuk domain publik dan Saya menganjurkan pencipta lainnya melakukan hal yang sama.
** Ketika semua penulis / editor telah melakukannya, kita dapat menghapus referensi template MicroFormatCopyrightStatement dan menggantinya dengan MicroFormatPublicDomainContributionStatement.

=== Paten ===
{{MicroFormatPatentStatement}}

== Pengantar ==
When we were discussing [http://developers.technorati.com/wiki/attentionxml Attention.xml], Tantek pointed out that XHTML has everything necessary for semantically expressing outlines and blogroll-like subscriptions in an XML format that is both interactively renderable by browsers and parsable by strict XML engines. This page is here to discuss this idea.

=== Nama ===
XOXO adalah singkatan dari eXtensible Open XHTML Outlines, dan diucapkan dengan berbagai cara, seperti 'Ecks Ecks oh oh', 'zho-zho', atau 'sho-sho'.

== Abstrak ==
XOXO is one of several [[microformats]].  This specification defines a new XHTML document type that is based upon the module framework and modules defined in Modularization of XHTML ([http://www.w3.org/TR/xhtml-modularization XHTMLMOD]). The purpose of the XOXO document type is to serve as the basis for XHTML friendly outlines for processing by XML engines and for easy interactive rendering by browsers.

== The XOXO Document Type ==
The XOXO document type is made up of the following XHTML modules. The elements, attributes, and minimal content models associated with these modules are defined in "Modularization of XHTML" ([http://www.w3.org/TR/xhtml-modularization XHTMLMOD]). The elements are listed here for information purposes, but the definitions in "Modularization of XHTML" should be considered definitive. In the on-line version of this document, the module names in the list below link into the definitions of the modules within the current version of "Modularization of XHTML".

[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_structuremodule Structure Module]
  body, head, html, title
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule Hypertext Module]
  a
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_listmodule List Module]
  dl, dt, dd, ol, ul, li
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_metamodule Metainformation Module]
  meta
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_stylemodule Stylesheet Module]
  style element
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_styleattributemodule Style Attribute Module]
  style attribute
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_linkmodule Link Module]
  link
[http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_legacymodule Legacy Module]
  Attribute compact on ol and ul

=== The XOXO Profile ===

See [[xoxo-profile]] for the [http://gmpg.org/xmdp XMDP] profile of XOXO which defines the XOXO values for the class attribute.

== Simple XOXO Fragment ==

=== Markup ===

<pre><nowiki><ol class='xoxo'>
  <li>Subject 1
    <ol>
        <li>subpoint a</li>
        <li>subpoint b</li>
    </ol>
  </li>
  <li>Subject 2
    <ol compact="compact">
        <li>subpoint c</li>
        <li>subpoint d</li>
    </ol>
  </li>
  <li>Subject 3
    <ol>
        <li>subpoint e</li>
    </ol>
  </li>
</ol>
</nowiki></pre>

=== Sample Rendering ===
<pre><nowiki>
   1. Subject 1
      a. subpoint a
      b. subpoint b
   2. Subject 2
   3. Subject 3
      a. subpoint e
</nowiki></pre>
=== Usage of 'compact' attribute ===

Note the use of the 'compact' attribute to indicate that the subpoints of the headline "Subject 2" are not in an expanded state.  The absence of the 'compact' attribute elsewhere indicates that the other headlines are in an expanded state.

=== Possible Default Style Rules for Sample Rendering ===

<pre><nowiki>
ol.xoxo { list-style:decimal; }
ol.xoxo ol { list-style:lower-latin; }
ol[compact="compact"] { display:none; }
</nowiki></pre>


== More Simple Examples ==

MarkP has a set of examples that demonstrates both the simplicity of the markup and the presentational richness that is possible:

* [http://diveintomark.org/public/2004/01/xo-flat.xo simple XO file that can be embedded directly into an XHTML page]
* [http://diveintomark.org/public/2004/01/xo-embeddable.xo XO with nested groups, also directly embeddedable in XHTML]
* [http://diveintomark.org/public/2004/01/xo-standalone.xo XO as a standalone XHTML page] ([http://validator.w3.org/check?uri=http%3A%2F%2Fdiveintomark.org%2Fpublic%2F2004%2F01%2Fxo-standalone.xo valid XHTML])
* [http://diveintomark.org/public/2004/01/xo-with-style.xo XO as a standalone XHTML page, styled with CSS] ([http://validator.w3.org/check?uri=http%3A%2F%2Fdiveintomark.org%2Fpublic%2F2004%2F01%2Fxo-with-style.xo also valid XHTML])
* [http://homepage.mac.com/ctholland/thelab/outlines/ Chris Holland Outline Helper]: tweaked one of above samples, yanked CSS for simplicity, added reference to [http://homepage.mac.com/ctholland/thelab/outlines/outlines.css outlines.css] and [http://homepage.mac.com/ctholland/thelab/outlines/outlines.js outlines.js], pasted a few different combinations of ul/ol/li with the compact attribute.
** in trying to comply with semantic principles the "compact" attribute to ol and ul elements is what drives the display state. Via scripting, i'm setting classes on containing li element for added styling flexibility, though CSS Gurus might be able to replace "li.expanded" in outlines.css with some other CSS selector that says "select an li node that contains an ol node with a 'compact' attribute set".
*** The CSS selector for "an li node that contains an ol node with a 'compact' attribute set" would be 'li ol[compact="compact"]'.

== Properties of Outline Items ==
Outlines typically consist of a hierarchy of points and subpoints.  Each of those points (outline items) itself may have some properties (AKA attributes or metadata) that need to be represented.  Perhaps the most common additional property on outline items in practice is the URL as demonstrated in Mark Pilgrim's examples above.  Even the text label/title of an outline item could be considered a common property.  A few such common properties:
* text
* description
* url (often called xmlurl or htmlurl; sometimes called permalink)
* title
* type (hint of the MIME type of the resource indicated by the URL)

In general, properties on an outline item <code><nowiki><li></nowiki></code> are represented by a nested definition list <code><nowiki><dl></nowiki></code>.  Strictly speaking, it is the first <code><nowiki><dl></nowiki></code> inside the <code><nowiki><li></nowiki></code> and before any following <code><nowiki><ol></nowiki></code>, <code><nowiki>&lt;ul&gt;</nowiki></code>, or <code>&lt;li&gt;</code>, e.g. here is an item "item 1" with a description property (the subpoints are there purely as a point of reference to an earlier example).

<pre><nowiki>
<ol class='xoxo'>
  <li>item 1
    <dl>
      <dt>description</dt>
        <dd>This item represents the main point we're trying to make.</dd>
    </dl>
    <ol>
      <li>subpoint a</li>
      <li>subpoint b</li>
    </ol>
  </li>
</nowiki></pre>

=== Special Properties ===
There are a handful of special properties which we are able to represent more directly and conveniently with the semantic XHTML building blocks that we have included, instead of terms in a definition list.  Mostly taken from the above list of common properties, these are:
* text, url, title, type, and rel (short for relationship)

If we were to represent them simply as definition terms (including the "description" property from the previous example), they might look something like this:

Example for the sake of discussion only / not a canonical XOXO example:

<pre><nowiki>
<ol class='xoxo'>
  <li>
    <dl>
      <dt>text</dt>
        <dd>item 1</dd>
      <dt>description</dt>
        <dd> This item represents the main point we're trying to make.</dd>
      <dt>url</dt>
        <dd>http://example.com/more.xoxo</dd>
      <dt>title</dt>
        <dd>title of item 1</dd>
      <dt>type</dt>
        <dd>text/xml</dd>
      <dt>rel</dt>
        <dd>help</dd>
    </dl>
  </li>
</nowiki></pre>

However, by taking advantage of the semantic <code><a href></code> element, we are able to dramatically simplify the common cases that utilize these properties.  From a parser's perspective, this applies to the first  <code><a href></code> element directly inside the <code><nowiki>&lt;li&gt;</nowiki></code>.

Actual XOXO Example:

<pre><nowiki>
<ol class='xoxo'>
  <li><a href="http://example.com/more.xoxo"
         title="title of item 1"
         type="text/xml"
         rel="help">item 1</a> 
<!-- note how the "text" property is simply the contents of the <a> element -->
      <dl>
        <dt>description</dt>
          <dd>This item represents the main point we're trying to make.</dd>
      </dl>
  </li>
</nowiki></pre>

Any other properties are simply added to the definition list in the same way as the "description" property.

=== Multi-value Properties === 

Properties that have multiple values are added using a list, nested inside of the corresponding <code>dl</code> element:

<pre><nowiki>
<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>
</nowiki></pre>

== Publishing XOXO ==

XOXO may be published in two forms, valid XHTML, and simple well-formed XML.

=== Valid XHTML XOXO ===

A valid XHTML XOXO page is a complete XHTML document.

<pre><nowiki>
<!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 page</title>
</head>
<body>
<ol class="xoxo">
 <li><a href="URL-one">TEXT-one</a></li>
 <li><a href="URL-two">TEXT-two</a></li>
 ...
</ol>
</body>
</html>
</nowiki></pre>

=== Simple well-formed XML XOXO ===

The root element of a simple well-formed XML XOXO page is either an <code>ol</code> or <code>ul</code> with class name of "xoxo".  This variant is ideal for syndication and transclusion into (X)HTML pages with [[rest/ahah|AHAH]].

<pre><nowiki>
<ol class="xoxo">
 <li><a href="URL-one">TEXT-one</a></li>
 <li><a href="URL-two">TEXT-two</a></li>
 ...
</ol>
</nowiki></pre>

=== Content-Type ===

Valid or well-formed XHTML XOXO SHOULD be served with this Content-Type header for maximum browser compatibility.

<pre><nowiki>
Content-Type: text/html; charset=utf-8
</nowiki></pre>

It MUST be served with one of these Content-Type headers:

<pre><nowiki>
Content-Type: text/html; charset=utf-8
Content-Type: application/xhtml+xml
Content-Type: application/xml
</nowiki></pre>

== Examples in the Wild ==
This section is '''informative'''.

There are many wild examples. Nearly every blogroll on the Web can be parsed as XOXO, since they are typically an unordered list of list items of hyperlinks, which is within the XOXO profile. List examples here, when the list becomes too long we can move to a dedicated page.

* [http://api.talis.com/bf/stores/ukbib/services/facet?query=feynman&fields=title%2Csubject&top=10&output=html HTML output from a faceting service for book data]

== Implementations ==
This section is '''informative'''.

* CVarious [[s5-tools|S5 tools]]
* [http://chneukirchen.org/blog/ Christian Neukirchen] has [http://chneukirchen.org/blog/archive/2006/01/xoxo-rb-0-1-released.html written a xoxo.rb, a XOXO parser and generator for Ruby]
* [http://odeo.com Odeo] publishes users' subscription lists in XOXO. See Ryan King's list [http://odeo.com/profile/RyanKing/xoxo here].
* [http://www.decafbad.com/blog/ Les Orchard] has [http://www.decafbad.com/blog/2005/07/12/xoxo_outliner_experiment written] a [http://www.decafbad.com/2005/07/map-test/tree2.html nice XOXO outline editor in javascript].
* http://homepage.mac.com/ctholland/thelab/outlines/ is a great demonstration of  dynamic interactive XOXO with use of "compact" and DHTML to collapse/expand.
* http://tool-man.org/examples/sorting.html is a great demonstration of drag and drop sortable XOXO lists with javascript and CSS.
* http://www.opendarwin.org/~drernie/xoxo-datatypes.html Mapping XOXO to [http://developer.apple.com/documentation/Cocoa/Conceptual/PropertyLists/Concepts/XMLPListsConcept.html Mac OS X property lists]
* [http://weblog.techno-weenie.net/2005/9/30/if_i_had_a_tumblelog single line of rails to convert XOXO to HTML]

=== Contoh Kode ===

* Lihat halaman [[xoxo-sample-code]] untuk contoh kode open source untuk membaca dan menulis berkas XOXO.
* Lihat juga halaman [[xoxo-compact-sample]] dengan sumber untuk CSS dan JS yang mengubah tampilan dan nuansa XOXO yang sangat polos agar memiliki segitiga twiddlable untuk sekumpulan daftar yang menghargai attribut dengan baik.

== Skema XOXO ==
Bagian ini adalah informatif.

Catatan: mungkin sudah usang dan perlu diperbaharui untuk mencerminkan penggunaan &lt;dl&gt; untuk membubuhi keterangan tiap-tiap XOXO dengan properti secara acak.
* [[DTDs]]
* [http://www.nidelven-it.no/projects/XOXO/xoxo-0.1.tgz Skema (Relax NG dan DTDs)]

== Referensi ==
=== Referensi yang normatif ===
* [http://www.w3.org/TR/xhtml1 XHTML 1.0]
* [http://www.w3.org/TR/xhtml-modularization XHTMLMOD]
* [http://gmpg.org/xmdp/ XMDP]
* [http://gmpg.org/xfn/ XFN]

=== Referensi yang Informatif ===
Bagian ini adalah '''informatif'''.
* [http://developers.technorati.com/wiki/attentionxml Attention.xml]
* [[VoteLinks]]
* [http://www.w3.org/TR/xhtml11 XHTML 1.1]
* [http://opml.scripting.com/spec OPML 1.0]
* Kontribusi dari http://developers.technorati.com/wiki/XOXO

=== Similar Work ===
* [http://dannyayers.com/archives/001961.html XHTML Outlines] - DannyAyers independently came up with idea in 2003 October (just a month or two before Kevin and Tantek independently came up with XOXO) to use a simple profile of XHTML to semantically represent outlines using existing building blocks from XHTML.
* [http://semtext.org/2004-02/ XOW] - making them editable, producing RDF and bookmark lists from them (DannyAyers)
* [http://en.wikipedia.org/wiki/XBEL XBEL, or the XML Bookmark Exchange Language], an open XML standard for sharing Internet URIs, also known as bookmarks (or favorites in Internet Explorer).
* [http://en.wikipedia.org/wiki/OPML OPML (Outline Processor Markup Language)], an XML format for outlines.

=== Bacaan yang terkait ===
* [http://patricklogan.blogspot.com/2005/08/lists-really-can-we-expect-better.html Patrick Logan menuliskan Mengapa kedua ekstensi OPML dan Microsoft Lists extension tidak diperlukan].

=== Bacaan yang tidak terkait ===
* [http://www.questionablecontent.net/view.php?comic=493 Questionable Content comic #493] - ternyata karakter Faye adalah penggemar XOXO.

=== Promotional Materials / Schwag ===
* There is an entire XOXO clothing and accessories line.  [http://www.xoxo.com/home.php Buy XOXO stuff online].

== Discussions ==
This specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. There is a separate document where we are keeping our brainstorms and other explorations relating to XOXO:

* See [[xoxo-brainstorming]] for additional thoughts on how to use XOXO for specific uses.
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].
** [http://blogxoxo.blogspot.com/ XOXO Blog]

=== Tanya Jawab ===
* Jika Anda memiliki pertanyaan seputar XOXO, silahkan kunjungi [[xoxo-faq]] dan jika Anda tidak menemukan jawabannya, tambahkan pertanyaan Anda pada halaman tersebut.

=== Isu ===
* Silahkan menambahkan isu dengan spesifikasi apapun ke dokumen terpisah [[xoxo-issues]].

[[Category:Specifications]]
[[Category:XOXO]]