CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS,...
Transcript of CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS,...
![Page 1: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/1.jpg)
Human Computer Interaction Laboratory
@jonfroehlich Assistant Professor Computer Science
CMSC838 Tangible Interactive Computing
Week 01 | Lecture 02 | Jan 29, 2014
About You, Tangible Bits Discussion, &
Hackerspace Tour
![Page 2: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/2.jpg)
class today‘s
![Page 3: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/3.jpg)
Today
1. About you
2. Tangible Bits Reading Discussion
3. Hackerspace Walk / Tour
![Page 4: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/4.jpg)
Graduate Degree Programs
![Page 5: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/5.jpg)
Programming Language Experience
![Page 6: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/6.jpg)
Programming Language Experience
![Page 7: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/7.jpg)
Favorite Programming Language
![Page 8: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/8.jpg)
Experience Levels
![Page 9: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/9.jpg)
Experience Levels
0% 20% 40% 60% 80% 100%
Embedded Microcontroller Programming (e.g., Arduino, PIC)
3D CAD (e.g., Solidworks, Autocad)
Digital Fabrication: 2D cutting (laser or vinyl cutter)
PCB layout and design (e.g., Eagle)
Digital Fabrication: 3D printing
Mobile Programming (e.g., iOS, Android SDK)
Soldering
Analyzing circuits (Multimeter, Logic analyzer, oscilloscope)
General shop skills (drilling, cutting, etc.)
Breadboarding simple sensing/actuation circuits
User Interface Design (e.g., HTML, JSS, Flash)
Web Development (Javascript & Server-side programming)
Systems Programming (e.g., C/C++/Java/C#)
No Experience or Beginniner Intermediate Advanced or Expert
![Page 10: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/10.jpg)
Experience Levels
0% 20% 40% 60% 80% 100%
Embedded Microcontroller Programming (e.g., Arduino, PIC)
3D CAD (e.g., Solidworks, Autocad)
Digital Fabrication: 2D cutting (laser or vinyl cutter)
PCB layout and design (e.g., Eagle)
Digital Fabrication: 3D printing
Mobile Programming (e.g., iOS, Android SDK)
Soldering
Analyzing circuits (Multimeter, Logic analyzer, oscilloscope)
General shop skills (drilling, cutting, etc.)
Breadboarding simple sensing/actuation circuits
User Interface Design (e.g., HTML, JSS, Flash)
Web Development (Javascript & Server-side programming)
Systems Programming (e.g., C/C++/Java/C#)
No Experience or Beginniner Intermediate Advanced or Expert
![Page 11: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/11.jpg)
Experience Levels
0% 20% 40% 60% 80% 100%
Embedded Microcontroller Programming (e.g., Arduino, PIC)
3D CAD (e.g., Solidworks, Autocad)
Digital Fabrication: 2D cutting (laser or vinyl cutter)
PCB layout and design (e.g., Eagle)
Digital Fabrication: 3D printing
Mobile Programming (e.g., iOS, Android SDK)
Soldering
Analyzing circuits (Multimeter, Logic analyzer, oscilloscope)
General shop skills (drilling, cutting, etc.)
Breadboarding simple sensing/actuation circuits
User Interface Design (e.g., HTML, JSS, Flash)
Web Development (Javascript & Server-side programming)
Systems Programming (e.g., C/C++/Java/C#)
No Experience or Beginniner Intermediate Advanced or Expert
![Page 12: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/12.jpg)
I enjoy "making" photographs (composing, capturing, then
editing), though that is a fairly intangible process/product. I've
also enjoyed creating hand-lettered typography and fonts.
Scott Klemmer, Bjoern Hartmann, Leila Takayama From: How Bodies Matter: Five Themes for Interaction Design
DIS, 2006
Question: This class is about making. Tell me about something that you are proud of making (e.g., iPhone app, balsa wood tower, giant furniture fort, death star out of legos, oil painting of your favorite animated gif).
I was a computer engineer in undergrad, had the opportunity
to make a two wheeled robot that played dodgeball, it fired
high velocity raquet balls.
I took off a semester from college and moved into a one
room apartment. I then proceeded to install in my living room
a ceiling sculpture made out of drinking straws and yarn using
a tetrahedral pattern.
![Page 13: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/13.jpg)
I have a Makerbot Rep 2 in my
apartment :) I recently printed out a
really great lamp. The design is not
my own, but that of a really talented
designer on Thingiverse (Emett -
http://www.thingiverse.com/emmett/
overview) What's so cool about this
piece is it printed in two parts. All of
the moving pieces are printed in
place. I once wired up an Arduino to
a Mathmos Aduki (read- tricolor led
under a weirdly shaped diffuser)
Scott Klemmer, Bjoern Hartmann, Leila Takayama From: How Bodies Matter: Five Themes for Interaction Design
DIS, 2006
Question: This class is about making. Tell me about something that you are proud of making (e.g., iPhone app, balsa wood tower, giant furniture fort, death star out of legos, oil painting of your favorite animated gif).
![Page 14: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/14.jpg)
I made a wedding cake hat for a
friend. Had a blast putting it
together.
Scott Klemmer, Bjoern Hartmann, Leila Takayama From: How Bodies Matter: Five Themes for Interaction Design
DIS, 2006
Question: This class is about making. Tell me about something that you are proud of making (e.g., iPhone app, balsa wood tower, giant furniture fort, death star out of legos, oil painting of your favorite animated gif).
![Page 15: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/15.jpg)
discussion reading
![Page 16: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/16.jpg)
![Page 17: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/17.jpg)
Live Wire (or “Dangling String”)
Natalie Jeremijenko, 1995
Developed while Natalie was an artist-in-
residence at Xerox PARC. One of the earliest
examples of an “Ambient Interface”
The movement of the dangling wire is proportional to the number of packets on the network. That is, the more traffic on the local area network, the higher the frequency of the "wiggles." The transceiver plugs into the network, and the dynamic behavior of the wire become an intuitive peripheral representation of the network activity. In contrast to a screen based graph of ethernet activity this device is a shared social display of information.
![Page 18: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/18.jpg)
Making the invisible, visible.
![Page 19: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/19.jpg)
Timo Arnall, Jørn Knutsen, & Einar Martinussen, Immaterials: Light Painting WiFi
![Page 20: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/20.jpg)
Timo Arnall, Jørn Knutsen, & Einar Martinussen, Immaterials: Light Painting WiFi
![Page 21: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/21.jpg)
Timo Arnall, Jørn Knutsen, & Einar Martinussen, Immaterials: Light Painting WiFi
![Page 22: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/22.jpg)
Helen Evans and Heiko Hansen, Nuage Vert, http://hehe.org2.free.fr
![Page 23: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/23.jpg)
Helen Evans and Heiko Hansen, Nuage Vert, https://vimeo.com/17350218#
![Page 24: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/24.jpg)
Kuznetsov et al., Red Balloon, Green Balloon, Sensors in the Sky, UbiComp2011
![Page 25: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/25.jpg)
Kuznetsov et al., Red Balloon, Green Balloon, Sensors in the Sky, UbiComp2011
![Page 27: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/27.jpg)
The metaDESK Ullmer & Ishii, UIST1997 Source: https://vimeo.com/44545109
![Page 29: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/29.jpg)
ambientROOM Ishii et al., CHI1998 Source: https://vimeo.com/48815734
![Page 30: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/30.jpg)
transBOARD
Ullmer & Ishii, ~1997
The transBOARD is a Tangible Bits platform which explores the use of a digitally enhanced whiteboard as a model of a wall in the future. The transBOARD supports distributed access to physical whiteboard activity. Distributed users can monitor realtime drawing processes over the internet or can be aware of drawing activity through ambient displays in the ambientROOM. The transBOARD also supports the use of physical icons (phicons) as containers of digital strokes. In contrast to the metaDESK, the transBOARD provides an interesting platform for considering tangible interfaces with rich input, but limited output modalities.
![Page 31: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/31.jpg)
![Page 32: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/32.jpg)
![Page 33: CMSC838 Week 01 | Lecture 02 | Jan 29, 2014 About You ...User Interface Design (e.g., HTML, JSS, Flash) Web Development (Javascript & Server-side programming) Systems Programming (e.g.,](https://reader034.fdocuments.us/reader034/viewer/2022042222/5ec92d73b368590bb854ad21/html5/thumbnails/33.jpg)