-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathkits.html
97 lines (93 loc) · 7.13 KB
/
kits.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="webmaker:thumbnail" content="http://stuff.webmaker.org/thumbnails/thumb-toolkit-make-it-share-it.png">
<meta name="description" content="Each guide comes with an overview and some suggested activities. This page helps you understand the overarching concepts of the modular resources we've designed for you. Give it a quick read and then choose the Hacking Guide you'd like to start with.">
<meta content="guide" name="webmaker:tags">
<meta content="resource" name="webmaker:tags">
<title>How to Use the Hacking Guides</title>
<link href="https://s3.amazonaws.com/stuff.webmaker.org/teach-assets/kits/styles.css" rel="stylesheet">
</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>Hacking Guides</h1>
<h2>for Webmaking</h2>
</hgroup>
<nav>
<h3>Pick a session, any session!</h3>
<p>Each guide comes with an overview and some suggested activities. This page helps you understand the overarching concepts of the modular resources we've designed for you. Give it a quick read and then choose the Hacking Guide you'd like to start with.<br/>
</p>
<div class="hacktivityNav">
<a class="button" href="https://webmaker.org/search?type=tags&q=activity">View All Activities</a>
<a class="button2" href="https://webmaker.org/search?type=tags&q=resource">View Additional Resources</a>
</div>
</nav>
</header>
<section class="kitSelection">
<!--<div>
<a href="GogglesPrototype/index_goggles.html" title="XRay Goggles Logo"><img src="images/goggles.png" alt="XRay Goggles" /><p>X-Ray Goggles Kit</p></a>
</div>-->
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-popcorn" title="Popcorn Logo"><img src="http://stuff.webmaker.org.s3.amazonaws.com/thumbnails/thumb-toolkit-popcorn.png" width="150px" alt="Popcorn"/><p>Popcorn</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-thimble" title="Thimble Logo"><img src="http:///stuff.webmaker.org/thumbnails/thumb-toolkit-thimble.png" width="150px" alt="Thimble"/><p>Thimble</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-thimble-for-journalists" title="Open News Logo"><img src="http://stuff.webmaker.org.s3.amazonaws.com/thumbnails/thumb-toolkit-thimble-for-journalists.png" width="150px" alt="Thimble for Journos"/><p>Thimble for Journalists</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-online-storytelling" title="Online Storytelling"><img src="http:///stuff.webmaker.org/thumbnails/thumb-toolkit-online-storytelling.png" width="150px" alt="Online Storytelling"/><p>Online Storytelling</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-revolutions-in-media" title="History of Media"><img src="http:///stuff.webmaker.org/thumbnails/thumb-toolkit-revolutions-in-media.png" width="150px" alt="Revolutions in Media"/><p>Revolutions in Media</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-remix" title="Remix"><img src="http:///stuff.webmaker.org/thumbnails/thumb-toolkit-remix.png" width="150px" alt="Remix"/><p>Remix</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-ways-of-the-web" title="Ways of the Web"><img src="http:///stuff.webmaker.org/thumbnails/thumb-toolkit-ways-of-the-web.png" width="150px" alt="Ways of the Web"/><p>Ways of the Web</p></a>
</div>
<div>
<a href="https://mozteach.makes.org/thimble/hacking-guide-make-it-share-it" title="Make it! Ship it!"><img src="http:///stuff.webmaker.org/thumbnails/thumb-toolkit-make-it-share-it.png" width="150px" alt="Make it! Share it!"/><p>Make it! Share it!</p></a>
</div>
</section>
<section class="onePager">
<h1>The Ins and Outs of these Guides</h1>
<ol>
<li>
<h5>The Hacking Guides make it easy for anyone, anywhere, to organize their own webmaking session.</h5>
<p>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 guides are full of information and resources to help you facilitate sessions or classes that have a focus on webmaking.</p>
</li>
<li class="right">
<h5>The guides are organized around learning by making.</h5>
<p>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.</p>
</li>
<li>
<h5>We’ve included everything from activities to assessing the participants‘ progress.</h5>
<p>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.</p>
</li>
<li class="right">
<h5>Hack the Hacking Guides!</h5>
<p>The guides 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.</p>
</li>
</ol>
</section>
<section class="two">
<div class="sidebar">
<h1>Technology</h1>
<p>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 <a href="http://www.mozilla.org/en-US/products/download.html" target="_blank">Mozilla Firefox</a> or <a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Google Chrome</a>.</p>
<h5>You might run into bugs, and you can help us squash them!</h5>
<p>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.</p>
</div>
</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>
</html>