This hack jam uses a series of challenges to help youth become Moyo Ambassadors. The first three sessions serve as training to introduce HTML, CSS and Hackasaurus and prepare participants to facilitate their own hack jam. In the last session, participants invite peers and run their own hack jam. This wiki page includes the agenda for this event. Below, you'll find relevant blogposts that detail how the event was run in December 2011 at Mouse

There are 4, 4 hour sessions:

• Intro to hacking, "open web" and intro to X-Ray Goggles
• Deeper dive into HTML and CSS - design challenge
• Facilitation and event planning- "how to run a hack jam"
• Practice event with peers

Session 1: Intro to hacking, "open web" and intro to the X-Ray Goggles

Big Ideas of the Day:

• Hacking means changing a piece of something to create something new
• You can hack physical things- like board games or you can hack the web
• Web designers get inspired by existing websites to come up with new ones
• Webpages are written with HTML and styled with CSS
• Websites are dynamic systems that are easily changeable
• A website designer works with inter-related parts
• The open web is a place where anyone can participate and contribute

(45 min) Challenge: Define Hacking

(15 mins) Mindmapping activity: What words come to mind when you think of the word "hack"? Collaboratively create a mindmap and save it to bring out on the last day of workshop

(30 mins) Break into teams and create a tweetable definition of hacking

Parameters: Must have back up references:

• 3 positive articles/ web assets from reliable sources that define hacking
• 3 negative articles/ web assets from reliable sources

After teams have created their tweetable definitions, lead a 'discussion'!

(1 hour) Challenge: Hack a Board game/ or Hack a robot dance

The goal of this activity is for learners to understand that hacking has always been a key element in the creative process, and that it is a constructive collaborative activity, not a destructive one. Participants will learn how to hack a popular dance from the 80s to design a brand new dance.

How to play

• Participants form a circle
• Play the “How To Do The Robot (Totally Rad 80’s Dances)” video
• Facilitator tells the group that they are now going to hack the dance, starting with examining all of the steps in the dance
• Everyone practices the dance in its entirety
• The first participant finds one step of the dance to change
• The participant demonstrates the hacked dance in the circle
• The person to the left of the initial hacker must hack that move or repeat it
• If hacking the move, the person has to demonstrate the new dance move they are adding or replacing
• Repeat until everyone in the circle has danced
• When the last person in the circle has made their hack, everyone in the whole circle needs to try out the new dance.

Discussion After the dance party is over, direct guiding questions to participants to help identify the stepsto hacking. Write definition/key words that participants come up with on the board/poster paper.

• How did you hack the dance? Discuss the rules — what were they?
• What made the dance fun? Discuss creativity and co-developing the project.
• What actions were you doing while hacking?
• Discuss the mechanics and dynamic systems — Break down the activity, first they looked at the dance, then they changed bits and pieces of it until it became a new dance. One person made a change which affected the entire dance.
• What was the goal of the activity? Discuss goal — creating a new dance by hacking
• How do you think hacking a dance will be similar to hacking a website?

(30 min) Open Web Overview

Fill in the blanks (index cards- save for day 2):

• I think that ___________ makes the web special
• I think that ____________ makes the web difficult to use.

Discuss what makes the web unique:

• Participation/Community
• Contribution

Show "View Source" and explain that the web was created so that anyone can see how it was made and remix that content

(15 min) Challenge: Hack your first Webpage

1. Install Goggles
2. Turn on goggles to inspect webpages Have participants try to guess what element tags mean
3. Remix a paragraph tag
4. Share hacks

(45 min) Challenge: Choose any webpage to hack

At the end of the session, we have to guess what page you hacked so try to change as many things as possible including:

• image tags
• paragraph tags
• styles

Distribute cheat sheets
HTML/CSS Cheatsheet
Xray Goggles Cheatsheet

(30 min) Shareout and overview of gameplan for next 3 sessions

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

Big Ideas of the Day:

• HTML is a language used to tell computers how to build webpages so that humans can consume them
• CSS means cascading style sheets
• Parts of a webpage include HTML, CSS, graphic assets and text content
• The combination of an opening tag and its corresponding closing tag and the content in between is called an element
• It is important to write code following standards so that it is accessible to different kinds of users
• There are resources on the web for webmaking

(1 hour) Challenge: Create a Superhero of the Open Web

Go back to your I think __________ makes the web special/ difficult to use cards and choose one card which will be the aspect of the web you are going to defend or compete against Create a superhero identity to protect the open web: (5 min) Create a bio for your superhero. Turn to your partner and come up with a nemesis. Parameters:

