Umzug von statisch zu dynamisch | WEBeLINE

Umzug von statisch zu dynamisch

04.01.2010

Wie Sie mit Textpattern aus einer statischen Website eine dynamische Seite mit editierbarem Inhalt machen.
Es ist nicht selten, dass Kunden mit dem Wunsch an eine Agentur herantreten, dass Sie ihre Website selbst pflegen möchten, aber am statischen Aufbau scheitern. Es fehlt einfach an den grundlegenden Kenntnissen und auch an der Zeit sich mit der Thematik zu beschäftigen. Als Agentur steht man so auch häufig vor der Aufgabe eine statische Seite dynamisch machen zu müssen, jedoch will das Design so gar nicht auf die bekannten CMS-Systeme passen.


Der Kunde hält aber an seinem Design fest. Was tun? Der beschwerliche Weg ist sicherlich der, dass man versucht das Layout weitgehend auf sein Lieblings-CMS zu übertragen und damit in Kauf nimmt, dass man alles an die jeweilige Template-Engine anpassen muss. Zudem muss in der Regel das CMS weitgehend um Funktionen beschnitten werden, die der Kunde nicht wünscht. Das fängt oft bei Kleinigkeiten wie dem Autor und dem Erstellungsdatum an und endet beim Abschalten ganzer Funktionen wie Kommentare, Bewertungen usw. die das System dann nur noch als Ballast mitschleppt.

Das CMS-System

Textpattern ist ein schlankes und flexibel zu verwendendes CMS und lässt zusätzlich auch zum Blog ausbauen. Es ist vergleichsweise leicht zu handhaben und für alle Arten von Website und User unterschiedlicher technischer Kenntnisse geeignet. Textpattern ist wie viele andere Redaktionssysteme PHP/MySQL basierend und läuft ab PHP 4.3+ / MySQL 3.23+. Das System verwaltet Texte, CSS, Grafiken und Links und generiert daraus sowohl XHTML-Seiten für die Darstellung in Webbrowsern als auch Newsfeeds in den Formaten RSS und Atom. Die Erfassung von Texten kann HTML erfolgen. Für Textpattern gibt es zudem die vereinfachte Auszeichnungssprache Textile, auf die hier nur am Rande eingegangen werden soll.
Textpattern ist so aufgebaut, dass es den Entwickler einer Webpräsenz bei seiner Arbeit unterstützt, ohne ihn einzuschränken. Das heißt allerdings auch, dass Textpattern nur mit einem sehr einfachen grafischen Template ausgeliefert wird. Das Erstellen des Designs der Seite inklusive XHTML und CSS wird dem Entwickler überlassen. Inzwischen werden jedoch auch einige fertige Templates angeboten, die nach dem Herunterladen sofort eingesetzt werden können.
Diese Tatsache schränkt die Benutzerzahl von Textpattern ein, führt jedoch zu individuelleren Seiten als beispielsweise bei WordPress, bei dem oft ein Standard-Template verwendet wird, da die Entwicklung eigener Templates nicht ganz trivial ist. Das macht Textpattern zum idealen CMS um eine statische Seite in eine dynamische mit vergleichsweise wenig Aufwand und Kenntnissen zu überführen.

Struktur einer statischen HTML Seite

Statisch gespeicherte Seiten werden beim Aufruf der Site ausgegeben

Struktur einer dynamischen Seite mit Textpattern

Textpattern gibt die Seitenstruktur aus und zeigt alle gültigen Inhalte innerhalb der Struktur an. Inhalte und Layout werden getrennt. Also eine klassische CMS Struktur.

Vorgehensweise zur Überführung einer statischen Site nach Textpattern

