Webdesign

Grundlagen von Textpattern und Textile

Der folgende Beitrag gibt einen Überblick über das Content Management System Textpattern und die darin eingebaute Auszeichnungssprache Textile. Ich habe diesen Artikel für drei Schüler von mir geschrieben (Hallo Andreas, Bastian und Eric :-), die sich in nächster Zeit mit Textpattern befassen werden, weil ich damit unsere Schulwebsite verwalte. Ich denke aber, dass jeder CMS- und Textpattern-Anfänger davon profitieren kann.

Ein so genanntes „Content Management System“ (CMS) ist eine Software, die auf einem Webserver läuft und dabei hilft, Inhalte („Content“), d.h. Dokumente, Informationen etc. zu verwalten. Meist wird ein CMS dazu verwendet, diese Inhalte in Form einer Website zu publizieren.

Die einzelnen Webseiten werden dabei nicht komplett abgespeichert, sondern erst in dem Moment erstellt, in dem der Benutzer eine bestimmte Seite aufruft. Eine Seite wird dabei aus verschiedenen Einzelbausteinen zusammen gestellt. Der Nutzer merkt davon nichts — für ihn sieht die Webseite aus, wie jede andere auch.

Im Hintergrund eines typischen CMS arbeiten in der Regel eine Datenbank und eine Programmiersprache zusammen. Die Datenbank speichert die Inhalte, die Programmiersprache liefert die nötigen Befehle und Abläufe, um die Inhalte auf verschiedene Art zusammen zu stellen.

Textpattern

Bei Textpattern (wie bei vielen anderen OpenSource CMS) heißt die Datenbanksoftware MySQL und die Programmiersprache PHP.

Textpattern erleichtert die Verwaltung und Publikation einer Website hauptsächlich in zwei Bereichen:

  1. Sortierung und Strukturierung von Inhalten und
  2. Erleichterung der Texteingabe und -bearbeitung.

(Es gibt noch einige Hilfen mehr, doch auf diese beiden möchte ich mich hier konzentrieren.)

(1) Sortierung und Strukturierung von Inhalten

Textpattern bietet dem Nutzer zwei verschiedene Möglichkeiten an, Inhalte zu kategorisieren. Die beiden Systeme heißen in Textpattern „Sektionen“ und „Kategorien“. Jeder Inhalt, den ich in Textpattern speichere, kann sowohl einer Sektion als auch zwei Kategorien zugeordnet werden.

Wenn ich zum Beispiel eine Website über Sport betreibe und einen Text schreibe über einen Fußballspieler, könnte ich ihn der Sektion „Fußball“ und der Kategorie „Spieler“ zuordnen. Außerdem könnte ich noch weitere Sektionen haben wie z.B. „Tennis“, „Rugby“ etc. Weitere Kategorien könnten z.B. sein „Rekorde“, „Ergebnisse“, etc. Ich kann so viele Sektionen und Kategorien erstellen, wie ich möchte und ihnen beliebige Namen geben.

Man kann sich das auch als Tabelle vorstellen, in der jede Zelle sowohl zu einer bestimmten Spalte als auch zu einer bestimmten Zeile gehört:

  Fußball Tennis Rugby
Spieler Ballack Becker Kunze
Rekorde 25:0 6:1 134:0
Ergebnisse 4:3 6:4 34:98

Wenn ich nun auf der Website die Sektion „Fußball“ aufrufe, erhalte ich Informationen zu Spielern, Ergebnisse, Rekorden etc. — alles zum Thema Fußball (in unserer Tabellen-Metapher habe ich die kompletter Spalte „Fußball“ aufgerufen). Ich könnte aber auch eine Webseite erzeugen, die sämtliche Rekorde auflistet — unabhängig von der Sportart. Dazu würde ich die Ausgabe nach der Kategorie „Rekorde“ filtern (das würde der kompletten Zeile „Rekorde“ entsprechen). Mit diesem doppelten System lassen sich mit Textpattern sehr flexible Ordnungssysteme erzeugen, mit denen man auch komplexe Inhalte sauber verwalten und darstellen kann.

(2) Texteingabe und -bearbeitung

Die meisten Websites bestehen hauptsächlich aus Text. Wenn man also die Eingabe und Strukturierung von Text erleichtert, hat man schon einen großen Schritt in Richtung „Contentverwaltung“ gemacht. Genau das tut Textpattern. Für eine statische Website muss man die Texte, die man veröffentlichen möchte, mit einem HTML Editor in HTML Dokumente „einbauen“. Dabei wird der Text mit den HTML Tags „ausgezeichnet“, was dazu führt, dass Text und HTML Tags vermischt werden. Das macht den Text im Nachhinein schwer lesbar. Auch die nachträgliche Bearbeitung von Texten ist dadurch recht mühsam.

