New hackable teaching kit prototypes for Webmaker

Re-posted from OpenMatt.org.

TLDR version of this post: we have new Thimble prototypes for creating your own hackable teaching kits. Please help test and make them better by sharing feedback through #teachtheweb or by filing a handy feedback ticket here.

In Mark Surman’s recent post about where Webmaker.org is headed, he lays out five key priorities for “Webmaker 2.0

  1. Rebooting the brand to focus on makers of all ages
  2. Building a gallery to show all the awesome makes
  3. Creating a Make API so anyone can make a gallery
  4. Deepening learning with challenges + badges
  5. Making it easy to create hackable teaching kits with Thimble

This post is about that fifth element: making it easy to create hackable teaching kits with ThimbleLaura Hilliger, Julia Vallera and the mentor team have created new prototypes toward making this possible — and also updated their thinking and content strategy for hackable teaching kits on webmaker.orggoing forward. This post shares the prototypes and summarizes the new thinking.

Kit prototype

How do hackable kits work?

We want to make it easy for anyone to create their own teaching guides and lesson plans for teaching digital literacy, webmaking or any content relevant to mentors and learners. To that end, we’ve created a set of new prototypes in Thimble. The templates are built around three key teaching elements:

  • your learning goals. What are you trying to teach? What will people learn?
  • your learning activities. What activities, projects or hands-on making are you going to do?
  • additional resources. Cheat-sheets, handy reference guides, further reading, etc.
  • tying it all together. A complete kit then ties all these elements together into one handy link.

Kit prototype -- edit

New Thimble prototypes

Try them out now. Clicking on a template below will open the Thimble editing window, where you edit the content on the left and see how it will look when published on the right.

The templates can also make it easy for people to create multi-page teaching guides. Check out these two examples:

profile page

What’s the goal?

These prototypes are just a small first step. By eventually making it easy to display what mentors are creating through a gallery, and surfacing these community-generated resources onto webmaker.org/teach, we can:

  • showcase what others are doing. See how other educators and mentors around the world are teaching and making. Sharing great activities and lesson plans.
  • enable easier remix and localization. You can just hit the “edit” or “remix” button in Thimble to immediately start translating, moving stuff around, adding your own images and links, etc. When you’re done, you can just hit “publish” and publish to a new, easily shareable URL for what you made.
  • make it easy for people to work their own way. The beauty of working in Thimble and simple editable HTML and CSS is that people can create and share however they want. Your Thimble make could follow our existing template — or you could hack it to include whatever you want: a link to your own blog post or web site, article, third-party resources, etc.

We know not everyone likes to edit HTML — and we’re working on alternate workflow for that, like Mentor Mob.  This is just a small first step.

Building Webmaker 2.0

What’s our content strategy for these hackable kits going forward?

  1. Move to a “make-based architecture.” Up to now, our teaching resources / “Hacktivity Kits” have been their own separate content type. Moving forward, we imagine kits and educational content to be just another “make,” like any other — tagged so that mentors and educators can easily find them.
  2. Simplify our nomenclature and terms. We’re no longer referring to these teaching guides as “Hacktivity Kits” or “Hacktivities” — we’re going to simplify and streamline our nomenclature, using terms that are already familiar to people and easier to localize. (More on that soon.)
  3. Test and refine these Thimble templates in our MOOC. Through the launch of our new open online course, we’ll be in close touch with hundreds of educators, techies and mentors that can help us test, refine and create their own content. This will be made easier by new “save” functionality in Thimble — so our target is to have an early alpha version of this feature ready to test by May 23.

“Everything is a make”

They key design principle here is that, going forward for Webmaker.org, everything is a “make” – and it will soon become dramatically easier to see and remix what other people are making with Webmaker tools like Thimble and Popcorn.

The NYT -- Common CoreCan we flow great content like this into our these new prototype templates?

 How to get involved

Of Educators and Youth – Hive NYC MozFest Recap

What happens when you get a bunch of activated educators in one room to consider how best to help youth gain crucial digital literacy skills, while also creating the materials and resources for others to teach those skills?

This question was at the core of our efforts at MozFest 2012, and in the weeks and months leading up to it, we worked to design and plan opportunities that would connect educators with designers, developers and youth and set a goal of creating 10-15 new prototypes and resources. We’re pretty proud with what evolved–new connections made, new skills earned, new materials developed, and a general excitement about a burgeoning community of those who want to help create a generation of webmakers.

