Update on Badging with Webmentions

As #EDU522 Digital Teaching and Learning Too wraps up I find myself reflecting on my goals for the class…I mean “my goals” in the class not the hopes on the instructional design. Much more on that later.

All summer, well before EDU 522 began, I set off to create a remixable template others could use in course design. The goal was simple HTML and instructional design. I knew this would be the subjective I chose in the class for my learning project.

As part of edu522 I explored adding a badging system to the class. While I do not have a deployable badging webmention badging platform yet I was able to get to a proof of concept.

Webmention Badge Flow

First I developed a learning activity on a static site that could receive webmentions.

Learners would then have to send a “reply post” to the assignment containing a link back to evidence that met the criteria.

In this example Cooper Kean shared his reflections on the digital detox project.

I then set up an account on webmentions.io to track when these replies come in. This creates “a ledger” of sorts.

I then created an individual badge to send back to Cooper. This obviously isn’t scalable I can’t make a new html file for each badge I issue but this project really came down to proof of concept.

Then using the webmention endpoint on Cooper’s blog I sent him the badge as a webmention.

In this screenshot you see the webmention entry page which you can find on any webmention enabled WordPress site at /wp-json/webmention/1.0/endpoint

I then entered the badge as the source url and the link to Cooper’s application as the target url.

I sent the webmention and it was successful. Cooper can now decide how and when he wants to display the webmention.

You can see an example of a webmention badge as a comment on Cheri’s page.

The final step was to throw the badge into a microformats parse to see what data would be available for machines and people to consume. The results are here

You can see I get the links to the application, a list of the criteria, links to the original assignment and links to the learner’s evidence.

Next Steps

The proof of concepts works. You can easily use webmentions and microformats to issue badges.

Course Template

I want to build a way to issue and receive badges in my remixable course template. I tried to spin up an Heoku app but ran into authentication issues and I then tried Ruby but ran into cert issues installing gems.

Teaching #edu522 in three weeks while also writing a 1.4 million dollar IES grant..I couldn’t dedicate the time I needed to learn how to build either app.

I did start playing with the form fields that would be needed for a student badge application. Will also need a badge creation form. I can’t spin up one html file per learner per badge forever.


I need to pull in the learner’s name from the h-card on their site some how. That will obviously be important information to parse. I also would like the criteria and evidence to be a property but there are no micoformats for this yet….

Moving Forward

By the time I leave IndieWebCamp NYC I want to have a remixable course template as a static site that piggybacks off of a platform to create and issue webmention badges.

I need to do another reflective post on the instructional design choices I made in #edu522, but teaching with different post kinds and webmentions was awesome. There are many ways to embed assessment so learning and not measuring learning stays the goal of the class.

If you have any interest in exploring different technologies for badging beyond the #OpenBadges 2.0 standard join us and let’s build together.

Featured Image: Nerd Merit Badges shipment flickr photo by hyperdashery shared under a Creative Commons (BY) license

Recruiting Guest Speakers for #EDU522-Come Join me for <10 min

I am exploring audio and video formats as part of #EDU522. In all of my onlien teaching students enjoy expert panels more than recorded slide decks. Yet, I also know few finish hour long podcast

So after watching how microcast work on in the micro.blog community I thought about switching it up for #EDU522: Digital Teaching and Learning Too and doing short microcast.

Here are the topics:

  • You are your Domain- Chris Adlrich-Date/Time: TBD
  • Open vs Privacy-Guest: TBD-Date/Time: TBD
  • Open Pedagogy-Guest: TBD-Date/Time: TBD
  • Connected Learning and Affinity Spaces: -Guest: TBD-Date/Time: TBD
  • Assessment and Open Pedagogy -Guest: TBD-Date/Time: TBD

Featured Image: Podcast in Retro flickr photo by themaccraic-david shared under a Creative Commons (BY-NC) license

Sending My First Webmention Badge #OpenBadges

As part of my goals for #EDU 522 I want to create a self contained remixable #IndieWeb course template. I have long thought about using webmentions as a simple path to #openbadges. In the end a badge is an image, a few links, and some baked in metadata.

So is a webmention. Just a bit smaller and all done in html. You can read more about my adventures in webmentions and badges, here. https://archive.jgregorymcverry.com/tag/webmentionbadge

Sending My First WebMention Badge

As part of my goal in building the #IndieWeb course template I wanted a proof of concept for badging. Chris Aldrich has created an amazing stream as an open participant in his class. He sends a webmention to every post noting he has read the assignment or watched the video.

If we combined this with a webmention credential I believe we can create an assessment system for distibuted classes.

How Did I Do It?

I used @glitch and made a manual webmention

