Difference between revisions of "posh-patterns"

From Microformats Wiki
Jump to navigation Jump to search
(drafted)
 
(added Jeremy Keith's blogpost on posh patterns and navigation pattern from today's IRC discussion)
Line 2: Line 2:
  
 
To help discover and make it easier to write proper plain old semantic html ([[posh]]), this page documents known patterns of POSH markup used in the wild (no theoretical patterns please, markup from actual URLs on the public web), especially when there is some amount of analysis regarding the patterns.
 
To help discover and make it easier to write proper plain old semantic html ([[posh]]), this page documents known patterns of POSH markup used in the wild (no theoretical patterns please, markup from actual URLs on the public web), especially when there is some amount of analysis regarding the patterns.
 +
 +
For a longer description of POSH patterns, see [http://adactio.com/journal/1287/ Jeremy Keith's blog post: POSH Patterns].
  
 
This page is a stub and could use your help in expanding it.  Please read [[posh#Resources|POSH resources]], and add good examples you find there.
 
This page is a stub and could use your help in expanding it.  Please read [[posh#Resources|POSH resources]], and add good examples you find there.
 +
 +
== patterns ==
 +
 +
=== navigation ===
 +
Examples have been provided in [[IRC]] (e.g. "Latest New Content" in http://www.communitymx.com/content/article.cfm?page=2&cid=97480 ) that show a pattern of
 +
* icon/thumbnail/graphic
 +
* hyperlink to a site section
 +
* brief description
 +
 +
From the markup of that page (empty elements removed, whitespace added)
 +
 +
<source lang="html4strict">
 +
<ul>
 +
<li>
 +
  <img src="/images/photoshopicon.gif" alt="" />
 +
  <a href="/abstract.cfm?cid=34D68">Retro Fitting a Color Match</a>
 +
</li>
 +
...
 +
</ul>
 +
</source>
 +
 +
This could be improved both for usability by wrapping the hyperlink around the image (so that clicking the image, something that users often do, does something), and adding the [[existing rel value]] from HTML4 rel="section" to the hyperlink:
 +
 +
<source lang="html4strict">
 +
<ul>
 +
<li>
 +
  <a rel="section" href="/abstract.cfm?cid=34D68">
 +
  <img src="/images/photoshopicon.gif" alt="" />
 +
  Retro Fitting a Color Match
 +
  </a>
 +
</li>
 +
  ...
 +
</ul>
 +
</source>
 +
  
 
== related ==
 
== related ==
 
* [[posh]]
 
* [[posh]]
 
* [[poshformats]]
 
* [[poshformats]]

Revision as of 15:23, 28 April 2009

POSH patterns

To help discover and make it easier to write proper plain old semantic html (posh), this page documents known patterns of POSH markup used in the wild (no theoretical patterns please, markup from actual URLs on the public web), especially when there is some amount of analysis regarding the patterns.

For a longer description of POSH patterns, see Jeremy Keith's blog post: POSH Patterns.

This page is a stub and could use your help in expanding it. Please read POSH resources, and add good examples you find there.

patterns

navigation

Examples have been provided in #microformats on freenode (e.g. "Latest New Content" in http://www.communitymx.com/content/article.cfm?page=2&cid=97480 ) that show a pattern of

  • icon/thumbnail/graphic
  • hyperlink to a site section
  • brief description

From the markup of that page (empty elements removed, whitespace added)

<ul>
 <li>
  <img src="/images/photoshopicon.gif" alt="" />
  <a href="/abstract.cfm?cid=34D68">Retro Fitting a Color Match</a>
 </li>
 ...
</ul>

This could be improved both for usability by wrapping the hyperlink around the image (so that clicking the image, something that users often do, does something), and adding the existing rel values from HTML4 rel="section" to the hyperlink:

<ul>
 <li>
  <a rel="section" href="/abstract.cfm?cid=34D68">
   <img src="/images/photoshopicon.gif" alt="" />
   Retro Fitting a Color Match
  </a>
 </li>
  ...
</ul>


related