Wednesday 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.
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. We chose one aspect of the web to defend or compete against if they were a Superhero of the Open Web. They we 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.
Everyone 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, we paired up and created an arch nemesis for our 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 everyone had bios, we were ready for some publicity! We went into online news organization sites and remixed the pages to include stories of our characters saving the day, or ruining the day as it were. We had a great time taking photos with Photobooth on our computers and doing post production and image manipulation in Aviary:
We remixed the html and style with the X- Ray Goggles and presented projects, and then talked a bit about how to 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.
In the end, everyone made the “how to” pages and we all critiqued the structure, style and design of each presenters work.
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