Michelle Thorne

London Learning Jam

by thornet on May 29, 2012 in events, Mozilla with No comments

How would you teach something about the web using a game?

This was the design brief we gave a talented group of educators, designers, and developers last week at the Mozilla London Learning Jam.

Our thesis is:

Use game-like mechanics to encourage learning and making
Hack on real code, not rely on training-wheels
Meet learners at their interests with tools that help them express themselves

Thimble

We built a framework to make it easy to create new games. It’s a two-pane editor called Thimble.

One side has code and short comments to explain what to do. The other side has the rendered website, which updates after every change you make to the code, so you can see how the snippets connect.

We used the Thimble framework to hack on new games and playtest them with adults and kids.

New Games

During the first two days of the learning jam, we broke into groups to design the learning games. Some groups came with a brief in mind, others found their way using paper prototyping and talking through what they’d like to make.

I was thoroughly impressed by the creativity and thoughtfulness of the new games:

The Animal Builder by the London Zoo. Mix and match animal body parts to create hybrid animals. Learn HTML & CSS.
Wickedpedia by Steve Bunce (Open University) and Oliver Quinlan (Plymouth University). Edit celebrity Wikipedia pages. Learn hyperlinking, generating content.
Supporter 2 Reporter by Radio Waves. Create your own blog to report on sports such as Olympics. Learn blogging, layout, curation, branding.
Get off my Lawn by The Guardian and Goldsmiths. Clear the zombies away from your garden lawn. Learn CSS positioning.
Bunnies by Ben O’Steen. Save the bunny from danger by putting it in a safer environment – or worse! Learn HTML Basics, images, CSS positioning.
Cube by Laurian Gridinoc. Create a 3D Cube. Learn CSS and trigonometry.
Readability by Doug Belshaw. Make the text on your webpage legible. Learn HTML and typography.

What makes a good learning game?

We playtested the new games twice: once with a group of educators, policy-makers, funders and activists and the next day at CoderDojo London with about 15 kids.

Check out what the kids made!

The feedback from both rounds was incredibly helpful. My biggest take-aways were:

The comments in the code can be instrumental in making an effective learning experience. The Zombie game did a fantastic job both setting up the code to apply your learning and to prompt you using simple comments.
Give a clear mission. Some of the games had brilliant premises, but did not communicate upfront what their purpose was. When you start a game, you should know immediately what the goal is and what you’re expected to do.
Prompt creativity, but plan some backups. In games like Make Your Own Meme, participants said they felt pressure to be creative and didn’t know what to write. If we had more defaults or recommended images pre-loaded and commented-out, you could easily toggle in new content without much hassle.
Show what others have made. A key feature rolling out next for Thimble is a gallery. I think this will go a long way in encouraging users and showing what’s possible with the tool.
Work in pairs. Another tested thesis of ours is the power of working together. I found during the playtesting that teams hacking on the same games benefited greatly. They began to teach each other things and be inspired by one another.

What next?

We’re rolling in this feedback into the next release of Thimble. In future versions, it’ll also be easier to create new games and to share hacks.

The learning & making kicks into high gear this summer, starting June 23 with the Summer Code Party. We invite you to get together with family & friends and teach other the web using these games & whatever you like. You can also think about a hack jam to build even more games.

And there will certainly be a component of these tools & games at this year’s Mozilla Festival. We’re bringing some of the best people and projects to London to showcase what they’ve done over the summer — so dive in, and also give us feedback about what we can improve, what you’d like to see, etc.

Thanks!

We had a lot of fun, and this event won’t been possible without a number of great people.

Firstly, a huge thanks to NESTA in particular Amy Solder and Mark Griffiths for supporting the event and paving the way with key organizing.

A shoutout to all the hack jam and playtesting participants. Congrats to Alaistar Davies, Mark Riches, Laurian Gridinoc, William Duyck, Allan Callaghan, Doug Belshaw, Ian Usher, Oliver Quinlan, Ben O’Steen, and Steve Bunce for making cool new games.

Thanks to CoderDojo London, especially Andy Kent, for letting us play together.

Thanks to Jess Klein, Chloe Varelidi, Erin Knight, Laura Hilliger and Andrew Hayward for their hard work on the learning missions, Thimble, and leadership at the jam.

Lovebomb to Allen Gunn for facilitating, to John Bevan for inviting such great people, to Ravensbourne for hosting us, Paul Clarke for the photos, and to Mark Surman for the vision of how we can all learn and make on the web together.

Images by: Paul Clarke and Oliver Quinlan

Tractatus

by thornet on May 27, 2012 in Uncategorized with 2 Comments

