-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
265 lines (211 loc) · 16.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="August 24, 2016">
<meta name="author" content="Amanda Hickman, BuzzFeed Open Lab for Journalism, Technology, and the Arts">
<link rel="icon" href="favicon.ico">
<title>BuzzFeed Open Lab Show and Tell: Aug 24, 2016</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About the Open Lab</a></li>
<li><a href="#map">Venue Map</a></li>
<li><a href="#buzzbot">BuzzBot</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2015-2016 Open Lab Fellows <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#westley">Westley Hennigh-Palermo</a></li>
<li><a href="#ben">Ben Kreimer</a></li>
<li><a href="#saito">The Saito Group</a></li>
<li><a href="#christine">Christine Sunu</a></li>
<li><a href="#ainsley">Ainsley Sutherland</a></li>
<li role="separator" class="divider"></li>
<li>Amanda Hickman</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="row">
<h1 class="text-center">BuzzFeed Open Lab<br /><span class="tell">2016 Show & Tell</span></h1>
<h1> </h1>
</div>
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-md-4 col-sm-6">
<a href="#westley"><img class="img-circle" src="imgs/wes.png" alt="Westley Hennigh-Palermo" width="140" height="140">
<h2>Westley Hennigh-Palermo</h2></a>
<p></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-6">
<a href="#ben"><img class="img-circle" src="imgs/ben.jpg" alt="Ben Kreimer" width="140" height="140">
<h2>Ben Kreimer</h2></a>
<p></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-6">
<a href="#saito"><img class="img-circle" src="imgs/saito.png" alt="The Saito Group" width="140" height="140">
<h2>The Saito Group</h2></a>
<p></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-6">
<a href="#christine"><img class="img-circle" src="imgs/christine.jpg" alt="Christine Sunu" width="140" height="140">
<h2>Christine Sunu</h2></a>
<p></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-6">
<a href="#ainsley"><img class="img-circle" src="imgs/ainsley.jpg" alt="Ainsley Sutherland" width="140" height="140">
<h2>Ainsley Sutherland</h2></a>
<p></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-6">
<img class="img-circle" src="imgs/amanda.jpg" alt="Amanda Hickman" width="140" height="140">
<h2>Amanda Hickman</h2>
<p></p>
</div><!-- /.col-md-4 -->
</div><!-- /.row -->
<hr class="featurette-divider">
<p class="lead" id="about">
BuzzFeed Open Lab for Journalism, Technology, and the Arts is a workshop in BuzzFeed News’s San Francisco bureau. We offer fellowships to artists and programmers and storytellers to spend a year making new work in a collaborative environment. <a href="//buzzfeed.com/amandahickman/about-the-open-lab">Read more about the lab</a>.</p>
<p class="lead">The lab is led by <b>Amanda Hickman</b> (Director) and <b></b>Mat Honan (BuzzFeed SF Bureau Chief) and advised by BuzzFeed Founder and CEO <b>Jonah Peretti</b>, <b>James Burns</b> (BuzzFeed Director of Engineering), <b>Chris Dixon</b> (BuzzFeed board member and a16z partner), <b>Chris Anderson</b> (CEO of 3D Robotics and former Wired editor-in-chief), artist and engineer <b>Natalie Jeremijenko,</b> <b>Greg Petroff</b> (GE Global Research), <b>Catherine Bracy</b> (civic technologist and Managing Director of the TechEquity Collaborative), and <b>T Jason Anderson</b> (Associate Professor of Architecture at California College of the Arts, founder of studioAnomalous).
</p>
<hr class="featurette-divider">
<!-- START THE FEATURETTES -->
<div class="row featurette">
<div class="col-md-9" id="buzzot">
<h2 class="featurette-heading">BuzzBot <span class="text-muted">would love to show you around.</span></h2>
<ol class="lead">
<li>
For most people, simply visiting <a href="https://m.me/openlab">https://m.me/openlab</a> will just work. If it doesn't ...
</li>
<li>
If you don’t already have FB Messenger (Free, <a href="https://itunes.apple.com/app/id454638411">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.orca">Android</a>) on your phone, definitely install it.
</li>
<li>
Search for “Openlab” in Messenger, or scan the QR Code by going to the <i>People tab > Scan Code</i> and holding your phone up to this image -->
</li>
<li>
Click on “Get Started” or just send us a quick “hello” to get started.
</li>
<li>
We'll walk you through the rest from there.
</li>
</ol>
</div>
<div class="col-md-3">
<img class="featurette-image img-responsive center-block" src="imgs/messenger_code.png" alt="FB Messenger Code" />
</div>
</div>
<hr class="featurette-divider">
<div class="row">
<div id="map">
<img src="imgs/event_map.png" alt="Map of the Fellowship Exhibits at Folsom Foundry" class="img-responsive center-block" />
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-9" id="westley">
<h2 class="featurette-heading">Westley Hennigh-Palermo <span class="text-muted">Open Lab Fellow</span></h2>
<p class="lead">Westley is interested in finding new ways for newsrooms to communicate with people and in enabling newsrooms to talk about and grapple with complex systems that don't lend themselves to simple narratives. In the past he has helped build a variety of independent games, educational simulations, and tools for data scientists. </p>
<h2 class="featurette-heading">Bots and Games</h2>
<p>At the Open Lab Westley has worked on projects including bots, games, and tools for journalists. The largest of these was BuzzBot, a Facebook Messenger bot that BuzzFeed News deployed during the RNC and DNC. BuzzBot facilitated conversation between journalists and thousands of people who were watching from home, protesting outside, or actually attending as delegates. You can chat with BuzzBot tonight and check out other work from Westley including a game about "Shit VCs Say" and an interactive exploration of influence in Congress.</p>
</div>
<div class="col-md-3">
<img class="featurette-image img-responsive center-block" src="imgs/wes_work.png" alt="Work shot for Westley Hennigh-Palermo">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-9 col-md-push-3" id="saito">
<h2 class="featurette-heading">The Saito Group<span class="text-muted">Open Lab / Eyebeam Fellow</span></h2>
<p class="lead">The Saito Group is a collective of writers, designers and hackers in support of the right to the city, data rights and economic solidarity.</p>
<h2 class="featurette-heading">Reading and Writing With Bots</h2>
<p>Saito created an open-source tool for geo-located social media listening. The tool scans Twitter and pulls in geo-located tweets, and allows the operator to visualize what is being tweeted within a specified geographical radius. Saito also developed an intelligent auto-suggest system. An operator loads a corpus of text, the keyboard suggests the words the operator could write based on the corpus. Together, these devices scan crowds and write texts based on that crowd’s social media output. </p>
<p>USE CASE: ANTI-EVICTION MAPPING PROJECT</p>
<p>Saito collaborated with the Anti-Eviction Mapping Project to design a digital billboard. The billboard scans Twitter for mentions of evictions within the geographic radius of San Francisco and navigates through a 3D map of San Francisco, stopping at one site of eviction at a time. At each of these sites, one line from a testimony of the eviction would display. As the billboard traversed the city, a poem about displacement emerged as well as a link to the Anti-Eviction Mapping Project.</p>
<p>USE CASE: SWALE FLOATING GARDENS</p>
<p>Saito collaborated with Biome Arts to design a pavilion for Mary Mattingly’s nomadic floating garden, Swale. A sensor network measured information about the environment, including plant-moisture, water-flow, and weather. The Saito Group and Biome Arts designed a projection in the pavilion’s interior to represent the data collected by the sensor network; this data sculpture drew people from the shore to the barge. The Saito Group also implemented a social media monitoring network for the neighborhoods where the barge was docked, so that those interested in food, food policy, and art would know the barge was in their area.</p>
</div>
<div class="col-md-3 col-md-pull-9">
<img class="featurette-image img-responsive center-block" src="imgs/saito_work.png" alt="Saito Work Shot">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-9" id="christine">
<h2 class="featurette-heading">Christine Sunu <span class="text-muted">Open Lab GE Fellow</span></h2>
<p class="lead">Christine's research is focused on the links between emotion, design, media, and IoT. She writes and speaks widely about the importance of human connection—to technology, to ourselves, and to others. In the past, Christine has designed developer experiences, run IoT workshops, sequenced human genomes, conducted patient interviews, and killed thousands of fruit flies in the name of science. She currently lives in San Francisco and builds emotive interfaces for internet connected technology.</p>
<h2 class="featurette-heading">Emotive Circuits</h2>
<p>Emotive Circuits is a collection of objects that showcase internet connected technology in soft and unusual forms. In her research at the Open Lab, Christine has examined the potential of the Internet of Things to augment existing objects of emotional importance and convey information through natural, life-based interfaces. Her interactive collection of plush toys, sculptures, and everyday objects is meant to exemplify this research. Please touch the exhibit.</p>
</div>
<div class="col-md-3">
<img class="featurette-image img-responsive center-block" src="imgs/christine_work.jpg" alt="Work shot for Christine Sunu">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-9 col-md-push-3" id="ben">
<h2 class="featurette-heading">Ben Kreimer <span class="text-muted">Open Lab Beta Fellow</span></h2>
<p class="lead">Ben explores the unique perspectives, visual experiences, and storytelling potential of drones, 3D reconstructions, 360-degree video, 3D virtual reality, and open-source hardware sensor platforms. He is an adviser for the Drone Journalism Lab and African skyCAM, and has worked with academic institutions and organizations including Columbia’s Tow Center for Digital Journalism, Times of India, CCTV Africa, VICE News, African Wildlife Foundation, and the Antiochia ad Cragum Archaeological Research Project</p>
<h2>Tools for Spatial and Immersive Storytelling </h2>
<p>Ben has worked on a range of immersive, interactive, and spatial storytelling projects at the Open Lab, many of them focusing on 360 video. He has built open source, low cost 3D printed 360-video rigs for reporters, and adapted 360 cameras to helmets and a drones. These camera rigs, and content produced on them by Ben and BuzzFeed reporters, are on display. In addition to 360 video projects, Ben has also been experimenting with walkable, three-dimensional virtual reality environments made from photographs captured by consumer drones. In the HTC Vive you can experience a walkable, three-dimensional virtual reality environment of an ancient Roman city archaeological excavation, which was reconstructed entirely from photographs Ben took.</p>
</div>
<div class="col-md-3 col-md-pull-9">
<img class="featurette-image img-responsive center-block" src="imgs/ben_work.jpg" alt="Ben Kreimer work shot">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-9" id="ainsley">
<h2 class="featurette-heading">Ainsley Sutherland <span class="text-muted">Open Lab Fellow</span></h2>
<p class="lead">Ainsley is working on virtual reality research as a fellow at the BuzzFeed Open Lab. Prior to BuzzFeed, Ainsley has worked as a designer, developer, and producer on virtual reality projects, alternate reality games, the decentralized web, and open government research. Before moving to Berkeley, Ainsley completed her graduate work at MIT in the Imagination, Computation, and Expression lab.</p>
<h2 class="featurette-heading">Glance</h2>
<p>What if your body is an interface, and the environment is an agent? Ainsley has been working on Glance, a toolkit for interaction in VR that foregrounds the realtime relationship between a user's body and the VR system, and experiments with attention, sound, and embodied cognition. How can we sense the attention of others in a collaborative environment? How can we use these tools to create new types of nonfiction VR work? The prototypes and experiments on display showcase some of the research Ainsley has done towards answering these questions over the past year at the BuzzFeed Open Lab.</p>
</div>
<div class="col-md-3">
<img class="featurette-image img-responsive center-block" src="imgs/ainsley_work.jpg" alt="Work shot for Ainsley Sutherland">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-12" id="cca">
<h2 class="featurette-heading">Thank You!</h2>
<p class="lead">We are super indebted to the crack team of assitants, most from California College of the Arts, who really made our showcase run smoothly: Klea Bajala, Bibiana Bauer, Irmak Berktas, Laneya Billingsley, Mariana Camero, Gladia Castro, Raymond Hsia, Emily Landress, Wayne Pao, Vincent Perez, Stephen Sanford, Shar Shahfari, Maisee Xiong.</p>
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<h2><a href="https://github.com/buzzfeed-openlab">Code</a> |
<a href="http://www.thingiverse.com/OpenLab/about">Thingiverse</a>|
<a href="https://www.youtube.com/buzzfeed-openlab">Video</a> |
<a href="https://twitter.com/openlab">Twitter</a> |
<a href="https://www.facebook.com/openlab">Facebook</a></h2>
</footer>
</div><!-- /.container -->
</body>
</html>