Microformats, et eksempel.


Jeg havde jo fonøjelsen af at interviewe Mads og Ole for nogle uger siden og snakken gik en del på det hersens microformats som man med meget lidt viden omkring udvikling kan implementere i sine løsninger. Det kræver faktisk ikke rigtig noget, blot et par attributer i sine tags.

Jeg har taget udgangspunkt i Mads' egen blog, og fundet noget af den kode som indikere at Mads selv gør brug af microformats. Se selv her:

 

<table border="0" class="vcard">
<tbody>
  <tr>
   <td><img class="photo" src="http://blogs.msdn.com/themes/standard/madskristensen.png" alt="Mads Kristensen" title="Mads Kristensen" width="85" height="103" /></td>
   <td style='vertical-align: top'><span class='fn' style='font-weight: bold'>Mads Kristensen</span><br />
   <span class="role title">Senior Developer</span> at <a href="http://www.zyb.com/" class="org">Zyb</a>, founder of <a href="http://www.dotnetblogengine.net/">BlogEngine.NET</a> and long time <span class="nickname">.NET slave</span>. <a href="http://blogs.msdn.com/page/about-mads-kristensen.aspx" class="url">More...</a>
   <div style='display: none'>
   <span class="type">Home</span> <span class="locality">Copenhagen</span> <span class="country-name">Denmark</span>
   </div>
   <br />
   <span style='float: right; clear: both'>Contact me&nbsp; <a style='position: relative; top: -2px' href='/contact.aspx' title='By e-mail'><img src='/pics/mail.gif' alt='E-mail' width='14' height='9' /> </a><a href='callto://dotnetslave/' title='By Skype'><img src='http://mystatus.skype.com/smallicon/dotnetslave" alt="Skype Me" width="16" height="16" /> </a><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=fa1b4e7eaf9c0c82%40apps.messenger.live.com&amp;mkt=en-US" target="_blank" title="By Live Messenger"><img src="http://messenger.services.live.com/users/fa1b4e7eaf9c0c82%40apps.messenger.live.com/presenceimage?mkt=en-US" alt="Live Messenger" width="16" height="16" /> </a></span><span style='margin-top: 5px; float: right; width: 184px; clear: both'>Online life&nbsp; <a rel='me' href='http://www.linkedin.com/in/madskvistkristensen" title="LinkedIn"><img style='width: 16px; height: 16px' src='/themes/standard/linkedin.ico' alt='LinkedIn' width='16' height='16' /> </a><a rel='me' href='http://zyb.com/madskristensen" title="ZYB"><img style='width: 16px; height: 16px' src='/themes/standard/zyb.ico' alt='ZYB' width='16' height='16' /> </a><a rel='me' href='http://www.facebook.com/profile.php?id=550468008" title="Facebook"><img style='width: 16px; height: 16px' src='/themes/standard/facebook.ico' alt='Facebook' width='16' height='16' /> </a><a rel='me' href='http://www.last.fm/user/madskristensen/" title="Last.fm"><img style='width: 16px; height: 16px' src='/themes/standard/lastfm.ico' alt='Last.fm' width='16' height='16' /> </a><a rel='me' href='https://twitter.com/mkristensen" title="Twitter"><img style='width: 16px; height: 16px' src='/themes/standard/twitter.ico' alt='Twitter' width='16' height='16' /> </a><a rel='me' href='http://technorati.com/people/technorati/dotnetslave" title="Technorati"><img style='width: 16px; height: 16px' src='/themes/standard/technorati.ico' alt='View Mads Kristensen's profile on Technorati' width='16' height='16' /> </a></span></td>
  </tr>
</tbody>
</table>

Det er jo bare HTMl vil mange af jer sige, og ja i har fuldstændig ret. Det er bare HTML. Læg dog mærke til class attributen på diverse tags. F.eks har det begyndende table tag i toppen en class der hedder "vcard" og længere nede finder vi en der hedder "role title", "locality" osv. Det er altsammen attributer der i sidste ende udgør mads's kontakt oplysninger som kan læses af en computer. Det er da lidt smart at man bare ved at implementere et par ekstra klasser på sine tags kan få en computer til at aflevere en vCard. Prøv selv at se på: http://technorati.com/contacts/ og indtast http://blog.madskristensen.dk/ - nu skulle du meget gerne få vCard smidt i nakken. Jeg synes det er meget fikst set fra hvor meget det kræver.

Der findes mange andre fede microformats, og jeg synes du skal tage et kig på dem på http://microformats.org og http://kitchen.technorati.com/

Det var alt for nu.

Comments (2)
  1. Kimblim says:

    Angående microformats (som jeg jo ikke er vildt begejstret for i den nuværende form), så har BBC netop fjernet det fra en del af deres sider pga. usability-issues: http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml

  2. kimblim says:

    Jeg bliver ved med at vende tilbage til det her 😉

    I HTML5 kommer der noget, der hedder custom attributes, hvilket lader til at være det perfekte sted at smide microformats ind.

    http://www.w3.org/html/wg/html5/#custom

    Et eksempel (i vcf-formatet) kunne være sådan her: (gad vide hvordan jeg smider kode ind i kommentaren.. hm, jeg prøver)

    &lt;div data-microformat="vcard"&gt;

     &lt;ul&gt;

       &lt;li data-microformat="fn"&gt;Daniel&lt;/li&gt;

       &lt;li data-microformat="ln"&gt;Frost&lt;/li&gt;

       &lt;li data-microformat="nickname"&gt;Frosten&lt;/li&gt;

       &lt;li data-microformat="role title"&gt;Developer Evangelist&lt;/li&gt;

     &lt;/ul&gt;

    &lt;/div&gt;

    Hvis koden f**ker op, så må du lige rette til…

    Læs evt. også mere hos Javascript-hajen John Resig: http://ejohn.org/blog/html-5-data-attributes/

Comments are closed.

Skip to main content