Kategorien
CMS Programmierung

Webmaster: Mini CMS und Bandbreite

Passwort-Generator
Der Phonetic Password Generator erzeugt Passwörter, die einerseits noch recht gut zu merken sind und andererseits dem Sicherheitsbedürfnis Rechnung tragen, denn erraten kann man sie – im Gegensatz zu manchem eigenen Einfall – kaum.

Screenshot

Fremde Besucherzahlen
Dieses Online-Werkzeug verspricht die Besucherzahlen einer beliebigen Website zu ermitteln. Ist schon prima, wenn man weiß, was sich bei der Konkurrenz so tut. Die Ergebnisse sind zwangsläufig nicht akkurat, aber vielleicht hilft ein Trend schon weiter. Als Quelle für die Ermittlung wird Alexa genannt, der Rest bleibt im Dunkeln.

Backlink-Service
Eine Empfehlung zurückzugeben, ist ein feiner Zug. Mit Hyperlinks klappt das auch. Indem man feststellt wer zu einem linkt und diesen dann seinerseits zurückverlinkt. Das kann man automatisieren und mit Scripthilfe selbst basteln oder man man bedient sich auch hier eines freundlichen Services, der einem die Arbeit abnimmt.

Screenshot

Dijjer: Server Bandbreite sparen
Dijjer ist nicht neu, doch weitgehend unbekannt. Es handelt sich um einen Peer-to-Peer Webcache, der Webmaster helfen soll Ressourcen zu sparen, die immer dann anfallen wenn große Dateien zum Download angeboten werden. Dies geschieht durch die Hilfe anderer Nutzer von deren Rechnern Teile des Downloads zur Verfügung gestellt werden. Damit Dijjer funktioniert, ist die Installation einer Software erforderlich (Java). Zusätzlich gibt es ein Firefox Plugin. Für den Webmaster ändert sich nicht viel, er muss lediglich seine Hyerlinks geringfügig erweitern.

sNews: Mini CMS
sNews ist ein Content Management System, das mit lediglich einer Datei auskommt. Dementsprechend einfach fällt die Installation aus. Was so simpel klingt hat dennoch eine Menge zu bieten. Als da wären: Suchfunktion, RSS-Feed, Archiv, verschiedene CSS-Templates, Sprachanpassung, Kommentarfunktion. Erweiterungsmöglichkeiten (Addons) sollen folgen. sNews ist möglicherweise ideal zum publizieren von Nachrichten oder Artikeln auf kleinen Websites. Das alles ist kostenlos zu haben und benötigt zur Installation PHP und MySQL. Eine Anpassung von sNews ins Deutsche ist über das dazugehörige Forum zu bekommen.

Screenshot

Kategorien
CMS

Weblog Software in der Übersicht

von Christiane Rosenberger und Sven Lennartz

Das eigene Blog wird entweder als Kollektion von Scripts auf dem eigenen Server oder Webspace installiert, oder man nutzt einen Dienstleister, einen so genannten Hoster, der alles übernimmt.

Accueil – DotClear
Frei nutzbar unter der GNU General Public License. MySQL and PHP. Englisch und Französisch.

Screenshot

b2evolution
GNU General Public License. Braucht PHP4 und MySQL. Erhältlich in diversen Sprachen, darunter auch Deutsch. Erlaubt das betreiben mehrere unabhängiger Blogs mit einer Installation.

Screenshot

bBlog
Nutzt das Template System Smarty, sowie PHP/MySQL. Open Source. Wenige Plugins und Templates verfügbar. Englisch.

Screenshot

BLOG:CMS
Mehr als nur ein Blog. Außerdem dabei Forum, Foto-Galerie und Wiki. Open-Source für PHP4 und MySQL. Mehrere Blogs mit einer Installation sind möglich. Englisch.

Screenshot

Drupal
Open-Source Software unter GPL. Englisch mit zahlreichen Übersetzungen. Drupal kann als CMS eingesetzt werden und bringt einige Extras wie Bildergalerie oder Newsletter mit.

Screenshot

ExpressionEngine
Zwischen Blog und Content Management System. Neben einer kostenlosen Version existieren auch zwei kostenpflichtige Varianten. Firmen zahlen 250,- Dollar. Eine deutschsprachische Ausgabe ist verfügbar.

Screenshot

Geeklog
Geeklog ist eine auf PHP und MySQL basierende Applikation zur Verwaltung dynamischer Websites. Geeklog kann dabei sowohl als Blog als auch als CMS eingesetzt werden.

Screenshot

gupsi:media
Ein Einfaches Content-Management-System, das die wichtigsten Funktionen zum Betreiben eines Weblogs enthält. Ein deutschsprachiges Projekt von Sven Przepiorka. Läuft auf PHP und MySQL.

LifeType
Ebenfalls ein Blog/CMS aus deutschen Landen. PHP und MySQL als Open-Source.

Screenshot

Movable Type
Der Klassiker von Six Apart. Für den Download fallen Kosten zwischen 200 und 600 Dollar an. Dafür allerdings gibt es auch Support. Ein Installations-Service ist verfügbar, der aber gesondert berechnet wird.

Screenshot

Nucleus CMS
Nucleus CMS is a flexible and easy to install content management system, aka blog software. It helps you to publish a website and lets writers do what they are best at: writing items or articles, without having to worry about formatting and markup (Free Download)

Pivot
Pivot is a tool, written in PHP, to create weblogs and other dynamic websites. Pivot is Free (as in beer speech), and easy to use.

Serendipity
Ein Open-Source System, das nach vier Jahren Entwicklungszeit im Juni 2006 in der Version 1.0 erschien. Ein mächtiges System mit zahlreichen Funktionen und Features und Herausforderer von WordPress. Dr. Web Artikel über Serendipity.

Screenshot

Textpattern
A free, flexible, elegant, easy-to-use content management system for all kinds of websites, even weblogs.

WordPress
Das beliebteste aller Systeme. WordPress ist ausgereift und kostenlos. Es existieren tausend von Plugins und eine Fülle von Templates. Auch Dr. Web verwendet WordPress für sein Weblog. Dr. Web Artikel über WordPress.

Screenshot

Erstveröffentlichung 14.06.2006

Kategorien
CMS Programmierung

Joomla gegen Mambo

von Rene Schmidt

Joomla sieht sich als Nachfolger des beliebten Content Management Systems Mambo. Das Mambo-Projekt teilt diese Ansicht nicht. Dessen Nutzer stehen vor einer wichtigen Entscheidung: Wechseln? Und wenn ja: wann? Dr. Web stellt Vergleiche an.

Das freie Web-Content-Management-System Mambo hat turbulente Monate hinter sich. Im Spätsommer 2005 hat das australische Unternehmen Miro International als Inhaberin der Mambo-Markenrechte eine Stiftung ins Leben gerufen, unter dessen Dach die weitere Entwicklung stattfinden sollte. Das Problem: die Entwicklergemeinde wurde dabei übergangen. Die Konsequenz war die Gründung des Joomla-Projekts. Der neue Joomla-Entwicklungszweig basiert komplett auf Mambo-Code vom August 2005. Die Entwicklung findet seither getrennt statt.

Viele Mambo-Nutzer fragen sich nun: „Was tun? Bei Mambo bleiben oder zu Joomla wechseln?“. Wer dazu in der Lage ist, hat aufgrund der Quelloffenheit die Möglichkeit, Mambo selbst mitzuentwicklen und es weiterhin einzusetzen. Auch die Übernahme von Joomla-Code wäre möglich, denn beide Projekte sind GPL-lizensiert. Das kann oder möchte allerdings nicht jeder leisten. In diesem Fall kann es wichtig sein, das Projekt mit der größten Entwickler- und Nutzerbasis zu wählen, um in Zukunft auf der richtigen Seite zu stehen. Wer reitet schon gern ein totes Pferd?

Einige Blicke auf beide Projekt-Webseiten bietet einen guten Überblick auf die Aktivitäten der Entwickler- und Nutzergemeinde. Das Changelog listet alle Änderungen, die in der Vergangenheit an einem Projekt vorgenommen wurden:

Changelog seit August 2005 bis ca. Ende März 2006 (Zeilen):
Mambo: ca. 200
Joomla: ca. 1200

Ein guter Teil der Änderungen dürfte beide Projekte betreffen, weil Anfang des Jahres in beiden Projekten zahlreiche Fehler entdeckt und behoben wurden. Der Code ist zum großen Teil noch nahezu identisch. Joomla hat in diesem Vergleich die Nase vorn, rein quantitativ zumindest.

Forenbeiträge der letzten 92 Tage, die das Wort „Installation“ beinhalten:
Mambo: <900
Joomla: <2000

Auch hier liegt Joomla vorn, was auf eine höhere Nutzeraktivität schließen lässt.

Anzahl Beiträge im Forum:
Mambo: ca. 340.000
Joomla: ca. 264.000

Das Mambo-Forum führt deutlich mehr Beiträge als das Joomla-Forum. Diese Zahlen werden aber durch die Tatsache relativiert, dass das Joomla-Forum mit sieben Monaten deutlich jünger ist als das bereits 2003 gestartete Mambo-Forum.

Aktivität im Mambo- bzw. Joomla-Forum an einem Samstag Ende März 2006:
Mambo: 270 Gäste, 10 registrierte Nutzer
Joomla: 227 Gäste, 85 registrierte Nutzer

