Studienarbeit – Erstellung einer dynamischen mobilen Dokumentation

Vorlage_Titelbild_1024x460

Wie in unserem Beitrag  vor einigen Wochen präsentieren wir euch heute erneut eine umgesetzte Technische Dokumentation für mobile Endgeräte. Hierbei handelt es sich ebenfalls um eine Studienarbeit, in der eine mobile Dokumentation für einen Kaffeevollautomaten erstellt wurde.

Aufgabenstellung

Ziel der Studienarbeit war es, im Rahmen der Veranstaltung Media-Engineering ein Konzept sowie eine Umsetzung von E-Learning-Anwendungen oder Technischer Dokumentationen für das Internet und für mobile Endgeräte zu erstellen.

Projektthema

Bei der Wahl des expliziten Projektthemas hatten wir großen Spielraum, solange sich das Projekt in der übergeordneten Aufgabenstellung befand. Die Wahl meines Projektthemas wurde dadurch viel aus eigener Motivation getrieben, mein Wissen im Bereich mobiler Dokumentation (speziell dynamische Anwendungen) zu vertiefen. Zusätzlich zum Bereich mobiler Dokumentation war mein Interesse groß, die Möglichkeiten multimedialer Inhalte ebenfalls weiter auszutesten und Neues zu lernen.

Als Content wurde die Dokumentation der CaffeO Barista T von Melitta gewählt.

Ausgangssituation

Die Dokumentation der CaffeO Barista T lag im PDF-Format vor und wurde von der offiziellen Produktseite heruntergeladen .

Nun stellt sich womöglich der/die eine oder andere die Frage: “Wieso ein Kaffeevollautomat?”. Mag sein, dass ein Kaffeevollautomat nicht das spektakulärste Produkt ist, jedoch eignet sich die Dokumentation sehr gut für die Umsetzung einer mobilen Dokumentation. Da die Verpackung inkl. der Dokumentation einer Kaffeemaschine gerne mal im Keller, in der Garage oder vielleicht sogar auf dem Altpapier landet, ist die Dokumentation oft unauffindbar, wenn sie benötigt wird (ich spreche hier aus eigener Erfahrung). Eine mobile Dokumentation wäre, solange ein mobiles Endgerät in Reichweite ist, dagegen immer vorhanden und schnell gezückt.

Da viele Geräte zudem mittlerweile über WIFI bedienbar sind (Stichwort Internet of Things), ist es in naher Zukunft nicht unwahrscheinlich, dass der Kaffeevollautomat ebenfalls via App angesteuert werden kann – eine kontextsensitive Dokumentation wäre in der App dadurch ebenfalls ein großer Mehrwert. Die App wäre dadurch zudem als Marketing-Mittel nutzbar.

Projektschwerpunkte

Die Konzeption und Umsetzung der mobilen Dokumentation verteilt sich auf mehrere Schwerpunkte:

  • Dynamische Applikation
    • Multilingualität
  • Erweiterte multimediale Inhalte
    • WebGL
    • SVG
    • Videos

Auch ich werde die einzelnen Schwerpunkte kurz erläutern und euch das Ergebnis am Ende des Beitrages präsentieren.

Dynamische Applikation

Die Applikation wurde als Web-App basierend auf dem Framework jQuery Mobile umgesetzt. Zusätzlich wurden CSS3, JavaScript, AJAX, SVGs und WebGL verwendet – hierzu gleich teilweise mehr.

Es wurde sich bewusst für eine Web-App entschieden, da die Anwendung ausschließlich auf mobilen Endgeräten verwendet werden soll. Durch das Framework PhoneGap ist es zusätzlich möglich, die Web-App nachträglich als hybride App in die App Stores zu publizieren.

Die Inhalte der Anwendung wurden in JSON erstellt. Da ich bis zu diesem Projekt nur sehr wenig mit JSON gearbeitet hatte, wollte ich dieses Datenformat ein wenig besser kennenlernen und lernen, wie es verarbeitet werden kann. (Was war gleich nochmal JSON  ?) Die JSON-Daten wurden in JsonStub   hinterlegt. JsonStub kann dafür verwendet werden, einen Backend zu simulieren, also eine Art Datenbank, die immer zur Verfügung steht und die Daten jederzeit über einen WYSIWYG-Editor bearbeitet werden können. Da es bei JSON sehr wichtig ist, dass dieses valide ist, hat JsonStub im Editor einen Prüfautomatismus integriert, der direkt anzeigt, ob die Daten valide sind.

