blog-post-brainstorming

From Microformats Wiki
Revision as of 13:11, 20 October 2005 by DavidJanes (talk | contribs) (Add example XHTML)
Jump to navigation Jump to search

Discussion Participants

Editors

Authors

Contributors

Purpose

The 'blog-post-microformat' proposes a codification of how blog posts are indentifies within weblogs. It is hoped that this should be considered to be 'expansive': for example, the proposal could be used on CNN.com to mark up news articles and summary pages.

Terminology

This section explores the terminology that should used to discuss a blog post microformat. To make it easier to talk about the various different types of teminology, We're using a XML-like namespace version so we can make statements like atom:entry is roughly equivalent to rss20:feed, atom:feed/atom:link@relalternate is roughly equivalent to rss20:channel/rss20:link or atom:author is not equivalent to rss:entry/rss:author (because RSS 2.0 is only the definition of an email address).

Common terminology in weblogs

Reviewing blog-post-formats#Tools, one can see that there's little standardization amongst tools or even within a individual tool (such as 'blogger') for names of elements of blog posts. There are however many common elements, including:

  • a container for all posts/entries
  • a container for individual posts
  • the post content, which can be complete, summarized with a link to the complete link, or a couple of paragraphs with javascript/CSS tricks to reveal the remainder of the content
  • the name of the author
  • the posting date (in many many formats)

Although this looks like a bit of a dog's breakfast, there is usually a fair amount of rigour behind the presentation, as Atom and/or RSS feeds can be produced also from the same tools.

Furthermore, in developing a microformat for weblog posts, we want to be careful not to break any (or many) templates. Note that many weblog templates will have to be updated as they produce somewhat crufty HTML rather than shiny XHTML.

Atom Terminology

See here for the spec and blog-post-formats#Atom for analysis.

  • atom:feed - (composite) a collection of entries plus information about them
    • atom:author - (composite) the author of a feed (may contain atom:email, atom:name, atom:uri)
    • atom:id - a permament identifier for a feed
    • atom:title - the title of an atom:entry or a atom:feed
    • atom:updated - the last time the feed was updated
    • atom:link@relalternate - the home page of a feed
    • atom:link@relself - the URI of the feed (where it can be downloaded)
    • atom:entry - (composite) an entry within the feed
      • atom:content - the feed's content
      • atom:summary - a summary of the feed's content
      • atom:entry/link - the permament URI of the entry
      • atom:published - the time of the initial creation or first availability of the entry

RSS Terminology

See here for the spec and blog-post-formats#RSS for analysis. There are a lot more elements in RSS but this covers the most commonly used ones.

  • rss2:channel - (composite) a collection of entries plus information about them
    • rss2:author - (composite) the author of a feed (may contain atom:email, atom:name, atom:uri)
    • rss2:link - The URL to the HTML website corresponding to the channel (compare to atom:link@relalternate)
    • rss2:title - the title of an rss2:channel or a rss2:item
    • rss2:pubDate - The publication date for the content in the channel.
    • rss2:item - (composite) an entry within the feed
      • rss2:item/link - The URL of the item. Note that this may not be a permalink for the item; it may be a link to some other page on the Internet that the rss2:item is about
      • rss2:description - The item synopsis [sic]. There is no special indication whether this is the full content of an entry, a summary, or a precis of what the rss2:item/link is pointing to
      • rss2:author - email address of the author of the item

Recommendation

Atom has a much more precise mechanism for defining syndication feeds and weblog data. A mechanical transformation from Atom -> RSS will always lead to a correct RSS feed; a RSS -> Atom translation would have to make a decision amongst multiple definitions that may not always be correct. For example, the format of markup, the role of an author, or the meaning of a link.

IMPORTANT: we shall talk about things such as 'marking elements atom:feed'; consider this a purely conceptual thing. The text 'atom:feed' will not appear in the XHTML microformat -- we may decide later to use the actual phrase 'atom_feed', 'feed', 'items' or 'googlybear'. In the case where there is no clear or applicable atom terminology, we shall use 'weblog:xxx'.

Discovered Elements

This section explores the information discovered from blog-post-formats using the terminology discussed above. We will only focus on the major elements of weblog posts:

  • the EntryGroup
  • the individual Entry
  • the Entry Title
  • the Entry Content
  • the Entry Permalink
  • the Entry Datetimes