Zunächst sollte auf dem lokalen Rechner eine Entwicklungsumgebung wie XAMPP installiert sein. Herunterladbar unter www.apachefriens.org. Nach erfolgreicher Installation lädt man sich die aktuelle Textpattern Version 4.2.0 unter www.textpattern.com herunter. Als nächstes sollte ein Verzeichnis in der lokalen Umgebung erstellt werden, in das dann der Inhalt unterhalb von textpattern-4.2.0/ entpackt wird. Legen Sie ein weiteres Verzeichnis an, in dem Sie die ursprüngliche statische Seite ablegen (nicht das Verzeichnis, in dem das CMS liegt) Der zuvor per XAMMP installierten lokale Webserver sollte nun gestartet sein indem man im Launchpanel Apache und MySQL ausführt.  Danach wird per http://localhost/phpMyAdmin/ eine neue Datenbank angelegt, in die die Daten von Textpattern abgelegt werden sollen.
Nachdem diese Vorbereitungen abgeschlossen sind beginnt man mit der eigentlichen Installation von Textpattern. Rufen Sie dazu http://localhost/textpattern/setup/ auf und tragen Sie die erforderlichen Daten ein. Die Routine ist selbsterklärend und sollte auch für unerfahrene Nutzer kaum problematisch sein. Nachdem Sie die erforderlichen Arbeiten durchgeführt haben, erreichen Sie Ihre Installation über http://localhost/mein_verzeichnis/ Dort befindet sich jetzt eine Seite mit Beispielinhalten und einem sehr schlichten Beispiellayout. Den Administrationsbereich erreichen Sie über http://localhost/mein_verzeichnis/textpattern/ Sie benötigen hier die zuvor in der Setuproutine abgefragten Zugangsdaten für den Administrator. Es präsentiert sich die Verwaltungsoberfläche von Textpattern.

Der Administrationsbereich

Wenn Sie den Reiter Diagnose aufrufen, dann werden Sie darauf hingewiesen, dass das Setup Verzeichnis noch vorhanden ist. Entfernen Sie dieses auf jeden Fall, sobald Sie Ihre Installation auf einem öffentlich zugänglichen System laufen haben. Wenn Sie Textpattern auf einem Livesystem installieren, gehen Sie genauso vor wie bei der lokalen Installation. Laden Sie vorher die Installation auf Ihren Webspace hoch. Bechaten Sie nach Beendigung des Setup, dass die Ordner files/ und images/ Schreibrechte benötigen. Setzen Sie mit Ihrem FTP Programm die Ordnerattribute CHMOD 777. In der Administration sollten Sie unter dem Reiter Produktionsstatus die Seite auf Live setzen. Damit werden nur die dringensten Fehlermeldungen angezeigt.

Einführung in die Oberfläche und Ihre Objekte

Unterschieden wird zwischen Frontend und Backend. Das Front zeigt alles, was der Besucher sehen kann, das Backend beherbergt folglich den Administrationsbereich in dem die Inhalte der Seite gepflegt wird. Das Textpattern-Backend ist über Karteireiter aufgeteilt, ähnlich einer Hängeregistratur. Es teilt sich in 3 Hauptreiter auf, die wiederum Unterreiter öffnen (Inhalt, Präsentation, Administration). Über den Reiter Seite anzeigen erreicht man lediglich das Frontend. Dieser Artikel befasst sich nicht mit allen Unterreitern, sondern beschreibt lediglich die Reiter, die für eine Übernahme der statischen Site notwendig sind.

Präsentation

Websites bestehen aus mehrere Webseiten. In Textpattern ist das oberste Objekt für eine Webseite die Sektion. Jeder Sektion kann eine Seitenvorlage und eine Stilvorlage zugeordnet werden. Die Standardsektion ist die erste Seite einer Website, die sogenannte Frontpage.
Die Seitenvorlage entspricht dem HTML-Code einer statischen Webseite. In dieser können dann die sog. Textpattern-Tags (Platzhalter für Inhaltselemente) platziert werden. Die Stilvorlage entspricht der CSS-Datei einer Site.
Zentrale Objekte in Textpattern sind Bausteine und Artikel. In den Artikeln werden Texte Texte erfasst, die in der Webseite ausgegeben werden sollen, also die laufende Erfassung von Inhalten. Im Baustein wird das Layout für den Artikel einmalig angelegt. Dafür stehen unterschiedliche Bausteintypen zur Verfügung. Der Typ ‚misc’ ist für Codeschnipsel gedacht, die nur an einer Stelle gepflegt werden sollen. Der Typ ‚article’ ist für das Layout und die Ausgabe von Artikeln gedacht.


