-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathsession01-web-mechanics-speed-dating.html
executable file
·154 lines (111 loc) · 7.46 KB
/
session01-web-mechanics-speed-dating.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Offline Icebreakers | 1. Web Mechanics Speed Dating</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/script.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="wrapper" mode="overview">
<aside>
<div class="image">
<img src="images/cookies.jpg" alt="An image of index cards with web mecahnics vocabulary words and definitions written on them">
<a class="attribution" href="https://learning.mozilla.org">
<i class="fa fa-camera"></i> by Mozilla
</a>
</div>
<!--Image credit -->
<ul class="agenda-navigation">
<li><a href="#overview">Overview</a></li>
<li><a href="#step-1">Preparation</a></li>
<li><a href="#step-2">Activity</a></li>
<li><a href="#step-3">Reflection</a></li>
</ul>
</aside>
<article class="main">
<h1 class="activity-title"><a href="#overview">Web Mechanics Speed Dating</a></h1>
<section class="overview">
<p class="made-by">
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a> by <a href="https://learning.mozilla.org">Mozilla</a>
</p>
<p class="time total-time">
20 minutes
</p>
<p class="summary">
Web Mechanics are a combination of tools, characteristics and functions that determine how we use the internet. Understanding web mechanics helps us protect personal information online, use and understand URLs, IP addresses, search terms, bookmarks and more. This activity will introduce the basics of web mechanics through an offline, multi-person activity. This activity can be adapted for all ages.
</p>
<h4>Activity 1 of 6 </h4>
<h4>Read and Participate on the Web</h4>
<h4>21st Century Skills</h4>
<span class="web-literacy">Communication</span>
<h4><a href="https://learning.mozilla.org/web-literacy">Web Literacy Skills</a></h4>
<span class="web-literacy">Navigate</span>
<span class="web-literacy">Protect</span>
<h4>Learning Objectives</h4>
<ul>
<li>Know and understand web mechanics vocabulary related to navigating online and protecting personal information.</li>
<li>Build community among event participants.</li>
</ul>
<h4>Audience</h4>
<ul>
<li>13+</li>
<li>Beginner web users</li>
</ul>
<h4>Materials</h4>
<ul>
<li>Pens/Markers</li>
<li>Paper</li>
<li>Timer</li>
</ul>
<!--
<p class="discussion-link">
Check out the ways educators and activists have modified this activity for their specific audiences
in our <a href="http://discourse.webmaker.org/t/testing-1-reading-for-the-web/1149/22">Discussion Forum</a>.
</p>
-->
</section> <!-- End of Introduction -->
<ul class="agenda">
<!-- Copy and paste this <li> tag to add additional steps -->
<li>
<h1>Preparation</h1>
<p><strong>Make name cards:</strong> Create name cards for each of the web mechanics listed below. Each card has two sides. Write the name of the web mechanic on the front (i.e., Cookies). Write the description of the web mechanic in a few sentences on the back (i.e., "I am a small piece of text sent to your browser by a website."). You can make these cards on your own before the activity starts or ask your participants to help make the cards.</p>
<ul class="fancy">
<li><strong>Cookies:</strong> I am a small piece of text sent to your browser by a website.</li>
<li><strong>Bandwidth:</strong> I am an electronic byway that connects the internet to your computer. Increasing me allows a faster internet connection.</li>
<li><strong>Bookmarks:</strong> In the context of the world wide web, I am an identifier that is stored for later retrieval.</li>
<li><strong>Web Coding Languages:</strong> I tell web browsers how to structure and present content on a web page.</li>
<li><strong>URL:</strong> I am a specific character string that constitutes a reference to a recource.</li>
<li><strong>Privacy Settings:</strong> I enable people using the web to determine various ways their information may be accessed.</li>
<li><strong>IP:</strong> I am a numerical label assigned to each device participating in a computer network. I am also known as internet protocol.</li>
<li><strong>Browser:</strong> I am a software application for retrieving, presenting and traversing information resources on the world wide web.</li>
</ul>
<p><strong>Participants:</strong> Asuming your participants are new to Web Mechanics, figure out a way to introduce them to what it is and how it works. This can happen in the form of a discussion, a lesson plan, a Q & A, etc. Participants should role-play the mechanics on their cards and act as if they were meeting other web mechanics. That way, learners can teach one another their web mechanics as they introduce themselves to one another. The goal is that everyone feel comfortable with discussing the components of web mechanics once the activity begins.</p>
</li> <!-- end of step-->
<li>
<h1>Activity</h1>
<div class="time step-time">15 minutes</div>
<p><strong>Introduce the Activity:</strong> Gather everyone that will be participating in the activity. Each person gets one namecard. Ask the participants to take a little time to read the front and back of the name card they were given. Everyone is pretending to be the web mechanic listed on their card. Once the activity begins, they will have two minutes to learn about the other web mechanics in the room.</p>
<img src="images/people-talking-to-each-other.jpg" width="90%" alt="An image of two activity participants talking about their vocabulary cards">
<p><strong>Start the Activity:</strong> Set a timer to 2 minute intervals. Start the clock and tell everyone to quickly match up with someone else (it works best with an even number of participants, but an odd number can work). They have two minutes to introduce themselves to each other and ask each other any of the short questions below. After the two minutes is up ask them to find another person and do the same thing. Keep going until everyone has had a chance to meet each other.</p>
<ul class="fancy">
<li>What do you do?</li>
<li>What are your friends like?</li>
<li>How do we connect?</li>
<li>How old are you?</li>
<li>Where are you from?</li>
</ul>
</li> <!-- end of step-->
<li>
<h1>Reflection</h1>
<div class="time step-time">5 minutes</div>
<p>After the activity is over gather everyone in a circle and ask them to discuss the activity. Ask them to describe any challenges, funny moments or interesting things they learned.</p>
</li> <!-- end of step-->
</ul>
</article>
</div>
</body>
</html>