forked from LeaVerou/hci.mit.edu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
345 lines (314 loc) · 15.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MIT HCI</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<nav>
<h1>
<img src="images/logos/mithci.svg" alt="MIT HCI" />
<svg viewBox="0 0 175 134"><use xlink:href="images/logos/csail.svg#logo" /></svg>
</h1>
<ul>
<li><a href="#faculty">People</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#classes">Classes</a></li>
<li><a href="#seminar">Seminar</a></li>
</ul>
</nav>
<h2>Human-Computer Interaction at MIT</h2>
<a href="#join" class="join">Join us!</a>
</header>
<section id="faculty" class="people">
<h1>Faculty</h1>
<article>
<a href="http://people.csail.mit.edu/karger/">
<img src="images/profile-pictures/faculty/david-karger.jpg" />
<h1>David R. Karger</h1>
</a>
<a href="http://haystack.csail.mit.edu/index.html" class="group">Haystack Group</a>
Information Access
</article>
<article>
<a href="http://people.csail.mit.edu/rcm/">
<img src="images/profile-pictures/faculty/rob-miller.jpg" />
<h1>Rob Miller</h1>
</a>
<a href="http://groups.csail.mit.edu/uid/" class="group">User Interface Design Group</a>
Software Development Tools
</article>
<article>
<a href="http://www.stefaniemueller.org">
<img src="images/profile-pictures/faculty/stefanie-mueller.jpg" />
<h1>Stefanie Mueller</h1>
</a>
<a href="http://hcie.csail.mit.edu" class="group">HCI Engineering Group</a>
Personal Fabrication
</article>
</section>
<section id="phds" class="people">
<h1>PhDs & PostDocs</h1>
<article>
<a href="http://www.tarfahalrashed.com/">
<img src="images/profile-pictures/students/tarfah.jpg" />
<h1>Tarfah Alrashed</h1>
</a>
<a href="http://haystack.csail.mit.edu/index.html" class="group">Haystack</a>
</article>
<article>
<a href="http://davidbau.com/">
<img src="images/profile-pictures/students/david-bau.jpg" />
<h1>David Bau</h1>
</a>
<a href="http://groups.csail.mit.edu/uid/" class="group">User Interface Design</a>
</article>
<article>
<a href="http://people.csail.mit.edu/anantb/">
<img src="images/profile-pictures/students/anant-bhardwaj.jpg" />
<h1>Anant Bhardwaj</h1>
</a>
<a href="http://haystack.csail.mit.edu/index.html" class="group">Haystack</a>
</article>
<article>
<a href="http://people.csail.mit.edu/ccai/website/">
<img src="images/profile-pictures/students/carrie-cai.jpg" />
<h1>Carrie Cai</h1>
</a>
<a href="http://groups.csail.mit.edu/uid/" class="group">User Interface Design</a>
</article>
<article>
<a href="http://web.mit.edu/maxg/">
<img src="images/profile-pictures/students/max-goldman.jpg" />
<h1>Max Goldman</h1>
</a>
<a href="http://groups.csail.mit.edu/uid/" class="group">User Interface Design</a>
</article>
<article>
<a href="https://www.behance.net/apgomes">
<img src="images/profile-pictures/students/antonio-gomes.jpg" />
<h1>Antonio Gomes</h1>
</a>
<a href="http://hcie.csail.mit.edu" class="group">HCI Engineering</a>
</article>
<article>
<a href="http://hejiamin1995.wixsite.com/index/research">
<img src="images/profile-pictures/students/jiamin-he.jpg" />
<h1>Jiamin He</h1>
</a>
<a href="http://hcie.csail.mit.edu" class="group">HCI Engineering</a>
</article>
<article>
<a href="http://www.sens.sys.es.osaka-u.ac.jp/users/punpongsanon/">
<img src="images/profile-pictures/students/parinya-punpongsanon.jpg" />
<h1>Parinya Punpongsanon</h1>
</a>
<a href="http://hcie.csail.mit.edu" class="group">HCI Engineering</a>
</article>
<article>
<a href="http://lea.verou.me/">
<img src="images/profile-pictures/students/lea-verou.jpg" />
<h1>Lea Verou</h1>
</a>
<a href="http://haystack.csail.mit.edu/index.html" class="group">Haystack</a>
</article>
<article>
<a href="http://www.paulw.info/">
<img src="images/profile-pictures/students/paul-worgan.jpg" />
<h1>Paul Worgan</h1>
</a>
<a href="http://hcie.csail.mit.edu" class="group">HCI Engineering</a>
</article>
<article>
<a href="http://people.csail.mit.edu/axz/">
<img src="images/profile-pictures/students/amy-zhang.jpg" />
<h1>Amy Zhang</h1>
</a>
<a href="http://haystack.csail.mit.edu/index.html" class="group">Haystack</a>
</article>
<article>
<a href="http://people.csail.mit.edu/sacha/home/">
<img src="images/profile-pictures/students/sasha-zyto.jpg" />
<h1>Sasha Zyto</h1>
</a>
<a href="http://haystack.csail.mit.edu/index.html" class="group">Haystack</a>
</article>
</section>
<section id="research">
<h1>Research</h1>
<article>
<h1>Online Education</h1>
<p>Supporting online learners through....
<footer>
Example Projects:
<a href="http://people.csail.mit.edu/elg/overcode">OverCode</a><a href="https://www.youtube.com/watch?time_continue=6&v=6ov_82nxpbQ">[video]</a>,
<a>Wait-Learning</a> <a href="https://www.youtube.com/embed/pDla4iR1P2A">[video]</a>
</footer>
</article>
<article>
<h1>Crowd Computing</h1>
<p>Leveraging....
<footer>
Example Projects:
<a>Soylent</a> <a href="https://www.youtube.com/watch?v=n_miZqsPwsc">[video]</a>,
<a href="http://projectcobi.com/">Cobi</a>,
<a>Crowds in two Seconds</a> <a href="https://www.youtube.com/watch?v=9IICXFUP6MM">[video]</a>
</footer>
</article>
<article>
<h1>New Interaction Models for Personal Fabrication</h1>
<p>Inspired by the history of the user interface for personal computing, we are developing new interaction models for personal fabrication. Instead of working through a digital 3D editor, we propose to let users work hands-on on the physical workpiece and to update the physical object after every editing step. Our long-term vision is to enable direct manipulation for physical matter in the same way as we today manipulate digital data on touch-devices, such as the iPad.
<footer>
Example Projects:
<a href="http://stefaniemueller.org/constructable-interactive-lasercutting/">Constructable</a> <a href="https://www.youtube.com/watch?v=8g3LaF9oVFY">[video]</a>,
<a href="http://stefaniemueller.org/laserorigami-lasercutting-3d-objects/">LaserOrigami</a> <a href="https://www.youtube.com/watch?v=arjRtCjI9AQ">[video]</a>,
<a>Continuous Interactive Fabrication</a> <a href="https://www.dropbox.com/s/wek2giwcr3eg2jl/video-formfab-chi.mp4?dl=0" class="video">[video]</a>
</footer>
</article>
<article>
<h1>Faster Prototyping and Design Iteration Techniques</h1>
<p>Even though considered a rapid prototyping tool, 3D printers are so slow that a reasonably sized object requires printing overnight. This slows designers down to a single iteration per day. Our concept called Low-fidelity fabrication speeds up design iteration by printing intermediate versions of a prototype as fast, low-fidelity previews. Only the final version is fabricated as a full 3D print.
<footer>
Example Projects:
<a href="http://stefaniemueller.org/WirePrint/">WirePrint</a> <a href="https://www.youtube.com/watch?v=Ea4V7kb2VsY">[video]</a>,
<a href="http://stefaniemueller.org/platener/">Platener</a> <a href="https://www.youtube.com/watch?v=hxUitLZaPf4&feature=youtu.be">[video]</a>,
<a href="http://stefaniemueller.org/faBrickation/">faBrickation</a> <a href="https://www.youtube.com/watch?v=_bapIwyY7VY">[video]</a>.
</footer>
</article>
</section>
<section id="classes">
<h1>Classes</h1>
<article>
<img src="images/classes/ppat.png" >
<div>
<a href="http://ppat.mit.edu" target="_blank"><h1>6.811/HST.420/2.87 Principles and Practice of Assistive Technology (PPAT)</h1></a>
<strong class="fall semester">Fall 2016</strong> Instructors: Julie Greenberg, Kyle Keane, Rob Miller
<p class="description">Interdisciplinary, project-based course in which small teams of students work closely with a person with a disability in the Boston/Cambridge area to design a device, piece of equipment, app, or other solution that helps them live more independently.</p>
</div>
</article>
<article>
<img src="images/classes/user-interface-design-and-implementation.png">
<div>
<a href="http://courses.csail.mit.edu/6.831" target="_blank"><h1>6.813/6.831 User Interface Design and Implementation</h1></a>
<strong class="spring semester">Spring 2017</strong> Instructors: Rob Miller, Stefanie Mueller
<p class="description">Covers human capabilities, design principles, prototyping techniques, evaluation techniques, and the implementation of graphical user interfaces. Deliverables include short programming assignments and a semester-long group project.</p>
</div>
</article>
<article class="coming-soon">
<img src="images/classes/engineering-interactive-technologies.png">
<div>
<h1>6.S··· Engineering Interactive Technologies</h1>
<strong class="fall semester">Fall 2017</strong> Instructor: Stefanie Mueller
<p class="description">Teaches how to build cutting edge interactive technologies and provides an overview of each field. Topics covered include multitouch, augmented reality, haptics, wearables, brain computer interfaces, tangibles, fabrication, and more.</p>
</div>
</article>
<article class="coming-soon">
<img src="images/classes/build-your-own-multitouch-pad.png">
<div>
<h1>IAP Build your own Multi-Touch Pad</h1>
<strong class="iap semester">IAP 2017</strong> Instructor: Stefanie Mueller
<p class="description">Learn laser cutting, electronics breadboard prototyping, soldering, and computer vision in only two days. In this hands-on IAP we will build a multitouch pad including gesture recognition based on the principles of FTIR.</p>
</div>
</article>
<!-- <h3>Classes</h3>
<ul>
<li><a href="http://cameraculture.media.mit.edu/courses/" target="_blank">MAS.531: Computational Camera: Google Glass, Microsoft Kinect and Apps</a></li>
<li><a href="http://student.mit.edu/catalog/mMASa.html#MAS.551" target="_blank">MAS.551J: Design Without Boundaries</a></li>
<li><a href="http://ocw.mit.edu/courses/media-arts-and-sciences/mas-630-affective-computing-spring-2008/" target="_blank">MAS.630: Affective Computing</a></li>
<li><a href="http://fluid.media.mit.edu/courses/2010-MAS672/" target="_blank">MAS.672: New Paradigms for Human-Computer Interaction</a></li>
<li><a href="http://mas712.media.mit.edu/" target="_blank">MAS.712: Learning Creative Learning</a></li>
<li><a href="http://student.mit.edu/catalog/mMASa.html#MAS.750" target="_blank">MAS.750: Human-Robot Interaction</a></li>
<li><a href="http://web.media.mit.edu/~lieber/Teaching/Common-Sense-Course/Common-Sense-Course-Intro.html" target="_blank">MAS.761: Common Sense Reasoning for Interactive Applications</a></li>
<li><a href="http://courses.media.mit.edu/2011spring/mas771/" target="_blank">MAS.771: Autism Theory and Technology</a></li>
<li><a href="http://student.mit.edu/catalog/mMASa.html#MAS.834" target="_blank">MAS.834: Tangible Interfaces</a></li>
<li><a href="https://www.media.mit.edu/resenv/classes/MAS836/" target="_blank">MAS.836: Sensor Technologies for Interactive Environments</a></li>
<li><a href="http://student.mit.edu/catalog/mMASa.html#MAS.837" target="_blank">MAS.837: Principles of Electronic Music Interfaces</a></li>
<li><a href="http://fab.cba.mit.edu/classes/MIT/863.08/" target="_blank">MAS.863: How to Make (Almost) Anything</a></li>
<li><a href="http://web.mit.edu/ideation/2.97/" target="_blank">2.97: Designing for People</a></li>
<li><a href="http://stellar.mit.edu/S/course/16/fa10/16.400/index.html" target="_blank">16.400/453J: Human Factors Engineering</a></li>
<li><a href="http://student.mit.edu/catalog/m16a.html#16.422" target="_blank">16.422J: Human Supervisory Control of Automated Systems</a></li>
<li><a href="http://stellar.mit.edu/S/course/16/sp09/16.470/index.html" target="_blank">16.470J: Statistical Methods in Experimental Design</a></li>
</ul> -->
</section>
<section id="seminar">
<h1>HCI Seminar</h1>
<p class="info">
<strong title="When">📅 Fridays 13:00-14:00</strong>
<a href="http://whereis.mit.edu/?go=32" title="Where">📍 Patil/Kiva Seminar Room, Stata Center (32G-449)</a>
<span>🔓 Open to the public</span>
<a href="http://lists.csail.mit.edu/mailman/listinfo/hci-seminar">📫 Subscribe</a>
<a href="mailto:[email protected]">✉️ Contact</a>
</p>
<section>
<h1>
Sample Recorded Talks
<a href="http://groups.csail.mit.edu/uid/seminar.shtml">See All</a>
</h1>
<article>
<video src="http://projects.csail.mit.edu/video/talks/hci/hciHearst.mp4" controls></video>
<h1>
<strong>Marti Hearst (UC Berkeley)</strong>
"Towards Collaborative Learning at Scale"
</h1>
</article>
<article>
<video src="http://projects.csail.mit.edu/video/talks/hci/hciHarrison.mp4" controls></video>
<h1>
<strong>Chris Harrison (CMU)</strong>
"Interacting with Small Devices in Big Ways"
</h1>
</article>
</section>
</section>
<section id="elsewhere">
<h1>HCI Elsewhere at MIT</h1>
<h2>Research Groups</h2>
<ul>
<li><a href="http://tangible.media.mit.edu/" target="_blank">Tangible Media Group</a> (Hiroshi Ishii, MIT Media Lab)</li>
<li><a href="https://www.media.mit.edu/research/groups/responsive-environments" target="_blank">Responsive Environments Group</a> (Joseph A. Paradiso, MIT Media Lab)</li>
<li><a href="https://www.media.mit.edu/research/groups/living-mobile" target="_blank">Living Mobile Group</a> (Chris Schmandt, MIT Media Lab)</li>
<li><a href="https://www.media.mit.edu/research/groups/lifelong-kindergarten" target="_blank">Lifelong Kindergarten Group</a> (Mitchel Resnick, MIT Media Lab)</li>
<li><a href="http://affect.media.mit.edu/" target="_blank">Affective Computing Group</a> (Rosalind Picard, MIT Media Lab)</li>
<li><a href="http://fluid.media.mit.edu/" target="_blank">Fluid Interfaces Group</a> (Pattie Maes, MIT Media Lab)</li>
<li><a href="http://cameraculture.media.mit.edu/" target="_blank">Camera Culture Group</a> (Ramesh Raskar, MIT Media Lab)</li>
<li><a href="http://robotic.media.mit.edu/" target="_blank">Personal Robots Group</a> (Cynthia Breazeal, MIT Media Lab)</li>
<li><a href="http://agents.media.mit.edu/" target="_blank">Software Agents Group</a> (Henry Lieberman, Junia Anacleto, MIT Media Lab)</li>
<li><a href="http://web.mit.edu/ideation/index.html" target="_blank">Ideation Laboratory</a> (Maria Yang, MIT Mechanical Engineering)</li>
<li><a href="http://persci.mit.edu/" target="_blank">Perceptual Science Group</a> (Edward Adelson, Ruth Rosenholtz, MIT Brain/Cognitive Sciences)</li>
<li><a href="http://cci.mit.edu/" target="_blank">Center for Collective Intelligence</a> (MIT Sloan)</li>
<li><a href="http://hd.media.mit.edu/" target="_blank">Human Dynamics Group</a> (MIT Media Lab)</li>
<li><a href="http://newmed.media.mit.edu/" target="_blank">New Media Medicine</a> (MIT Media Lab)</li>
</ul>
<h2>Seminars and Meetings</h2>
<ul>
<li><a href="http://media.mit.edu/events/upcoming" target="_blank">Upcoming Media Lab Talks</a></li>
<li><a href="http://bostonchilabs.org/" target="_blank">BostonCHI Labs (HCI groups around the Boston area)</a></li>
</ul>
</section>
<section id="join">
<h1>Join us!</h1>
<p>As a PhD student: apply to the <a href="http://www.eecs.mit.edu/academics-admissions/graduate-program/admissions">MIT EECS PhD program</a> by December 15.
<p>As a postdoc or UROP/SuperUROP/MEng: email us directly.
</section>
<footer>
<p>This website is open source (MIT licensed), feel free to <a href="https://github.com/LeaVerou/hci.mit.edu">fork it!</a></p>
<a href="http://mit.edu" class="logo"><img src="images/logos/mit.svg" alt="MIT" /></a>
<a href="http://csail.mit.edu" class="logo"><img src="images/logos/csail.svg" alt="CSAIL" /></a>
</footer>
<script>
window.addEventListener("scroll", evt => {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.classList.toggle("scrolled", scrollTop > 200);
});
for (let h1 of document.querySelectorAll("body > section > h1")) {
let hash = document.createElement("a");
hash.href = "#" + h1.parentNode.id;
while(h1.firstChild) hash.appendChild(h1.firstChild);
h1.appendChild(hash);
}
</script>
</body>
</html>