Die Differenz bei der Gästeanzahl ist nicht so groß wie die Anzahl der registrierten Nutzer, auch diesen Vergleich kann Joomla für sich entscheiden.

Diese Zahlen sind natürlich nur Stichproben und keine eindeutigen Beweise dafür, dass die Entwickler- und Nutzerbasis von Mambo geschrumpft ist und dessen Entwicklung in Zukunft langsamer voran gehen wird als bei Joomla. Schließlich sind beide Projekte weiterhin freie Software, so dass Quellcode von einem Projekt ins andere fließen könnte. Eine Tendenz ist an den Zahlen allerdings durchaus erkennbar: Das Mambo-Projekt scheint massiv an Unterstützung verloren zu haben. Auch der größte Teil der Komponenten- und Module-Entwickler ist ebenfalls auf Joomla gewechselt.

Screenshot
Joomlas Control Center

Unterschiede
Die Unterschiede zwischen den aktuellen Versionen Joomla 1.0.8 und Mambo 4.5.3h sind ein gutes halbes Jahr nach der Abspaltung schon nicht mehr als gering anzusehen, wenngleich der größte Teil – noch – nahezu identisch ist. Ein diff zwischen den beiden Versionen ist über 134.000 Zeilen lang. Davon sind grob geschätzt 25% Zeichenketten-Substitutionen von ‚Mambo‘ in ‚Joomla‘.

diff ist ein Unix-Programm, das die Unterschiede zwischen zwei Textdateien synoptisch ausgibt. Die Ausgabe des Programms wird oft mit demselben Namen wie das Programm selbst als diff bezeichnet. Es wird auf der Kommandozeile mit den Namen von zwei Textdateien als Parameter ausgeführt. Quelle: Wikipedia

Es ist davon auszugehen, dass sich die beiden Entwicklungszweige weiter voneinander entfernen oder zumindest unterschiedlich schnell weiterentwickelt werden. Ein Wechsel von Mambo auf Joomla wird parallel dazu komplizierter und umständlicher und sollte nicht länger aufgeschoben werden, wenn die Umstellung nicht unnötig mühsam sein soll.

Screenshot
Joomlas Control Center

Auf der deutschen Joomla-Seite wird ausführlich erklärt, wie ein Wechsel erfolgen kann. Allerdings wird dort von den älteren Versionen 1.0.0 und 4.5.2.x ausgegangen. Mambo-Nutzer, die einen Wechsel auf die aktuelle Version von Joomla in Erwägung ziehen, müssten jetzt schon auf Joomla 1.0.0 und dann erst auf 1.0.8 aktualisieren, wenn sie die Anleitungen wörtlich befolgen wollen, was durchaus sinnvoll sein kann. Wenn in komplexen Web-Anwendungen etwas unvollständig aktualisiert oder ersetzt wird, kann dies schwerwiegende Probleme wie Daten-Inkonsistenzen verursachen und eine Installation unbenutzbar machen.

Übrigens: die drei bekannten deutschen Mambo-User-Groups sind allesamt ins Joomla-Lager gewechselt. Die Zeit für einen Wechsel scheint mehr als reif zu sein. ™

Links zum Thema:

Erstveröffentlichung 30.03.2006

Kategorien
CMS Programmierung

Typo3: Dynamische Grafiken und DHTML-Menüs

von Jörg Drzycimski

Eine der Stärken des Open Source CMS Typo3 ist der Umgang mit dynamischen Elementen. Sei es der Umgang mit dynamisch erzeugten Grafiken für Buttons oder DHTML-Menüs, in Typo3 funktionieren solche Designelemente fast von alleine.

Der Funktionsumfang von Typo3 bietet unbegrenzte Möglichkeiten für dynamische Designelemente, wie grafische Buttons oder DHTML-Menüs. Selbst die Kombination aus beidem stellt für Typo3 kein Problem dar. Die DHTML-Menüs sind Bestandteil der immerhin fast 15MB großen Distribution, und für die dynamischen Grafiken lässt sich mühelos das Programm ImageMagick auf dem Webserver integrieren.

Dynamische Grafik
Um in Typo3 mit dynamischen Grafiken arbeiten zu können, benötigt man eine statisch compilierte Version von ImageMagick. Aus Gründen der Performance empfiehlt sich die ältere Version 4.2.9. Eine Installationsanleitung für den Webserver ist ebenfalls im Netz erhältlich..

Die einfachen Vorteile, die ImageMagick bietet, sind die dynamischen Skalierungen von Bildern im Content. So muss ein Redakteur nicht wissen, wie man Bilder verkleinert oder Thumbnails erzeugt, für ihn reicht das einfache Hochladen der Grafik, und Typo3 skaliert sie automatisch auf ein definiertes Mass. Diese Skalierung kann man sowohl für Thumbnails, als auch für die Grafik selber angeben. Zusätzlich besteht die Möglichkeit, die Grafiken als „Click-Images“ zu definieren, so dass bei Klick ein Extra-Fenster mit der Vergrößerung aufgeht.

Screenshot
Eingabe der Grafik inklusive Resizing und Klick-Vergrößern

Die wahre Stärke von Typo3 mit ImageMagick zeigt sich aber erst in der Erzeugung von Grafiken mit dynamischem Text, beispielsweise für Buttons. Auf diese Weise kann man die Seiten aus dem Pagetree mit Einzelbuttons darstellen, die eine „Hintergrundgrafik“ – den Button – plus den Linktext enthalten. Für neu hinzugefügte Seiten muss kein neuer Button erstellt werden, da Typo3 den Button mit Text automatisch einfügt.

Um diese Buttons zu erzeugen, muss im Setup des Templates ein GMENU-Objekt (für grafisches Menü) als Objekt des HMENUs mittels TypoScript angelegt werden. Das normale Setup – Plain Text ohne grafische Menüs – sieht folgendermaßen aus:

  # Default PAGE object:
    page = PAGE
    page.typeNum = 0
    # Ext. Stylesheet
    page.stylesheet = fileadmin/templates/styles.css

    # Menü
    temp.menu = HMENU
    temp.menu.1 = TMENU
    temp.menu.1 {
     NO {
      ATagParams = style="font-family: Arial; text-decoration: none;"
      allWrap = |<br>
     }
    }

    page.10 = TEMPLATE
    page.10 {
     #Haupt-Template einbinden
     template = FILE
     template.file = fileadmin/templates/template.html
     workOnSubpart = DOCUMENT_BODY
     # MARKER
     # Logo Grafik
     marks.LOGO = IMAGE
     marks.LOGO.file = fileadmin/templates/bulo-neg-plus.gif
     # Tabellenfarbe
     marks.COLOR = TEXT
     marks.COLOR.value = #FFFF00
     # SUBPARTS
     #Hauptnavigation
     subparts.MENU < temp.menu
     #Inhalt
     subparts.TEXT < styles.content.get
    } 

Oben: Der TypoScript-Code im Setup des Templates

Um grafische Buttons zu generieren, muss nun der Teil bearbeitet werden, der das Menü als „temp.menu“ erzeugt. Alle anderen Codezeilen bleiben gleich. Die Buttongrafik, die verwendet werden soll, wird in das /fileadmin/-Verzeichnis gelegt, und das „temp.menu“ mit folgendem TypoScript-Code ersetzt:

Button

Button-Grafik

       temp.menu = HMENU
    temp.menu.1 = GMENU
    temp.menu.1 {
     NO {
      wrap = | <BR>
      XY = [4.w], [4.h]
      backColor = yellow
      4 = IMAGE
      4.file = fileadmin/menuback.gif
      10 = TEXT
      10.text.field = {page:title}
      10.offset = 0,14
      10.align = center
      10.niceText = 1
     }
    } 

Oben: Der TypoScript-Code für das GMENU

Für den Linktext nutzt Typo3 normalerweise die GDLib, bei der man Abstriche an das Rendering des Textes machen muss – der Text auf den Buttons wird pixelig. Mit der Option „niceText = 1“ wird statt der GDLib ImageMagick eingesetzt, die mehrere Renderingvorgänge durchführt, so dass der Text klar lesbar ist.

Screenshot

Die fertige Website

Diese einfache Variante eines grafischen Menüs ist erweiterbar. Mit einem anderen Button liesse sich der Text zum Beispiel als GIFBUILDER-Objekt definieren, und mit Schatten oder Emboss-Effekt verschönern. Selbstverständlich ebenfalls dynamisch für alle Seiten. Auch ist es möglich, bei Fotos Copyright-Angaben zu integrieren, ohne dass diese mittels Grafikprogramm eingefügt werden müssen.

DHTML-Menüs
Die Distribution von Typo3 liefert die JavaScript-Funktionen für DHTML-Menüs gleich mit. Sie funktionieren für fast alle Browser und Betriebssysteme, angegeben sind MSIE4+, NS4+ (mit Einschränkungen), NS6+, Opera5+ und Konqueror.

