Voraussagen zur Zukunft der Medien zu machen, ist eine mission impossible. Dennoch musste ich heute Radio Zürichsee über die Erfolgschancen des gestern gestarteten Onlinemagazins «Republik» Red und Antwort stehen. Aufwändig recherchierte Hintergründe statt Promi-News und Katzenfotos, Sperrigkeit statt Stromlinienform, Relevanz statt Gefälligkeit – nun denn, liebe Republikanerinnen und Republikaner: Als unverbesserlicher Optimist bin ich (von Euch beharrlich «Verleger» genannter) Genossenschafter, Abonnent und Leser. Mein hoffnungsfrohes Wort in Euer Ohr!

Eine kleine Geschichte digitalen Erzählens: In der Eröffnungs-Keynote zum Auftakt des «Festival of Digital Narratives» von Nordvision, dem Zusammenschluss aller öffentlich-rechtlichen Rundfunkanstalten der nordischen Länder, werde ich am 22. März in Helsinki die verschlungenen Wege abschreiten, welche die Medien in den vergangenen 20 Jahren gegangen sind. Viele davon erwiesen sich als Sackgassen: Immer noch teurere, technisch immer noch aufwändigere Multi-, Cross- und Transmedia-Banalitäten haben zur Genüge klar gemacht: Die zur Verfügung stehende Technik war stets nur dann von Belang, wenn sie Autorinnen und Autoren erzählen liess, was zuvor hatte ungesagt bleiben müssen.

Nach vielversprechenden multimedialen Anfängen von Arte («Gaza Sderot», 2009; «Prison Valley», 2010) und nach Indie-Produktionen wie «À l'abri de rien» (2011) setzte die New York Times mit «Snow Fall» (2012) dokumentarische Massstäbe. Heute, da Augmented, Mixed und Virtual Reality auf der Schwelle stehen, ist es Zeit, sich darauf zu besinnen, woraus die Aufgabe der Medien wirklich besteht: Nicht mit Technik zu klotzen, sondern vielmehr relevante, à fonds recherchierte Geschichten zu erzählen, die unter die Haut gehen – ob in Text, Bild oder Ton, ob auf Papier, Bildschirm oder in der VR-Brille, ist einerlei. More to follow.

Alles neu macht der Januar: Dem Trend zu Mobile First und zu fancy onepagers kann sich auch meine Band «Blues Green» nicht länger verschliessen. Die alte Website ist im virtuellen Orkus verschwunden und hat Platz gemacht für ein neues, frisches, mobiloptimiertes Showcase mitsamt Video-Header und custom-built audio player: Bildschirm frei für den Bluespopjazz made in Switzerland.

«Manesse Gammon»: Frühmittelalterliches Online-Gaming.

Europeana ist eine gross angelegte digitale Bibliothek, die der Öffentlichkeit das kulturelle und wissenschaftliche Erbe der Alten Welt zugänglich machen will – von der Vor- und Frühgeschichte bis in die Gegenwart, in Bild, Text, Ton und Film. Um den kreativen Umgang mit den immensen Datenbeständen zu fördern, unterhält Europeana einen Showcase-Bereich mit aus kuratorischer Sicht beispielhaften Anwendungen.

Eines dieser Best-case-Beispiele, die Europeana ins virtuelle Schaufenster gestellt hat, ist mein Projekt «Manesse Gammon». Das Onlinespiel, entstanden im Rahmen des Swiss Open Cultural Data Hackathon 2016 an der Universität Basel, lässt einen Spieler aus dem Jahr 1300 wieder auferstehen. Dieser ist alles andere als ein einfacher Gegner: Er spricht nur Mittelhochdeutsch, und er hat ein gutes Händchen beim Würfeln. Auftritt Herr Gœli.

Anfang 2000 hatten der amerikanische Web-Pionier Stewart Butterfield (Gründer und CEO von «Slack», davor von «Flickr») und sein Freund Eric Costello eine zündende Idee. Um dem Teufelskreis «schlampige Programmierung erfordert höhere Bandbreiten brauchen schnellere Browser erlauben noch schlampigere Programmierung» zu entkommen, riefen sie den Wettbewerb the5k.org für originelle und innovative Webseiten und -Apps ins Leben. Die Projekte durften – alles inbegriffen – maximal 5 Kilobyte (5120 Bytes¹) auf die Waage bringen und wurden anschliessend von einer hochkarätigen Fachjury und Usern in aller Welt bewertet. Die drei Austragungen von 2000 bis 2002 brachten Juwelen der Webtechnik an den Tag; einige davon, darunter «the5k Chess», stehen noch heute im Netz.

Es war dieser Wettbewerb, der mich vom ungläubigen Staunen zum aktiven Programmieren brachte. Mit meinem allerersten Projekt «the5k Chrono» nahm ich 2002 teil. Heute, 15 Jahre nach dem Ableben der genialen 5k competition, nehme ich den Faden nochmals auf: «Timepiece», eine Hommage an den Schweizer Ingenieur und Designer Hans Hilfiker und dessen Bahnhofsuhr von 1944, als virtuelle Replika mit dem charakteristischen Sekundenstopp bei 12 Uhr, als single-file application, ohne Grafiken, Libraries oder Frameworks, responsive, in reinem HTML 5. Und, natürlich, in weniger als fünf Kilo².

