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="https://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="https://www.zyb.com/" class="org">Zyb</a>, founder of <a href="https://www.dotnetblogengine.net/">BlogEngine.NET</a> and long time <span class="nickname">.NET slave</span>. <a href="https://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='https://mystatus.skype.com/smallicon/dotnetslave" alt="Skype Me" width="16" height="16" /> </a><a href="https://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="https://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='https://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='https://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='https://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='https://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='https://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å: https://technorati.com/contacts/ og indtast https://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å https://microformats.org og https://kitchen.technorati.com/

Det var alt for nu.