Textpattern bietet dem Benutzer eine grafische Oberfläche, mit deren Hilfe man Texte im Klartext, d.h. ohne HTML Markup, schreiben kann. Wichtig ist, dass der Klartext immer erhalten bleibt und nicht mit HTML Tags vermischt wird. Dazu speichert Textpattern von jedem Text zwei Versionen: den Klartext, den der Nutzer sieht und die HTML Version, die ein Webbrowser serviert bekommt, wenn jemand die entsprechende Webseite aufruft.

Bis zu diesem Punkt tut Textpattern nicht anderes als andere Content Management Systeme auch. Aber Textpattern hat noch eine entscheidende Zusatzfunktion: es beinhaltet eine eigene „Auszeichnungssprache“, die den eingegebenen Klartext in HTML übersetzt (eigentlich wird XHTML erzeugt, aber dieser Unterschied ist an dieser Stelle nicht wichtig). Diese eingebaute Auszeichnungssprache heißt Textile.

Warum benutzt man nicht gleich HTML Tags, wenn man den Text ja doch auszeichnet? Textile hat gegenüber HTML Tags einen entscheidenden Vorteil: es beeinträchtigt den Klartext nicht, d.h. für den Benutzer ist der Text nach wie vor problemlos lesbar, obwohl er mit Textile ausgezeichnet wurde. Für das CMS hingegen, enthält der Text eindeutige Anweisungen, die in sauberes XHTML umgesetzt werden können.

Wie funktioniert Textile?

Die Textile Regeln (man nennt solche Sprachregeln „Syntax“) basieren zunächst auf normalen Regeln der Textformatierung. Zum Beispiel:

  1. Wenn man einen Zeilenumbruch setzen möchte, drückt man die Return Taste. Textile nutzt diese allgemeine Regel und fügt das HTML Tag <br /> dort ein, wo der Nutzer die Return Taste gedrückt hat.
  2. Zwei mal Return trennt zwei Absätze optisch voneinander. Daher übersetzt Textile einen doppelten Zeilenumbruch in zwei HTML Absätze, d.h. zwei Blöcke von Text, die jeweils zwischen <p> und </p> stehen.
  3. Um Text in E-Mails hervorzuheben, schließt man ihn in *zwei Sterne* ein — Textile übersetzt diese daher in eine entsprechende HTML Hervorhebung: <strong> und </strong>.

Damit sind die einfachsten Formatierungen ohne jedes Nachdenken möglich. Um einem Text jedoch etwas mehr Struktur zu geben, bietet Textile zusätzlich noch einfache Kürzel an. So kann man beispielsweise eine HTML <h1>Überschrift</h1> erzeugen, indem man vor die betreffende Zeile h1. (in Worten: „h – 1 – Punkt – Leerschaltung“) schreibt:

h1. Diesen Text wird Textile in eine h1 Überschrift übersetzen

Gleiches gilt für alle sechs Überschriftenlevels von HTML.

Man kann auch sehr einfach Listen schreiben. Jeweils ein Stern * plus Leerschaltung vor jeder Zeile erzeugt eine Liste mit Punkten, eine Raute # plus Leerschaltung vor jeder Zeile wird als nummerierte Liste interpretiert.

Ein mit Textile formatierter Text könnte so aussehen:

  1. h1. Überschrift
  2.  
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc mauris lorem, feugiat non, accumsan in, ullamcorper at, nibh.
  4.  
  5. Integer accumsan neque vel erat. In aliquam justo convallis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  6.  
  7. * Listenpunkt 1
  8. * Listenpunkt 2
  9. * Punkt 3
  10.  
  11. Pellentesque sem leo, tempus ac, egestas at, bibendum in, nisl. Fusce iaculis pharetra mi. Donec tristique. Aliquam mattis, mi vel gravida dapibus, sapien mauris tristique neque, eget cursus urna lorem in arcu.
  12.  
  13. # Nummerierte Liste 1
  14. # Listenpunkt zwei
  15. # Punkt drei
  16.  
  17. Integer lacus lectus, consectetuer ut, molestie et, adipiscing non, metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet, nisi tincidunt auctor congue, lectus mi lacinia orci, nec tempus lorem dolor sed ipsum.
  18. Code-Download: /code/textile-beispiel.txt

Auf diese Weise kann man mit wenigen leicht merkbaren Zeichen Texte verfassen, die auf der HTML Seite klar und inhaltlich sinnvoll („semantisch korrekt“) ausgezeichnet sind, und gleichzeitig auf der Klartextseite (die der Benutzer des CMS zu Gesicht bekommt) gut lesbar bleiben.

Als „Bonbon“ kümmert sich Textile noch um eine Reihe weiterer typographischer Details, indem es z.B. gerade Anführungszeichen in typographisch korrekte Anführungs- und Abführungszeichen verwandelt, indem es ein Minus an der richtigen Stelle in einen Gedankenstrich übersezt oder indem es ein „x“ zwischen zwei Zahlen in das typographisch korrekte Multiplikationszeichen umsetzt (ich wusste vor der Arbeit mit Textpattern nicht, dass es dafür ein eigenes Zeichen gibt, aber Textpattern und Textile wurden von Dean Allen erschaffen, der gelernter Buchdesigner ist und daher mit Buchstaben und Zeichen sehr sorgfältig und detailverliebt umgeht).