¹ Zum Vergleich: Wenn die Datenmenge eines durchschnittlichen Handyfotos der Fläche eines Tisches entspricht, sind 5 Kilobyte ungefähr die Grundfläche einer Zigarettenschachtel.
² Genauer: In exakt 4624 Bytes.

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Timepiece</title> <style type="text/css"> /* Single-file HTML 5 timepiece; copyright (c) twb; www.thomasweibel.ch */ body { background: #ddd; } .hand { position: absolute; top: 0; left: 50%; } .black { background: #111; } .red { background: #d00; } .white { background: #f8f8f8; } .center { position: absolute; top: 50%; left: 50%; } .eye { transform-origin: bottom center; } .hr { margin: 24% 0 0 -3.4%; height: 0; width: 4.8%; transform-origin: center 68.5%; } .min { margin: 6% 0 0 -3.1%; height: 0; width: 3.8%; transform-origin: center 80%; } .sec { margin: 19% 0 0 -.6%; height: 42%; width: 1.2%; transform-origin: center 74%; } .pt { margin: 13% 0 0 -4.5%; height: 9%; width: 9%; border-radius: 50%; transform-origin: center 411.5%; } .c1 { margin: -1.75% 0 0 -1.75%; height: 3.5%; width: 3.5%; border-radius: 50%; } .c2 { margin: -.625% 0 0 -.625%; height: 1.25%; width: 1.25%; border-radius: 50%; } .c3 { margin: -.375% 0 0 -.375%; height: .75%; width: .75%; border-radius: 50%; } @media only screen and (orientation: landscape) { #watchface { position: absolute; top: 0vh; left: 50%; margin: 0 0 0 -50vh; height: 100vh; width: 100vh; border-radius: 50vh; } .m { margin: 1.5% 0 0 -.6%; height: 48.5%; width: 1.2%; box-sizing: border-box; border-top: 3.2vh #111 solid; } .f { margin: 1.5% 0 0 -1.9%; height: 48.5%; width: 3.8%; box-sizing: border-box; border-top: 11vh #111 solid; } .min { border-bottom: 55vh solid #111; border-left: 1vh solid transparent; border-right: 1vh solid transparent; } .hr { border-bottom: 38vh solid #111; border-left: 1.2vh solid transparent; border-right: 1.2vh solid transparent; } } @media only screen and (orientation: portrait) { #watchface { position: absolute; top: 50%; left: 0vw; margin: -50vw 0 0 0; height: 100vw; width: 100vw; border-radius: 50vw; } .m { margin: 1.5% 0 0 -.6%; height: 48.5%; width: 1.2%; box-sizing: border-box; border-top: 3.2vw #111 solid; } .f { margin: 1.5% 0 0 -1.9%; height: 48.5%; width: 3.8%; box-sizing: border-box; border-top: 11vw #111 solid; } .min { border-bottom: 55vw solid #111; border-left: 1.2vw solid transparent; border-right: 1.2vw solid transparent; } .hr { border-bottom: 38vw solid #111; border-left: 1vw solid transparent; border-right: 1vw solid transparent; } } </style> </head> <body> <div id="watchface" class="white"></div> </body> <script type="text/javascript"> var x, run, anim, x, minhtml, fiveminhtml, hands, i, j, time, hours, minutes, seconds; x=0; minhtml=[]; fiveminhtml=[]; hands="<div class=\"hr hand\" id=\"hourhand\"><\/div><div class=\"min hand\" id=\"minutehand\"><\/div><div class=\"sec hand red\" id=\"secondhand\"><\/div><div class=\"pt hand red\" id=\"dot\"><\/div><div class=\"c1 center red\"><\/div><div class=\"c2 center white\"><\/div><div class=\"c3 center black\"><\/div>"; for (i=0; i<60; i++) { minhtml.push("<div id=\"m"+i+"\" class=\"m eye hand\"><\/div>"); } for (j=0; j<12; j++) { fiveminhtml.push("<div id=\"f"+j+"\" class=\"f eye hand\"><\/div>"); } document.getElementById("watchface").innerHTML=minhtml.join("")+fiveminhtml.join("")+hands; for (i=0; i<60; i++) { document.getElementById("m"+i).style.transform="rotate("+i*6+"deg)"; } for (j=0; j<12; j++) { document.getElementById("f"+j).style.transform="rotate("+j*30+"deg)"; } function tick() { clearTimeout(run); time=new Date(); hours=time.getHours(); minutes=time.getMinutes(); seconds=time.getSeconds(); x++; document.getElementById("hourhand").style.transform="rotate("+(hours+minutes/60)*30+"deg)"; document.getElementById("minutehand").style.transform="rotate("+minutes*6+"deg)"; document.getElementById("secondhand").style.transform=document.getElementById("dot").style.transform="rotate("+seconds*6+"deg)"; anim=setTimeout(turn, 5); } function turn() { clearTimeout(anim); document.getElementById("secondhand").style.transition=document.getElementById("dot").style.transition="transform "+(60-seconds)/60*58.5+"s linear"; document.getElementById("secondhand").style.transform=document.getElementById("dot").style.transform="rotate("+x*360+"deg)"; run=setTimeout(tick, (60-seconds)*1000); } tick(); </script> </html>