Zum Erzeugen eines textbasierten Menüs wird ein TMENU_LAYERS-Objekt definiert, für grafische Menüs braucht man ein GMENU_LAYERS-Objekt. Das Script für die Objekte muss im Setup zusätzlich eingefügt werden, das Menü selber wird wieder nur im „temp.menu“ geändert, ohne den restlichen Code zu bearbeiten.

       # Benoetigte Libaries einfuegen
    page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
    # DHTML-Menü erzeugen
    temp.menu = HMENU
    # Ebene 1 erzeugen
    temp.menu.1 = TMENU_LAYERS
    # Eigenschaften Ebene 1
    temp.menu.1 {
      layerStyle = position:absolute;VISIBILITY:hidden;
      # Menu verankern, damit es nicht der Maus folgt
      lockPosition = y
      # Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
      relativeToParentLayer=1
      relativeToTriggerItem=1
      topOffset=10
      leftOffset=60
      # Angabe wann sich die naechste Ebene wieder schliessen soll
      hideMenuWhenNotOver = 50
      hideMenuTimer = 70
      # alle Menuepunkte anzeigen
      expAll=1
      # Darstellung der aktuellen Ebene
      wrap = <table border="0" cellspacing="0" cellpadding="5">|</table>
      # Darstellung im Normalmodus
      NO {
          ATagParams = class="mainnavi"
          allWrap = <tr><td  nowrap>|</td></tr>
      }
    }
    # Ebene 2 erzeugen
    temp.menu.2 = TMENU_LAYERS
    # Eigenschaften Ebene 2
    temp.menu.2 {
      layerStyle = position:absolute;VISIBILITY:hidden;
      # Menu verankern, damit es nicht der Maus folgt
      lockPosition = x
      # Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
      relativeToParentLayer=2
      relativeToTriggerItem=2
      topOffset=20
      leftOffset=260
      # alle Menuepunkte anzeigen
      expAll=1
      # Darstellung der aktuellen Ebene
      wrap = <table width="180" border="0" cellspacing="0" cellpadding="0"
    bgcolor="#FFFF66"><tr><td height="1" colspan="4" bgcolor="#000000"><img
    src="fileadmin/images/0.gif" width="180" height="1"></td></tr>|<td
    height="1" colspan="4" bgcolor="#000000"><img src="fileadmin/images/0.gif"
    width="180" height="1"></td></tr></table>
      # Darstellung im Normalmodus
      NO {
          ATagParams = class="subnavi"
          allWrap = <tr><td width="1" bgcolor="#000000"><img
    src="fileadmin/images/0.gif" width="1" height="20"></td><td width="178">|</td><td></td><td
    width="1" bgcolor="#000000"><img src="fileadmin/images/0.gif" width="1"></td></tr>
      }
      # Ende Ebene 2
    } 

Oben: Der TypoScript-Code für das textbasierte DHTML-Menü

Der gezeigte Code würde eine Website mit zwei Ebenen abbilden. Um zusätzliche Ebenen aus dem Pagetree zugänglich zu machen, würde der Code, der die zweite Ebene erzeugt, dupliziert, angefügt und angepasst werden.

Screenshot
Die fertige Website

Fazit
Die in Typo3 integrierten Funktionen bieten zahlreiche Möglichkeiten, eine Website ansprechend zu gestalten. Die Kombination aus den oben genannten Menüs lässt sich einfach und schnell zu einem anspruchsvollen grafischen DHTML-Menü zusammenfassen, um den Lesern der Website etwas für das Auge zu bieten.

Erstveröffentlichung am 27.1.2005

Kategorien
CMS Programmierung

WebGUI CMS: Daumen hoch!

Das US-amerikanische Softwareunternehmen Plainback ist Anbieter des freien OpenSource-Content-Management Systems WebGUI. Die Zielgruppe sind kleine und mittelgroße Unternehmen sowie Privatanwender, die ein leistungsfähiges, sauber programmiertes und kostengünstiges CMS einsetzen wollen.

„Wenn Sie einen Webbrowser bedienen können, können Sie WebGUI bedienen“. Oft genug zerschellen solche Marketing-Phrasen an den schroffen Felsen der Realität. Das gilt immer noch besonders für OpenSource-Projekte, auch wenn die Situation in der freien Community immer besser wird.

WebGUI ist in Perl geschrieben und läuft, wie bei Web-Applikationen fast schon üblich, mit allen gängigen Betriebssystemen, Webservern und Datenbanksystemen. Bestimmte Systempräferenzen stehen einer WebGUI-Installation prinzipiell nicht im Weg.

WebGUI ist stark modular aufgebaut. Über Module, hier Wobjects genannt, kann das System sehr einfach erweitert werden, ohne Produktaktualisierungen zu verkomplizieren.

Screenshot
Bearbeitungsfunktionen werden direkt in der Website angezeigt

Die Unterstützung für LDAP-Verzeichnisdienste kann in dieser (Preis-) Klasse durchaus als ungewöhnlich bezeichnet werden. Liegen Benutzerdaten bereits in einem LDAP-Verzeichnis vor, zum Beispiel E-Mail-Benutzerkonten, können diese Informationen in WebGUI übernommen werden, so dass das CMS sehr gut für Intranets geeignet ist.

Die LDAP-Unterstützung ein gutes Argument für den Einsatz von WebGUI in mittelgroßen Unternehmen. Leider fehlt ein Workflow-Management, um zum Beispiel Änderungen eines Nutzers vom Admin oder Vorgesetzten genehmigen zu lassen – was die Eignung für kleine und mittlere Unternehmen wieder in Frage stellt.

Wichtige Funktionen wie Foren, Abstimmungen, Veranstaltungskalender und sind entweder direkt integriert oder als Wobjects verfügbar.

Installation
Die Installation ist wie bei besseren Content Management Systemen üblich recht kompliziert. Je flexibler und offener ein System ist, desto komplexer ist es. Viele Programm-Abhängigkeiten müssten aufgelöst werden. WebGUI benötigt zahlreiche Perl-Module, die nicht überall verfügbar sind. Wer die Möglichkeit hat, diese zu installieren, zum Beispiel auf einem eigenen Root-Server, kann das vom Test-Skript erledigen lassen oder manuell per CPAN-Shell installieren. Besser wäre es gewesen, die benötigten Perl-Module mit ins WebGUI-Archiv aufzunehmen, um die Installation und Aktualisierungen zu vereinfachen.

Für Windows gibt es ein Komplettpaket von WebGUI inklusive Apache, Perl, allen benötigten Perl-Modulen und MySQL. So können auch CMS-Anfänger in die Welt der Web-Content-Management-Systeme hineinschnuppern.

Screenshot
Editor

Bedienung
Die Bedienung ist tatsächlich simpel – wenn die Installations-Hürde genommen und die Website in WebGUI eingerichtet ist. Bedienelemente für Artikelbearbeitung werden direkt in der Website, neudeutsch „inline“, angezeigt. Artikel können sogar per Drag-and-Drop auf einer Seite verschoben werden. Mehrere zur Auswahl stehende WYSIWYG-Editoren runden das Bild ab. Besonders hilfreich ist die Funktion „Versionierung“. Sie speichert verschiedene Bearbeitungszustände einer Datei und kann per Mausklick alte Versionen wieder herstellen.

Fazit
Der Entwicklungsfahrplan von Plainback für WebGUI lässt hoffen: eine Workflow-Verwaltung wird in der Version 6.8 enthalten sein. Es gibt bereits eine Betaversion zum Testen. Spätestens in dieser Version wird WebGUI über alle Funktionen und Eigenschaften verfügen, die es für den professionellen Einsatz in kleinen und mittleren Unternehmen benötigt. Wer sich mit Perl ein wenig auskennt und die Unix-Shell nicht fürchtet, bekommt mit WebGUI ein ausgereiftes Produkt. Daumen hoch für WebGUI! ™

Die Links:

Erstveröffentlichung 06.12.2005

Kategorien
CMS Programmierung

CMSimple – Ein Zwerg bekommt Stelzen

Ein gutes CMS darf man auch an seinen Möglichkeiten zur Erweiterung messen. CMSimple hat hier viel zu bieten. Mit den zahlreichen Addons und Plugins, den Templates und dem „CMSimple Scripting“ lässt einiges erreichen.

AddOns und PlugIns
Die CMSimple-User müssen nicht voller Neid auf das „Extension Repository“ von Typo3 schielen, da es auch hier viele nützliche Erweiterungen gibt. Als erstes sollte aber der Plugin Loader installiert werden, um den Ausbau von CMSimple zu erleichtern. Dazu wird auf der CMSimple Root-Ebene ein Ordner mit dem Namen PLUGINS angelegt, dann die index.php und admin_common.php aus dem plugin_loader.zip in diesen Ordner abgespeichert. Mit dem Inhalt des cms_plugin_loader.zip überschreibt man noch die cms.php und schon können die zahlreichen PlugIns genutzt werden.

Auf Internet-Setup etwa findet sich ein Counter-, Editor-, Gästebuch-, Mailformular-, Newsletter- und Voting-AddOn. Svarrer bietet ein Kalender-, Galerie- und Memberspages-PlugIn, Geniz ein Newsletter-, News-, Forum- und RSS Feed-Modul. Ein weiteres RSS-PlugIn findet man auf Cycronic und „Advanced“ Form-, News- und Download-PlugIns bietet jat-at-home.

Screenshot
Zahlreiche Erweiterungen stehen zur Verfügung

Das Layout
Mit den Dateien „stylesheet.css“ und „template.htm“ kann das Design einer Website schnell nach eigenen Wünschen umgestaltet werden. Das Template besteht aus HTML mit PHP-Aufrufen, die an die Datei cms.php gerichtet sind.

Einige dieser Aufrufe dürfen nicht fehlen, wie etwa head() für die CSS-Datei, die Meta-Tags und den Seitentitel, toc() für das Inhaltsverzeichnis, editmenu() für das Admin-Menü, onload() für die Editor-Funktion und content() für die Inhalte.