Die JSON-Daten werden durch AJAX-Befehle angesprochen und als HTML ausgegeben. Wie in unserem Beitrag “Wie gelangen die Informationen zum Anwender: statisch oder dynamisch?”   beschrieben, werden die Inhalte zum Zeitpunkt des Aufrufes zusammengeführt und sind dadurch immer aktuell.

dynamisch Kopie

Multilingualität

Da die JSON-Inhalte in jeder Sprache die gleiche Struktur haben, ist es durch die dynamische Verarbeitung sehr schnell möglich, mehrsprachige Dokumentationen umzusetzen. Um die Daten in AJAX zu verarbeiten, müssen lediglich die entsprechenden Quellen der Einträge eingefügt werden. Da in JsonStub mehrere Datenbank-Sätze angelegt werden können, während diese wiederrum mehrere Einträge haben können, eignet sich dies optimal für mehrsprachige Dokumentationen (ein Datensatz pro Produkt, ein Eintrag pro Sprache).

Die englische Variante der Dokumentation wurde im Rahmen des Projekts nur prototypisch umgesetzt. Hierfür wurde ein weiterer Eintrag in der DB angelegt und die Überschriften in Englisch übersetzt.

deut

engl

Erweiterte multimediale Inhalte

WebGL

Das 3D-Modelle einen großen Mehrwert  für die Technische Dokumentation haben können und wie diese eingefügt werden, haben wir ja bereits in unserem Zweiteiler erläutern. Aus diesem Grund wurde auch im Rahmen dieses Projektes ein 3D-Modell in die Web-App eingebunden. Das 3D-Modell wurde neben der reinen Anzeige noch um ein paar Funktionalitäten erweitert. So ist es möglich, Bauteile der Kaffeemaschine ein- und auszublenden und Bauteile farblich hervorzuheben.

Bei dem 3D-Modell handelt es sich nicht um den dokumentierten Kaffeevollautomaten, sondern lediglich um ein freies Modell, dass von GrabCAD heruntergeladen und mit dem WebGL-Publisher angepasst wurde.

Eine sinnvolle Anwendung des 3D-Modells für den Kaffeevollautomaten wäre zum Beispiel bei der Reinigung, um verwinkelte, versteckte Bauteile beim auseinanderbauen hervorzuheben oder jedoch klassisch bei der Wartung sowie Reparatur.

WebGL

SVG

Ein weiterer Teil der Umsetzung war es, SVG-Dateien zu animieren. Da SVG-Illustrationen meist problemlos aus CAD-Modellen exportiert werden können, für die Print-Dokumentation oder aus Marketinggründen erstellt werden müssen, sind diese ohne besonderen Mehraufwand meistens vorhanden. Anstatt nun zeitaufwändige Filme der Maschine oder Animationen mit Flash oder ähnlichen Programmen zu erstellen, kam die Idee, SVG-Dateien zu erweitern.

Für die Projektarbeit waren keine SVG-Dateien vorhanden, diese wurden darum exemplarisch selbst mit Adobe Illustrator erstellt.

SVGs können mit JavaScript und CSS animiert werden, besitzt jedoch aber auch ein eigenes Animationsmodell. Beide Vorgehensweisen wurden in der Projektarbeit umgesetzt.

DuKzAccsnj

Animation via JavaScript

g3Ba7HaAYc

Animation via eigenem Animationsmodell

Video

Als dritte multimediale Umsetzung wurden zwei klassische Videos erstellt. Hierfür wurde die Software iMovie für Mac verwendet. Die Videos sind aus der Anwenderperspektive und zeigen einzelne Handlungsschritte zur Verwendung der Kaffeemaschine.

imovie

Die Videos sind jeweils in das entsprechende Kapitel verlinkt worden. (Latte Macchiato zubereiten/Milch zubereiten). Die Videos sollen schnell und möglichst wortlos dem Nutzer die notwendigen Schritte erklären.

Auch könnten diese als Utility-Filme weiterverarbeitet werden. „Utility Filme sind interaktive Anleitungsfilme ohne Text und Sprache. Wie ein Navigationsgerät führt er den Anwender Schritt-für-Schritt zu seinem Handlungsziel.“ (memex GmbH 2015)

Ergebnis

Das Ergebnis stellt die mobile Dokumentation auf der Displaygröße des Apple iPhone 6 dar (falls die Web-App im schwarzen Rahmen links nicht gleich angezeigt wird, müsst Ihr die Seite aktualisieren, dann sollte es funktionieren).
Wer die Web-App am eigenen Smartphone oder Tablet betrachten möchte, kann entweder den folgenden QR-Code scannen oder über diesen Link   öffnen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *