In den letzten Jahren gab es ein paar Web-Projekte, die mich mit ihren vielfältigen Aspekten besonders gefordert und begeistert haben:
In recent years, there have been a few web-projects that have particularly challenged and excited me with their diverse aspects:
mobile reader and searchable directory
To simplify access to public domain ancient works and make them readable in a dedicated mobile reader optimized for reading on mobile devices, the &lesen project was born, for which I took on the development of the progressive web app.
First, a script had to be written that used regex to align the works typographically. They all come from different sources and the same rules were not followed during digitization.
Then there should be a feature that is important for using the website as a PWA: a search function for finding works that does not require direct communication between the mobile device and the server. This way, works can be searched for in the library intuitively and by combining different terms, either specifically or on a whim. For this I created node.js scripts that store all the important information and relationships (author, title, year of creation, length of work, type of work, tag, chapter titles) in JSON lists.
Mobiler Reader und durchsuchbares Verzeichnis
Um den Zugang zu gemeinfreien, alten Werken zu vereinfachen und sie in einem eigenen Reader lesbar zu machen, der optimiert ist für das Lesen auf Mobilgeräten, ist das Projekt &lesen entstanden, für das ich die Entwicklung der Progressive-Web-App (PWA) übernommen habe.
Zunächst musste ein Skript verfasst werden, das mithilfe von Regex die Werke typografisch angleicht. Sie stammen alle aus unterschiedlichen Quellen und es wurden bei der Digitalisierung nicht die gleichen Regeln befolgt.
Dann sollte ein Feature her, das für die Verwendung der Webseite als PWA wichtig ist: Eine Suchfunktion zum Finden von Werken, die keine direkte Kommunikation zwischen Mobilgerät und Server erfordert. So kann in der Bibliothek intuitiv und durch Kombination von verschiedenen Begriffen gezielt oder nach Lust und Laune nach Werken gesucht werden. Dafür habe ich node.js-Skripte erstellt, die alle wichtigen Informationen und Beziehungen (Autor:in, Titel, Entstehungsjahr, Länge des Werks, Art des Werks, Tag, Titel der Kapitel) in JSON-Listen speichert.
slider-controlsSlider-Steuerung
gallery (scroll for more, click on items to expand or to play)Gallerie (scrolle für mehr, klicke auf Inhalte um sie zu vergrößern oder abzuspielen)
The mobile reader is supposed to make reading on the mobile device pleasant without unnecessary distractions. For this, flipping pages, the relic of the book medium, is abandoned in favor of vertical scrolling. The text at the bottom of the screen, which only hints at the further course of the text and is not read, is overlaid with a gentle gradient.
It is well known that the brightness of the screen of almost every mobile device can be changed. However, there are limits to the darkest brightness setting in particular, which can still appear too bright in dark surroundings. Therefore, in addition to a day/night mode, the mobile reader also offers the option of continuously reducing the brightness so that reading is possible even in absolute darkness.
Several features give an indication of the reading level: When the menu is opened, a horizontal bar shows the proportionate reading status. The automatically generated chapter overview shows the chapter that is currently being read. If you still want to mark passages, you can create bookmarks that function as links in the chapter overview that scroll to the corresponding reading level.
Der Reader soll das Lesen auf dem Mobilgerät angenehm gestalten, ohne mit gerade Unnötigem abzulenken. Dafür wird das Blättern, das Relikt des Buchmediums, zugunsten des vertikalen Scrollens aufgegeben. Der Text am unteren Bildschirmrand, der nur den weiteren Verlauf des Textes andeutet und nicht gelesen wird, wird mit einem sanften Verlauf überlagert.
Bekanntermaßen lässt sich die Helligkeit des Bildschirms fast jeden Mobilgeräts ändern. Allerdings ist vor allem der dunkelsten Helligkeitseinstellung Grenzen gesetzt, die in dunkler Umgebung noch zu grell erscheinen kann. Daher bietet der Reader neben einem Tag-/Nachtmodus noch die Möglichkeit, die Helligkeit stufenlos zu verringern, sodass auch in absoluter Dunkelheit das Lesen möglich wird.
Anhaltspunkte für den Lesestand geben gleich mehrere Features: Bei Öffnung des Menüs zeigt ein horizontaler Balken den anteiligen Lesestand. Die automatisiert generierte Kapitelübersicht zeigt das Kapitel, das im Moment gelesen wird. Falls noch Stellen markiert werden sollen, können Lesezeichen erstellt werden, die als Links in der Kapitelübersicht funktionieren, die zum zugehörigen Lesestand scrollen.
Bookmarks can be created via the menu for the currend reading level. In the chapter overview, they are listed under the corresponding chapter.Lesezeichen lassen sich über das Menü für den jetzigen Stand erstellen. In der Kapitelübersicht werden sie unter dem zugehörigen Kapitel gelistet.
As a PWA, &lesen can store data in the mobile device using service workers and the JavaScript library localForage. This concerns all search lists and all works that have been opened. In addition, the reading status and all bookmarks are saved. If it is desired to remove a work from the mobile device's memory, this can be done from the personal library, where all works that have been started and read are stored.
Als PWA kann &lesen einige Daten im Mobilgerät mithilfe von Service-Workern und der JavaScript-Bibliothek localForage speichern. Dies betrifft alle Suchlisten und alle Werke, die geöffnet wurden. Außerdem wird der Lesestand und alle Lesezeichen gespeichert. Falls ein Werk aus dem Speicher des Mobilgeräts wieder entfernt werden soll, kann dies von der persönlichen Bibliothek gemacht werden, wo alle begonnenen und gelesenen Werke verzeichnet werden.
reading experience KafkaLeseerlebnis Kafka
In the context of the PWA &lesen, the old works were to be reinterpreted beyond the mobile reader with means that do justice to the possibilities of mobile devices. New life for old works! To do this, I made Kafka's collection "Betrachtung" (engl. "Contemplation") experienceable in such a way that a different one of his contemplations is shown each time the work is opened, and used the output of the gyro sensor to make the contemplations readable only at a certain, random angle of inclination.
Im Rahmen der PWA &lesen sollten über den mobilen Reader hinaus die alten Werke mit Mitteln, die den Möglichkeiten von Mobilgeräten gerecht werden, neu interpretiert werden. Neues Leben für alte Werke! Dafür habe ich Kafkas Sammlung "Betrachtung" so erfahrbar gemacht, dass bei jedem Aufrufen eine andere seiner Betrachtungen gezeigt wird und den Output des Gyro-Sensors genutzt, um die Betrachtung nur in einem bestimmten, zufälligen Neigungswinkel lesbar zu machen.
In search of the right angle to share Kafka's perspective.Auf der Suche nach dem richtigen Blickwinkel, um Kafkas Perspektive zu teilen.
Website about the concept of eBooksWebseite über das Konzept von eBooks
The website critically examines the concept, handling and presentation of eBooks. For this, the page navigation should also be special, with which I was tasked with.
Die Webseite setzt sich mit dem Begriff, dem Umgang und der Darstellung von eBooks kritisch auseinander. Dafür sollte auch die Seitennavigation besonders sein, womit ich beauftragt wurde.
slider-controlsSlider-Steuerung
gallery (scroll for more, click on items to expand or to play)Gallerie (scrolle für mehr, klicke auf Inhalte um sie zu vergrößern oder abzuspielen)
interactive web VR experienceInteraktive Web-VR-Erfahrung
The year was 2016 — the Oculus Rift was released, Google Cardboard was on the cutting edge and 3D found its way onto the web. VR on the web was still new, but was made possible by JavaScript libraries I could fall back on like WebVR external link and three.js external link
I was responsible for the technical implementation of ijo, an interactive web experience in which users explore their own attitudes towards decisions. They discover a three-dimensional world, consisting of decision rooms and corridors of different kinds, accompanied by 3D sound and music composed by me.
Wir schreiben das Jahr 2016 – die Oculus Rift wurde veröffentlicht, Google Cardboard war auf der Höhe seiner Zeit und 3D fand Einzug ins Internet. VR im web war noch neu, wurde aber ermöglicht durch JavaScript Bibliotheken, auf die ich zurückgreifen konnte, wie WebVR externer Link und three.js externer Link
In diesem Jahr habe ich die technische Umsetzung von ijo übernommen, einer interaktiven Web-Erfahrung, in der User:innen sich mit ihrer eigenen Einstellungen zu Entscheidungen auseinandersetzen. Dabei entdecken sie eine dreidimensionale Welt, bestehend aus Entscheidungsräumen und Gängen unterschiedlichster Art, untermalt mit 3D-sound und von mir komponierter Musik.
First 50 seconds of ijo. Screen capture of ijo in Firefox 35 for macOS.Die ersten 50 Sekunden von ijo. Bildschirmaufnahme in Firefox 35 für macOS.
slider-controlsSlider-Steuerung
gallery (scroll for more, click on items to expand or to play)Gallerie (scrolle für mehr, klicke auf Inhalte um sie zu vergrößern oder abzuspielen)
ijo was finally completed in January 2017 and worked in the
desktop browsers Chrome, Opera, Safari and Firefox. For the mobile browsers Firefox (Android), Chrome (Android) and Safari (iOS) it came with the possibility to experience it in VR.
ijo wurde schließlich im Januar 2017 fertiggestellt und
funktionierte in den Desktop Browsern Chrome, Opera, Safari und Firefox. Für die mobilen Browser Firefox (Android), Chrome (Android) und Safari (iOS) kam es mit der Möglichkeit, es in VR zu erleben.
ijo with cardboard VRijo mit VR-PappbrillePhotography of ijo working on an Android phone with splitscreen Virtual Reality in opened cardboard VR goggles.Fotografie von ijo auf einem Android-Handy mit splitscreen Virtual Reality in offener Cardboard-VR-Brille.