Die weiteren Funktionen können bei Bedarf verwendet werden. So steht sitename() für den Namen der Website, sitemaplink() für den Link zur automatisch-generierten Sitemap, printlink() erstellt den Link zur Druckversion, mailformlink() den zum Mail-Formular, guestbooklink() zum Gästebuch, lastupdate() informiert über das letzte Update, submenu() erstellt den Link zum Untermenü, previouspage() den Link zur vorherigen, nextpage() zur folgenden Seite, top() erstellt einen Link zu #TOP und searchbox() sorgt für ein Suchformular.

Natürlich kann man auch ein fertiges Template nutzen oder verändern. Torsten Behrens etwa bietet CSS-Vorlagen an, die man komplett als ZIP-Datei herunterlädt. Ohne Zuzahlung dürfen diese Templates allerdings nur mit drei Werbelinks genutzt werden. DotcomWebDesign hat wohl die größte Auswahl und auch uneingeschränkt nutzbare Templates in guter Qualität im Angebot. Diese findet man auch auf nmud, allerdings stehen dort nur acht Stück zur Auswahl.

Screenshot
Templates en masse

CMSimple Scripting
Auf reinem PHP basiert das „CMSimple Scripting“, womit innerhalb des Contents einiges definiert werden kann. So ändert der folgende Code den Titel einer Seite ab:

  #CMSimple $GLOBALS['cf']['site']['title']='Beispiele'; # 

Nur auf dieser Seite würde also der Titel „Beispiele“ lauten. Über die „php.ini“ muss dazu allerdings „allow_url_fopen“ gestattet sein. Mit #CMSimple hide# versteckt man eine Seite, die so weder im Menü, noch in der Sitemap oder bei Suchanfragen gelistet wird. Das letzte Update ruft man mit #CMSimple $output.=lastupdate(); # auf. Etwas mehr Code ist für eine Bannerrotation nötig:

       #CMSimple $t=array(array("banner1.jpg",
    "http://www.domain1.de"),
    array("banner2.jpg",
    "http://www.domain2.de/demo/"),
    array("banner3.gif",
    "http://www.domain3.de/forum"));$i=rand
    (0,count($t)-1);$output=preg_replace
    ("/".chr(35)."CMSimple.*".
    chr(35)."/",chr(60).'a href="'.$t[$i]
    [1].'"'.chr(62).
    chr(60).'img src="./images/'.$t[$i]
    [0].'"'.chr(62).chr(60).'/a'.
    chr(62),$c[$s]);# 

Weitere Scriptbeispiele findet man schnell über Google, so dass auch Nicht-Programmierer viel erreichen können. Die Einfachheit, mit der CMSimple im Ganzen überzeugt, ist auch hier gegeben.

Sicherheit
Der eventuell vorhandene Login-Link sollte aus dem HTML-Template gelöscht werden. Als Administrator kann man sich direkt über die Adresse www.beispieldomain.de/&login einloggen. Die voreingestellten Zugangsdaten „admin“ und „test“ sind in der Datei „config.php“ abgespeichert. Um diese zu ändern, geht man in der Konfiguration von CMSimple auf die Einstellungen (Settings). Bei Linux sollte für mehr Sicherheit $wwwaut auf „true“ gestellt werden. Apache-User können noch die config.php über die .htaccess-Datei schützen.

Screenshot
Den „Login“-Link sollte man sich sparen

Selbst ohne Datenbank ist CMSimple ein flexibles und leistungsstarkes Content Managment System, das ohne Probleme erweitert werden kann. Der Werbespruch „Simple, Small, Smart“ trifft es genau. ™

Erstveröffentlichung 11.11.2005

Kategorien
CMS Programmierung

CMSimple: Ein Zwerg unter Riesen

CMSimple ist ein besonders einfaches Content Management System, das ohne SQL-Datenbank auskommt. Lediglich PHP ist gefordert. Schauen wir, wie leistungsfähig und komfortabel diese Lösung ausfällt.

Simple, Small, Smart
Die großen Brüder wie Typo3 stehen in dem Ruf, unbequem und schwer verständlich zu sein – nicht selten auch zu recht. CMSimple möchte, wie der Name schon andeutet, einfach, klein und clever sein. Die englische Version dieser Verben bildet denn auch den Werbespruch der Software.

Da es kostenlos ist, solange die Website sichtbar auf CMSimple verlinkt, erleichtert es zumindest nicht den Geldbeutel. Und auch die Nerven werden geschont, da die Installation erstaunlich einfach ist. Jeglicher Content der Website wird in einer einzigen HTML-Datei gespeichert. Da keine SQL-Datenbank nötig ist, reicht schon ein erschwingliches, wenn nicht das kleinste Webspace-Paket aus, das PHP erlaubt. Übrigens: Wer den Link nicht setzen mag oder kann, erhält mit dem Kauf einer Lizenz für 60,00 Euro das Recht, diesen wegzulassen und unterstützt damit die Weiterentwicklung der Software.

Screenshot
Die Website des CMS

Gut einrichten
CMSimple läuft auf allen Servern mit Linux oder Windows, Apache oder IIS. Unentbehrlich ist der PHP-Interpreter ab Version 4.0. Das reine CMS-Gerüst nimmt mit 50 KByte kaum Platz ein. Und so verwundert es nicht, dass die Installation nur wenige Sekunden in Anspruch nimmt. Installation ist an dieser Stelle eigentlich übertrieben, da nach dem Download und dem Entpacken der ZIP-Datei der Ordner „cmsimple2_4“ mit allen Dateien und Verzeichnissen per FTP-Client an beliebiger Stelle auf dem Server gespeichert wird.

Vorerst müssen jetzt die Zugriffsrechte geändert werden. Man stellt also für die Verzeichnisse „cmsimple/“, „cmsimple/languages/“, „content/“, „templates/default/“, „images/ und downloads/“ die Lese-, Schreib- und Ausführungsrechte per chmod auf 777 um. Die Files dieser Verzeichnisse bekommen mit „chmod 666“ Lese- und Schreibrechte. Wurden die Dateien in das Root-Verzeichnis übertragen, kann im Browser unter „www.domain.de/index.php“ der erste Login vorgenommen werden. Dazu klickt man auf der linken Seite den passenden Menüpunkt an und gibt „test“ als Passwort ein. Man landet in der Verwaltung des Content Management Systems, wo der Bereich „Settings“ aufgesucht wird. Dort klickt man auf „Edit configuration“. Unter „Security“ wird der Login-Name und das Login-Passwort neu definiert.

Screenshot
Dezenter Auftritt nach der Installation

Gesprochen und geschrieben
Auch dieses CMS bietet verschiedene Sprachpakete an. Wir stellen es auf Deutsch um, in dem unter „Language“ der Wert „language_default“ auf „de“ abgeändert wird. Ein Klick auf den „Save“-Button genügt und schon ist alles verständlicher. Für mehrsprachige Websites stehen 25 Sprachpakete bereit. Einige bringt die Standard-Installation schon mit, darunter Englisch, Französisch und Niederländisch. Weitere findet man auf der CMSimple-Website im Download-Bereich. Die neuen Sprachpakete werden dann einfach in das Verzeichnis „cmsimple/languages“ kopiert.

Der WYSIWYG-Editor ermöglicht das unkompliziertes Editieren, wie von Word bekannt. Soll der Content bearbeitet werden, ruft man die entsprechende Seite auf und klickt auf den „Editiermodus“ im Menü. Die aktuelle Seite landet im Editor, der sich selbst erklärt. Listen, Fett- und Kursivschrift oder Verlinkungen erzeugt man hier auf Kopfdruck. Unter „Bilder“ findet man eine einfache Upload-Funktion. Der Editor bietet mit „h1“, „h2“ und „h3“ Überschriften verschiedenster Ordnungen. Hier muss man aufpassen, da CMSimple diese zur Festlegung der Websitehierarchie verwendet. Eine Seite mit „h1“-Überschrift steht an oberster Stelle der Hierarchie, „h2“ darunter und „h3“ dementsprechend an letzter Stelle der Websitestruktur.

Man muss sich das als Verzeichnisbaum vorstellen. Soll eine Seite der obersten Hierarchieebene (mit „h1“-Überschrift) eine Unterseite bekommen, ruft man diese im Editor auf und fügt am Ende der Seite die neuen Inhalte, hier aber mit „h2“-Überschrift, ein. CMSimple erzeugt nach dem Speichern in der Navigation einen neuen Menüpunkt aus der „h2“-Überschrift. Man löscht eine Seite, in dem deren Inhalt im Editor ausgewählt und die „Entf“-Taste gedrückt wird. Mit dem Speichern wird die Änderung übernommen.

Screenshot
Zahlreiche Templates warten auf ihren Einsatz

Wie schon angemerkt, speichert SMSimple die Daten in einer HTML-Datei. Bei kleineren Projekten mit bis zu 700 Seiten und etwa „normalen“ Inhalten wird eine gute Performance geboten. Wer mehr benötigt, sollte ein anderes CMS in Betracht ziehen. Wem das Angebot aber genügt, der darf sich auf zahlreiche Templates, Erweiterungen und Add-ons freuen. Wer mit Dreamweaver arbeitet kann eine passende Toolbar Extension herunterladen, die beide Welten verbindet.

Erstveröffentlichung 06.10.2005

