Curate your Learning through Webmaker Projects

Have you tried to learn how to code, and signed up to get weekly instructionals? Did you stick with it? Ok, did you stick with it past week four? If you did stick with it-are you proud with what you made? And, finally-if you are proud of what you made, could you show a friend how to make that web project?

In my totally unscientific poll of asking everyone who comes into my walking distance-I have learned that the answer to the majority of these questions is no. I guess that the reason that I was even motivated to ask these questions is that from my years of trying to learn how to code, I pretty much made it through the first few weeks on pure wanting-to-be-a-geek desire alone, but then lost that spark when things got complicated because I had no personal interest in the projects assigned to me and let's just say my work ethic fizzed out.

There are tons of things that you can make with the web

This got me to thinking about projects-what would be interesting to learn? In almost every class (whether it be graphic or web design) I've taken I have been asked to make the logo, business card, stationary, portfolio site suite. Frankly, since I was learning, they sucked. Doubly frankly, when I left school I had no diversity in my portfolio- but I did have a pretty damn good set of outmoded designs to send out with my resume.  But what would I have wanted to make? What would have be better for me to learn to expand my skillset. Because there are many solutions to this question-at Mozilla we are working on compiling a suite of projects to help webmakers and future webmakers sink their teeth into projects that they find interesting. In turn, the learner can curate their own making experience.

Sometimes you need a project to help you get started

A project is a useful way to frame your webmaking because it helps you to:

• Come up with ideas
• Learn something new
• Find a like-minded community
• Get motivated

So what does this mean for Mozilla? Well, in the past I have talked about the Webpagemaker-a two paned editor that will give you responsive feedback on your coding. Projects are learning challenges presented as hackable webpages that can be tinkered with inside the Webpagemaker tool.

Note: in previous blogposts I referred to projects as missions- we changed the name for many reasons, but ultimately to be in sync with other Mozilla initiates that are launching at a similar time.

In conjunction with the Summer campaign we will be launching 5 "Mozilla" projects-themed under the umbrella of Web Arcade. These are going to be game like projects that teach you the basics of html and css while you are making actual things.

Chloe Varelidi has been posting some of her brainstorms around the Web Arcade Projects.

Here is one project that we have been working on, mocked up by Chloe called Internet Famous. The idea is that a user can learn how to make their own internet meme, such as serious cat, pictured above.

Laura Hilliger wrote about one of the projects that she is developing for the Web Arcade here, the idea behind this is that you are remixing a webpage that is stuck in the 90s.

Members of Hive NYC will be working on several projects to launch in conjunction with the Summer Code Party, including Writing a Chapter of Inanimate Alice by using the X-Ray Goggles to hack a story. This will be a D.I.Y style project.

In addition to Mozilla projects, we will be working with some partners for the Summer Code Party to make their own projects. So, for example one project will be "How to customize your Tumblr" theme and another might include how to make animated gif like imagery only using HTML and CSS.

As I mentioned in an earlier post, we are also creating a pathway so that users can make their own projects and submit them to the project listing.

Yes, this is not a brand new idea, sites like Make and Instructables do it well, but the reason that Mozilla is doing it is that we have an amazing diversity of people who are working together to build a community of practice around webmaking. While that might translate to remixing, tinkering and hacking things up, it's that Nike spirit of just do it that motivates people to go, to learn and to bring a little piece of their local world into this handcrafted community and canvas that is the web.

Webpagemaker, Missions and Wireframes

Last week I shared some sneak peeks into the "Missions" project. Over the course of the week I have worked with my team and gained some clarity around the scope of the project- and surprise surprise have a ton more questions. In an effort to gain this clarity I worked closely with Michelle Levesque and sketched out some wireframes and mockups. I am going to try to walk through them here.

However, before I can do that, I would like to start this post with a fail. I made this mockup here trying to combine the "WebpageMaker" tool with the "Missions" concept and mocked that up using the openbadges.org template and came up with this:

 

After mocking it up, I showed it to people and realized that I couldn't communicate the idea simply and the feedback proved it. I was conflating two distinct things: a tool and a project/ learning experience.  So, that got me back to the drawing board (literally, I just drew this on some big paper): 

 Note: this is best viewed on my Flickr feed because I added notes so you can see what things say and mean.

This wireframe shows two separate pages: a tool page and a projects page. Let's start by going down the "Tool" page trajectory. You start off by landing on the Webpage Maker tool page. It looks like this:

 

 The main button here takes you directly to the 2 pane editor.  The features talk about features for the tool, which for the purpose of the mock up, I made up. (note all graphics are placeholder). So, you click on the editor button and get a modal window, like this:

 