• The superhero must have a name and visual representation
• The superhero must have a biography
• What are his/her superpowers?
• How did he/she get them?
• How do his/her superpowers help to protect the web?
• Does the superhero have a nemesis or face a particular challenge?

Hack into a news site using the Goggles to write a story about how the character saved or protected the open web

Put the content on a webpage that was created or hacked and present it to the group at the end of the day.

Superhero Pitch presentations: show us your superheroes.

Discussion:

• What ingredients make up a webpage?
• Draw out a wireframe
• Parts of a webpage include HTML, CSS, graphic assets and text content
• When writing HTML, what makes up an element?
  • The combination of an opening tag and its corresponding closing tag and the content in between is called an element

(2 hours) Challenge: Create a How To Website

Make an instructional Website to teach someone something that you are an expert at (ie: tying your shoes, playing XBox etc) Process:

• Research Your subject
  • and collect assets
• Identify your User
• Structure
  • information architecture
• Wireframing
  • Vocab:
    • Interface
    • Navigation
    • Header
    • Body
    • Footer
• Tone Mood and Atmosphere
• Visit: http://toolness.github.com/webpage-maker-prototype/
  • Choose one template to change

Discussion: How do we critique a webpage? (write out on the board)

• Have participants present their sites and try out their how tos (if possible)
• Do a group critique

Bonus Challenge: Create a Webpage for a vision impaired user

A vision impaired user has to use a screen reader to "view" a webpage. Let's take a few minutes to check out what a screen reader does. Discussion:

• What do you think about the screen reader?
• How would you go about designing a website for a visually impaired user?
• How would you change your current webpages to accommodate that user?
• What are web standards?
• Why are they important?

Session 3: How to Run a Hack Jam

Big Ideas of the Day:

• A Hack Jam is an event where people collaborate to make stuff for the web
• When planning an event you should choose a theme and set learning goals
• To design a lesson or event plan you need to break down the learning goals into steps
• Running an event means accounting for all the details
• Working in the open means collaborating and sharing your process and products

Facilitation Overview: Event planning: Overview of the 5 steps to a successful jam:

1. Preparation
2. Setting Goals
3. Designing the Plan
4. Set up for Success
5. Work in Teams and Share

• As a group, discuss the logistics that we know about the event
  • How many people?
  • Where will it be held?
  • What is the duration of the event?
  • Has the event already been publicized? If so how?
  • Is there a sign up?
    • eventbrite?
    • lanyrd
• Discuss what the theme for the event could be
• Discuss taking on different kinds of roles for the event
  • MC's
  • Activity Coordinator: Ice breaker
  • Activity Coordinator: How to hack
  • Roaming Mentors
  • Publicity and/ Documentation

Challenge: pitching Hackasaurus

How can you describe the project and your role as a Mozilla Youth Ambassador to a friend or a stranger? Come up with a 5 minute or less "pitch"

Topics:

• What is Hackasaurus?
  • Guide them to look at the talking points in Hacktivity Kit
• What is special about the web- and why you should learn to code?
  • Guide them to look at slide show on Hackasaurus site
• We are going to film you.

Challenge: Create an ice breaker with the "power up cards"

Give each participant 3 cards- a Goal, Mechanic and Concept card. The goal and concept cards were filled out in advance but the youth came up with the concept for the final activity. Example: The Goal card says "Hacking", the Concept card says "Hack a Tweet. We'll send out a tweet, and you hack it". Participants filled in the Mechanic card with "tweeting". The final activity becomes "Tweet out a hacked tweet."

Session 4: Practice event with peers

• Tech Setup
• Practice Run

Peer facilitation: Challenge: Help a peer learn how to use the X-Ray Goggles

Break up into pairs and take on roles- one person pretend that you are learning the tools for the first time, act as computer illiterate as you want- the other person will have to trouble shoot and help you- without touching your computer. Do that for 15 minutes and then switch roles.

Youth Run Hack Jam

The Moyo Ambassadors will now run their hack jam for their peers.

• Do a post jam debrief- review the mindmap
  • talk about what went well and what didn't go so well in the jam
  • talk about next steps:
    • blog
    • their role as moyo ambassadors

Relevant Blogposts

• Hacking Your World: MoYo Ambassadors
• Transitioning from Hacking to Webmaking
• Hack Jams for Youth, by Youth
• Hacking the Holidays

Need help?

While you don't need anybody's permission to organize a webmaker event, we have a team of passionate people ready to help you with planning and answer your questions.

• Let us know you're interested or thinking about organizing an event.
• Let us put you in touch with others in your region who are part of the Mozilla network
• Let us help you in making use of this event kit, and making it better in the process

Join the Webmaker community call or email michelle — at — mozillafoundation — org with questions, suggestions, or hacks!

Tell us how it went!