Tutorial
From Grantsfire
Contents |
Introduction
NOTE: hGrant is currently a draft specification, which means it may change. That said, it's so simple, we encourage people to play with it now and participate in improving it.
Are you a grant-making organization? Do you already publish information about the grants you make on your web site, or are you planning on doing so in the near future? If your answers to these questions are yes, then you should know about hGrant.
hGrant is a way of publishing grants information on a web page so that it may be read and understood by both people and software. This allows grants information to be automatically collected and aggregated into a searchable database.
hGrant is a series of semantic HTML patterns influenced by the microformats concept. That's a high-falutin' way of saying that you can express and publish metadata using basic web technologies -- HTML and CSS -- nothing else. You don't need to learn XML, RDF, RSS, or any of the many other technologies you may have read about.
If you're already publishing grants information on the web, you can use hGrant by making very minor changes to the page. This document explains how.
Examples
A typical grants page might look like:
Foo Foundation Grants
Revitalizing Anytown, USA
This is a seed grant to revitalize the downtown area of Anytown, USA.
Recipient: Revitalizers-Are-Us
1234 Fifth Street
Anytown, Anystate 00000Amount: $1,000,000
Grant Period: March 1, 2007 - February 29, 2008
The HTML to create this page might look like:
<h1>Foo Foundation Grants</h1> <h2 class="granttitle">Revitalizing Anytown, USA</h2> <p class="grantdescription">This is a seed grant to revitalize the downtown area of Anytown, USA.</p> <p><b>Recipient:</b> <a href="http://revitalizers-are-us.org/">Revitalizers-Are-Us</a></p> <p class="address">1234 Fifth Street<br /> Anytown, Anystate 00000</p> <p><b>Amount:</b> $1,000,000<br /> <b>Grant Period:</b> March 1, 2007 - February 29, 2008</p>
Note the class statements in some of the tags. These are standard CSS stylesheet statements used on many web sites to control the appearance of the information -- font, color, size, etc.
Suppose you wanted to convert this into an hGrant. All you would have to do is modify these class statements to conform to the hGrant specification:
<div class="hgrant"> <div class="grantor vcard"> <h1 class="fn org" id="foo">Foo Foundation Grants</h1> </div> <h2 class="title">Revitalizing Anytown, USA</h2> <p class="description">This is a seed grant to revitalize the downtown area of Anytown, USA.</p> <div class="grantee vcard"> <b>Recipient:</b> <span class="fn org"><a class="url" href="http://revitalizers-are-us.org/">Revitalizers-Are-Us</a></span> <p class="adr"> <span class="street-address">1234 Fifth Street</span><br /> <span class="locality">Anytown</span>, <span class="region">Anystate</span> <span class="postal-code">00000</span> </p> </div> <p class="amount"> <b>Amount:</b> <abbr class="currency" title="USD">$</abbr><abbr class="amount" title="1000000">1,000,000</abbr><br /> <b>Grant Period:</b> <span class="period"> <abbr class="dtstart" title="20070301T2300-0700">March 1, 2007</abbr> - <abbr class="dtend" title="20080229T2300-0700">February 29, 2008</abbr> </span> </p> </div>
which would appear as:
Foo Foundation Grants
Revitalizing Anytown, USA
This is a seed grant to revitalize the downtown area of Anytown, USA.
Recipient: Revitalizers-Are-Us
1234 Fifth Street
Anytown, Anystate 00000Amount: $1,000,000
Grant Period: March 1, 2007 - February 29, 2008
If this looks exactly the same as it did before, that's exactly the point! hGrant doesn't require you to change how the information looks. However, by using hGrant, you make the information parseable, which means that software can also read and understand the information.
hGrant is just HTML. Admittedly, it's slightly more complicated than HTML than what was there previously, but it's nothing a good Web designer can't wrap his or her head around. The benefit of using hGrant is that your content may now be collected and searched by an aggregator. You retain full flexibility over the look-and-feel of your web pages, and you can use your traditional Web publishing tools to generate content.
The HTML tags you use don't matter (for the most part; see the section below for more on this). The difference is that you have to use the CSS class names defined in the spec. If you are already using CSS to modify the look-and-feel of your web site, you will have to change your CSS class names to conform to hGrant.
RSS
The Spec
hgrant
title
URL
description
amount (currency)
period
dtstart ([ datetime])
dtend ([ datetime])
grantee (hCard)
grantor (hCard)
rel-tag
tagging
Conclusion
What are you waiting for? Start using hGrant, and share your experiences today!
