blog-post-formats

(Difference between revisions)

Jump to: navigation, search
(WordPress)
(WordPress)
Line 27: Line 27:
* http://wordpress.org
* http://wordpress.org
-
WordPress is a popular GPLed blogging system based on PHP and MySQL. WordPress calls their templates "themes" -- [http://wordpress.org/extend/themes/ more information].
+
WordPress is a popular GPLed blogging system based on PHP and MySQL. WordPress calls their templates "themes" -- [http://wordpress.org/extend/themes/ more information]. Wordpress does not have a standardized set of CSS elements for identifying parts of the weblog content. I've included a number of examples of what is seen in the wild (move to [[http://microformats.org/wiki/blog-post-examples examples]]?)
 +
 
 +
Example 1: [http://nokrev.com/older/ Fresh Bananas]
 +
 
 +
<pre><nowiki>
 +
<body id="blog">
 +
<div id="wrap">
 +
  <div id="content" class="two_column">
 +
  <div class="left">
 +
    ENTRIES
 +
  </div>
 +
  </div>
 +
</div>
 +
</body>
 +
 
 +
<h2>POST TITLE</h2>
 +
POST CONTENT (PARTIAL)
 +
<p>
 +
<a href="POST URRI" title="Contiue reading this post">Continue reading</a>
 +
</p>
 +
</nowiki></pre>
 +
 
 +
Example 2: [http://www.vanillamist.com/blog/ VanillaMist]
 +
 
 +
<pre><nowiki>
 +
<body>
 +
<div id="main">
 +
  <div id="content">
 +
  ENTRIES
 +
  </div>
 +
</div>
 +
</body>
 +
 
 +
<div class="post">
 +
<p class="post-date">Wed 6 Jul 2005
 +
</p>
 +
<div class="post-info">
 +
  <h2 class="post-title">
 +
  <a href="http://vanillamist.com/blog/?p=89" rel="bookmark" title="Permanent Link: Podcasts and a new version of Connections soon">Podcasts and a new version of Connections soon</a>
 +
  </h2>
 +
  Posted by AUTHOR under <a href="POST URI" title="View all posts in Blogs and Blogging" rel="category tag">CATEGORY</a>
 +
 
 +
  <div class="post-content">
 +
  POST CONTENT
 +
  </div>
 +
 
 +
  <div class="post-footer">&nbsp;</div>
 +
</div>
 +
</div>
 +
</nowiki></pre>
 +
 
 +
Example 3: [http://www.aamukaste.org/wpthemes/ Boredom]
 +
 
 +
<pre><nowiki>
 +
<body>
 +
<div id="content">
 +
</div>
 +
</body>
 +
 
 +
<div class="post">
 +
<h2 id="post-5">
 +
  <a href="POST URI" rel="bookmark" title="Permanent Link to POST TITLE">POST TITLE</a>
 +
</h2>
 +
<small>POST DATE</small>
 +
<div class="entry">
 +
  POST CONTENT
 +
</div>
 +
<p class="postmetadata">
 +
</p>
 +
</div>
 +
</nowiki></pre>
 +
 
 +
==== Key Metadata Elements ====
 +
There is very little reuse amongst the various templates selected.
==== Template Concepts ====
==== Template Concepts ====
 +
* Post
 +
* Title
 +
* Author
 +
* Date
 +
* Content (partial)
 +
* Content (full)
 +
A list of all the template elemenents is [http://codex.wordpress.org/Template_Tags available here].
A list of all the template elemenents is [http://codex.wordpress.org/Template_Tags available here].

Revision as of 15:05, 16 August 2005

Contents

Current Blog Formats

There is a need for developing standard classes for blog posts (i.e. a microformat!).

This page serves to document the current list of individual blog post schemas, formats, and efforts as background for the design of a simple blog post MicroFormat.

Discussion Participants

Editor

Authors

Interested Folks

Tools

Drupal

WordPress

WordPress is a popular GPLed blogging system based on PHP and MySQL. WordPress calls their templates "themes" -- more information. Wordpress does not have a standardized set of CSS elements for identifying parts of the weblog content. I've included a number of examples of what is seen in the wild (move to [examples]?)

Example 1: Fresh Bananas

<body id="blog">
 <div id="wrap">
  <div id="content" class="two_column">
   <div class="left">
    ENTRIES
   </div>
  </div>
 </div>
</body>

<h2>POST TITLE</h2>
POST CONTENT (PARTIAL)
<p>
 <a href="POST URRI" title="Contiue reading this post">Continue reading</a>
</p>

Example 2: VanillaMist

<body>
 <div id="main">
  <div id="content">
   ENTRIES
  </div>
 </div>
</body>

<div class="post">
 <p class="post-date">Wed 6 Jul 2005
 </p>
 <div class="post-info">
  <h2 class="post-title">
   <a href="http://vanillamist.com/blog/?p=89" rel="bookmark" title="Permanent Link: Podcasts and a new version of Connections soon">Podcasts and a new version of Connections soon</a>
  </h2>
  Posted by AUTHOR under <a href="POST URI" title="View all posts in Blogs and Blogging" rel="category tag">CATEGORY</a>

  <div class="post-content">
   POST CONTENT
  </div>

  <div class="post-footer"> </div>
 </div>
</div>

Example 3: Boredom

<body>
 <div id="content">
 </div>
</body>

<div class="post">
 <h2 id="post-5">
  <a href="POST URI" rel="bookmark" title="Permanent Link to POST TITLE">POST TITLE</a>
 </h2>
 <small>POST DATE</small>
 <div class="entry">
  POST CONTENT
 </div>
 <p class="postmetadata">
 </p>
</div>

Key Metadata Elements

There is very little reuse amongst the various templates selected.

Template Concepts

A list of all the template elemenents is available here.

Blogger

Blogger is one the earliest, best known and probably most widely used blogging platform. Blogger was bought by Google in February of 2003. Blogger allows users to create and edit their own templates and also provides a large number of (more or less) attractive templates from which the user can select. Unfortunately, you must log into a blogger account to see the template selection.

Here are several Blogger templates, randomly selected from the presets. More recent templates seem to be converging on a vocabulary for identifying parts of posts. This may because they share an evolutionary history from a common template. I've included three examples here:

<body>
 <div id="content">
  <div id="main">
   ENTRIES
  </div>
 </div>
</body>

<h2 class="date-header">POST DATE</h2>
<div class="post">
 <a name="POST #"></a>
 <h3 class="post-title">
  <a href="POST URI" title="external link">POST TITLE</a>
 </h3>
 <p>POST CONTENT</p>
 <p class="post-footer">
  <em>posted by AUTHOR @ <a href="POST URI" title="permanent link">POST DATETIME</a></em>
 </p>
</div>
<body>
 <div id="main">
  <div id="main2">
   ENTRIES
  </div>
 </div>
</body>

<div class="post">
 <a name="POST #"></a>
 <h3 class="post-title">
  <a href="sample_post.html" title="permanent link">POST TITLE</a>
 </h3>
 <div class="post-body">
   POST CONTENT
 </div>
 <p class="post-footer">
   <em>posted by AUTHOR @ <a href="POST URI" title="permanent link">POST TIME</a></em>
 </p>
</div>
<body>
 <div id="leftcontent">
 ENTRIES
 </div>
</body>
  
<div class="Post">
 <a name="POST #"></a>
 POST CONTENT
 <span class="PostFooter">
  <a href="POST URI">POST TIME</a> 
 </span>
</div>

Key Elements

Template Concepts

MovableType

MovableType is a perl-based blogging platform. Note that the MT is old and widely deployed and there are very many different variants on the templates in the wild.

The standard template for the weblog's main page (the "main index") has the following structure:

<body>
 <div class="content">
 <h2>DATE HEADER</h2>
 <h3 id="a####">POST TITLE</h3>
 POST CONTENT
 [ OPTIONAL LINK TO MORE POST CONTENT ]
 <p class="posted">Posted by AUTHOR at <a href="POST URI">POST DATE</a>
 </div>
</div>

The [individual entry archive] template looks like this:

<div class="content">
 <p align="right">
  <h2>POST DATE</h2>
 </p>
 <h3>POST TITLE</h3>
 POST CONTENT
 <div id="more">
  MORE POST CONTENT (optional)
 </div>
 <p class="posted">Posted by AUTHOR at DATE</p>
</div>

Key Elements

Template Concepts

TypePad

Typepad is a MovableType hosting service. It provides a list of default templates and [ "template modules"] from which users can construct or modify their own templates. Looking at several Typepad blogs, most or all of them following the nomenclature and struct defined by these templates.

The individual entry looks something like this:

<h2 class="date-header">the date of the posting (optional)</h2>

<div class="entry" id="entry-#####">
  <h3 class="entry-header">POST TITLE</h3>
 <div class="entry-content">
  <div class="entry-body">
    POST CONTENT
  </div>
   <a id="more"></a>
   <div class="entry-more">
     MORE POST CONTENT
   </div>
 </div>
 <p class="entry-footer">
   POST FOOTER
 </p>
</div>

All the entries (on the main page) are inclosed in this structure:

<body class="layout-two-column-right">
 <div id="container">
  <div id="container-inner" class="pkg">
   <div id="pagebody">
    <div id="pagebody-inner" class="pkg">
     <div id="alpha">
      <div id="alpha-inner" class="pkg">
        INDIVIDUAL ENTRY
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</body>

I cannot seem to track down in the templates where the POST FOOTER is defined. However, we can see the results from a sample blog:

<span class="post-footers">Posted by AUTHOR_NAME in CATEGORY</span> 
<span class="separator">|</span> 
<a class="permalink" href="ENTRY_URI">Permalink</a>
| <a href="COMMENT_URI">Comments (2)</a>
| <a href="TRACKBACKS_URI">TrackBack (0)</a>

Key Elements

Template Concepts

Examples from the wild

blog-post-formats was last modified: Wednesday, December 31st, 1969

Views