blog-post-brainstorming

Jump to: navigation, search

Contents

Discussion Participants

Editors

Authors

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:

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.

RSS 2.0 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.

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:

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

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

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

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:

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

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 that 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

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:

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:

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:

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

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

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

A work in progress

Microformat Recommendation

Possible Atom to microformat(s) mapping

Multiple feeds on a page

Post hAtom 1.0: support multiple feeds on a single page. Changes from above.

Discussion

feed title

I initially thought "fn" would make sense for the feed title, but having looked at some blogs/feeds, though in many cases the title of the blog/feed *is* the name of the blog/feed, this is often not the case.

Two examples:

  1. . Some blog titles consist of the blog name and the date, e.g. Scripting News does this.
  2. . Some blog titles consist of the blog name and a short temporary phrase or saying

I have seen both of these in the wild often enough to believe that blog title and blog name are not the same, thus it is inappropriate to re-use "fn" from hCard, since the feed title does not mean the same thing as the *name* of the feed. Thus I have removed the suggestion to re-use "fn" for feed title, and instead propose re-using "headline" from the entry, which does appear to have the same semantic.

Additional Possibilities

More post hAtom 1.0 thoughts:

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

Partial Text Blogs

Partial content blogs can be created by producing the full html content of a blog entry but not marking it up as such. The atom:summary portion of that entry can be marked up as summary, or could be written up and placed in a hidden block element within the html. hAtom parsers would ignore the unannotated content and produce summary information only.

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:

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

blog-post-brainstorming was last modified: Saturday, December 27th, 2008

Views