Sachstandsberichte III

Template Überlegungen mal anders - Schritt für Schritt

In den Sachstandsberichten möchte ich Inhalte langfristig und dauerhaft bearbeiten. In diesem Teil möchte ich das Layout für die Sachstandsberichte vorstellen und die Entwicklungsgeschichte erklären.

In Teil I ging es um die Hintergründe für die Entscheidung überhaupt ein Format Sachstandsberichte einzuführen, in Teil II habe ich die Übersichtsseite vorgestellt und erklärt, wie es zu einigen der Layoutdetails gekommen ist.

In Teil III geht es jetzt um das Layout der Sachstandsbericht-Einzelseiten. Welche Überlegungen habe ich im Vorfeld angestellt, habe ich das überhaupt? ;-) Inwieweit ist es nützlich, wenn ich sowohl Design, HTML 5, CSS und MODX Templating aus einer Hand heraus entwickle?  

  • Welche Vorüberlegungen habe ich angestellt?
  • Aus welchen Bestandteilen würde sich ein Sachstandsbericht zusammensetzen?
  • Wie möchte ich die Revisionen darstellen?
  • Wie möchte ich Textänderungen sichtbar machen?
  • Wie wird diese Funktion die Lesbarkeit des Textes beeinflussen?
  • Welche Elemente fehlen noch?
  • Welche Schwierigkeiten ergeben sich?
  • Was konnte ich erfolgreich umsetzen, was nicht?
  • Was würde ich noch gerne umsetzen, kann es aber nicht?
Sachstandsberichte III - Eine ganze Anzahl von Schritten war notwendig, bis es zum aktuellen Stand des Artikel-Layouts kam
Eine ganze Anzahl von Schritten war notwendig, bis es zum aktuellen Stand des Artikel-Layouts kam
Vorüberlegungen

Eine Idee, massive Konsequenzen

Im Februar 2022 hatte ich die Idee Zeit zu sparen, in dem ich ein an der Uni Wuppertal 1995 geschriebenes Essay für meinen Blog als Artikel zu verwenden. Das dürfte die zeitraubendste Idee zur Zeitersparnis gewesen sein, die ich jemals hatte. Ich gebe zu, ich kokettiere gerne damit, aber es ist auch tatsächlich so gekommen. Statt mal eben etwas Spannendes zu bloggen habe ich en passant ein neues Artikelformat entwickelt. Nach fast 5 Monaten ist es immer noch nicht fertig. Zwar ist eine erste, immerhin schon in der neuen deutschen Rechtschreibung korrigierte Fassung neben dem Original online, aber noch lange ist nicht alles fertig. Ich habe noch keine technische Lösung für die Fußnoten, was ein massives Problem für die Weiterentwicklung des Essays ist, aber ich bin zuversichtlich, dass ich eine finden werde. 

Templateentwicklung

Wie es bisher hier im Blog eigentlich bisher immer so war, habe ich immer wieder Artikel geschrieben, für die ein Template nicht ausreichte beziehungsweise mit dem ich den Inhalt nicht wie gewünscht umsetzen konnte. Und dafür dann auf die Schnelle versucht eine Lösung zu finden. In etwa so, wie mit einem Taschenmesser, dass man auf eine Reise mitnimmt. Wenn man keine Weinflaschen öffnen möchte, wozu einen Korkenzieher transportieren. Und wenn man einen braucht, baut man sich einen dran. Keep it simple and lightweight. Einfach und leicht. Diese Herangehensweise kann aber dazu führen, dass man am Ende ein total verbasteltes Taschenmesser hat, dass eigentlich für nichts mehr richtig taugt. In der Zwischenzeit sind dadurch, dass ich leicht und einfach angefangen habe, 10 verschiedene Templates für Blog-Beiträge entstanden. Da ich für sie eine Kombination aus Nummern und Namen verwende, so heißen sie:  

  • 04.10.Blog.Beitrag
  • 04.12.Blog.Beitrag.EinBild
  • 04.40.Blog.Beitrag.Multi-Image
  • 04.41.Blog.Beitrag.Multi.Content
  • 04.42.Blog.Beitrag.Multi.Content.Plus.Galerie
  • 04.50.Blog.Lieblinge.Multi.Content.Multi.Galerie
  • 04.55.Blog.Zwei.Spalten.Multi.Content
  • 04.80.Blog.Multi.Content.6fach-Do.not.Use.Anymore
  • 04.91.Blog.Beitrag.Coding.Rstats
  • 04.92.Blog.Beitrag.Coding.php

