hacktivityKits/index.html at develop · futuresoup/hacktivityKits · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hacktivity Kits</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
 <a href="http://webmaker.org" title="Webmaker Logo"><img src="icons/webmaker_logo.png" alt="webmaker_logo"/></a>
  <hgroup>
    <h1>Hacktivity Kits</h1>
    <h2>for Webmaking</h2>

  </hgroup>
   <nav>
    <h3>What this page is</h3>
    <p>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 Hacktivity Kit you'd like to start with.<br/>
     </p>

  </nav>

 </header>
 <section class="kitSelection">
    <div>
       <a href="GogglesPrototype/index_goggles.html" title="XRay Goggles Logo"><img src="icons/goggles.png" alt="XRay Goggles" /><p>X-Ray Goggles Kit</p></a>
     </div>
     <div>
  <a href="PopcornPrototype/index_popcorn.html" title="Popcorn Logo"><img src="icons/popcorn.png" alt="Popcorn"/><p>Popcorn Kit</p></a>
     </div>
  <div>
  <a href="ThimblePrototype/index_thimble.html" title="Thimble Logo"><img src="icons/thimble.png" alt="Thimble"/><p>Thimble Kit</p></a>
  </div>
  <div>
  <a href="OpenNewsPrototype/index_thimble_opennews.html" title="Open News Logo"><img src="icons/opennews.png" alt="Open News"/><p>Thimble for Journalists Kit</p></a>
  </div>
 </section>
<section class="onePager">
  <h1>The Ins and Outs of these Kits</h1>
  <ol>
    <li>
      <h5>The Hacktivity Kits 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 kits 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 kits 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 Hacktivity Kits!</h5>
      <p>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.</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>
</body>
</html>