Stories that move

Philo van Kemenade

Narratives 1, Formats 1

IFS Cologne | Nov 2024

Interactive web and mobile narratives

Storytellers United

storytellers.link

cleverfranke.com

this course

🕸 History of a dynamic medium

 

🎨 Designing interactive narratives

 

🛠️ Mini projects in pairs

 

🎤 Concept pitches

 

🎊 Feedback & celebration

course notepad

http://tiny.cc/storiesthatmove

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