Portfolio Design Workshop

Yesterday I went to a portfolio workshop for Hive NYC members at the Brooklyn Public Library. The workshop was run by Julia Vallera and the goal was to help people think through the process of developing content to showcase projects created within the Hive, however, the it ended up being so much more. By the end of the day, participants were helping members of the Hive HQ iterate on their portfolio application form, and started to articulate the need for tools that support an innovation framework.

Lifecycle of a Project 
Workshop participants reviewed the timeline of a project from exploration to the phase where you might be sharing out learnings (the portfolio touchpoint). Julia used this chart which compares the creation cycle to the lifecycle of water (how amazing is that?!). Particpants articulated that while there are lots of touchpoints and feeback loops after something has been created, there is a real desire for in-progress community support and reflection.

Portfolio template:
Participants used this template to start developing out their project portfolio piece.  Some feedback that Hive members gave is that it would be awesome if they could be developing the content throughout their making process. Additionally, they explained that it was really important to be able to identify who the author of the content was and in turn, who that author was "speaking to" via the medium of the portfolio.

Opportunity!
After listening to Hive members talk for a few hours and taking notes (below), I realized that there's a real opportunity to support what Brian from Beam Center referred to as a "framework for innovation" and what Leah from the Hive called a "living archive of process." 

I am going to tinker with Atul, Kat, Chris and the rest of the Hive community to think through what this could be, but overall I found this workshop inspiring and am eager to start noodling in this opportunity space. Some initial thoughts is that we should think through what a process dashboard and process project profile could look like. Here's what I sketched while at the workshop, but am going to dive deeper this week. 

Transitioning from Hacking to Webmaking

Today was the second HIVE Mozilla Youth Ambassador training at Mouse. Today was focused on making that pivotal move from hacking bits and pieces of the web with the X-Ray Goggles to designing webpages with HTML and style. This was the first time that I have ever lead a followup workshop to the initial "hack jam" type workshops where participants learned about the open web, what we mean by "hacking" and an intro to the Hackasaurus tools. For me this workshop is very important because it moves from the "a ha" moment that many users have when using the googles to look under the hood of a webpage, to the "roll up the sleeves" and get to work phase. Or, as Mimi Ito might say- from messing around to geeking out.


We started out by stretching our content creation muscles with the Superhero Design Challenge. Participants were asked to look back at the "I think X makes the web special" and the "I think that X makes the web difficult to use" brainstorms that we did in session 1. They chose one aspect of the web to defend or compete against if they were a Superhero of the Open Web. They then used this as the basis for creating  a short web- ready biography for their fictional superhero of the open web. We discussed what makes a good bio as well as what makes for good writing on the web.

The youth presented their stories:

"Captain  Super wall-  he has the power to throw fire balls at villains how try to cross the wall. A long time ago in a far school named cyber squad. were super wall a student was elected to go visit one of the most advanced technology in the hold city, but something when wrong in it’s visit. he touched  one of the controllers and he  when into  cyber world. it took him to  firewall city. where his mission is to let good information go in and burn bad things. "- by Jose

Then, they paired up and created an arch nemesis for their partner's superhero. Here is Captain Super Wall's arch nemesis, Title Wave:

"Title Wave sends title waves of info that is not needed does that because he thinks all info is good and also thinks that all info should have equal rights " - by Youssef

Now that they had bios, they were ready for some publicity! They went into online news organization sites and remixed the pages to include stories of their characters saving the day, or ruining the day as it were.   The youth had a great time taking photos with Photobooth on their computers and doing post production and image manipulation in Aviary:

They remixed the html and style with the X- Ray Goggles and presented their projects and talked a bit about how they trouble shooted problems with the coding.

We then discussed the various components that make up a webpage, including:  HTML, CSS, graphic assets and text content and reviewed that the combination of an opening tag and its corresponding closing tag and the content in between is called an element. 


