hellohci/index.html at main · careylzh/hellohci · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tangible User Interfaces: An HCI Ancestry</title>
    <meta
      name="description"
      content="A visual timeline tracing the HCI ideas that shaped Tangible Bits and tangible user interfaces."
    >
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <a class="skip-link" href="#main-content">Skip to main content</a>
    <div class="site-shell">
      <aside class="site-sidebar" aria-label="Site navigation">
        <a class="site-title" href="index.html">HCI History</a>
        <nav class="site-nav" aria-label="Pages">
          <a class="nav-link active" href="index.html">Home</a>
          <a class="nav-link" href="docs.html?doc=HCI_TANGIBLE_BITS_PARADIGMS_NOTES">HCI Tangible Bits Paradigms Notes</a>
          <a class="nav-link" href="docs.html?doc=TRENDS_IN_HCI_2021-2026">Trends In HCI 2021 2026</a>
          <a class="nav-link" href="docs.html?doc=SPATIAL_COMPUTING">Spatial Computing</a>
          <a class="nav-link nav-sublink" href="docs.html?doc=FF_HEAD_MOUNTED_DISPLAYS">Head-Mounted Displays</a>
          <a class="nav-link nav-sublink" href="docs.html?doc=FF_SMART_GLASSES">Smart Glasses</a>
          <a class="nav-link nav-sublink" href="docs.html?doc=FF_HANDHELD_AR">Handheld AR</a>
          <a class="nav-link nav-sublink" href="docs.html?doc=FF_PROJECTION_AND_ROOMS">Projection and Rooms</a>
          <a class="nav-link nav-sublink" href="docs.html?doc=FF_SENSED_SPACES">Sensed Spaces</a>
          <a class="nav-link" href="sources.html">Sources</a>
        </nav>
      </aside>

      <div class="site-frame">
        <header class="topbar">
          <a class="mobile-brand" href="index.html">HCI History</a>
          <div class="topbar-actions">
            <a class="topbar-link" href="sources.html">Sources</a>
            <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Switch to original theme">Original</button>
          </div>
        </header>

        <main id="main-content" class="content-shell">
          <header class="page-header">
            <p class="eyebrow">HCI history</p>
            <h1>Tangible User Interfaces: An HCI Ancestry</h1>
            <p class="lede">
              A visual lineage from desktop HCI toward rooms, objects, bodies,
              ambient media, and embodied practice.
            </p>
          </header>

          <section class="summary-band" aria-label="Core synthesis">
            <article>
              <span>Anchor</span>
              <strong>Tangible Bits, 1997</strong>
              <p>Bits become coupled to atoms through objects, surfaces, and ambient materials.</p>
            </article>
            <article>
              <span>Main inheritance</span>
              <strong>Environment + materiality</strong>
              <p>Ubicomp, augmented desks, graspable objects, and reactive rooms converge.</p>
            </article>
            <article>
              <span>Afterlives</span>
              <strong>Embodiment, reflection, spatial computing</strong>
              <p>Dourish and slow technology explain why situated material interaction matters; Greenwold's spatial computing recombines AR and TUI into the paradigm behind today's headsets.</p>
            </article>
          </section>

          <section class="timeline-panel" aria-labelledby="timeline-title">
            <div class="panel-head">
              <div>
                <p class="eyebrow">Interactive timeline</p>
                <h2 id="timeline-title">Genealogy of tangible interaction</h2>
              </div>
              <div class="controls" aria-label="Timeline controls">
                <button class="filter active" type="button" data-filter="all" aria-pressed="true">All</button>
                <button class="filter" type="button" data-filter="ancestor" aria-pressed="false">Ancestors</button>
                <button class="filter" type="button" data-filter="anchor" aria-pressed="false">Anchor</button>
                <button class="filter" type="button" data-filter="descendant" aria-pressed="false">Afterlives</button>
              </div>
            </div>

            <div class="visual-grid">
              <div class="chart-wrap" aria-label="Timeline chart">
                <svg id="timeline" role="img" aria-labelledby="chart-title chart-desc"></svg>
              </div>
              <aside class="detail-card" aria-live="polite">
                <p class="eyebrow" id="detail-role">Select a node</p>
                <h3 id="detail-title">Tangible Bits</h3>
                <p id="detail-meta">Ishii & Ullmer, 1997</p>
                <p id="detail-copy">
                  Tangible Bits sits at the convergence of environmental computing,
                  material interaction, peripheral awareness, and situated embodied practice.
                </p>
                <figure class="detail-visual">
                  <svg id="detail-image" viewBox="0 0 320 180" role="img" aria-labelledby="detail-image-title detail-image-desc"></svg>
                  <figcaption id="detail-caption"></figcaption>
                </figure>
              </aside>
            </div>
          </section>

          <section class="lineage" aria-labelledby="lineage-title">
            <p class="eyebrow">Core genealogy</p>
            <h2 id="lineage-title">Four currents feeding Tangible Bits</h2>
            <div class="lineage-grid">
              <article>
                <h3>Environment</h3>
                <p>Ubiquitous computing, context awareness, reactive environments, and media spaces relocate interaction from the desktop into lived places.</p>
              </article>
              <article>
                <h3>Material Coupling</h3>
                <p>DigitalDesk and graspable UIs make paper, tables, and physical handles active carriers of computational meaning.</p>
              </article>
              <article>
                <h3>Attention</h3>
                <p>Calm technology turns the periphery into a design surface for ambient awareness instead of constant interruption.</p>
              </article>
              <article>
                <h3>Embodiment</h3>
                <p>Wearables, augmented reality, embodied interaction, and slow technology extend TUI toward perception, bodily skill, and reflective duration.</p>
              </article>
            </div>
          </section>
        </main>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>