Flexibles Mikro-Redaktionssystem für den USB-Stick
TiddlyWiki: Mikroredaktionssystem

Das TiddlyWiki gehört zu den unkompliziertesten Redaktionssystemen. Es gibt kaum ein ähnlich komplexes CMS, welches dermaßen leicht zu handhaben, schnell zu bedienen und so wendig im Einsatz ist. Für neu eingetragene Daten benötigt das Personal-Publishing-Werkzeug keinerlei externe Datenbank und muss auch nicht installiert werden. Denn TiddlyWiki ist sofort nach Aufruf einer einzigen (X)HTML-Webseite einsatzbereit. De facto lässt sich TiddlyWiki auf jedem Webspace-Account nutzen und ist nach der Installation (Version 1.2.39) derzeit 127 Kilobyte leicht.

Einsatzgebiete von TiddlyWiki

Damit dies möglich ist, wurde TiddlyWiki von Jeremy Ruston vollkommen in Javascript realisiert. Weil Javascript sämtliche interaktiven Funktionen als auch die Formatierung der gesamten Webseite übernimmt, zeigt sich hier gleich auch der einzige, jedoch markante Knackpunkt: Ist Javascript im Browser deaktiviert, ist die Webseite nicht nutzbar.

Das grenzt den Einsatz von TiddlyWiki für professionelle Web-Auftritte aus, die jeder Surfer sehen und benutzen soll. In allen anderen Fällen, in denen Sie ein einfaches, jedoch flexibles Redaktionssystem benötigen, um kurze Inhalte zu präsentieren und zu editieren, ist TiddlyWiki hervorragend geeignet. Besonders bietet sich das CMS für kleine Dokumentationen von Produkten oder für den täglichen Einsatz auf dem Desktop an, um die eigenen Notizsammlungen zu verwalten. Mithilfe des integrierten Journals können Sie Daten strukturieren, in Rubriken sortieren und miteinander verknüpfen. Außerdem eignet sich TiddlyWiki besonders für webbasierte Präsentationen. Da TiddlyWiki auf einen USB-Stick passt und in jedem modernen Browser funktioniert, lassen sich im Gegensatz zu Powerpoint-Präsentationen leicht Applikationen und Plugins, wie zum Beispiel Flash, Quicktime, Shockwave oder MP3s aufrufen – sofern diese im Browser aktiviert wurden. Weiterhin können Sie in Ihrer Präsentation direkt Webseiten und Online-Services aufrufen, wenn eine Internetverbindung besteht. Empfehlenswert bei Präsentationen ist hier in erster Linie der kostenlose Opera-Browser, der mithilfe der Funktionstaste F11 auf Vollbild-Modus umschaltet.

Schließlich sei noch erwähnt, dass eine TiddlyWiki-Webseite aufgrund ihrer Größe hervorragend per E-Mail verschickt werden kann, um zum Beispiel eine angefertigte und strukturierte Dokumentation eines Programmes oder Ereignisses zu verschicken.

Das TiddlyWiki-Konzept

