-
Notifications
You must be signed in to change notification settings - Fork 2
/
teachers.html
190 lines (131 loc) · 7.02 KB
/
teachers.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Hackasaurus website prototype" />
<title>Hackasaurus</title>
<link href="style/main.css" rel="stylesheet" type="text/css">
<script src="http://cdn.lanyrd.net/badges/person-v1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<header class="global">
<div class="wrapper">
<p class="logo">Hackasaurus Logo</p>
<a class="mofo" href="#">Link to MoFo</a>
</div>
<nav class="global">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="get-involved.html">Get Involved</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="resources.html">Resources</a></li>
</ul>
</nav>
</header>
<body>
<div class="wrapper">
<div class="proto-col">
<section>
<h1>Hackasaurus for Teachers</h1>
<p>The Hackasaurus toolkit is great fun to use in lessons as an introduction to coding. We've prepared a lesson plan that you can use to deliver Hackasaurus workshops where you are.</p>
<blockquote><p>"A fantastically simple and powerful tool - exactly what the students often want to do in lessons and a great way to motivate them to learn simple bits of HTML without overwhelming them with the dry interface of a blank Notepad document."</p></blockquote>
<blockquote><p>"Love it. A great way to show html without looking at a large page full of code"</p></blockquote>
<p><cite><a href="http://www.tes.co.uk/teaching-resource/Web-X-Ray-Goggles-by-Hackasaurus-6074624/">Teacher comments about the X-Ray Goggles on the TES website</a></cite></p>
</section>
</div>
<div class="proto-col">
<section>
<h2>How to hack the web</h2>
<p>Duration: 45 minutes</p>
<p>Make sure you have everything set up beforehand to give the students plenty of time to play with the tools.
Overview:</p>
<p>In this activity, students learn how to personalize and remix websites by hacking. Through guided exploration, discussion, and remixing html, students will begin to understand how they can integrate these tools into a classroom experience.</p>
<h3>Objectives:</h3>
<ul>
<li>Students will learn how to edit HTML through brainstorming, prototyping and iterative design;</li>
<li>Students will discover through exploration of familiar websites, that the web is a plaform for a variety of viewpoints.</li>
<li>Students will learn the basics of HTML through use of the hacker goggles.</li>
<li>Students will learn how to change content on webpages through the use of the remix functionality of the hacker goggles.</li>
</ul>
<h3>Materials:</h3>
<ul>
<li>Laptops or PCs for students or teams of students</li>
<li>Projector</li>
<li>Latest version of Firefox, Safari, or Chrome</li>
<li>Hacker Goggles: /goggles/</li>
</ul>
<h3>Deliverables:</h3>
<p>By the end of this module, students should produce and present to their peers a hacked website. Additionally, students will have shareable artifacts of digital (through flickr) and physical (through the printable hack website) hacks.</p>
<h3>Introduction:</h3>
<p>What is hacking? What is the open web? What is web-making? (5-10 mins)</p>
<p>We have an unique definition for hacking. When we say hack we are talking about remixing content to make new things for the web. We mean hacking as tinkering. We are not implying anything malicious or illegal.</p>
<h3>Inspecting the web</h3>
<p>How to look under the bonnet of a website and live-edit the contents of any web page. (20 mins)</p>
<p>Using a projector and a laptop, pull up a website that you know students will recognize- for example google or facebook.</p>
<h4>Demo the goggles.</h4>
<ul>
<li>Put on the goggles</li>
<li>Look at the code</li>
<li>Find the tags that you want to change or replace</li>
<li>Edit the content</li>
<li>Bust the hack</li>
</ul>
<p>Now tell students to try out the goggles.</p>
<p>Let students play around with the tools and walk around and help them. If you notice someone who made a particularly great hack, call it out and have students explain how they made it.</p>
<h3>Hacking the web:</h3>
<p>How to re-mix the web, build your own websites and collaborate with others. (10 mins)</p>
<ul>
<li>Ask students to "tear out" their webpage and stick it in the Web Pad.</li>
<li>Explain that web pages are made out of components like lego or pick and mix, and we can put different things on our canvas.</li>
<li>Show students the Hackbook and how to copy and paste hacks across.</li>
<li>Ethics (copying is bad)/ Creative commons -mention that there are ways to credit</li>
</ul>
<h3>Conclusion</h3>
<p>If you have time, have students present their work. If you are short on time- have each participant go around and say 1 thing that they learned in the lesson.</p>
</p>
</section>
<section class="proto-mini">
<h2>Technical Checklist</h2>
<ul>
<li>Make sure that the space has a stable internet connection.</li>
<li>Have laptops or PCs available for students or teams of students.</li>
<li>Install the most up-to-date browsers on the computers. 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.</li>
<li>Provide a projector that connects to a computer so that students can work publicly.</li>
<li>Test all tools to be used in the jams before-hand.</li>
</ul>
</section>
</div>
</div>
</body>
<footer class="global">
<div class="wrapper">
<div class="proto-col proto-col-3">
<section>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Flickr</li>
<li>Github</li>
<li>Email</li>
<li>Identica</li>
<li>RSS</li>
</ul>
</section>
<section>
<h2>Supported by:</h2>
<ul>
<li>Hive logo</li>
<li>MacArthur Foundation logo</li>
<li>Mozilla logo</li>
</ul>
</section>
<section>
<p>Portions of this content are ©1998–2011 by individual mozilla.org contributors. Content available under a Creative Commons Attribution 3.0 Unported License.</p>
</section>
</div>
</div>
</footer>
</html>