Revisions to Demonstrating How #IndieWeb Works Images

I added microformats and fixed some language.

I often drive my students to tell stories with visual metaphors but do not focus enough on designing slides for instruction.

Since the goal is learning every element of an image must revolve around telling the story of why does this matter to me.

After that comes a logical progression of information and visual clues that converge on meaning.

The best images allow you to tell the same story to different audiences. So here is a version with no words. 

The goal is you would need no words for a live talk. You can also add the step by step for more technical audiences.

Stories of why does this matter to me should also be able to unwrapped in a linear fashion. I might split these two images but I tried to demonstrate in one shot what happens user facing and what happens behind the browser. 

If you need a visual guide for planning a slide deck, for example, you can use the bottom image.

As always whenever using images as a reading provide a text-only alternative for low connections and screen readers. 

1. Janice logs into her phone with her url  using a tool called IndieAuth

2. Janice publishes a post in her social reader

3. A standard called micropub posts Janice’s Pic to her website

4. A standard called microsub displays Janice’s post In Isabel’s reader

5. Isabel posts a reply. 

6. micropub publishes the on Isabel’s website

7. A w3c Standard called webmentions publishes Isabel post as a comment on Janice’s website. Isabel also uses webmentions to syndicate to Social media

8. Isabel’s reply shows up Janine’s social reader again because of microsub and the #IndieWeb circle is complete