Kategorien
CMS Programmierung

Typo 3: Die besten Erweiterungen – Teil 2

Die Funktionalität von Typo3 kann mit unzähligen, hilfreichen Programm-Häppchen ausbaut werden. Wir haben die Datenbank durchstöbert und die nützlichsten und stabilsten Erweiterungen herausgesucht. Es gibt noch vieles zu entdecken.

Indexieren und finden
Die „Indexed Search Engine„-Extension von Kasper Skaarhoj gehört einfach zu jeder Typo3-Installation dazu. Ist die Erweiterung installiert, werden alle Seiten des Frontends „on-the-fly“ indexiert. Das bedeutet, dass alle Wörter, auch die der <title>- und <meta>-Tags, registriert, gewertet und gefunden werden. Dazu gibt es erst einmal eine einfache Wortsuche, die der Besucher mit einem Klick auf „Advanced Search“ um zahlreiche Features, wie der Einstellung nach dem gesuchten Medium (HTML, PDF, Word), Sprache oder Kategorie, erweitern kann. „AND“, „OR“ sowie „NOT“-Verknüpfungen sind auch kein Problem.

Screenshot
Suchmaschine mit so einigen Features

Umfrage leicht gemacht
Das Poll-System ermöglicht das, was man von ihm erwartet: Unkomplizierte Befragungen von Besuchern der Website. Einfach die Optionen auf die Frage angeben und die Umfrage starten. Fertig!

Screenshot
Stimme abgeben, Ergebnis sehen

PDF-Dokumente wie aus dem Automat
Falls Besucher des Internetprojekts einige Seiten für sich archivieren möchten, bietet sich das PDF-Format mit seinen bekannten Vorteilen an. Mit dem PDF Generator lässt sich eine beliebige Seite in ein solches Dokument umwandeln. Die Ausführung übernimmt HTMLDOC, eine Open-Source-Software, die reine HTML-Seiten (CSS ignorierend) konvertiert. Es werden nur die Schriftarten Courier, Helvetica, Symbol und Times unterstützt. Tabellen werden leider nicht berücksichtigt. Wird dem Surfer also per Link die Umwandlung in ein PDF-File angeboten, sollte man seine Seiten entsprechend vorbereitet haben.

Screenshot
HTML zu PDF-Dateien umwandeln

Kuck mal da
Das so genannte „Anteasern“ von Artikeln, also eine aussagekräftige Überschrift mit kurzer Einleitung, kennt man von praktisch allen Online-Magazinen. Mit der Top-Content-Extension funktioniert das auch, ohne dass man sich darum kümmern müsste. Aus der „tt_content“-Tabelle kann zum Beispiel eine Liste der neusten Artikel erstellt werden, die nach Datum sortiert und mit einem Link zum kompletten Artikel ausgerüstet ist. Die Textlänge kann eingestellt werden, womit man bestimmt, wie viel der Leser auf der Teaser-Seite präsentiert bekommt. Per HTML-Template werden bei Bedarf noch mehr Veränderungen vorgenommen.

Screenshot
Übersicht der aktuellen Beiträge

Werbung mit dem Banner
Die Simple Banner Erweiterung sorgt für grafische Werbung. Als Layer können diese bewegt oder auch geschlossen werden. Selbst eine Bannerrotation ist mit dieser Extension möglich. Es werden das .gif-, .png- und .jpg-Format unterstützt.

Screenshot
Bannerrotation im Griff

Wer die Wahl hat…
…, der hat sich bestimmt die Extension namens Page Template Selector installiert. Damit kann für jede Seite oder Kategorie ein eigenes Template definiert werden. Jedes HTML-Template oder auch TypoScript-Template wird ohne Murren geschluckt. Wie die Abbildung zeigt, ist alles erfreulich benutzerfreundlich gehalten.

Screenshot
Template-Auswahl mit Komfort

Die vorgestellten Extensions stellen lediglich eine Auswahl aus der Welt der verfügbaren Erweiterungen dar. So manches im Angebot ist über das experimentelle Stadium nie herausgekommen oder läuft nur mit Einschränkungen.

Erstveröffentlichung 27.04.2005

Kategorien
CMS Programmierung

Typo 3: Die besten Erweiterungen – Teil 1

Die Funktionalität von Typo3 kann mit unzähligen, hilfreichen Programm-Häppchen ausbaut werden. Wir haben die Datenbank durchstöbert und die nützlichsten und stabilsten Erweiterungen herausgesucht.

News System
Nachrichten beleben das Geschehen. Ein nicht unerheblicher zeitlicher Aufwand muss aber in Kauf genommen werden, vor allem wenn man die Sache manuell realisiert. Viele einfacher ist die News Extension, die CSS-basierte Templates anbietet. So wird die News-Eingabe samt Bild doch stark beschleunigt. Das ist aber nicht Alles. Was man als Standard bezeichnen könnte, ist hier gegeben: die Unterstützung mehrerer Sprachen, externe wie interne Links, auch auf andere News-Artikel, und News-Kategorien. Die Artikel werden nach einigen Tagen automatisch archiviert und über die interne Suchfunktion gefunden. Die Nachrichten können als RSS0.91 oder RSS2 Feeds exportiert werden.

Screenshot
Variables News-System

Webshop
Eigene Produkte mit Beschreibung und Bild, ein Einkaufswagen für die ausgewählten Produkte des Kunden und eine übersichtliche Auflistung der Bestellungen sind Pflicht und auch in diesem Fall Bestandteil der Extension. Es kommt aber noch besser:

Der Prozentsatz der Steuer kann je Produkt ein anderer sein. Ein Rabattsystem ermöglicht den kundenspezifischen Preisnachlass. Rechnungen werden automatisch generiert, wobei die verschickte eMail Anlagen wie etwa die AGB mitführen kann. Ebenfalls nicht selbstverständlich sind Varianten je Produkt, etwa verschiedene Größen oder Farben eines T-Shirts, sowie die Limitierung von Zahlungsmethoden pro Kundengruppe. Sicher ist Sicher: Vor dem Absenden der Bestellung müssen die AGB bestätigt werden. Die Summe der Merkmale dieser Extension haben selbst manche kommerzielle Webshops nicht zu bieten.

Screenshot
Ein Shop mit vielen Fähigkeiten

Newsletter abonnieren
Wer seinen Besuchern einen oder mehrere Newsletter anbieten möchte, nutzt die Newslette- Extension. Die Anzahl der Kategorien ist nicht begrenzt. Bei mehreren Newslettern kann der Besucher per Checkbox mitteilen, welche er denn gerne hätte. Vom Backend aus kann die CSV-Liste der Empfänger zum Senden der Mail im Mail-Programm genutzt werden. Diese Erweiterung erlaubt eine „Dual-Mode Subscription“, so hat man die Wahl, ob die Abonnenten Front-end User oder „normale“ Besucher sind.

Screenshot
Newsletter zur Kundenbindung

Flash Header
Die „Flash Header Extension“ schafft die Voraussetzungen für SWF-Dateien, die zum Beispiel als Überschriften eingesetzt werden können. Die Kommunikation zwischen Typo3 und Flash erfolgt über XML. Hat der Besucher der Website kein Flash installiert, wird automatisch ein Bild als Ersatz angezeigt (im Beispiel das vierte Bild).

Screenshot
Ein Bild sieht man immer, ob Flash oder nicht

Drop-Down Sitemap
Eine Mischung aus HTML, CSS und Javascript sorgt für diese Platz sparende Sitemap. Den Inhalten der Website folgend, bildet die Sitemap einzelne Bereiche in Sektionen und Untersektionen ab, die jeder Zeit einzeln „versteckt“ werden können, wie in der Abbildung zu sehen ist.

Screenshot
Eine schicke Sitemap

Galerie
Eine Bildgalerie für Typo3 darf nicht fehlen. Es geht sogar besonders einfach. Es werden diverse Optionen zur Bildanzeige wie Effekte, Qualität und Größe angeboten. Auf Wunsch kann der Besucher die Anzahl der gleichzeitig angezeigten Bilder über ein Drop-Down-Menü beeinflussen. Weitere Menüs bieten Effekteinstellungen oder die Einschränkung auf eine bestimmte Größe des Fotos.

Screenshot
Bilder, Bilder, Bilder

Die Zahl der möglichen Erweiterungen geht längst in die Hunderte. Doch nicht alle laufen stabil und kaum eine hat eine Dokumentation zu bieten. Hier braucht es dann eine gute Portion Erfahrung im Umgang mit dem System.

Erstveröffentlichung 19.04.2005

Kategorien
CMS Programmierung

Typo3: Extensions

von Jörg Drzycimski

Typo3 ist mit 15MB schon eine stattliche Sammlung von Scripts und Funktionen. Trotzdem gibt es Anforderungen, die nicht durch die Standard-Distribution abgedeckt werden. Die Lösung hierfür heissen Extensions, und sorgen dafür, dass Typo3 bis in das kleinste Detail anpassbar ist.

Typo3 ist ein OpenSource CMS, dass sich durch den Benutzer erweitern oder anpassen lässt. Trotzdem wird es in der Community nicht gerne gesehen, wenn wie bei anderen GPL-Produkten Änderungen am Core durchgeführt werden. Spätestens beim nächsten Update sind diese Änderungen wieder weg, und somit auch sehr pflegeintensiv. Der Ansatz von Typo3 geht über sogenannte Extensions, die die Funktionalität erweitern, und auch über Updates hinaus noch verfügbar sind.

