Eine online Version des Buches existierte im Ansatz bereits. Auf diese konnte aufgebaut werden, allerdings waren von Anfang an einige Kursteilnehmer nicht ganz zufrieden mit der technischen oder gestalterischen Qualität und so wurde zunächst versucht in Teams neue Ideen zu entwickeln.

Donatus, Irina, Jens und ich haben im Team einige Ideen gesammelt und drei Ansätze samt Prototypen zur Demonstration vorgestellt.

Ideen

01 – Das Buch als Webapplikation ausarbeiten, was dem Ziel des Kurses entspricht.

02 – Mit augmented Reality die analogen Buchinhalte um digitale Visualisierungen und Zusatzinformationen auf dem Smartphone erweitern.

03 – Ausgehend davon, dass Studenten die digitale Version des Buches auf dem Desktop bearbeiten werden: Eine scond screen App auf dem Smartphone, die Abbildungen und Visualisierungen zur genaueren Betrachtung zur Interaktion darstellt in Echtzeit zur aktuellen Leseposition.

(Keynote)

Letzteres Konzept habe ich mithilfe von Firebase (web sockets) und Javascript anhand eines Beispielkapitels gebaut. Der Fokus lag dabei nicht auf dem Design der Website zum Lesen, sondern primär auf der Interaktion mit dem Smartphone beim Lesen. Auf dem Smartphone wird abhängig von der Leseposition die entsprechende Abbildung oder interaktive Visualisierung aus dem Buch angezeigt. Diese Visualisierung kann auf dem Smartphone manipuliert werden, Abbildungen können vergrößert oder gespeichert werden.

(Prototype - primary screen – diese Seite auf dem Desktop öffnen. Beim Scrollen wechselt die Abbildung bzw. Visualisierung auf dem Smartphone automatisch)

(Prototype - second screen – diese Seite auf dem Mobile öffnen. Beim Scrollen wechselt die Abbildung bzw. Visualisierung auf dem Smartphone automatisch)

Gegen Ende des Kurses stellte sich heraus, dass der Fokus auf der Erarbeitung einer neuen oder der Verbesserung und inhaltlichen Vervollständigung einer bestehenden Webapplikation entwickelt vom Institut selbst gelegt werden sollte.

Aus Unzufriedenheit über die Qualität dieser bestehenden Anwendung habe ich kurzfristig den core screen einer Web App gestaltet. Dieses Design sollte vor Allem Lesbarkeit und die Benutzerfreundlichkeit bei der Navigation adressieren und dem Editorial Design in Farbe und Sprache angepasst werden.

Annahmen für die Gestaltung – Studenten springen beim Lernen zwischen Kapiteln und Abschnitten und wünschen sich eine schnelle Navigation, die versteckt werden kann, um sich auf die Inhalte zu konzentrieren. – Studenten erwarten gleichen Lesekomfort wie sie ihn von Kindle und anderen Applikationen gewohnt sind. –– Nacht Modus –– Schrift vergrößern und verkleinern -- Vollbildmodus – Studenten möchten ihre Leseposition teilen, um sich mit Kommilitonen über Inhalte auszutauschen, oder um Notizen anzureichern mit der Stelle im Buch. –– Wie gewohnt von anderen Websites und Applikationen erwarten Studenten einen Link zur aktuellen Textstelle teilen zu können. Die URL sollte sich dynamisch anpassen. – Studenten erwarten die bestmögliche Nutzung der Fenstergröße optimiert auf Lesbarkeit. Vertikaler Platz für Text hat Priorität, um scrolling zu ersparen. –– Genau so könnte das Buch die sekundäre Applikation auf dem Bildschirm sein, beispielsweise als Nachschlagewerk beim Verafassen von Arbeiten. In diesem Fall sollte das Layout auch bei kleinstmöglicher Fensterbreite nutzbar sein, ohne auf Funktionen zu verzichten. – Studenten lesen auf dem Smartphone weiter oder öffnen zugeschickte Links auf dem Smartphone.

In der ersten Iteration habe ich mich auf das Front-End und eine möglichst gute Umsetzung des Visual Designs konzentriert, um mich in einer späteren Version auf für mich komplizierte Teile bei der Entwicklung konzentrieren zu können.

