-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·117 lines (102 loc) · 6.81 KB
/
index.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
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="Laura Hilliger">
<title>Participatory Learning Materials</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="css/jumbotron.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Participatory Learning Materials</a>
</div>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Let's Use Participatory Methodologies!</h1>
<p>These learning materials are for co-design and participatory workshops. "Participatory" means that a workshop invites input from participants. Instead of "presenting" information, the facilitator asks participants to help solve problems. These methods will help you collaborate, teach, learn and produce anything you need to.
</p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<p>Using participatory practices leads to better solutions, more inspiration and more learning. <strong>Creation isn’t passive, and "participatory" does not mean formless.</strong> Many of these resources were developed for the #TeachTheWeb Community at Mozilla. We wrote, tested and rewrote these methods to be applicable in any workshop or meeting.</p>
<p>These materials fall into four categories. Workshop Agendas use a variety of the other resources to reach specific outcomes. How-tos are practical guides. Icebreakers are activities to start thematic conversations, brainstorm or plan actions together. Remix projects are HTML/CSS based projects that participants can remix for their own campaigns.
</p>
<p>This is an open project. <a href="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/LauraHilliger/learning-materials">Check out the Github repo</a>! <a href="https://github.com/LauraHilliger/learning-materials/issues">File issues</a> for problems, to suggest things to include or to share your stories of success. <a href="https://laurahilliger.com">Or get in touch on Twitter</a> ;)</p>
</div>
</div>
<div class="row frontPage">
<div class="col-md-3">
<h3>Agendas</h3>
<img src="https://farm3.staticflickr.com/2893/10519630245_ee3d6a58ec.jpg" alt="photo by Mozilla EU">
<p>Agendas should be designed for specific outcomes. Workshops should consider specific goals and objectives as well as the participants. Use these agendas as inspiration or a jump start when planning a participatory workshop.</p>
<p><a class="btn btn-default" href="agendas/index.html" role="button">View agendas »</a></p>
</div>
<div class="col-md-3">
<h3>How-Tos</h3>
<img src="https://s3.amazonaws.com/cubbyhole.robothaus.org/board.jpg" alt="design by Jess Klein" width="95%">
<p>How to host a hack jam, how to freestyle facilitate, how to build an OER, how to paper prototype...this category includes practical, step by step guides to make running a workshop easy and fun.
</p>
<p><a class="btn btn-default" href="how-tos/index.html" role="button">View how-tos »</a></p>
</div>
<div class="col-md-3">
<h3>Icebreakers</h3>
<img src="https:///stuff.webmaker.org/teach-assets/appmaker-images/mindmapping.png" alt="image by Sabrina Ng" width="96%"/>
<p>These aren't just "get to know each other" sorts of icebreakers (though there are some of those as well). Use these activities to start thematic discussions, gather Agenda items, brainstorm or invite participants to run demos.</p>
<p><a class="btn btn-default" href="icebreakers/index.html" role="button">View icebreakers »</a></p>
</div>
<div class="col-md-3">
<h3>Remix Projects</h3>
<img src="https://cuteoverload.files.wordpress.com/collage_1600_1200-3026.jpg" alt="image from cuteoverload" width="89%">
<p>Asking participants to make a postcard for Earth Day or to call attention to human rights violations will lead to an outpouring of creative, interesting ideas. The remix projects are prompts that can give a thematic tilt to creation.</p>
<p><a class="btn btn-default" href="remix-projects/index.html" role="button">View projects »</a></p>
</div>
</div>
<div class="row frontPage">
<div class="col-md-3">
<h3>Workshop in a Box</h3>
<img src="images/pic01.jpg">
<p>Workshop in a Box collects resources to help us become wholehearted activists. Learn to use Story as a theory of change in campaigns and other socially relevant initiatives. This project is ever expanding and includes new agendas and materials.</p>
<p><a class="btn btn-default" href="https://laurahilliger.github.io/gp-storystyle/workshopinabox/index.html" role="button">View project »</a></p>
</div>
</div>
<hr>
<footer>
<p>CC-BY Laura Hilliger and individual contributors indicated on internal pages</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>