Der Vorteil liegt auf der Hand: es gibt einige wenige feste Core-Entwickler, aber eine grosse Community, die zu Typo3 beisteuert, ohne die Funktion des Cores zu gefährden. Die Extensions sind auf typo3.org im sogenannten Extension Repository (TER) abgelegt. Jeder registrierte User kann dort eigene Extensions hochladen, um sie für andere User zugänglich zu machen, jeder User von Typo3 kann die Extensions installieren, auch ohne Registrierung.

Installation
Die Installation einer Extension wird im Backend von Typo3 durchgeführt. Dort gibt es im Tool-Modul einen Extension Manager, der sowohl bereits geladene, als auch verfügbare Extensions anzeigt. Durch eine Verbindung zum TER wird gewährleistet, dass immer die neusten Versionen der Extensions zur Installation bereitstehen.

Als Beispiel bietet sich die Extension „Indexed Search“ an, die den gesamten Site-Inhalt indexiert und durchsuchbar macht. Über entsprechende Plugins für die Indexed Search sind sogar PDF- und Word-Dokumente indexierbar. Im Extension Manager klickt man dazu auf „Available Extensions to install“, und wählt dann die Extension „Indexed Search Engine“ im Frontend-Bereich aus.

Screenshot
Installation im Extension Manager

Funktion
Nachdem die Extension installiert und die Datenbank erweitert wurde, ist die Extension nun als Content Modul für die Website verfügbar. Man kann dieses Modul nun auf einer neuen Seite „Suche“ als „Neuen Seiteninhalt“ einfügen. Dazu wählt man das Element „Allgemeines Plugin“, und wählt die „Indexsuche“ aus.

Screenshot
Seiteninhalt „Suche“

Um die Seiten indexierbar zu machen, fehlt noch zwei Zeilen im Setup des Templates, eine für den Index, eine weitere für die Sprache des Moduls. Darüber können auch bestimmte Seiten oder Bereiche von der Suche ausgenommen werden.

  # Default PAGE object:
    page = PAGE
    page.typeNum = 0
    #Indexierung erlauben
     page.config.index_enable = 1
    page.config.language = de
     ... weitere Anweisungen ... 

Oben: Der erweiterte TypoScript-Code im Setup des Templates

Ein kleines Manko: die Seiten werden erst indexiert, wenn sie aufgerufen werden. Es empfiehlt sich, die Site einmal kurz durchzuklicken, um die Indexierung durchzuführen. Das Ergebnis, also der Index, ist dann in einem Extra-Tool-Punkt „Indexierung“ verfügbar.

Screenshot
Index der Seiten

Nun können alle Seiten durchsucht werden. Die automatisch generierte Search Box bietet über die einfache Suche hinaus noch eine erweiterte Suche an, die Suchwörter AND/OR verknüpft, oder die Darstellung des Suchergebnisses beeinflusst.

Screenshot
Erweiterte Suche

Fazit
Der Funktionsumfang von Typo3 kann mit vielen kleinen Tools erweitert werden, die dem Webmaster den Umgang mit dem CMS erleichtern. Die „Indexed Search“ ist eine wichtige Funktion bei grösseren Websites, und Extensions wie „News“ oder „Calendar“ sorgen dafür, dass selbst bei professionellen Websites und Portalen Typo3 den Anforderungen gerecht wird.

Erstveröffentlichung am 04.02.2005

Kategorien
CMS Programmierung

Typo3: Designvorlagen und CSS

von Jörg Drzycimski

Moderne grafische Designs umzusetzen erfordert bei grossen CMS häufig viel Arbeit und Programmier-Know-How. Das Open Source CMS Typo3 bietet einen einfachen und schnellen Weg: externe Designvorlagen.

Gerade in großen Agenturen, wo ein Screendesigner die Vorlagen liefert, sind die Anforderungen an eine Website sehr komplex, und die Umsetzung in einem CMS bereitet dem Webdesigner häufig Probleme. Der einfachste und schnellste Weg, eine Site unter Typo3 aufzubauen, führt über Designvorlagen, so genannte Templates.

Hierbei handelt es sich um nichts anderes als eine mittels Photoshop und eines HTML-Editors erstellte HTML-Datei. Header-Grafiken, Farb-Schemata und Content Container lassen sich dabei beliebig mit Typo3 austauschen. Die Teile der Website, die sich von Seite zu Seite ändern sollen – wie beispielsweise Texte oder Untermenüs – werden in der Designvorlage durch so genannte Marker oder Subparts ersetzt. Dieses geschieht direkt im HTML-Quellcode. Der Trick ist denkbar einfach: der HTML-Parser von Typo ersetzt die Marker und Subparts in der Designvorlage durch den Teil, der nachher direkt im CMS-Interface eingegeben wird, und sendet ihn an den Browser.

Screenshot
Einfaches Design mit Logo, Navigation, Farbschema und Content

Marker werden meistens für einfache Anweisungen benutzt, wie zum Beispiel das dynamische Einbinden von Grafiken oder Hintergrundfarben. In diesem Fall bietet sich die Hintergrundfarbe der Tabellenzellen an. Marker werden in TypoScript mit drei Rauten am Anfang und Ende markiert: ###COLOR###. Mit den Markern können sowohl einzelne HTML-Attribute in den Tags, als auch komplette Tags dynamisch generiert werden. Typo3 ersetzt diese dann mit Plain Text.

Das ist auch interessant, um Tags CSS-Klassen zuzuweisen, die in einem externen Stylesheet definiert sind.
Subparts hingegen werden dazu verwendet, dynamischen Content zu liefern, wie zum Bespiel Text oder Menüs. Der Subpart wird im HTML-Quellcode mit HTML-Kommentaren und drei Rauten eingebettet, also auf beiden Seiten der Stelle, an der der Subpart erscheinen soll:

<!–start of subpart: ###TEXT### –>Text<!– end ###TEXT### –>

Um Typo jetzt noch mitzuteilen, welchen Teil der Designvorlage es bearbeiten soll, muss am Anfang und Ende der Datei eine Anweisung dafür eingefügt werden:

<!– ###DOCUMENT_BODY### –>

  <body>
    <!--###DOCUMENT_BODY### -->
    <table width="100%" border="0" cellpadding="4">
    <tr>
    <td colspan="3" bgcolor="#000000">###LOGO###</td>
    </tr>
    <tr>
    <td height="10" colspan="3" bgcolor="###COLOR###"> </td>
    </tr>
    <tr>
    <td width="200" bgcolor="###COLOR###">
    <!-- ###MENU### -->Menu<!-- ###MENU### -->
    </td>
    <td bgcolor="#FFFFFF">
    <!-- ###TEXT### -->Text<!-- ###TEXT### -->
    </td>
    <td width="150" bgcolor="###COLOR###">
    </tr>
    </table>
    <!--###DOCUMENT_BODY### -->
    </body> 

Oben: Der HTML-Quelltext der Designvorlage

Nach dem Anlegen der Seiten und der Inhalte muss nur noch das Typo-Template angelegt werden, um den Seiteninhalt an die richtigen Positionen im HTML-Template zu setzen. Der in Typo3 verwendete Begriff „Template“ ist etwas verwirrend, beim Typo-Template handelt es sich – im Gegensatz zum bisher gezeigten HTML-Template – um ein Grundgerüst für den HTML-Parser, das den Seitenaufbau steuert. Das Haupt-Template, das für alle Seiten samt Unterseiten gilt, wird auf der Rootebene des Pagetrees eingefügt. Um beispielsweise abweichende Farbschemata oder Grafiken für Unterseiten zu definieren, verwendet man neue Typo-Templates auf der jeweiligen Ebene im Pagetree, die nach dem Prinzip der Vererbung gezielt nur einzelne Werte überschreiben.

Die Templates benutzen TypoScript. Im Prinzip ist es keine echte Script-Sprache, sondern Anweisungen, die der Typo-Parser ausführt. Der folgende Code muss im Setup-Feld des Templates eingesetzt werden:

       # Default PAGE object:
    page = PAGE
    page.typeNum = 0
    # Ext. Stylesheet
    page.stylesheet = fileadmin/templates/styles.css
    # Menü
    temp.menu = HMENU
    temp.menu.1 = TMENU
    temp.menu.1 {
     NO {
      ATagParams = style="font-family: Arial; text-decoration: none;"
      allWrap = |<br>
      }
     }
    page.10 = TEMPLATE
    page.10 {
     #Haupt-Template einbinden
     template = FILE
     template.file = fileadmin/templates/template.html
     workOnSubpart = DOCUMENT_BODY
     # MARKER
     # Logo Grafik
     marks.LOGO = IMAGE
     marks.LOGO.file = fileadmin/templates/bulo-neg-plus.gif
     # Tabellenfarbe
     marks.COLOR = TEXT
     marks.COLOR.value = #FFFF00
     # SUBPARTS
     #Hauptnavigation
     subparts.MENU < temp.menu
     #Inhalt
     subparts.TEXT < styles.content.get
    }

Oben: Der TypoScript-Code im Setup des Templates

Die Namen vor dem Gleichheitszeichen sind feste Variablennamen, die Typo benutzt, um bestimmte Elemente zu identifizieren. So werden im Code zum Beispiel Marker mit „marks“, Subparts mit „subparts“ und Templates mit „template“ angesprochen.