We were responsible for three key initiatives heading into MozFest. One was to help shepherd a few Hive NYC projects that have web-based technologies or webmaker concepts baked into their project outcomes. Another was to begin laying the framework for a global community of webmaker-makers to come together and co-develop platforms and resources to support learning the “4th R.” Finally, we helped organize the Coding for Teens strand, comprised of discussions and workshops deemed “youth-friendly” by session organizers.

Hive NYC Across the Pond

We brought educators and youth from four Hive NYC member organizations to iterate on some of their recently-funded projects that embody webmaker tools and concepts:

  • Global Action Project, to elevate their Media History Timeline from a paper-based workshop to a fully interactive web-based resource
  • REV-, to adapt their “Pop Squad” model to training youth to learn how to become peer-educators around Popcorn Maker
  • MOUSE, to create a suite of engaging media/activities/illustrations/games that highlight webmaking as a core literacy for their network of 4000+ educators and youth participating in MOUSE Squad
  • WNYC Radio Rookies, to develop DIY video templates using Popcorn Maker that others can use to create their own videos – here’s a sample.

We also co-planned a youth laboratory experiment that was specific to MozFest and aimed to engage attending youth in a variety of activities. The goals were to create something that welcomed visitor participation, involved the collection of media (photos, video, etc.) and also served as a method to create a youth-friendly narrative about all that is “webmaker.” Thus, The Superheroes of MozFest was born.

What worked:

  • We always love an opportunity to bring Hive members together in meaningful ways, to deepen our understanding of each other’s organizations and start to identify possibilities for working together in the future.
  • Our members (adults and youth) gained a richer understanding of Mozilla’s Webmaker mission.
  • We got to make and build prototypes with lots of help from ReMos and other developers! MOUSE started to create simple metaphors for complicated web concepts (See SEO Battle Thimble project) and got some great ideas for developing webmaking badges for their youth. Radio Rookies created a new DIY video about how to use X-Ray Goggles. And Global Action Project developed an exciting first draft of the Media History Timeline using Thimble and Popcorn – several folks contributed popped versions of pop culture media that represented important/cathartic moments in their lives.

BEOFRE: Media History Time – Analog

AFTER: Media History Timeline – Web-ified

What didn’t work:

  • We might have given the Hive NYC youth a chance to lead sessions, or schedule more time for them to network and work alongside their peers – other youth attending the festival.
  • The cross-program activity, Superheroes of MozFest, turned out great, but didn’t garner as much audience participation as we’d hoped for. Too much awesome being offered and not enough hours in the day!

Hacktivate Learning

We joined forces with Laura Hilliger, and with about 75 people on the 6th floor, we began Saturday morning as an open forum where educators from across the globe pitched some of the ideas and goals they had and hoped to work on during the course of the weekend. We outlined nearly all of those pitches on the Hacktivate Learning Tumblr. There were representatives from The National Writing Project, The Tate Gallery, Beyond Access, Hive Fashion and others–some who had never tried any of the Mozilla Webmaker tools and had yet to understand what could be made possible by utilizing them, and others who hoped to make specific connections or create more-defined projects to further their mission. They were all open to working together and learning together.

All morning, introductions were made, small groups were formed, engaging discussions were underway and things got built, like this Teachers Handbook about Open Schools for Open Societies led by Chad Sansing, this Hive Fashion Thimble project that lets you remix a T-shirt design online, and this awesome Thimble project that aims to teach your grandma how to make a webpage:

Created by David Bruant and Brigitte Jellinek and illustrated by Julia Vallera

The afternoon on Saturday was open for people to either continue in their workgroups, or to attend other sessions at MozFest. We reconvened on Sunday morning and worked towards building things to showcase at the closing Demo Party.

Robert Friedman from the Adler Planetarium (Hive Chicago member) shared the following thoughts post-MozFest with his peers:

#MozFest was not like any conference I have ever been to before. It had a maker faire vibe that took the emphasis away from “experts imparting knowledge,” and promoted the attendees as “active and equal participants” in        webmaking and both physical and digital hacking.

One of the most important revelations that I had while at the event was realizing (or remembering) that I was a hacker (gasp)… and that all of us in the Hive are hackers too. Hacking gets a bad rap in pop culture and  media because it is usually linked to destructive and illegal behavior on the internet. But when I was a practicing scientist, hacking meant experimenting with materials and technology (physical or digital), building a quick-and-dirty prototype, and engaging in the process of creation and design. A “hack” was not always pretty, didn’t always work and was surely never polished, but it was innovative and taught you something new.

