About
On the web, text takes on a dynamic nature, allowing users to interact with it through clicks, scrolls, and touches. It becomes responsive, adapting to display formats and screen sizes. The user can influence, comment on, and even rewrite a digital text or its narration. How does this change the role of the user? What kind of reading experiences are possible on the web? And how do you design such a text?
In this coding workshop we want to explore interactive and typographic possibilities on the web from hypertext to hover. We want to redefine the reader’s role online and code our own text-based websites.
The workshop consists of an introduction to basic HTML, CSS and JS, different inputs, coding sessions and consultations. No prior experience is needed and students with no coding experience are especially encouraged to participate. Different entry points for different levels will be provided.
Bring your computer and a text. The text can be long or short, any genre, but should be in the form of a text file (.txt, .doc or similar).
Assignment
PROTOTYPE [IRL]
Workshop: 30.10–02.11. | 10–18:00
Talk: Wednesday, 01.11. 18:00
Upload Deadline: Thursday, 02.11. 12:00
Presentation: Thursday, 02.11. 14:00
REFINE [ONLINE]
Consultations I: 30.11. | 10–18:00
Consultations II: 14.12. | 10–18:00
REVIEW [IRL]
Workshop: 15.–16.01. | 10–18:00
Upload Final: Tuesday, 16.01. 13:00
Presentation: Tuesday, 16.01. 15:00
Develop a digital reading experience for a text.
Texts & Research
- All Texts / Excerpts & Quotes
- GoogleDrive
- Glitch Feminism
- Glitch Feminism – Legacy Russell
- The Author, the Reader & the Hypertext
- Hypertext and the Reader’s Roles – Nancy G. Patterson
- Electronic Peotry – Giovanna Di Rosario [pp. 98 „Chapter 2 / 4. The Author, the Reader and, the Text“]
-
Autorschaft und Künstliche Intelligenz – Hannes Bajohr
- Uncreative Writing– Kenneth Goldsmith
Where to start
Depending on your experience and preference, there are different points to start from:
-
HTML Boilerplate
if you want to start an entry from scratch, start with this empty HTML / CSS / JS files
[Github: HTML Boilerplate]
[Codesandbox: HTML Boilerplate] -
Starter Kits
if you want to start from modifying existing code, choose one of the coding starter kits
[Codesandbox: 01. Individual Paths / HTML]
[Codesandbox: 02. Themes & Custom Styling / CSS]
[Codesandbox: 03. Responsive Design / CSS]
[Codesandbox: 03. Animations / CSS]
[Codesandbox: 04. Clickability Cue / JS]
[Codesandbox: 05. Agency / JS]
[Codesandbox: 06. Personalization / JS]
Coding Resources
- HTML
-
[References: HTML
elements]
[Video: Basics of HTML by Laurel Schwulst]
[Web Essentials: HTML / CSS Einführung]
[CodeAcademy: Learn HTML tutorial]
- CSS I
-
[References: CSS properties]
[Video: Basics of CSS by Laurel Schwulst]
[CodeAcademy: Learn CSS tutorial]
- CSS II
-
[References: CSS Media
Queries]
[References: CSS Animations]
[CodeAcademy: Learn indermediate CSS]
- ChatGPT
- https://chat.openai.com
Contact
-
Chat
Here you can chat and ask questions.
Telegram-Chat -
GoogleDrive
this is where we share files / you can find the library and the starter kits here
GoogleDrive -
Sign-Up for Coding Support / Consultations
consultations in case you need support with a coding problem or want to talk about your concept a bit longer
GoogleDoc -
Contact
Katharina Nejdl
katharina.nejdl@googlemail.com
PROTOTYPE
Monday 30.10.
10:00–11:00 | Intro
- Check-In (name, pronouns, mood, last read)
- Course-Info
- Topic-Info
- Getting to know each other on paper / in the room
- Skill buddies
11:00–13:00 | Texts & Concept Sketches
- Available texts GoogleDrive
- Your texts (own text, interest, project)
Exercise: Text & Concept
- Choose and read a text [15min]
-
Discuss and analyse a text
→ Text levels
→ Topics
→ Interpretation [2 p. / 15min] -
Wireframe Exercise
→ Digital Text is ... [30min] -
Concept
→ Feedback-Round
→ 1-Sentence-Concept [30min]
Expectation-Managment
-
Simple Complicated
Process Output
Prototype Code Perfect Wireframes / Design
Fun Frustration
Digital Text Manifesto
- Die Materialität von digitalem Text
-
- Digitaler Text ist Text im digitalen Raum.
- Er ist responsiv und reagiert auf Darstellungsform und Bildschirmgröße.
- Digitalen Text kann man anfassen. Was passiert, wenn man den Text klickt, streichelt oder scrollt?
- Der Text ist nicht statisch. Er kann sich verändern, verschiedene Versionen haben oder aus unterschiedlichen Links bestehen.
- Die User*in kann ihn beeinflussen. Lesefluss, Reihenfolge und Kombinatorik können den Inhalt und Interpretation verändern.
- Digitaler Text kann partizipativ sein. Man kann ihn kommentieren, mitschreiben oder umdichten.
[5min / sketch]
- The materiality of digital text
-
- Digital text is text in the digital space.
- It is responsive and reacts to display format and screen size.
- Digital text is tangible. What happens when you click, touch or scroll it?
- The text is not static. It can change, have different versions or be composed from different links.
- The user can influence it. Reading flow, sequence and combinatorics can change the content and interpretation.
- Digital text can be participatory. You can comment on it, annotate it or rewrite it.
[5min / sketch]
14:00–14:15 | Setup I
- Join chat [Telegram]
Visual Studio Code Editor [Download]
- open folder in VS Code
-
create index.html
→ write / select HTML5 structure - open HTML page in browser
- edit, save & reload
14:15–16:00 | Collective Coding
- Individual Project
- Check out the Coding Resources
14:15–15:00 | HTML-Input
15:00–16:00 | CSS-Input I
Cheat Sheet: HTML
[Web Essentials: HTML / CSS Einführung]
[References: HTML elements]
[CodeAcademy: Learn HTML tutorial]
- file setup
- structure: html, body, main, nav, ...
- head (meta, title, css), js
- HTML boilerplate
- syntax
<tag> content </tag>
- hypertext
<a href="http://link.com" target="_blank"> This is the hyperspace. </a>
- tags
Cheat Sheet: CSS I
[References: CSS properties]
[CodeAcademy: Learn CSS tutorial]
- HTML Recap
- syntax
div {
color: red;
} - where?
- inline
- inside style tag
- external css file
- .classes & #ids
<div id="subtitle" class="text"> Some content inside. </div>
- properties
16:30–17:30 | Collective Coding
- Individual Project
- Check out the Coding Resources
- JS-Input / Check-In?
17:30–18:00 | Get Together
- Mood
- Show & Tell
Tuesday 31.10.
10:00–10:45 | Intro
- Video [Laurel Schwulst: Basics of HTML]
- Check-In
- → The Role of the user
Theory: The Role of the User
Nancy G. Patterson, Hypertext and the Reader’s Roles, 2000, p. 76
<tag contenteditable="true"> content </tag>
Historic Precedence [pp. 78]
Historically, there is precedence for this shifting role of the reader. Hypertext is not the first textual innovation to do so. Ilana Snyder reminds us that in manuscript days scribes often altered the work they were copying. This blurred, even then, the boundaries between author and reader. Snyder adds that the tradition of print literacy privileges the author. Nothing, supposedly, can be changed about a text once the author (along with the publisher and editor) have finished with it. But French literary critic Roland Barthes, in his interesting essay “The Death of the Author,” points out that a piece of text is “not a line of words releasing a single ‘theological’ meaning (the message of the Author-God), but a multidimensional space in which a variety of writings, none of them original, blend and clash” (116).
Most hypertext theorists would agree. Snyder also points out that oral texts had many of the features that theorists claim are inherent in hypertexts. Oral texts could be revised at will by the speaker, who altered stories depending on the prompts from an audience. But book technology provided a new framing device for narrative and other forms. Murray points out that with electronic text the “author” is procedural, like a choreographer, “who supplies the rhythms, the context, and the set of steps that will be performed” (153). The reader, or as she calls him or her, the “interactor,” is a
“navigator, protagonist, explorer, or builder, [who] makes use of [a] repertoire of possible steps and rhythms to improvise a particular dance among the many, many possible dances the author has enabled. We could perhaps say that the interactor is the author of a particular performance within an electronic story system, or the architect of a particular part of the virtual world, but we must distinguish this derivative authorship from the original authorship of the system itself. (153)”In this sense, Murray is reminding us that each time readers enter a hypertext Web they create a “new” text, written by the choices they make as they travel through the Web. And Landow consistently reminds us that the text an interactor reads is not necessarily the text an author planned. This is an important concept for student readers and writers because it reinforces the fact that readers and writers approach their tasks with purpose, and those purposes may not be the same. All this seems much like the ancient storyteller, who changes the text to fit the wishes of each audience. The audience and the storyteller (author) collaborate to create the narrative.
Nancy G. Patterson, Hypertext and the Reader’s Roles, 2000, pp. 7810:45–11:00 | Setup II
- Inspection
- VS Extensions [Live-Server]
11:00–12:30 | Collective Coding / Consultations
- Individual Project
- Coding Support / Consultations [Sign Up]
13:30–15:30 | Collective Coding / Consultations
- Individual Project
- Coding Support / Consultations [Sign Up]
13:30–14:00 | CSS-Input II
Cheat Sheet: CSS II
[Game: Flexbox froggy]
[CodeAcademy: Learn indermediate CSS]
- HTML / CSS Recap
- media queries
when the browser is smaller than 800px (mobile / tablet):
.element {
font-size: 18px;
}
}
.element {
font-size: 25px;
}
}@media (hover: none){
.element:hover {
color: inherit;
}
} - advanced positioning
- flex-box
[Video: CSS Flexbox in 100 Seconds]
[Reference: A Complete Guide to Flexbox] - css-grid
[Video: Build a Classic Layout FAST in CSS Grid]
[Reference: A Complete Guide to Grid]
- flex-box
- css-variables
:root {
--gapS: 5px;
--gapM: 10px;
--gapL: 20px;
--highlightColor: #0000FF;
}
.element{
color: var(--highlightColor);
margin: var(--gapS);
} - display
display: block;
}
.hidden {
display: none;
} - transformation
.element {
transform: translate(50%, 50%);
}.element {
transform: translate(50%, 50%) rotateX(-12deg);
} - transition & animation
.element {
width: 200px;
transition: width 0.3s ease;
}
.element:hover {
width: 500px;
}
width: 200px;
color: red;
transition: width 0.3s, color 0.5s;
}
.element:hover {
width: 500px;
color: blue;
}
16:00–17:30 | Collective Coding / Consultations
- Individual Project
- Coding Support / Consultations [Sign Up]
17:30–18:00 | Get Together
- Mood
- Show & Tell
Wednesday 01.11.
10:00–10:30 | Intro
- Check-In
- Showcase: [Painting with Pure CSS]
- → Glitch
Theory: Glitch
The etymology of glitch finds its deep roots in the Yiddish gletshn (to slide, glide, slip) or the German glitschen (to slip). Glitch is thus an active word, one that implies movement and change from the outset; this movement triggers error.
The word glitch as we now use and understand it was first popularized in the 1960s, part of the cultural debris of the burgeoning American space program. In 1962, astronaut John Glenn used the word in his book Into Orbit: “Another term we adopted to describe some of our problems was ‘glitch.’ Literally, a glitch ... is such a minute change in voltage that no fuse could protect against it.” The word resurfaced some years later in 1965 with the St. Petersburg Times reporting that “a glitch had altered the computer memory inside the US spacecraft Gemini 6”; still again in the pages of Time Magazine: “Glitches—a spaceman’s word for irritating disturbances.” Later, in 1971, “glitches” appears in an article in the Miami News about Apollo 14’s failure to perform when a glitch had nearly botched a landing on the moon.
Traversing through these origins, we can also arrive at an understanding of glitch as a mode of nonperformance: the “failure to perform,” an outright refusal, a “nope” in its own right, expertly executed by machine. This performance failure reveals technology pushing back against the weighty onus of function. Through these movements, technology does, indeed, get slippery: we see evidence of this in unresponsive pages that present us with the fatalistic binary of choosing to “kill” or “wait,” the rainbow wheel of death, the “Sad Mac” iconography, a frozen screen—all indicative of a fatal system blunder.
Herein lies a paradox: glitch moves, but glitch also blocks. It incites movement while simultaneously creating an obstacle. Glitch prompts and glitch prevents. With this, glitch becomes a catalyst, opening up new pathways, allowing us to seize on new directions. On the Internet we explore new publics, engage with new audiences, and, above all, glitschen between new conceptions of bodies and selves. Thus, glitch is something that extends beyond the most literal technological mechanics: it helps us to celebrate failure as a generative force, a new way to take on the world.
Legacy Russell, “Glitch Feminism”, London / New York: Verso, 2020, p.28–31.10:30–12:30 | Collective Coding
- Individual Project
- Check out the Coding Resources
10:30–11:30 | JS-Input
Starterkit
-
[Codesandbox:
04.
Clickability Cue / JS]
[Codesandbox: 05. Agency / JS]
[Codesandbox: 06. Personalization / JS]
Debugging
- Is your syntax correct? Check your browser’s console.
- Error messages are your friends. Read them carefully, because usually they tell you where the problem is.
- The console.log() is your friend. Log everything to make sure you have the right element / value / etc.
- Try to run your code step by step (optimally logging all of them), to make sure things you think are working are actually working and to isolate the bug.
- Did you save? Is your live-server working?
- Try inspecting, googling or ask a friend.
Cheat Sheet: JS I
[CodeAcademy: Introduction to Javascript]
- where?
- inline
- inside script tag
- external js file
- logging
console.log('hi');
- variables
modern JS: const / let
const message = 'hello';
console.log(message);
console.log(counter);
counter = counter + 1;
console.log(counter);var message = 'hello';
console.log(message);
var counter = 1;
console.log(counter);
counter = counter + 1;
console.log(counter); - data types
const string = '1';
const boolean = false;
- get elements by Id / className / ...
const logo = document.getElementById('logo');
const text = document.getElementsByClassName('text')[0]; - change style / class with JS
change style in JS:
logo.style.backgroundColor = 'blue';
logo.classList.add('hidden');let root = document.documentElement;
root.style.setProperty('--highlightColor', 'red'); - timeout function
setTimeout(function(){
console.log('Finally here!');
}, 500); - innerHTML
const heading = document.getElementById('heading');
heading.innerHTML = 'New Heading'; - eventListener: CLICK
in JS:
logo.addEventListener('click', function(){
console.log('the user clicked on the logo');
})
<button onclick="myFunction()"> Click me! </button> - eventListener: MOUSEMOVE / TOUCHMOVE
mousemove (desktop):
document.body.addEventListener('mousemove', function(e){
const mouseX = e.clientX;
const mouseY = e.clientY;
console.log(mouseX, mouseY);
circle.style.top = mouseX + 'px';
circle.style.left = mouseY + 'px';
})
document.body.addEventListener('touchmove', function(e){
const touch = e.touches[0];
const touchX = touch.clientX;
const touchY = touch.clientY;
console.log(touchX, touchY);
circle.style.top = touchX + 'px';
circle.style.left = touchY + 'px';
})const root = document.documentElement;
document.body.addEventListener("mousemove", e => {
root.style.setProperty('--mouse-x', e.clientX + 'px');
root.style.setProperty('--mouse-y', e.clientY + 'px');
});
Cheat Sheet: JS II
[CodeAcademy: Learn intermediate javascript]
- functions
console.log('Hello World!');
}
logHello();function logSomething(params) {
console.log(params);
}
logSomething('Ciao World!'); - if / else
if(number < 5){
console.log('smaller than five');
} if else (number === 5) {
console.log('equals five');
} else {
console.log('higher than five or undefined');
} - arrays
const fruits = ['banana', 'apple', 'pear'];
console.log(fruits[0]);const textElements = document.getElementsByClassName('text');
console.log(textElements[0]); - for loops
- for loop
for (i = 0; i < 10; i++) {
// do something
}const fruits = ['banana', 'apple', 'pear'];
for (i = 0; i < fruits.length; i++) {
const fruit = fruits[i];
console.log(i);
console.log(fruit);
} - for...of loop
const fruits = ['banana', 'apple', 'pear'];
for (const fruit of fruits) {
console.log(fruit);
}
[Reference: for...of vs. for-loop]
[Reference: forEach vs. for...in vs. for-loop] - for loop
- objects
const person = {
firstName: "Jane",
lastName: "Doe",
age: 25,
eyeColor: "brown"
}; console.log(person.firstName); - JS libraries
13:15–15:30 | Collective Coding / Consultations
- Individual Project
- Coding Support / Consultations [Sign Up]
Thursday 02.11.
10:00–12:00 | Finish
- Upload Deadline 12:00 [GoogleDrive]
13:00–13:30 | Snack & Presentation Preparations
- Bring cookies & fruit
13:30–15:30 | Presentation & Snack
- Prototype Presentation
- Brunch
15:30–16:00 | Get Together
-
personal goals
(can i continue to work alone?, how much time do i have?) - code design / wireframing
- continue new experiment
- code / design workshop index
- Mood
REFINE
Thursday [online] 30.11.
10:00–10:30 | Get Together
- Online check-in
10:30–18:00 | Consultations
- Individual Project
- Coding Support / Consultations [Sign Up]
Thursday [online] 14.12.
10:00–10:30 | Get Together
- Online check-in
10:30–18:00 | Consultations
- Individual Project
- Coding Support / Consultations [Sign Up]
REVIEW
Monday 15.01.
10:00–18:00 | Input / Collective Coding / Consultations
- Input
- Collective Coding / Consultations
Tuesday 16.01.
10:00–18:00 | Input / Collective Coding / Consultations
- Input
- Collective Coding / Consultations