You are asked if you want to start from scratch or use a template. If you choose make from scratch you go straight to the editor and get a bare bones webpage. If you choose use a template you get taken to a Mission that asks you to build a webpage by using a template, more on that in a bit.  So, you then go to the editor:

 

 (it will look sorta like this. Basically the two pane editor and two buttons: share and save. Save will give you a link to the url and when you return to that url you will get the page in the editor, Share will give you this:

 

Now, let's say you just come from the Projects page (aka Missions). You start out here:

 

You have 2 options: Play or Make a mission. Let's start with playing (btw this needs copywriting). You click the "play a mission" button and get this:

 

Here you can decide which mission you want to take/make. You choose one. You either get the mission loaded into the 2 pane editor or something that is more like a recipe, like this:

 

This gives you an option to tweet your completed mission to a gallery, but it's a pretty static page with information. If you had chosen "use a template" to make your webpage from the tools page, you will get that mission loaded into the editor.  Okay, back now to the "Make a mission" button that you might have clicked on the Missions landing page. You click that and get a page like this:

 

I kept this image x-large because this feature is important. It takes users step by step through making a mission for someone else. After a user answers a question, the next step is revealed. I only mocked up a few steps here- and need to finish, but the idea is that either the user is going to get a template to hack for the editor or a form to complete for the steps and then they get their mission. Then, the user has the option to share that like they would any other site or submit it to the gallery to be remixed.  For the summer campaign, this is submitting a form and will have to be manually accepted.

 

So, if you are still with me, which you deserve some sort of badge for just hanging in here, I have some questions. The whole right side of my wireframe, seems like it is something that could actually live as part of the Make site. Essentially all the missions link off to other places, for now that's either the webpagemaker or wherever a user is directed via the DIY recipes- in the future it could also include popcorn maker. I need to figure out where this "lives" or just who owns it. Another thing you might be wondering about is badges:

 

A user will have the opportunity to get a badge at the point when they are "sharing" their project. For the summer campaign we are going to offer a Participation Badge. This badge will celebrate your involvement in the Summer Code Party. The goal is that for the Summer Code After Party we will issue evidence based and community/peer assessment badges.

So that's where I've landed for now. Tomorrow I will be meeting with the Make website team, the Learning Missions team and the Engineer team so I suspect there will be some level of iteration going on, which of course I will report back on.

Keep Calm and Code On

I love running.  That said, I am often frustrated that I am only a beginner and I have days where I just suck or moments where I can't even get motivated to get out the door.  In these moments, I often look to my community of peers for support. Sometimes, and this is possibly a running nerd confession of some sort- I look to Pinterest.  There's a plethora of inspirational quotes, photos, posters etc for runners- and runners constantly are posting this kind of stuff around them to get inspired. Things like:

 

 

Yes, they are a bit cheesy- but in a very real way they are motivating me to go out and run. I think part of it is that a poster on some level is a form of establishing your identity. I put a running poster up- all of a sudden, I'm the real deal- someone who cares about running. On another level, it truly is a constant reminder to stay focused and not lose faith in what I want to do.

I got to thinking a bit about how this same motivational strategy could be applied to webmaking and people who are learning code. Frankly, I made this connection because despite what I say, learning how to design and program for the web is new and can be hard to do. Sometimes, you just need that little dose of inspiration. I wonder, what motivational sayings we could dish out to the newbie webmaker, to keep them motivated while simultaneously allowing them to self identify as webmakers:

or....

Obviously I'm joking around on some level- but I do think that this relates to the work that we are doing on integrating badges into projects like the Missions that I wrote about earlier. I think that we need to develop a community of webmakers, and doing this means elevating role models who users can identify with,  establishing a language around the work that we do- Keep calm and code on, and as always, integrate play into our programs and initiatives.

* note: thanks to Charley Miller for wordsmithing the Keep Calm Code On poster

Beta Testing Kitchen Tables

Imagine sitting in the kitchen with your friends, hanging out, chilling and making some cool stuff on the web. That's the idea behind the Kitchen Table event type that Mozilla is in the process of Beta testing for release in conjunction with the Summer Campaign.   This past week, I did my dogfoodin' and  Beta tested the Kitchen Tables event type with my family.

The Beta testing was scheduled for a two week window, that really coincided with Passover, so I decided to take this as a positive thing and do a "Hacking the Holidays" themed kitchen table. I had done that concept as a Hack jam with Mouse, but this was more challenging because it was with- the parentals.

THE INVITE:
I asked my parents if they would be up for spending some time and making some things online with me when I visited. I created a little url based on some discussions I had with other user testers to send out as an invite. I said it would only take 30 minutes and we could have tea while we were doing it. This was a difficult sell. My parents, both retired teachers, and honestly very supportive of the work that I do and are the first people on the soapbox about teaching youth to learn to code, were very resistant. My mother, who is a web and computer enthusiast agreed to do it, and my dad said he would watch and asked if there was anything with paper that he could do. I followed all of the steps in the wiki, but I frankly think that a lot of Mozilla's efforts do not reach this older audience. In fact, I would go so far as to say that Mozilla appeals to 30 somethings - teens but does not really reach out to 40 + users. I think that my sell only worked because I forced my parents to do it.

THE KITCHEN TABLE:
So, as I said, this was pre- Passover. My parents sat with me and Adrian (the boyfriend) and I took them to my kitchen table website and decide to teach them how to hack that. It was a bit crazy because I had to move fast to keep them focused. They really weren't super into it- particularly my dad. I don't think that there was a real value add for him in terms of hanging out and doing this, other than spending some time with me. Perhaps if he had a grandchild to do this with -- ahem, not suggesting ANYTHING! -- he would be more willing because it would be an activity that they could do together. We slowly lost him and just ended up with my mom.

 

The session went alright, we essentially made a goal of hacking the "kitchen table" website to be a Passover table. The hardest concept for my mom and Adrian was to understand that every piece of content needed to be on the web to  show up. For example, they needed to put images up on flickr, or pull from an existing website. My mom really wanted to just upload an image to the editor and be done with it. This is a really important concept that I think that we need to do a better job communicating.

After about 25 minutes of tinkering and joking- my Mom came up with this:

 

All in all- it was a success! My mom shared her link with friends and family. My dad, asked if I had something for him to read with, but I have a hunch my Mom will convince him to try it out on their own time. 

WHAT WOULD I DO DIFFERENT/ NEXT STEPS:

• I would have a better ask
• I would pitch the activity more casually while I was already spending time with them
• I would bring another laptop- I forgot that my parents only had one
• I would find webpages/ things that they are already interested in and hook them there
• I would give my dad something with paper to do- already in the works for the Missions project
• I am going to send out my Mom's website to her temple community and suggest that we do a bigger meet up to teach others how they can make their own webpages

Mission: Fun

The past few weeks I have been working closely with the Mozilla learning team to brainstorm, conceptualize and design what we are currently calling missions. The idea behind this is that anyone can play or make their own mission, or webmaking design challenge.

This was a bit challenging to conceptualize because we currently do not have a platform in place to layer on the content, however this is going to be designed and implemented by this Summer. In fact, after doing several sketches and collaborating with the special ops unit of "Team Mission" I came to the realization that I could essentially repurpose a lot of my thinking around the lovebomb interface that I had been designing for the now defunct Mother's Day campaign.

Members of "Team Mission": me, Erin Knight ,  Chloe Varelidi, Laura Hilliger, Michelle Levesque, Mozillian community members, Hive NYC and Carla Casilli


Mozilla is working on creating a Webmaker Tool, which essentially will combine a bunch of components from tools that Atul Varma and I had developed over the past year, as well as integrate some new and useful things to really help anyone become a webmaker, that is - make some stuff on the web.  Let me give you a little taste of what we are thinking about for this Summer.

Imagine coming to a webpage kinda like this:
(note: this is a wireframe- nothing here is look and feel)

 

Immediately, you will have the chance to decide if you want to take on a mission in the gallery or design one yourself. If you choose to "play" a mission- you move on to the next screen, which looks something like this:

 

Here you are presented with the mission and given some tips on how to accomplish the project using a two pane editor. (The editor itself might look different- this is just me repurposing wireframes a bit).

 Then you tinker and complete the mission and move on to share your work, which might look something like this:

 

(This might even be a modal window) Here you will have several options for sharing your work, including linking or downloading all the code. 

In terms of the "Make Your Own Mission" hackable template, I haven't really gotten super far in my thinking on this, mainly because I want to see what the team comes up with as a group in terms of possible kinds of missions, however I suspect that there will be a landing page for this that is somewhat similar to the Webmaker landing. This will be a more curated experience that asks users to choose what kind of mission they want to make. Based on this weeks conversations with the team as well as The Hive, I suspect that at a minimum there will be an HTML/ CSS template (the editor), a Popcorn template, and at least one analog type template. Kind of like this:

 

In this mock up I actually put in 4 template types- 2 Analog ones, I'm not really sure about this. The idea is that "DIY recipe" is kind of like a step by step guide- something like you might see on Instructables or Make.  The "Activity" template is for a physical event or something that you have to do in person. These might be folded into the same category at some point. I am  just trying out some ideas to move the project forward. 

What's next? Well, we are working on creating a series of mini game missions for the Summer in terms of learning content. We are thinking of this as a "Web Arcade." Through the experience of prototyping and user testing the Web Arcade missions,  we will be able to iterate and define the make your own mission section of the site. Throughout all of this we will be embedding various kinds of assessment and badges.  We have developed a production schedule that will allow us to launch the project in a series of phases and have a nice cycle of concepting, prototyping, usertesting and iterating.

You can read more about the plans for this by checking out our design brief or joining our Learning Community calls. Additionally, we have created a Flickr group for the learning layer of the project. I will be updating on the blog as the project develops.