Um in Typo3 Cascading Style Sheets zu verwenden, gibt es zwei verschiedene Ansätze, die am besten in Kombination arbeiten. Zum einen führt der Weg über eine Extension, die man über den Extension Manager installieren muss. Die Extension heisst „CSS Styled Content“, und wird im Template in der Box „Include static (from extensions)“ integriert.

Screenshot

Einbindung des „CSS Styled Content“

Die zweite Variante führt über externe Stylesheets. Diese werden, wie im TS-Code oben gezeigt, über „page.stylesheet = [Pfad/Datei]“ eingebunden. Die Extension sorgt dafür, dass Typo3 seinen Content mit CSS formatiert, die in einem Stylesheet in dem Extension Directory abgelegt sind. Ideal nimmt man sich die benötigten Klassen aus diesem Stylesheet, und fügt diese in dem eigenen Stylesheet mit neuen Attributen ein. So wird zum Beispiel das Content Element Text „Normal“ mit der Klasse „bodytext“ definiert, und Image Text mit „csc-caption“.

       p.bodytext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
    }
    p.csc-caption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    }
    h1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 110%;
    font-variant: small-caps;
    font-weight: bold;
    } 

Oben: Teil des externen CSS

Weitere Möglichkeiten, Content-Elemente zu formatieren, sind die TypoScript-Anweisungen „wrap“ oder „params“ im Setup, die bestimmten Tags Parameter (zum Beispiel CSS-Klassen) übergeben, oder die Content Blöcke mit Tags umschließen (zum Beispiel P-Tags mit CSS-Klassen). Auch Style-Attribute für Tags lassen sich so mühelos integrieren.

Screenshot
Die fertige Website

Fazit
Typo3 ist ein CMS der Enterprise-Klasse, und trotzdem geeignet für jegliche Site-Grösse und -Anforderung. Selbst kleinere Sites können von den Eigenschaften profitieren, und die Umsetzung ist schnell erledigt. Bei größeren Sites oder komplexen Designvorlagen ist etwas Übung und Dokumentation notwendig, der oben beschriebene Ansatz über Templates, Marker und Subparts ist aber exakt gleich.

Erstveröffentlichung am 19.1.2005

Kategorien
CMS Programmierung

Typo3: Der schnelle Einstieg

von Jörg Drzycimski

Das Open Source CMS Typo3 ist eines der umfangreichsten und komplexesten Systeme am Markt, und so wird mancher Designer oder Webmaster schon verschreckt, bevor er Typo3 testet. Und obwohl Typo3 unzählige Funktionen bietet, ist eine Website schon innerhalb kürzester Zeit aufgebaut. Die Einsatzmöglichkeiten des CMS reichen dabei von der kleinen Vereins-Site bis zur großen Firmenpräsentation.

Die umfangreiche Dokumentation zu Typo3 lädt nicht gerade zum Lesen ein. Aber wie bei jeder Dokumentation ist auch bei Typo vieles erst dann interessant, wenn man komplexe Funktionen braucht. Die erste Website ist schnell aufgebaut, und kann später durch neue oder verfeinerte Elemente erweitert werden.

Das CMS arbeitet mit einem so genannten Sitetree, der der Ordneransicht des Windows Dateibrowsers ähnelt. Nachdem man die Installation abgeschlossen hat, ist erstmal nur die leere Top-Hierarchie vorhanden. Die Top-Hierarchie stellt allerdings nicht eine Website dar, sondern vielmehr den obersten Level des Trees, unter dem man mehrere Websites – auch mit völlig verschiedenen Domains und Designs – in einer Typo-Installation anlegen kann. Alle Seiten, die man anlegt, werden im Pagetree nach Hierarchie gespeichert. So behält man auch sehr verschachtelte Sitestrukturen und mehrere Websites im Überblick.

Zuerst muss eine Seite angelegt unterhalb des Toplevels angelegt werden, die dann im Prinzip die „Homepage“ der Website darstellt. Im Webmodul „Seite“ (linker Frame) bekommt man durch einen Klick auf das Symbol in der Treeansicht (mittlerer Frame) ein kontext-sensitives Menü, und über „Neu“ eine Auswahl an möglichen neuen Datensätzen. Ein Klick auf „Seite“ in der Datensatzauswahl (rechter Frame) ruft die Eingabemaske für den Pageheader der neuen Seite auf, in dem man die Seiteneigenschaften festlegt.

Screenshot
Sitetree rechts und Pageheader-Interface links

Die neue Seite wird im Frontend allerdings noch nicht funktionieren, da ein sogenanntes Template fehlt. Dieses kann man über das Webmodul „Template“ durch „Create template for a new site“ anlegen. Schaut man sich das Ergebnis im Frontend an (Kontextmenu->Ansehen), wird man mit dem weltberühmten „Hello World“ begrüßt: Template erfolgreich eingefügt.

Nun braucht die Website noch einige Seiten. Der einfachste Weg dorthin führt über das Webmodul „Funktionen“, mit dem man gleich mehrere Seiten anlegen kann. Diese Seiten werden unterhalb der „Dr. Web Plus“ Hierarchie erzeugt, die den Rootlevel der Website darstellt. Im Webmodul „Liste“ werden nun alle neuen Seiten inklusive Template dargestellt.

Screenshot
Sitetree in der Listenansicht

Über das Kontextmenü kann man jetzt sowohl neue (Unter-) Seiten, als auch Seiteninhalt anlegen. Für den Inhalt stehen 4 Blöcke zur Verfügung: Left, Content, Right und Border. Der Inhalt der einzelnen Blöcke ist unbegrenzt und in der Art variabel, es lassen sich also zum Beispiel Texte, Tabellen und Bilder in jedem Block einfügen. Jeder Block lässt sich durch einen Befehl im TypoScript ansprechen, und auf der Seite darstellen. Soll ein Teil des Inhalts in einem anderen Block erscheinen, kann man diesen zwischen den Blöcken verschieben. Der Inhalt eines Blocks wird sequentiell abgearbeitet, aber auch hier kann die Reihenfolge nachträglich geändert werden.

Der Seiteninhalt wird komfortabel über einen Rich Text Editor angelegt, in dem auch grundlegende Formatierungen wie Bold, Italic, Listen und Tabellen eingefügt werden können.

Screenshot
Rich Text Editor im WYSIWYG Modus

Nach dem Anlegen verschiedener Seiteninhalte wird man im Frontend leider immer noch mit „Hello World“ begrüsst. Nun beginnt die Arbeit am TypoScript im Setup des Templates. TypoScript ist keine echte Scriptsprache, sondern eine Ausgabeanweisung für den HTML-Parser von Typo3. Das Template sorgt dafür, dass der Inhalt der Seiten im Frontend ausgegeben wird, und zwar nach den Formatierungen und Anweisungen, die man im Template erstellt.

 # PAGE Objekt definieren
    page = PAGE
    page.typeNum = 0
    # Menü aus allen Seiten erzeugen
    temp.MENU = HMENU
    temp.MENU.1 = TMENU
    temp.MENU.1 {
    wrap = <p align="left" style="background-color: Yellow;">|</p>
    NO {
    ATagParams = style="font-family: Arial; font-weight: bold; text-decoration:
    none; color: Black;"
    allWrap = &nbsp;|&nbsp;
    }
    }
    # Erstes Objekt: Menü
    page.10 < temp.MENU
    # Zweites Objekt: alle Inhalte aus Block Content
    page.20 < styles.content.get

Oben: Code im Setup des Templates

Der PageType 0 bezieht sich auf die Version, die im Frontend angezeigt wird, in diesem Fall normales HTML. Dieses kann zum Beispiel durch die PageTypes für Druckversion oder PDF erweitert werden.

Dann wird das Menü definiert. Die TypoScript-Anweisung wrap umschliesst das gesamte Menü mit dem P-Tag, das auch Styles oder andere HTML-Attribute enthalten darf. Das Pipe-Symbol (|) stellt dabei den Link dar. NO ist der Normalzustand des Links, es gibt auch ACT für den aktiven Link oder IFSUB, falls der Link Unterpunkte enthält.

Am Ende werden die Objekte in die Seite eingefügt. Die Zahlen 10 und 20 beziehen sich dabei auf die Reihenfolge der Darstellung auf der Seite, die Spitzklammer fügt den Inhalt in das Seitenobjekt ein. Damit wird also erst das Menü dargestellt, und dann der Inhalt der Seite aus dem Block Content eingesetzt (Block „Left“ wäre styles.content.getLeft, alle anderen analog).

Screenshot
Website im Frontend

Mit den Anweisungen wrap und params lässt sich die Website wie eine HTML-Seite designen, es gibt im TypoScript auch Anweisungen zu Grafiken, Tabellen, direktes HTML et cetera, so dass dem Design für das Frontend keine Grenzen gesetzt sind. Für aufwendigere Layouts empfiehlt sich allerdings der Einsatz von externen Designvorlagen und Cascading Stylesheets. Auch diese kann Typo3 verarbeiten.

Fazit
Es lohnt sich auch schon bei kleineren Sites, Typo3 einzusetzen, und bei geringen Anforderungen an Design und Layout ist eine neue Website innerhalb kürzester Zeit aufgebaut.
Die Möglichkeiten, die man sich damit eröffnet, sind allerdings unbegrenzt. Längerfristig wird man das ein oder andere Tutorial nicht vermeiden können, aber dieser Ansatz und etwas Talent in HTML und strukturierter „Programmierung“ geben den richtigen Impuls. Die Typo3-Website hält viele Tutorials, Dokumentationen und sogar Video-Lehrgänge für alle, die tiefer in das CMS eindringen wollen, kostenlos parat.