TiddlyWiki ist eine Mischung aus Weblog und Wiki, die man unter Geeks auch als Bliki (WikiWeblog, Wikiblog) bezeichnet. Während für Weblogs der charakteristische und chronologisch sortierte Aufbau typisch ist, ermöglichen Wiki-Systeme dem Benutzer das direkte Editieren eines Eintrages schon auf der Webseite – wie zum Beispiel bei der Wikipedia-Enzyklopädie (http://de.wikipedia.org/). Einträge werden bei TiddlyWiki „Tiddler" genannt. Wie bei herkömmlichen Wiki-Systemen auch, konvertiert das CMS bestimmte Zeichenfolgen und generiert in (X)HTML Zwischenüberschriften, Listen, Tabellen, Links oder Zitate – siehe Box „Steuerbefehle: Die TiddlyWiki-Syntax". Gegenüber normalen Wikis speichert TiddlyWiki aber keine Historie pro Tiddler ab, sondern überschreibt den vorherigen Inhalt einfach.

Aufbau des TiddlyWiki

Um mit dem Micro-CMS durchzustarten, besuchen Sie zuerst www.TiddlyWiki.com und klicken im linken Menü auf „DownloadSoftware". Laden Sie anschließend die Webseite über „this link" herunter. Es empfiehlt sich, TiddlyWiki nicht über Datei > Speichern unter… zu sichern, weil in manchen Browsern TiddlyWiki nicht mitsamt seiner ganzen Funktionsvielfalt abgespeichert wird.

Nach erfolgreichem Abspeichern rufen Sie die (X)HTML-Datei auf. Diese sollte sich dann präsentieren, wie Sie es in der Abbildung sehen. In der Abbildung erkennen Sie, dass das Bliki über 5 Hauptbereiche verfügt.

• Linke Hauptnavigation
• Mittlere Inhaltsspalte mit Artikeln (Tiddlers)
• Rechte Navigation mit
  • Servicefunktionen
  • Optionen
  • Archiv-Menü

Klickt man in der linken Hauptnavigation auf einen der Links, so öffnet das CMS mit einem Effekt den dazugehörigen Tiddler-Artikel in der mittleren Spalte. Die Servicefunktionen auf der rechten Seite unterstützen den Benutzer neben einer schnellen Suche außerdem bei der Handhabung der Artikel. Während „close all" sämtliche derzeitigen Tiddler schließt, kann man mit einem Klick auf „permaview" einen Link in der Browser-Adresszeile erstellen, der als Befehl taugt, um die aktuelle Ansicht wieder herzustellen. Mit „save changes" speichern Sie nach der erfolgreichen Eingabe von Daten den gesamten Inhalt der Website. Dabei erstellt TiddlyWiki jedes Mal eine Sicherheitskopie und überschreibt anschließend das eigentliche TiddlyWiki-Hauptdokument.

Der Menüpunkt „Options" blendet die Funktionen ein oder aus. Zu den Funktionen gehören neben einem automatischen Zwischenspeichern unter anderem die automatische Erzeugung eines RSS-Feeds. Die Erstellung einer eigenen RSS-Datei macht jedoch nur dann Sinn, wenn Sie das Bliki im Inter- oder Intranet nutzen, um Besuchern das Abonnement der Tickerdatei zu ermöglichen. Sollten Sie die Animationen beim Ein- und Ausblenden von Elementen stören, so lassen sich diese mit „Enable Animations" ausstellen. Im Eingabefeld können Sie einen Namen eingeben, der bei der Erstellung von Artikeln durch TiddlyWiki mit diesen als Autorname verknüpft wird.

Erste Schritte mit dem Nano-Publishing-Werkzeug

Um Artikel zu editieren, reicht ein Doppelklick auf den Artikel oder ein Klick auf den eingeblendeten Edit-Button. Der Edit-Button erscheint immer dann in der rechten oberen Ecke, wenn Sie mit der Maus über einen Artikel fahren. Um einen neuen Tiddler anzulegen, klicken Sie unterhalb der Linksnavigation entweder auf „new tiddler" oder „new journal". Beide Links öffnen einen neuen Artikel, wobei ein Klick auf „new journal" einen Tiddler mit dem derzeitigen Datum anlegt.

Da Sie sicherlich darauf brennen, TiddlyWiki an Ihren eigenen Geschmack anzupassen, empfiehlt es sich, erst einmal den Titel, Slogan, die URL sowie die Navigationspunkte auf der linken Seite anzupassen. Dafür sind die folgenden Tiddler zuständig:

• DefaultTiddlers – Liste der per Standard festgelegten Tiddler der mittleren Spalte
• MainMenu – Navigationspunkte der linken Hauptnavigation
• SiteTitle – Name des Tiddlywikis
• SiteSubtitle – Slogan des Tiddlywikis
• SiteUrl – URL des Tiddlywikis

Am schnellsten rufen Sie alle Tiddler gleichzeitig auf, indem Sie auf der rechten Seite im Archiv-Menü auf den Reiter „Tags" und anschließend auf „systemTiddlers" klicken. Im aufspringenden Dropdown-Menü wählen Sie nun einfach „open all". Noch schneller finden Sie einen Tiddler, wenn Sie einfach seinen jeweiligen Namen in der Suche eingeben. Ein Beispiel:

1. Geben Sie im Suchfeld „SiteTitle" ein.
2. In der Mitte erscheint nun der dazugehörige Tiddler, den Sie mittels Doppelklick anwählen.
3. Ändern Sie den Namen „TiddlyWiki" in „Denkzettel-Pinnwand".
4. Fahren Sie mit der Maus auf die Überschrift und klicken Sie dann bei den eingeblendeten Menüpunkten auf „done".
5. Das CMS aktualisiert anschließend automatisch den Namen und ersetzt ihn mit dem neuen Seitentitel.

Genauso verfahren Sie in einem nächsten Schritt und verändern den Tiddler „MainMenu" und somit die Linksnavigation nach Ihrem Geschmack. Achten Sie darauf, dass Sie beim Anlegen von Menüpunkten auf die Schreibart von Wiki-Wörtern achten – siehe dazu Box „Steuerbefehle: Die TiddlyWiki-Syntax" – oder einzelne Wörter, wie zum Beispiel „Impressum", mit doppelten eckigen Klammern einklammern: [[Impressum]].

Kasten: Steuerbefehle: Die TiddlyWiki-Syntax

Um einen bestehenden Tiddler zu editieren, klicken Sie einfach doppelt auf den Eintrag oder auf den Edit-Link. Nachdem sich eine Box geöffnet hat, können Sie direkt die Überschrift und den dazugehörigen Inhalt verändern.

Um Einträge zu strukturieren, bietet TiddlyWiki verschiedene Steuerzeichen an. Um Ihren Artikel mit Hilfe von Überschriften zu gliedern, müssen Sie lediglich ein Ausrufezeichen vor die jeweilige Überschrift setzen. Um weitere Zwischenüberschriften zu erstellen, nutzen Sie einfach weitere Ausrufezeichen:

!Überschrift
!!Untertitel
!!!Weiterer Untertitel

Möchten Sie ein Zitat oder einen Absatz eingerückt darstellen, so fügen Sie einfach vor dem Zitat <<< ein und schließen das Zitat anschließend mit >>>. Zum Beispiel so:

<<<
"Das Medium ist die Botschaft." McLuhan
>>>

Der Klebstoff des Internets sind natürlich Links. Verweise lassen sich sowohl auf interne Tiddler als auch externe Webseiten setzen. Um einen Tiddler zu verlinken, fügen Sie lediglich das Wiki-Wort des jeweiligen Tiddlers in den Text ein. Wiki-Wörter sind Wörter, die zusammengeschrieben werden und dabei mehrere Großbuchstaben haben – zum Beispiel „TiddlyWiki" oder „MediumBotschaftArtikel". Um einen externen Link zu setzen, nutzt man die folgende Syntax:

[[Angezeigter Linkname|http://www.website.de]]

Um in einem Tiddler ein Bild anzuzeigen, muss dieses natürlich verfügbar sein. Bilder werden von TiddlyWiki nicht abgespeichert, können aber mit Hilfe des folgenden Befehls [img[Bildtext|Bild-URL]] eingebunden werden. Möchten Sie dabei den Textfluss bestimmen, so legen Sie dies mit < oder > fest. Das folgende Bild wird auf der rechten Seite vom Text umflossen:

[<img[Hund|http://www.website.de/bilder/hund.jpg]]

Ungeordnete Listen erstellen Sie mit * und nummerierte Listen mittels #. Dabei lassen sich Listen auch wie bei üblichem (X)HTML tiefer verschachteln. Ein Beispiel wäre:

* Punkt 1
* Punkt 2
** Punkt 2.1
** Punkt 2.2
* Punkt 3

Weitere Steuerbefehle:

• Fettdruck: ''Dieser Text wird gefettet'' (einfache Anführungsstriche)
• Durchgestrichener Text: ==Durchgestrichen==
• Unterlinierter Text: __Unterliniert__ (zwei Unterstriche)
• Kursiver Text: //Kursiv//
• Hervorgehobener Text: @@Textmarker@@

Ein individuelles TiddlyWiki-Design

TiddlyWiki an den eigenen Geschmack anzupassen, ist leicht. Dazu benötigen Sie lediglich (X)HTML- und CSS-Kenntnisse. Damit Ihre Stylesheet-Angaben nicht bei einem Upgrade verloren gehen, können Sie sämtliche Layout-Vorgaben in einem extra dafür vorgesehenen Tiddler namens „StyleSheet" vornehmen. Diese exzellente Lösung bewahrt Sie davor, umständlich den Quellcode zu verändern, und lässt diese Änderungen bei einem Upgrade nicht verloren gehen. Weiterhin bietet TiddlyWiki die Möglichkeit, strukturierte CSS-Angaben zu erstellen, indem Sie das NestedStyleSheets-Feature nutzen.

Schaut man in den Quellcode, so besteht das Layout-Gerüst aus webstandardkonformen <div>-Containern. Diese sind wie folgt ineinander verschachtelt:

<div id="contentWrapper">
<div id="header">
<div id="titleLine">
<span id="siteTitle"></span>
<span id="siteSubtitle"></span>
</div>
</div>
<div id="sidebar">
<div id="sidebarOptions"></div>
<div id="sidebarTabs"></div>
</div>
<div id="mainMenu"></div>
<div id="displayArea">
<div id="messageArea"></div>
<div id="tiddlerDisplay"></div>
</div>
</div>

In einem Beispiel wollen wir nun die Kopfzeile #header und #titleLine mit einem eigenen Hintergrundbild versehen, und die Schriftart, Farbe und Größe des Webseiten-Titels #siteTitle als auch des Slogans #siteSubtitle editieren. Beachten Sie hierbei, dass das Hintergrundbild separat im Ordner der TiddlyWiki-Datei liegt. Weiterhin passen wir zusätzlich die einzelnen Arbeitsbereiche #mainMenu, #sidebarOptions, #sidebarTabs, #sidebarOptions .sliderPanel an und geben der gesamten Seite einen edlen Look in Grau.

Dazu färben wir erst einmal die gesamte Webseite in ein hellsanftes Grau:

body { background: #eee; }

Anschließend kümmern wir uns um die Kopfzeile und heben diese in einem ersten Schritt mit einer ein Pixel großen Linie am unteren Rand ab:

#header {
border-bottom: 1px solid #333;
}

Das Hintergrundbild jubeln wir dem #titleLine-Container unter und schieben es in die linke obere Ecke und befehlen dem Browser, das Bild nicht zu wiederholen. Damit der Bereich jenseits des Hintergrundbildes mit einer Farbe ausgefüllt wird, die mit dem Titelbild harmoniert, übergeben wir sicherheitshalber eine Hintergrundfarbe.

#titleLine {
background: #707070 url(hintergrund.jpg) no-repeat top left;
}

Jetzt kümmern wir uns um die Überschrift. Die Innen- und Außenabstände des Titels sowie Slogans setzen wir auf Null. Damit der Browser die beiden <span>-Elemente des Titels und Slogans als Blöcke behandelt, übergeben wir schließlich noch ein display: block. Das bewirkt, dass die beiden Elemente nicht neben-, sondern untereinander angezeigt werden.

#siteTitle, #siteTitle a {
font-family: Georgia;
color: #333;
margin: 0;
padding: 0;
}

#siteSubtitle {
font-family: Verdana;
color: #555;
display: block;
margin: 0;
padding: 0;
}

Zum guten Schluss kümmern wir uns noch um die Arbeitsbereiche. Da der Firefox bereits die Angabe height: 100%; richtig interpretiert, lassen wir die gesamte Navigation in der Horizontalen bis zum unteren Rand aufziehen. Damit es in allen Browsern trotzdem gut aussieht, die die Angabe nicht richtig interpretieren, bekommt das Menü rechts und unten einen ein Pixel großen Rand. Ähnlich verfahren wir mit den Arbeitsbereichen der rechten Seite. Das Ergebnis können Sie in der Abbildung betrachten.

#mainMenu {
background: #ddd;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
height: 100%;
}

#sidebarOptions {
background-color: #ddd;
border-left: 1px solid #333;
}