Wie man gut sehen kann, die von Basic abgeschaute Nummerierungstrategie hat sich bewährt, denn ich kann in der Regel neue Templates einschieben. Auch sehr interessant die Kommentare, die ich mir selbst in den Titeln schreibe. ,-)  
  
Eine noch kommende Aufgabe - die auf einem 16-Spalten-Raster-basierenden Beiträge in ein Raster mit 20 Spalten überführen. Das werde ich hoffentlich noch in diesem Jahr beginnen und nach und nach umsetzen.

Diese Vorgehensweise - das ändern, was man braucht - führt zu einem, oftmals in der Zukunft nicht mehr verständlichem Vorgehen. »Was habe ich mir nur damals dabei gedacht?« Natürlich sollte ich alle Änderungen dokumentieren, ich bleibe aber dabei, dass das Dokumentieren nur einen minimalen Anteil meiner Zeit in Anspruch nehmen sollte, nicht den überwiegenden.

Ich habe mit dem neuen Template einiges besser gemacht, einiges hätte ich noch besser durchdenken können.

Ableitungen: Ein kleines Pflichtenheft

Das von mir 1995 geschriebene Essay war sozusagen die Blaupause für das neue Format. Das wollte ich umsetzen können. Dazu kommen noch neue Anforderungen, die das Sichtbarmachen von Änderungen betreffen und die einfache Zugänglichkeit von unterschiedlichen Versionen des Essays. Ich musste beachten, welche Auswirkungen es auf Google hat, wenn ich Double-, Triple- oder X-Versionen eines Textes auf der Website vorhalte. 

Ein ganz einfaches, an Kapiteln orientiertes Template könnte strukturell so aussehen:

Layout für ein einfaches Template mit sich wiederholenden Kapitel-Elementen
Layout für ein einfaches Template mit sich wiederholenden Kapitel-Elementen
Einfaches Template mit Kapiteln

Wenn es doch nur so einfach wäre

 Es gibt noch keine Unterkapitel, keine Zitate. Meine Überlegungen führten zu dieser  Liste, dem kleinen Template-Pflichtenheft

  • Titel
  • Subtitel
  • Teaser
  • Inhaltsverzeichnis
  • Artikelbild
  • Meta-Angaben
  • Kapitel
  • Unterkapitel
  • Kapitelüberschriften
  • Kapitelzitate
  • Kapitelbilder

Das führt schon zu einem verhältnismäßig komplizierten Template, wie im nächsten Bild zu sehen ist.

Steigende Komplexität - Für die Kapitel und die Unterkapitel können jetzt Bilder angelegt werden.
Steigende Komplexität - Für die Kapitel und die Unterkapitel können jetzt Bilder angelegt werden.
Kapitelbilder

Und Unterkapitelbilder

Das bin ich für den vorhandenen Text einmal durchgegangen und habe gemerkt: Alle Unterkapitel haben ein eigenes Bild, dass im Text mitläuft, sprich über dem Unterkapitel steht. Dazu kommt, dass in der Regel die Kapitel mehr als ein Bild haben, zumindest ist dies in dem Essay von 1995 der Fall. 

