Clevere Webseitenpflege vom Desktop aus
Citydesk – Das Windows-Redaktionssystem
Citydesk ist ein Content Management System, dass sich hervorragend für die Programmierung und Pflege von kleineren Internetseiten und -projekten eignet. Vor allem Vereinen, kleinen Firmen und Privatpersonen hilft das Windows-Desktop-Programm bei der übersichtlichen Verwaltung der Seiten. Vor allem ist die auf der eigenen Festplatte liegende Datenbank ein kostensparender Faktor, da man keinerlei Datenbank auf der Server-Seite seines Providers benötigt. Denn Citydesk speichert jegliche Änderung auf der eigenen Festplatte und aktualisiert bei Bedarf selbstständig per integriertem FTP-Programm die veränderten Dokumentdateien (Bilder, HTML-Seiten und angehängte Downloads).
Ein weiterer Vorteil von Citydesk ist die Möglichkeit dem eigenen Verein, Freunden oder Firmen eine eigene Webseite zu entwerfen. Diese kann dann selbstständig von den Zuständigen betreut werden ohne das Programmierkenntnisse benötigt werden. Den einzigen Haken bildet das Datenbank-File. Denn in der kostenlosen Version kann man dieses lediglich von einem PC aus verwalten. Möchte man gemeinsam im Netzwerk auf die Datenbank zugreifen, muss man sich allerdings für die »Professional Edition« entscheiden. Im weiteren wird jedoch lediglich die »Home Edition 1.0.31« mit ihren Funktionen vorgestellt.
Windows-Interface
Die Benutzeroberfläche von Citydesk ist aufgeräumt und übersichtlich. Die Icon-Leiste lässt sich mittels Strg+M leicht auf das Wichtigste reduzieren. Ein Doppelklick öffnet Artikel für die Bearbeitung im WYSIWYG-Editor.
Durch die ähnliche Arbeitsweise mit Ordnern und Artikeln, wie man sie von Word her kennt plus einer übersichtlichen Menüführung ermöglicht das Programm auch »normalen« Benutzern den Inhalt zu steuern. So lassen sich einfach neue Artikel und Ordner anlegen, wie man es von Windows bzw. Word gewöhnt ist.
Auch der integrierte WYSIWYG-Prozessor erleichtert die Arbeitsweise und hilft dem Benutzer bei der Formatierung des Textes, bei der Verlinkung interner und externer Inhalte als auch beim Einfügen von Bildern. Über den Publish-Button kann der Benutzer dann bei korrekten Voreinstellungen und einer Internetverbindung sofort die veränderten Inhalte per FTP aktualisieren.
Grundlegende Funktionsweise
Um mit Citydesk zu arbeiten, benötigt das Programm Templates (Schablonen) anhand welcher es die jeweiligen Seiten zusammensetzt. Diese Templates sind in der Regel eine Mischung aus HTML und der einfach gehaltenen und schnell zu erlernenden internen Sprache Cityscript. Natürlich lassen sich auch Javascripte und Stylesheets in die Templates integrieren.
Mit Hilfe von Cityscript und seiner Variablen füllt das Programm die programmierten Templates mit Inhalt und generiert die erforderlichen Seiten selbst. Wie bei anderen Redaktionssystemen auch lassen sich die Inhalte auf den jeweiligen (Unter-)Seiten leicht steuern. Natürlich kann man verschiedene Templates für unterschiedliche Rubriken und/oder Seiten entwerfen. Soll z.B. für einen Artikel auch jeweils eine Druckversion vorhanden sein, programmiert man zusätzlich eine weitere Schablone.
Beispiel für eine Artikel-Seite:
<html>
<head>
<title>{$.headline$}</title>
</head>
<body>
<h1>{$.headline$}</h1>
{$.body$}
</body>Dieses Template baut eine ganz simple HTML-Seite eines Artikels, die dann z.B. so aussehen könnte:
Beispiel einer generierten Artikel-Seite:
<html>
<head>
<title>Jeffrey Zeldman: Portrait eines Web-Designers</title>
</head>
<body>
<h1>Jeffrey Zeldman: Portrait eines Web-Designers</h1>
Jeffrey Zeldman gehört zu einem der beachtenswertesten Web-Designer. Der Amerikaner gestaltet nicht nur Internet-Seiten, sondern schreibt auch Bücher.
</body>
</html>Cityscript Platzhalter
Intern verwaltet Citydesk für jeden Artikel vordefinierte Variablen, die mit Inhalt gefüllt werden sobald ein neuer Artikel erstellt wird. Diese Platzhalter, die das Format {$VARIABLE$} haben, kann man dann nach eigenem Belieben innerhalb der Templates verteilen. Wie bei dem obigen Beispiel zu sehen ist, ersetzt Citydesk die Variable {$.headline$} mit der Überschrift »Jeffrey Zeldman: Portrait eines Web-Designers«. Weitere festgelegte Variablen, die für jeden Artikel bestehen, sind unter anderem:
Fest definierte Platzhalter:
{$.author$}= Autor des Artikels{$.body$}= Haupttext{$.filedDate$}= Entstehungsdatum des Artikels{$.keywords$}= Such- und Schlüsselworte des Artikels{$.teaser$}= Artikel Anreisser{$.sidebar$},{$.extra1$}und{$.extra2$}= Platzhalter für Bilder oder Spezial-Boxen{$.link$}= relativer Link zum Artikel{$.absLink$}= absoluter Link zum Artikel, z.B. News/Articles/MyArticle.html{$.fileName$}= der im Hauptfenster für den Artikel verwendete Name
Die Kraft der Variablen
Eine sehr hilfreiche Möglichkeit bildet vor allem auch das Definieren eigener Variablen. Damit man z.B. nicht immer die vollkommene Adresse des Besitzers in den HTML-Code neu zu schreiben braucht, definiert man einfach die Variable {$adresse$} und setzt sie an die erforderlichen Stellen. Ändert sich die Adresse, ändert man einfach die Variable und publiziert alle Artikel neu. Citydesk generiert daraufhin die neuen HTML-Seiten mit dem aktuellen Variablen-Inhalt.
Noch nützlicher sind die Variablen jedoch bei statischen HTML-Inhalten oder Java-Scripten. Das bringt nicht nur Übersicht in den Code der einzelnen Templates, sondern beschleunigt die koordinierte Arbeitsweise. So kann man z.B. kleine Module programmieren, die man wiederum in den Templates verwendet. So lässt sich leicht eine Fußzeile realisieren, die einen Link zum Impressum, zur Startseite und zur Emailadresse des Webmasters besitzt. Diese Variable benutzt man anschließend in jedem Template, damit die Besucher auf jeder Seite einen Link zum Index, zum Impressum und zum Besitzer finden.
Weitere sinnvolle Einsatzmöglichkeiten für Variablen sind unter anderem Formular-Felder, häufig benutzte Slogans oder auch eine Kopfzeile.
Beispiel für eine Formular-Seite:
<html>
<head>
<title>{$homepage-url$}: {$.slogan$}</title>
</head>
<body>
{$.kopfzeile$}
{$.formular$}
{$.fusszeile$}
</body>Vorsicht: Zur Zeit schließt Citydesk dummerweise die Eingabe des Inhaltes bei einer Variable ab sobald man Enter drückt. Um einen Zeilenumbruch zu erstellen hält man am besten die Umschalttaste fest und drückt dann auf Enter oder kopiert sofort die Tabellen und Java-Scripte in das Variablen-Feld.
Schleifen
Um die Internet-Seiten dynamisch zu gestalten bietet Cityscript dem Programmierer die Möglichkeit Schleifen zu konstruieren. Zum Glück ist die Syntax einfach gehalten und hat man einmal die Logik verstanden, lassen sich die Schleifen in Windeseile programmieren oder immer wieder neu einsetzen. Doch wofür benötigt man die Schleifen?
In der Regel an den Stellen, an welchen man dem Besucher einen kurzen Überblick über den Inhalt der Webpage anbieten möchte. Wer sich zum Beispiel entschließt mit Citydesk ein Weblog zu bauen, der kann z.B. auf der Startseite seine fünf aktuellsten Beiträge plus integriertem Link anzeigen lassen ohne gleich den gesamten Inhalt des jeweiligen Artikels zu veröffentlichen.
Aufbau einer Schleife:
{$ forEach n var in (Konditionen) Sortierungs-Reihenfolge $}
.... Schleifen-Inhalt ....
{$ next $}Wie die Variablen auch werden die Script-Tags immer durch ein {$$} gekennzeichnet, damit das Programm die Schleifen erkennt und nicht für normales HTML hält. Hierbei beginnt eine jede Schleife mit »forEach«. Darauf folgt die Variable »n«, die die Anzahl der zu drehenden Schleifen vorgibt. Logischerweise muss »n« immer größer Null sein. »var« kennzeichnet in einer Schleife eine weitere Variable, deren Name man sich selbst aussuchen kann. Diese verknüpft Citydesk mit sämtlichen Variablen der Artikel, die in der Schleife ausgesucht werden. Daraus ergibt sich z.B. für den absoluten Link eines Artikels die folgende Variable: {$var.link$}. Die Überschrifts-Variable würde dann {$var.headline$} lauten.
Das eingeklammerte Feld »Konditionen« definiert anschließend welche Artikel innerhalb der Schleife verarbeitet werden sollen. So kann man sich hier explizit aus dem Inhalt verschiedener Ordner bedienen oder gleich aus allen Ordnern. Zuletzt muss man nur noch die Reihenfolge festlegen nach welcher die Artikel ausgesucht und dargestellt werden sollen. Zeigt sich Citydesk mit der Schleife zufrieden folgt nun die Bearbeitung des Schleifeninhaltes. Erreicht das Programm das Ende der Schleife, markiert durch das Tag {$ next $}, kehrt es zurück an den Anfang und wiederholt die Arbeit solange bis es die Anzahl der vorgegebenen »n«-Durchgänge abgearbeitet hat.
Ein Beispiel
Um nun auf der Startseite die aktuellsten fünf Einträge aus dem Ordner »Artikel« mit einem Link darzustellen programmiert man die folgende Schleife:
Schleife 1:
{$ forEach 5 artikel in (folder "artikel") sortDescendBy .filedDate $}
<p><a href="{$artikel.link$}">{$artikel.headline$}</a></p>
{$ next $}Erläuterung: Die Schleife wird fünfmal durchlaufen und bedient sich aus dem Ordner »artikel«. Sortiert wird der Inhalt absteigend nach dem Erstellungsdatum des angelegten Artikels. Der Schleifeninhalt spukt dann fünf Paragraphen (sofern ausreichend Artikel vorhanden) aus, die jeweils die Überschrift des Artikels mit dem jeweiligen Link beinhalten.
Sortieren, Formatieren, Eintüten
Da man als Programmierer den Schleifen-Inhalt mit sämtlichen HTML-Tags füllen kann, lassen sich wie auf professionellen Seiten auch formschöne Boxen anlegen. Ob man nun eine Schleife eine Tabelle bauen lässt, oder eine Anzahl von Artikeln als Liste generiert, es gibt jede Menge Varianten. Wenn man einmal das Prinzip der Verschachtelung verstanden hat, dann möchte man gar nicht mehr aufhören, den Inhalt fein säuberlich auf der Seite zu ordnen.
Tabellen-Schleife:
<table border="1">
<tr>
{$ forEach 10 artikel in (folder "artikel") sortDescendBy .filedDate $}
<td><a href="{$artikel.link$}">{$artikel.headline$}</a></td>
{$ next $}
</tr>
</table>Vielfältig unterstützt Cityscript den Webarchitekten den Inhalt zu steuern und zu formatieren. Die Schleifen lassen sich logisch mit weiteren Tags wie {$ between $}, {$ odd $}, {$ even $}, {$ else $}, {$ before $}, {$ after $} ausbauen und verfeinern. Vergisst der Benutzer einer Citydesk-Seite z.B. für einen Artikel einen Anreißer, so kann man schon in der Schleife verhindern, dass in der Seite ein leerer Platzhalter auftaucht. Das Tag {$ else $} macht es möglich. Fehlen also irgendwelche Inhalte, kann man sie leicht durch andere ersetzen.
Weitere hilfreiche Eigenschaften
Wie andere CMS-Systeme auch unterstützt Citydesk auch den Anbieter der Webseiten bei der Erstellung verschiedenster Formate. So lassen sich für Artikel leicht mehrere Versionen für das WWW produzieren. Mit Hilfe von »Template-Families« lassen sich für einen Artikel z.B. eine HTML-, Druck- und RSS-Version erstellen. Der Programmierer erstellt dafür nur einen weiteren Ordner im Templates-Verzeichnis und editiert die jeweiligen Templates.
Obendrein können die Inhalte auch für ein verschiedenes Publikum aufbereitet werden und in Ordnern sortiert werden. Wer die einzelnen Artikel zu sehen bekommt, entscheidet der Citydesk-Benutzer innerhalb der Artikel. Hier kann er angeben für welches Publikum der Artikel zuständig ist. Weiterhin kann man innerhalb Citydesk auch die »Publishing-Locations« definieren. Das bedeutet, dass man die Inhalte mittels integriertem FTP auf unterschiedlichen Servern im Netz abspeichern kann.
Fazit
Um mit Citydesk anspruchsvolle Seiten zu bauen, benötigt man natürlich weitere Werkzeuge wie Bildbearbeitungsprogramme oder einen vernünftigen HTML-Editor. Bei dem Aufbau einer Webseite mit Hilfe von Citydesk empfiehlt es sich angesichts des mangelhaften integrierten Editors zuallererst ein Layout der Seite außerhalb des Programmes anzulegen. Deswegen sollte man einfach mit Blindtext und Bildern die einzelnen (Unter-)Seiten konstruieren. Ist man mit dem Screendesign zufrieden, integriert man anschließend die Variablen und fügt die Schleifen ein. Schon alleine wegen der umständlichen Art, externe Style-Sheets in Citydesk einzubinden, sollte man die Seite erst fertig layoutet haben, bevor man sie als Template umsetzt.
Damit Citydesk eine CSS-Datei publiziert, muss man zuvor mittels der Funktion »New HTML« ein Dokument anlegen, dessen Endung einfach ».css« lautet. Anschließend kopiert man einfach die Formatierungsbefehle in das Dokument. Publiziert man nun alle Artikel und Seiten, legt Citydesk auch die CSS-Datei an, die man in seinen Templates verlinkt hat.
Im Auge sollte man auch die Limitierung der »Starter Edition« behalten. Diese erlaubt lediglich das Verwalten von maximal 50 Objekten. Dazu gehören Bilder, Artikel und Ordner. Expandiert der Inhalt, stehen einem Update auf die »Home Edition« lediglich 79$ im Weg. Diese erweitert die Datenbank auf maximal 500 zu verwaltende Objekte.
Vor- und Nachteile des Redaktionssystems
Positiv:
- Kostenlos in der »Starter Edition«
- Einfach zu handhabende Script-Sprache für die Steuerung der Inhalte
- Datenbank lässt sich einfach sichern und brennen
- Variablen
- Hin- und Herschalten zwischen User- und Designer-Mode
- Gute englische Anleitung
Negativ:
- Keine Suchfunktion für die Website (Abhilfe via Google-Implementierung)
- Teilweise umständliche Menüs und zu klein geratene Icons
- Keine ausreichende Undo-Funktion
- Anleitung und Programm derzeit noch in Englisch
Links