For now, the codification of the following major elements will be deferred as there is/may be overlap with other microformats that should be explored further

  • the EntryGroup Title
  • the EntryGroup Permalink
  • the Entry Poster/Author - in particular, should hcard be used?

Further input from the community would be appreciated here

EntryGroup

Roughly speaking, this corresponds to 'atom:feed' or 'rss2:channel' (in particular, the items within those XML elements). See blog-post-examples#EntryGroup for the various forms seen in the wild.

Microformat Recommendation

  • weblog pages (including home pages, archives, category pages, tag pages and so forth) that may container multiple entries MUST enclose the entries in a atom:feed element
  • weblog pages MAY have multiple atom:feed element enclosing different groups of entries
  • atom:feed elements MUST NOT be nested
  • weblog pages that have exactly on entry MAY use the atom:feed

Example Transformation

Note that the string 'atom:feed' is a placeholder for something to be decided later.

Original (obviously, if there is no existing EntryGroup block element, one can be added):

<div id="content">
 <h2 id="home-title">
  Latest microformats news 
  <a href="http://www.microformats.org/feed/" title="link to RSS feed" id="feed-link">
   <img src="/img/xml.gif" width="23" height="13" alt="XML" />
  </a>
 </h2>

 <div class="entry">
  <h3 id="post-60">
   <a href="http://www.microformats.org/blog/2005/...">Wiki Attack</a>
  </h3>
  ...
 </div>

 ...
</div>

Transformed:

<div id="content" class="atom:feed">
 <h2 id="home-title">
  Latest microformats news 
  <a href="http://www.microformats.org/feed/" title="link to RSS feed" id="feed-link">
   <img src="/img/xml.gif" width="23" height="13" alt="XML" />
  </a>
 </h2>

 <div class="entry">
  <h3 id="post-60">
   <a href="http://www.microformats.org/blog/2005/...">Wiki Attack</a>
  </h3>
  ...
 </div>

 ...
</div>

EntryGroup Title

Not covered by this proposal yet.

EntryGroup Permalink

Not covered by this proposal yet.

Individual Entry

This corresponds almost exactly to the atom:entry or rss2:item elements. See blog-post-examples#Individual_Entry for the various forms seen in the wild.

Microformat Recommendation

  • weblog entries MUST be enclosed in a single atom:entry element
  • atom:entry elements MUST NOT be nested
  • atom:entry MUST NOT not belong to more than one atom:feed element

Example Transformation

Note that the string 'atom:entry' is a placeholder for something to be decided later.

Entries in existing block

Original:

 <div class="entry">
  <h3 id="post-60">
   <a href="http://www.microformats.org/blog/2005/...">Wiki Attack</a>
  </h3>
  ... rest of entry ...
 </div>

Transformed:

<div class="atom:feed">
 <div class="atom:entry entry">
  <h3 id="post-60">
   <a href="http://www.microformats.org/blog/2005/...">Wiki Attack</a>
  </h3>
  ... rest of entry ...
 </div>
 ... additional entries ...
</div>

Entries not in an existing block

Original:

 <a name="112877372228959075">&nbsp;</a>
 <br>
  <strong>Just one problem, Minister.</strong> Last week, Bill Rammell, 
 <br>

Transformed:

<div class="atom:feed">
 <div class="atom:entry" id="112877372228959075">
  <br />
   <strong>Just one problem, Minister.</strong> Last week, Bill Rammell, 
  <br />
  ... rest of entry ...
 </div>
 ... additional entries ...
</div>

Note the additional changes were also made:

  • <br> was made XHTML compliant
  • <a name="..."> was converted to a id="..." (confirm this is OK)

Disjointed entries

Ignore any existing blocks and treat as the previous case of no block.

Entry Title

This corresponds almost exactly to the atom:title or rss2:title elements. See blog-post-formats#Titles for examples from which we see that there are two fundemental ways titles are used in the wild: at the block level and inline. Our proposal must be capable of handling both forms.

Microformat Recommendation

  • atom:entrys SHOULD have at most 1 title
  • block level titles SHOULD be represented using <h#>, the first such element for in a atom:entry being considered to be the title; this need not be marked up or identified in any other way as the title
  • inline titles MUST be marked as atom:title; it is also possible to do this using block level formatting such as <div>, but this is discouraged

Discussion: why not always <h#>?

