Technorati

Can your website be your API?

Using semantic XHTML to show what you mean

• Kevin Marks
• Tantek Çelik
• Technorati

History

• HTML started structured
• became presentational during browser wars
• explosive growth because of error tolerance
• table abuse & font tagitis & spacer gif layouts caused 2 backlashes

Backlash for structure - XML

• XML as stricter structure
• presentation banished
• draconian error checking
• freedom to make own schemas
• appeals to programmers

Backlash for layout - CSS

• move presentation away from structure
• content independence
• appeals to designers
• gaining adoption - http://www.csszengarden.com

Where does XML fail?

• schema explosion
• tag/attribute battling
• abstraction ratholes - BTO ontology
• not human readable
• doesn't work on "the Web" today

Where does CSS fail?

• folk coding
• variable implementations
• visual designers thinking about presentation as structure
• structure hacks to fix presentation

Can we re-integrate these strands?

• XHTML is XML
• parseable, modular
• XHTML supports CSS
• everyone already has a viewer
• everyone can make queries

Example - Politics

• an illustration is worth 100 words.
• Technorati's new website summarizing political blogs
• uses semantic markup

Problem

• we wanted a chart of the top 3 links on the page
• this was dynamically generated using some complex app logic to choose the link title based on transient data
• solution: use the site output page as input

Detail:

• Here's the markup we wanted:

<tbody><tr><th class="position">1.</th>

<td class="source"><cite class="link">

<a href="http://news.ft.com/cms/s/36048bf8-0ff7-11d9-ba62-00000e2511c8.html">

  No French or German turn on Iraq</a>

</cite></td></tr>

• easy to parse out as it is semantic - use an xml parser and find the right nodes
• extract the url and text and query the database for link history
• generate a chart

XHTML Building blocks

• Most applications reuse a lot of common concepts
• strings
• lists
• hashtables
• links
• XHTML has lots of primitives for these structures

Building blocks - Links

•  <a href="url">label</a>

• add a category with

   rel="relationship" 

• rel is extensible and multivalued

•  rel="relationship1 relationship2" 

Building blocks - link examples

• <a href="" rel="bookmark" 

• blog to post permalink relationship

• XFN

  <a rel="friend colleague met muse"

• human relationships - social networks

• Votelinks

  rel="vote-for" or "vote-against" or "vote-abstain"

• agreement/reviews/motions

building blocks - Citations and quotes

• <cite>

  - cite a person or source by name

• <cite><a href="">

  - cite a linked page

• <q>

  - a brief inline quotation

• <blockquote>

  - A longer quotation
• both these have a

  cite

  attribute for a link
• <q cite="http://...">

building blocks - Citations and quotes examples

<cite>Oscar Wilde</cite> said:

<blockquote cite ="http://www.quotedb.com/quotes/95">

"A cynic is a man who knows the price of everything and

the value of nothing."

</blockquote>

building blocks - Lists

• Programs have arrays, XHTML has lists

• <ol><li>

  - ordered array

• <ul><li>

  - unordered collection
• Can nest these

building blocks - Tables

• Can be used for a 2D array

• <table>

  - define grid

• <thead><tr><th><th>

  - column heads

• <tbody><tr><th>

  - row heads

• <td>data</td>

  - elements

building blocks - Definition lists

• these correspond approximately with dictionaries
• (hashtables)

 <dl>

    <dt>key</dt>

        <dd>value</dd>

 </dl>

• uniqueness constraints not explicit

Existing examples

• systematizing existing behaviour using these building blocks
• XFN
• XOXO
• Vote Links

XFN - XHTML friends network

• Just add 'rel' to your blogroll links, e.g.

<a href="http://dana.example.com">dana</a>

• with XFN:

<a rel="friend" href="http://dana.example.com">dana</a>

XFN - XHTML friends network

• define profile using a dictionary -
• http://gmpg.org/xfn/11

 <div><h3>professional</h3>

     <dl>

     <dt id="co-worker">co-worker</dt>

         <dd>Someone a person works with, or works at the same organization as. Symmetric.  Usually transitive.</dd>

     <dt id="colleague">colleague</dt>

         <dd>Someone in the same field of study/activity. Symmetric. Often transitive.</dd>

     </dl>

    </div>

Future examples

• attention.xml
• XSPF - play lists

New types - methodology

• map existing data structures into XHTML equivalents
• enable new stylable building blocks
• readily exchange data as mapping is 1:1

New type - People

• RFC 2426 vCard <-> hCard
• create an xhtml representation of this
• embed within a webpage

New type - Events

• RFC 2445 iCalendar <-> hCalendar
• describe events
• display them and enable parsing

Questions

• What other building blocks are useful?