Entwicklung und Herstellung einer audiovisuellen Kollektion mithilfe von Webtechnologien.
1. Ausgangssituation und Ziele
Jüngst ließ mich der Verlust eines Notizblocks die Effektivität meines Workflows hinterfragen. Wäre mir ein digitales Gerät abhandengekommen, das mit der Cloud verbunden ist, wäre zwar das Gerät an sich verloren, die Notizen hätten jedoch über die Cloud wiederhergestellt werden können. In meinem Fall waren lediglich noch Fotos einiger Seiten vorhanden, die ich mit der Handykamera abgelichtet und über den Messengerdienst „Telegram“ verschickt habe.
Auf der Suche nach den Fotos fiel mir auf, dass sich über die Zeit eine Menge Daten in unterschiedlichen Ordner angesammelt haben. Obwohl einigen Dateien kontextuell zusammengehören, wurden sie auf unterschiedlichen Geräten gespeichert. Ein mit der Handykamera aufgenommenes Foto passt zu einem Video, ein Text zu einem versendeten Foto, eine Aufnahme zu einem Text. Die Verknüpfungen der verschiedenen Medien waren in meinem Notizblock notiert. Ein schwerer Fehler, wie der Verlust verdeutlicht.
Ich brauchte also eine neue, personalisierte Lösung, um meine Dateien übersichtlicher anzuordnen. Somit ergibt sich die Frage: Wie können unterschiedliche Medien so zusammengeführt werden, dass sie im richtigen Kontext erscheinen und der Erinnerung dienen? Bedeutend ist dabei die Möglichkeit, über und mit der Zeit zu arbeiten.
2. Lösungsansatz
Die Möglichkeit, mit einem Gerät all die Medien zu nutzen, die ich darstellen will, gibt es bereits. Auf ein und demselben Gerät können Texte gelesen, Bilder und Videos angeschaut und Musik kann gehört werden. Alles Tätigkeiten, für die ich tagtäglich unterschiedliche webbasierte Software nutze.
Zur Lösung der Problematik zog ich also auch eine webbasierte Lösung in Betracht. Das Ziel sollte sein, eine HTML-Seite aufzusetzen, die alle Dateien entweder chronologisch sortiert oder gleichzeitig anzeigen kann: Text, Audiodateien und Videos. Dieses Vorgehen würde dem möglichen Verlust aller Dateien vorbeugen, da die HTML-Seite im Gegensatz zum Notizblock auch in der Cloud abspeichern kann. Zudem können auf der Seite schnell kontextuelle Einträge gefertigt werden.
In der Praxis könnte sich beispielsweise folgende Situation ergeben: An Tag X habe ich einen Live-Auftritt. Den Mitschnitt davon bekomme ich als Audiodatei. Diese Datei lade ich zusammen mit einem ausgewählten Foto vom selben Tag auf der Seite hoch. Das Bild könnte vor oder nach der Aufnahme geschossen worden sein. Alles, was an diesem Tag entstanden ist (Sprachaufnahmen, Texte, Videoaufnahmen etc.), würde dann für einen Eintrag genutzt werden.
Nachfolgend wird erläutert, wie die HTML-Seite aufgebaut wird.
3. Vorbereitung und Umsetzung
Um die HTML-Seite aufzusetzen, wurde zunächst eine Entwicklungsumgebung aufgespielt. Die Entwicklungsumgebung ist als System gedacht, in dem Änderung nicht endgültig sind. Fehler dürfen passieren und vieles darf ausprobiert werden, bis eine endgültige Entscheidung getroffen wird. Als Umgebung wird ein „Raspberry Pi“ mit dem Betriebssystem „Raspi OS“ genutzt.
3.1 Softwares & Werkzeuge
Im Folgenden wird die für das Vorgehen genutzte Software erläutert.
Microsoft Visual Studio
Visual Studio Code Hauptfenster | vergrößern
3.1.2 Inkscape
„Inkscape“ ist eine Open-Source-Software, die für vektorgrafische Bearbeitung entwickelt wurde.
Inkscape Offizielle Start-Website
Die Anwendung bietet einen Tracing-Algorithmus, der für diese Arbeit verwendet wurde. Mithilfe des Algorithmus können Bitmap-Dateien in Vektor-Datei umgewandelt werden. Aus persönlicher Erfahrung funktioniert dies besser als mit dem vergleichbaren Tool „Adobe Illustrator“.
Inkscape 'Trace Bitmap'-fenster | vergrößern
3.1.3 FontForge
Bei „FontForge“ handelt es sich ebenfalls um eine Open-Source-Software, die jedoch, wie der Name verrät, dafür genutzt wird, Schriftarten zu gestalten.
FontForge Haupfenster + Editier-Fenster
3.1.4 Adobe Illustrator
Illustrator Startfenster
Die Anwendung „Illustrator“ aus dem Hause Adobe wurde für vektorgrafische Bearbeitung entwickelt und hier bereits verglichen mit der Anwendung Inkscape.
3.1.5 Apache
Mithilfe der Software „Apache“ kann ein Computer mit einem Betriebssystem in einen Web-Server umgewandelt werden.
Apaches offizielle Start-Website
Die Installation von Apache auf dem Raspberry Pi wurde wie folgt durchgeführt:
> Raspberry Pi per Kabel mit dem Router verbunden.
> IP-Adresse der Raspberry Pi abgefragt.
> über SSH auf dem Raspberry Pi angemeldet.
> Apache installiert.
> Haupt-User Lese- und Schreibrechte auf den Ordner, in dem Dateien für die HTML-Seite liegen, gegeben.
> Dateien über FTP mit „FileZilla“ vom Laptop auf das Raspberry Pi kopiert.
3.1.6 SimpleRenamer
SimpleRenamer: 82 Dateien wurden umbenannt | vergrößern
„SimpleRenamer“ ist ein Tool, mit dem mehrere Dateien auf einmal umbenannt werden können.
3.1.7 FileZilla
Filezilla verbunden über Netztwerk mit der Raspberry Pi. | vergrößern
„FileZilla“ wird dafür genutzt, Dateien über ein Netzwerk zu kopieren.
3.2 Gestaltung der HTML-Seite
Für die Gestaltung der HTML-Seite wurden einige grundlegende Ziele gesteckt, die es zu erfüllen galt.
3.2.1. Ziele der Gestaltung
Essenziell für die Nutzbarkeit der Seite ist, dass sie sowohl vom Rechner als auch vom Smartphone aus erreichbar ist. An der Bedienung sollten in beiden Fällen keine ersichtlichen Mängel festgestellt werden können. Der Fokus sollte sich bei der Gestaltung eher an den Funktionen orientieren, statt an der optischen Darstellung. Dadurch soll garantiert werden, dass kein Konflikt zwischen Inhalten und Darstellung der Seite produziert wird. Die Bilder würden bereits aussagekräftig genug sein, weswegen die Seite an sich ohne optische Objekte auskommen kann und neutral wirken soll.
3.2.2 Gestaltung der Objekte
Zunächst ist bei der Gestaltung der Objekte zu bestimmen, in welchem Format sie dargestellt werden sollen. Die Wahl fällt hier auf Rechtecke. Durch das Format, ist es möglich, auf einer Fläche mehrere Inhalte zu zeigen. Kreise, Dreiecke oder andere Formen würden dem darzustellenden Inhalt schaden oder einen optischen Charakter produzieren, der nicht vonnöten ist.
Illustrator Export-fester: Vorlage für die Rechtecke | vergrößern
Nachdem die allgemeine Form festgesetzt wurde, mussten die Inhalte der Webseite eingepflegt werden: Texte, Bilder, Videos und Audiodateien. HTML-Code:
Html-Code
<link rel="stylesheet"
href="fonts/firstfont_2nd/stylesheet.css"
type="text/css" charset="utf-8" />
die Schriftart 'Firstfont 2nd', wurde embedded.
Die Gestaltung über CSS:
Bild:
.image {
position: relative;
width: auto;
bottom: 87px;
}
#squarecontent {
margin-bottom: -75px;
position: relative;
width: 100%;
}
Text:
image .text span {
background-color: #000;
color: #fefef0;
font-family: "firstfont2nd", Arial, Helvetica, sans-serif;
font-size: 2em;
text-transform: uppercase;
padding: 6px 1px 1px 20px;
}
Sprachaufnahmen:
360 Soundplayer:
<div class="ui360 ui360-vis">
<a target="_blank"
href="distel_files/MeistZiemlich.mp3"
class="sm2_pre_link"
type="audio/mp3"
data-tag="">
</a>
</div>
Am Ende für jedes Objekt:
<div id="squarecontent">
<div class="ui360 ui360-vis">
<a target="_blank"
href="distel_files/MeistZiemlich.mp3"
class="sm2_pre_link"
type="audio/mp3"
data-tag="">
</a>
</div>
<div class="image">
<img alt="MUSIC"
src="distel_files/MeistZiemlich.jpg">
<div class="overlay">
feb 10, 2021, 11:12 pm / wuppertal
</div>
<div class="text">
<span>Meist Ziemlich</span>
</div>
</div>
</div>
Das Resultat: Ein Objekt.
Nach der Programmierung wurde die Seite onlinegestellt.
3.3 Gestaltung der Schriftart
Die Idee, eine eigene Schriftart zu gestalten, kam auf, nachdem bei der ersten Betrachtung der fertigen HTML-Seite ein Mangel an Persönlichkeit durchschien. Obwohl die Inhalte zielgerecht angezeigt wurden, fehlte es an einer eigenen Note. Analoge Notizen werden mit einer persönlichen Handschrift verfasst, die diese Note verleiht. Im Internet ließ sich keine vergleichbare Schrift finden, die dieses Gefühl des Tagebuchschreibens vermittelt.
Daher wurde das Ziel festgesetzt, eine bereits vorhandene Schrift zu digitalisieren – unabhängig davon, wie die Schrift auf Dritte wirkt. Einzig und allein geht es darum, die persönliche Schrift auf dem Monitor lesbar wiederzugeben.
Dafür wurden zunächst die einzelnen Buchstaben mit einem Pen auf dem Display des iPads geschrieben, um die Schrift unverzüglich zu digitalisieren.
Calligraphr Schriftart-Fenster | vergrößern
Inkscape Hauptfenster | vergrößern
Nachdem jeder Buchstabe vektorisiert wurde, wurde die Gestaltung in Illustrator fortgesetzt. Dank des E-Books zu FontForge verlief die Gestaltung flüssig.
Illustrator Hauptfenster | vergrößern
Illustrator Hauptfenster mit allen Charaktern | vergrößern
Nachdem jeder Buchstabe exportiert wurde, wurde der Prozess noch einmal in FontForge wiederholt. Dabei wurden schnelle Anpassungen gemacht.
FontForge Editier-Fenster
Auch als das Exportfenster viele Fehler anzeigt hat, funktionierte der Export.
.png)
FontForge Export-fester
Die generierte Schriftart wurde schließlich vertont und erneut konvertiert, damit sie auf der HTML-Seite eingebettet werden kann. So wird sichergestellt, dass die Schriftart auf jedem beliebigen Gerät dargestellt werden kann, unabhängig davon, ob sie installiert ist.
Webfont Konvertierung | vergrößern
4. Korrekturen und weitere Arbeit
Nach der Betrachtung möglicher Korrekturen und einiger ausgeführter Verbesserungen musste schlussendlich sichergestellt werden, dass diese auch nachvollziehbar sind. Eine Lösung dafür ist „Sourcetree“. Nach der Installation von Sourcetree wird der Pfad des Ordners der HTML-Seite eingegeben. Ab diesem Zeitpunkt wird jede Änderung chronologisch abgespeichert. Die Änderung können auch zurückgenommen werden.
SourceTree Commit-Fenster | vergrößern
Vorgang:
Änderung zugeführt > Änderung benotet > Änderung abgespeichert.
Für die Korrekturen:
- Um weitere Informationen anzuzeigen, wurde eine Seite erstellt, die beim Öffnen keinen neuen Tab öffnet, sondern sich über der eigentlichen Seite hervorhebt und den Rest verdunkelt. Dies garantiert, dass weiterhin Musik gehört werden kann, während noch gelesen wird, ohne die Seite wechseln zu müssen. Die hervorgehobene Seite lässt sich mit einem weiteren Klick wieder schließen. Somit bleibt die Bedienung minimal aufwendig.
Info Seite | Demo
- Hinzugefügt wurde eine Funktion, die dafür sorgt, dass am Ende einer Audiodatei die nächste angespielt wird – ohne Zutun des Nutzers. Eine Playliste ist zwar nicht sichtbar, de facto handelt es sich jedoch um eine.
- Ein System wurde entwickelt, um den Sammel-Prozess besser darzustellen. Es gibt drei Zustände: Je nach Farbintensität gilt ein Objekt als „angefangen“, „in Ausführung“ oder „gesammelt“.
- Die Breite der Seite wurde auf 1100 Pixel beschränkt. Die unendliche Vergrößerung der Seite wirkte störend.
- „Freemono“ wurde der Seite als Webfont hinzugefügt.
Freemono: Medium, Oblique, Bold, Bold Oblique. | vergrößern
- Die Schriftart wurde erneut korrigiert, da bestimmte Abstände nicht korrekt waren.
Rechte Spalte: Überarbeitete Version | vergrößern
5. Fazit
Ich habe die Lösung zu meinem Problem gefunden, indem ich analysiert habe, wie ich die Medien, die ich selbst produziere, konsumiere: Audios konsumiere ich ohne CD-Player, Videos ohne DVD-Player, Texte und Bilder ohne Bücher und Zeitschriften. Alle Medien, die ich selbst im Laufe der Zeit produziere, lassen sich durch HTML darstellen. HTML hat in allen erforschten Bereichen offensichtliche Vorteile mit sich gebracht.
Es wurde gezeigt, dass Dateitypen kontextuell in einem Objekt gleichzeitig dargestellt werden können: Ein Bild mit einem Text versehen, wird zu einem Player, der eine Audio- beziehungsweise Videodatei abspielt. All diese vier Medienformate lassen sich durch HTML zusammenfassen. Mit der hier erprobten Vorgehensweise lässt sich zukünftig eine deutlich leistungsfähigere GUI aufbauen.
Webbrowser sind mittlerweile darauf ausgelegt, mehrere Medientypen abzuspielen. Die Technologie ist also zukunftssicher.
Bei nachfolgenden Arbeiten wird die entwickelte Lösung behilflich sein. Beispielsweise wurde bereits das gesamte Protokoll zu dieser Arbeit auch als HTML-Seite implementiert.
WindirStat. Statistik über alle Daten im Ordner. | vergrößern