Rudimentäre PHP includes erfüllten ihren Zweck in dieser Version, um Inhalte wenigstens ansatzweise dynamisch laden zu können und nicht wie in der bestehenden Anwendung Code und Inhalte zu vermischen. Interaktive Elemente und automatische Anpassung der URL mit Ankern konnte mit jQuery ausreichend umgesetzt werden für diese erste Version.

Das Layout konnte auf Bedienung und Lesbarkeit getestet werden auf Desktop und Mobile und getroffene Annahmen (siehe oben) konnten gegen ihren tatsächlichen Nutzen innerhalb des Kurses validiert werden.

(Erster Prototyp)

Die Buchinhalte lagen als Microsoft Word Dokumente vor. Zu beachten waren mathematische Formeln, Videos und Bilder mit Bildunterschriften. Damit externe Dienstleister mit der manuellen Konvertierung der Inhalte von Word in HTML beginnen konnten, musste ich zu erst Standards für die Formatierung und Dateistruktur definieren, an denen sich die Dienstleister orientieren sollten.

Mit Codebeispielen und Dateivorlagen erhofften wir uns viel Nacharbeit zu sparen. Die Resultate waren akzeptabel, gute 6 Stunden Nacharbeit – vergessene Klassen, nachlässige Strukturierung – blieben mir leider nicht erspart.

(Dokumentation für Redakteure)

Copyright

©Max Tillich

Um auch über ein Semester gestreckt den Überblick über die verschiedenen zu integrierenden Funktionen zu behalten, um Aufwand und Fortschritt abschätzen zu können und um Fragen und Diskussionen zu jeder Komponente gebündelt abseits von Email-Threads zu sammeln, entschied ich mich ein Trello Board anzulegen.

Die Columns habe ich nach der Kanban-Methode angelegt. Horizontal werden Karten (Aufgaben) mit laufendem Fortschritt von links nach rechts verschoben. Die Column „Icebox“ ist dabei eine lose und unpriorisierte Sammlung an Funktionen und Aufgaben, die mittelfristig noch nicht angegangen werden. Die priorisierten Columns sind von oben nach unten abzuarbeiten.

Die Methode hat sehr gut funktioniert und Aufgaben konnten auch Kim zugewiesen werden. Wir behielten weitestgehend den Überblick auch nach längeren Pausen und vermieden viel Emailverkehr.

(Trello Board)

Ziele für die zweite Iteration: 1. Dynamische URLs für jeden Abschnitt eines Kapitels 2. Bessere Performance beim scrollen und navigieren 3. Leseposition speichern 4. Startseite 5. Visualizations-Seite 6. Integration aller Inhalte inkl. Videos

Für die zweite und finale Umsetzung habe ich mir außerdem vorgenommen technisch etwas neues auszuprobieren und habe mich deshalb für AngularJS entschieden als Javascript Framework mit dem sich viele der Ziele (siehe oben) realisieren sollte ohne Improvisation wie im ersten Prototyp mit PHP und jQuery.

Weil Projektmanagement, Inhalt und Design schon im Vorfeld vorbereitet waren, konnte ich mich in dieser Phase auf die Implementierung konzentrieren, was auch nötig war wie sich herausgestellt hat. Was ich bis zum Zeitpunkt dieser Dokumentation noch nicht geschafft habe ist Ziel 3 und auch dass z.B. die Leseoptionen bei Kapitelwechsel beibehalten werden.

Fazit

Ich würde inzwischen gestalterisch und auch technisch noch so einiges anders angehen. Seit alle Inhalten integriert sind, fallen beispielsweise viele gestalterische Probleme mit Abbildungen auf. Technisch sollten noch Funktionen wie Bookmarks und Leseposition merken aber auch die Synchonisation zwischen Mobile und Desktop integriert werden, um das Projekt zu vervollständigen. Die neue Priorität hat Mehrsprachigkeit, was primär eine technische Herausforderung darstellen wird.

Habe viel neues gelernt und die Zusammenarbeit mit Kim und dem Institut hat Spaß gemacht.

(Finale Applikation)