skip to content

Atom Feed

The Web, Naturally!

All Pages Tagged Microformats

  1. Extending hCard using RDFa
    Posted by
    Martin
    about 50 days ago.

    Mark Birbeck the Designer of RDFa has recently posted a couple of really good articles recently one about the first steps in adding Foaf to RDFa and a second one about using RDFa and Microformats. Both these articles has inspired me to write a little introduction about how to use the hcard microformat and extend it using RDFa.

    I am going to mark up this example of a hCard as RDFa:

    <div class="vcard" id="weborganics">
<p><span class="fn">Martin McEvoy</span></p>
<p><img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"></p>
<p>Contact: <a title="Email" class="email" href="mailto:info@weborganics.co.uk">Email</a>
Web: <a rel="me" class="url" href="http://weborganics.co.uk/index.xhtml">WebOrganics</a></p>
<div class="geo">
	<abbr title="53.7552" class="latitude">N 53.7552</abbr>,
	<abbr title="-2.3675" class="longitude">W -2.3675</abbr>
</div>
</div>

    I have included the geo part of hcard because its useful for people, clients, or customers to know where you are yes?

    First add the RDFa document type to your page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

    So far so good your page is now RDFa and you are ready to add some namespaces, a namespace is just a place where a set of names and definitions is stored.

    I am going to use two namespaces in this example:

    • 1. Foaf, xmlns:foaf="http://xmlns.com/foaf/0.1/"
      Foaf Is primaraly used to define People, FOAF documents are machine-readable home pages.

    • 2. Geo, xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
      Geo Is the RDF equivalent of the World Geodetic System or WGS84 and is used to represent Latitude/Longitude information about the location of things.

    There are two ways to add a namespace in RDFa one is In the <html> tag of your page or another way is in the page using say a <div> or a <span> I am going to add the namespace to the hcard markup itself:

    <div class="vcard" id="weborganics"
		xmlns:foaf="http://xmlns.com/foaf/0.1/" 
		typeof="foaf:Person" 
		about="#weborganics">

    @typeof is similar to a html <div> it describes a block of some thing, in this case Its a block of foaf:Person. @about means exactly as it says what this thing is about in this case Its about the foaf:Person weborganics.

    Lets add a Name to this person:

    <p><span property="foaf:name" class="fn">Martin McEvoy</span></p>

    Easy eh?, Properties are use to add information about the subject, in this case a person, the contents are usually just text.

    Next you may want to add your picture:

    <p rel="foaf:img">
<img alt="weborganics" src="http://weborganics.co.uk/images/me.jpg" class="photo"/>
</p>

    @rel is used in the same way as a html rel to describe the relationships between things. The above example has a relationship of a foaf:img of the foaf:Person. In RDFa you can use @rel anywhere in your page not just in links, you may also want to add your email address and homepage url in the same way:

    <p>Contact: <a rel="foaf:mbox" title="Email" class="email" href="mailto:info@weborganics.co.uk">Email</a>
Web: <a rel="foaf:weblog me" class="url" href="http://weborganics.co.uk/index.xhtml">WebOrganics</a></p>

    You can leave it there if you wanted which is great! but I am going to take this a little further and demonstrate how you can mark up the Geo bit of a hcard. All in one go this time using the same techniques as demonstrated above:

    <div class="geo" id="weblog" rel="foaf:based_near"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
    	<span typeof="geo:Point" about="#weblog">
		<abbr property="geo:lat" content="53.7552" title="53.7552" class="latitude">N 53.7552</abbr>, 
		<abbr property="geo:long" content="-2.3675" title="-2.3675" class="longitude">W -2.3675</abbr>
    	</span>
</div>

    There Is one thing extra I have added I have used @content this works in the same way as the @title attribute in the abbr design pattern, Its used to carry machine readable data without it interfering with the human content, If you think about that from an accessible point of view its actually better than the current abbr design pattern.

    So there you have it a hCard marked up as RDFa in a few easy steps. I have created two examples to accompany this mini how-to. which you can simply just copy and paste with your own details.

    Microformats and RDFa work pretty well together I think, It adds Scope when previously there wasn't any, Microformats also make excellent building blocks for RDFa they give you hints on where everything should go. Thanks.

  2. hAudio 0.9
    Posted by
    Martin
    about 88 days ago.

    hAudio has reached a stately version 9.0 which I imagine will be the final proposal from the contributors of the hAudio Microformat.

    Only one class name was changed, "fn" for "title" which doesn't seem so great but has been a hotly debated part of hAudio since May 2007 when the issue about "title is already taken to mean something else" and "use fn instead" first came up. The Class Name "title" may yet change again because the fn/title issue is still being debated and I imagine will continue for some time yet.

    In the meantime the Grabb.it guys became the first major implementer of hAudio 0.9 marking up thousands of tracks on their userpages, I would say that they are quite happy with the changes made to the microformat.

    hAudio RSS also uses the new hAudio microformat in the V3 version of the hypertext playlist format. New for Version 3, is a new home page on The ESW Wiki, hAudioRSS where you can download the entire source code and demo of the hAudio-RSS playlist.

    If you are planning on marking up your pages in hAudio or hAudio-RSS let me know I will be more than happy to give you a shout for doing a good thing.

  3. hAudio Microformat
    Posted by
    Martin
    about 324 days ago.

    haudio

    Well! what can I say, I'm honored to announce the birth of a new microformat that has managed to reach the status of Proposal, hAudio.

    I say honored because for some bizarre reason I managed to become a contributor whilst I was a the quest to make our very own Podcast more Organic and easier to share. I can honestly say that hAudio was one of the most hotly debated and well designed microformats since hAtom, and as a result the Format instead of taking the suggested eight weeks to complete, ended up finally taking twenty one contributors nearly twice as long.

    The full proposal and full Schema can be found at http://microformats.org/wiki/audio-info-proposal

    The demo page used for testing, and created during the hAudio discussion can be found at http://weborganics.co.uk/haudio

    I would like to give a special "nod" to one or two of the guys who headed up the discussion and design of haudio, Manu Sporny who was the leader of the whole audio info discussion, without his guidance and Logic I doubt hAudio would ever been finished. Brian Suda and Tantek Çelik who kept us from straying too far beyond the "cow paths" Scott Reynen, David Janes, and Andy Mabbett all hot debaters and seasoned microformateers, who guided those of us who were not to sure where the cow path was. For my part well, my Ideas may have been a bit off the mark a little, Indeed most would say I found it hard keeping to the job at hand. In the end I think everyone that was involved helped create the most well designed microformat there is to date.

  4. Talk about hAudio RSS
    Posted by
    Martin
    about 113 days ago.

    hAudio-RSS is causing a little flutter in the open media web community so much so that back in December it became part of a small discussion over at songbird nest called Portable Playlists and other POSH-ibilities presented (amongst others) by Tantek which was kindly recorded to video by Citizen Tara Hunt, so without any further rambling may I present Tantek's Demo.