User:Kiara/Research/WebSpell/Prototypes

Research Contents
General page
— Notes ——— Prototypes ——— Try Out Nights
— Project Proposal ——— Drafts ——— Final
— Thesis Outline ——— Drafts ——— Final
— (more or less) Rapid Prototypes ——— WebSpell Prototypes ——— Workshops

Prototype #0 Invoking the Holy Handmade Web

Single webpage made during methods class to mock J.R. Carpenter's text
https://hub.xpub.nl/cerealbox/~kiara/methods/handmade-web/

Prototype #1 Pure HTML home page

This is a 99% HTML home page (1% of CSS)
https://kirayana.codeberg.page/xpub-GRS-prototypes/prototype_01/

Prototype #2 Nomai home page

A home page using the Nomai Script[1] to map out the website.
Each branch of the script links to a page, allowing for a non-linear reading, wandering and mystery.
The script is acting as a code, making also a mise en abîme between the script itself and web languages.

[1] The Nomai Script
The Nomai Script is an ancient fictional language created for the video game Outer Wilds. The Nomais were an ancient population that explored galaxies and left traces of their passage by writing on various surfaces. The script resembles spirals with branches and complex architecture. The spirals almost loop into each other, forming entire conversations.

Resources:

• Nomai Writing, blog post by Evan Fields (no game spoilers)
• nomai-writing.com, the online translator built by Evan Fields
  • changing the handwriting factor or seed integer: not really interesting, for future tests I use handwriting: 0.5 and seed: 2500
  • the website offers a "download" option that is not super practical (it save the web page) but inspecting it allows to get the svg paths to replicate the shape!

Examples of "spell ring" in Nomai script, using nomai-writing.com:

• 

  encoding base: 200 000
  handwriting factor: 0.3
  seed: 47

• 

  encoding base: 2000
  handwriting factor: 0.3
  seed: 47

• 

  encoding base: 27
  handwriting factor: 0.3
  seed: 47

• 

  encoding base: 5000
  handwriting factor: 0.3
  seed: 47

• 

  encoding base: 122 587
  handwriting factor: 0.3
  seed: 47

Prototype #3 Nomai spiral and translation concepts

As seen in the Prototype #1, I wrote a draft of introduction for the website. Then I gave it to nomai-writing.com and got this much more relevant result:

From this, I could draft a shorter text so the spiral is smaller and the details more accessible and usable as links to the other pages. To make the text readable, the interface could have a button offering the actual text on-click.

Prototype #3 The web-based prototype

The text used for this prototype is the following:

Here gather the Guardians of the Web. The enchant..e..r..esses, sorcere..rs..ses, witches and wizards of CSS and online-caring. Through CSS rituals, cyber incantations and various other magic interventions, they work quietly towards a common unspoken goal: caring, cherishing, nurturing the sacred space that is the web.

and this is the Nomai output:

14-10-2025 The homepage is looking good -- the spiral is a svg path though, breaking it down into different chunks to circle into <a> tags is going to be quite a mess...
Also remains the enigma of the content, since the intro text mentions people, it could be a repository of references for my research (actually: genius??? I'm having the idea while writing, didn't think about it before!!)

~ Coming soon: list of the references present on the website ~

Prototype is still available at https://kirayana.codeberg.page/xpub-GRS-prototypes/

Prototype #4 Neocities code-a-thon

Page made during the neocities code-a-thon of 10-11-2025, hosted at .zip by Roos Groothuizen https://for-the-record.neocities.org/05_Nightmare

Prototype #5 The Indie Web Puzzle

This is a poster puzzle, showcasing some of the websites listed on https://smallweb.cc/
The idea is to group together visually websites that pertain to the indie web, to build a non-exhaustive map of the indie web.
The puzzle is made out of screenshots of those websites.

Some characteristics for curation:

• special attention to visual/graphical materiality
• text-only pages are chosen only if they have very recognisable characteristics (font, colours, etc.)
• the screenshot is not necessarily taken from the homepage

Here's a first composition:

Prototype #6 The Ultimate Prototype

Last edited: 05-01-2026, 14:43
https://for-the-record.neocities.org/

this is a webring
containing webrings
grouping together all my web prototypes (chronologically)

it is hosted on neocities
it is indie
it is not complying with the web accessibility guidelines
but it is very singular and personal for sure

Last edited: 20-01-2026, 11:11
Adding to this, here is a small plan for future additions:

• Content
  • One page = one prompt (list below)
    • parody
    • maze (to continue and finish)
    • build shapes in CSS
    • xpub webring
    • neocities 90s web aesthetics
    • let it snow
    • karmic connections
    • CSS animation
    • anchor position
    • visual anarchy
    • the offline surprise (from Maisa in Webland at Varia)
    • ...
• Polishing
  • Make it responsive
  • Make it as accessible as possible

tbc...

Prototype #7 CMS

This prototype is actually a journey. I will log my exercises and experiments into discovering eleventy and W, in order to pick one as the running engine for my website (grad project).

7.1 Eleventy

05-01-2026
To learn eleventy, I used the first step described on the official website and this tutorial.
The tutorial is a bit confusing after the official guide. I would recommend starting directly with one of the tutorials linked at the bottom of the official guide (here).

Anyways, this tutorial is helping (not explicitly, but still) to understand the structure of a project directory:

This tutorial is pretty neat for the fact that it contains and explains some accessibility tips.

I am beginning to see the potential of eleventy. Since we use nunjucks, markdown, json and html we can build templates and reusable code snippets, which is extremely handy when a website has recurring elements on every page (a logo, a menu, a footer, etc.)!

I am now reaching a part where we need to use javascript. Eleventy already runs through node.js, so little note to myself: check the website weight and compare with W ---> is JS really necessary? Also, actually, json is a database language, maybe this also adds to the weight? Cause so far the website has only one page and soooo many files :(

Basically, summing up what I've learned so far:

• the working content (code) of the website is in the src folder
• with the eleventy.config.js file we can pass files and folders to dist which is the actual content (??? not clear) and retrieve the content from the collections (see below)
• the data folder contains data (json files) that are implemented in code snippets found in the _includes/partials folder to be then reused in the _includes/layouts files
• other folder inside src are collections (categories) of the website. They contain md files that serves for ...

End of today: I reached lesson 9 (out of 31) and I fear the complexity of the file structure. I read through the tutorial, but the connections between files is not quite clear, creating an element or a page sounds like a hassle of tutorial reading until it becomes natural. But this process sounds way too long to be manageable... I'll try W and see if it comes in more practical.

7.2 W

05-01-2026
I am trying to install W and... It requires to have a server...
I do not have a server, and installing it on cerealbox... well I don't know if it is worth it, given that I am looking for a new web host. I guess I'll have to sort that issue before going further.