Version 1: Erste Vorführung

Contents

• Bedingungen
  • Funktionsweise des Systems (Konzeption)
  • Darstellung
  • Funktionalität
  • Vorführaufbau
• Design
• Darstellung und Verhalten Frontend
  • Startseite
  • Textdarstellung
  • Metadaten
  • Kopplung

Diese Teilspezifikation beschreibt, was geschehen sein muss, um den Meilenstein v1.0.0 - Buchmessenversion abzuschließen.

Bedingungen

Funktionsweise des Systems (Konzeption)

1. Es gibt ein Konzept für Textknoten (siehe Konzeption Datenhaltung) (Status: fertig)
2. Es gibt ein Konzept für die Kopplungen von Textknoten unterschiedlicher Lizenznehmer (Issue #91)
3. Es gibt ein Konzept für Metadaten (Status: fertig)
4. Es gibt ein Konzept für die Kopplung der Textknoten (Status: fertig)
5. Es gibt ein Konzept für den Textimport (Issue #22)
6. Es gibt ein Konzept für die Nutzerverwaltung (Status: fertig)
7. Es gibt ein Konzept des Backends (Status: fertig)
8. Die Workflows sind definiert (Siehe Konzeption Workflows)

Darstellung

1. Die Startseite ist gestaltet und klickbar
2. Reiner Text wird bestmöglich angezeigt
3. Die Zahlungshürde ist gestaltet und getextet (Siehe Konzeption-Bezahlhürde)
4. Der Kopplungsbereich ist gestaltet (Issue #33)
5. Login ist gestaltet (Issue #38)
6. Metadatenausgabe ist gestaltet (Issue #21)
7. Der Ansichtsdummy des Lesezeichens ist gestaltet (Issue #26)

Funktionalität

1. Ein Leser kann sich einloggen und ausloggen (Status: fertig)
2. Ein Leser kann ein Themenfeld anklicken und wird zu einem Zugangsknoten geleitet. (Status: fertig)
3. Über die Kopplung gelangt ein Leser mittels des Zahlungshürdendummys zu einem weiteren Textknoten (Issue #54)
4. Der Dummy der Zahlungshürde fragt die Zahlungsbereitschaft ab: Ja/Nein und verhält sich entsprechend (Issue #54)
5. Der Leser kann zum vorangegangenen Textknoten zurückkehren. (Issue #20)
6. Der Leser kann zur Startseite zurückkehren (Status: fertig)
7. Der Lizenznehmer kann twine-Dateien hochladen und aktualisieren (Issue #22)

Vorführaufbau

Das Dummydaten-Script installiert folgendes: (Issue #94)

1. Admin-Benutzer
2. ein aktives Themenfeld
3. ein Access-Knoten
4. drei Ebenen mit fertigen Textknoten
5. eine Ebene mit Optionsknoten

Design

Benötigt wird ein Designkonzept mit:

• Einem modernen Farbschema. Gedeckt, zurückhaltend, kontrastreich, bevorzugt S/W oder Grau (Status: fertig, Issue #78)
• Einheitliche Gestaltung für Buttons und Formularelemente (Status: fertig)
• Hintergrundkonzept und "Rahmen" für die Themenfelder auf der Startseite (Status: fertig)
• Logo (Bevorzugt Oktopus wegen der 8 Optionen) (Status: fertig)
• Das Design muss in CSS umgesetzt werden, Responsive und für Anzeige auf Laptop (Firefox) optimiert sein.

Darstellung und Verhalten Frontend

Benötigt werden folgende Darstellungselemente, hier verlinkt mit den Mockups aus der Dropbox.

1. Startseite
2. Textdarstellung
3. Metadatenausgabe
4. Optionsauswahl

Startseite

Auf der Startseite befinden sich drei Knöpfe über die selbe Breite wie das Themenfeld.

• Der linke Knopf hat das Logo "Neuladen" und ist ausgegraut und ohne Funktion
• Der mittlere Knopf hat das Logo "Info" und öffnet ein DIV wie in der Ansicht 5
• Der rechte Knopf hat das Logo "Menü" und öffnet ein Dropdown mit den Optionen Registrieren und Login. Vergleiche hierzu Nutzerverwaltung.

Das Themenfeld ist in 10 Bereiche aufgeteilt.

• Feld 1 ist ein Slider, dem drei Grafiken hinterlegt sind. Die Anzahl der Grafiken wird durch Punkte zentriert am unteren Rand der Fläche angezeigt Beim Anklicken wechselt die Grafik. Keine weitere Funktion. (Issue #26)
• Feld 2 ist mit einer farbigen Grafik hinterlegt und enthält den Text "Lorem", beim anklicken wird ein zufälliger Text mit der Zuordnung "Lorem" und "Einstieg" aufgerufen. Dabei soll die URL /topic/<topic_id> aufgerufen werden, deren Controller Action dann nach /text/<textnode_id> für einen beliebigen Textknoten mit der Eigenschaft ACCESS = true && topic_id = <topic_id> weiterleitet. (issue #23)
• Feld 3 bis 9 mit einer ausgegrauten Grafik hinterlegt und ohne Funktion. (issue #23)
• Feld 10 enthält eine Werbegrafik, die beim Anklicken auf den Dembelo Github führt. (Issue #27)

Aussehen:

• Auch auf Monitoren, soll die Darstellung eher im "Hochkant"-Format erfolgen, da dies auch der Textdarstellung entspricht. (Status: fertig)

Textdarstellung

• Zu realisieren ist reiner Fließtext, explizit ohne Überschriften, Einschübe, Bilder, Tabellen oder ähnliches. (Status: fertig)
• Der Text wird einspaltig gescrollt, keine irgendwie gearteten Seitenwechsel oder Umbrüche. (Status: fertig)

Zur Diskussion und Realisierung vergleiche Konzeption Lesbarkeit

Typographie

• Schriftart finden (issue #95) und einbinden (Issue #96) (Serifen, freie Lizenz)

Folgende Aspekte müssen diskutiert und beschlossen werden:

• Farbkontrast Hintergrund/Schrift (Der Hintergrund sollte nicht strahlend weiß sein, weil das schon ziemlich hell ist, Invers-Funktion)
• Schriftgröße in Abhängigkeit zur Auflösung/Bildschirmgröße

Metadaten

In einem DIV wird der Lizenznehmer, ggf. Story, Autor, Artdirektor angezeigt. Das CC-by-sa Logo und ein Share-Button der die URL des Textes ausgibt. (Issue #21)

Kopplung

Angezeigt werden sollen drei gleichberechtigte Optionen. Der ihnen hinterlegte Link/die hinterlegte URL sollen nicht bei Mousover oder durch Browserfunktionen einsichtig sein. Genauso darf die hinterlegte URL nicht aus dem Quellcode ausgelesen werden können: /text/<parent textnodeId>/option/<hitchId> (Issue #34)

Vor die Optionen wird ein Dummytext als Zahlungspflichthinweis gesetzt. (Issue #54)

Nach dem Anklicken einer Option wird ein Popup/DIV angezeigt, mit dem Hinweis, das hier eine Bezahlhürde liegen würde und der Frage ob man bereit wäre 10 ct zu bezahlen mit einer "Ja/Nein" Option. Diese Ansicht ist eine Demo-Funktion und soll im Endprodukt nicht erhalten bleiben. (Issue #54)

Betätigt man "Ja" springt man in den entsprechenden Text (/text/<child textnodeId>), betätigt man "nein" landet man wieder im Ursprungstext (/text/<parent textnodeId>). (Issue #54)