Wovon man nicht sprechen kann, darüber muss man schweigen.

– Wittgenstein

A Learning Network for Berlin

by thornet on May 18, 2012 in berlin, digital culture, Mozilla, participation with 2 Comments

There’s a long road ahead to bring Europe’s “start-up darling” Berlin up to par with learning & and the web. Digital literacy and simple computational competencies are often lacking; and there’s no indication yet that Berlin schools will step to fill the gap.*

There’s an important “out of school” role to play with Berlin’s tech-savvy communities and hackerspaces, together with an existing network of media centers and educational activists.

To get closer to a vision of what this could look like, 10 educators, tech community members, and activists met on Wednesday at St. Oberholz for a community brainstorm.

The goal: to map current digital literacy needs & offerings in the city, and to scope possible next steps for a learning network in Berlin.

Connected Learning

One of theories of change driving this discussion is connected learning.

Pioneered by UC Irvine researcher Mimi Ito and the MacArthur Foundation, connected learning is about re-imagining education in the information age. It leverages today’s technologies to meet youth at their interests and passions, realized through hands-on production, shared purpose and open networks.

I personally find this model very promising, as it centers on:

actively producing, creating, experimenting and designing
valuing the interests of young people to steer their learning
cross-generational collaboration
harnessing peer culture
linking the school, home and local community in an open network
and honoring academic achievements.

While the steps we are taking now are small, there are a number of successful learning networks to draw inspiration and mentoring from. Among them Hive NYC and Hive Chicago, as well other models at work in Pittsburgh and other cities.

Berlin: a network for making & learning together

What could such a network look like in Berlin?

Imagine:

Visit the Pergamon Museum and get an introduction to new methods in archeology and how to scan for objects underground.
After unearthing a digital file of a buried statue from the museum’s learning center, you head to Open Design City, where you pick up the basics of 3D scanning and printing. You print off a copy of the statue based on the museum’s files.
Your class had a workshop earlier that year in the Wikimedia Germany community space. So you know the basics of wiki-editing and online research. After digging through articles, you pull up an ancient inscription to go with your statue.
Go around the corner to lasernlasern, who helps you etch the inscription into the statue using lasers.
You’re really proud of what you made and want to tell the world. The nearest media learning center is a few minutes away. You bring your statue and some photos, and a volunteer helps you set up a blog and a gallery.
They tell you about Coder Dojo, a youth-led initiative to learn code, which has it’s first event in Berlin next week. You sign up, eager to make a game about hunting statues and cracking ancient codes.

Needs & Offerings

At the meet-up, we mapped what we already have to offer and what we need.

It was exciting to see that collectively, we have more to offer than we have needs. Lots of important skills at the table (teaching web development, film-making, media theories, entrepreneurship, and more), as well as connections to subject-matter experts, a nation-wide network of education activists, meeting spaces, hardware, time, and even small funding to get started.

The full list is here, and please feel free to add if you something to offer to the network.

Next steps

We decided we needed to test our thinking by running an event.

An event is a concrete way to 1) try out partnerships, 2) gauge local interest, 3) experiment with the curriculum, and 4) have fun.

Together with Fabian, I’m drafting a lightweight scaffolding for a youth pop-up event this summer. Chris Lawrence from Hive NYC has written an excellent piece about how to run one of these events, from which we’ll certainly borrow many ideas.

If you’re interested in:

Hosting a learning/hacking station (1-3hr, fun small activity that teaches a skill)
Offering a space (large, open space holding 50-100 participants)
Volunteering (the more, the merrier!)
Recruiting young people (We’re old. Where do we find young people in Berlin?)
Spreading the word

Then please join us on June 20 for a planning meeting. Location & time to be determined.

You can follow #hiveberlin for updates and also ping me (@thornet) and Fabian (@fabianmu) with ideas & questions.

For a truly impressive example of a local school thinking in new ways, check out Evangelische Schule Berlin Zentrum.
Images by JonLimCA

republica recap

by thornet on May 13, 2012 in berlin with 1 Comment

A recap from republica:

Open Video

I hosted a workshop on Open Video and Popcorn.js together with Henrik Mitsch and Cole Gillespie. I gave a 15min intro to Popcorn, showed some demos, and then we broke into groups to discuss opportunities with open video (learning, tech, and storytelling).

Sam Figueroa kindly took notes from the session and the HTML slides are here.

The following week we organized a meet-up at Oberholz to help folks get started on their video projects and perhaps do a regular “open hack” and skillshare around these tools. The team at Leuphana Moving Image Lab has been central to helping get these efforts off the ground.

The next Berlin Popcorn meet-up is on June 6.

Connected Learning / Hive

Thanks to the generous invitation Jöran in the re:learn track, I shared the work being done at Hive NYC, a city network of “learning sites” where you can learn skills and make things with participating organizations.

It focuses on connected learning, experiences which are hands-on, effective, networked and driven by youth’s interests. Slides.

There’s a lot of potential to build a network like this in Berlin.

We’re hosting a community brainstorm on May 16 at Oberholz to survey what learning initiatives are out there, what we’d like to see in Berlin, and test whether we’d like to try something together.

If you’re an educator, a geek, a lover of learning: stop by!

Iron Blogger

Iron Blogger Berlin cashed in over 200EUR of blogging debt at the re:fill bar. (I sadly added much to that pile.)

It was fun to see fellow bloggers and even recruit a few new ones (hi, Anja and Torsten!). A big thanks to Nicole for stoking the blogging fires and getting us all together.

Thanks, #rp12!

Huge props to the #rp12 team for pulling together an impressive conference. With 4,000 people, a new but fitting venue, and all in all good fun, it was a wonderful experience and definitely the best place to meet up with ze German internets.

Smart Garbage

by thornet on May 5, 2012 in atoms, Wise Words with No comments

“Smart garbage”: objects self-disclose how to fix, disassemble and recycle them.

— Mike Kuniavsky, Smart Things: Ubiquitous Computing User Experience Design.

Inspired by a Bruce Sterling lecture in 1999:

Smart garbage doesn’t fester in darkness, ignorance and denial. It becomes a resource.

Quality

by thornet on May 1, 2012 in Wise Words with 1 Comment

Motorcycle riding is romantic while motorcycle maintenance is purely classic.

— Robert Pirsig, Zen and the Art of Motorcycle Maintenance

Sitting in Prinzessinnen Gärten, enjoying the first outdoor lunch of the season, I got to talking with a Berlin transplant about Quality.

In Zen and the Art of Motorcycle Maintenance, Robert Pirsig is reconciling two types of personalities:

the romantic mode: primarily inspirational, imaginative, creative, and intuitive. Feelings rather than facts predominate.
and the classical mode: straightforward, unadorned, unemotional, economical and carefully proportioned. Its purpose is to bring order out of chaos.

We find these modes prevalent in our society, and often within ourselves as well, as we alternate between these two ways of seeing the world.

In the weird way you discover similarities in your day-to-day work and philosophical models, I was struck by parallels in Pirsig to what we’re doing at Mozilla.

On the one hand, we’re building initiatives to inspire the romantics, the “non-technical” personalities who don’t want to be bothered with the inner workings of code…at least not yet.

These initiatives are about imagination and creativity, self-expression, and a sense of wonder. The 14-year old sending a lovebomb to her mom, the filmmaker re-imagining his film for the web, the journalist remixing a rival newspaper’s website and sending it around the office for laughs.

On the other hand, we’re delivering tools that push what’s possible technically. They are about executing good code, improving software offerings, establishing infrastructure standards, and working with people to dig into code and think algorithmically. Popcorn contributors squashing bugs to speed up the tools, a badge issuer complying with specifications, a developer producing a sophisticated hack to display timelines better in news stories.

At moments in the organization, you can feel the tension between these two modes, the romantic and the classical. They have different perspectives, different ways of evaluating the world and our progress within it.

Pirsig’s book was about the interrelation of the two modes, neither one “winning out” in the end, but rather being pushed to the point where the division between them dissolves.

At the cutting edge of time, before an object can be distinguished, there must be a kind of nonintellectual awareness. You can’t be aware that you’ve seen a tree until after you’ve seen the tree.

— Robert Pirsig, Zen and the Art of Motorcycle Maintenance

Pirsig uses the metaphor of a train, rushing down the tracks. At the front of the train, propelled by romantic knowledge, you push to the edge of time where the division of perception and intellectual awareness dissolve. The train cars, built and maintained by classical knowledge, are essentially all institutional knowledge and empirical findings. And the tracks that the train runs on is Quality, the continuing stimulus inspiring us to create and push forward in the world.

Of course, this model isn’t really immediately helpful to improving how different parts of an organization work together.

If anything, though, it does reinforce that the way to speak to people is through the inspirational “what’s possible” romantic mode, all the while supporting the momentum with a real corpus of code and ensuring that quality continues to be the guiding principle of where we’re going and stimulus to keep doing what we’re doing.

You can read more about Pirsig’s Metaphysics of Quality in Wikipedia or pick up a copy of Zen and the Art of Motorcycle Maintenance. I certainly forgot how much I enjoyed reading it the first time.

