forked from LauraHilliger/hacktivityKits
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtascasaurus.html
More file actions
220 lines (198 loc) · 13.5 KB
/
Copy pathtascasaurus.html
File metadata and controls
220 lines (198 loc) · 13.5 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
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Tascasaurus Kit</title>
<link href="http://zythepsary.com/mozilla/hacktivity/styles.css" rel="stylesheet">
<style>
nav{
width:100%;
}
.button{
left:80%;
}
.kitSelection ol li{
width:40%;
padding-right:7%;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Tascasaurus Kit</h1>
<h2>Remixing the Web with Middle School Students</h2>
</hgroup>
<br/>
<nav>
<h3>About</h3>
<!--Give 2 to 3 sentences about what the kit contains and what people learn from doing it.-->
<p>This curriculum (a remix of the Hackasaurus Hacktivity kit) provides educators with a free, engaging, web-based model to teach kids in out-of-school time. This is a turnkey model that can be quickly disseminated among established after-school networks. </p>
<p>
The following curriculum begins with a page that explains what Tascasaurus/Hackasaurus is all about and leads someone through the process of installing the Goggles. After that are three 45-minute sessions, broken down into specific time frames, which can be implemented in school or out. Feel free to use the lessons as written or to tinker with them — that’s what hacking is all about, as you’ll see.
</p>
Ready? Let’s begin!
<p>
<a class="button" href="http://explorecreateshare.org/2012/05/31/tascasaurus-final-event/">Read More here!</a>
</p>
</nav>
</header>
<section class="kitSelection">
<h1>Introduction for Educators</h1>
<ol>
<li> What is Hackasaurus?
<p>
<img src="http://explorecreateshare.files.wordpress.com/2012/03/screen-shot-2012-03-31-at-1-13-02-am.png?w=848" width="400">
</p>
<!-- Start with the Big Picture-->
<p>
Designed as an open educational resource (OER) and an open source project, Hackasaurus promotes skills, attitudes and ethics that help youth thrive in today’s digital age. By making it easier for tweens and teens to experiment with the building blocks that make up the web, Hackasaurus enables them to move from digital consumers to active producers who view the web as something that can be constantly remixed and improved.
</p>
<p>
Instead of using “kid-ified” sandboxes or artificial languages, Hackasaurus lets youth hack their favorite webpages using real programming code. The X-Ray Goggles bookmarklet enables learners to visit any webpage and inspect the code, with WebPad then allowing learners to take the next step by creating a copy of the webpage instantly which can be remixed to alter how it looks.
</p>
<p>
Lastly, the Hackbook provides bits of commonly used code for learners to copy and paste. This is only the beginning though, as there are more tools being developed.
</p>
</li>
<li>What is TASCasaurus?
<p><img src="http://explorecreateshare.files.wordpress.com/2012/03/screen-shot-2012-03-31-at-12-39-32-am.png?w=705">
<!--Give some background on your tools-->
</p>
<p>TASCasaurus is a partnership between TASC, an intermediary organization, and Hive NYC and Mozilla, the two creators of Hackasaurus. The goal of TASCasaurus is to:
• Prepare and motivate community educators to deliver technology-enabled, student-driven learning opportunities using the Hackasaurus tools.
• Use technology to engage youth in a project that will increase both their digital literacy and interest in STEM (science, technology, engineering, and mathematics).
A pilot project was implemented in six New York City after-school sites to engage youth in 4 to 8 grade to re-mix websites and research STEM content. This curriculum is a result of that collaboration.</p></li>
</ol>
</section>
<section class="kitSelection">
<h1>Appendix</h1>
<!--If there are extra readings, how-tos, checklists, cheatsheets or FAQs that you want to include, stick them in the Appendix. You might also include design elements like your logo or paper badges. -->
<ul class="inner">
<li>Photocopy <a href="http://www.zythepsary.com/mozilla/hacktivity/CrashCourses/cc_html.html">HTML/CSS Crash Course</a> for participants</li>
<li>Photocopy <a href="http://www.zythepsary.com/mozilla/hacktivity/CrashCourses/cs_goggles.html">X-Ray Goggles guide sheet</a> for participants</li>
<li><a href="http://zythepsary.com/mozilla/hacktivity/CrashCourses/cs_html.html">HTML Cheatsheet</a></li>
<li><a href="http://zythepsary.com/mozilla/hacktivity/CrashCourses/cs_css.html">CSS Basic Cheatsheet</a></li>
<li>Add your own here.</li>
</ul>
<ul>
</ul>
</section>
<section class="indexPage">
<h3>Update your Browser:</h3>
<ol>
<li>
<h4>Access a computer with high-speed internet </h4>
<p>Check to make sure it has the latest version of one of the browsers (to download a browser, click on the link and follow the directions). </p>
i. <a href="https://www.google.com/intl/en/chrome/browser/"> Google Chrome (Mac or PC):</a>
<p>ii. <a href="http://www.mozilla.org/en-US/firefox/new/"> ii. Firefox (Mac or PC):</a></p>
<p>ii. <a href="http://safari.soft32.com/free-download?gclid=CPHwkrqntbECFYtV4god0AUAPQ"> iii. Safari (Mac): </a></p>
</li>
<li>
<h4>Install the X-Ray Goggles:</h4>
<!--Installing the goggles* -->
<ul class="inner">
<li>Go to: <a href="http://hackasaurus.org/en-US/goggles/">http://hackasaurus.org/en-US/goggles/</a></li>
<li>Try the first hack as shown (optional, but fun!)</li>
<li>Scroll down and look for the word “Install “on the left.</li>
<li>Click the link and follow it to an installation page. From there, click on the video that shows you how to add the bookmark bar to your browser and follow directions.</li>
</ul>
<p>Feel free to play with the Goggles to see how they work. If you wish to teach yourself HTML or CSS (the basic building blocks of websites), click here: <a href="https://developer.mozilla.org/en/HTML/">https://developer.mozilla.org/en/HTML/</a> or see “Remixing the Web:Part 2” of this curriculum for more details. </p>
Continue to work through the following lessons, which demonstrate how to hack and provide you with the opportunity to practice what you will demonstrate to your kids (note; this is important as it will allow you to try out the various instructions and become familiar with everything). Don’t worry about not being an expert — everyone will learn and grow together!
<!--Add your own! This kit can be hacked to include interest driven content. For example, you might add a skill like "Learners will be able to recognize different endangered animals."-->
</li>
<li>
<h4>Tips for Classroom Preparation:</h4>
<!--what will your learners MAKE when they are done? Pick your tools: what Mozilla tool fits your audience, big picture and results best?-->
<ul class="inner">
Set up a welcome table in the front of the room: The table should include helpful handouts; sign in sheets; guide sheets; posters; a workshop schedule; and other materials you feel are necessary.
</ul>
</li>
<li>
<h4> Set-up participant computers:</h4>
<ul class="inner">
<li>Make sure you have enough computers available for participants or teams of participants. </li>
<li>Test the computers to make sure they work.</li>
<li>Make sure all computers are fully charged and/or have a power source. </li>
<li>Make sure the room has a stable internet connection that can support the number of participants expected. </li>
<li>If necessary, install the most up-to-date version of Firefox, Chrome or Safari on every computer (please note that Hackasarus DOES NOT work on Internet Explorer).</li>
<li>Pre-install the X-Ray Goggles. If the Goggles do not work, it is because the browser you are using is outdated. You may ask students to help you with this. </li>
<!-- Kitchen Table Event for 3 to 15 Learners
Learn with friends! Teach each other how to make things around your kitchen table.
1. Gather your friends and family in a comfortable setting.
2. Make something together on the web using fun projects.
3. Share what you made and get inspired to explore more.-->
</ul>
</li>
<li>
<h4>Set-up instructor’s computer:</h4>
<!--what is the snapshot that gives your students an overview of what they will do for the day? --><ul class="inner">
<li>Install X-Ray Goggles and open all necessary webpages/files for the lesson.</li>
<li>Connect instructor computer to a projector or smart board for teacher intro and demonstration (if available). Note: YOU DO NOT have to have a projector/smart board for the lesson, but it can be helpful.</li>
</ul>
<!-- Add your own...In my (fun title) event, my students will LEARN (skills) by MAKING (project)-->
</li>
</ol>
</section>
<section>
<h3>Materials</h3>
The materials needed to implement this curriculum are:
<ul>
<li>A computer for each student or team of participants</li>
<li>Internet access</li>
<li>The most recent version of one of the following browsers installed on each computer</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>The Hackasaurus X-Ray Goggles installed on the bookmark bar (don’t worry—we’ll tell you how!)</li>
<li>Kids and a facilitator with basic computer skills. These individuals should know how to operate a computer (turn on and off), browse the Internet and be familiar with the “copy” and “paste” commands</li>
</ul>
</section>
<section>
<h3>More Coming Soon!.......</h3>
<!--Next, you'll make a list of plug n' play activities, we call them "Hacktivities". Come up with at least one activity for each type. In the end, you'll have an Icebreaker Activity, a Diving In Activity and a Hands On Hacking activity.-->
<ol>
<!--An icebreaker is an activity that gets the blood pumping, forms connections between learners, and introduces a topic. There are thousands of different ways to introduce a topic and get learners interacting with each other. Choose one and hack it to be your own! -->
-------------------------
<!--<li class="inner">
<h4>Icebreaker</h4>
<a href="http://zythepsary.com/mozilla/hacktivity/ThimblePrototype/ib_strongwind_thimble.html">A Strong Wind Blows: for the Open Web
<img height="132" src="http://zythepsary.com/mozilla/hacktivity/ThimblePrototype/static/ib_thimble/step02_strongwind_thimble.png" width="213"></a> </li>-->
<!--A diving in activity is one that gives pointed instruction to participants on tools or procedures. An example of a diving in activity would be allowing the participants to get used to the interface of Thimble or Thimble by having them make projects. Before learners can practically apply new skills, they need to be comfortable with the tools they'll be using and have a basic understanding of the skills they'll be sharpening. -->
<!--<li class="inner">
<h4>Diving In</h4>
<a href="https://thimble.webmaker.org/p/ffz9">Hack the Web: with Thimble<img src="http://zythepsary.com/mozilla/hacktivity/ThimblePrototype/static/su_thimble/step03_thimbleInterface.png"> </a> </li>
<!--A Hands on Hacking activity is a practical activity that allows learners to delve deeper into the essential questions of your session. Go back to thinking of the results: what will your learners MAKE when they are done? Create a project that gives learners enough time to explore and tinker while working towards the completion of the activity.-->
<!--<li class="inner">
<h4>Hands on Hacking</h4>
<a href="http://zythepsary.com/mozilla/hacktivity/ThimblePrototype/hh_evilTwin_Thimble.html">Alter Ego/Evil Twin: the Opposite of Me <img src="http://zythepsary.com/mozilla/hacktivity/ThimblePrototype/static/hh_thimble/step04_projectsThimble.png"> </a></li>
<li>
<h4>Playtesting and Iteration</h4>
<!--Your learners made something, now it’s time to have them Playtest their ideas so that they can iterate and improve their projects. This module helps facilitators create review criteria.-->
<!--<h5>Learners share their projects. <!--Ask them to observe the review criteria that you set. Example criteria might be: -->
<!-- <br>
Is the user:</h5>
<ul class="inner">
<li> following the instructions?</li>
<li> getting the joke?</li>
<li> understanding the commentary?</li>
</ul>
<!--Add your own criteria.-->
<!--<h5>Have learners form groups and take notes.</h5>
<h5>Start a discussion by having learners complete sentences.</h5>
<!--Some sentences might be:-->
<!--<ul class="inner">
<li> I thought you did a nice job with/of ___.</li>
<li> You might want to improve ___.</li>
<li> Your idea was fun/interesting because ___.</li>
<li> What you made was ___ and it made me think/feel ____.</li>
<!-- Add your own sentences.-->
<!-- </ul>
<h5>Let your learners review each other's work. </h5>
<p>When they're finished with their reviews, ask them what next steps would be for each project. How can each project be iterated and improved upon?</p>
</li>
<li>
<h4>Assessment and Badges</h4>
<!--You'll want to let people using your Hacktivity Kit know how to assess the learning at their event. Create a correlation between badges and learning objectives. Then, write down a rubric for people to follow. Use this sheet to help you create your assessment grids and rubrics.-->
See the grid and badges for this kit <a>here</a>
</ol>
</section>
</body></html>