forked from mozilla/curriculum
-
Notifications
You must be signed in to change notification settings - Fork 0
/
placeholder-template.html
407 lines (249 loc) · 13.5 KB
/
placeholder-template.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
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
<!DOCTYPE html>
<!--
===========================================================
This is a comment. It does not show up on a webpage.
Coders leave comments in the projects for others to reference later.
Look for comments in this template to help you edit it.
Keep your window open kind of broadly to make it easy to read the comments.
===========================================================
-->
<!--
===========================================================
Welcome to the MLN Lesson Plan template!
Use this template to create your own session or educational
resource for learners. Edit the HTML below to add your own
content, links and media.
===========================================================
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/makerstrap/makerstrap.complete.min.css">
<link rel="stylesheet" href="https://mozilla.github.io/webmaker-curriculum//stylesheets/styles.css" media="screen">
<link rel="stylesheet" href="https://mozilla.github.io/webmaker-curriculum//stylesheets/print.css" media="print">
<!-- ADD YOUR TITLE HERE -->
<title>Module Name | [Reading | Writing | Participating on] the Web: Lesson Name</title>
</head>
<body>
<!-- START IGNORE. -->
<nav class="navbar navbar-webmaker">
<div class="container">
<div>
<button type="button" class="navbar-toggle" ng-click="collapseToggle()"><span class="sr-only">Toggle navigation</span></button> <!-- logo -->
<ul class="nav navbar-nav navbar-right navbar-collapse text-center-xs collapse">
<!--By default, this navigation element links to the @MozTeach Twitter
account. If you have a Twitter account that better complements this l
esson, edit the link and text.-->
<li>
<a href="https://twitter.com/mozteach">@MozTeach</a>
</li>
<!-- END IGNORE -->
<!--You can create a thread on Disource, our community forum, for this
activity and link to it here.-->
<li>
<a href="https://discourse.webmaker.org/category/curriculum">Disourse Thread</a>
</li>
<!--If you are sharing work in GitHub, you can edit this adress.
Otherwise, it will link to this template.-->
<li>
<a href="https://github.com/chadsansing/curriculum-testing/placeholder-template.html">View on GitHub</a>
</li>
</ul>
<!--If you do not create a Discourse thread or GitHub version of your lesson,
consider deleting lines 58-60 and/or lines 65-68.-->
</div>
</div>
</nav>
<!--The sidebar begins here.-->
<div class="wrapper">
<aside class="aside">
<div class="image" style="background-color:#fff;">
<!--
===========================================================
Add your lesson plan image here.
1. The file name or URL of the image goes in the quotes after src=.
2. The URL after href= should go to the page where you found the image
or to your homepage or Twitter account if you made the image.
3. The plain text that says "Mozilla Learning Networks" should be changed
to credit the image's author.
===========================================================
-->
<img src="" alt="An image of a survey on a computer screen"> <a href="https://teach.mozilla.org" class="attribution"><i class="fa fa-camera"></i> Mozilla Learning Networks</a>
</div>
<div class="goals">
<div class="literacy">
<!--
===========================================================
This is where you add Web Literacy competency buttons.
To do so...
1. Pick a competency here:
https://teach.mozilla.org/teach-like-mozilla/web-literacy/.
2. Find it's name and color here in makerstrap.png:
https://drive.google.com/a/mozillafoundation.org/folderview?id=0B_rbDAen9prkUmd1N1lFM3E0dFk&usp=drive_web.
3. Change the end of the href= and the class= values to match the
name of the button/color.
4. Copy, paste, and edit to add more buttons.
===========================================================
-->
<h4>Web Literacy Competencies</h4><a href="https://webmaker.org/en-US/resources/literacy/weblit-composing"><button class="btn literacy-color-composing">Composing</button></a>
<!--Add your audience here. Note that MLN tools have ToS saying users
must be 13+ to use them.-->
<h4>Audience</h4>
<ul>
<li>13+</li>
<li>[Beginner | Intermiediate | Advanced] Web users</li>
</ul>
<!--Add materials here. Use <li>item</li> to add new items and lines.-->
<h4>Materials</h4>
<ul>
<li></li>
</ul>
<!--Add learning objectives here. You can reference your own verbs or those
at https://github.com/mozilla/webmaker-curriculum/wiki/How-to-write-Learning-Objectives.
Use <li>objective> to add new objectives and lines. -->
<h4>Learning Objectives</h4>
<ul>
<li></li>
</ul>
<!--Here is another link to Discourse for discussing the activity. Delete the generic address and add your own if you start a thread on Discourse for this activity.-->
<h4>Join the Discussion</h4>
<p>Ask questions and find inspiration for adaptation and remix on <a href="https://discourse.webmaker.org" target="blank_">Discourse</a>, our community forum.</p>
</div>
</aside>
<!--The side bar ends here.-->
<!--The main column begins here.-->
<article class="main">
<div>
<hgroup class="text-light">
<!--Make your title here match the one you put in the <head>.-->
<h2><a href="">Module Name | [Reading | Writing | Participating on] the Web</a></h2><br>
<!--Make your lesson name here match the one you put in the <head>.-->
<h3>Lesson Name</h3>
<!--Next, credit yourself and others who worked on the lesson. You may wish to link names to homepages or social media pages.-->
<p id="made-by">Made by <a href="https://teach.mozilla.org">Mozilla Learning Networks</a>.
<!--Write a brief summary of your lesson including the Web Literacy competencies covered in it.--></p>
<p class="lead">Learners will do something, learning <strong>specific Web Literacy competencies</strong>.</p>
<!--Edit the time here to match the duration of your lesson.-->
<p class="leadTime"><i class="fa fa-clock-o"></i> X minutes</p>
</hgroup>
</div>
<div class="agenda">
<!--Next up: preparing for the lesson.-->
<ul>
<li>
<div>
<!-- EXPLAIN WHAT OTHERS WANTING TO RUN THIS ACTIVITY WILL NEED -->
<h3>Preparation</h3>
<!--Here you can encourage other teachers to try your lesson
and/or project first by prodividing a link to it. Add your
link after href=.-->
<p><b>Do <a href="" target="blank_">the activity</a> on your own</b> to become familiar with basic collaborative and open research practices in the work.</p>
<!--The next set of instructions is boilerplate copy for teachers
who want to try the activity. Feel free to edit or delete it
if it doesn't fit your plan. The link here in line 228 should
be the same one from line 220.-->
<p>
<ol>
<li>Follow <a href="">this link</a> to the Thimble project for this activity.</li>
<li>Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.</li>
<li>Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.</li>
<li>Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.</li>
</ol>
</p>
<!--Here you can remind teachers to set up any accounts they and
their students might need for your lesson. Add your link
after href= and edit in the name of the web service you'll
use.-->
<p>You may also wish to set up accounts on <a href="">[name of web service]</a> that you can share with your learners. This will save time later when they are ready to remix today's project.</p>
<!--Also remind teachers to post a link tp any webpages students
will need for the lesson and/or project. Add your link in
between the quotes after href=.-->
<p>Post <a href="" target="blank_">the URL, or Web address, of today's project</a> somewhere highly visible in your room. You may want to post it as a shortened link using a service like <a href="https://bit.ly">bit.ly</a>.</p>
</div>
</li>
<!--Now the individual steps in your lesson begin.-->
<!--
===========================================================
Each step has the following structure
<li>
<div>
<div class="time">
<p>[Number]<br>
min</p>
<h3>[Name of the step]</h3>
<p>A series of instructions in paragraphs...</p>
<ul>
<li>...and lists.</li>
</ul>
</div>
</li>
You sould cut and paste that structure and edit it for however many
steps you have.
Lists can be <ul>, or unordered, with bullet points, or they can be
<ol>, ordered, with numbers.
Remember you can add links like this:
<a href="[web address]">[name of the webpage]</a>
You can also add images like this:
<img src="[file name or web address]">
To embed media like videos or music, check out the "Share" tabs on
popular sites like YouTube and Soundcloud.
Ship questions to @MozTeach on Twitter.
Happy lesson planning!
===========================================================
-->
<li>
<div>
<div class="time">
<p>X<br>
min</p>
</div><!-- ADD DETAILS OF THE INTRODUCTION TO YOUR SESSION -->
<h3>[Name of the Step]</h3>
<p>You can explain the steps in paragraphs...</p>
<p>
<ol>
<li>...or use lists</li>
</ol>
</p>
</div>
</li>
<!--This is where your individual steps end.-->
</ul>
<!--This is where the big list holding your steps ends.-->
</div>
<!--This is where the big container for the main column ends.-->
</article>
<!--This is where the sidebar and maincolumn end together.-->
<!--The footer of the page begins here.-->
<footer class="footer">
<!--
===========================================================
If you would like to link this lesson to another as part of a series, you can use the button below to do so.
1. Add a link to the next actvity after href=.
2. Change the ending of the button's class= attribute to match a Web Literacy competency from the next lesson.
See the makerstrap .png again at
https://drive.google.com/a/mozillafoundation.org/folderview?id=0B_rbDAen9prkUmd1N1lFM3E0dFk&usp=drive_web.
4. Edit the name of the linked activity.
5. You may delete this link and button if your lesson is standalone.
===========================================================
-->
<a href=""><button class="btn literacy-color-composing">[Linked Activity]</button></a>
<!--
===========================================================
The default license for this page is CC-BY-SA, which means...
1. This is a Creative Commons license.
2. If you use this page, you're expected to attribute its design to Mozilla
Learning Networks (it was made *BY* MLN).
3. You are exppected to share your remix of this page using the same license so
others credit you and MLN and share their work forward, too; they *SHARE ALIKE*.
===========================================================
-->
<div class="license">
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"></a>
</div>
</footer>
<!--The footer ends.-->
</div>
<!--The page container and then the page end.-->
</body>
</html>