-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
294 lines (248 loc) · 16.3 KB
/
index.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
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Explore Filter Bubbles</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An activity for learning WebVR">
<meta name="author" content="Mozilla Campus Clubs">
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<!-- github calendar css -->
<link rel="stylesheet" href="assets/plugins/github-calendar/dist/github-calendar.css"
/>
<!-- github acitivity css -->
<link rel="stylesheet" href="assets/plugins/github-activity/src/github-activity.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ******HEADER****** -->
<header class="header">
<div class="container">
<img class="profile-image img-responsive pull-left" src="assets/images/missing.png" />
<div class="profile-content pull-left">
<h1 class="name">Explore Filter Bubbles</h1>
<h2 class="desc">Learn how your activities online influence the text that
web sites show you.</h2>
<ul class="social list-inline">
<li><a href="https://twitter.com/mozstudents"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://github.com/dmarti/exploreFilterBubble"><i class="fa fa-github-alt"></i></a></li>
<li class="last-item"><a href="#"><i class="fa fa-hacker-news"></i></a></li>
</ul>
</div><!--//profile-->
</div><!--//container-->
</header><!--//header-->
<div class="container sections-wrapper">
<div class="row">
<div class="primary col-md-8 col-sm-12 col-xs-12">
<section class="about section">
<div class="section-inner">
<h2 class="heading">Introduction</h2>
<div class="content">
<p>Ever wondered how much time you spend on different kinds of web pages with different points of view?
Filter bubbles are a thing, but until now it's hard to tell how much of your personal information space
is coming from where, and from whose point of view. Ready to find out?</p>
<p><b>Your Mission: To have your club members learn
about text classification and create filter bubble datasets
that represent text sources and viewpoints that club members
are curious about.</b></p>
<p>This activity is still being built. See <a href="https://github.com/dmarti/exploreFilterBubble">our GitHub repo</a> to add new
materials.</p>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="latest section">
<div class="section-inner">
<h2 class="heading">Introduce Infobubbles</h2>
<div class="content">
<div class="item featured text-center">
<div class="featured-image">
<img class="img-responsive project-image" src="assets/images/missing.png" alt="project name" />
</a>
<div class="ribbon">
<div class="text">New</div>
</div>
</div>
<div class="desc text-left">
<p>The new InfoBubbles project is a powerful but easy-to-use tool that gives users measurements of the statistical similarities of the current page to known text corpora, or “bubbles”. It uses Mozilla’s new WebExtensions add-on interface. You can build a bubble dataset for text you're interested in, and share it with other users.</p>
<p>Users can get a bubble summary, or explore in more detail.</p>
<p>Page classifications are initially user generated. A user can mark arbitrary URLs as either an example or a counter-example of a given filter bubble. These classification corpora can then be matched by pluggable text classifiers that can report data back to the user using a common UI. Configurations of corpus set feeds and algorithms will be published to configurable “bubble servers” that users can load configurations from.</p>
<p>This project will be designed to work with Google Chrome as well as Firefox, although initial development will be done in Firefox. All text handling will be client-side, with no text sent to the server.
<p>If you're interested in applications for text classification, you can apply InfoBubbles to build bubble recognition power into social games, productivity tools, recommendation tools, and self-discipline/quantified self tasks.
</div><!--//desc-->
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="projects section">
<div class="section-inner">
<h2 class="heading">Get Started</h2>
<div class="content">
<div class="item">
<p class="summary">Summary</p>
</div><!--//item-->
<div class="item">
<h3 class="title"><a href="#">Activity's Slidedeck</a> <span class="label label-theme">Facilitator</span></h3>
<p class="summary">As the activity's facilitator open and put on the presenter this slidedeck which will help your Club's students go through the activity together.</p>
<p><a class="more-link" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-mobile-apps-delta/" target="_blank"><i class="fa fa-external-link"></i>Activity's Slidedeck</a></p>
</div><!--//item-->
<div class="item">
<h3 class="title"><a href="#">Update Firefox and install our WebExtension</a> <span class="label label-theme">Students</span></h3>
<p class="summary">Stuff.</p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="projects section">
<div class="section-inner">
<h2 class="heading">Trying an existing bubble dataset</h2>
<div class="content">
<div class="item">
<p class="summary">Summary</p>
</div><!--//item-->
<div class="item">
<p class="summary">Now that you have the extension installed, open a web page...</p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="projects section">
<div class="section-inner">
<h2 class="heading">Make your own bubble dataset</h2>
<div class="content">
<div class="item">
<p class="summary">Summary</p>
</div><!--//item-->
<div class="item">
<p class="summary">Now you can make your own bubble dataset, based on some text...</p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="projects section">
<div class="section-inner">
<h2 class="heading">Try your bubble dataset on another site</h2>
<div class="content">
<div class="item">
<p class="summary">Summary</p>
</div><!--//item-->
<div class="item">
<p class="summary">How closely does your bubble dataset match another page? The result could surprise you...</p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
<section class="experience section">
<div class="section-inner">
<h2 class="heading">Challenge</h2>
<div class="content">
<div class="item">
<p>Now that you have completed the filter bubble dataset, you can
share it.</p>
</div><!--//item-->
<p>Congratulations! You just learned to create ai
filter bubble dataset in less than an hour! </p>
<p>Are you ready for the next challenge?
<span class="label label-theme">coming soon!</span></p>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">What you will build</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<p><i class="fa fa-quote-left"></i>I learned (something) in less than an hour and I built my first filter bubble~</p>
</blockquote>
<p class="source"><span class="name">John Doe</span><br /><span class="title">Undergrad Computer Science Student</span></p>
</div><!--//item-->
<p><a class="more-link" href="#"><i class="fa fa-external-link"></i>Check it out</a></p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="skills aside section">
<div class="section-inner">
<h2 class="heading">Skills </h2>
<div class="content">
<p class="intro">
Skills and time required for running this activity
<div class="skillset">
<div class="item">
<h3 class="level-title">HTML<span class="level-label" data-toggle="tooltip" data-placement="left" data-animation="true" >Expert</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">Javascript <span class="level-label">Expert</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h3 class="level-title">Time<span class="level-label">10 hours</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="40%">
</div>
</div><!--//level-bar-->
</div><!--//item-->
<div class="item">
<h2 class="heading">Requirements </h2>
<i class="fa fa-check" aria-hidden="true"> Firefox 52(CK!) or later</i>
<i class="fa fa-check" aria-hidden="true"> A projector</i>
<i class="fa fa-check" aria-hidden="true"> Laptops (1 per person)</i>
<i class="fa fa-check" aria-hidden="true"> (optional) Your favorite web pages or text files</i>
<i class="fa fa-check" aria-hidden="true"> Facilitators slidedeck</i>
</div><!--//item-->
</div>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<!-- ******FOOTER****** -->
<footer class="footer">
<div class="container text-center">
<!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
<small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="campus.mozilla.community" target="_blank">Mozilla Campus Clubs</a> for all University Students</small>
</div><!--//container-->
</footer><!--//footer-->
<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-rss/dist/jquery.rss.min.js"></script>
<!-- github calendar plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.min.js"></script>
<script type="text/javascript" src="assets/plugins/github-calendar/dist/github-calendar.min.js"></script>
<!-- github activity plugin -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script type="text/javascript" src="assets/plugins/github-activity/src/github-activity.js"></script>
<!-- custom js -->
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>