forked from keodotcomputer/keodotcomputer.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
284 lines (251 loc) · 19.6 KB
/
index.html
File metadata and controls
284 lines (251 loc) · 19.6 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="Keo - A Mythical Africana Webputer" />
<title>keo 🎀</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="media/keo_mascot.png" type="image/png">
</head>
<body>
<header class="site-header">
<nav class="nav container">
<a class="brand" href="#">Keo 🎀</a>
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle theme">🌙</button>
</nav>
</header>
<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-image">
<img src="media/keo_mascot.png" alt="Keo mascot">
</div>
<div class="hero-content">
<h1 class="hero-title" style="font-size: 2rem;">Design of A Mythical Africana Computer, or Keo : A People's Webputer, or Care considered Essential, or Culture over Compute.</h1>
</div>
</div>
</section>
<!--Start of Definition Section-->
<section id="Definition" class="section container">
<h2 style="font-size: 1.7325rem; color: #047931">Introduction</h2>
<figure style="float:right; margin:0 0 1rem 1rem; max-width:320px; width:35%; height:auto;">
<img src="media/courtyard.png" alt="Sheikah Slate — concept art" style="display:block; width:100%; height:auto; border-radius: 15px;">
<figcaption class="muted wb-caption">A self referential golden throne, The Egyptian Museum — <a href="https://egyptianmuseumcairo.eg/artefacts/ceremonial-throne-of-tutankhamun/" target="_blank" rel="noopener" style="color: #098663">source</a></figcaption>
</figure>
<p style="font-size: 1.25rem;">Keo is an art project that draws inspiration from media archaeology and media computation. We focus our archaeological lenses on uncovering forgotten, obsolete,
and overlooked forms of media exploring how earlier forms of mediation have influenced contemporary media technologies in pursuit of restoring ancestral wisdom as our guiding star into the future.
We use the term <span style="font-style: italic;">Africana</span> to refer to that which originates from the African continent, inclusive of her peoples, cultures, myths, cosmologies, languages, philosophies, artifacts etc.</p>
<p style="font-size: 1.25rem;">Our goal in designing a mythical Africana computer is to realize a computational medium that blends fantasy as its primary means of socio-cultural expression, interaction and connection.</p>
<p style="font-weight: bold; font-style: italic; font-size: 1.15rem;">“People who are really serious about software should make their own hardware” – Alan Kay</p>
<p style="font-size: 1.25rem;">In the same spirit as our primers before, we recognize that no virtual media is complete without its corresponding physical media and plan on designing new hardware to suit our virtual, web-based computer i.e a webputer.
</p>
<div style="clear:both;"></div>
</section>
<!--End of Definition-->
<section id="worldbuilding" class="section container">
<h2 style="font-size: 1.7325rem; color: #047931">Reflections on Worldbuilding</h2>
<p style="font-weight: bold; font-style: italic; font-size: 1.15rem;">"You got to make your own worlds and write yourself in" – Octavia Butler</p>
<figure style="float:left; margin:0 15px 1rem 1rem; max-width:320px; width:35%; height:auto;">
<img src="media/bp_marketplace.webp" alt="Wakanda Marketplace" style="display:block; width:100%; height:auto; border-radius: 15px;">
<figcaption class="muted wb-caption">Wakanda marketplace, Marvel Studios — <a href="https://www.marvel.com/movies/black-panther-wakanda-forever" target="_blank" rel="noopener" style="color: #098663">source</a></figcaption>
</figure>
<p style="font-size: 1.25rem;">Our speculative mythical world builds on the tarot's abstract symbolic language as a highly adaptable multifaceted tool for creative storytelling, navigating growth, major transitions, and provoking deeper reflection.
We set the scene in an afrofuturistic courtyard with the court cards representing different character archetypes and the suits serving as elemental biomes for the distinct geographical, social and economic forces and that encompass the world interwoven together with rich artwork, animations and a deep unified lore system.</p>
<p style="font-size: 1.25rem;">While reflecting on the critical role that myths and cultural practices play by providing the material basis that constitute our mythical world; bridging between different cultures across time, we recognize their supplemental historical significance as mirrors that reflect what has been remembered and expose what has been erased or forgotten.
A reminder that without actively engaging in cultural archaeology and preservation, we risk recreating futures that replicate the same absences and erasures embedded in the past. Since memory work is a collectively sustained effort, communal approaches to preservation remain as essential for maintaining the continuity of ancestral wisdom across generations.</p>
<p style="font-size: 1.25rem;">Unfortunately for most Africana communities, efforts towards preservation and circulation of cultural memory remain constrained by an overreliance on external technological and scientific infrastructures.
To loosen this dependency, we consider the creative use of widely accessible networked media production tools, such as Decentralized Web (DWeb) technologies, which offer a way to distribute responsibility and agency by prioritizing indigenous solutions
that enable communities to assert authorship and sustain custodianship of their heritage outside monopolized global infrastructures.</p>
<div style="clear:both;"></div>
</section>
<!-- repetition -->
<section id="design" class="section container">
<h2 style="font-size: 1.7325rem; color: #047931">Designing for Play</h2>
<p style="font-weight: bold; font-style: italic; font-size: 1.15rem;">"We think with the objects we love; we love the objects we think with." - Sherry Turkle</p>
<figure style="float:right; margin:0 0 1rem 1rem; max-width:320px; width:35%; height:auto;">
<img src="media/botw_sheikah_slate.png" alt="Sheikah Slate device" style="display:block; width:100%; height:auto; border-radius: 12px;">
<figcaption class="muted wb-caption">Sheikah Slate, Nintendo — <a href="https://www.nintendo.com/us/store/products/the-legend-of-zelda-breath-of-the-wild-switch/" target="_blank" rel="noopener" style="color: #098663">source</a></figcaption>
</figure>
<p style="font-size: 1.25rem;">We re-imagine the analogical influences of earlier computing systems centered around the desks' top and office routines such as printing, typing, filing, inbox trays, folders, waste cans, windows, spreadsheets etc.
to reflect contemporary interactive media interfaces that cater to play, creative exploration, experimentation and collaboration. Supporting richer interactions and meaningful connections by expanding the social bandwidth through
voice, video, movement and engagement with the environment enabling socially networked agentic real-time multiplayer experiences.</p>
<p style="font-size: 1.25rem;">Drawing inspiration from video games and other forms of interactive storytelling that center imagination, joy and cultural identity similar to our myth based social layer, we add a complementary compute layer; the keo webputer which builds on the web browser as a widely accessible networked platform for creative production and experimentation
following in the same light as our primers, as seen manifest in the Lively kernel and the Croquet WebOS architectures.
<p style="font-size: 1.25rem;"> We design with resilience, autonomy and interdependence in mind building on DWeb standards like Content Identifiers (CIDs)
for distributed file retrival and archival, an InterPlanetary Naming System (IPNS) for decentralized top level domains, and Decentralied Identifiers (DIDs) for managing self certifying identities, wallets, and civic engagement etc.
We leverage seasoned web technologies like WebAssembly to run at near-native speed, and WebAPIs such as WebRTC for peer to peer communication, WebGPU for accelerated graphics processing, and Web Serial for extended I/O; bridging between the virtual and physical world and building location based experiences.
Utilizing Object Capability (OCap) technologies for enhancing user safety and encouraging agentic creative expression with accessible and malleable end user interfaces that combine touch inputs, pen support, drag and drop, scripting etc. to stimulate creativity and discovery through remixing echoing earlier systems like Scratch and Etoys.
Converging as a complete, unified in-browser experience that materializes as a fun physical object evoking joy and inviting curiosity in a similar effort as the <a href="https://mitmuseum.mit.edu/collections/object/2008.025.001" target="_blank" rel="noopener" style="color: #098663">XO Laptop</a>.</p>
<div style="clear:both;"></div>
</section>
<!--End-->
<section id="powered_by" class="section container">
<h2 style="color: #047931;">Inspired by</h2>
<div class="partners-row">
<a class="partner" href="https://www.metmuseum.org/art/collection" target="_blank" rel="noopener">
<img src="media/the_met.jpg" alt="The Met logo">
<span class="partner-name">The Met</span>
</a>
<a class="partner" href="https://themorgan.org/collection-highlights" target="_blank" rel="noopener">
<img src="media/the_morgan.png" alt="The Morgan logo">
<span class="partner-name">The Morgan</span>
</a>
<a class="partner" href="https://adinkrasymbols.org/symbols/sankofa/" target="_blank" rel="noopener">
<img src="media/sankofa_bcf.png" alt="Sankofa symbol">
<span class="partner-name">Sankofa</span>
</a>
<a class="partner" href="https://snap.berkeley.edu/" target="_blank" rel="noopener">
<img src="media/Snap!.svg.png" alt="Snap! logo">
<span class="partner-name">Snap!</span>
</a>
<a class="partner" href="https://github.com/croquet/greenlight-core" target="_blank" rel="noopener">
<img src="media/greenlight.png" alt="Croquet logo">
<span class="partner-name">Greenlight</span>
</a>
<a class="partner" href="https://ipfs.github.io/helia/" target="_blank" rel="noopener">
<img src="media/helia.png" alt="Helia logo">
<span class="partner-name">Helia</span>
</a>
<a class="partner" href="https://docs.multisynq.io" target="_blank" rel="noopener">
<img src="media/multisynq.png" alt="Multisynq logo">
<span class="partner-name">Multisynq</span>
</a>
<a class="partner" href="https://docs.starknet.io/learn/protocol/intro" target="_blank" rel="noopener">
<img src="media/starknet.png" alt="Starknet logo">
<span class="partner-name">Starknet</span>
</a>
<a class="partner" href="https://www.lego.com/en-us/themes/mindstorms/about" target="_blank" rel="noopener">
<img src="media/LEGO.png" alt="LEGO logo">
<span class="partner-name">LEGO</span>
</a>
<a class="partner" href="https://blog.playstation.com/2021/05/13/devs-reveal-their-upcoming-dualsense-wireless-controller-implementations/" target="_blank" rel="noopener">
<img src="media/PlayStation.jpg" alt="Playstation logo">
<span class="partner-name">PlayStation</span>
</a>
<a class="partner" href="https://www.sciencetarot.com/" target="_blank" rel="noopener">
<img src="media/science_tarot.jpg" alt="Science Tarot icon">
<span class="partner-name">Science Tarot</span>
</a>
<a class="partner" href="https://github.com/croquet/microverse" target="_blank" rel="noopener">
<img src="media/microverse.png" alt="Croquet logo">
<span class="partner-name">Microverse</span>
</a>
<a class="partner" href="https://computerhistory.org/collections/" target="_blank" rel="noopener">
<img src="media/CHM.jpg" alt="Croquet logo">
<span class="partner-name">Computer History Museum</span>
</a>
</div>
</section>
<!--Reference/Bibliography-->
<section id="bibliography" class="section container">
<h2 style="color: #047931;">Further Reading</h2>
<p class="mascot-credit", style="font-size: 1rem;">*The Keo mascot is an adaptation of a Mbambi mask made by a Pende artist obtained from the <a href="https://collections.artsmia.org/art/5601/mbambi-mask-pende-artist" target="_blank" rel="noopener" style="color: #098663">MIA</a></p>
<ul class="bib-list">
<li>
<a href="https://yalebooks.yale.edu/book/9781588397713/africa-and-byzantium/" target="_blank" rel="noopener" style="color: #098663">Africa and Byzantium</a>
<span class="bib-desc">Africa and Byzantium - Edited by Andrea Myers Achi (2023)</span>
</li>
<li>
<a href="https://www.metmuseum.org/exhibitions/listings/2020/sahel-art-empire-sahara/exhibition-guide" target="_blank" rel="noopener" style="color: #098663">Sahel: Art and Empires on the Shores of the Sahara</a>
<span class="bib-desc">Sahel: Art and Empires on the Shores of the Sahara - LaGamma (2020)</span>
</li>
<li>
<a href="https://www.metmuseum.org/exhibitions/divine-egypt/exhibition-objects" target="_blank" rel="noopener" style="color: #098663">Divine Egypt</a>
<span class="bib-desc">Divine Egypt - Edited by Diana Craig Patch and Brendan Hainline (2025)</span>
</li>
<li>
<a href="https://dl.acm.org/doi/pdf/10.1145/3643834.3661605" target="_blank" rel="noopener" style="color: #098663">Black to the Future</a>
<span class="bib-desc">Black to the Future - The Power of Designing Afrofuturist Technology with Black Women, Femmes, and Non-Binary People - Klassen et al. (2024)</span>
</li>
<li>
<a href="https://computinged.wordpress.com/2025/02/10/media-computation-in-python-running-in-google-colab-notebooks/" target="_blank" rel="noopener" style="color: #098663">Media Computation</a>
<span class="bib-desc">Media Computation in Python running in Google Colab Notebooks - Guzdial (2025)</span>
</li>
<li>
<a href="https://www.tandfonline.com/doi/epdf/10.1080/14733285.2022.2098005" target="_blank" rel="noopener" style="color: #098663">Agential Realism and Education</a>
<span class="bib-desc">This is Not a Photograph of Zuko’: how agential realism disrupts child-centred notions of agency in digital play research - Murris (2022)</span>
</li>
<li>
<a href="https://hirschfeld.org/writings/media/IngallsFelgentreffHirschfeldKrahnLinckeRoederTaivalsaariMikkonen_2016_AWorldOfActiveObjectsForWorkAndPlayTheFirstTenYearsOfLively_AuthorsVersion.pdf" target="_blank" rel="noopener" style="color: #098663">A World of Active Objects for Work and Play</a>
<span class="bib-desc">A World of Active Objects for Work and Play; The First Years of Lively - Ingall et al. (2016)</span>
</li>
<li>
<a href="https://tinlizzie.org/IADocs/live-programming-greenlight.pdf" target="_blank" rel="noopener" style="color: #098663">Croquet Greenlight</a>
<span class="bib-desc">An Experiment in Live Collaborative Programming on the
Croquet Shared Experience Platform - Yoshiki et al. (2022)</span>
</li>
<li>
<a href="https://tinlizzie.org/IADocs/live2022-croquet.pdf" target="_blank" rel="noopener" style="color: #098663">Croquet Microverse</a>
<span class="bib-desc">Live Programming and Text Editor Integration in the Croquet
Microverse 3D Collaborative Construction System - Yoshiki et al. (2022)</span>
</li>
<li>
<a href="https://www2.ccs.neu.edu/racket/pubs/dissertation-garnock-jones.pdf" target="_blank" rel="noopener" style="color: #098663">Syndicated Actors</a>
<span class="bib-desc">Conversational Concurrency - Garnock-Jones (2017)</span>
</li>
<li>
<a href="https://shop.mexicansummer.com/merch/495898-lori-emerson-other-networks-a-radical-technology-sourcebook" target="_blank" rel="noopener" style="color: #098663">Other Networks: A Radical Technology Sourcebook</a>
<span class="bib-desc">Other Networks: A Radical Technology Sourcebook - Emerson (2025)</span>
</li>
<li>
<a href="https://web.media.mit.edu/~lieber/Publications/History-of-Logo.pdf" target="_blank" rel="noopener" style="color: #098663">The history of LOGO</a>
<span class="bib-desc">History of LOGO - Cynthia et al. (2020)</span>
</li>
<li>
<a href="https://worrydream.com/KillMath/" target="_blank" rel="noopener" style="color: #098663">Kill Math</a>
<span class="bib-desc">Kill Math - Bret (2011)</span>
</li>
<li>
<a href="https://smalltalkzoo.computerhistory.org/" target="_blank" rel="noopener" style="color: #098663">Smalltalk Zoo</a>
<span class="bib-desc">Smalltalk Zoo - Curated by Dan Ingalls (2020)</span>
</li>
<li>
<a href="https://bookshop.org/p/books/the-dream-machine-m-mitchell-waldrop/44fd503bb210fb96?ean=9781732265110&next=t" target="_blank" rel="noopener" style="color: #098663">The Dream Machine</a>
<span class="bib-desc">The Dream Machine, 4th Edition - Waldrop (2018)</span>
</li>
<li>
<a href="https://dspace.mit.edu/bitstream/handle/1721.1/5731/AIM-514.pdf" target="_blank" rel="noopener" style="color: #098663">Design of LISP-Based Processors</a>
<span class="bib-desc">Design of LISP-Based Processors, or SCHEME: A Dielectric LISP, or Finite Memories Considered Harmful, or LAMBDA The Ultimate Opcode - Guy Steel Jr. & Gerald Sussman (1979)</span>
</li>
</ul>
</section>
<section id="contact" class="section container">
<h2 style="color: #047931;">Say hello</h2>
<p>Send us an <a href="mailto:keodotcomputer@proton.me" style="color: #098663;">email</a>.</p>
<div class="contact-grid">
<div>
<form id="newsletter-form" class="newsletter-form" action="https://formspree.io/f/xaqyrpoj" method="POST" novalidate>
<label for="email" style="color: #047931>Be the first to know</label>
<div class="field-row">
<input id="email" name="email" type="email" placeholder="your@email.com" required autocomplete="email">
<button class="btn primary" type="submit" style="background: #21c697; border: none;">Subscribe</button>
</div>
<input type="hidden" name="_subject" value="New newsletter signup">
<p id="newsletter-msg" class="newsletter-msg" aria-live="polite"></p>
</form>
</div>
<aside>
<p class="muted" style="color: #047931;">Find us on</p>
<ul class="socials-list" role="list">
<li><a href="https://bsky.app/profile/keo.computer" target="_blank" aria-label="Blacksky">Bluesky</a></li>
<li><a href="https://instagram.com/keodotcomputer" target="_blank" aria-label="Instagram">Instagram</a></li>
<li><a href="https://bsky.app/profile/keo.computer" target="_blank" aria-label="Discord">Discord (DM for invite)</a></li>
<li><a href="https://github.com/keodotcomputer" target="_blank" aria-label="GitHub">GitHub</a></li>
</ul>
</aside>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<img src="media/Cc_by-sa_4.svg" alt="Creative Commons Attribution-ShareAlike 4.0" class="footer-license">
<div>🄯 <span id="year"></span> Keo — A People's Webputer.</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>