Philo van Kemenade
Creating tools, stories and things in between to amplify human connection with arts and culture.
Stories that move
Philo van Kemenade
Narratives 1, Formats 1
IFS Cologne | Nov 2024
Interactive web and mobile narratives
Storytellers United
this course
🕸 History of a dynamic medium
🎨 Designing interactive narratives
🛠️ Mini projects in pairs
🎤 Concept pitches
🎊 Feedback & celebration
course notepad
Share an inspriting web/mobile storytelling project.
What sets this project apart?
What drives the narrative?
exercise in break out groups
Let me introduce the word “hypertext” to mean a body of written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper.
– Ted Nelson
A file system for the complex, the changing and the indeterminate (1965)
Films, sound recordings, and video recordings are also linear strings, basically for mechanical reasons. But these, too, can now be arranged as non-linear systems [...] for editing purposes, or for display with different emphasis. [...]
The hyperfilm—a browsable or vari-sequenced movie—is only one of the possible hypermedia that require our attention.
– Ted Nelson
A file system for the complex, the changing and the indeterminate (1965)
Dynamic
Interactive
Enabling an experience
using the capability of the web
as a mechanism for narration
from the start of the authoring process
Web-native storytelling
One Millionth Tower https://www.nfb.ca/interactive/highrise_one_millionth_tower_en
Snow Fall https://www.nytimes.com/projects/2012/snow-fall/
Do not Touch http://donottouch.org/
Do not Track https://donottrack-doc.com/en/
some examples
if filmmaking is like sculpting...
... webmaking is more like LEGO
Some words about code
Interface between
&
Reality
Representation
Some words about code
-
🌳 a skill continuum
-
❌ no magic
-
💭 naming matters
-
🤖 ...watch this space...
3 Web ingredients
Hypertext
Markup
Language
HTML
What's on the page?
Cascading
Style
Sheets
CSS
How does it look?
Javascript 'does' things, like interactivity or fetching data, calculations, updating 'state'
Javascript
How does it work?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello IFS Cologne 👋</h1>
<p>Welcome to this very simple web page.</p>
</body>
</html>
HTML + CSS
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello IFS Cologne 👋</h1>
<p>Welcome to this very simple web page.</p>
</body>
</html>
HTML + CSS + JS
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script>
function sayHello() {
alert("hello world!");
}
</script>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello IFS Cologne 👋</h1>
<p>Welcome to this very simple web page.</p>
<button onclick="sayHello()">Say Hello</button>
</body>
</html>
Copy the HTML + CSS + JS example from the previous slide
Paste it in your favourite text editor
(or download Sublime Text at www.sublimetext.com/download)
Save as index.html
Open the HTML file in your favourite browser
Bonus: remix by adding elements, styles and functionality
(Cheating encouraged!)
exercise
Web of pages ➡️ web of applications & data
Interaction requires 'state'
User Interfaces are made out of components
🕸 The modern web
✍️ designing in the browser
Stories that Move
By Philo van Kemenade
Stories that Move
One day seminar at IFS Cologne on interactive web and mobile narratives
