-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathkit.html
More file actions
752 lines (738 loc) · 47.7 KB
/
kit.html
File metadata and controls
752 lines (738 loc) · 47.7 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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hacktivity Kit</title>
<link rel="stylesheet" type="text/css" href="http://hackasaurus.org/stylesheets/normalize.css"/>
<link rel="stylesheet" type="text/css" href="http://hackasaurus.org/stylesheets/base.css"/>
</head>
<body>
<div id="header-and-content">
<header>
<div class="wrapper">
<a id="logo" href="/en-US/">Hackasaurus</a>
<a id="mozilla" href="http://www.mozilla.org/">Mozilla</a>
</div>
</header>
<section id="content">
<div class="wrapper">
<nav>
</nav>
<section class="chapter">
<header>
<h1 class="title">Introduction</h1>
</header>
<p>
Are you an educator running after-school programming? A teacher looking for a way to incorporate digital literacy into your classes? A teenager who wants to run an after-school hacking club? Well, this Hacktivity Kit is for you! Here you’ll find everything you need to help you organize, publicize and run your very own Hackasaurus hack jam.
</p>
<p>
The Hackasaurus project is part of Mozilla’s larger learning initiative to inspire people to create and prototype on the web. Hackasaurus gives everyone the power to create content and become an active participant on the web rather than just consuming it passively.
</p>
<p>
To do this, Hackasaurus has developed its own suite of downloadable tools that do everything from revealing the foundations of the web to quickly and easily creating webpages. This Hacktivity Kit explains these tools and how you can use them to facilitate youth events and/or classes that have a focus on webmaking. Use the kit, be inspired and wherever possible remix it to work in your school, class or program.
</p>
<section>
<header>
<h2>What is Hackasaurus?</h2>
</header>
<p>
Designed as an open educational resource (OER) as well as an open source project, Hackasaurus spreads skills, attitudes and ethics that help youth thrive in a remixable digital world. By making it easy for tweens and teens to tinker and mess around with the building blocks that make up the web, Hackasaurus helps them move from digital consumers to active producers who see the web as something they can actively produce, remix and make better.
</p>
<p>
Hackasaurus tools make this easy. Instead of using “kid-ified” sandboxes or artificial languages, the tools let youth hack using their favorite webpages and real programming code. The X-Ray Goggles bookmarklet enables learners to visit any webpage, inspect the code to see how it’s made, remix code to change the page and share their creations with friends. WebPad makes it simple to take the next step, creating a webpage in a matter of seconds. The Hackbook provides bits of commonly used code for easy copying and pasting. And there are more tools in the works.
</p>
<p>
Hacking is even more social and fun in a group—we call it a “hack jam”. In youth spaces such as libraries, learning centers and youth media centers, learners take part in a flexible DIY curriculum of hands-on projects and webmaking. Just like a music jam, a hack jam gives participants the chance to make something and have others riff off of their work.
</p>
<p>
Learners come away with fundamental skills like working with the basic components of website programming, HTML (hyper text markup language) and CSS (cascading style sheets); using a web browser and add-ons; prototyping and iterative design; and a conceptual understanding of the web.
</p>
<p>
Beyond technical knowledge, Hackasaurus helps develop “hacker habits”—the combination of technical and social skills youth need to become active co-creators, shape their environments and take charge of their own learning.
</p>
</section>
<section>
<header>
<h2>How to use the Hacktivity Kit</h2>
</header>
<p>
This Hacktivity Kit makes it easy for anyone, anywhere, to organize their own hack jam. Building off pilot events run by the Hive Learning Network in New York and Chicago, this kit is full of information
and resources to help you facilitate youth events and/or classes that have a focus on webmaking.
</p>
<p>
This booklet is organized around five steps that guide you through planning and hosting a hack jam using the Hackasaurus suite of tools. Each step explains things you’ll want to consider as you prepare for your webmaking activities. We’ve included everything from pointers on publicizing the event to assessing the participants‘ progress. We have also provided a sample lesson plan. And to help make your hack jam as “plug and play” as possible, we’ve included a Resources section with documents you can print out, whether that be a sign-up sheet for volunteers or a cheat sheet for the X-Ray Goggles.
</p>
</section>
</section>
<section class="chapter">
<header>
<hgroup>
<h1 class="title">Step 1</h1>
<h2 class="subtitle">Preparing for a Hack Jam</h2>
</hgroup>
</header>
<p>
Planning and facilitating a meeting or event should not be a solo affair. Invite youth and facilitators who have experience in the field and/or working with kids and team up with them to develop a game plan or curriculum for the day of the hack jam. You may also want to have some people with technical skills on hand to troubleshoot as well as to act as a creative support team.
</p>
<p>
In Resources you’ll find a recruitment poster and volunteer sign-up form you can photocopy and distribute. You’ll want to be personally well-prepared for the day as well. If you’re not already comfortable or familiar with webmaking, check out HTML and CSS Basics.
</p>
<aside>Tip: Consider approaching local universities or tech organizations to act as on-site mentors.</aside>
<section>
<header>
<hgroup>
<h2>Show the World</h2>
<h3>How to publicize your hack jam</h3>
</hgroup>
</header>
<p>
While some hack jams will have only a few learners in attendance, other events could potentially be larger in scale. This section is to help you create publicity efforts surrounding a larger scale event.
</p>
<ul>
<li><strong>5 - 10 talking points</strong> You and your core planning team will want to speak publicly about the work that you are doing. It is important to communicate your message using consistent language. One way to do this is to craft 5-10 sentences or ideas that help you to explain the focus, structure and goals of your event. We’ve included talking points to use below—feel free to borrow or put in your own words.
</li>
<li><strong>Craft a news release</strong> A news release is usually a one-page document describing your event, your organization and anything noteworthy that you might want to communicate. This document should be carefully written as reporters will refer to it when writing their stories. Be sure to include links to websites and other resources connected to your event. Finally, remember to include clear contact information so that members of the media know who to follow up with.
</li>
<li><strong>Beef up your contacts</strong> Create a mailing list and send out the news release at least a week before the event. As well as mainstream media outlets in your community—newspapers, TV and radio—think about other outlets and organizations that potentially could spread the word about your hack jam. This might be parent groups, techie meet-ups, bloggers, podcasters, tweeters, etc. If any these contacts follow up with you, remember to be honest. Relying on your talking points will help guide you through the conversation or email. To be ready for the sorts of questions they’ll likely ask, see our list of Frequently Asked Questions.
</li>
<li><strong>Leverage social media</strong> Show the world what you are up to with consistent posts to social media sites including: Facebook, Twitter, Flickr, YouTube/Vimeo and blogs. Get creative and make your own buzz in these spaces. You can make your own promotional videos or how-to tutorials and publicize these on the Hackasaurus site and/or through your own distribution channels.
</li>
</ul>
</section>
<section>
<header>
<h2>Talking Points</h2>
</header>
<p>
As you organize your jam, you will find people are curious about what you’re planning. They may be parents wondering whether to sign up their kids, potential volunteers trying to decide if they should enlist help or a school Principal who wants to get involved. Being prepared will help you get your key messages across.
</p>
<ul>
<li>Local events or “hack jams” make webmaking and digital literacy easy, social and fun</li>
<li>Hack jams are based on the premise that the web is a collaborative co-building environment</li>
<li>We’ll be using Hackasaurus tools which help make it easy for youth to explore, remix and redesign the web</li>
<li>Understanding how to tinker with code is a skill that’s in demand and makes youth more employable</li>
<li>We’re designing around the way kids learn technology, based on cultural anthropologist Mizuko Ito’s concepts of hanging out, messing around and geeking out</li>
<li>Taking part in a hack jam helps teens to develop learning competencies, including critical thinking and interpersonal skills</li>
<li>Working as part of a group or managing a project are important soft skills that employers look for</li>
<li>All of the tools and curricular content are designed to be peer learning experiences that are constructed and evolved by community input and contribution</li>
</ul>
</section>
<section>
<header>
<h2>Frequently asked questions</h2>
</header>
<dl>
<dt>What is meant by the term hack?</dt>
<dd>
When we say hack we are talking about remixing content to make new things for the web. We mean hacking as tinkering or creating something. We are not implying anything malicious or illegal.
</dd>
<dt>Why is teaching kids about the web and hacking important?</dt>
<dd>
Beyond technical knowledge, Hackasaurus helps develop “hacker habits”—the combination of technical and social skills youth need to become active co-creators, shape their environments, and take charge of their own learning. In this fast-paced world, it’s important that youth understand how to tinker with technology rather than just consume it.
</dd>
<dt>What exactly is a hack jam?</dt>
<dd>
A hack jam is a one-day (class period, afternoon or multi-day) session that makes hacking and digital literacy accessible, social and fun. Youth team up to solve design challenges through experimenting with Hackasaurus tools and learn from each other while working on actual problems. Sessions are run by local organizations and volunteers who offer a flexible DIY curriculum of hands-on projects that teach HTML and CSS.
</dd>
<dt>Who devised the curriculum?</dt>
<dd>
The curricular content for the Hack jam is based on Hackasaurus concepts and tools. Hackasaurus is the brainchild of a core team of designers, developers, researchers, curriculum experts, educators and teens. Some of the Hackasaurus curated set of tools are developed by the core collaboration team of the Hive NYC, New York Public Library, YouMedia Chicago and Mozilla, while others are designed by the open source and open education resource community.
</dd>
<dt>What age group is the hack jam intended for?</dt>
<dd>
Right now, 10-15 year olds are the core audience. However, Hackasaurus is creating resources that are flexible enough to be explored and implemented by learners of all ages.
</dd>
<dt>What happens when hack jam participants publish their hacked webpages online?</dt>
<dd>
Mozilla hosts the hacks on a separate Internet domain from the original site they were on, so they can’t be confused with the original. They are, however, publicly visible by anyone on the Internet, so don’t be surprised if they show up in search results!
</dd>
</dl>
<p><b>
For more details on this topic, please visit our online FAQ at: https://wiki.mozilla.org/Hackasaurus/FAQ
</b></p>
</section>
<section>
<header>
<h2>HTML and CSS Basics</h2>
</header>
<section>
<header>
<h3>What is HTML?</h3>
</header>
<p>
HTML is a special language used to tell computers how to build webpages so that humans can consume them. Here’s a really simple web page:
</p>
<pre><code>I can <em>hear</em> you!</code></pre>
<p>
People with vision will see this page as a single line of text with the word hear italicized. That’s because the word is wrapped in what we call tags that tell the computer to emphasize anything between them. If a blind person were listening to the webpage, a computerized voice might place emphasis on the word hear instead.
</p>
<p>
The combination of an opening tag—in this case, <em>—its corresponding closing tag—</em>—and the content in between is called an element. It's a fundamental building block of a webpage.
</p>
<p>
There are many kinds of elements. Aside from the <em> element, one of the most useful elements is <a>, which can be used like this:
</p>
<pre><code><a href="http://wikipedia.org">Wikipedia</a> is cool.</code></pre>
<p>
This element is slightly more complex because it includes an attribute, or piece of information that adds meaning to the element’s content. In this case, the href attribute tells a computer that “Wikipedia” is associated with—or hyperlinked to—the website wikipedia.org. That means clicking (or tapping) on the word will take the reader to Wikipedia’s website.
</p>
<p>
Some elements don’t actually contain any content, and hence have no closing tag, but represent special kinds of content themselves. One example is the <img> tag:
</p>
<pre><code>This is serious!
<img src="http://seriouscat.com/serious_cat_is_serious.jpg"></code></pre>
<p>
This takes an image of a cat from seriouscat.com and puts it in the webpage after the words “This is serious!”
</p>
<p>
Finally, it’s also possible to put elements inside each other, also known as nesting them:
</p>
<pre><code><a href="http://en.wikipedia.org/wiki/Lolcat">
<img src="http://seriouscat.com/serious_cat_is_serious.jpg">
</a></code></pre>
<p>
This hyperlinks the picture of a cat to the Wikipedia entry on Lolcat.
</p>
<p>
You can see a complete list of all HTML elements here: https://developer.mozilla.org/en/HTML/Element
</p>
</section>
<section>
<header>
<h3>What is CSS?</h3>
</header>
<p>
HTML gives a page structure and meaning, but it’s still quite abstract because it’s meant to be consumed by all kinds of people using all kinds of media. When you want to give a page style that’s specific to a particular medium, you use a different language called CSS.
</p>
<p>
One easy way to tinker with CSS is by adding a style attribute to elements in your HTML. The contents of this attribute are CSS properties that tell a computer how to style the element. For example, we can use the color CSS property to set text color:
</p>
<pre><code>I can <em style="color: red">hear</em> you!</code></pre>
<p>
This will cause the word “hear” to be red. We can add more properties by separating them with semicolons, like so:
</p>
<pre><code>I can <em style="color: red; background: pink">hear</em> you!</code></pre>
<p>
This will cause the word “hear” to be red and have a pink background.
</p>
<p>
Playing with CSS properties can be lots of fun. You can see a full list of them here: https://developer.mozilla.org/en/CSS_Reference
</p>
<p>
But what about when you want to make all <em> elements be styled this way? It sure is tedious to add the same style attribute to every occurrence, and this approach also makes it hard to change all the styles at once when you want to tinker. This is where CSS stylesheets come in, and they’re actually what most webpages use—but they’re also out of the scope of this tiny guide.
</p>
</section>
</section>
</section>
<section class="chapter">
<header>
<hgroup>
<h1 class="title">Step 2</h1>
<h2 class="subtitle">Choose a Theme and Set Learning Goals</h2>
</hgroup>
</header>
<p>
Identify what the big picture learning objectives are for the event so that you can begin to craft a design challenge. Remember, the technology or media should not be the theme of the jam, just a strategy for implementation.
</p>
<p>
The goal of every hack jam should be to make something. At one jam, Hacking Citizen Science on Earth Day, participants collected data about their carbon footprint, compiled that info into websites in a virtual online world, and linked their websites to an interactive game website that the New York Hall of Science had set up for the event. Meanwhile, at an Entrepreneurship 101 jam, teen designers used the Hackasaurus tools to set up websites for their budding inventions and businesses.
</p>
<p>
Set clear learning objectives and goals for out- comes so that both the youth and facilitators know
the expectations going into the jam. Reinforce this with publicity efforts and messaging around the event.
</p>
<aside>
Tip: If you are a teacher in a school, think about how you can integrate a lesson plan utilizing Hackasaurus tools into your curriculum.
</aside>
<section>
<header>
<h2>Learning Objectives</h2>
</header>
<p>
Your event or class should have specific, targeted learning objectives. Here are some of the learning goals for the Hackasaurus project you may wish to borrow or put in your own words.
</p>
<dl>
<dt>Browser basics:</dt>
<dd>skills required for “retrieving, presenting and traversing information resources on the world wide web” (wikipedia definition). These include:
<ul>
<li>Identifying where the address bar is within the browser</li>
<li>Demonstrating basic ability to tweak the address bar URL</li>
<li>Opening multiple browser tabs and switching among them</li>
<li>Mastering basic selection of content on a webpage/address bar</li>
<li>Mastering “copy” and “paste” function via keyboard shortcuts</li>
<li>Using the mouse to point, click, secondary-click (a.k.a. right click) and scroll over objects on the webpage</li>
<li>Being able to type non-alphanumeric characters like @, &, <, etc.</li>
</ul>
</dd>
<dt>Web authoring:</dt>
<dd>skills required for making content and publishing to the world wide web. They include:
<ul>
<li>Understanding the distinction between resource types, e.g. image URLs vs. webpage URLs</li>
<li>Identifying and altering element tags, which surround content and apply meaning to it</li>
<li>Remixing and creating elements, which are the blocks of code that make up webpages</li>
<li>Demonstrating the ability to write a paragraph using HTML and the <p> </p> tags</li>
<li>Defining the term CSS (cascading style sheets)</li>
<li>Defining the term url (uniform resource locator) and demonstrating ability to locate the webpage url within the browser</li>
<li>Understanding what the open web means</li>
<li>Understanding that the web can always be made less open/less free e.g. through firewalls or other methods</li>
<li>Understanding what ethical webmaking means</li>
</ul>
</dd>
<dt>Tool Competencies:</dt>
<dd>skills that demonstrate comfort and competency of the Hackasaurus toolkit, including:
<ul>
<li>Installing and using a bookmarklet</li>
<li>Installing and using an add-on</li>
<li>Inspecting the HTML and/or CSS of an element on a webpage by using the X-Ray Goggles</li>
<li>Changing webpage content locally by hacking</li>
<li>Sharing webpage content by sharing a hack</li>
<li>Demonstrating ability to impact the design of a webpage by changing compositional elements (i.e: header, footer, background, navigation)</li>
<li>Building webpages using HTML in WebPad</li>
<li>Demonstrating an understanding that there are resources available on the web for developers by using HTML or CSS snippets from the Hackbook</li>
<li>Demonstrating ability to work collaboratively by coding HTML and/or CSS with a peer</li>
<li>Demonstrating ability to create web content that is accessible for other users</li>
</ul>
</dd>
</dl>
</section>
</section>
<section class="chapter">
<header>
<hgroup>
<h1 class="title">Step 3</h1>
<h2 class="subtitle">Design the Lesson Plan</h2>
</hgroup>
</header>
<p>
Break the learning goals down into small tasks that can be incorporated into your hack jam. With your team of volunteers and/or co-facilitators think about ways to embed assessment directly into the activity so that it is both a fun design activity and a meaningful learning experience.
</p>
<p>
Start out by designing ice-breakers and opportunities to get people to contribute to the design challenge and work collectively to make something by the end of the day.
</p>
<p>
Many events allow for some dedicated instruction combined with experimentation time. We have included a sample lesson plan for you to use as is, or as a template for your event’s theme of the day.
</p>
<aside>Tip: Get familiar with some of the terms used commonly when talking about webmaking. <span class="fn">Visit the Mozilla Developer Network to learn more: https://developer.mozilla.org/en/Glossary</span></aside>
<section>
<header>
<hgroup>
<h2>Sample Lesson Plan</h2>
<h3>Superheroes of the Open Web</h3>
</hgroup>
</header>
<section>
<header><h4>Synopsis:</h4></header>
<p>
In this hands-on workshop, learners aged 10 and up play, deconstruct and modify websites in order to understand how to create content for, and build, webpages. Participants use the Mozilla Hackasaurus tools to guide them through the process of remixing images, text and style while learning basic web design and programming concepts. Participants experiment with the X-Ray Goggles bookmarklet, a tool that allows users to see and manipulate the HTML and CSS that make up webpages. Using the Goggles and other open source web-based tools, participants will respond to design challenges that offer them a chance to use these newly acquired programming skills.
</p>
</section>
<section>
<header><h4>Duration:</h4></header>
<p>
This three-part lesson plan can either take one full day or be broken up into separate modules.
</p>
</section>
<section>
<header><h4>Badges</h4></header>
<p>
Learning today happens everywhere, not just in the classroom. But it’s often difficult to get recognition for skills and achievements that happen outside of school. Mozilla’s Open Badges project is working to solve that problem, making it easy for anyone to issue, earn and display badges across the web through a shared infrastructure that’s free and open to all. The result: helping learners everywhere display 21st century skills, unlock career and educational opportunities, and level up in their life and work.
</p>
</section>
<section>
<header><h4>Assessment:</h4></header>
<p>
A Hackasaurus Superheroes of the Open Web Learning Rubric is available for learner assessment at the end of this section.
</p>
</section>
<section>
<ol>
<li>
<b>Big ideas of the day:</b>
<ul>
<li>Hacking means changing a piece of something to create something new</li>
<li>Web designers get inspired by existing websites to come up with new ones</li>
<li>Webpages are written with HTML and styled with CSS</li>
<li>Websites are dynamic systems that are easily changeable</li>
<li>A website designer works with inter-related parts</li>
<li>Parts of a webpage include HTML, CSS, graphic assets and text content</li>
<li>The open web is a place where anyone can participate and contribute information</li>
</ul>
</li>
<li>
<b>Deliverables:</b>
<ul>
<li>Participants will learn the concept of hacking through physical exercise and online tools</li>
<li>Participants will write HTML and constructively think about their roles as webmakers</li>
</ul>
</li>
<li>
<b>Learning goals:</b>
<ul>
<li>Develop a basic understanding of the different parts that make up a webpage</li>
<li>Develop key web programming vocabulary</li>
<li>Develop key critical thinking about web terminologies</li>
<li>Develop an understanding of how participatory media (i.e. the open web) differs from one-directional consumption media (i.e. TV and radio)</li>
<li>Draw connections between webmaking, content creation and the participatory culture of the open web</li>
</ul>
</li>
<li>
<b>Skills targeted and learned:</b>
<ul>
<li>Identify & alter element tags, which surround content and apply meaning to it</li>
<li>Remix content of element attributes, which appear inside tags and have their values enclosed in quotation marks</li>
<li>Remix and create elements, which are the basic building blocks of webpages</li>
<li>Demonstrate the ability to write a paragraph using HTML and <p> </p> tags</li>
<li>Change one part of a webpage to make a new webpage</li>
<li>Get inspired by websites and come up with ideas for new projects</li>
<li>Use the Hackasaurus X-Ray Goggles bookmarklet and demonstrate ability to use its different features</li>
<li>Understand the concept of URLs and URLs for images</li>
</ul>
</li>
<li>
<b>Key questions:</b>
<ul>
<li>What is hacking? Where can we find examples of hacks?</li>
<li>How are webpages and websites dynamic systems?</li>
<li>Which are the fundamental parts of a webpage?</li>
<li>How does a webpage change when you change one of its parts?</li>
<li>Why is it important to have open access to the Internet?</li>
<li>Why is it important that the web is designed by many individuals?</li>
<li>Why is it important for websites to invite participation?</li>
</ul>
</li>
<li>
<b>Modules</b>
<ul>
<li>Hack the Robot Dance (an icebreaker game)</li>
<li>Try on your X-Ray Goggles (a web design tool overview)</li>
<li>Create your own Superhero (a design challenge)</li>
</ul>
</li>
</ol>
</section>
<section>
<header>
<hgroup>
<h2>Module 1</h2>
<h3>Hack the Robot Dance</h3>
</hgroup>
</header>
<ol>
<li>
<b>Overview</b>
<p>
The goal of this activity is for learners to understand that hacking has always been a key element in the creative process, and that it is a constructive collaborative activity, not a destructive one. Participants will learn how to hack a popular dance from the 80s to design a brand new dance.
</p>
</li>
<li>
<b>Materials you’ll need</b>
<ul>
<li>Speakers</li>
<li>Computer with reliable internet connection and unblocked access to YouTube</li>
<li>Projector</li>
<li>Video: How To Do The Robot (Totally Rad 80’s Dances) http://youtu.be/E-_iUHY8RBs</li>
</ul>
</li>
<li>
<b>How to play</b>
<ul>
<li>Participants form a circle</li>
<li>Facilitator plays the “How To Do The Robot (Totally Rad 80’s Dances)” video</li>
<li>Facilitator tells the group that they are now going to hack the dance, starting with examining all of the steps in the dance</li>
<li>Everyone practices the dance in its entirety</li>
<li>The first participant finds one step of the dance to change</li>
<li>The participant demonstrates the hacked dance in the circle</li>
<li>The person to the left of the initial hacker must hack that move or repeat it</li>
<li>If hacking the move, the person has to demonstrate the new dance move they are adding or replacing</li>
<li>Repeat until everyone in the circle has danced</li>
<li>When the last person in the circle has made their hack, everyone in the whole circle needs to try out the new dance. If there is extra time, go around the circle again</li>
</ul>
</li>
<li>
<b>Discussion</b>
<p>After the dance party is over, direct guiding questions to participants to help identify the steps to hacking. Write definition/key words that participants come up with on the board/poster paper.</p>
<ul>
<li>How did you hack the dance? Discuss the rules — what were they?</li>
<li>What actions were you doing while hacking? Discuss the mechanics and dynamic systems — Break down the activity, first they looked at the dance, then they changed bits and pieces of it until it became a new dance. One person made a change which affected the entire dance.</li>
<li>What was the goal of the activity? Discuss goal — creating a new dance by hacking</li>
<li>What made the dance fun? Discuss creativity and co-developing the project.</li>
<li>How do you think hacking a dance will be similar to hacking a website? Discuss what defines hacking and transition onto the next topic</li>
</ul>
</li>
<li>
<b>Introduction to badges</b>
<p>
Explain to participants that they will be able to collect paper badges for their accomplishments throughout the hack jam. At the end of a module, participants will “pledge” or apply for badges to gain specific superpowers. They must successfully complete the pledged task in front of a peer mentor or facilitator who will award them the badge to show they’ve earned their superpower.
</p>
</li>
</ol>
</section>
<section>
<header>
<hgroup>
<h2>Module 2</h2>
<h3>Try on Your X-Ray Goggles</h3>
</hgroup>
</header>
<ol>
<li>
<b>Overview</b>
<p>
The goal is for participants to create their first webpage by hacking and tinkering with an existing webpage. Participants may pledge for two types of badges—the Navigator badge for learners who are new to web browsing and the Remixer badge for learners who are already familiar with web browsing and are moving on to hacking HTML.
</p>
</li>
<li>
<b>Materials you’ll need</b>
<ul>
<li>Computers with high-speed Internet connection</li>
<li>Computers available for participants/team of participants</li>
<li>Hackasaurus X-Ray Goggles installed on a modern web browser e.g. FireFox, Chrome, Safari, Opera, with the latest browser versions updated <aside>(Please note: Hackasaurus currently does not support Internet Explorer.)</aside></li>
<li>Projector</li>
<li>HTML and CSS cheat sheets</li>
</ul>
</li>
<li>
<b>Facilitator procedure</b>
<p>Demonstrate how to hack the webpage and then go over the steps in a slow, clear manner:</p>
<ul>
<li>Tell participants that they will be hacking a website</li>
<li>Ask participants to call out the name of a website that they regularly visit</li>
<li>If no one responds or if you have slow Internet, go to google.com because it loads fairly quickly</li>
<li>Turn on the Goggles. You can do this by clicking on the bookmarklet in your bookmark toolbar</li>
<li>Using the Goggles, slowly hover the cursor over objects so that participants can see that the tool is inspecting the code and showing the object tags for each object</li>
<li>Hover over an image or some text on the page and hit “R” on your keyboard</li>
<li>Keep this screen up so that participants can see that the code is revealed at this stage</li>
<li>Ask participants for help hacking the code. If you are editing text, ask participants what text they would like to replace the text with; if you are changing an image ask participants to name their favorite musician and do a search for that musician online</li>
<li>After you have acquired the assets and made the changes, hit the OK button and show everyone the hack</li>
<li>Now, show everyone how to do this step by step and, whenever possible, refer back to the steps that you defined for hacking with the Hack this Dance module</li>
<li>Steps:
<ul>
<li>Turn on the X-Ray Goggles bookmarklet</li>
<li>Look at the code, point out the tags, attributes and elements</li>
<li>Find the object tags that you want to change or replace (e.g. <p> or <img>)</li>
<li>Change one part of the webpage</li>
<li>Hack: hit the “commit changes” button to save changes locally on your computer</li>
<li>Share the hack: hit “T” to publish the new webpage on the Internet</li>
</ul>
</li>
</ul>
</li>
<li>
<b>Pledging for badges</b>
<p>At this point participants can pledge for either the Navigator or Remixer badge. To qualify for the Navigator badge, participants must:</p>
<ul>
<li>Open up the browser</li>
<li>In the address bar, type: http://navigator.hackasaurus.org</li>
<li>Complete the mission to receive the badge</li>
<li>Superpower earned: Enhanced web agility</li>
</ul>
<p>To qualify for the Remixer badge, participants need to complete the following tasks:</p>
<ul>
<li>Go to www.google.com</li>
<li>Using the Goggles, replace the Google logo with an image</li>
<li>Using the Goggles, change or add text to the webpage</li>
<li>Superpower: X-ray vision</li>
</ul>
</li>
<li>
<b>Discussion</b>
<p>At the end of the session, have participants present their new webpages, explain their work process and what they learned.</p>
</li>
</ol>
</section>
<section>
<header>
<h2>Module 3</h2>
</header>
<ol>
<li>
<b>Overview:</b>
<p>The goal is to introduce participants to an organic, interactive design process for webmaking. Participants will discuss what it means to have an open web and create fictional superhero identities and web assets (websites, content, imagery, etc.) to defend the open web. A prototyping station is available for those kids who may wish to start with an analog version. During the module, participants will pledge for several badges.</p>
</li>
<li>
<b>Materials you’ll need</b>
<ul>
<li>Computers with reliable Internet connection</li>
<li>X-Ray Goggles bookmarklet installed</li>
<li>Supplies for station activities:
<ul>
<li>Computers set up with Hackasaurus tools</li>
<li>Paper supplies</li>
<li>Scissors</li>
<li>Glue</li>
<li>Lego™ blocks</li>
<li>Markers</li>
<li>Camera or computers with image editing software (e.g. Aviary http://www.aviaryeducation.com/ or other open image editing software)</li>
</ul>
</li>
<li>A blog or another web-based repository for everyone to post their work such as www.blogger.com, www.wordpress.com or www.tumblr.com</li>
</ul>
</li>
<li>
<b>Facilitator procedure</b>
<ol>
<li>
Set up the room with several stations for participants to move about organically, including:
<dl>
<dt>Hacking station</dt>
<dd>computers set up with Hackasaurus X-Ray Goggles</dd>
<dt>Prototyping station</dt>
<dd>paper supplies, scissors, glues, markers, etc.</dd>
<dt>Digital imaging station</dt>
<dd>camera or computers with digital imaging software</dd>
</dl>
</li>
<li>
Frame the design challenge by having participants collectively explore problems and strengths of the open web. Engage participants in a discussion about the open web by asking:
<ul>
<li>What would your life be like without the web?</li>
<li>Who made the web?</li>
<li>How can you tell the web was made by people?</li>
</ul>
</li>
<li>
Introduce the concept of the open web:
<dl>
<dt>No barrier to entry</dt>
<dd>anyone can use it to make or play</dd>
<dt>Transparent</dt>
<dd>you can see how it is made</dd>
<dt>It doesn’t break</dt>
<dd>because it is not “owned” by any person or organization</dd>
</dl>
</li>
<li>
Introduce the design challenge:
<blockquote>We benefit from an open web where anyone can use, see and manipulate content on the Internet. This is a privilege that we don’t want to lose. Every so often there are things that compromise the open web, such as firewalls, or blocking functionality of web browsers. This is something that can be protected — the perfect job for a team of superheroes.</blockquote>
</li>
<li>
Create a superhero identity to protect the open web:
<ul>
<li>The superhero must have a name and visual representation</li>
<li>The superhero must have a biography</li>
<li>What are his/her superpowers?</li>
<li>How did he/she get them?</li>
<li>How do his/her superpowers help to protect the web?</li>
<li>Does the superhero have a nemesis or face a particular challenge?</li>
<li>Hack into a news site using the Goggles to write a story about how the character saved or protected the open web</li>
</ul>
</li>
<li>
Put the content on a webpage that was created or hacked and present it to the group at the end of the day.
</li>
<li>
Tour the stations. Have participants visit the various stations and allow them to work either in groups or individually; If possible, it is ideal to have facilitators at each station to support participants.
</li>
</ol>
</li>
<li>
<b>Presentations</b>
<ul>
<li>Have participants talk about their superheroes and display the work they have done</li>
<li>Following the presentations, facilitators should direct participants to other resources in their community or online to learn more about hacking and web design/development</li>
<li>Provide individual constructive feedback during presentations</li>
</ul>
</li>
<li>
<b>Pledging for badges</b>
<p>At each station, participants should be able to pledge for a Producer, Wordsmith or Webmaker badge and nominate someone for a Peer Coder badge.</p>
<p>To qualify for the Producer badge, participants will need to complete the following tasks:</p>
<ul>
<li>Design the visual representation of a superhero</li>
<li>Prepare content for the web</li>
<li>Place content on a website</li>
<li>Superpower: Design Dexterity</li>
</ul>
<p>To qualify for the Wordsmith badge, participants will need to complete the following tasks:</p>
<ul>
<li>Visit a news website</li>
<li>Using the X-Ray Goggles, hack into a paragraph on the site</li>
<li>Write a story about how the participant’s character saved or protected the open web</li>
<li>Superpower: Ciphering</li>
</ul>
<p>To qualify for the Webmaker badge, participants will need to complete the following tasks and show a peer mentor or facilitator the website, who will then distribute the badge:</p>
<ul>
<li>Open up WebPad at http://webpad.hackasaurus.org/</li>
<li>Using the content that you created (the bio, news article and visual art), create a website</li>
<li>For some helpful snippets of code that could be included in your site, visit Hackbook at http://hackbook.hackasaurus.org/</li>
<li>Superpower: Enhanced marksmanship <aside>Note: The WebPad and Hackbook are in an experimental state as they’re still in development</aside></li>
</ul>
<p>To qualify for the Peer Coder badge, participants need to be nominated by a peer at the jam. A peer coder is someone who:</p>
<ul>
<li>Demonstrates ability to work collaboratively and/or</li>
<li>Demonstrates ability to code HTML and/or CSS with a collaborator and/or</li>
<li>Assists another participant with their code</li>
<li>Superpower: Invincibility</li>
</ul>
</li>
</ol>
<b>References:</b>
<ul>
<li>Slideshare presentation on the open web from Mark Surman, Executive Director of Mozilla Foundation: http://www.slideshare.net/guest6177758/i-heart-the-open-web-1768019</li>
<li>Teaching the open web to teens: http://etherpad.mozilla.com:9000/openweb</li>
<li>Hackasaurus website: www.hackasaurus.org</li>
<li>Aviary On-line Photo Editor: http://www.aviaryeducation.com/</li>
</ul>
</section>
</section>
</section>
<section class="chapter">
<header>
<hgroup>
<h1 class="title">Step 4</h1>
<h2 class="subtitle">Set up for Success</h2>
</hgroup>
</header>
<p>
Define the space where you will be hosting the hack jam. Make sure that you have prepared both your technical materials as well as the physical space well in advance.
</p>
<p>
Think of all the participants as makers, including facilitators, learners and volunteers. Make every attempt humanly possible to define the jam space as interactive. Move chairs into a circle. Set up design centers or stations so people can easily move about within the space. Break up the space as much as possible.
</p>
<aside>Tip: Set up a projector connected to a laptop for easy sharing of hacks.</aside>
<section>
<h2>I.T. Checklist</h2>
<ul>
<li>Make sure that the jam space has a stable enough Internet connection for the number of students expected.</li>
<li>Have laptops or PCs available for students or teams of students.</li>
<li>Install the most up-to-date version of Firefox, Chrome, or Safari on the computers. <span class="fn">Right now the Hackasaurus tools work reliably on the latest versions of Firefox, Chrome and Safari, but support for more browsers is on the way.</span></li>
<li>Check that the Goggles bookmarklet can be installed and works in your setup. If possible, pre-install the bookmarklet on all the computers to save time during the jam.</li>
<li>Set up a projector to a computer so that you can demo things on a screen that everyone can see and students can share their work.</li>
</ul>
<p>You can run Firefox and the Goggles off of a USB stick too: http://portableapps.com/apps/internet/firefox_portable Check that this works on the computers though, as some places have firewalls that restrict the use of external devices.</p>
</section>
</section>
<section class="chapter">
<header>
<hgroup>
<h1 class="title">Step 5</h1>
<h2 class="subtitle">Work in Teams and Share</h2>
</hgroup>
</header>
<p>Let teens work together in teams and throughout the jam encourage them to take on specific roles on their project, such as visual designer, coder, project manager, documentarian, etc.</p>
<p>Have them present what they did, encouraging conversation about process and techniques. In just one sentence, everyone shares something useful that they learned. If someone says something interesting, shout it out and let them know that you agree. Embed a lightweight de-brief into the sharing of useful things. Take lots of photos throughout the jam and as soon as it's over, upload them to a public repository like Flickr.</p>
<aside>Tip: When working with minors <span class="fn">under the age of 18</span> have parents sign permission slips.</aside>
</section>
<section class="chapter" id="resources">
<h1 class="title">Resources</h1>
</section>
</div>
</section>
</div>
<script src="jquery.min.js"></script>
<script>
$('nav').append('<ol id="toc"></ol>');
$('.chapter').each(function(index, chapter){
var title = $(chapter).find('.title').html();
var subtitle = $(chapter).find('.subtitle').html();
var text = title;
if (subtitle) text += ' ' + subtitle;
var item = $('<li></li>').appendTo('#toc');
var link = $('<a></a>').appendTo(item);
link.html(text);
if (!$(chapter).attr('id')) $(chapter).attr('id', 'chapter' + index);
link.attr('href', '#' + $(chapter).attr('id'));
});
</script>
</body>
</html>