introduction
why are paths important?
A simple website can be a single file (hmtl). But most websites consist of many files: text content, code, stylesheets, media content, scripts...What makes a website work are not files themself, but linking them!
if a link is a path between files
each part of a link becomes a direction that we give to the computer
where and how do we use paths?
Today we will focus on the paths inside of an html <a> anchor tag. But this is not the only place they appear. Take a look at your browser address bar: the path you see here is a url. Can you observe how the url changes when you visit different subpages of a website? Does it relate to the content and structure you see on the page? When encoded semantically (readable) urls can be helpful for navigating between pages and subpages 5.
We can understand this more clearly if we look at the address bar as a navigator between files, not only on the web, but also local ones.
absolute and relative paths
- absolute paths
- is a full url. It is commonly used to link external files. I like to think of absolute paths as universal since they dont depend on the position you define it from.
https://upload.wikimedia.org/wikipedia/commons/7/72/Olifantenpaadje_Sint_Jozefstraat_Deurne_2022_2.jpg- relative paths
- are partial. They point to files included within the current directory or filesystem. A relative path is situated, it depends on the location from where you define it. Relative paths are like giving direction to someone you meet on the street: the directions you give depend on where you are right now.
images/desire-path.jpg
moving up and down the tree
Lets look at a common website directory structure. In this example, we define relative paths, so our location is important. We pretend to be in index.html
your-project-folder
├── index.html
├── content
└── assets
├── css
│ └── style.css
└── js
└── script.js
↘ moving down the tree, from outside to the inside of a sub directory: assets/css/style.css
↖ moving up the tree, from inside of a directory go one level up: ../another-project-folder/index.html
exercise
Today we'll make a website that is a jouney, a quest, a route, a collection of paths through which we can travel.
below are a few steps to get started:
- Can you think of either
- a route that you take often and feels familiar to you (can be a commute or walk …) or
- a place you’d like to be in right now, then map your journey how to get there
- which spaces do you traverse on this route? which waypoints can you determine? what do you see?
- make a subpage for each space or waypoint, using relative filepaths inside links to travel through them
download template
some more questions / ideas
- Does your route have places in common with your classmates? You can link to them too!
- Is your journey very nested or lateral? (does it go through many folders or is all on the same level?)
- If a link is a path, does its link text reveal the address it points to (/path/to/place) or does it say something else?
- How do you style your links? How can they be recognized as links, different from other text? Are they hidden clues or obvious and loud signs?
upload
in the end of the workshop, please upload your website here: tba
resources
helpful tutorials
references
- Drawing from A Pattern Language: Towns, Buildings, Construction by Christopher Alexander, Sara Ishikawa and Murray Silverstein (1977) is a book on architecture, urban design and communal living.
- Desire paths are unplanned small trails formed by erosion caused by human or animal traffic. Usually representing the path of least resistance, those routes might be formed into actual paved ways later.
- Psychogeography is an exploration of urban environments that focusses on interpersonal connections to places and arbitrary routes. Developed by Guy Debord (Situationist international), influenced by Dada, surrealism and anarchism. The key tactic for exploring psychogeography is the urban walking practice known as the dérive, a way of intentionally getting lost.
- Ted Nelson in Literary Machines (1981) extensively lays out the concept of hypertext and his project Xanadu.
- I recently encountered this article Unsung heroes: Flickr’s URLs scheme where the author writes about URLs as user interface on the example of the photo website flickr.
