Texte für den Infoserver

Das Erstellen von Texten für den Infoserver ist einfach und es sind keine Programmier- oder HTML-Kenntnisse notwendig. Benötigt wird nur ein Text-Editor - wie zum Beispiel Notepad - mit dem ein einfacher Text erstellt werden kann.

Die Gestaltung und Integration der neuen HTML-Seite übernimmt dann ein Programm auf dem Server.

In den nachfolgenden Abschnitten werde ich anhand von einfachen Beispielen darstellen, welche Möglichkeiten es neben dem normalen Text gibt, den Inhalt zu gestalten. Dabei werde ich die Struktur und den Inhalt eines Eintags Schritt für Schritt erläutern.

Die Struktur eines Artikels

Jeder Artikel besteht aus Metadaten und dem eigentlichen textuellen Inhalt des Artikels. Grundsätzlich können diese Metadaten - das “front matter” des Artikels - mit einer Anschrift auf einem Briefumschlag verglichen werden. So wie die Post anhand der Anschrift ermittelt, wohin ein Brief gesendet werden soll, wird die Software anhand dieser Daten den neuen Artikel korrekt anlegen können.

Die Metadaten dieses Artikels stehen in den ersten Zeilen der Datei und werden durch Zeilen drei “-” Zeichen vom Rest des Dokuments getrennt. Auf diese Weise ist dieser Bereich des Artikel optisch deutlich erkennbar.

---
title:      "Texte für den Infoserver"
author:     Ralf Edmund Stranzenbach
pubDate:    2017-04-18
cover:      tastatur.jpg
keywords:   [ "verein" ]
---

Die hier dargestellten Metadaten erfüllen die Mindestanforderungen für einen Artikel. Die einzelnen Informationselement haben dabei die folgende Bedeutung:

• title: Da jeder Artikel eine Überschrift besitzen sollte, wird diese über dieses Element festgelegt. Dieser Text wird daraufhin automatisch zum Seitentitel oder Teil des Aufmachers in einer der Kacheln auf der Startseite.
• author: Der Name des Verfassers dieses Artikels.
• pubDate: Das Datum der Veröffentlichung des Artikels. So lange dieses Datum nicht erreicht ist, wird der Inhalt des Artikels nicht auf der Webseite erscheinen.
• cover: Mit diesem Element wird ein optionales Titelbild referenziert mit dem der Artikel innerhalb seiner “Kachel” dekoriert wird.
• keywords: An dieser Stelle werden unterschiedliche Schlüsselworte aufgelistet, anhand derer der Text auffindbar sein soll. Diese Einträge werden unter Anderem verwendet, um Empfehlungen auf weitere Artikel zu setzen.

Alle diese Elemente sollten vorhanden und korrekt ausgefüllt sein. Fehlt eines dieser Elemente wird der Artikel nicht oder eventuell sehr seltsam dargestellt.

Der Textinhalt

Absätze

Der Rest der Datei, also alles was auf die Zeile mit den “-” Zeichen folgt, wird als Inhalt des Artikels interpretiert. Diese in den nachfolgenden Zeilen enthaltenen Texte werden gesammelt und als Textabsatz angezeigt. Dieser Artikel beginnt daher mit den nachfolgenden Zeilen, deren Umbruch auf der erzeugten HTML Seite nicht übernommen wird.

Das Erstellen von Texten für den Infoserver ist einfach und es sind keine
Programmier- oder HTML-Kenntnisse notwendig. Benötigt wird nur ein Text-Editor
- wie zum Beispiel `Notepad` - mit dem ein einfacher Text erstellt werden kann.<!--more-->
Die Gestaltung und Integration der neuen HTML-Seite übernimmt dann ein Programm
auf dem Server.

In den nachfolgenden Abschnitten werde ich anhand von einfachen Beispielen
darstellen, welche Möglichkeiten es neben dem normalen Text gibt, den Inhalt
zu gestalten. Dabei werde ich die Struktur und den Inhalt eines Eintrags
Schritt für Schritt erläutern.

Soll innerhalb des Artikel ein Absatzumbruch erfolgen, so wird in den Text, wie in diesem Beispiel, eine oder mehrere Leerzeilen eingefügt.

Schriftgrade

Die für den Texte genutzten Schriftarten können nicht verändert werden. Allerdings ist es möglich, unterschiedliche Schriftgrade zu verwenden. So ist es möglich, einzelne Teile eines Textes kursiv oder fett darzustellen. Genutzt wird zu diesem Zweck die Sonderzeichen die auch kombiniert für mehrere Worte verwendet werden können:

Die für den Texte genutzten Schriftarten können nicht verändert werden.
Allerdings ist es möglich, unterschiedliche Schriftgewichte zu verwenden.
So ist es möglich, einzelne Teile eines Textes _kursiv_ oder __fett__ darzustellen.
Genutzt wird zu diesem Zweck die Sonderzeichen die auch  _**kombiniert für
mehrere Worte**_ verwendet werden können:

Das einfache Auftauchen eines dieser Sonderzeichen innerhalb eines Textes führt in der Regel zu einer kursiven Darstellung, das doppelte Auftauchen stellt den Text dem entsprechend fett dar. Diese Festlegung wird jedoch durch die Seitengestaltung vorgegeben und kann durch den Designer gesteuert werden.

Ist diese Auszeichnung innerhalb eines Absatzes nicht ausgeglichen, wird dieses Steuerzeichen als Textsymbol dargetstellt.

Listen

Eine Auflistung kann auch gestaffelt angelegt werden. Dazu wird eine Textzeile mit einem ‘*’ begonnen. Einträge für geschachtelte Listen werden durch die Einrückung mit dem Tabulator realisiert.