Using CSS display: inline, block level elements can be converted to inline elements. Unfortunately, we cannot nest <h#> inside of a <p> block to achieve the correct effect. I.e. we cannot convert ...

<p><strong>The Title</strong>: The Text...</p>

... into ...

<p><h3 style="display: inline">The Title</h3>: The Text ...</p>

... because the XHTML will not validate. Also...

<h3 style="display: inline">The Title</h3><p>: The Text ...</p>

... will not work because presentation effect will be different than what the user intends (because the <p> will introduce a line break).

Example Transformation

Note that the string 'atom:title' is a placeholder for something to be decided later.

Header in <h#> block

Original (and Final):

<div class="atom:entry">
 <h2 id="post-59">Web Essentials Audio</h2>
 ... reset of entry ...
</div>

No transformation is needed -- the blog-post microformat will recognize this as the atom:title.

Header in other block element

Original:

<div class="atom:entry">
 <div class"header">Web Essentials Audio</div>
</div>

Transformed (the header level is to taste):

<div class="atom:entry">
 <h3>Web Essentials Audio</h3>
</div>

It is possible to add class"atom:title" to the div but we recommend against it. However, we recognize rgar there may be certain BB Tools that making this change may be too difficult.

Header in inline element

Original:

 <div class="atom:entry" id="112877372228959075">
  <br />
   <strong>Just one problem, Minister.</strong> Last week, Bill Rammell, 
  <br />
  ... rest of entry ...
 </div>

Transformed:

 <div class="atom:entry" id="112877372228959075">
  <br />
   <strong class="atom:title">Just one problem, Minister.</strong> Last week, Bill Rammell, 
  <br />
  ... rest of entry ...
 </div>

Entry Content

This roughly corresponds to atom:content and/or atom:summary elements. See blog-post-examples#Entry_Content for the various forms seen in the wild.

Discussion: the split content problem

The last item above (content broken into multiple sections) introduces a few unique problems. It is not sufficient to enclose all the different content sections in a atom:content element, as the following example illustrates:

 <div class="atom:entry">
  <div class="atom:content">
   ... first part of the content ...
   "Read More"
   ... second part of the content ...
  </div>
 </div>

"Read More" is not part of the content! Therefore, we propose that multiple content sections be allowed in a single atom:entry. The concatenation of all these content blocks will define the complete content:

 <div class="atom:entry">
  <div class="atom:content">
   ... first part of the content ...
  </div>
   "Read More"
  <div class="atom:content">
   ... second part of the content ...
  </div>
 </div>

The same argument is applicable to atom:summary.

Microformat Recommendation

  • an atom:entry MAY have zero or more atom:summary sections. There is no requirement that different representations of the same entry (on different URIs) use the same summaries.
  • an atom:entry MAY have zero or more atom:content sections. The serial concatenation of all the atom:content sections within the entry MUST represent the complete content of the entry. Note that the rule here is slightly different than Atom which only allows one atom:content.

Example Transformation

Note that the strings 'atom:summary' and 'atom:content' (etc.) are placeholders for something to be decided later.

Entry with summary content

Original:

<div class="inlineBlog">
 <h3 id="a003068">
  <a href="http://thecommunityengine.com/h.../xfolk_vegomatic.html" class="taggedlink">xFolk Veg-o-matic Alpha</a>
 </h3>
 <p class="abstract extended">
  We provide a way to surf the web and slice and dice information you find there into your own custom output stream.
 </p>
 ... some tag and category stuff ...
 <p>
  The folks at ... the rest of the content
 </p>
 <p class="extended">
  <a href="http://thecommunityengine.com/.../xfolk_vegomatic.html#more">Continue reading "xFolk Veg-o-matic Alpha"</a>
 </p>
 ...
</div>

Transformation:

<div class="inlineBlog atom:entry">
 <h3 id="a003068">
  <a href="http://thecommunityengine.com/h.../xfolk_vegomatic.html" class="taggedlink atom:permalink">xFolk Veg-o-matic Alpha</a>
 </h3>
 <p class="abstract extended">
  We provide a way to surf the web and slice and dice information you find there into your own custom output stream.
 </p>
 ... some tag and category stuff ...
 <div class="atom:summary">
  <p>
   The folks at ... the rest of the content
  </p>
 </div>
 <p class="extended">
  <a href="http://thecommunityengine.com/.../xfolk_vegomatic.html#more">Continue reading "xFolk Veg-o-matic Alpha"</a>
 </p>
 ...
