July 31, 2013

A HTML Microformat for Open Badges

Sometimes a person wanders by the #badges IRC channel and asks us how to issue a badge.

The response usually involves asking the user what kind of technical expertise they have; if they’re a programmer, we point them at the specification. If they’re not, well, we usually point them to a place like badg.us or credly.

One of the problems with pointing people at the specification is that it’s highly technical. JSON, the format the badge takes, is unfamiliar to non-programmers and doesn’t support code comments to make things a bit easier to grasp. Once a badge is hosted as JSON, the URL to the JSON file needs to either be opaquely “baked” into a PNG file, or it needs to be given to the Open Badges Issuer API behind the scenes, which requires additional programming. Furthermore, the JSON file needs to at least specify a criteria URL, which necessitates the creation of a human-readable HTML page.

That’s a lot of parts.

But what if a badge were just a Web page, formatted in a consistent way that made it easy for machines to read? What if issuing a badge was as easy as filling out a form, copying out a resulting HTML snippet and pasting it into your blog or website?

Microformats can help us do this, because they were designed precisely for this kind of purpose.

Now let’s look at the other solution: hosting one’s badges through third-party services like badg.us or credly. While incredibly easy, one of the problems is that the badge metadata is hosted on—and therefore issued by—a domain that the badge’s creator doesn’t actually own. This will be particularly confusing for recipients and verifiers who discover that their badge was issued by a domain they may never have heard of.

When badges can be represented as HTML, however, we make it really easy for people to host badges on domains they already own. If someone’s presence on the internet is already represented by their blog or website, shouldn’t we make it as easy as possible for them to issue badges from there, rather than an unrelated domain?

I made a proof-of-concept Web service that allows you to play around with this idea at badge-bridge.herokuapp.com. Just fill out the form and paste the resulting HTML snippet in your blog or website, and you’re good to go. The snippet even includes a “push to backpack” button that allows the recipient to push the badge to their backpack.

One of the limitations with my service is that it’s really just a “bridge”, or hack, that translates between the Badge microformat I’m proposing and the JSON specification that Open Badge tools currently support. As a result, the issuer of the badge will appear to be badge-bridge.herokuapp.com rather than your actual blog or website. If we add an HTML microformat to the Open Badges specification, however, we won’t need a bridge, so this problem will go away.

For more information on the technical details of the microformat, including potential security concerns, see the README for the Github project.

© Atul Varma 2021