Kategorien
CMS Programmierung

Content Management Systeme

von Thomas Mergen

Aktuelle und hochwertige Inhalte, Content genannt, sind die Basis für profitable Online-Geschäfte. Die Zeiten von statisch erzeugten Internetseiten sind definitiv vorbei. Dynamisch erzeugter Content ist Stand der Technik. Doch Inhalte müßen verwaltet werden. Ein Content-Management-System (CMS) muß also her.

Doch mit der Entscheidung für ein CMS tun sich viele Site-Betreiber schwer. Bei Preisen von bis zu 100.000 Euro und mehr für ein Lizenz, stellen sich viele Site-Betreiber die Frage ob ein so teueres Sytsem für die Verwaltung von Online-Inhalten benötigt wird. Die nicht ganz billigen Betriebskosten fallen ebenfalls permanent an. So ist es ganz natürlich, das Site-Betreiber und Online-Dienstleister nach kostengünstigen Alternativen suchen, um ihren Online-Content zu verwalten.

Derzeit bilden sich 3 grundsätzliche Lösungsansätze zur Entwicklung eines CMS heraus: Kauf eines fertigen CMS-Systems, Aufsetzung eines CMS auf Open-Source-Basis oder der Einsatz eines individuellen CMS. Jedes dieser CMS-Strategien ist konzeptionell anders gelagert und hat seine Stärken und Schwächen.

Lizenz-CMS – installieren und loslegen
Die Herangehensweise beim Einsatz eines lizenzierten Kauf-CMS ist nicht anders als der Kauf eines Office-Paketes oder einer Buchhaltungssoftware. Nach Prüfung der einzelnen Leistungsparameter wird sich für die eine oder andere Software entschieden. Die Applikation wird installiert und kann nun mit Inhalten gefüllt werden. Soweit so gut. Probleme treten meist beim Einbinden von Fremdmodulen und bei der Wartung (wer betreut das System, wenn die Entwicklungsfirma Konkurs anmeldet?) auf. Die Entwicklung von eigenen Designs ist häufig eine Schwachstelle der Lizenz-CMS-Systeme.

Open-Source-CMS – frei, flexibel und dynamisch
Beim Einsatz von Open-Source-Software wird ein frei verfügbares, kostenloses Produkt (frei im Sinne von frei nutzbar, weitere Infos zu Open-Source-Lizenzen finden Sie bei der GNU) auf dem eigenen Webserver installiert, eingerichtet und Inhalte eingepflegt. Der Unterschied zur kommerziellen Lizenz-Software ist, dass der Quellcode des CMS offen zugänglich ist und das CMS individuell weiterentwickelt werden kann.

Screenshot
Innenansicht von Typo3

Man ist also nicht an ein Unternehmen gebunden, sondern kann sein CMS mit entsprechenden Dienstleistern individuell weiterentwickeln. Nachteilig ist der höhere Aufwand für Konzeption und Dokumentation. Dafür fallen keine Kosten für den Kauf der Software und deren Updates an.

Individuelles CMS – The King of Content
Ein den eigenen Bedürfnissen und Strategien entwachsenes CMS ist die ultimative Messlatte für schnelle, zeitgemäße Umsetzung von eigenem Content im Internet, der elektronischen Kommunikation überhaupt. Hier bestimmen betriebsinterne und branchentypische Parameter die Umsetzung des CMS. Das individuelle CMS ist somit die optimale Umsetzung der betrieblichen Online-Strategien.

Der vielfach erhobene Einwand, das solche Systeme teuer und wartungsintensiv sind, kann nicht pauschal gelten.

Wenn man die vielen Module von Lizens-CMS zum Maßstab nimmt, wird ein eigenes CMS sicher teuerer als ein gekauftes Lizenz-System. Es stellt sich jedoch die Frage ob man alle Module benötigt, die Lizenz-Produkte anbieten. Außerdem müssen bei der Kalkulation von Kauf-CMS die Folgekosten (Updates, Schulungen usw.) einkalkuliert werden.

Bei einem eigenen CMS werden auf Basis eines Online-Konzeptes nur die Inhalte umgesetzt die wirklich benötigt werden. Ein eigenes CMS ist, wenn die entsprechenden Ressourcen zur Verfügung stehen, sicher die profitabelste und zukunftsorientierteste Lösung.

Für welchen Lösungsansatz Sie sich entscheiden hängt von vielen Faktoren ab. In einer Zeit, in der der technische Fortschritt so rasant ist, das die Killer-Applikationen von vor 3 Jahren heute keine Zeitungsmeldung mehr wert sind, ist sicher entscheidend ob man mit dem CMS auch in 3-5 Jahren Inhalte und digitale Services über ein zentrales System anbieten kann. Bietet das CMS Schnittstellen zu den Basistechnologien wie Mobil-Internet, abgesicherte Netzwerke, XML und P3P? Können Telefonnetze (Voice over IP) und spezielle Webservices problemlos in das CMS integriert werden?

Kategorien
CMS Programmierung

Typo3: Der CMS-Riese

Typo3 gehört zu den wohl umfangreichsten und mächtigsten Content Management Systemen und ist dennoch vollkommen kostenlos. Wer sich durch Installation und Einrichtung gekämpft hat, erhält zahlreiche praktische Funktionen wie das automatische Erzeugen von Grafiken und Menübuttons oder das Cachen von Datenbank-Inhalten, um Prozessorlast zu sparen.

Typo3 ist nämlich richtig hungrig. So wird ein Server mit mindestens 1 GHz Prozessor und 512MB RAM empfohlen. Die verschiedenen Server-Erweiterungen ImageMagick, Freetype und GDLib müssen in der Regel ebenfalls installiert werden, da sie nur selten gleich zu Beginn auf dem Webserver vorhanden sind.

Hierfür braucht es dann schon einen eigenen Webserver mit Root-Rechten, wenn der Webhoster keine Software-Installationen anbietet. Zahlreiche Dienstleister haben sich aber bereits auf Typo3 spezialisiert und bieten entsprechend vorbereitete Server an oder nehmen die Installation vor.

Screenshot
Backend: Hier kommt neuer Text hin

Das System ist in die Bereiche „Frontend“ und „Backend“ aufgeteilt. Im Backend können Sie den Text editieren, Bilder und Formatierungen hinzufügen oder wieder löschen und das Menü bearbeiten. Im Menü lassen sich neue Punkte erstellen oder vorhandene Löschen sowie einzelne Rubriken verschieben.

Dabei haben Sie die Wahl, ob Typo3 Text-Buttons oder Bilder, auch mit Schrift, erzeugen soll. Auch andere Bilder und Fotos lassen sich bequem einpflegen und von Typo3 in der Größe anpassen. Die Skalierung erfolgt dabei in der wirklichen Datei, nicht nur über die HTML-Attribute width und height. Das CMS nutzt den WYSIWIG-Editor des Internet Explorers, der zwar leicht verständlich ist, aber nicht gerade den saubersten Quellcode liefert. Über Umwege lässt sich das ausgleichen, indem man den Code über ein Modul übersetzen und bereinigen lässt.

Screenshot
Praktisches Menü: Link einfügen leicht gemacht

Das Frontend ist der Anzeigebereich, den jeder Besucher der Webseite sehen kann, die eigentliche, fertige Webseite also. Alle Änderungen im Backend werden später hier sichtbar. Bei großen Seiten mit vielen Besuchern sieht man aber, dass trotz des Zwischenspeicherns von Datenbank-Inhalten, Typo3 Server ein wenig behäbig mit der Darstellung von Webseiten sind.

Screenshot
Frontend: So sieht man eine Seite

Mit mehreren Redakteuren hat das System keine Probleme. Pro Benutzer lassen sich verschiedene Rechte zum Editieren und Schreiben vergeben, auf Wunsch kann ein Administrator die Inhalte erst nach einer Moderation veröffentlichen.

Screenshot
Sicherheit: Nicht jeder darf ändern

Die generierten URLs sind zunächst einmal dynamisch und mit vielen PHP-Variablen gespickt. Über das Rewrite-Modul des Apache-Servers lassen sie sich aber suchmaschinenfreundlich gestalten, was den Besucherzahlen zu gute kommt. Praktisch ist die gleich eingebaut Suchfunktion, die später alle Inhalte der Typo3-Webseite durchsuchen kann. Hier muss dann nicht noch eine extra Software installiert werden, die vielleicht nicht immer ganz optimal mit dem CMS zusammen arbeiten könnte.

Typo 3 ist ein großes und mächtiges Content Management System, das vor Funktionen fast überquillt und durch zahlreiche Module noch erweitert werden kann. Open Source spart Anschaffungskosten und sorgt für eine stete Weiterentwicklung. 36000 Installationen soll es schon geben. Dennoch taugt das System nicht für jeden.

Typo3 ist von Programmierern für Programmierer entwickelt, eine schnelle, einfach Installation und Benutzung ist vor Lektüre verschiedener HTML- oder PDF-Handbücher, die oft über 100 Seiten füllen, kaum möglich. Läuft es aber einmal, ist es an Funktionen und Möglichkeiten kaum zu übertreffen.