Open Badges: Want to Make Your Own Badges by Hand? Here’s How.

After doing quite a bit of research into Mozilla’s Open Badge Project, I took it upon myself to try to make a badge by hand.  What about using the Issuer API?  Wouldn’t that be simpler?  Well, not really.

I’ll be the first to admit that my programming skills are, um…being developed.  And by developed, I mean that I plan to learn some JavaScript, Python, and the new capabilities of HTML5 and CSS3 in the next few months.  That said, I took a quite “non-technical” approach to making my first badge.  If you’re interested in making badges for a course/class you’re teaching or for a workshop/tutorial you’re offering, this post will give you the low-down on making a badge by hand.

Here’s a list of what’s included in this post:

1. Why Badges?
2. Badge Design
3. Anatomy of a Badge
4. Assertions – Proof of Earnership
5. Make a Badge Now!

Why Badges?

The idea of using badges for achievement is nothing new.  Boy Scouts have been using badges for over 100 years to reward members who developed skills and achieved goals that were deemed important to their craft.  Why not take that same idea and provide granular, detailed credentials of learning?  Many educators are excited about the movement of badges in learning, and Mozilla is developing the framework to support globally-recognized badges that can be issued by any group.  Effective use of badges in education is still being discussed, though motivated university instructors David Wiley and Alex Halavais are already reporting back about their experiences doing so.  For direct information about Mozilla’s Project, visit OpenBadges.org.

Here’s a 5-minute video put together by HASTAC that describes motivation behind badges for learning:

Badge Design

Though I didn’t think on it much until watching a recorded webcast from the DML Badge Competition, the visual design of badges is an essential part of a badging system.  If you decide to issue badges, they had better well be visually tied to your organization.  Branding is important these days, whether you are a profit-seeking entity or a public university.  Consider the color schemes, fonts, and currently adopted logos of your group as they will be important in helping people recognize your badges.  If you’re looking for some neat (and free) icons to use on your badges, check out my blog post about the Noun Project.

Anatomy of a Badge

When it comes down to “what” a badge really is…it’s just a picture.  Actually, it’s a .PNG image file.  For those of you unfamiliar, many of the pictures and images you see when browsing the net are in .PNG format.  If you’ve ever heard of .JPGs or .GIFs, it’s very similar.  When issued to a learner and then displayed on a professional website/resume, the badge’s .PNG file will appear like this:

Just a .PNG file?  Not quite.

When a Mozilla-spec badge is created, data in .JSON format is “baked” in, linking the badge back to the issuer and displaying other information about the badge.  This connection of the badge to the assertion, which lives behind the walls of the group that issued it.  This prevents duplication and the spread of “spadges” (Halavais’ term) because badges must link back to the group that issued it.  A fake badge won’t be validated when it’s clicked to show evidence of how it was earned.  Wrapping my head around this took a while, but it’s an effective way to deter false badge creation.

Assertions – Proof of Earnership

When badges link back to the proper assertion, data is displayed about the issuer, the earner, and the circumstance about how it was earned.  When clicked, the badge can provide all this information in an attractive way.  Below is a picture of a test badge I issued to myself, seen from inside the badge backpack.

Note: I did not actually earn this badge.  It was a test badge I created to better understand how to hand-build a Mozilla-spec (OBI compatible) badge.  Because it’s OBI compatible, I can hold it in my backpack.  However, the “evidence” link simply goes back to my masters program home page, not the page proving that I earned the badge.  It would be silly to post this to my professional profiles, as it’s only a novelty badge, not one with proof I did anything.

Make a Badge Now!

If you are interested in trying to make a badge by hand, these directions may help out.  As a non-programmer, I’m glad I built this badge by hand because now I have a much better understanding of how badges are built to be OBI-spec.  I used a combination of David Wiley’s post and the documentation in the Mozilla Open Badge Wiki.  I also consulted with Stephan Fabel, the SysAdminSuperProgrammer who makes things run nicely in our College of Education’s IT department.

Note (June 13th 2012): This how-to is designed to show issuers how they can create badges by hand, but is not a comprehensive guide to managing a system of badges.  Such a guide is in development, but for now there is more conversation about badges in the OpenBadges Google Group.

Step-by-Step

1.  Get a .PNG image file to use for your badge.  I mocked up a badge in Prezi, took a screenshot of it, and saved it to my computer with the .png file extension.

2.  Create a new text file in Notepad, TextEdit or any other text editor.  Copy the entire text in blue, as seen below:

{ "recipient": "earner.name@gmail.com", "evidence": "http://google.com", "issued_on": "2012-05-21", "badge": { "version": "1.0.0", "name": "Explorer", "image": "http://urlofyourbadge.com/testbadgeimage.png", "description": "Has displayed expertise in hand-made badge creation.", "criteria": "http://etec.hawaii.edu", "issuer": { "origin": "http://openeducation.us/", "name": "Course Lecturer", "org": "Not a Real Badge, 2012", "contact": "issuer_email@hawaii.edu" } } }

Paste this into the text file, then change the values on the right.  For example, the recipient can either be a hashed number (as seen above) or an email address representing the earner’s email address.  See the Mozilla Assertion page for info about how to fill out the fields.  In the “Image” field, make sure you paste the public link (URL) to your badge .PNG in correctly.  I saved my .PNG file in the “Public” folder inside my Dropbox, which allows me to get a public link for the file as if it was on a typical web server.

3. Save this text file with the extension “.json”.  When you save the text file, you can indicate this, as seen below.  You may have to manually type in “.json” after your file name to avoid saving under the default “.txt” format.

4.  Validate your .JSON data.  To ensure you provided valid data in the assertion, copy and paste the contents of your .JSON into this free service.  If you get errors, they will be easily fixed.  Visit http://validator.openbadges.org and enter your .JSON file here.  Click “check your assertion” and see how you did.

Fix issues, update your .JSON file (in a text editor) and then save the file in a publicly-accessible location, like on a web server or self-hosted website.  Time to bake.

5.  Send your badge to the Mozilla “baker” service.  Take the public link (URL) of your .JSON file, and insert it in place of the sample link seen below.  Make sure your .PNG image file is still on a public server.

http://backpack.openbadges.org/baker?assertion=http://yourhosting.com/u/folder/BillyBlogTestBadge2.json

When you type this into your web browser press enter, you are asking the Mozilla baking service to interpret your .JSON file and attach that data to the .PNG image you indicated in the .JSON file.  This “baking” binds the assertion data (.JSON) and the image.  If all goes well, a new .PNG file will be automatically downloaded.  That’s the badge, baked and ready to go.

6.  Upload the badge into your own Mozilla Backpack.  Badges (.PNGs) that you get from the badge baking service are OBI-compliant so they will slide right in, just click “choose file” to browse to your badge file and upload it.  Here’s a picture of that badge I created in this test, on the right, sitting next to other badges I’ve earned.

Next Steps

I’m sure some people are still wondering why I haven’t described how to use the Issuer API, and instead chose to build badge by hand.  The reason is simple: There are plenty of educational technology enthusiasts out there who, despite having very limited programming knowledge, would like to build a small set of badges to pilot in a course.  If I could figure out how to make a badge by hand, I could tell someone else how to do it, too 🙂

Next I’ll be exploring the use of the Issuer API and looking at how to automate the process of baking badges through forms on a web page.  If you are interested in the Open Badge project, please check out OpenBadges.org for more helpful information.  Ask your colleagues about badges and get conversation flowing.  There is a Google Group for badges, a P2PU course to round out your knowledge of badges, and some really friendly people over at Mozilla to answer questions.