weblit

in Mozilla

A conversation with Audrey Watters about Web Literacies.

Update: For the latest information on the Web Literacy standard work, head to http://mzl.la/weblitstd


TL;DR version: Amongst other things, Audrey reckons Mozilla should: show potential Webmakers cool stuff that it’s possible to do with HTML, CSS and (especially) JavaScript; work backwards in deconstructing a cool project; pass over the ‘why?’ for some learners; show what’s happening ‘under the hood’; focus on individual autonomy as a reason to care about being able to write the Web; use terms like ‘making’ and ‘building for the Web’ rather than ‘programming’.


One of the awesome things about my role at Mozilla is that I get to talk to extremely smart people about interesting things. Today I had the opportunity to talk to Audrey Watters, whose writing and thinking I greatly admire. And when she speaks, I listen. We caught up via Skype to talk about the Web Literacies framework and white paper I’ve been working on: http://mzl.la/weblit.

By way of context, before going any further you should go and read this post by Erin Knight, Senior Director of Learning for the Mozilla Foundation (aka my boss). In it she talks about our vision for an ‘open standard’ for Web Literacy:

In addition to all of the flashy tools, content and branding we’ve been launching over the last year, we’ve also been doing some considerable ‘underbelly’ work to define the thing we are ultimately after: a generation of web literate people.

[...]

I think this is important work for more reasons than just enumerating the things that Mozilla cares about or may provide learning pathways and badges for, but as a definition that we, as in the royal we of the web world, can all get behind and all teach to.

In 2013 we want to work with other organisations, interested groups, and individuals who are interested in helping people not only be able to elegantly consume, but write parts of the Web.

Programming

My conversation with Audrey was focused on what works in the current iteration of the Web Literacies framework and what needs changing or removing. We ended up spending the majority of our time talking about the next step up after people learn some HTML (structure) and CSS (styling) – the interactivity. Audrey made a great point in that we usually talk about JavaScript (JS) as being an introduction to ‘programming’ but that many programmers don’t really understand the Web. They deal in non-Web programming languages like C#, for example.

Recommendation 1: It may be better to talk of ‘scripting’ than ‘programming’ in a Webmaker context

Epic stuff

Another problem with JS is that you don’t know what you don’t know. If you don’t know what JS does then why would you want to learn it? We need, therefore, to surface great examples and allow users to ‘look under the hood’ of web pages, much as we do with X-Ray Goggles for HTML and CSS. Although I forgot to mention it during the call, I think we’re on the right track  with the not-yet-released semi-official hackagame.org where you can use the Thimble interface to hack the classic game Pong.

Another thing we could potentially do is create an amazing video-based project in Popcorn Maker and then deconstruct the JS (along with the HTML and CSS). Reverse-engineering all the way to a blank page, the learner would then be able to build their own modified version. They would learn that HTML, CSS and JavaScript is a powerful combination negating (in many cases) the need to learn specific programming languages for different platforms.

Recommendation 2: Show learners epic things they can do with Web-native tools

Powerful tools

Although Audrey is a big fan of the visual programming environment Scratch she talked of giving learners tools ‘that real programmers use’. As an aside, I’ve always found it really disingenuous that some educators add a lot of structure to learning activities and try to make learning ‘easier’ by making the tools available less powerful. After all, it’s highly unlikely that the educators themselves learned in anything other than a fairly ‘messy’ way.

Part of the problem is that we don’t really have a pedagogy around Computer Science (CS) which makes a lot of this suck-it-and-see. I thought Audrey showed real insight when she talked of those who are highly skilled in programming often being highly self-motivated. These people can make great teachers, but (in both our experiences, I think) often don’t. Certainly a lot of the online places you can learn to code seem to be overly-structured and focus on procedural, rather than conceptual, stuff.

At the end of the day, the procedural stuff (especially around syntax) can be learned through tinkering. It’s the conceptual stuff, arguably, that’s the most important.

Recommendation 3: Give learners industrial-strength tools and don’t overly structure what they can do with them

Misc.

Audrey also mentioned lots of other stuff that would turn this into an epic post. She talked about the importance of real project-based learning, where the learner decides what they’re learning, not the teacher/website. She mentioned why Webmaker as a ‘brand’ is important as it focuses on the Web rather than the (sometimes) closed ecosystems of native apps in the mobile space. And, interestingly, Audrey talked about the importance of users understanding the politics of ‘Open’ and why it matters.

Note to self: talk to Audrey more. :-)

  • http://johnjohnston.info/blog johnjohnston

    Hi Doug,

    I think ‘scripting’ is a useful word, but I stared with HyperCard. Thinking of HC I guess you have seen http://worrydream.com/LearnableProgramming/ which has a useful critique of the online code learning tools and some interesting suggestions.

    I tried a few of the online code learning tools and find I usually get bored quite quickly. I am much more engaged as a learner when I am making or trying to make something that is ‘useful’ to me. That use might just be having fun riffing of someone or something else. I can for a while go through the online tools for an hour a day but learn more, or learn happier diving into a project that eats a weekend.

    A shorter example of this process (a couple of half hours): http://johnjohnston.info/tests/random106.html to which I’ve just added some notes to go over the story after reading this post. As Audry say’s where the learner decides what they’re learning, not the teacher/website.

    Every time I remember to look at thimble it seems to have improved. I wonder if hackagame is going to be extended to allow editing of the JavaScript files? I could not seem to get to then in the pong example?

    Another approach might be to give folk as toolbox of simplish stuff that could be stuck together. For example in the slider I link above, the slider code could be one tool and a flickr search another. Learners cold gain a lot by figuring out how to stick these together.

    Hopefully the industrial strength tools turn out to be a text editor. Although thimble and other online tools are nice it is a bit easier, I find, to work in a text editor. This lets folk have an understanding of how files are organised and work together and are less likely to fail than online tools (Discus ate the first version of this comment)

    Alan Levine has occasionally mentioned a coding version of DS106. Something of that nature could provide examples, allow learners to look under the hood and give them these example provided by other learners to riff off while providing a community.

    Along with scripting, tinkering and webmaker are great words, they hint of enthusiasm, amateur development and fun.