Latest revision as of 22:15, 22 January 2013

Ins and Outs

The Hacktivity Kits make it easy for anyone, anywhere, to organize their own webmaking session. Building off pilot events run by the Hive Learning Network in New York and Chicago and content created for various Webmaker events around the world, these kits are full of information and resources to help you facilitate sessions or classes that have a focus on webmaking.

The kits are organized around learning by making. You’ll be collaborating and making things for the web using the Mozilla Webmaker tools. Each section explains things you’ll want to consider as you prepare for your webmaking activities.

We’ve included everything from activities to assessing the participants‘ progress. We have also provided sample lessons, projects and activities. And to help make your event as “plug and play” as possible, we’ve included a Resources section with documents you can print out, whether that be sample badges to give your participants or a cheat sheet for HTML.

Hack the Hacktivity Kits! The kits are meant to serve as a jumping off point for you. We hope that you will ignore pieces that you don’t feel apply and expand areas where you feel your learners need more guidance. In short, we hope that you will take the kits, hack them, run events and then let us know how we can improve the base resources.

Technology The most important thing to remember in terms of technology is that everything we create is for the web. Not only do we plan to publish on the web, but many of the tools we use, exist as web applications rather than installed programs on our computer. Because of this, it is critical that you run this program on up-to-date web browsers. Our resources are designed to support the latest versions of either Mozilla Firefox or Google Chrome.

You might run into bugs, and you can help us squash them! Let us know what problems you run into, what your experience is. With feedback from you, we will be able to make our content and tools even better. The insight and imagination that you bring will pave the way for even more webmakers to use the web in fascinating ways.

Hacktivity Kits

Hacktivity Kits are compilations of one page resources, hacktivities, readings, discussion guides and more. Following a kit will allow you to fill a half day at any webmaking event. Feel free to mix and match or exchange other hacktivities for the ones in the kits. See the Hacktivities section for other Hacktivities and ideas.

XRay Goggles Kit

These hacktivities and resources will help you teach people the basic concepts of HTML, CSS and the Open Web. Learners will tinker around with web pages using the X-Ray Goggles and remix to make their own webpages.

XRay Goggles Kit

Thimble Kit

These hacktivities and resources will help you teach people more concepts, tags, attributes, etc of HTML, CSS and the Open Web. Learners will tinker around with web pages using Thimble and remix to write their own webpages.

Thimble Kit

Popcorn Maker Kit

These hacktivities will help people learn the concept of procedural storytelling, how to use Popcorn Maker and nuances of web native film. Learners will create interactive stories using Popcorn Maker and publish them to the Web.

Popcorn Maker Kit

Storycamp Kit

The 5 Storycamp Hacktivity Kits can be used separately to teach individual modules or together to run an entire Storycamp. Learners will create interactive stories using Popcorn Maker and Thimble, and learn about media and the Web.

Storycamp Kits

Hacktivities

This section lists individual Hacktivities and briefly explains the underlying pedagogy of each Hacktivity type. Help us collect great Hacktivities by adding them to this section! Hacktivity Grid linking to all hacktivities

Icebreakers

An icebreaker is an activity that gets the blood pumping, forms connections between learners, and introduces a topic. There are thousands of different ways to introduce a topic and get learners interacting with each other. Choose one of these and hack it to be your own!

Diving In

A Diving In activity is one that gives pointed instruction to participants on tools or procedures. An example of a Diving In activity would be allowing the participants to get used to the interface of Thimble or Popcorn by having them make projects. Before learners can practically apply new skills, they need to be comfortable with the tools they'll be using and have a basic understanding of the skills they'll be sharpening.

Hands on Hacking

A Hands on Hacking activity is a practical activity that allows learners to delve deeper into the essential questions of your session. Go back to thinking of the results: what will your learners MAKE when they are done? Create a project that gives learners enough time to explore and tinker while working towards the completion of the activity.

Remixable and Remixed

These Thimble templates allow you to create your own Hacktivities. This is also the place to post your new Hacktivities or kits, so that the community can benefit from your awesome work.

Thimble template to create your own Hacktivity Share your Hacktivities with the community by placing them on the wiki!
Tascasaurus Hacktivity Hack this by putting '/edit' at the end of the URL! Submitted by Julia Vallera