The final challenge for this workshop was to make an instructional "how to" webpage from a template- without the goggles. In order to do this, we all came up with things that we we experts at- we had a peanut butter and jelly maker, a hand turkey illustrator, a good music connoisseur!  I gave everyone a crash course in web DESIGN. We talked about the importance in identifying a user and designed information architecture as well as wireframes for all of the sites.

Participants used a prototype that Atul Varma and I worked on as a spin off of the Hackbook that Anna Debenham created to help users craft webpages from templates.

In the end, everyone made the "how to" pages and we all critiqued the structure, style and design of each presenters work.

 How to Sleep


Overall the workshop was a  success - we user tested old and new tools as well as curriculum and workshop participants came a way with 2 webpages that they made in a stretch of 4 hours!

Next Up:  How to Run a Hack Jam on Friday.

Hacking your World: HIVE MoYo Ambassadors

Yesterday I lead the first of a series of 4 hour intensive learning labs at Mouse. This series of workshops will train youth to become what I am calling Mozilla Youth Ambassadors (it's a working title). That means that youth will learn Hackasaurus, HTML, CSS and facilitation in order to run hacking events and/or clubs. You can follow our group blog here.

The overall structure of the workshops will be:

Session 1: Intro to hacking, “open web” and intro to X-Ray Goggles

Session 2: Deeper dive into HTML and CSS – design challenge

Session 3: How to run a hack jam

Session 4: Practice jam with peers

Yesterday the teens came in and we started out by mind mapping. This gave us a chance to make sure that we were all on the same page when we talked about hacking, tinkering and coding.The teens paired off and responded to a challenge to define hacking in a tweet. Here are their final definitions:


We decided to test their definitions. The next challenge was to hack a board game. Our two teams chose to hack tic tac toe (which became Finger Tac) and monopoly (which became Hackopoly). The teams wrote new rules and then playtested each others games.

Throughout the course of the activity, we talked about our process and what options we had in terms of hacking the games.


After a break we talked a bit about what makes the web unique. As a group we came up with a list of things that make the webs special and things that make the web difficult to use:
We then talked about how the web was designed to be participatory and collaborative. We looked at a slide show that I created as part of the Hacktivity kit. It was nice to user test that- it worked really well. I think I am going to change some of the slides about installation because they are outdated since we changed the interface for the tools.

After a brief intro to the X-Ray Goggles, the teens hacked Google, and then I challenged them to hack a website of their choosing. The goal was to make as many changes as possible to hide the identity of the original site.

The teens hacked facebook, Tumblr, the NYC MTA page, Twitter, Apple and even the Mouse page!Our next workshop is tomorrow. We will be learning HTML and CSS and moving from hacking to webmaking!

CUNY on Wheels, PS 43, Rockaway Waterfront Alliance and... OCEANLAB

Yesterday we had a great day at the beach with students from PS43Q. I ran 4 Oceanlab workshops and had the help of my mother, Rose Klein- DOE educator. The workshops went well. Each time I ran the workshop, I became a little bit more comfortable working with students and I felt that much more confident presenting the material. Not being an educator myself, I truly admire the way that teachers can calmly talk to children - without talking down to them, or being intimidated by them. Regardless, I introduced the oceanlab website to approximately 100 students and got some great feedback. I learned that students in this school tap into the social networks of facebook, myspace and twitter. Many use the cell phone as means to search the internet throughout the day.

In a formal setting- such as this classroom on wheels- students were most concerned about learning where they could go to learn how to swim. This makes me think that I need to add more links and informal "lessons".

I am thinking of modifying the Oceanlab site to include areas for research and representation of the informal activities- but then again, I could rely on a facebook page to communicate that content as well.

Here are some photos from the day. I really enjoyed the experience of this mobile learning vehicle and am already talking more with CUNY on Wheels to plan our next event.
Look how neat the bus was!


Water safety learning in action.
We parked the bus right next to the boardwalk.

This is Norma Coleman James, Assistant Director of CUNY on Wheels.