Sachstandsberichte II
Die Übersichts- und Kategorienseiten
In diesem Beitrag geht es um die Übersicht über die verfügbaren Sachstandsberichte. Das Design sollte deutlich von den bisherigen Kategorienseiten abweichen.
Meine Beweggründe für das neue Inhaltsformat Sachstandsbericht habe ich Euch in Sachstandsberichte Teil I geschildert. Es sollte ein neues, eigenständiges Format werden, mit einem Layout, dass mir die Möglichkeit gibt, hinreichend Fotos zum Inhalt zu ergänzen, meine Überlegungen zum Inhalt zu kommentieren. Der Gedanke dabei ist, dass die Leser mich bei der Entwicklung des Textes begleiten, vom Anfang über neue Recherchen bis zu immer neuen Ergänzungen.
Ich habe ganz ehrlich noch keine Ahnung, wohin das alles führen wird, es ist auf jeden Fall eine sehr aufwändige Art einen Text zu entwickeln und zu schreiben, aber dazu später mehr.
Jubiläum!
Ich freue mich außerdem ganz außerordentlich, dass dies heute der Beitrag Nummer 60 in meinem Blog ist. 60 Beiträge seit dem ersten neuen Beitrag vom 1. Mai 2019, der naturgemäß auch einer aus dem Maschinenraum war.
Layout
Kategorienseiten und Übersichten
Mit dem Neustart des Blogs 2019 gab es überhaupt noch keine Kategorienseiten. Das Content Management System hinter cronhill.de und blog.cronhill.de ist MODX. MODX ist im Gegensatz zu Wordpress nicht auf Bloggen getrimmt, die Stärken von MODX liegen eher im sauberen Templating und im strukturierten Anlegen von Seiten mit verschiedenen Layouts. Es gibt ein Kommentarsystem (QUIP), Kategorien aber gehören per se nicht zur Grundausstattung. Dazu kommt, dass ich dreisprachig schreibe und das ist auch in Wordpress nicht so einfach.
Jede Kategorie muss als Seite eigens angelegt werden. Das klingt zunächst umständlich, diszipliniert aber erstaunlich gut. Lesern ist in meinen Augen mit einem überbordenden Tag- und Kategoriensystem wenig geholfen, wenn sich nach einem Klick nur ein oder zwei Artikel hinter einem Kategoriebegriff verbergen. Mit wenigen übergreifenden, eher allgemeinen Kategorien ergibt sich eine größere Tiefe bei weniger seitlicher Ausweitung.
Bis Oktober 2010 waren die Kategorien, wie hier in diesem Beitrag nur links unter den Meta-Angaben zu erreichen. Anfang bis Mitte 2021 habe ich dann die Kategorien auf der Blogseite im Header verlinkt aufgelistet, da waren es 11 Kategorien. Und schließlich ab Juli 2021 gibt es sechs hervorgehobene Kategorien. Die Hervorhebung erfolgt manuell, das heißt, ich kann immer wieder neue Schwerpunkte setzen. So wird vermutlich in Kürze Star Trek nach der enttäuschenden zweiten Staffel von Star Trek Picard rausfliegen, statt dessen setze ich vielleicht die Kategorie Aus dem Maschinenraum an diese Stelle.
Die Bilder geben der zuvor sehr reduzierten Blog-Seite einen emotionaleren Touch, lassen die Themen lebendiger und interessanter wirken.
Technisch funktioniert das ganz einfach. Da jede Kategorie im System eine Seite ist, verbunden mit ihren englischen und französischen Geschwistern, haben diese Seiten einfach ein anderes Layout, das Template für die hervorgehobenen Kategorien heißt zum Beispiel 04.02.Blog.Category.Highlight. Alle Templates in meinem System haben Nummern und Namen. Die Nummerierungsmethode dürfte noch aus der Schulzeit hängen geblieben sein, denn die erste Programmiersprache, die ich dort um 1982 herum lernte war Basic auf einem Wang 3000 Computer. Und in Basic wird jede Programmzeile nummeriert, und der wichtigste Rat meines Mathematik-Leistungskurs Lehrers Dr. Braun war, von Anfang an dreistellige Zeilennummern in 10er Schritten zu verwenden.
Wenn die Highlightkategorien ein anderes Template haben, wie oben beschrieben, kann ich auf der Blog Hauptseite im Header einfach alle Kategorien mit diesem Template auflisten. Das sind die sechs ganz oben. Alle anderen werden nur als einfache Liste darunter aufgeführt.
Für die Highlight-Kategorien berechnet ein kleines Snippet (Danke G.) die Wörtersumme und rechnet die Lesezeit zusammen. Ob das Lesern hier eine Hilfe ist, kann ich nicht sagen, aber ich finde es eine schöne Spielerei. Es lässt sich zum Beispiel herauslesen, dass meine Gartenbeiträge in der Regel kürzer sind als meine Beiträge zu schwedischen Nachtigall Jenny Lind.
Als Kategorienseiten gab es also bereits zwei mögliche Layouts zur Auswahl und so stark wollte ich mit meiner Sachstandsbericht-Übersichtsseite auch nicht davon abweichen.
Inspiration
Die Sachstandsberichte-Übersichtseite
Sachstandsbericht-Übersichtsseite ist in der Tat ein sehr sperriger, vielleicht sogar etwas bürokratisch anmutender Begriff. Beim Layout haben mich zwei Dinge inspiriert.
Gwern Branwen
Sehr im Layout und in der möglichen Textdichte hat mich die Website von Gwern Branwen inspiriert. Seine Website ist eine Mischung aus Blog, Wissensdatenbank, Protokollen seiner Selbsterforschung. Unermüdlich wird jeder kleine Schritt dokumentiert, für Webentwickler ist seine inhaltlich unglaublich tiefe Website eine interessante Inspirationsquelle.
Schon lange haben es mir seine Initiale angetan, siehe zum Beispiel auf dieser Seite. Initiale sind vergrößerte, meist verzierte Anfangsbuchstaben von Kapiteln. Im Mittelalter wurden die Initialen vom Rubrikator in die Bücher gemalt.
Der Rubrikator
Ein Rubrikator war ein mit der Rubrizierung beschäftigter Schreiber und Maler, der die Einfügung roter Textelemente in die bereits geschriebene Handschrift übernahm. Er fertigte unter anderem zumeist von Hand die in rot und blau gehaltenen Rubrikenkapitalen an. Damit es bei der Ausmalung nicht zu Schreibfehlern kam, druckte der Drucker für die Initiale einen Platzhalter (Repräsentant) ein. Dieser wurde dann vom Rubrikator übermalt.
Der Beruf des Rubrikators starb mit der Erhöhung der Auflagen durch den mechanischen Buchdruck aus. Bücher wurden nicht mehr in Auflagen von 10 oder 20 erstellt, sondern in 100 oder 1000. Und da war es einfach günstiger eine Initiale direkt einzudrucken.
Initiale
Eine Initiale wollte ich also auf jeden Fall. Ich habe mich ein wenig in alten Schriftenkatalogen umgesehen und ein paar interessante Initialfonts gefunden, bin dann aber zu einer anderen Lösung gekommen, die viel mit dem leicht veränderten Logo von blog.cronhill.de zu tun hat.
Hier liegt das Wort Blog, blau gesetzt aus der Georgia, einer modernen Antiqua des zwanzigsten Jahrhunderts hinter der IBM Plex monotype. Die Georgia wurde 1993 vom britischen Schriftengestalter Matthew Carter für Microsoft entworfen. Sie sollte auch auf Bildschirmen mit niedriger Auflösung gut lesbar sein und verfügt über einen sehr hohen Kontrast zwischen normalem und fettem Schriftsatz, große Buchstabenabstände und ein Zeichendesign, das Verwechslungen zwischen 1, l und I möglichst ausschließen soll. Für die Georgia habe ich mich aus verschiedenen Gründen entschieden, aber darüber möchte ich hier noch ein andermal bloggen, das Essay liegt hier seit 2019 zu 75 % fertig herum. Die IBM Plex Familie wurde 2017 von Mike Abbink bei IBM in Zusammenarbeit mit der niederländischen Agentur Bold Monday für IBM entwickelt.
Und so wie im modifizierten Logo von blog.cronhill.de wollte ich auch die Initialen gestalten. Und so schauen Sie jetzt aus:
Der Textsatz
Eine Inspiration aus dem letzten Jahrhundert
Mit dem Textsatz in der linken Spalte der neuen Übersichtsseite hat es auch etwas Besonderes auf sich. Die Inspiration dazu habe ich mir aus dem Desk Book of Type Specimens - Borders Ornaments Brass Rules and Cuts Catalogue of Printing Machinery and Printers' Supplies 1900 der American Type Founders Company geholt. Everything for the printer heißt es im Katalog und das ist wahrhaftig nicht zu vollmundig gesprochen. Das was dieser Katalog auf seinen 1267 vollgepackten Seiten darbietet dürfte wohl der feuchte Traum jedes Vintage-Druckers sein. Welche Vielfalt hier angeboten wurde!
Und auf der digitalen Seite 10 des verlinkten Dokumentes findet sich schon die Inspirationsquelle für den Textsatz, es ist der Einführungstext in den Katalog, der würdevoll und zugleich bescheiden mit den Worten beginnt: »To the printer« oder eben auf Deutsch »An den Drucker«. Natürlich kommt der digitale Satz nicht an sein Original heran, aber es hat mir gefallen, quasi als kleine Reminiszenz dieses Layout-Zitat in meine Seite einzubauen.
Technische Umsetzung
Javascript als mein persönlicher Rubrikator
In der Seite gibt es jetzt ein kleines Javascript, dass für mich den ersten Buchstaben des Absatzes austauscht. Im in der style.css sind alle Buchstaben in Klassen hinterlegt, das war es im Grunde schon. So brauche ich mir während des Schreibens keine Gedanken um die richtige Initiale zu machen, das Script mimt sozusagen den Rubrikator.
Die Linie zwischen den Zeilen wird mit einem sich wiederholenden Verlaufshintergrund erstellt. Wer mehr wissen möchte kann ja mit einem Web-Inspektor seiner Wahl den Quelltext untersuchen.
Im dritten Teil geht es weiter mit dem Grundlayout des Templates für den eigentlichen Sachstandsbericht.
tl, dr;
In diesem Teil geht es um die Übersicht über die Sachstandsberichte, eine eigenständige Seite, bei der ich mich von anderen Layouts habe inspirieren lassen.
Kommentare (0)