Alex Shiels hat eine komplette Textile-Referenz zusammen gestellt, die noch zahlreiche weitere Formatierungsmöglichkeiten aufzeigt.

Grundregel beim Umgang mit Textile

Nach einer kurzen Einarbeitungszeit ist der Umgang mit Textile problemlos und behindert den Schreibvorgang überhaupt nicht. Um sauberes HTML Markup zu bekommen, muss man allerdings eine Grundregel beachten:

Mache immer zwei Zeilenschaltungen nacheinander.

Warum? Wie oben beschrieben, setzt Textile eine einfache Zeilenschaltung („ein Mal Return“) in das HTML Tag <br /> um. Auf diese Weise würde ein Text entstehen, der von der HTML Seite her betrachtet aus einem einzigen Absatz (<p>...</p>) besteht. Alle Überschriften und Listenelemente darin würden von Textile nicht als solche erkannt werden.

Denn um diese sauber vom übrigen Textfluss zu trennen, braucht Textile eine leere Zeile vor und eine leere Zeile nach jedem Element.

Eine Überschrift mit nachfolgenden Textabsätzen und zwei darin eingebetteten Listen würde man also (wie oben schon gezeigt) folgendermaßen eingeben:

  1. h1. Überschrift
  2.  
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc mauris lorem, feugiat non, accumsan in, ullamcorper at, nibh.
  4.  
  5. Integer accumsan neque vel erat. In aliquam justo convallis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  6.  
  7. * Listenpunkt 1
  8. * Listenpunkt 2
  9. * Punkt 3
  10.  
  11. Pellentesque sem leo, tempus ac, egestas at, bibendum in, nisl. Fusce iaculis pharetra mi. Donec tristique. Aliquam mattis, mi vel gravida dapibus, sapien mauris tristique neque, eget cursus urna lorem in arcu.
  12.  
  13. # Nummerierte Liste 1
  14. # Listenpunkt zwei
  15. # Punkt drei
  16.  
  17. Integer lacus lectus, consectetuer ut, molestie et, adipiscing non, metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet, nisi tincidunt auctor congue, lectus mi lacinia orci, nec tempus lorem dolor sed ipsum.
  18. Code-Download: /code/textile-beispiel.txt

Man beachte die leeren Zeilen (02, 04, 06, 10 & 16) nach der Überschrift, sowie jeweils vor und nach den Absätzen und Listen. Wenn diese fehlen, kommt die Textile-„Übersetzung“ aus dem Tritt.

Fazit

Textpattern und die darin eingebaute Auszeichnungssprache Textile machen die Verwaltung einer Website und der zu publizierenden Texte sehr komfortabel und einfach. Neben den genannten Aspekten hat Textpattern noch viele weitere Funktionen zu bieten. Einen Überblick kann man sich in der unten aufgeführten Linkliste verschaffen.

Auch Textile wurde in diesem Artikel nur angeschnitten: die Auszeichnungssprache hat noch viele weitere Funktionen, wie z.B. HTML Tabellen, Inlineformatierungen und Links.

Der Bereich der HTML Attribute (wie z.B. class und id) kam noch gar nicht zur Sprache: hierdurch erschließt Textile in Kombination mit Cascading Stylesheets (CSS) eine unglaubliche Fülle von Gestaltungsmöglichkeiten.

Das schöne an Textpattern und Textile ist, dass man als Anfänger zunächst nur wenige Elemente nutzen muss, um greibare Ergebnisse zu erzielen. Beschäftigt man sich aber länger mit beiden Systemen, lernt man immer wieder neue Details dazu, welche die Arbeit erleichtern und interessant machen.

Viel Spaß!

Weiterführende Links

Textpattern

Textile

Zuletzt geändert am 16.10.2009

1Julian Schrader schrieb am 26. Juni 2007, 23:02 h    # 

Guter Artikel — auf den Textile-Part werde ich wohl immer wieder mal Mitschüler/Lehrer verweisen, die nicht mit Formatierungen in Basecamp/activecollab (verwende ich/wir als Kommunikationsschnittstelle für die Schülerzeitung und SMV-Arbeit) zurechtkommen. Danke!

2Andreas Kalt schrieb am 27. Juni 2007, 14:03 h    # 

Genau dafür habe ich ihn unter anderem auch geschrieben, Julian. Auch wir benutzen Basecamp für die Zusammenarbeit in verschiedenen Projekten.

3Nina schrieb am 23. Juli 2007, 01:20 h    # 

your photos are simply beautiful :)

4Eric Schledermann schrieb am 21. November 2007, 17:42 h    # 

danke für die Einleitung