Außerdem waren überhaupt noch keine Marginalien eingeplant. Zunächst, eine Marginalie, das ist eine Randbemerkung, und ich benötige mindestens eine pro Artikel. Alle Bilder würden einen Titel benötigen, im besten Falle auch eine eindeutige Nummerierung, ein Problem, das ich mit Stand heute noch nicht gelöst habe.

In der rechten Spalte lassen sich in dieser Version Randbemerkungen einfügen, sogenannte Marginalien
In der rechten Spalte lassen sich in dieser Version Randbemerkungen einfügen, sogenannte Marginalien
Mehr Marginalien

Mehr Details

Wie Ihr sehen könnt, ergänze ich mehr und mehr Details, um das komplexe Bild realistischer zu machen. Wir nähern uns dem Ende der Überlegungen zum Grundlayout. Ich habe mich irgendwann entschieden, Abschied von meinem schönen 16er Grid zu nehmen, denn mit ihm erhielt ich eine sehr schöne Annäherung an den goldenen Schnitt, denn 16 kann man aus 3, 5 und 8 zusammensetzen, was eine gute Annäherung im Bereich der niedrigen Zahlen ist (und ein Teil der Fibonacci-Folge). 

Marginalien sind eine sehr gute Idee, aber ich möchte gerne Randbemerkungen sowohl zu jedem Kapitel und zu jedem Unterkapitel. Marginalien haben grundsätzlich alle Titel, einen Text, eine Quellenangabe und ein Feld, in das ein Link eingetragen werden kann.

Es sollte möglich sein, beliebig viele Kapitel anzulegen, diese bei Bedarf auch untereinander zu verschieben. Die Nummerierung der Kapitel sollte deshalb automatisch erfolgen.

Das Inhaltsverzeichnis sollte sich ebenfalls automatisch generieren, in einer späteren Version vielleicht auch das Verzeichnis der Abbildungen.

Viele Bildmöglichkeiten und vielfältige Möglichkeiten, den Text zu kommentieren.
Viele Bildmöglichkeiten und vielfältige Möglichkeiten, den Text zu kommentieren.
Editionen

Im Header

Der Teil, der bisher komplett fehlte ist der editionswissenschaftliche Teil. Wo erhält man Zugang zu älteren Versionen des Textes? Wie werden Änderungen am Text sichtbar gemacht? Welche weiteren Metaangaben möchte ich noch zusätzlich machen?  
  
Ich habe mich dazu entschieden, dies wie in einem Formblatt, das man früher vielleicht auf Papier ausgefüllt hätte, zu gestalten - eine kleine Tabelle mit einer zurückhaltenden Linienausstattung. Darüber die laufende Nummer aller Sachstandsberichte, den bleibenden Titel, in der Tabelle folgende Daten:

  • die Versionsnummer, ich werde mich wie in der Software gelegentlich zu Major-Releases durchringen, bleibe aber hinter dem Punkt einstellig, ich muss es nicht übertreiben
  • das Erstellungsdatum
  • das Änderungsdatum - an dieser Stelle soll der Zugriff auf ältere Versionen erfolgen
  • Autorenangabe - was bedeutet ich bin offen für Gastautoren oder Themenpatenschaften
  • Themen, die wiederum auf meine Kategorien verlinkt sind, damit sind die Sachstandsberichte mit meinem Blog-Ökosystem vernetzt, in das die Sachstandsberichte übrigens auch über die Highlight-Kategorien vernetzt sind

Quellenangaben

Schließlich und schlussendlich braucht es für ein fundiertes, nahezu wissenschaftliches Werk natürlich noch Quellenangaben, ein Abbildungsverzeichnis, und ein Verzeichnis aller Zitate. Dazu habe ich trotz zahlreicher Empfehlungen noch keine für mich brauchbare technische Lösung gefunden. Eine Idee habe ich bereits, aber das braucht noch ein wenig Zeit.

Die Kommentare habe ich neben diese ganzen Angaben verschoben, denn ich bin jetzt schon sicher, dass die Fußnoten eine lange Liste werden, sollte ich das Problem der korrekten Darstellung und des Einfügens neuer Fußnoten in den Text technisch lösen.

