-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
263 lines (172 loc) · 12.4 KB
/
index.html
File metadata and controls
263 lines (172 loc) · 12.4 KB
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>CoderDojo Scotland | Oppi Resources</title>
</head>
<body>
<img src="img/logo_alt.png"
style="
position: fixed;
top: 15px; left: 15px; border: 0;
width: 75px;
opacity: 0.5;">
<div class="container">
<div class="jumbotron">
<h1>CoderDojo Scotland <br> @ Oppi Festival</h1>
<h2>12 April, 13:50<br>
Education Lab, Finlandia Hall, Helsinki</h2>
<h3>Get hands on with tools and resources for introducing young people to digital making.
<br>These tried and tested techniques engage learners at our CoderDojo clubs across Scotland, and are great ways to promote and develop digital skills and computational thinking.</h3>
</div>
<ul class="nav nav-pills">
<li class="active"><a href="#">Tools and Resources</a></li>
<li><a href="#badges">Open Badges</a></li>
<li><a href="#start">Start your own Dojo</a></li>
<li><a href="#social">Keep in touch</a></li>
</ul>
<h2>Tools and Resources</h2>
<div class="panel panel-default">
<div class="panel-heading"><h4>Kinect2Scratch</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-md-8">
<p><a href="http://scratch.mit.edu">Scratch</a> is a visual programming language developed by the Massachusetts Institute of Technology. It is used throughout the world of education as an introduction to programming - rather than worrying about typing skills and code syntax, Scratch allows programs to be build by connecting "blocks" of code.</p>
<p>The Kinect2Scratch library allows data from a Microsoft Kinect controller to be sent to Scratch.
This means that anyone can write programs with motion control, use gestures, make kinetic games and generally leap about having fun. This is an extension of Scratch that as well as being inspirational allows learners to explore non-traditional user input (rather than keyboard and mouse).</p>
<p>An example activity is creating a 2 player space-invader style game called "Alien Attack". To control the spacecraft you must move left and right, to fire you must throw both hands up above your head.</p>
<p>The <a href="http://scratch.saorog.com/">Kinect2Scratch library</a> was developed by <a href="http://saorog.com/">Stephen Howell</a>, a CoderDojo mentor.</p>
</div>
<div class="col-md-4">
<img class="thumbs" src="img/scratchcat.png">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>Google Blockly</h4></div>
<div class="panel-body">
<div class="col-md-8">
<p>
<a href="https://code.google.com/p/blockly/">Blockly</a> is a visual programming language developed by Google. Users drag and drop blocks of code together to make their own programs. <br/><br/>
At our Dojos we often use the Maze exercise as an introduction to digital making. This exercise is a great tool for introducing programming concepts, covering the use of IF statements and loops. <br/><br/>
The young people enjoy the fact it is like a puzzle or game, and that they progress through the levels. While the early levels at straight forward, as the game progresses they become more difficult. Level 10 is a challenge for any programmer. <br/><br/>
We normally suggest they work together and 'pair program' - explaining their tactics and algorithms to each other. This is a great tool for developing computational thinking skills.<br/><br/>
<a href="https://blockly-demo.appspot.com/static/apps/maze/index.html">Try out the Blockly Maze</a>.
</p>
</div>
<div class="col-md-4">
<img class="thumbs" src="img/blockly.png">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>Mozilla Webmaker and Meme Showcase</h4></div>
<div class="panel-body">
<div class="col-md-8">
<p><a href="https://webmaker.org/">Webmaker</a> is a web based text editor build by the Mozilla team. Using Webmaker, HTML code is presented on the left hand side and the resulting web page is displayed on the right. Learners can edit the code and see the page automatically updated with those changes.</p>
<p>This a really useful tool in our Dojos. It is web based so doesn't need any extra software installed. Also, the learners appreciate being able to see the results of their changes instantly. It gives them a sense of achievement - they can rapidly create a page to show to friends.</p>
<p>One of the most popular Webmaker templates is the <a href="https://openmatt.makes.org/thimble/meme-maker/remix">Meme Maker</a>. Learners can remix the code to build their own Meme. We have created a tool to <a href="http://coderdojo.co/stirling/">showcase</a> the Memes created by the young people. You can <a href="https://github.com/CoderDojoScotland/Meme-Showcase">download this tool</a> from our GitHub.</p>
<p><a href="https://openmatt.makes.org/thimble/meme-maker/remix">Try out Mozilla Webmaker</a></p>
</div>
<div class="col-md-4">
<img class="thumbs" src="img/webmaker.png">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>CodePen</h4></div>
<div class="panel-body">
<div class="col-md-8">
<p><a href="http://codepen.io/">CodePen</a> is another tool that allows learners to write code in the browser. Like WebMaker, the benefits are quick and visual results.</p>
<p>As well as HTML, CodePen also allows the learner to add CSS and JavaScript code. It's even possible to quickly link in common libraries and frameworks such as JQuery and Twitter Bootstrap.</p>
<p>CodePen encourages forking other peoples code. Learners can experiment and play around with code created by other developers.</p>
<p><a href="http://codepen.io/codeams/pen/IpKbs">Try out CodePen</a></p>
</div>
<div class="col-md-4"><img class="thumbs" src="img/codepen.png"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>Security & Cryptography</h4></div>
<div class="panel-body">
<div class="col-md-8">
<p>Last summer we ran two Cryptography Dojos at Glasgow Science Centre based on the idea of sending and decoding secret messages. The young coders learned about ciphers, from the Caesar cipher used by Roman Emperor Julius Caesar 2000 years ago, to RSA encryption used to provide secure internet connections for online shopping today. They also learned about methods used to break these ciphers.
<p>After breaking a few messages encrypted using a Caesar cipher "by hand", the coders were given a Python program that implemented the same cipher, but had several bits missing. During the remainder of the session they implemented the decrypt function, a function that allowed the user to specify the encryption key used, and a brute force function to enable any message to be broken quickly.</p>
<p>This code was also used during some workshops with CBBC at their "Live in Leeds" event last summer, and as part of a "Cryptography Treasure Hunt" with a group of coders from the Prince's Trust where the "treasure" was the means to save Glasgow from an attack by the Extreme Violence and Insurrection League (E.V.I.L.).</p>
<p>Mixing digital making with story telling was a great way to engage young people who had perhaps no previous interest in digital technologies. Those attending the CBBC workshop had attended because they liked the characters and the CBBC brand, and for many this was their first experience of computing coding.</p>
<p>Read more about it on <a href="http://coderdojoscotland.com/blog/310/cryptography-resources">our blog</a>, and <a href="https://github.com/CoderDojoScotland/Crypto-Dojo">download the code</a> from our GitHub</p>
</div>
<div class="col-md-4"><img class="thumbs" src="img/cryptodojo.png"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>Server Thingy</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-md-8">
<p>This is a simple tool for running a static web server on any machine. We use this in our Dojos often because it is easy to use and can be setup on any machine in a few seconds. Using this tool, the learner's machines will behave like a web server, allowing them to build and test their websites and web apps.</p>
<p>Server Thingy was built by a young developer, and CoderDojo mentor, <a href="http://j.dytry.ch/">Joe Dytrych</a>.</p>
<p><a href="https://github.com/DecodedCo/server-thingy/releases">Download Server Thingy from GitHub</a>.</p>
</div>
<div class="col-md-4">
<img class="thumbs" src="img/serverthingy.png"> <br>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><h4>App Inventor</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-md-8">
<p><a href="http://appinventor.mit.edu/explore/">App Inventor</a> lets learners develop applications for Android phones and tablets using a web browser. Like Blockly and Scratch, App Inventor uses a visual programming language. Learners connect blocks together build their own apps.</p>
<p>The apps run on most Android phones, or through an emulator, and finished apps can even be released on the Google Play store. </p>
<p>App Inventor was originally created by Google, and is now looked after by the Massachusetts Institute of Technology</p>
<p><a href="http://appinventor.mit.edu/explore/">Try out App Inventor</a> and <a href="http://appinventor.mit.edu/explore/ai2/beginner-videos.html">watch the beginner tutorials</a>.</p>
</div>
<div class="col-md-4">
<img class="thumbs" src="img/appinvent.jpg"> <br>
</div>
</div>
</div>
</div>
<hr>
<h2 id="badges">Recognising Learning - Open Badges</h2>
<div class="row">
<div class="col-md-6">
<p>The <a href="http://openbadges.org/">Mozilla Open Badges</a> project issues digital badges to recognise skills and achievements. It allows you to display online real-world achievements and skills which may help with future career and education opportunities. </p>
<p>The badges issued by the Open Badges project are digital indicators of skills learned inside or outside the classroom. Last year, CoderDojo Scotland joined other companies like NASA and Disney-Pixar, and became an Open Badge issuer.</p>
<p><a href="http://coderdojoscotland.com/blog/203/open-badges-at-coderdojo-scotland">Read more</a> about how we design and issue our Open Badges.</p>
</div>
<div class="col-md-6"><img class="thumbs" src="img/openbadges.png"></div>
</div>
<hr>
<h2 id="start">Start your own Dojo</h2>
<div class="row">
<div class="col-md-6">
<p>CoderDojo is a free and open movement, and relies on support from a community of volunteer mentors and technology champions. Without our volunteers, there would be no CoderDojo.</p>
<p>So, the CoderDojo team have created an online guide to assist you in getting a CoderDojo up and running in your area. You are not alone. </p>
<a href="http://coderdojo.org/"><p><button type="button" class="btn btn-primary btn-lg">Jump in at CoderDojo.org</button></p></a>
</div>
<div class="col-md-6"><img src="img/startdojo.png" class="img-rounded thumbs"></div>
</div> <!-- end row -->
<hr>
<h2 id="social">Keep in touch</h2>
<h4>Find us in the usual places...</h4>
<div class="row">
<div class="col-md-2 col-md-offset-1"><a class="social" href="https://www.facebook.com/CoderdojoScotland"><h3><i class="fa fa-facebook-square"></i> Facebook</h3></a></div>
<div class="col-md-2"><a class="social" href="https://twitter.com/coderscot"><h3><i class="fa fa-twitter-square"></i> Twitter</h3></a></div>
<div class="col-md-2"><a class="social" href="https://github.com/CoderDojoScotland"><h3><i class="fa fa-github-square"></i> GitHub</h3></a></div>
<div class="col-md-2"><a class="social" href="mailto:craig@coderdojoscotland.com"><h3><i class="fa fa-envelope"></i> Email</h3></a></div>
<div class="col-md-2"><a class="social" href="http://www.coderdojoscotland.com"><h3><img id="monologo" src="img/mono.png"> Homepage</h3></a></div>
</div>
<hr>
</div> <!-- end div container -->
<footer><p>product image from PlaceIt | © CoderDojo Scotland 2014</p></footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>