</div>

Notes:

  • we didn't do anything with the "abstract" section -- this is a discussion for another day
  • we didn't include the tag stuff in the summary, and probably wouldn't if this was the complete content

Entry with complete content

Original:

<div class="entry single">
 <h2 id="post-61">Class attributes are about more than styling</h2>

 <p>When people talk about microformats, ... </p>
 
 <blockquote cite="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">
  ... quoted text from elsewhere
 </blockquote>

 <p>There’s a couple of points I’d like to highlight here:</p>
 
 ... more content ...

 <h4 class="tags">Technorati Tags:</h4>
 <ul class="tags">
  <li><a href="http://www.technorati.com/tag/css" rel="tag">css</a></li>
  ...
 </ul>

 <ul class="post-info">
  ... footer stuff ...
 </ul>
</div>

Transformation:

<div class="entry single atom:entry">
 <h2 id="post-61">Class attributes are about more than styling</h2>

 <div class="atom:content">
  <p>When people talk about microformats, ... </p>

  <blockquote cite="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">
   ... quoted text from elsewhere
  </blockquote>

  <p>There’s a couple of points I’d like to highlight here:</p>

  ... more content ...
 </div>

 <h4 class="tags">Technorati Tags:</h4>
 <ul class="tags">
  <li><a href="http://www.technorati.com/tag/css" rel="tag">css</a></li>
  ...
 </ul>

 <ul class="post-info">
  ... footer stuff ...
 </ul>
</div>

Notes:

  • the only thing that really needed to be done is enclose the content
  • my preference would be to move the post id to the atom:entry

Entry with split content (multiple sections)

Original:

<div class="blogbody">
 <a name="008148"></a>

 <div class="title">
  Face to face: why places will continue to exist
 </div>

 <div class="posted">
  <strong>Brian Micklethwait (London)</strong>
    
  <a href="...">Science & Technology</a>
 </div>

 <p>It is not just that I dislike filling in forms....</p>
 ... the first section of the content ...

 ... this link makes the extended section show ...
 <span id="varP8148">
  <img src="http://www.samizdata.net/blog/img/bullet_tri.gif" width="16" height="10" alt="" />
  <a href="..." onclick="showMore(8148,'...');return false;">
   Read more.
  </a>
 </span>
  
 <div id="varXYZ8148" style="display: none">
  <p>The very gadgets – computers linked...</p>
  ... the rest of the extended content ...

  ... this link makes the extended section hide ...
  <img src="..." width="16" height="10" alt="" />
   <a href="#008148" onclick="showMore(8148,0);return true;">
    Read less.
   </a>
  </div>
 </div>
</div>

Transformation:

<div class="blogbody atom:entry" id="008148">
 <h3>
  Face to face: why places will continue to exist
 </h3>

 <div class="posted">
  <strong>Brian Micklethwait (London)</strong>
    
  <a href="...">Science & Technology</a>
 </div>

 <div class="atom:content">
  <p>It is not just that I dislike filling in forms....</p>
  ... the first section of the content ...
 </div>

 ... this link makes the extended section show ...
 <span id="varP8148">
  <img src="http://www.samizdata.net/blog/img/bullet_tri.gif" width="16" height="10" alt="" />
  <a href="..." onclick="showMore(8148,'...');return false;">
   Read more.
  </a>
 </span>
  
 <div id="varXYZ8148" style="display: none">
  <div class="atom:content">
   <p>The very gadgets – computers linked...</p>
   ... the rest of the extended content ...
  </div>

  ... this link makes the extended section hide ...
  <img src="..." width="16" height="10" alt="" />
   <a href="#008148" onclick="showMore(8148,0);return true;">
    Read less.
   </a>
  </div>
 </div>
</div>

Note:

  • atom:content divs were created for each the of the text sections, so that non-content coded would not be incorrectly marked
  • there are two atom:content sections; together they make the complete content
  • the conversion of <div class="header"> to <h3>
  • the addition of atom:entry as needed
  • the removal of the <a name="008148"> in favor of placing an id on the atom:entry
  • further manipulation of the author could be done
  • further manipulation of the category could be done

Entry Permalink

Permalinks roughly correspond to atom:link. See blog-post-examples#Entry_Permalinks for examples.