Umsetzung

Ganz schön kompliziert

Komplexe Layouts in MODX zu bauen ist nicht so einfach. Prinzipiell lassen sich schon auch für eine Seite mit 10 oder 12 Kapiteln alle Variablen einzeln anlegen, aber das ergibt natürlich überhaupt keinen Sinn. Im Grunde hat man die Wahl zwischen Modmores Content Blocks oder MIGX. Und da ich mit MIGX schon einige Templates gebaut habe, fiel meine Wahl darauf. 

Ich würde allerdings zum ersten Mal ein Template mit verschachtelten MIGX Variablen bauen. Würde es mir gelingen. Ja. Aber es hat geraume Zeit in Anspruch genommen.

Aber von Anfang an

Die Seite selbst hat schon eine ganze Menge Variablen:

  • pagetitle
  • longtitle
  • description
  • introtext
  • template
  • alias
  • published
  • publishedon

Einige Standartvariablen habe ich ausgelassen. Dazu kommt ein ganzer Stapel Werte, den teilweise auch andere Blog-Templates bei mir verwenden:

  • versionnumber
  • stateofplay-number (der wievielte Sachstandsbericht ist es)
  • p0301-specialtitle (damit ich in der Headline HTML einsetzen kann)
  • blog-readingtime
  • blog-wordcount
  • blog-tags
  • blog-footnotes
  • blog-figures (Abbildungsverzeichnis)
  • blog-quotes (Verzeichnis der Zitate)

Für das Beitragsbild gibt es einen Haufen an eigenen TVs:

  • photo-teaser-title
  • photo-teaser-image
  • photo-teaser-date
  • photo-teaser-description
  • photo-teaser-fulldesc

Wie man sieht, passt dieser TV-Block nicht so recht ins Schema, den entnahm ich aus einem anderen Templates, da er auch das Social-Media-Bild vorhält. Dann habe ich noch einen Tab angelegt, der das Änderungsprotokoll enthält, die TV heißt

  • p0301MigxProtocol

Das sind jetzt alles nur Werte, die mit dem eigentlichen Inhalt noch überhaupt nichts zu tun haben. Nun wird der Inhalt zusammengestellt. Wie bin ich dabei vorgegangen?

Ich möchte es nicht zu technisch werden lassen, auch wenn es meiner Meinung nach zu wenige verständliche MIGX Anleitungen gibt. In MODX kann man mit dem Package MIGX sich wiederholende Elemente generieren. Ideal für die Kapitel. Diese kann man verschachteln. Ich generiere ein Kapitel und im Kapitel generiere ich dann die sich wiederholenden Unterkapitel.

Die Kapiteldarstellung wird von der Template-Variable (TV) p0301-MigxMasterStateofPlay kontrolliert. Via Json (JavaScript Object Notation) sind in dieser TV alle weiteren TV beschrieben und welchen Typ sie haben (Bild, Text, Richtext, Logikwert, Auswahlfeld, Datum etc). Zur besseren Bearbeitung habe in der späteren Darstellung in der Templatebearbeitung die Werte auf zwei Tabs verteilt. Dies sind aktuell alle TV in der übergeordneten Kapitel-TV p0301-MigxMasterStateofPlay:

Im ersten Tab:

  • p0301ChapterDate (Datum der Anlage bzw. Bearbeitung eines Kapitels)
  • chapterKindOf (Original, neu, gelöscht, bearbeitet)
  • p0301Quote (Zitat)
  • p0301QuoteAuthor (Zitatautor)
  • p0301QuoteSource (Zitatquelle, später ergänzt)
  • p0301SubHeadline (Kapitel Zwischenüberschrift)
  • p0301Headline (Kapitel Titel)
  • p0301-MigxContent (Die Unterkapitel - siehe dort). 

