2.3. User Interface

  • Polit@aktiv wird für verschiedene Kunden zur Verfügung gestellt. Es ist unbedingt erforderlich, verschiedenen Kunden verschiedene Designs und Layouts anbieten zu können. Dies soll mit verschiedenen Themes erreicht werden.
  • Für Mitarbeiter und für Benutzer sollte das System, insbesondere auch die Oberfläche / GUI, möglichst leicht / intuitiv bedienbar sein. Dazu zählen folgende Funktionen:

Aus Sicht Redakteur

  • Inhalte in die Site einfügen
    • neue Seiten anlegen
    • Webcontents erstellen
    • Bilder hochladen und einfügen
  • Spalten und Content-Container

Themes

Ein Theme (nicht Thema) ist die Zusammenstellung von Formen, Schriften und Farben. z.B.

  • Hat ein Textblock abgerundete Ecken oder kantige?
  • Gibt es Schlagschatten an einem Bild oder harte Kanten?
  • Ist die Schrift Helvetica oder Arial? Dunkelblaue Schriftfarbe auf grünem Hintergrund oder Braun auf Grau?
  • Ist die überschrift einer seite zwei oder drei mal so groß wie der restliche Text.
  • etc.
    Das Theme bestimmt also, wie die Standardkomponenten aussehen.
  • Es sollten verschiedene Themes zur Verfügung stehen. Anfangs nur einige wenige. Im LAufe der Nutzungszeit sollten weitere dazukommen können.
  • Ein Theme wird ausgewählt bei der Erzeugung einer Instanz (für die jeweilige Gemeinde). Es gilt dann für alle darin enthaltenen Diskussionskreise (Themen).
  • Neue Seiten werden immer im vorgegebenen Theme angelegt.

Layout

Ein Layout bestimmt die grundlegende Struktur der Seite. Es hängt von der Bildschirmgröße ab. z.B.

  • Navigation immer oben oder Navigation immer links an der Seite?
  • Content auf der vollen Breite darstellen oder in der Breite beschränken und den Inhalt zentriert darstellen? Bitte eher nicht.
  • Wird der Inhalt in einer oder in zwei Spalten angezeigt? Bei großen Bildschirmen kann es durchaus bis zu vier Spalten geben.
    Es soll mehrere Layouts zur Auswahl für einen Diskussionskreis geben. Diese hängen aber stark von der Bidlschirmgröße ab: Responsive Design!
  • Responsive Design ist KO-Kriterium für alle Themes. Beispiele:
  • Der Artikel aus der Mitte eines Containers soll auf die volle Breite des Containers gestreckt werden, wenn seine Breite unter Größe "md (medium)" fällt.
  • Eine Spalte sollte mindestens 40 und maximal 100 Zeichen (der "normalen" Schrift) breit sein.
  • Auf einen großen Bildschirm passen dann bis zu vier Spalten. (Vorbild: Tageszeitung). der Redakteur gestaltet Artikel in Spalten, von denen - je nach Bildschirmgröße - mehrere nebeneinander stehen dürfen / sollen. Ist der Bildschirm kleiner, werden automatisch weniger Spalten angezeigt. Ist er sehr klein, werden die Spalten schmäler angezeigt.

Design mit Theme einfach anpassbar

Es wird ein Basis-Theme (nicht Thema) zur Verfügung gestellt.
Vorschlag: Das Basis-Theme ist ein "Tailwind" basierendes UI namens "Skeleton UI". Damit gibt es ein Grundset an CSS. Ein neues Thema muss dann nicht von null anfangen und kann den Komfort von "Tailwind" in der Umsetzung seiner individuellen Style-Anpassungen zurückgreifen. (Tailwind, Skeleton UI)
Folgende Funktionen werden in der Basis Version umgesetzt werden:
Für die Seite+SeitenLayout soll es möglich sein, CSS einzugeben, deren Auswirkung dann auch angezeigt wird.
Ein Theme soll mit einem Layout verknüpft werden können. So kann man ein Theme für verschiedene Seiten verwenden.

Themeentwicklung

  • Um ein Theme zu erzeugen, sollte es ein spezielles Menu geben, das dem Admin zur Verfügung steht. Kann eventuell auch später zur Verfügung gestellt werden.

Es ist genau zu klären, wie das geschehen sollen. Hier fehlen weitere Detail-Informationen.

  • Eine Idee (weniger Aufwand): Ein Theme wird in der Form einer CSS-Eingabe mit Namen als Datensatz gespeichert. Diese CSS werden dann mit einer Seite verknüpft und werden dann mit der Seite entsprechend ausgeliefert. Die Bearbeitung des Themes erfolgt über ein Text-Eingabefeld, in das die CSS geschrieben werden können.
  • Eine weitere Idee (mehr Aufwand): es gibt einen Editor, in denen man Formen, Farben und Typen angibt und aus dem dann die CSS generiert werden. (Version v0.9.x? oder später?)

Schriften

Es muss eine ganze Reihe von Schriften geben. Sie müssen fett oder kursiv oder unterstrichen eingesetzt werden können. Ist hochgestellt erforderlich? Auf jeden Fall sind alle Schriften in verschiedenen Größen erforderlich. Ein Schrift sind Sonderzeichen (z.B. griechische Zeichen).
Die Schriftarten legt Anni fest. Es muss möglich sein, später weitere Schriften zu implementieren.