Demo: Getting Badges in to Thimble

Lately we've been preoccupied with getting a working proof of concept prototype for issuing badges in the Thimble and Popcorn editors. As I've talked about before, badges give you the opportunity to gain embedded assessment and real time feedback during your web making activity.  Our goal is to get badges into Thimble by the Mozilla Festival, so we really needed a proof of concept as a jumping off point for us to move forward with iterating. Here is a demo of that prototype made by myself and Atul Varma:

You can check out the actual prototype:  here: http://thimble-badges-movie.toolness.org/

The prototype doesn't represent the look and feel or the user experience design, however it does explore all of the different components of getting a badge within the editor and allows us to see what the touchpoints are for the end user.

Mobile Webmaking Concept : Meeting Makers Where They Are

A few months ago I was at a Hive NYC Summer Code Party pop up at the YMCA. It was the dog days of summer hot and youth came to visit us in the gymnasium to hack on computers after a full day of swimming, running and all sorts of outdoorsy goodness. It struck me that asking them to stop what they were doing and go on computers to learn how to code was a bit counter intuitive - and certainly not meeting youth where they are. If we are going to be engaging the "next generation of webmakers" we need to meet youth where they are,  be flexible and mobile.  As we know--- the web is not just accessed from a single computer- but from many different kinds of devices.

So, long story short- after some additional thought provoking conversations with Mark Surman about the possibilities of mobile- I came up with this concept sketch for what is kind of like a swiss army knife mobile concept that combines Thimble, the X-Ray Goggles and Popcorn functionality in a mobile device.  I'm going to walk you through the concept sketch, but you can also see it on Flickr

 

A user has the option to take a photo, video, audio or text message with their mobile device

 

She has the option to turn the {image} into a webpage

She gets prompted to choose a template from the mobile projects gallery. 

(reference: Webmaker projects) 

 

Now she has the ability to touch page elements

    and edit- just like she would with the X-Ray Goggles

 

She now can share the webpage

 

by clicking on the actual url or sharing directly on the social network sites 

(similar functionality, ui controls etc to Thimble and Popcorn "publish")

Now she has the ability to also edit the webpage (on the phone eventually) but also on the Thimble online web editor.

 

If you have an android phone, you can try out a proof of concept prototype of this by visiting http://tmc.toolness.org

Atul Varma created the working prototype. Be careful though, because this is a prototype the images are set to save for only 24 hours.

What's next?  While this is really only an experiment,  I want to iterate on this a bit so that it can open up the door for more collaborative webmaking--- think: webmaking with friends (a la Words with Friends) where you can collaboratively work on a webpage with a friend all within your mobile device. I would also like to see if I can run a session on this at the next MozFest in London. 

Atul and I previewed this for the first time yesterday at the Mozilla All Hands meet up in Toronto. While I am here, I would love to talk more to the fab Firefox mobile team to pick their brains and see if I can leverage any lessons learned from them.