Inhalte

Inhalte können Sie unter dem Reiter Inhalt pflegen und erfassen. Hier sehen Sie auch entsprechende Unterreiter für Kategorien, Verfassen, Artikel, Bilder, Dateien, Links und Kommentare. Sie erfassen Artikel unter dem Reiter verfassen. Der Reiter Artikel dient der Verwaltung der Inhalte. Artikel können mit HTML ausgezeichnet werden, oder eben mit der Textpattern eigenen Sprache TEXTILE.
Bilder müssen nach Textpattern hochgeladen werden und können danach über den Reiter Bilder verwaltet werden.

Textpattern Tags

Textpattern Tags führen bestimmt Datenbankaktionen aus. Sie können z.B. einen Baustein in der Webseite ausgeben, eine Artikelliste anzeigen, einen Titel den Autor und ähnliches. Sie haben teileweise nur einen öffnenden Tag oder auch öffnende und schließende Tags. Diese Tags können in Seitenvorlagen und Bausteinen eingesetzt werden. Wer sich einen Überblick über die in Texpattern vorhanden Tags und die Möglichkeiten informieren möchte, der findet unter folgender Adresse eine deutsche Auflistung der Tags mit einer Beschreibung der jeweiligen Funktionsweise: http://textpattern.kbbu.de/tags/

Die Übernahme

Zunächst sollten vorhandene Objekte aus der Beispielinstallation gelöscht werden, soweit diese löschbar sind. Die Löschung bleibt dem Entwickler überlassen. Für die spätere Wartung ist es jedoch sinnvoll, diese Arbeiten durchzuführen, denn Sie dienen der späteren Übersichtlichkeit. Löschen Sie also unter den Reitern Artikel, Bilder, Links, Kommentare und Kategorien die jeweiligen Inhalte. In der Präsentation sollten nun Sektionen, Seitenvorlagen und Bausteine gelöscht werden. Dabei muss beachtet werden, dass mindestens eine Stilvorlage und eine Seitenvorlage vorhanden sein muss. Übergeordnete Objekte können erst gelöscht werden, wenn keine untergeordneten Objekte mehr vorhanden sind.
Jetzt können die Stile und Seitenvorlagen aus der statischen Seite übernommen werden. Übernehmen Sie ihre statische Stilvorlage per paste & copy in die Stilvorlagen. Beachten Sie dabei, dass wenn Sie mehrere Stilvorlagen verwendet haben, Sie diese in einer Vorlage zusammenfügen müssen. Gehen Sie bei den Seitenvorlagen genauso vor und kopieren Sie den Quellcode Ihrer Seitenvorlagen in jeweils eine neue Vorlage. Erstellen Sie nun noch für jede Seitenvorlage eine Sektion. Ordnen Sie der Sektion die zugehörige Vorlage zu. Die Standardsektion ist ist die erste Seite der Website. Dieser muss die Seitenvorlage mit dem Inhalt der index.html aus der statischen Seite zugeordnet werden.

Einfügen der Tags

In die Vorlagen müssen jetzt noch die entsprechenden Textpattern Tags eingefügt werden, damit die Seiten auch mit dem dynamischen Content gefüllt werden können. Für den Aufruf der CSS Datei fügen Sie <txp:css format="link" /> im Seitenkopf ein. Ein Beispiel für eine Hauptnavigation könnte zum Beispiel wie folgt aussehen:

Auf der Startseite:
<ul>
     <li> <span id="high"> Link1 </span> </li>
     <li> <txp:section link="1" title="1" name="Link2" /> </li>
</ul>

Und auf einer Unterseite so:
<ul>
       <li> <txp:link_to_home> Link1 </txp:link_to_home> </li>
       <li> <span id="high"> Link2 </span> </li>
