(Keeping in mind I don't know the details of how Mozilla set up its program - this is only how I would do it, off he top of my head): The badge itself would be a simple PNG image (or even text script; there's no reason why the badge has to have one and only one visual representation). The image of the badge is contained within a div structure indicating that it is a badge. The code is deliberately very simple: For example:
<img src="http://badgewinner.com/badge.png" /> </a> </div>
The awarder of the badge (or a third party) keeps a list of the people who received badges. The person is given an image and script referring back to the original list, so when a person clicks on the badge image, they are taken to the awarder or 3rd party certification that the badge is genuine. Here's a sample certificate (could also be in JSON):
<badgewinner resource="http://badgewinner.com/" /> </badge>
The certificate, in turn, links to badge criteria, again hosted on the awarder or 3rd party web site. This data, available as structured data (XML or JSON) is standardized: name of badge, issuing organization, criteria, category, etc.
<name>Man of Letters</badge>
<issuer resource="http://www.scoutscanada.ca">Scouts Canada</issuer>
<classification resource="http://schema.org/class/subclass">Class / Subclass</classification>
The criteria are created though any number of processes, and would be encoded using a JSON or XML encoder (the number of badges should be sufficiently low that you don't need an automated way of generating massive numbers of badges).
The badge code (hosted at http://badgeissuer.org/badgename/ ) lists criteria only - the criteria are listed distinct from any evidence of individual achievement. Each criterion has its own URL, eg:
or http://badgeissuer.org/badgename/criteria1 (if it's at a separate URL).
Criteria do not change through time; if the criteria change, a new version of the badge is created, and badges must be referenced through version number. Hence the record for a badge awarded to a person displays only the criteria in use at the time the badge was awarded.
Evidence publicly displayed (unlike, say, this forum) can be listed in the certificate, by URL. For example, at the document hosted at http://badgeissuer.org/badgename/badgewinner, the following code can be used:
<badgewinner resource="http://badgewinner.com/" />
<evidence ref="http://badgewinner.com/badge/criteria1" /> </criteria>
At least, that's how I'd set it up, first draft...
Do I get a badge now?