We also asked participants to join our Hacktivator community and to complete this short Thimble project to create a profile: Complete yours and tweet the published link to us @hivelearningnyc to be added to the gallery! Or simply sign up here.

Check out our Tumblr for more live updates from MozFest.

What worked:

  • Our open format enabled attendees to build-their-own agendas, and to self-select the projects that interested them most.
  • Productive discussions and connections led to more great prototypes and resources, and we attracted a broad range of skill sets and levels of webmaker expertise.
  • The space acted as a thematically driven hang-out and meeting area.
  • The curated mix of formal sessions and open-ended workshops.

What didn’t work:

  • Not enough days! People seemed torn to work on their projects or attend other sessions.
  • Not having deeper integration of youth in the space – we need to balance space for educators with co-mingling with youth.
  • As it was our first try, we messed up plenty but will learn greatly from the little failures and missed opportunities.

Coding for Teens

Leah helped organize sessions on the 7th Floor, that ran the gamut from MaKey Makey (physical computing) to Meemoo (animated GIF comics), and lots of fun activities in between. More to come on the learnings from that effort as well as a recap of the pre-MozFest event that marked the launch of a new partnership between Mozilla, Nesta and Nominet Trust aimed at helping to spread digital literacy in the UK.

We’ll continue to process all that is MozFest and build on the momentum from the event as we head into a year of more code parties, more Hive Learning Networks developing in cities worldwide, and more educators working together to build tools and content to help youth make the web.

Thanks again to everyone who traveled from near and far to participate. We so appreciate your positivity, your enthusiasm, your willingness to collaborate and experiment and document. We hope you’ll continue to help us Hacktivate Learning!

In the meantime, here is some additional recommended reading re: MozFest 2012.

This slideshow requires JavaScript.

Intern skillshare!

Hi my name is Eddie Hernandez, and I’m a rising 12th grader at Phillips Exeter Academy located in New Hampshire. I’m also a summer intern at Hive NYC.

Recently, I joined Wilson and Zainab–the two other Hive NYC summer interns–for a meeting with the teen interns at the Rubin Museum of Art in Chelsea.

kitchen table webmaking event

Hive NYC Kitchen Table event with Rubin Museum of Art Teens

When the groups first met, neither of us knew what we were in for, but I was sure that we were prepared to share what we had learned. The Rubin Museum, recently joining Hive NYC earlier this year, started off by showing their teen tumblr page. It was created by the interns at the Rubin as a way to “spread the word of the Rubin and also to spread the word of Himalayan art and events!” They had spent the summer posting about the museum’s exhibitions and art works. Some of them didn’t even know much about Himalayan art when they first started posting, but that wasn’t the case when it came to explaining when we came down to visit them: they were full of confidence and exuberance. Besides posting, these interns help out on tours by explaining to museum visitors the many exhibitions that they’ve come to be so familiar with.

The Hive NYC interns, trying to match them, displayed Thimble, which is part of Mozilla’s website full of tools and projects for webmaking. These projects are a way for anyone to learn the basics of HTML/CSS, the code that allows webpages to be formatted the way they are. Some of the projects are mini-games which is what grasped the attention of the Rubin interns the most.

After the brief presentations, the two separated into smaller groups that contained at least one member from each side. These three smaller groups each had different things they wanted to accomplish by the end of the day. I helped one group display music on their  Tumblr page and also learned from the Rubin intern how to make a Tumblr page as presentable as theirs. Wilson helped another group figure out how to make a game based on one of the projects, “Bunny Masher,” that would feature the Himalayan monster “Yeti”. Zainab’s group made an animated gif, which is a sequence of images that are displayed as being animated in a video-like way.

In all, the event was a huge success: the first group was able to display music on the Rubin teen tumblr page as well as teaching me how to make a pretty Tumblr page, Wilson was able to start their Yeti game and they’re going to continue working on it now with the knowledge of being able to code from some of the other projects on Thimble, and finally Zainab helped the interns at Rubin to accomplish creating a GIF of about a few seconds. This experience was like no other in the sense that there was no instructor. We separated into small groups and shared with each other about what we’ve learned during our internships.  Not only was it different, but it was definitely enriching and we hope to do this again in the future!