#sidebarTabs {
background-color: #ccc;
border-left: 1px solid #333;
}

#sidebarOptions .sliderPanel {
background-color: #aaa;
}

Von Macros und Plugins

Um noch mehr Ordnung in Beiträge zu bringen und bestimmte Arbeitsschritte zu erleichtern, bietet TiddlyWiki eine kleine, aber feine Auswahl an Makros. Exemplarisch seien an dieser Stelle die beiden Makros MicroContent und TabMacro vorgestellt.

Um ein Makro aufzurufen, muss das Makro mittels << und >> eingeklammert werden. Möchten Sie zum Beispiel in einem Artikel einen weiteren Artikel einbinden, so nutzen Sie das MicroContent-Makro und fügen einfach den gewünschten Artikel ein. Im folgenden Beispiel wäre das der Artikel „MicroContent":

<<tiddler MicroContent>>

Hilfreich ist auch das TabMacro. Mit diesem fügen Sie innerhalb eines Tiddlers ein Karteikartensystem mit Reitern ein, wie Sie es in der Abbildung sehen. Möchten Sie zum Beispiel zwei Karteireiter namens „StartArtikel" und „WeitererArtikel" einfügen, so schreiben Sie in den Tiddler einfach den folgenden Befehl:

<<tabs txtFavourite
Reitername1 "First tab" StartArtikel
Reitername1 "Second tab" WeitererArtikel
>>

Mittlerweile hat sich eine regelrechte Fangemeinde um das TiddlyWiki geschart. Viele Webentwickler haben sich des Blikis angenommen und eigene Plugins und Funktionen programmiert. Einen Überblick finden Sie unter http://www.tiddlywiki.com/#Plugins.

Links

Website: www.TiddlyWiki.com

TiddlyWiki-Layouts zum Downloaden: www.zrenard.com/tiddlywiki/tiddlywiki.html#ListStyles