Im zweiten Tab:

  • p0301MarginaliaTitle
  • p0301Marginalia
  • p0301MarginaliaSourceName
  • p0301MarginaliaSourceLink
  • p0301-MigxImage (Bilder in der linken Spalte - siehe dort) 

Die Unterkapitel

Auch die Unterkapitel enthalten eine beträchtliche Menge an Variablen, ebenso wie die Bilder, die in der linken Spalte dargestellt werden. Hier die entsprechenden Listen:

p301-MigxContent

  • p0301ContentDate (Datum der Anlage bzw. Bearbeitung eines Unterkapitels)
  • p0301ContentInsertType (Original, neu, gelöscht, bearbeitet)
  • p0301MainContent
  • p0301mainPictureDate (Datum der Anlage bzw. Bearbeitung eines Unterkapitel-Bildes)
  • p0301mainPictureInsertType (Original, neu, gelöscht, bearbeitet)
  • p0301mainPictureTitle
  • p0301mainPictureCaption
  • p0301mainPictureLinkText
  • p0301mainPictureLink
  • p0301mainPicture (das Bild - finally)

und für die Marginalien neben jedem Unterkapitel kommen noch hinzu:

  • p0301MainMarginaliaTitle
  • p0301MainMarginaliaTitle
  • p0301MainMarginaliaLink
  • p0301MainMarginaliaLinkText

p0301-MigxImage 

  • p0301ColPictureInsertType (Original, neu, gelöscht, bearbeitet)
  • p0301ColPictureDate (Wann wurde das Bild eingefügt)
  • p0301ColPictureCaption
  • p0301ColPictureDescription
  • p0301ColPictureLinkText
  • p0301ColPictureLink


Habt Ihr noch mitgezählt. Das sind wirklich eine Menge TV zu bearbeiten. Und es gibt für jedes Kapitel eine Menge variabler Möglichkeiten.

Allerdings möchte ich die Anzeige der Textänderungen auf den eigentlichen Text beschränken und die Randbemerkungen davon ausnehmen. Denn die Randbemerkungen sind meine individuellen Überlegungen zum Text, Gedanken des Wieso und Weshalb.

Alle Variablen habe ich im Schaubild unten mal eingefügt und etikettiert.

Dieses Schaubild zeigt vielleicht ganz gut, wie komplex es in der Seite zu geht.
Dieses Schaubild zeigt vielleicht ganz gut, wie komplex es in der Seite zu geht.
Online

Aber nie fertig

Bis heute habe ich nicht so richtig darüber nachgedacht, was es eigentlich bedeutet, das Format Sachstandsbericht. Es bedeutet vor allem. Ich bin niemals fertig. Nie.

Ich kann mich im Moment nicht entscheiden, ob ich das gut oder schlecht finden möchte. Ich fange einfach einmal an. Im Template selbst steckt noch sehr viel Arbeit, die zu tun ist, ich denke ich bin zu 80 % fertig. Was noch zu tun ist:   
  
Eine Funktion, mit der ich zuverlässig Fußnoten in den Text einfügen kann, ohne jeweils jedes Mal alle neu zu nummerieren. Es gibt ein Plugin für Wordpress, aber das und die zu Grunde liegende Javascript-Lösung hilft mir auch nicht richtig weiter.

Für diesen Teil soll es genügen. Im nächsten Teil zeige ich, mit welchen Mitteln ich es schaffe, dass man sich einen Bearbeitungsstatus anschauen kann.

tl, dr;

Das Package MODX Migx erlaubt einen modularen Aufbau des Artikels mit sich wiederholenden Elementen, die auch verschachtelt sein können.

Kommentare (0)


Schreibe einen Kommentar




Mit dem Absenden des Kommentars stimme ich zu, dass der genannte Name, die genannte E-Mail-Adresse von cronhill.de im Zusammenhang mit dem von mir verfassten Kommentar gespeichert wird. Die E-Mail-Adresse wird nicht veröffentlicht oder an Dritte weitergegeben.