-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathhacktivityGrid.html
106 lines (89 loc) · 8.91 KB
/
hacktivityGrid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hacktivities</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<a href="http://webmaker.org" title="Webmaker Logo"><img src="http://stuff.webmaker.org/teach-assets/kits/images/webmaker_logo.png" alt="webmaker_logo"/></a>
<hgroup>
<h1>Hacktivities</h1>
<h2>for Webmaking</h2>
</hgroup>
<nav>
<h3>What this page is</h3>
<p>This page lists all the Icebreaker, Diving In and Hands on Hacking Hacktivities found in the various Hacktivity Kits.
</p>
<div class="hacktivityNav">
<a class="button" href="kits.html">Back to the kits</a>
<a class="button2" href="crashCourses.html">View Additional Resources</a>
</div>
</nav>
</header>
<section class="gridSelection">
<a name="icebreaker" class="anchor"></a> <h1>Icebreakers</h1>
<p>
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!</p>
<a href="GogglesPrototype/ib_robotdance_goggles.html"><img src="GogglesPrototype/static/ib_goggles/step02_dancecardRobot.png" width="80px">How to Hack: the Robot Dance</a>
<a href="GogglesPrototype/ib_boardgame_goggles.html"><img src="GogglesPrototype/static/ib_goggles/step03_boardgame.png" width="100px">How to Hack: a Boardgame</a>
<a href="ThimblePrototype/ib_strongwind_thimble.html"><img src="ThimblePrototype/static/ib_thimble/step03_strongwind_thimble.png" width="100px">A Strong Wind Blows: for the Open Web</a>
<a href="PopcornPrototype/ib_storyrules_popcorn.html"><img src="PopcornPrototype/static/ib_popcorn/step03_writetheRules.png" width="100px">Write the Rules: Procedural Storytelling</a>
<a href="PopcornPrototype/ib_spectrogram_popcorn.html"><img src="storycamp/static/ib_popcorn/step04_spectrogram.png" width="100px">Spectrogram: for Interactive Video</a>
<a href="PopcornPrototype/ib_scriptshell_popcorn.html"><img src="PopcornPrototype/static/ib_popcorn/step02_writetheRules.png" width="100px">Create a Script Shell: Visual Mindmapping</a>
<a href="storycamp/week02/ib_mediamesh_popcorn.html"><img src="storycamp/static/ib_popcorn/step03_mediaMesh.png" width="100px">Media Mesh: History's Web</a>
<a href="storycamp/week03/ib_genderremix_popcorn.html"><img src="storycamp/static/ib_popcorn/genderremixer.png" width="100px">Make a Mashup: Gender Remixer</a>
<a href="storycamp/weeks05and06/ib_collaborativeMindmapping_popcorn.html"><img src="storycamp/static/su_popcorn/step01_openPopcornProject.png" width="100px">Collaborative Mindmapping</a>
<a href="GenOpen/ib_genOpen_brainstorm.html"><img src="GenOpen/static/ib/step01_writetheRules.png" alt="step01_writetheRules" width="90px">Brainstorming Ideas</a>
<a href="GenOpen/ib_genOpen_desertisland.html"><img src="GenOpen/static/postitwall.png" width="100px">Desert Island Websites</a>
</section>
<section class="gridSelection">
<a name="divingin" class="anchor"></a><h1>Diving In</h1>
<p>
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.</p>
<a href="GogglesPrototype/su_hacktheweb_goggles.html"><img src="GogglesPrototype/static/su_goggles/step01_installGoggles.png" width="100px">Hack the Web: with the XRay Goggles</a>
<a href="tascasaurus/su_gsg_goggles.html"><img src="GogglesPrototype/static/su_goggles/step04_installGoggles.png" width="100px">Hack Great Science for Girls: with the XRay Goggles</a>
<a href="ThimblePrototype/su_internetdefense_thimble.html"><img src="ThimblePrototype/static/su_thimble/step03_thimbleInterface.png" width="100px">Hack the Web: with Thimble</a>
<a href="OpenNewsPrototype/su_remixthenews_thimble.html"><img src="OpenNewsPrototype/static/su_thimble/step02_projectsThimble.png" width="100px">Remix the News: with Thimble</a>
<a href="GenOpen/su_genOpen_howopen.html"><img src="GenOpen/static/postitsplit.png" width="100px">How Open is the Web we use?</a>
<a href="GenOpen/su_genOpen_parse.html"><img src="GenOpen/static/su/step02_prototyping.png" width="100px">Parsing Ideas</a>
<a href="storycamp/week04/su_howto_thimble.html"><img src="https://www.webmaker.org/media/partner_media/projects/howto-large.poster.jpg" width="100px">Make Your Own How-to: with Thimble</a>
<a href="PopcornPrototype/su_hackvideo_popcorn.html"><img src="PopcornPrototype/static/su_popcorn/step02_groupPopcorn.png" width="100px">Hack Video on the Web: with Popcorn Maker</a>
<a href="storycamp/week03/su_popup_popcorn.html"><img src="storycamp/static/su_popcorn/step03_PopcornInterfaceMedia.png" width="100px">Remix Context: with Popcorn Maker</a>
<a href="storycamp/week02/su_commercialremix_popcorn.html"><img src="http://maker.mozillapopcorn.org/storycamp/img/story/title_commercial_small.png" width="100px">Hack a Commercial: with Popcorn Maker</a>
<a href="storycamp/week01/su_hacktutorial_popcorn.html"><img src="storycamp/static/su_popcorn/step03_PopcornInterface.png" width="100px">Hack the Tutorial: with Popcorn Maker</a>
<a href="storycamp/weeks05and06/su_plantutorial_popcorn.html"><img src="storycamp/static/su_popcorn/step02_prototyping.png" width="100px">Plan: Paper Prototyping and Schematics</a>
<a href="tascasaurus/su_offline_decode.html"><img src="tascasaurus/static/blankscreen.png" width="100px">Decode the Code: Offline Hacktivity</a>
</section>
<section class="gridSelection">
<a name="handson" class="anchor"></a><h1>Hands on Hacking</h1>
<p>
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.</p>
<a href="GogglesPrototype/hh_remixathonHero_goggles.html"><img src="GogglesPrototype/static/remixpage.png" width="100px">Remix-a-thon: Defend the Open Web</a>
<a href="GogglesPrototype/hh_holidayhacking_goggles.html"><img src="GogglesPrototype/static/hh_goggles/step02_holiday_big.png" width="87px">Remix-a-thon: Holiday Hacking</a>
<a href="OpenNewsPrototype/hh_biastheNews_thimble.html"><img src="OpenNewsPrototype/static/hh_thimble/step02_remixNews_thimble.png" width="100px">Bias the News: Give New Context</a>
<a href="ThimblePrototype/hh_evilTwin_Thimble.html"><img src="ThimblePrototype/static/hh_thimble/step03_evilProfile_thimble.png" width="100px">Alter Ego/Evil Twin: the Opposite of Me</a>
<a href="PopcornPrototype/hh_culturalheritage_popcorn.html"><img src="storycamp/static/remixpage.png" width="100px">Remix-a-thon: Cultural Heritage Remix</a>
<a href="https://thimble.webmaker.org/p/fl2f"><img src="http://hastac.org/files/mouse_logo_new_0.jpg" width="100px">SEO Battle: A simple SEO Hacktivity for Youth</a>
<a href="storycamp/week02/hh_radiointeractive_popcorn.html"><img src="https://popcorn.webmaker.org/thumbnail-stopandfrisk.png" width="78px">Make it Interactive: Bring a Radio Story to Life</a>
<a href="storycamp/week03/hh_streetjourno_popcorn.html"><img src="https://popcorn.webmaker.org/thumbnail-tour.png" width="78px">Localize it: Street Level Journalism</a>
<a href="storycamp/weeks05and06/hh_buildinghowto_popcorn.html"><img src="storycamp/static/hh_popcorn/collectandmake.png" width="100px">Building the How to: with Popcorn Maker</a>
<a href="tascasaurus/hh_biodiversity_tasc.html"><img src="tascasaurus/static/leaves.png" width="100px">Remix-a-thon: Biodiversity</a>
</section>
<footer>
<a class="tag" title="Tell us what you think, tag your story with #teachtheweb." href="https://twitter.com/search?q=%23teachtheweb"><img src="http://stuff.webmaker.org/teach-assets/kits/images/converse_icon.png" width="30px"></a>
<a class="add" title="Add your own resources." href="https://webmaker.org/search?type=tags&q=templatehacks"><img src="http://stuff.webmaker.org/teach-assets/kits/images/resources_icon.png" width="30px"></a>
<a class="follow" title="Follow @MozTeach" href="https://twitter.com/mozteach"><img src="https://abs.twimg.com/a/1363285036/images/resources/twitter-bird-blue-on-white.png" width="30px"></a>
</footer>
</body>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12156376-8']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script></html>