<div class="h-entry">
<div class="u-author h-card">
      <img class="u-photo" src="http://www.southernct.edu/academics/schools/education/departments/elementaryeducation/faculty/images/SCSU_17_GregMcVarry-117fs.jpg" width="40" />
      <a class="u-url p-name" href="https://edu522.networkedlearningcollaborative.com">J. Gregory McVerry, PhD</a></div>

in reply to: <a class="u-in-reply-to" href="https://boffosocko.com/2018/07/31/indieweb-technology-for-online-pedagogy/">IndieWeb technology for online pedagogy</a>

<p class="summary">
      <img class="u-photo" src="http://moneyflowcoaching.com/wp-content/uploads/2016/06/badge.png" />
      You earned the <span class="p-name">Module 1: Who Am I Badge</span> in EDU522: Digital Teaching and Learning Too

<p class="e-content">To earn the M<a href="https://edu522.jgregorymcverry.com#criteria">Module 1</a>: Who Am I Badge you provided evidence in your post of meeting the stated criteria in module one. Your post described your goals for the class and you successfully sent a webmention</p>

<a class="u-url" href="https://edu-522.glitch.me/module1badge.html">
        <time class="dt-published" datetime="2018-08-04T17:15:00-0700">August 4th, 2018</time>

I then manually sent this to Chris since my course is not (yet) set up to send or receive webmentions. That meant visiting his post and just adding the link to the badge.


Next Steps

This is still just early proof of concept. I could never add a manual html file for every student and then for every module. Eventually some input fields and scripts will be necessary.

I also need work on building the system into my course so it can send and receive webmentions.

Backstage Blog: Making a Pixelated GIF Poem

As part of the #EDU522 experience you will publish a #backstage blog. Nothing makes you better at teaching then reflecting on learning and you end up with text for later use in documentation and tutorials (for my computer friends they are very different).

So I wanted to share the journey of how I came about to write “A Poem About CSS” It began with me scrolling through the art projects on Glitch.

It began sometime ago.

Why I did it

Many folks will come to the web through the love of art. Not just code, not just words, but fun, tragic, silly, but mainly unique art. Words become banal or simply too hard to find.

You can see an early example of me trying to make art out of boring academic writing here and an even earlier attempt at CSS poetry. If you

If you didn’t know this, art is a pain to monetize, as soon as you fall in love with an app it goes away. Look at all those 401s from Storify. A fundamental truth of the web: If you let others control your art you will eventually lose it to link rot.

So I got to strolling through Glitch to see what kind of art projects were out there. At least here I can learn on their platform and move to GitHub or better yet my domain. I found the Animated Pixelated Gradient Maker from Noel Leigh and being feeling some early web nostalgia I joked about making a bunch of buttons.

Though I immediately saw gif poetry bouncing around my head. It would be pretty easy. I have played with CSS Animation before. Its basically copy and paste and some math. I didn’t have time to squeeze in the work but I did explain my lack of time to write a poem by writing a poem about not having time to write a poem.

How I Did It

The first step was to write the poem. Remember those elusive words? Well to make it easy I settled on a found poem. Afterall it is kind of meta to write a poem about broken CSS by copying and pasting. That is where broken CSS, and the beauty that comes after begins.

So I went to the IndieWeb-Dev channel from the night before and began lifting lines. I only used my words. Even though everything is on chat is Public Domain I do not use someone else’s words (except for a bookmark) without asking.

I then went back to Noel’s projects and began making my gifs. The colors were just randomly selected from the wheel at first. I am color blind so I have no idea what I picked, until I got lazy and went with basic RGB. I can read “RED.”

I then went and copied the CSS Animation I had found on stackoverflow. It was set to 30 seconds with five slides for 6 seconds each. So I changed this to

imageAnimation 30s linear infinite 0s;

to 33 seconds. I then copied the #crossfade > img:nth-child(5) 6 more times and labeled them 6-11. Finally I went and set each delay to 3 seconds.

You can see -webkit-animation-delay goes up by 3 second intervals in each img child. Also note the last one stops 3 seconds before 33 seconds. These are the #crossfade animation is basically just a bunch of images stacked on each other that go transparent revealing the image under it.

Future Improvements

I forgot one slide, “Whitespace Always a Friend” if I want to add it I have to change my counter to 36 seconds and re-order everything. I will probably not get back to adding it, but I want folsk to know how much meaning is carried in the space between words.

Featured Image: by http://yomeryl.tumblr.com/ curated by http://www.thesarahshow.com/ at http://www.thesarahshow.com/post/175583125745/most-everyones-mad-here-sarah-zucker-2016-i

This was also posted to