A permalink is called canonical if it is the best representation of the URI for that entry; the definition of what 'best representation' is is entirely at the discretion of the weblog's publisher. We recommend that weblogs use canonical URIs because it allows "threading" together multiple posts and sources with byte-level comparisons. In general, the canonical URI should be the link used in an Atom entry.

Microformat Recommendation

  • an Entry MUST NOT have more than one permalink marked as atom:link
  • permalinks SHOULD be absolute URIs
  • permalinks SHOULD be canonical
  • permalinks SHOULD be the same as the atom:link used in syndication feeds

Example Transformations

Original:

<div class="entry">
 <h3 id="post-45">
  <a 
   href="http://www.microformats.org/blog/2005/08/21/foobar-microformats/" 
   rel="bookmark"
   title="Permanent Link to FooBar Microformats">FooBar Microformats</a>
  </h3>
   ...
</div>

Transformation:

<div class="atom:entry entry">
 <h3 id="post-45">
  <a 
   href="http://www.microformats.org/blog/2005/08/21/foobar-microformats/" 
   rel="atom:link bookmark"
   title="Permanent Link to FooBar Microformats">FooBar Microformats</a>
  </h3>
   ...
</div>

Original:

<h3>YET ANOTHER INSTANCE OF THE WORLD FINALLY CATCHING UP TO THE BLOG</h3>
<p>Today's news: Neuticles win ... award.</p>
<p class="posted">
Posted by judi on October  7, 2005 at 05:00 PM |
<a href="http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html">Permalink</a>
</p>

Transformation:

<div class="atom:entry">
 <h3>YET ANOTHER INSTANCE OF THE WORLD FINALLY CATCHING UP TO THE BLOG</h3>
 <p>Today's news: Neuticles win ... award.</p>
 <p class="posted">
 Posted by judi on October  7, 2005 at 05:00 PM |
 <a rel="atom:link" href="http://blogs.herald.com/dave_barrys_blog/2005/10/yet_another_ins.html">Permalink</a>
</p>

Entry Datetimes - Creation and Modified

Weblogs typically display (in HTML) the creation time of their posts (roughly but not exactly corresponding to atom:published) and not so much the last modified time (atom:updated).

Also see datetime-design-pattern for more information on specifying datetimes. The recommendation here is styled after datetimes in hcalendar.

Forms seen in the wild

See blog-post-formats#Datetimes

Microformat Recommendation

  • date headers between weblog entries are outside of this microformat
  • atom:published SHOULD be indicated by an abbr element around the human readable version of the date or datetime.
    • the 'class' attribute MUST indicate atom:published
    • the 'title' attribute MUST be a complete datetime, in the format of datetime-design-pattern
  • likewise for atom:updated, if present

Example transformation

Note that the string 'atom:published' is a placeholder for something to be decided later.

Original:

<a href"...">Friday, September 30th, 2005 at 12:31 pm</a>

Transformed:

<a href"..."><abbr 
 class"atom:published" 
 title"200050930T12:31:01-0500">Friday, September 30th, 2005 at 12:31 pm</abbr></a>

Entry Author

Not covered by this proposal yet.

Possible Uses

This section describes potential applications for a blog post microformat

Transformational Uses

By transformational, we mean feeding a weblog post to some sort of transformation tool (such as XSLT) to produce a different version of the post fit for a different use.

Printing Weblog Posts

Reblogging

Archival Uses

By 'archival', we mean taking weblog entries and placing them in a database for later analysis, searching, aggregation and so forth.

Personal Database

Search Engines

Obstacles

Header Tag for Entry Title?

--Bryan 14:55, 14 Aug 2005 (PDT)

Many weblog CMSes allow for concurrent publishing of entries in the following ways:

  • multiple entries on a page (an "Index," monthly archive, category archive, etc. see Example)
  • one entry on a page (see Example)

Early attempts at blog-post-formats have set the title of the blog post to use the h3 tag.

At least where individual entry pages are concerned (and possible including indexes and archives), I recommend using h1 for the entry title, given that the entry is by far the most important chunk of information on the page, and it's what we'd want search engines to recognize as such. In the case where the h1 was used for the site title, fears about "losing" this information should be allayed by simply including the site name in the title tag, after the title of the article / entry / post.

Whether an h3 or h1 is used is irrelevant, the semantics will be applied with classnames. This is a non-issue. --RyanKing 22:35, 18 Aug 2005 (PDT)


See Also