• Auflistungen
  • unsortierte Listen
  • numerierte Listen

Diese Liste wird im Text praktisch so eingegeben, wie sie im Ergebnis aussehen sollte.

* Auflistungen
    * unsortierte Listen
    * numerierte Listen

Soll eine numerierte Liste verwendet werden, wird anstelle des ‘*’ nur die Ordnungszahl mit nachfolgenden Punkt verwendet:

1. kommt es anders,
2. als man denkt.

Diese Eingabe sieht im Eingabetext bereits wie eine numerierte Liste aus und wird daher auch genau so dargetsellt.

1. kommt es anders,
2. als man denkt.

Durch eine Kombination von Listen und Schriftgraden kann so auch eine Auflistung von Definitionen gestaltet werden:

* __author:__ Der Name des Verfassers dieses Artikels.
* __date:__ Das Datum der Veröffentlichung des Artikels.

Medien-Elemennte

Als zusätzliche Medien Elemente werden unterstützt:

• Bilder
• Videos auf Streaming-Plattformen
• Dokumente

Bilder

Für die Darstellung von Bildinhalten habe ich das System um ein Template ergänzt, das wie eine Plugin genutzt werden kann. Dieses Plugin sollte anstelle ded im Jekylls liquid enthaltenen Bildelements genutzt werden, da das korrekte Einbetten eines Bildes zusätzliche Stilelemente erzeugen sollte. Ähnlich wir das Html <img> Tag verwendet dieses Plugin Attribute, um weitere notwendige Informationen bereitzustellen. Insbesondere kann einen Bildnachweis angeben werden, so dass auch Bilder der ESO mit korrekter Auszeichnung verwendet werden können.

In der aktuell installierten Version werden diese Attribute verwendet:

• src: Ein zum img Verzeichnis der Webseite relativer URL auf das Bilddokument. Per Konvention werden die Bild-Assets eines Artikels in einer Ordnerstruktur abgelegt, die dem Datum der Veröffentlichung entspricht. So kann dauerhaft ohne eine zeitaufwändige Recherche ermittelt werden, in welchen Beiträgen ein Bild genutzt wird. NOTWENDIG
• caption: eine Bildunterschrift, die auch als Ersatz des Bildes in durch einen Screenreader genutzt word. Der Inhalt dieses Attributs wird auch für das alt Attribut des -Tag verwendet. OPTIONAL
• credits: Ein Hinweis auf den Inhaber der Bildrechte. Diese Information muss immer dann gesetzt werden, wenn externes Bildmaterial zu nutzen. Wird beispielsweise ein Bild aus der Archiv der ESO genutzt, wird auf der jeweiligen Seite des Bildes auch immer der Nachweis angegeben, der in unveränderter Form hier eingesetzt wird. OPTIONAL
• creditsurl: Ist zu einem Bildnachweis auch der URL auf eine Webseite vorgegeben, wird dieser mit diesem Attribut gesetzt. Dieser Verweis auf eine Webseite wird automatisch dem Bildnachweis zugefügt und als externen URL gekennzeichnet.

Mit diesen Informationen versehen wurde das oben gezeigte Bild mit der nachfolgenden Zeile in diesen Artikel eingefügt. Für eine bessere Lesbarkeit wurden hier dei Attribute in jeweils eigene Zeilen umgebrochen.

{{< image
    src="2017/05/01/potw1150a.jpg"
    caption="ALMA's world at night"
    credits="ESO/B. Tafreshi"
    creditsurl="twanight.org" >}} 

Videos

Videos werden nicht auf der eigenen Webseite gehostet. Die Unterstützung der unterschiedlichen Video-Formate und die Anpassung eines eigenen Players ist so aufwändig, dass der notwendige Wartungsaufwand den Nutzen bei weitem übersteigen würde. Zudem müsste sowohl der Speicherplatz als auch die Netzwerkbandbreite für den Zugriff bereitgestellt werden. Damit werden die Leistungsmöglichkeiten einiger kleiner und günstiger Hosting-Lösungen überschritten.

Für die unterschiedlichen Videodienste sind entsprechende Templates angelegt: * vimeo: Das vimeo Template unterstützt kostenfreie Vimeo-Accounts wie auch die kostenpflichtige Pro-Version. Unterschiede ergeben sich nur bezüglich der Player-Konfiguration. * YouTube: Das youtube Template wurde nur für normale YouTube-Accounts bisher getestet.

Weitere Streaming-Angebote können auf Nachfrage integriert werden und werden dann äquivalent unterstützt.

Alle Template benutzten das video Attribut um das gespeicherte Video zu identifizieren. Bei vimeo ist das eine numerische Identifikation, die als Zahl angegeben werden kann. Die alphanumerische Kennung auf YouTube muss dem entsprechend als Zeichenkette angeben werden.

Das voran stehende Video zur Mondfinsternis 2015 wurde mit dem Aufruf des viemao-Templates in diesen Artikel eingebettet:

{{< vimeo 158808649 >}}

PDF Dokumente

Für das Einbetten eines PDF Dokuments in die Webseite ist ein pdf Template vorgesehen. Dieses impliziert, dass das anzuzeigende Dokument im DIN Format angelegt ist und konfiguriert den Anzeigebereich dem entsprechend, dass eine vollständige Seite des Dokuments dargestellt werden kann und keine ungenutzten Seitenränder entstehen.

{{< pdf
    src="sample.pdf"
    caption="Plakat zur Mondlandung" >}} 

Die aktuelle Implementierung dieses PDF-Templates benutzt die bototstrap responsive Utilities und ergänzt dort das DIN Format.