DIY-CMS: Divs und Löcher

Sonntag, 22. Mai 2016

Wenn mein bisheriges Blogprogramm Thingamablog irgendwann den Geist aufgibt, will ich vorbereitet sein. Seit Jahren suche ich immer wieder nach würdigem Ersatz, bisher erfolglos. Das Problem ist mein Webspace, den ich schon seit prä-php-Zeiten habe. Ein CMS, das (weiterentwickelt wird, obwohl es) ohne diese Technik funktioniert, gibt es schlicht nicht mehr.

Da ich nun auf zauberweib.de nicht die Vielbloggerin bin, habe ich mir überlegt, mir ein CMS "zu Fuß" zu basteln. Mit einem Loch in der Seite geht das recht einfach.

CMS handgemacht: Wie es funktioniert

Die Seite wird aufgeteilt in einen großen Inhaltsbereich und einen schmaleren Bereich rechts, der das Loch beherbergt. Das wird mittels iframe eingesetzt; also eigentlich ein Fenster, das den Blick aufs Menu frei gibt.

Der Clou an der Sache ist, dass es eine Menu-Seite gibt, die auf jeder Seite eingebunden wird. Genauer: Jede Seite hat ein Loch, und dahinter liegt das Menu. Ohne das Loch und festgeschriebenem Menü auf jeder Seite, müsste bei jedem neuen Beitrag jede einzelne Seite angepasst werden. Thingamablog funktioniert übrigens genau auf diese Art - nur macht der das eben vollautomatisch!

Als Extra-Aufwand gönne ich mir - oder besser: euch, meinen LeserInnen! - den Luxus eines Blättermenus. Insbesondere bei der mobilen Version ist das sehr praktisch. Somit brauche ich für einen neuen Beitrag:

Nun gibt es da noch die Startseite; da ich alles in Handarbeit mache, soll die ganze Sache natürlich so einfach und praktikabel wie möglich bleiben. Deshalb wird auf der Startseite nur ein kleiner Anreißer eingebunden, der zum Weiterlesen animieren soll. Das ist in vielen modernen Weblogs gängige Praxis, also gar nichts außergewöhnliches.

Und selbstverständlich gibt es nach wie vor ein RSS-Feed! Ich, die Obergnerverin in Sachen RSS, werde es nicht wagen, das unter den Tisch fallen zu lassen. Und wie ich feststellen musste, ist es noch viel einfacher als gedacht, sich da eins zusammenzubasteln. Den Anreißer für die Startseite habe ich eh schon geschrieben; der wird einfach ins RSS reinkopiert, fertig.

Einmal schreiben, zweimal kopieren und zwei Links setzen - einfacher gehts wirklich nicht!

html5 - aber ohne Semantik!

Wie im vorigen Beitrag schon zu erkennen war, verzichte ich beim Seitenaufbau auf die Semantik, die im html5 möglich ist. Damit sind die neuen Tags mit wohlklingenden Namen wie header, footer, main, nav etc. gemeint.

Ehrlich gesagt, erschließt sich mir deren Sinn nicht wirklich, da es nach wie vor nötig ist, zusätzliche ids zu vergeben. Also bleib ich lieber gleich bei div - das versteht sogar der IE :) Um zu vermeiden, dass ich bei den End-Tag mal durcheinander komm, habe ich mir angewöhnt, gleich beim Aufbau der Seite entsprechende Kommentare zu vergeben:

<div id="wrapper">
  <div id="inhalt"> -viel text- 
  </div> <!-- ENDE inhalt --> 
  <div id="loch"> 
  -noch etwas text-
  </div> <!-- ENDE loch --> 
 </div> <!-- ENDE wrapper --> 

<article> und <section>

Zwei Ausnahmen gibt es allerdings doch: Auf der Startseite verpacke ich die Anreißer jeweils in einen article und die Kommentare werden in sections gewickelt. Ich hab viel Zeit damit verbracht herauszufinden, was der Unterschied zwischen den beiden ist. Die w3-org sagt, dass section ein Kind von article ist. In der Praxis wirds aber genauso auch umgekehrt verwendet. Peter Müller empfiehlt in seiner CSS-Einführung, section für einzelne Abschnitte zu verwenden, und ganze Artikel in einen article zu verpacken. Also ebenfalls: section als Kind von article.

Ich hab ein salomonisches Urteil für mich gefällt und die Artikel-Anreißer artikuliert und die Kommentare sektioniert. Für diese beiden Bereiche finde ich die semantischen Tags schon sinnvoll, weil sie eine bessere Übersicht bringen als ein div in einem div im einem div nach einem div und einem div.

Nützliche Programme

Wer jetzt glaubt, dass es für die ganze Handarbeit sauteure Superprofiprogramme braucht, irrt gewaltig! Das Gegenteil ist der Fall. Die Seiten (html und css) schreibe ich in einem einfachen Editor. Notepad++ stammt zwar auch schon aus der Steinzeit, wird aber nach wie vor gepflegt - einer der Vorteile von OpenSource! Den gibts übrigens auch als portable Version.

Zum Notepad++ gibts auch etliche nützliche Erweiterungen, z.B. den Datei-Explorer (Ich wundere mich, dass der nicht standarmäßig drin ist) und WebEdit. Das ist ein wunderbares Tool, das die gängigsten html-Tags in einer Menuleiste zum Anklicken serviert und - was mir noch wichtiger ist - es ermöglicht, Shortcuts zu konfigurieren. Ein neuer Absatz wird z.B. mit alt+p erstellt, anstatt umständlich <p></p> zu tippen!

Bildbearbeitung natürlich mit Gimp, das es auch als portable Version gibt. Dass das ebenfalls OpenSource und das wohl genialste Bildbearbeitungsprogramm überhaupt ist, muss nicht extra erwähnt werden, oder? Weitere Tools sind:

Das wäre vielleicht noch zu erwähnen: Dass sämtliche neue bzw. geänderten Dateien abschließend noch auf dem Webspace hochgeladen werden müssen. Erstellt wird das alles ja auf dem heimischen Desktop-Rechner. Was im übrigen die Sicherung spart. (Natürlich nicht die Sicherung der Festplatte!) Zum Hochladen brauchts ein FTP-Programm; das geht z.B. mit der Firefox-Erweiterung FireFTP oder über den FreeCommander. Die Verbindungsdaten werden einmal angelegt und gespeichert, dann geht das Hochladen ganz einfach mit einem Klick und fertig.

nach oben

Ich freue mich auf deinen Kommentar!

Kommentare werden erst nach Freischaltung sichtbar.

Frame nachladen (neues Fenster)