[uf-new] collection-design-pattern proposal

[Manu Sporny]

Scott Reynen wrote:
> We have a page of real world examples now; why not use it?  Here is one
> example from the real web:
> 
>> <A href="/artists/ammonite" xmlns:cc="http://creativecommons.org/ns#"
>> rel="cc:attributionURL" property="cc:attributionName"
>> content="Ammonite"><B>Ammonite</b></a><br><I>Reconnection</I>
>> [...]
>> [<a href="01.m3u">hifi</a> <a href="01-lofi.m3u">lofi</a>] 01-Sunset
>> (3:11)<br>
> 
> I can see that "Sunset" is a song (item) in the album (collection)
> titled "Reconnection."  What are the various alternatives for marking up
> this relationship for machine consumption?  What are the advantages and
> disadvantages of each option?

Rather than do the full markup at first, let's try focusing on the
actual parts that matter. A full mark-up is provided at the end of this
e-mail with one of the listed methods.

------------------------------------------------------------------------
Option #1 (implicit grouping):

<div class="haudio">
   <span class="collaborator hcard fn">Ammonite</span>
   <span class="work-title">Reconnection</span>
   <div class="haudio">
      <span class="work-title">Sunset</span>
   </div>
</div>

Pros:

* Less verbose for grouping markup.
* No extra collection Microformat necessary.

Pro/con:

* Grouping is handled on a uF by uF basis. Might not be consistent.

Cons:

* Impossible to know if nested microformats belong to the group.
* Does not allow for sparse (unstructured) grouping.

------------------------------------------------------------------------
Option #2 (explicit id-based grouping):

<div id="reconnection" class="haudio">
   <span class="collaborator hcard fn">Ammonite</span>
   <span class="work-title">Reconnection</span>
</div>
[...]
<div id="reconnection.sunset" class="haudio">
   <span class="work-title">Sunset</span>
</div>

Pros:

* Explicitly defined groups.
* Grouping is solved for all Microformats.
* Allows for sparse grouping.

Cons:

* New type of Microformat/design pattern may emerge.
* Parser may have to become more complex.
* Use of id isn't very microformatty.

------------------------------------------------------------------------
Option #3 (explicit class-based grouping):

<div class="haudio grouping.reconnection">
   <span class="collaborator hcard fn">Ammonite</span>
   <span class="work-title">Reconnection</span>
</div>
[...]
<div class="haudio grouping.reconnection.sunset">
   <span class="work-title">Sunset</span>
</div>

Pros:

* Explicity defined groups.
* Grouping is solved for all Microformats.
* Fits more with the Microformat way than Option #2
* Allows for sparse grouping.

Cons:

* Parser may have to become slightly more complex.
------------------------------------------------------------------------

Complete example using Option #3:

<div class="haudio grouping.reconnection">
<A href="/artists/ammonite" xmlns:cc="http://creativecommons.org/ns#"
rel="cc:attributionURL" property="cc:attributionName"
content="Ammonite"><B><span class="collaborator hcard
fn">Ammonite</span></b></a><br><I><span
class="work-title">Reconnection</span></I>
</div>
[...]
<div class="haudio grouping.reconnection.sunset">
[<a rel="sample" href="01.m3u">hifi</a> <a rel="sample"
href="01-lofi.m3u">lofi</a>] 01-<span class="work-title">Sunset</span>
(<abbr class="length" title="191">3:11</abbr>)<br>
</div>

-- manu