Ever since I first posted a list of Mozilla’s web literacy skills, people have been telling me that I should order them.  “Which comes first?  Where do I start?  Which are the prerequisite to the others?”

It’s a tricky question because I believe that it’s far from a linear sort of system.

Here’s an example of the type of graph formed by these skills.  (Click through for a bigger picture.)

This might be a little hard to track what the heck is going on in the abstract, so I’ve come up with three examples to show you what I mean.

Let’s say Aliyah is an intern as a layout graphic artist for a major magazine company, and decides to pick up web making to help expand her portfolio of skills, and to teach her how to take her existing work and make it web native.

She might start with learning something about restaurant HTML, specifically how to open and close tags, and then jump straight into linking and embedding: how to link from one page to another.  Note that she’s not done restaurant HTML at this point, even though she’s “left” it to go learn another skill.

Now that she’s got a bunch of links on her page, her first thought is that she wants them to be red and dash-underlined, like she saw on a website she really likes to frequent, so she learns a bit more restaurant HTML, specifically how to style links.

But without the context of the rest of the page that she was mimicing, these red links don’t look like links to her, they look like some sort of spelling errors or something.  So she goes on to learn a little bit about designing for the web: how to pick effective colors.  She decides that purple might solve her problem, changes her page and loves it.  While she was learning about how to pick effective colors, she read something about typography, one of her passions in the magazine world, and learns a little bit about typography on the web.

This leads her to want to begin to style her entire page, and so she picks up some more restaurant HTML: how to control fonts, colors, etc.  Soon her webpage has begun to look like an actual page.  She wants to be able to share it with her brother, who is vision impaired and reads the web with a screen reader, so she researches accessibility on the web to figure out whether or not he’d be able to see her page.  Next up?  She’d start venturing forth to figure out how to share this page, etc.

A few things to notice from this example:

  • It doesn’t make sense for Aliyah to do all of “restaurant HTML” and then all of “designing for the web”, etc.  Some bits come before the others.
  • Some of her pathway was purposefully chosen “I want to learn how to” and some was accidental, tangential.  She picked up typography because it came across her radar while she was building something, not because it was part of the initial plan.

Okay, here’s an entirely different case.

Jia is one of those kids who drives her parents and teachers crazy because she always asks “why?”  She just loves to know how things work.

So as soon as she learns some browser basics, how to navigate to a URL she immediately wants to know what it means.  “What’s that part?  Why is that slash there?”  So she starts to pick up some web mechanics: the components of a URL.  Up until now she’s always gone to webpages by searching for them on Google.  She’ll open her browser, which defaults to the Google homepage, and type in [twitter] to go to twitter.  Or [tumblr] to go to tumblr.

Armed with the new knowledge of how URLs work, she sends some URLs to friends of hers.  Suddenly she no longer has to use the ‘share’ functionality on webpages — she understands how to cut from her browser bar and paste into IM windows.

While playing online scrabble with a friend of hers, Dilip, she notices that her scrabble profile is at “/edit?user=jia” so she tries sending that URL to Dilip and discovers that if he goes there, he can edit her profile!  This prompts her to immediately go learn about public v private and read about how trying to have privacy by assuming your webpage won’t be found is a bad assumption.

Always the “why?” asker, this leads Jia to learn more about searching and how search engines work and crawl existing URLs to find other URLs.  While reading about this, she learns that all that search engines do is rank webpages higher based on the number of inbound links.  She’d never really thought about using voting as this type of crowdsourced reliability before!  In fact, she’d never really thought about reliability at all online before!  She hadn’t understood enough to be able to really consider how these things work.  So she dives in to learn all that she can about bullshit detection and how much you can trust what you read online.

Two things to notice in this example:

  • Although Jia wasn’t “learning by making”, she was still tinkering around with the web in her own way.
  • When Jia wanted to know more about a topic, she was able to get that information.

Okay one more example.

Token is learning about the open web with his dad, a data entry professional at a big company who knows a little bit about how computers work and wants to share that knowledge with his son.

They talk about webpage ownership and about CC licenses, and together they build some superhero webpages and release it with a CC-attribution license.

A few weeks later, Token learns that another kid in his class has forked his webpage and made his own superhero version!  Token and his dad talk about remixing and invite the kid over, and some other kids they think might be interested, for a big remix party.  They’re even going to order pizza!

Token feels like a total badass for introducing this concept to his friends, and for making the most popular webpages that get remixed at the party.  Even though he’s not a nerd, he totally gets this webpage stuff.  One of the friends at his party asks Token, who seems to know a lot about this web stuff, how search engines work.  So Token asks his dad to show them the next weekend.

Important points in this story:

  • Gathering together interested peers even if they haven’t “leveled up” along the “tree” as much as you have.  The skill tree isn’t meant to be a “learn this first OR GO AWAY” gateway.
  • Picking and choosing random points along the tree (how search engines work) without feeling constrained to the “branch” you’re on.

Of course this type of graph above is faaaaaaar from complete.  Not only are not all the skills represented, but even within one of the skills all of its attributes aren’t represented yet.  And I’m missing a heckton of edges.

But hopefully this’ll help to give an example of the type of thing I mean when I say that the skills aren’t necessarily linear, with one always going before another.

Badges, Curriculum

March 8, 2012

2 Comments