Images: Time For a Rest At The Camp Buell State Historical Site., Definition of Quality by Robert Pirsig

Vending Machines of the Future

by thornet on April 18, 2012 in atoms, digital culture with 3 Comments

No trip to Japan would be complete without a report about their vending machines from the future.

A few years back, when I traveled to Japan for the first time, friends put me on scouting missions:

“Find the robotic vending machine that follows you around Shibuya!”

“Find the SMART car vending machine!”

“Find the umbrella / necktie / lobster / underwear vending machine!”

To varying degrees of success, those were hunted down pretty easily (although I regret never seeing the robotic Coke machine).

This time around, we had our quest to find the facial-recognition vending machines.

The machines, developed by a subsidy of the train company JR East Co., analyze your facial features to determine your age and gender and recommend a drink accordingly. They also change recommendations to match time of day and temperature. It uses algorithms such as men prefer canned coffee and women like slightly sweeter drinks.

Sales from these machines have tripled in comparison to regular machines.

The photo is of Peter, disapproving of the machine’s recommended energy drinks, since he in fact wanted an orange juice.

A near-perfect future. ^^

Image: Japan Vending Machine Free Drinks / CC BY-SA 2.0

Fab Cafe: Lattes and Lasers

by thornet on April 17, 2012 in atoms with 1 Comment

Our trip to Japan revealed many treasures, but one I’m still glowing about is the Fab Cafe in Shibuya, opened by a friend and colleague, Chiaki Hayashi and her design company Loftwork.

The theme is lattes and lasers. Their signature drink is a marshmallow man peeking out of the coffee to accompany the humming laser cutter in middle of the room.

What strikes me about this place is it’s welcoming atmosphere and casual introduction to fabbing. It’s in the heart of one of the busiest neighborhoods in Tokyo, and Chiaki says they get a lot of walk-ins who discover a nice-looking cafe, have a coffee, and then get curious about the laser cutter.

She says the visitor ratio lands around 50:50 men and women, and people from all sorts of backgrounds (designers, school children, small business owners) stop by.

The cafe benefits from an active design community via Loftwork and an impressive Fablab about an hour outside the city in Kamakura. They’re also starting a series of workshops with the Tokyo Hackerspace, including a DIY coffee roasting session.

The idea for the space sprang out of a workshop a few months back, where teams of designers, developers, and fabbers sprinted together on design projects. Chiaki explained that the workshop tapped a community’s interest in opening a dedicated fabbing space in the city.

In many ways, this parallels Berlin’s Open Design City’s origin story.

Comparing Tokyo and Berlin, perhaps the connection between the betahaus cafe and the annexed maker space could be more explicit. Perhaps some example products or signage in the cafe could signal that you can stop by and make something yourself. Or even put fabbing on the cafe menu.

Some Mt. Fuji coasters we cut while visiting:

Images by thewavingcat: Fab Café / CC BY-NC-SA 2.0 / Marshmallow Man at Fab Café / CC BY-NC-SA 2.0 / Fab Café in Shibuya / CC BY-NC-SA 2.0 / Coasters at Fab Café / CC BY-NC-SA 2.0

Betatesting Around the Kitchen Table

by thornet on April 16, 2012 in Mozilla with 1 Comment

We had a lot of fun doing some betatesting for the Mozilla Summer Code Party.

The idea is to gather a few friends around your kitchen table, have some drinks and snacks, and play around on the web together.

It’s through the informal, friendly setting of your kitchen table that we hope people will find inspiration to make things together on the web. The format is simple and also highly customizable, so you can host the event on your own terms.

Mimosas and Making

As part of the organizing team for the Summer Code Party, I felt it was really important to test the kitchen table format myself. (A huge shoutout to the other Mozilla betatesters! I’ll be writing a summary of your input and experiences tomorrow.)

On a Sunday afternoon I called up three friends to come over and play with Hackasaurus. Two of them already knew about the tool but hadn’t played with it too much, while the other was new to it. They all have experience with making things on the web: the group was comprised of a journalist, an illustrator, and a web strategist.

The invitation was very casual, which I think helped set up a relaxed, fun atmosphere. I just asked them to bring their laptop and to swing by my house for an hour.

We poured ourselves some mimosas, and I showed them two tools to get started.

Hacking the News

I first showed them lovebomb.me, which lets you remix cards and send messages to your friends. Their reaction was lukewarm. So I moved right into demoing the Hackasaurus X-Ray Goggles.

After remixing the example on hackasaurus.org, they installed the goggles and surfed the web for other sites to hack. The most obvious thing to remix was images, so they swapped photos on sites they knew.