</ul>
 Codeschnipsel, die man an verschieden Stellen immer wieder aufrufen möchte und zentral über Bausteine pflegt, lassen sich über zum Beispiel über <txp:output_form form="site-footer" /> ausgeben, wenn diese unter ‚misc’ angelegt worden sind. Das kann wie in diesem Beispiel ein Footer sein, in dem besendere Hinweise stehen.
Laden Sie danach die Bilder der statischen Website hoch und passen Sie deren Pfade an.
Fügen Sie die Tags nach und nach in die Seitenvorlagen ein und überprüfen Sie deren Auswirkung. Seitenvorlagen lassen sich übrigens über die Kopierfunktion vervielfältigen. Das spart Arbeit.
Der Administrator soll nun die Inhalte, die in den vorherigen statischen Seiten standen über Textpattern pflegen können. Die entsprechenden HTML-Inhalte der statischen Seite müssen dazu per cut & paste au der statischen Vorlage entfernt werden und in einen Textpattern-Artikel eingefügt werden. Nicht vergessen, den Artikel der zugehörigen Sektion zuzuordnen.
Nun sollen die Artikel an gleicher Stelle wieder in der Seite ausgegeben werden. Dazu muss der entsprechende Baustein in die Vorlage an der ursprünglichen Stelle wieder eingebunden werden. Dazu verwenden Sie nachfolgenden Code, der als Baustein erfasst werden muss:
<txp:article id="n" />
<txp:body />
<txp:article />
Jetzt wird der entsprechende Baustein  in die Seitenvorlage genau an der Stelle wieder eingebunden, wo ursprünglich der statische Artikel stand. Und zwar mit folgendem Tag:
<txp:output_form form="site-baustein1" />
Damit ist im Groben erklärt, wie Sie statische Inhalte migrieren und über das Backend editierbar machen. Sie können natürlich die ursprüglich statische Website auch mit einer Vielzahl von Plugins und erweiternden Tags ausbauen. Damit Ihnen die zukünftigen Redakteure nicht das Layout zerstören, sollten Sie über Administration / Benutzer entsprechende Rechte über vordefinierte Benutzergruppen vergeben. Die Rechte der Benutzergruppen erfahren Sie, indem Sie auf das ? neben der Rechte Box klicken.

Die Fragezeichen

Textpattern ist ein CMS, welches auf das Learning by Doing Prinzip aufbaut. Dabei erhalten Sie viele Hilfreiche Tips, indem Sie einfach auf die Fragezeichen klciken. Inkleinen Popup Fenstern wird einem in deutscher Sprache so ziemlich alles erklärt, was man über die Funktionen wissen muss.

Fazit

In diesem Artikel wird lediglich aufgezeigt, wie man mit relativ wenig Aufwand eine  statische Seite in ein CMS migriert. Textpattern kann natürlich deutlich mehr und lässt sich erheblich erweitern und das bei größtmöglicher Freiheit für den Entwickler. Etwas gewöhnungsbedürftig ist es schon, wenn man aus anderen Systemen gewohnt ist mit Wysiwyg Editoren zu arbeiten und alles hübsch aufgemacht ist. Wer das nicht mag, kann allerdings auch gängige Editoren, wie TinyMCE als Plugin herunterladen. Textpattern beschränkt sich wirklich auf das Wesentliche. Auf jeglichen Schnickschnack wird ganz bewusst verzichtet. Für den Entwickler oder auch Gestalter von kleinen und mittleren Sites bietet Textpattern allerdings größtmögliche Freiheit und Individualität.

Links und Literatur

Offizielle Textpattern Seite:             www.textpattern.com
Texpattern Wiki auch in deutsch:     textbook.textpattern.net/wiki/index.php?title=Startseite
Plugins und Tutorials (engl.)            www.textpattern.org
Infos und Tagliste auf deutsch:        textpattern.kbbu.de

Texpattern Solutions von Kevin Potts u.a. in englischer Sprache 24,95 Euro z.B. bei Amazon