@@ Line 10: / Line 10: @@
 ** [[Webmaker/Teach/WebmakingResources/HacktivityKits#Thimble_Kit | Thimble Kit]]
 ** [[Webmaker/Teach/WebmakingResources/HacktivityKits#Popcorn_Maker_Kit | Popcorn Maker Kit]]
+* [[Webmaker/Teach/WebmakingResources/HacktivityKits#Hacktivities | Hacktivities]]
+** [[Webmaker/Teach/WebmakingResources/HacktivityKits#Icebreakers | Icebreakers]]
+** [[Webmaker/Teach/WebmakingResources/HacktivityKits#Setting_Up | Setting Up]]
+** [[Webmaker/Teach/WebmakingResources/HacktivityKits#Hands_on_Hacking | Hands on Hacking]]
 * [[Webmaker/Teach/WebmakingResources/HacktivityKits#Remixable_and_Remixed | Remixable and Remixed]]
@@ Line 38: / Line 42: @@
 ==Hacktivity Kits==
-* [http://zythepsary.com/mozilla/hacktivity/ All Hacktivity Kits in HTML]
+''Hacktivity Kits are compilations of one page resources, hacktivities, readings, discussion guides and more. Following a kit will allow you to fill a half day at any webmaking event. Feel free to mix and match or exchange other hacktivities for the ones in the kits. See the [[Webmaker/Teach/WebmakingResources/HacktivityKits#Hacktivities | Hacktivities]] section for other Hacktivities and ideas.''
+* [http://hivenyc.org/index2.html All Hacktivity Kits in HTML]
 * [https://github.com/LauraHilliger/hacktivityKits GitHub Versions]
-<div style="-moz-border-radius: 10px;width:27%;height:auto;background-color:#27AAE1;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px"><h3>XRay Goggles Kit</h3>
+<div style="-moz-border-radius: 10px;width:19%;height:auto;background-color:#27AAE1;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px;"><h3>XRay Goggles Kit</h3>
-<div style="background-color:white;width:100%; margin-left:auto;margin-right:auto;">
+<div style="background-color:white;width:70%; margin-left:auto;margin-right:auto;padding-left:30%;">
-http://zythepsary.com/mozilla/hacktivity/icons/goggles.png
+http://hivenyc.org/images/goggles.png
 </div>
 These hacktivities and resources will help you teach people the basic concepts of HTML, CSS and the Open Web. Learners will tinker around with web pages using the X-Ray Goggles and remix to make their own webpages.
-[http://zythepsary.com/mozilla/hacktivity/GogglesPrototype/index_goggles.html XRay Goggles Kit]
+[http://hivenyc.org/GogglesPrototype/index_goggles.html XRay Goggles Kit]
 </div>
-<div style="-moz-border-radius: 10px;width:27%;height:auto;background-color:#F7941E;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px"><h3>Teaching, but not yet teaching webmaking?</h3>
-''Chantal leads an '''after school program for girls''' ages 8-10 and wants to get her kids interested in technology.  She's looking  for '''cool, accessible tools''' that kids can use to build fun things and '''learn about the web''' in the process.''
-[[Webmaker/Teach/WebmakingResources | Webmaking Resources]] | [[Webmaker/Teach/Inspiration | Learn More]]
+<div style="-moz-border-radius: 10px;width:19%;height:auto;background-color:#A4B5BF;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px;"><h3>Thimble Kit</h3>
+<div style="background-color:white;width:70%; margin-left:auto;margin-right:auto;padding-left:30%;">
+http://hivenyc.org/images/thimble.png
+</div>
+These hacktivities and resources will help you teach people more concepts, tags, attributes, etc of HTML, CSS and the Open Web. Learners will tinker around with web pages using Thimble and remix to write their own webpages.
+[http://hivenyc.org/ThimblePrototype/index_thimble.html Thimble Kit]
 </div>
-<div style="-moz-border-radius: 10px;width:27%;height:auto;background-color:#8DC63F;float:left;display:block;margin:1.5%;margin-bottom:4.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px"><h3>Tinkering in tech, thinking about teaching?</h3>
-''Aliyah  '''participates in a code club''' at a local community college. One evening, one of the other members shows a Popcorn demo, and they spend the next few hours hacking on popcorn.js. Aliyah is so taken with what popcorn.js can do, she decides she wants to run a Popcorn hackjam for film students.
-[[Webmaker/Teach/WebmakingResources | Webmaking Resources]] | [[Webmaker/Teach/LevelUp | Level Up]]
+<div style="-moz-border-radius: 10px;width:19%;height:auto;background-color:#F4D257;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px;"><h3>Popcorn Maker Kit</h3>
+<div style="background-color:white;width:70%; margin-left:auto;margin-right:auto;padding-left:30%;">
+http://hivenyc.org/images/popcorn.png
+</div>
+These hacktivities will help people learn the concept of procedural storytelling, how to use Popcorn Maker and nuances of web native film. Learners will create interactive stories using Popcorn Maker and publish them to the Web.
+[http://hivenyc.org/PopcornPrototype/index_popcorn.html Popcorn Maker Kit]
 </div>
+<div style="-moz-border-radius: 10px;width:18%;height:auto;background-color:#F4D257;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:1.5%;padding-top:0px;"><h3>Storycamp Kit</h3>
+<div style="background-color:white;width:70%; margin-left:auto;margin-right:auto;padding-left:30%;">
+http://hivenyc.org/images/storycamp_icon.png
+</div>
+The 5 Storycamp Hacktivity Kits can be used separately to teach individual modules or together to run an entire Storycamp. Learners will create interactive stories using Popcorn Maker and Thimble, and learn about media and the Web.
+[http://hivenyc.org/storycamp/ Storycamp Kits]
+</div>
+==Hacktivities==
+''This section lists individual Hacktivities and briefly explains the underlying pedagogy of each Hacktivity type. Help us collect great Hacktivities by adding them to this section!''
+[http://hivenyc.org/hacktivityGrid.html Hacktivity Grid linking to all hacktivities]
+===Icebreakers===
+''An icebreaker is an activity that gets the blood pumping, forms connections between learners, and introduces a topic. There are thousands of different ways to introduce a topic and get learners interacting with each other. Choose one of these and hack it to be your own!''
+*[http://hivenyc.org/GogglesPrototype/ib_robotdance_goggles.html How to Hack: the Robot Dance]
+*[http://hivenyc.org/GogglesPrototype/ib_boardgame_goggles.html How to Hack: a Boardgame]
+*[http://hivenyc.org/ThimblePrototype/ib_strongwind_thimble.html A Strong Wind Blows: for the Open Web]
+*[http://hivenyc.org/PopcornPrototype/ib_storyrules_popcorn.html Write the Rules: Procedural Storytelling]
+*[http://hivenyc.org/PopcornPrototype/ib_spectrogram_popcorn.html Spectrogram: for Interactive Video]
+*[http://hivenyc.org/PopcornPrototype/ib_scriptshell_popcorn.html Create a Script Shell: Use Visual Mindmapping to Create a Story]
+*[http://hivenyc.org/storycamp/week02/ib_mediamesh_popcorn.html Media Mesh: History's Web]
+*[http://hivenyc.org/storycamp/week03/ib_genderremix_popcorn.html Make a Mashup: With the Gender Remixer]
+*[http://hivenyc.org/storycamp/weeks05and06/ib_collaborativeMindmapping_popcorn.html Collaborative Mindmapping: Finding the How-To]
+===Diving In===
+''A Diving In activity is one that gives pointed instruction to participants on tools or procedures. An example of a Diving In activity would be allowing the participants to get used to the interface of Thimble or Popcorn by having them make projects. Before learners can practically apply new skills, they need to be comfortable with the tools they'll be using and have a basic understanding of the skills they'll be sharpening.''
+*[http://hivenyc.org/GogglesPrototype/su_hacktheweb_goggles.html Hack the Web: with the XRay Goggles]
+*[http://hivenyc.org/ThimblePrototype/su_internetdefense_thimble.html Hack the Web: with Thimble]
+*[http://hivenyc.org/OpenNewsPrototype/su_remixthenews_thimble.html Remix the News: with Thimble]
+*[http://hivenyc.org/storycamp/week04/su_howto_thimble.html Make Your Own How-to: with Thimble]
+*[http://hivenyc.org/PopcornPrototype/su_hackvideo_popcorn.html Hack Video on the Web: with Popcorn Maker]
+*[http://hivenyc.org/storycamp/week03/su_popup_popcorn.html Remix Context: with Popcorn Maker]
+*[http://hivenyc.org/storycamp/week02/su_commercialremix_popcorn.html Hack a Commercial: with Popcorn Maker]
+*[http://hivenyc.org/storycamp/week01/su_hacktutorial_popcorn.html Hack the Tutorial: with Popcorn Maker]
+*[http://hivenyc.org/storycamp/weeks05and06/su_plantutorial_popcorn.html Plan the Tutorial: Paper Prototyping and Schematics]
+===Hands on Hacking===
+''A Hands on Hacking activity is a practical activity that allows learners to delve deeper into the essential questions of your session. Go back to thinking of the results: what will your learners MAKE when they are done? Create a project that gives learners enough time to explore and tinker while working towards the completion of the activity.''
+*[http://hivenyc.org/GogglesPrototype/hh_remixathonHero_goggles.html Remix-a-thon: Defend the Open Web]
+*[http://hivenyc.org/GogglesPrototype/hh_holidayhacking_goggles.html Remix-a-thon: Holiday Hacking]
+*[http://hivenyc.org/OpenNewsPrototype/hh_biastheNews_thimble.html Bias the News: Give New Context]
+*[http://hivenyc.org/ThimblePrototype/hh_evilTwin_Thimble.html Alter Ego/Evil Twin: the Opposite of Me]
+*[http://hivenyc.org/PopcornPrototype/hh_culturalheritage_popcorn.html Remix-a-thon: Cultural Heritage Remix]
+*[https://thimble.webmaker.org/p/fl2f SEO Battle: A simple SEO Hacktivity for Youth]
+*[http://hivenyc.org/storycamp/week02/hh_radiointeractive_popcorn.html Make it Interactive: Bring a Radio Story to Life]
+*[http://hivenyc.org/storycamp/week03/hh_streetjourno_popcorn.html Localize it: Street Level Journalism]
+*[http://hivenyc.org/storycamp/weeks05and06/hh_buildinghowto_popcorn.html Building the How to: with Popcorn Maker]
 ==Remixable and Remixed==

Webmaker/Teach/WebmakingResources/HacktivityKits: Difference between revisions

Latest revision as of 22:15, 22 January 2013

Table of Contents

Ins and Outs