One friend, interested in politics, hacked Wikipedia by replacing a politician’s profile with a brown envelope, a symbol of corruption:

After a few image hacks, we took to changing text as well. Another friend remixed a headline story so that it raved about his brother’s favorite sports team. He emailed the hack to his brother and immediately followed up with a call to explain how he made it and how funny it was.

There was also a Guardian remix about a politician outing himself as a muppet. “Labour leader calls for equal rights for muppets after he is revealed to be one,” reads the subtitle.

Storything

Since one of my friends is a journalist keen to learn more code, I showed her the Storything prototype. It’s designed to walk journalists and others through basic HTML tags, using a two-pane editor and a little video tutorial to mark up an article they’ve written.

She did the first chapter and said it was helpful and would likely try out the rest of the tutorials.

Doing your own thing

Several other betatesters pointed out, and I agree, that a successful kitchen table event balances curated activities with a hackable agenda that encourages participants to do what they want.

So while two participants were using Hackasaurus, the other was writing in his blog and clicking around on the web. I think that’s great and definitely the way to run these things: create a fun, communicative space where friends can learn and make stuff on the web, either in a guided or free-form way.

That self-direction helps the host get away from a disciplinarian role, and instead allows for everyone to make something that interests them. As a facilitator, I found my role to be more about introducing ideas, keeping a good flow and troubleshooting, rather than being a task manager.

Ways to improve

We ended up hacking for an hour, and I can imagine we’d play for longer if there had been more time. As we wrapped up, I asked my friends what they liked and what could be improved.

In general, they said they really enjoyed it — it was much more fun than they thought it would be.

However, they suggested adding more tutorials within the X-Ray Goggles, since sometimes it was hard to know why their hacks weren’t working. Perhaps in the manner of Storything with a guided tutorial, or just a hover-over “What’s this code?” or simple debugger might be helpful in showing people how the code is made and how they can hack it.

From my end, I also really enjoyed hanging out and showing my friends something interesting. I think we need smoother integration to publish hacks into a shared, global gallery. For this betatest, my friends emailed me their hacks and I took screenshots.

Perhaps we can build in some gallery functions directly into the Publish button in the X-Ray Goggles, since I imagine this will be a popular tool during the summer code party.

As a facilitator, it certainly helped to be familiar with the tools and to have played with them myself already.

I think encouraging future hosts to test a range of tools and have a ready repertoire is a good idea. As I’ve heard from other betatesters, you might need to adjust the agenda on the fly, introducing new tools to fit the interests and skill-levels of your participants.

Lastly, although I wrote up the host guide for the kitchen table event, I ventured far from it. That’s totally the intention, but I found it striking how little I followed my own instructions. I’m not sure I’d re-write the guide to match what I did in practice, but I’ll have to compare notes with the other betatesters to determine what parts of the guide are really valuable and which are just noise.

A huge thanks to my friends for joining me on a Sunday afternoon for some webmaking!

Hackasaurus-goggles

Arsenal of Exclusion and Inclusion

by thornet on April 15, 2012 in berlin with No comments

The 99% Invisible podcast recently featured an episode about The Arsenal of Exclusion & Inclusion, a glossary of the many visible and invisible tactics used by urban planners to bring people together — or keep them apart.

From armrests on public benches to Hamsterdam, the arsenal is a fascinating list.

In the podcast, the team travels through a “museum of exclusion”, a stretch of street in Baltimore called Greenmount Avenue. Affluent houses are separated from their poorer neighbors with roadblocks, one-way streets, residential parking permits, and impossible left-hand turns.

Daniel D’Oca, the urban planner leading the tour and co-author of the arsenal, points out that while these barriers are a nuisance, removing them obviously won’t directly bring about equality. They are more of a symbol of exclusion and one of the many ways cities can silently segregate its citizens.

That got me thinking about where I live in Berlin, and whether any items from the arsenal, either inclusive or exclusive, are nearby.

Right on my corner, for example, there’s a headache of an intersection. With fences and a weaving set of crosswalks, it can take up to an extra 3 minutes to reach the station. If you bee-lined it with a new crosswalk, it’d be much faster. We’ve thought about sneaking out at night to paint a pedestrian crossing.

On the other hand, immediately to the right of that crossing is a little public square. With an ancient tree, a mosque, several restaurants and now a bus/kiosk, there’s always a crowd gathered. The space invites people to linger and meet one another. The streetview image doesn’t do it justice, but the scene on a summery Friday night can be jammed packed.

Do you see the arsenal of exclusion/inclusion at work in your neighborhood?