Kategorien
CMS Programmierung Tutorials

CMS Joomla: Standard-Templates individuell abwandeln

Kristoff Svandson

Joomla! ist ein beliebtes Open-Source Content-Management-System (CMS) mit vielen Möglichkeiten. Eine der Stärken von Joomla ist die riesige Anzahl sowohl freier als auch Premium Templates und und Erweiterung. Diese Template können Sie ganz einfach herunterladen und installieren. Aber auch diese Arbeit müssen Sie sich nicht machen, denn das Installationspaket von Joomla enthält mehrere verschiedene Templates.

Die meisten Einsteiger fangen mit einem davon an und sind damit zunächst zufrieden. Nach einiger Zeit kommen jedoch Änderungswünsche auf. Dieser Artikel führt Sie durch eins der Standardtemplates von Joomla und zeigt Ihnen, wie Sie es für Ihre Website modifizieren zu können.

In Joomla 1.5 verfügbare Templates

Joomla 1.5 beinhaltet drei Frontend-Templates. Eines von ihnen, Beez, wird lediglich als Beispiel dafür, wie man ein Template aufbaut, zur Verfügung gestellt (es ist scheußlich).

Die anderen zwei, JA Purity und Rhuk Milkyway, sind schon eher brauchbar.

Das Template Rhuk Milkyway beinhaltet abgerundete Ecken in seinem Design. Es wird häufig als Framework verwendet, um Erweiterungen für Joomla von Drittanbietern vorzuführen. Auch JA Purity weist eine Reihe von Farbthemen und Templateparametern für die Anpassung der Breite des Templates, des Logotyps (Text oder Bild) und anderer Optionen des Templates auf.

Tools, die Sie brauchen werden

Für dieses Tutorial werden Sie den Firefox browser. Sie werden außerdem die Firefox-ErweiterungFirebug add-on for Firefox (info on getting started) herunterladen und installieren müssen.

Firebug integriert sich in Firefox und gibt Ihnen beim Browsen eine Fülle von Entwicklungstools an die Hand. Sie können auf jeder Webseite live CSS, HTML und JavaScript editieren, debuggen und überwachen, was später praktisch sein wird, wenn Sie funktionierenden Code in Ihr Joomla Stylesheet implementieren. Firebug ist ein unschätzbares Werkzeug für Webseitenentwickler und -gestalter und unverzichtbar für dieses Tutorial.
Sie werden darüber hinaus einen HTML-Texteditor benötigen, Dreamweaver oder ähnlich, und auch FTP-Zugriff auf Ihre Joomla-Dateien.
Firebug

Sie werden darüber hinaus einen HTML-Texteditor benötigen, Dreamweaver oder ähnlich, und auch FTP-Zugriff auf Ihre Joomla-Dateien. Eine weitere Option ist, die kostenlose Komponente eXtplorer für Joomla zu installieren. Das ist ein Dateimanager, der Sie Dateien direkt im Browser bearbeiten und speichern lässt.

Wählen Sie Ihr Standardtemplate

In diesem Artikel werde ich das Template JA Purity verwenden, das, wie ich finde, für einen Anfänger am einfachsten zu modifizieren ist. Wenn Sie das Template aktivieren, wird es etwa so aussehen:
The JA Purity template

Wie Sie sehen können, müssen hier einige Elemente verändert werden. Gott sei Dank ist dieses Template flexibel und leicht zu verstehen.

Das Template verstehen

Das Joomla-Template ist aus mehreren Dateien zusammengesetzt. Diejenigen, die wir in diesem Tutorial berücksichtigen müssen, sind:

  • Die Hauptindexdatei
/templates/ja_purity2/index.php
  • Die Haupttemplatedatei
/templates/ja_purity2/css/template.css
  • Die CSS-Menüdatei
/templates/ja_purity2/css/menu.css
  • Die Templatedatendatei
/templates/ja_purity2/templateDetails.xml

Mit einer Kopie arbeiten

Wenn Sie in der Lage sein wollen, irgendwelche Änderungen zurückzufahren, machen Sie bevor Sie beginnen eine Kopie des Templates. Auf diese Weise können Sie immer wieder zurück zum Original gehen und dort den Code kopieren, wenn Sie etwas vermasseln sollten. Außerdem könnten Sie ohne eine Kopie Ihre Modifikationen überschreiben, wenn Sie den Standardordner verwenden und an irgendeinem Punkt Ihre Joomla-Installation aktualisieren.

Kopieren Sie den Template-Ordner und geben Sie ihm einen neuen Namen. Für dieses Tutorial werde ich den Ordner ja_purity2 nennen.

Jetzt haben Sie auf Ihrer Joomla-Website zwei Kopien des Templates. Wenn Sie auf Extensions → Template Manager gehen werden Sie sehen, dass beide Vorlagen JA Purity heißen. Das ist nicht gut, denn wir werden nicht so leicht sagen können, mit welcher wir gerade arbeiten:

Same name

Um das kopierte Template anders zu benennen, müssen Sie die XML-Datei des Templates editieren.

Öffnen Sie die Datei unter /templates/ja_purity2/templateDetails.xml und ändern Sie den Namen. Dann speichern Sie die Datei.

Sie werden sehen, dass die Kopie im Ordner ja_purity2 nun den Namen JA_Purity Modified trägt. Nun wählen Sie das Optionsfeld auf der linken Seite Ihres Templates JA_Purity Modified aus und klicken Sie auf die Schaltfläche „Default“. Das wird Ihre Kopie als Template für die Website aktivieren.

XML file

You will see that the copy in the folder ja_purity2 now has the name JA_Purity Modified. Now, select the radio button to the left of your JA_Purity Modified template, and click the „Default“ button. This will activate your copy as the template for the website.

Default template

Auswählen, was zu modifizieren ist

Es gibt gute Gründe dafür, das Standardtemplate zu modifizieren. Vielleicht gefällt Ihnen die Struktur, aber Sie möchten der Website ein neues Design verleihen. Oder Sie haben bereits ein Logo und Markenfarben oder ein vollständiges Photoshopmodell, das Sie oder ein anderer Designer erstellt haben. Manche von Ihnen werden in Joomla eine bestehende Website neu erstellen und dabei das Design und die Elemente beibehalten müssen.

Wir werden die Elemente des Templates durchgehen und auch, wie sie modifiziert werden, damit Sie jedes Design, das Ihnen gefällt, erstellen können.

Template Overrides

Es gibt den Ordner /templates/ja_purity2/html/, in dem Template Overrides (außer Kraft gesetzte Templates) gespeichert werden. Im Detail auf Template Overrides einzugehen sprengt den Rahmen dieses Artikels. Wenn Sie mehr darüber wissen möchten, sehen Sie sich bitte meinen Blogbeitrag zu diesem Thema an.

Kurz gesagt setzen Template Overrides die Ausgabe von Joomlas Kernkomponenten und -modulen außer Kraft, ohne dass Sie den Kern hacken müssen. Das erlaubt es Ihnen, die Ausgabe der Inhaltskomponente außer Kraft zu setzen, die den Inhalt der Website anzeigt. Wenn der Kern von Joomla aktualisiert wird, bleiben Ihre Overrides unberührt. Wenn Sie die gleichen Dateien im Kern modifizieren, könnten sie von einem späteren Update von Joomla überschrieben werden. Template Overrides können auch für installierte Komponenten und Module verwendet werden.

Modulpositionen

Jedes Joomla-Template hat einen Satz von Modulpositionen. Das sind PHP-Abschnitte, die eines oder mehrere Module, die der Position zugewiesen sind, aufrufen.

Wir werden am Ende dieses Artikels weiter über Modulpositionen reden.

Modifizieren der Templateparameter

Das erste, was ich normalerweise tue, ist mir die Templateparameter im Joomla-Administrator anzusehen. Den finden Sie, wenn Sie sich in den Adminbereich von Joomla einloggen. Dann gehen Sie zu Extensions → Template manager → JA_Purity.

Auf der rechten Seite sehen Sie eine Liste mit Parametern. Diese sind einzigartig für das Template, denn sie werden vom Entwickler hinzugefügt. Die hier vorgenommenen Einstellungen werden in der Datei params.ini im Ordner /templates/ja_purity2/ gespeichert und beim Laden einer Seite von der Datei index.php erfasst.

Das Template JA Purity hat einige Optionen. Lassen Sie uns ein paar davon betrachten:

  • Logo type Hier können Sie entweder eine Bilddatei oder Text verwenden. Das Logobild muss im Ordner /templates/ja_purity2/ gespeichert werden und logo.png heißen. Das Standardlogo hat die Größe 207×80 Pixel.
  • Logo text Wenn Sie „Text“ als Logotyp auswählen, geben Sie hier Ihren Text ein.
  • Slogan Das ist die Textzeile, die unter dem Logo erscheint.
  • Horizontal NavigationType Hier haben Sie zwei Optionen: SuckerFish Menu und JAMoo Menu. Lassen Sie es im Moment bei SuckerFish Menu.
  • Template width Aus irgendeinem Grunde ist die Standardbreite des Templates 97%. Ich glaube nicht, dass ich einer Website jemals eine fließende Breite gegeben habe, zumindest nicht in den letzten 10 Jahren. ;) Ändern Sie die Einstellung auf „Specified in pixels“.
  • Specified width Geben Sie hier die Pixelanzahl ein, z.B. 980. Das wird die Breite des Templatecontainers sein.
  • Right modules collapsible function So schön sie ist, ich deaktiviere diese Funktion normalerweise, mit der der User die Module in der rechten Spalte verbergen kann. Ich kann wirklich nicht feststellen, dass sie häufig verwendet wird.

Die restlichen Parameter können für den Moment so bleiben, wie sie sind.

JA Purity parameters

Die Parameter in der Datei params.ini sehen so aus:

Params

So weit, so gut. Jetzt haben Sie alles eingestellt, was Sie ändern können, ohne in den Code zu gehen.

Sie werden einige Buttons im oberen Teil der Seite bemerken. Wie Sie sehen, haben Sie von hier aus direkten Zugang zu HTML und CSS. Es ist OK, das für schnelle Änderungen zu verwenden. Ich finde jedoch, dass diese Ansichten weniger flexibel sind als die Verwendung eines externen Editors, eines FTP-Zugangs oder der Komponente eXtplorer.

Template buttons

Ändern des Logos

Das Erste, was Sie tun möchten, ist Ihr eigenes Logo in das Template einfügen.

Laden Sie, um das Logo zu ändern, eine neue Bilddatei mit dem Namen logo.png in den Ordner /templates/ja_purity2/.

Wenn das Logo die gleiche Größe hat wie das Original, können Sie die Einstellungen belassen. Das Originallogo ist 207 x 80 Pixel groß:

Logo

Wenn Ihr Logo eine andere Größe hat, müssen Sie im CSS die Maße des Logos und des Headers ändern. In diesem Beispiel fügen wir ein Logo mit einer Breite von 270 Pixel und einer Höhe von 120 Pixel hinzu.

Wenn ich das Logo einfach in den gleichnamigen Bilderordner des Templates hochgeladen hätte, würde das so aussehen:

Logo

Damit das Logo richtig erscheint, muss ich das CSS sowohl an das Logo selbst als auch an den Container, der es aufnimmt, anpassen.

Sie können Firebug verwenden, um den Code für das Logo und den Header zu inspizieren. Machen Sie einen Rechtsklick auf das Bild des Headers, um das Kontextmenü erscheinen zu lassen und wählen Sie „Inspect element“ aus:

Inspect

Das Fenster von Firebug wird sich in Ihrem Browser öffnen und Sie werden so etwas wie das hier sehen:
Firebug

Mit Firebug können Sie einfach feststellen, wo das entsprechende CSS liegt und anfangen, mit Änderungen zu experimentieren. Sie können das CSS in Firebug ändern und die Änderungen sogleich sehen:

Firebug CSS

Hier haben wir das Hintergrundbild für .ja-headermask durch Klick auf das Symbol deaktiviert und die Höhe auf 120 Pixel eingestellt. Dass CSS füllt sich automatisch für Sie aus, was die Arbeit damit wirklich schnell macht.

Wenn Sie mit dem Experimentieren in Firebug fertig sind, können Sie die Änderungen permanent auf die CSS-Datei des Templates anwenden. Das spart viel Zeit, weil Sie nicht ständig hin und her wechseln müssen.

Um das CSS anzupassen, öffnen wir die Datei /templates/ja_purity2/css/template.css.

In Zeile 921 finden wir den folgenden Code:

#ja-headerwrap {
   background: #333333;
   color: #CCCCCC;
   line-height: normal;
   height: 80px;
}

#ja-header {
   position: relative;
   height: 80px;
}

In diesem Falle stellen wir sowohl die Höhe von #ja-headerwrap als auch von #ja-header auf 140 Pixel ein. Ich möchte etwas mehr Platz ober- und unterhalb des Logos lassen, daher habe ich dem #ja-header ein Padding-Top, einen Abstandhalter, hinzugefügt:

#ja-headerwrap {
 background: #333333;
 color: #CCCCCC;
 line-height: normal;
 height: 140px;
}

#ja-header {
   position: relative;
   height: 140px;
   padding-top:10px;
}

Der Header sieht nun so aus:
Logo

Sie sehen, dass der Header größer, das Logo aber abgeschnitten ist. Der Grund dafür ist, dass das Logo im des h1-Link-Tag enthalten und als Hintergrund eingestellt ist. Daher müssen wir die Größe des umschließenden Containers anpassen.

Weiter unten in der CSS-Datei finden wir diesen Code:

 h1.logo a {
 width: 208px;
 display: block;
 background: url(../http://www.smashingmagazine.com/wp-content/uploads/2010/08/logo.png) no-repeat;
 height: 80px;
 position: relative;
 z-index: 100;
 }

Ich werde die Breite auf 270 Pixel und die Höhe auf 120 Pixel ändern. Jetzt sieht das Logo richtig aus:

Wie Sie vielleicht bemerkt haben, ist das die Stelle in der CSS-Datei, wo der Pfad zum Logo gespeichert ist. Wenn Ihr Logo also online ist, würden Sie hier die URL eintragen. Das Standardbild befindet sich im Ordner /templates/ja_purity2/. Sie sehen, dass der Pfad zu dieser Datei relativ ist, der Entwickler hat das Format …/ verwendet, um die URL festzulegen. Um einen Ordner im Root der Website zu bestimmen, schreiben Sie aus /http://www.smashingmagazine.com/wp-content/uploads/2010/08/, gefolgt vom Dateinamen des Bildes.

h1.logo a {
 width: 270px;
 display: block;
 background: url(/http://www.smashingmagazine.com/wp-content/uploads/2010/08/adifferentlogo.png) no-repeat;
 height: 120px;
 position: relative;
 z-index: 100;
 }

Bilder im Header ändern oder entfernen

JA Purity hat eine eingebaute Rotationsfunktion für das Bild im Header. Sie können diese bei Ihren eigenen Bildern verwenden oder auch komplett entfernen. Um sie zu verwenden, erstellen Sie Bilder mit einer Größe von 600×80 Pixel. Laden Sie die Bilder in den Ordner /templates/ja_purity2/header/ hoch. Das Script liest die Bilder aus dem Ordner aus und lässt sie rotieren und blendet jedes Bild an beiden Seiten aus.

Header images

So schön das auch ist, Sie können die Bildrotation aus dem Header entfernen, wenn Sie möchten. Öffnen Sie die Datei index.php in einem Editor Ihrer Wahl und lokalisieren Sie den folgenden Abschnitt:

 <!-- BEGIN: HEADER -->
 <div id="ja-headerwrap">
 <div id="ja-header" class="clearfix" style="background:
url(<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/header/
<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'http://www.smashingmagazine.com/wp-content/uploads/2010/08/header'); ?>)
no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask">&nbsp;</div>

Die Bilder des Headers werden mit dem Hintergrundstil für #ja-header platziert. Die #ja-headermask agiert auch als Maske, um die Bilder an beiden Seiten auszublenden. Um die Bilder und die Maske des Headers zu entfernen, ändern Sie den Code dahingehend ab:

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">

<div id="ja-header" class="clearfix">

Im Prinzip entfernen wir den Hintergrundstil von #ja-header und entfernen #ja-headermask komplett.

Andere Elemente entfernen

Wenn wir schon einmal dabei sind, können wir auch gleich ein paar Elemente mehr entfernen. Im Header des Templates befindet sich ein Tool zur Änderung der Schriftgröße.

Font resizer

Kommentieren Sie es aus oder entfernen Sie es, wenn Sie es nicht brauchen:

 <!-- <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> -->

In der Fußzeile befinden sich auch zwei Schaltflächen für die Gültigkeitsprüfung von CSS und XHTML:

Buttons

Sie möchten das sicherlich auskommentieren oder den gesamten Abschnitt entfernen:

 <div class="ja-cert">
 <jdoc:include type="modules" name="syndicate" />

 <a href="http://jigsaw.w3.org/css-validator/check/referer" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
 <img src="<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />

 </a>
 <a href="http://validator.w3.org/check/referer" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">

 <img src="<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
 </a>

 </div>

Hindergrundfarbe des Headers ändern

Um dem Header eine andere Hintergrundfarbe zu geben, brauchen wir nur den Hexcode für die Hintergrundfarbe ändern. Für dieses Beispiel bin ich bei einem blauen Farbton mit dem Code #3E5E93 gewählt (okay, nicht gerade ein anmutendes Design, aber es verdeutlicht, worum es geht).

 #ja-headerwrap {
 background: #3E5E93;
 color: #CCCCCC;
 line-height: normal;
 height: 140px;
 }

Das verleiht dem Header diese blaue Hintergrundfarbe. Natürlich können Sie dem Header ein Hintergrundbild hinzufügen, wenn Sie das vorziehen.

Nun sieht unser Template etwa so aus:

Template blue

So wie es jetzt ist, läuft die Hintergrundfarbe durch den ganzen oberen Teil der Website. Wenn Sie in Firebug mit dem Cursor über #ja-header fahren werden Sie sehen, dass div auf der Seite hervorgehoben ist. Wir können hier mit einer anderen Farbe als der von #ja-headerwrap experimentieren.
Um das zu tun, ändern wir die Hintergrundfarbe von #ja-headerwrap auf transparent. Wir ändern auch die Hintergrundfarbe von ja-header in dieses Blau.

Jetzt sieht der Header so aus:

Strange header

Sieht ein bisschen seltsam aus oder nicht? Wir müssen den Schatten, der sich unter #ja-headerwrap befindet, entfernen. Das muss bei allen vier divs gemacht werden, die diesen Schatten als Hintergrundbild haben. Sie können sehen, wie das in Firebug aussieht:

Containerwrap

Sie werden feststellen, dass diese Hintergründe in zwei unterschiedlichen CSS-Dateien eingetragen sind: in template.css und in die Datei unter /templates/ja_purity2/styles/elements/black/style.css (sofern Schwarz die Farbe ist, die Sie möchten).

Um es einfach zu machen, hängen Sie den folgenden Code an das untere Ende der Datei style.css an (da er nach dem template.css geladen wird, wird er diese Stile überschreiben).

 #ja-containerwrap-fr,
   #ja-containerwrap,
   #ja-containerwrap2 {
   background-image:none !important;
   }

Zusätzlich zum Entfernen der Schatten fügte ich ein wenig Padding und einige Ränder um den Hauptcontainer herum hinzu. Ich habe hier außerdem das Hintergrundbild entfernt:

  #ja-container2 {
    border-left:1px solid #DDDDDD;
    border-right:1px solid #DDDDDD;
    padding:20px 10px !important;

    }

Was uns dieses Ergebnis liefert:

Finished template

Nicht gerade ein Meisterstück des Designs, aber auf jeden Fall besser als das, womit wir angefangen haben. Grenzen sind Ihnen nur durch Ihre Fantasie gesetzt.

Ein bisschen weitergehen

Zu diesem Zeitpunkt sollten Sie eine gute Vorstellung davon haben, wie Sie das CSS des Templates und andere Einstellungen an Ihre Bedürfnisse anpassen können.

Die obigen Tipps sind ziemlich grundlegend. Sie können Ihre Fähigkeiten erweitern, indem Sie lernen, wie Template Overrides, Module Positions und Module Chrome eingesetzt werden, um nur einige wenige zu nennen.

  • Template overrides Code, der die Standardausgabe eines Moduls oder einer Komponente überschreibt.
  • Module positions PHP-Abschnitte, die Module in das Template einbauen.
  • Module chrome Code, der die HTML- oder XHTML-Ausgabe eines Moduls kontrolliert. (Lesen Sie mehr auf der Website von Joomla.)

Sowohl Template Overrides als auch Module Chrome sind zu kompliziert für diesen Artikel, ich werde Ihnen jedoch zeigen, wie Sie dem Template eine Modulposition hinzufügen können.

Modulpositionen hinzufügen

Wie bereits erwähnt, hat jedes Joomla-Template eine Anzahl von Modulpositionen. Sie können die Modulpositionen in Ihrem Template anzeigen lassen, indem Sie die Parameter ?tp=1 an die URL anhängen.

Zum Beispiel zeigt Ihnen die Eingabe von http://www.joomla.org/?tp=1 die Modulpositionen auf Joomla.org.

Module positions

Beachten Sie, dass diese Funktion blockiert werden kann, indem der Datei .htaccess-Code hinzugefügt wird (also lassen Sie sich nicht verwirren, wenn Sie das auf einer Joomla-Website ausprobieren und es nicht funktioniert).

Die Modulpositionen in Joomla befinden sich in der Datei index.php des Templates.

Es gibt im Prinzip zwei Arten von Modulpositionen: eine reguläre Modulposition und die Ausgabe von Komponenten.

Die Ausgabe von Komponenten (zum Beispiel Joomla-Artikel, Ausgabe von Komponenten Dritter etc.) sieht so aus:

<jdoc:include type="component" />

Die regulären Modulpositionen sehen etwa so aus:

<jdoc:include type="modules" name="left" style="xhtml" />

name ist die „Position“, die Sie auswählen, Wenn Sie Ihre Module der Position zuweisen.

Menu parameters

Der style ist das Module Chrome oder der Ausgabestil, der auf diese Modulposition angewendet wird.

Der HTML-Code des Menüs besteht aus den Menüpunkten, umschlossen vom Modul Chrome:

  <div class="moduletable_menu">
  <ul class="menu">

    <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
    <li class="item2"><a href="#"><span>Contact</span></a></li>

  </ul>
</div>

Wir wollen das Modul Chrome jedoch nicht anzeigen, wenn ihm keine Module zugewiesen sind. Darum fügen wir eine if-Bedingung um die Modulposition herum hinzu. Das ist ein einfacher PHP-Abschnitt, der überprüft, ob der Position left ein Modul zugewiesen ist oder nicht:

    <?php if ($this->countModules('left')): ?>
    <jdoc:include type="modules" name="left" style="xhtml" />

<?php endif; ?>

Natürlich können Sie mehr Code einbauen, der angezeigt wird, wenn der Modulposition Module zugewiesen wurden. Der Entwickler von JA Purity hat etwas mehr Code hinzugefügt, um das Modul in seinem Design zu positionieren und auch einige Kommentare ergänzt:

 <?php if ($this->countModules('left')): ?>
   <!-- BEGIN: LEFT COLUMN -->
     <div id="ja-col1">
        <jdoc:include type="modules" name="left" style="xhtml" />

     </div><br />
   <!-- END: LEFT COLUMN -->
<?php endif; ?>

Das wickelt das Modul sauber in ein div mit dem Namen #ja-col1, was es Ihnen erlaubt, das Element mit dem CSS zu gestalten. Und das div wird nur angezeigt, wenn der Position left ein Modul zugewiesen ist.

Die endgültige Ausgabe sieht so aus:

<!-- BEGIN: LEFT COLUMN -->
  <div id="ja-col1">
    <div class="moduletable_menu">
      <ul class="menu">
        <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>

        <li class="item2"><a href="#"><span>Contact</span></a></li>
      </ul>
    </div>

  </div><br />
<!-- END: LEFT COLUMN -->

Mit dieser einfachen Methode können Sie Ihrem Template so viele Modulpositionen hinzufügen, wie Sie möchten. Sie könnten Positionen für Werbung haben, mehr Positionen für die rechten oder linken Spalten (um diese in mehr Spalten zu teilen) oder einfach eine Position für ein Template, das genau da keine Position hat, wo Sie eine brauchen.

Sie können auch Positionen hinzufügen, die Scripts enthalten, die Sie nicht im Frontend Ihrer Website anzeigen wollen. Ich habe zum Beispiel Modulpositionen am Ende des Tags head und am Anfang und Ende des Tags body hinzugefügt, um in der Lage zu sein, verschiedene Arten von Scripts zuzuweisen (Google Analytics, CrazyEgg etc.).

Die Position der XML-Datei hinzufügen

Damit eine neue Templateposition im Dropdown-Menü der Modulpositionen in den Modulen erscheint, fügen Sie sie der XML-Datei des Templates hinzu. Öffnen Sie die Datei noch einmal unter /templates/ja_purity2/templateDetails.xml und schauen Sie nach einem Abschnitt, der
heißt:

Template positions in the XML file

Fügen Sie zwischen
und eine weitere Zeile ein. Wenn Sie zum Beispiel die Position leftbottom ergänzen, dann fügen Sie der Datei
leftbottom
hinzu. Jetzt erscheint die Modulposition in der Parameteransicht der Module:

Leftbottom position

Tatsächlich brauchen Sie die Position nicht zur XML-Datei hinzufügen. Es reicht aus, den Namen der Position in das Positionsfeld zu schreiben. Auf jeden Fall ist es auch gut, sie in die XML-Datei einzutragen. Wenn der Position kein Modul zugewiesen ist, wird sie auch nicht in der Liste erscheinen.

Zusammenfassung

Natürlich haben wir nur an der Oberfläche dessen gekratzt, was mit Joomla-Templates machbar ist. Aber für den Anfang ist es schon eine ganze Menge.

Damit Sie den Überlick behalten, hier nochmals ein kurzer Abriss, wie Sie am besten vorgehen:

  • Inspizieren Sie mit Firebug das Element, das Sie ändern möchten.
  • Machen Sie diese Änderungen, wie immer, in einer Kopie Ihres Originals.
  • Nehmen Sie mit Firebug ein paar experimentelle Änderungen vor, um Ihre Einstellungen zu testen.
  • Wenden Sie das CSS auf das Stylesheet des Templates an.
  • Prüfen Sie die Einstellungen in allen wichtigen Browsern.

Viel Glück!

(mm)

Kategorien
CMS

TYPO3: Fotos von Flickr und Picasa oder interne Bildgalerien einbinden

Auch wenn TYPO3 sehr „mächtig“ ist und viele nützliche Funktionen biete – die Arbeit mit Fotos ist in diesem Content-Management-System keine reine Freude. Gerade Galerien lassen sich mit den Kernfunktionen von TYPO3 nur bedingt realisieren. Dank der Ausbaufähigkkeit von TYPO3 gibt es jedoch eine ganze Reihe einfacher und komfortabler Erweiterungen für ansprechende Bildgalerien. Sie können sowohl bestehende Fotostrecken von Flickr oder Picasa einbinden als auch eigene Fotos mittels Extension als Bildgalerie präsentieren.

Fotos von Flickr einbinden

Mit der Erweiterung „flickrset“ lassen sich einzelne Fotos und ganze Alben aus einem eigenen Flickr-Account auf einer TYPO3-Seite anzeigen. Voraussetzung ist ein API-Schlüssel von Flickr, mit dem man externen Zugriff zum eigenen Flickr-Account erhält. Es ist also nicht möglich, Fotos anderer Accounts anzeigen zu lassen.

Nach der Installation der Erweiterung muss der API-Schlüssel angegeben werden. Über den Konstanten-Editor (erreichbar über das Template-Modul) lässt sich der API-Schlüssel einstellen (Kategorie „FLICKRSET (1)“ wählen).

Konstanten-Editor
Der Konstanten-Editor

Außerdem muss das statische Template „flickrSet (flickrset)“ ins Template eingebunden werden (ebenfalls über das Template-Modul).

Alternativ lässt sich der Schlüssel auch über TypoScript einstellen. Alle weiteren Einstellungen lassen sich direkt über das Plug-In vornehmen, können aber ebenfalls über TypoScript geregelt werden:

plugin.tx_flickrset_pi1 {
  flickrapi = API-Schlüssel
}

Um Flickr-Fotos anzeigen zu lassen, wird das Flickrset-Plug-In auf einer beliebigen Seite als Datensatz zeingefügt. Über den Reiter „Plug-In“ lassen sich nun die nötigen Angaben und Einstellungen vornehmen.

Je nachdem, ob man ein Album oder ein einzelnes Fotos darstellen möchte, wird die ID des Albums („Photoset“) oder die ID des Fotos („Single photo id“) angegeben. Außerdem muss der Anzeigemodus („Select view mode“) gewählt werden („List“ oder „Single“).

flickrSet-Plug-In
Das flickrSet-Plug-In

Des Weiteren können die Anzahl der Fotos pro Seite sowie die Größe der Thumbnails (für die Listenansicht) und der Fotos (für die Einzelansicht) angegeben werden. Bei der Größe der Fotos kann man aus den von Flickr bereitgestellten Größen wählen.

Die Großansicht der Fotos erfolgt per JavaScript über „FancyZoom“, einer Alternative zur bekannten „Lightbox“. Auch hier wird das Foto per JavaScript über die aktuelle Seite gelegt und der Hintergrund abgedunkelt. „FancyZoom“ wird mit der Erweiterung installiert und steht also direkt zur Verfügung.

Über die Angabe einer Seiten-ID für die Einzelansicht („ID for single view“) kann zusätzlich zum „FancyZoom“ ein Link bereitgestellt werden, über den das Foto in der Einzelansicht auf einer separaten Seite dargestellt wird (funktioniert dann ohne JavaScript).

Voraussetzung ist, dass die Zielseite ebenfalls ein Flickrset-Plug-In enthält, das im Modus für die Einzelansicht eingestellt ist. Über die Angabe einer Seiten-ID („ID for list view“) für die Listenansicht wird dann ein Link von der Einzelansicht zurück zur Listenansicht bereitgestellt.

Auch die Einbindung eines eigenen Templates für die Darstellung der Fotos ist möglich. Eine HTML-Datei mit dem Standard-Template befindet sich im Ordner „/flickrset/static“ innerhalb des TYPO3-Extenions-Ordners.

Fazit: Mit der Erweiterung „flickrset“ lassen sich Fotos und Alben von Flickr bequem in die eigene Website integrieren. Das Template lässt sich ebenso anpassen wie die Fotogröße.

Fotos von Picasaweb einbinden

Mit „jb_picasaweb“ lassen sich Galerien von Picasaweb in die eigene Website einbinden. Nach der Installation muss „jb_picasaweb default css (jb_picasaweb)“ als statisches Template eingebunden werden.

Plug-In
Picasaweb: Plug-In

Anschließend wird das Picasaweb-Plug-In auf einer beliebigen Seite eingebunden. Weitere Einstellungsmöglichkeiten gibt es über das Plug-In nicht. Die Angabe der einzubindenden Galerie sowie weitere Einstellungen erfolgen über den Konstanten-Editor oder über TypoScript:

plugin.tx_jbpicasaweb_pi1 {
  pw_user = GalerieName
}

Über „pw_user“ wird der Name der Galerie, wie sie über Picasaweb („http://picasaweb.google.com/GalerieName“) erreichbar ist, angegeben. Die Größe der Fotos lässt sich über „pw_large“ (für die Einzelansicht) sowie „pw_thumb“ (für die Listenansicht) einstellen. Ein eigens Template und eine eigene Stylesheet-Datei lassen sich über „pw_template“ beziehungsweise „pw_cssfile“ angeben.

Das Standard-Template befindet sich im Ordner „/jb_picasaweb/static“ innerhalb des TYPO3-Extenions-Ordners und kann angepasst werden.

Die Einzeldarstellung der Fotos erfolgt per JavaScript mit „Fancybox“. Da „Fancybox“ nicht Bestandteil der Erweiterung ist, muss es manuell installiert werden. Dazu die Dateien in ein beliebiges Verzeichnis kopieren und folgende Dateien im HTML-Header der TYPO3-Seite einbinden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/
  jquery.min.js" type="text/javascript"></script>
<script src="VerzeichnisZurFancyBox/jquery.fancybox-1.3.1/fancybox/
  jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>

Außerdem ist es erforderlich, dass Sie den folgenden JavaScript-Code in den Header einbinden:

<script type="text/javascript">

$(document).ready(function() {
  $("a#single_image").fancybox();
  $("a#inline").fancybox({
    'hideOnContentClick': true
  });
  $("a.group").fancybox({
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 600,
    'speedOut': 200,
    'overlayShow': false
  });
});

</script>

Fazit: Die Einbindung ist etwas komplexer als bei „flickrset“ und die Konfiguration umständlicher, da sie nicht direkt über den Plug-In-Datensatz erfolgen kann. Außerdem setzt die Erweiterung PHP 5 voraus, was die aktuelle TYPO3-Version allerdings auch tut.

Einfache Galerie mit Photo Book

Mit der Erweiterung „goof_fotoboek“ lässt sich spielend einfach eine interne Galerie in TYPO3 einrichten. Nach der Installation der Erweiterung wird das entsprechende Plug-In als Datensatz in eine Seite eingefügt. Anschließend wird ein Verzeichnis angegeben, in dem sich die Fotos befinden, die in einer Galerie angezeigt werden sollen.

Plug-In
Photobook: Plug-In

Alternativ lässt sich auch eine URL zu einer externen Quelle angeben. So kann auf Fotos zugegriffen werden, die auf einer externen Website liegen. Den Rest übernimmt die Erweiterung selbst. Über ein grafisches Menü lassen sich die einzelnen Fotos durchklicken. Über eine Thumbnailseite erhält man einen Überblick über alle Fotos der Galerie.

Über TypoScript lassen sich weitere Einstellungen vornehmen. So lässt sich eine kombinierte Ansicht von Einzelbild und Thumbnailübersicht darstellen:

plugin.tx_gooffotoboek_pi1 {
	CombinedView = 1
}

Über „templateFile“ lässt sich per TypoScript auch ein eigenes HTML-Template einbinden.

Auch Wasserzeichen lassen sich mit „goof_fotoboek“ automatisch auf jedes Foto anwenden. Per TypoScript lässt sich eine Bilddatei angeben, die als Wasserzeichen verwendet werden soll:

watermark = 1
watermark_mask = Datei, die das Foto maskiert
watermark_bottomimg = Datei mit dem Wasserzeichen
watermark_bottomimg_mask = Datei, die das Wasserzeichen maskiert

Bewertung: Die Erweiterung „goof_fotoboek“ ist schnell installiert und einsatzbereit. Zahlreiche Einstellungen lassen sich über TypoScript regeln.

Smooth Gallery

Mit der Erweiterung „rgsmoothgallery“ lassen sich ebenfalls TYPO3-interne Galerien realisieren. Nach der Installation und der Einbindung des statischen Templates „SmoothGallery (rgsmoothgallery)“ kann das Plug-In als Datensatz in einer Seite platziert werden.

Plug-In
SmoothGallery: Plug-In

Es gibt zwei Möglichkeiten, Bilder für die Galerie auszuwählen. Neben der Angabe eines Verzeichnisses, dessen Fotos als Galerie dargestellt werden sollen, lassen sich auch Datensätze für jedes darzustellende Foto erstellen und über das Plug-In auswählen.

Die Thumbnailansicht sowie die Navigation werden per JavaScript eingebunden, die Einzelansicht erfolgt über „Lightbox“, was mit installiert wird. Die Darstellung der Galerie lässt sich über das Plug-In einfach anpassen. Weitere Einstellungen sind über TypoScript und CSS machbar.

Smooth Gallery im Frontend
Smooth Gallery im Frontend

Auch die Einbindung eines Wasserzeichens ist möglich. Aussehen und Inhalt des Wasserzeichens werden über TypoScript definiert. Standardmäßig besteht das Wasserzeichen nur aus einem Text, der sich leicht anpassen lässt:

plugin.tx_rgsmoothgallery_pi1.big2.file.20.text.noTrimWrap =
  |(c) | by Dr. Web |

Der senkrechte Strich nach dem Copyright-Zeichen dient als Platzhalter für das aktuelle Jahr, das dem Wasserzeichen hinzugefügt wird.

Die SmoothGallery lässt sich auch auf Bilder anwenden, die über „tt_news“ eingebunden werden. Eine Zeile TypoScript macht es möglich:

plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1

Bewertung: SnotthGallery bietet eine optisch sehr ansprechende Galerie mit vielen Einstellungsmöglichkeiten. Nachteil ist, dass die Galerie JavaScript zwingend voraussetzt.

wt_gallery

Die Erweiterung „wt_gallery“ ist eine besonders einfach zu installierende und anwendbare Galerie. Sie funktioniert allerdings nur, wenn auch die Erweiterung „wt_doorman“ installiert ist. Dabei handelt es sich um eine Klasse, die vor SQL-Inkektionen schützt.

Nach der Installation kann das Galerie-Plug-In auf einer Seite eingefügt werden. Alle Ansichten können auf einer Seite dargestellt werden, sodass das Plug-In nur einmal eingefügt werden muss. Neben einer Listen- und Einzelansicht gibt es auch eine Kategorienansicht. Werden Bilder in verschiedenen Ordnern abgelegt, wird über die Kategorienansicht eine Übersicht über die einzelnen Bilderordner dargestellt.

Plug-In
wtgallery: Plug-In

Zusätzlich gibt es noch eine Ansicht für „Cooliris“, mit der die Bilder in einer Flash-Diashow gezeigt werden.

Bewertung: „wt_gallery“ ist einfach und schnell installiert. Galerien lassen sich ebenso schnell erstellen, ohne vorher große Einstellungen vornehmen zu müssen.

Fazit

Zwar hat TYPO3 selbst einige Defizite bei der Darstellung von Bildern. Mit den zahlreichen Galerie-Erweiterungen lassen sich jedoch schöne und einfache Galerien erstellen. Basierend auf bekannten Scripten wie „Lightbox“ oder „FancyZoom“, bieten diese Erweiterungen Möglichkeiten, Fotos effektvoll darzustellen. Dabei bieten die Extensions in der Regel viele Möglichkeiten, die Galerie optisch anzupassen, indem man eigene HTML-Templates erstellt.

(mm),

Kategorien
CMS Programmierung

PulseCMS – Inhaltsverwaltung für kleine Websites

Die meisten Websites im kleinunternehmerischen Bereich haben extrem lange Halbwertzeiten. Ich betreue Kunden, deren Websites sind optisch seit sieben bis zehn Jahren nicht mehr verändert worden und die Kunden verspüren auch nicht die geringste Neigung, dies in absehbarer Zeit zu tun. Das größere Problem mit diesen Websites liegt im Grunde bei mir, denn natürlich gibt es immer wieder Änderungsbedarf im inhaltlichen Bereich. Da all diese Seiten statisch sind, kann ich die Kunden nicht selbst an den Code lassen, ohne Gefahr zu laufen, hinterher das gesamte Layout neu ordnen zu müssen. Das recht neue PulseCMS verspricht, genau bei dieser Bedürfnislage das Mittel der Wahl zu sein. Ein Praxistest.

pulse-logo-w500.png

Zielgruppe und Funktionsweise

PulseCMS richtet sich an Entwickler, die bereits bestehende statische Websites dynamisieren wollen. Klassisch ist dabei der Wunsch des Kunden, irgendwann kleine Inhaltsteile seiner Website selbst pflegen zu wollen, sei es die Liste der Ansprechpartner oder andere, vielleicht nur kurzzeitig aktuelle Informationen. Bei einem solchen, recht simplen Wunsch direkt auf ein ausgewachsenes Content-Management-System (CMS) umzustellen, wird der Kunde nicht bezahlen wollen und unnötig wäre es auch. Bislang werden Sie den Kunden dann um Bekanntgabe der Infos gebeten und diese eigenhändig in die HTML-Seiten eingepflegt haben – aus Sorge ums Layout.

Textschnipselverwaltung für den Endkunden

Mit PulseCMS gehören solche Bedenken der Vergangenheit an, denn PulseCMS ist so etwas wie eine Textschnipselverwaltung für den Endkunden. In Pulse werden kleine Textelemente erstellt, vergleichbar in etwa mit der Library-Funktion in Dreamweaver. Diese Textelemente werden dann per PHP-Include an den Stellen im Layout eingefügt, an denen sie angezeigt werden sollen. So ist das System auch ideal für die Bestückung wiederkehrender Footer oder Header oder sonstige redundante Informationen geeignet. Da die Schnipsel natürlich nichts anderes als normaler Quellcode sind, können darin auch Scripts, Bilder oder Medien eingebettet werden.

Systemvoraussetzungen und Installation

Das hier vorgestellte PulseCMS Basic hat komprimiert handliche 730 kb, das sich auf 2,2 MB und 210 Dateiobjekte entpackt. Auf Serverseite ist ein Linux– oder Macserver gefordert, Windows wird dezidiert nicht unterstützt. PulseCMS ist verwendbar ab PHP 5.x und läuft komplett ohne Datenbankanbindung. Alle Inhalte werden als HTML-Dateien im Verzeichnis blocks abgelegt.

pulse-loginscreen-w500.png

PulseCMS bedarf keiner Installation. Man lädt es lediglich per FTP auf den entsprechenden Webspace hoch. Im Standard passiert das in das Verzeichnis Pulse. Den Pfad kann man jedoch, genau wie das Passwort, das per default auf demo steht, in der config.php, die sich im Unterverzeichnis Includes befindet, anpassen. Zuletzt ist darauf zu achten, dass das Verzeichnis blocks, in dem die zu erstellenden Inhaltsblöcke abgelegt werden, mit Schreibrechten (mindestens 755) versehen wird.

Funktionen der Pro-Version

Zusätzlich zur kostenlos nutzbaren Basic-Version, die immerhin einen Rich-Editor (CKEditor), eine Imagegallery-Verwaltung (allerdings nur für eine einzige Galerie) sowie eine (manuelle) Backup-Funktion bietet, gibt es eine als „Pro“ bezeichnete Version, die auf einem neueren Entwicklungsstand ist und zusätzliche Features, wie:

  • Verwaltung mehrerer Galerien
  • Blog-Engine
  • Ordnerverwaltung für die Inhaltsblöcke
  • PDF-Upload.

Außerdem erhalten Kunden der Pro-Version technischen Support, sowie die Möglichkeit, die Software mit ihrem eigenen Branding zu versehen, was ja bei Software, die der Endkunde nutzt, immer gern gesehen wird. Die Proversion schlägt mit vergleichsweise vernünftigen 15 $ für die Einzellizenz (pro Domain) zu Buche, ein Fünferpack ist für noch günstigere 50 $ erhältlich. Die Lizenzen werden vollmundig als Lifetime-Lizenzen bezeichnet. Updates sollen also für alle Zeiten frei nutzbar sein.

blocks-verwaltung-w500.png

Da Pulse eine ziemlich unaufdringliche Optik an den Tag legt und meine Kunden die erweiterten Features nicht brauchen, entscheide ich mich für die kostenlose Variante.

Einfache und schnelle Migration

Das erste Projekt, eine Website verschiedenener psychologischer Beratungsstellen, ist innerhalb einer Stunde komplett migriert. Durch die blockweise Anordnung des gesamten Content kommt die Site dem Pulse-System allerdings auch sehr entgegen. So konnte ich aus dem Quelltext der Site jeweils eine komplette Tabelle mit den Inhalten kopieren und in Pulse in einen neu erstellten Inhaltsblock einfügen.

Unterhalb des Editorfensters zeigt Pulse sodann den Include-Befehl an, den es wiederum zurück in die statische Seite an die Stelle des bisherigen Codes zu pasten gilt. Ist das erledigt, lädt man die statische Seite hoch und siehe da, es hat sich nichts geändert. Nur, dass der Inhalt jetzt aus dem von Pulse verwalteteten Inhaltsblock kommt und von dort aus jederzeit geändert werden kann.

block-startseite-w500.png

Eine rudimentäre Bildverwaltung bietet Pulse ebenso. Wenn Sie über den CKEditor Bilder hochladen, können Sie über den Button Bild einfügen und Server durchsuchen jederzeit wieder auf die hochgeladenen Bilder zugreifen. Das ist für große Bildsammlungen natürlich mangels Verwaltungsfunktionen nicht ausreichend, bei kleinen Websites mit nur einem oder zwei Dutzend Bildern aber völlig in Ordnung. Schwachpunkt: Leider ist aus dem Editor heraus kein Zugriff auf die Bilder in der eigens als solchen bezeichneten Galerie möglich.

Statische Seiten erhalten .php-Endung

Anders als bei anderen CMS stellt sich die Frage nach der Komplexität der Vorlagenverwaltung nicht. Pulse stellt lediglich Inhalte in das bereits vorhandene Layout. Damit ist es ausnahmslos für alle bestehenden CMS-freien Websites geeignet. Achten muss man natürlich darauf, dass alle vormals statischen Seiten nunmehr die Endung .php erhalten, da ansonsten PHP-Includes nicht funktionieren. Alternativ zur Umbenennung der Dateien können Sie auch Ihren Server veranlassen, HTML-Dateien als PHP-Dateien zu parsen. Hierzu schreiben Sie in die .htaccess: AddType application/x-httpd-php .html Aber: Diese Anweisung gilt für den gesamten Server, nicht nur für einzelne Websites! Das Umbenennen der Dateiendungen ist eindeutig die vorzuziehende, da saubere Methode.

Das Einspielen einer neuen Pulse-Version gestaltet sich unkompliziert. Wichtig ist nur, dass Sie den Ordner blocks, der die Inhaltsblöcke beherbergt, sichern. Danach löschen Sie den gesamten Pulse-Ordner, laden den neuen hoch und platzieren Ihr blocks-Verzeichnis wieder an der alten Position.

Übergabe an den Kunden

Damit wir uns da richtig verstehen. Pulse ist kein CMS, mit dem man Websites expandieren kann, wie es klassischerweise der Fall ist. Pulse kann keine neuen Seiten anlegen. Lediglich die Verwaltung vorhandener Inhalte ist möglich. So besteht die einzige Möglichkeit für den Kunden, seine Site inhaltlich zu erweitern, darin, mehr Text in einen frei gegebenen Block zu schreiben als zuvor darin stand. Will Ihr Kunde eine weitere Seite, muss er auf Sie zurück kommen. Sie legen diese dann an und binden einen oder mehrere Pulse Inhaltsblocks ein. Diese können hernach vom Kunden bestückt werden.

So ist es aufgrund der reduzierten Funktionalität naheliegend, dass Pulse für den Kunden leicht erlernbar ist. Im Grunde reduziert sich das erforderliche Wissen auf Kundenseite darauf, dass klar sein muss, welcher Inhaltsblock auf welcher Seite erscheint. Diesem Erfordernis kann der Webentwickler durch eine sinnvolle Benennung der einzelnen Blöcke verhältnismäßig leicht gerecht werden. Ist der Inhalt gut strukturiert, kann das System vom Kunden ohne Einarbeitungszeiten und Lernkurven verwendet werden.

Pulse verfügt nicht über eine Benutzerverwaltung. Das Login besteht daher lediglich aus einer Passwortabfrage. Wer das Passwort kennt, kommt an die Site. Allerdings reduziert sich der Zugriff ohnehin auf die Inhaltsblöcke sowie die Bildergalerie. Ans Eingemachte, den eigentlichen Quellcode der Site kommt man aus Pulse nicht heran. Von daher ist die mangelnde Benutzerverwaltung kein Manko. Hat sich der Kunde nun eingeloggt, wird er direkt mit der Liste der definierten Inhaltsblöcke konfrontiert. Sucherei entfällt somit. Mein Testkunde hat keine fünf Minuten benötigt, um sich völlig virtuos im Pulse-Backend bewegen zu können. Hier hat die Reduktion auf das Wesentliche größte Vorteile.

Legt Ihr Kunde neue Inhaltsblöcke an, ist das zunächst unkritisch, weil diese erst dann auf der Website sichtbar werden, wenn sie irgendwo im Quelltext der Site eingebunden sind. Dieser Umstand ist allerdings etwas, das mein durchschnittlich technikversierter Testkunde erst nach einigen ausführlicheren Erläuterungen verstanden hat. Heute ist er mit dem etwas komplizierten Prozedere zufrieden, weil es ihn von der Befürchtung befreit, durch eine Fahrlässigkeit Teile seiner Webpräsenz zu zerschießen.

Fazit

Ich werde PulseCMS schrittweise für all meine beharrlichen Altkunden einsetzen. Dadurch, dass diese dann die Möglichkeit haben, ihre veränderlichen Inhalte zu jeder Zeit selbst zu ändern, kann ich mir den ohnehin nur spärlich, zumeist gar nicht vergüteteten Pflegeaufwand sparen. Gleichzeitig biete ich den Kunden einen Mehrwert ohne Mehrkosten, den diese sicherlich zu schätzen wissen werden. Durch die guten Möglichkeiten, die änderbaren Inhalte möglichst stark einzuschränken, besteht bei ordentlicher Planung nicht die Gefahr, dass der Kunde das Layout zerschießt. Allerdings kann man ihn nicht daran hindern, fürchterliche Schriftgrößen oder sonstige Geschmacklosigkeiten zu verwenden. Ein wachsames Auge kann daher auch nach der Umstellung nicht schaden.

Noch einmal: Pulse CMS ist nichts für dynamische Websites. Websites wachsenden Umfangs bauen Sie nach wie vor besser mit anderen Lösungen. Pulse CMS ist lediglich ein Ersatz für grundsätzlich statisch ausgerichtete Sites mit geringerem Seitenumfang. Müssen mehr als vier/fünf Dutzend Inhaltsblöcke verwaltet werden, ist die Website also nicht mehr als klein zu bezeichnen, sollten Sie Pulse ebenfalls eher nicht einsetzen. Bei zu vielen Inhaltsblöcken leidet die Übersichtlichkeit der nicht weiter zu strukturierenden Block-Ansicht kolossal.

Nutzen Sie für den Durchschnittswebvisitenkartler die kostenlose Version. Die Verwendung der Proversion sollte aufgrund des dort verwendeten Blogsystems mit Kommentarmodul und den daraus resultierenden Sicherheitsrisiken  nicht in Frage kommen. Schließlich wollen Sie sich die Arbeit vereinfachen und nicht, wie etwa bei WordPress, in eine endlose Updatespirale geraten.

(mm), ™

Kategorien
CMS Programmierung

TYPO3: Nachrichten komfortabel verwalten mit tt_news 3.0

Dank zahlreicher Erweiterungen lässt sich TYPO3 um viele nützliche Funktionen und Anwendungen ausbauen. Eine der beliebtesten und verbreitetsten Erweiterungen ist die Nachrichtenverwaltung „tt_news“, die es seit beinahe einem Jahr in der Version 3 gibt und zahlreiche Neuerungen mit sich gebracht hat.

Was kann „tt_news“?

Mit der Erweiterung „tt_news“ lassen sich Nachrichten erstellen, verwalten und auf unterschiedliche Art und Weise darstellen. Neben dem eigentlichen Nachrichtentext können Fotos, Links und Dateien in einen Nachrichtenartikel eingebunden werden. Einem Artikel lassen sich beliebig viele Kategorien zuordnen. Außerdem können einem Artikel andere Artikel zugeordnet werden, mit denen er in Zusammenhang steht. Diese im Zusammenhang stehenden Artikel werden dann verlinkt.

News im Backend und Frontend von TYPO3
News im Backend und Frontend von TYPO3

Nachrichten lassen sich unterschiedlich darstellen, etwa in Form von Listen, bei denen jeweils ein kurzer Teasertext mit Link zum kompletten Artikel angezeigt wird.

Wie wird „tt_news“ installiert?

Die Erweiterung wird über den Erweiterungsmanager von TYPO3 installiert. Anschließend muss ein Systemordner erstellt werden, in dem die Datensätze für die einzelnen Nachrichten abgelegt werden. Der Systemordner lässt sich als Ordner für Nachrichten kennzeichnen (über den Reiter „Optionen“ bei den „Seiteneigenschaften“) und erhält dadurch ein spezielles Ordnersymbol.

Um „tt_news“ gestalterisch und technisch anzupassen, gibt es eine umfassende TypoScript-Referenz sowie HTML-Templates, die angepasst bzw. neu angelegt werden können. Die Erweiterung lässt sich jedoch auch nutzen, ohne weitere Einstellungen mit TypoScript vorzunehmen. Im Übrigen lassen sich eine Vielzahl der Einstellungen auch über den Konstanten-Editor vornehmen.

Wie aktualisiere ich auf die aktuelle Version?

Wer bereits eine ältere Version von „tt_news“ nutzt, kann mit Hilfe eines Update-Assistenten zur aktuellen Version wechseln. Der Assistent prüft Nachrichten-Datensätze auf ihre Kompatibilität zur aktuellen Version und ändert gegebenenfalls Verweise zu den Standard-Template-Dateien und zum statischen Template „News settings (tt_news)“, welches sich ab der Version 3 in einem anderen Verzeichnis befindet.

Tipp: Es ist zu empfehlen, vor dem Update-Assistenten eine Sicherung der Datenbank vorzunehmen, damit man im Notfall den altem Zustand wiederherstellen kann. Ein Link zum Update-Assistenten wird nach der Installation der neuen Version bereitgestellt.

Was für Nachrichten können erstellt werden?

Ein normaler Nachrichtenartikel besteht aus einem Text und – je nach Wunsch – Bildern, Links und Dateien. Es können aber auch solche Nachrichten erstellt werden, die ohne dem auskommen und nur auf eine interne oder externe Seite verweisen. In allen Fällen können einer Nachricht Kategorien sowie ein Untertitel zugeordnet werden. Der Untertitel dient als Teasertext für eine Nachricht.

Nachrichten-Datensatz
Nachrichten-Datensatz

Über ein Archivdatum kann bestimmt werden, ab wann eine Nachricht nur noch über die Archivansicht zu erreichen ist.

Wie werden Nachrichten dargestellt?

Um Nachrichten im Frontend darzustellen, muss auf einer Seite ein neues Inhaltselement angelegt werden. Bei der Auswahl des Inhaltstyps wählt man unter „Plug-Ins“ den Typ „Nachrichten“. Über das Plug-In lassen sich Einstellungen zur Ansicht der Nachrichen vornehmen.

Nachrichten-Plugin
Nachrichten-Plugin

Es gibt eine Listenansicht, bei der Nachrichten mit Link, Überschrift, Teaserbild und -text aufgelistet werden. Die Anzahl der darzustellenden Nachrichten pro Seite lässt sich ebenso festlegen wie die Sortierreihenfolge. Die Darstellung lässt sich auch auf Nachrichten, die bestimmten Kategorien zugeordnet sind, beschränken.

Neben der normalen Listenansicht gibt es auch eine Ansicht, bei der nur die aktuellsten Nachrichten dargestellt werden – geeignet für das Einbinden auf der Startseite. Darüber hinaus gibt es ein Archivmenü, die Option Kategoriemodus und eine Suche für Nachrichten.

Über die Einzelansicht wird eine Nachricht komplett mit ganzem Text, Bildern, Links und Dateien dargestellt.

Nachrichten einbinden

Damit Nachrichten über das News-Plug-In eingebunden werden können, müssen in dem Plug-In die Systemordner angegeben werden, in denen sich die entsprechenden Nachrichten-Datensätze befinden.

Achtung: Für die Einzelansicht müssen Sie eine Seite angegen. Ansonsten können die Nachrichten-Teaser in den Listenansichten nicht mit der Seite für die Einzelansicht verlinkt werden.

Außerdem lassen sich eigene Template-Dateien über das Plugin einbinden sowie weitere Einstellungen zur Darstellung vornehmen.

Alle Einstellungen, die man über das News-Plug-In vornehmen kann, können auch über TypoScript vorgenommen werden und sind somit für alle Plugin-Einbindungen gültig. Gerade die Angabe der Systemordner, in denen sich die Nachrichten-Datensätze befinden, sowie die Links zu den HTML-Template-Dateien brauchen dann nicht mehr für jedes Plugin einzeln angegeben werden.

plugin.tt_news {
  templateFile = filadmin/templates/news.html
    # Verweis zur HTML-Vorlage
  pid_list = 1, 2
    # Liste mit den IDs der Systemordner mit Nachrichten
  singlePid = 4
    # ID der Seite mit der Einzelansicht
}

Was gibt es sonst noch Neues bei Version 3?

Für die Listen- und Einzelansicht gibt es in der aktuellen Version mehrere Varianten. Neben der einfachen Listenansicht gibt es noch Varianten mit drei beziehungsweise sechs abwechselnden Layouts für Nachrichtenteaser.

Bei der alternativen Einzelansicht gibt es drei Bereiche für Bilder anstatt nur einen Bereich. Als weitere zusätzliche Listenansicht gibt es „Header List“, bei der nur die Überschriften der Nachrichten ohne Teasertext angezeigt werden.

Ebenfalls neu ist der Verwaltungsbereich „News Admin“, der über einen eigenen Menüpunkt im TYPO3-Menü zu finden ist. Über diesen Verwaltungsbereich erhält man eine Übersicht über alle Nachrichten-Datensätze und Kategorien. Damit können Sie Nachrichten filtern – etwa nach Kategorien oder Systemordner, in denen sich die Nachrichten befinden.

Nachrichtenverwaltung
Nachrichtenverwaltung

OptionSplit jetzt auch in tt_news

Eine weitere bedeutende – wenn nicht die bedeutendste – Neuerung, ist die Einführung von „OptionSplit“. Damit lässt sich das Aussehen von Überschriften und Bildern anhand ihrer Darstellungsreihenfolge einstellen.

Beispiel: Einem Nachrichten-Datensatz sind mehrere Fotos zugewiesen. Die Breite der Fotos lässt sich entweder einheitlich festlegen oder unterschiedlich für das erste, das letzte und die dazwischen liegenden Fotos. Die Angaben werden durch die Zeichenfolge |*| voneinander getrennt.

OptionSplit bei der Angabe der Bildbreite
OptionSplit bei der Angabe der Bildbreite

Bei den Vorgängerversionen waren für das Darstellen der Bilder in verschiedenen Größen jeweils ein eigenes Plugin erforderlich. Mit dem Plugin-Element Option Split werden somit gleich mehrere Plugins ersetzt, was neben einer einfacheren Konfiguration auch in weniger Rechenleistung resultiert.

Fazit

Wer seine Seite durch aktuelle Meldungen bereichert, hat mit „tt_news“ die richtige Erweiterung, um seine Nachrichten zu verwalten. Auch der Sprung zur aktuellen Version lohnt sich aufgrund der vielen Neuerungen. Da sich die Erweiterung großer Beliebtheit erfreut, ist damit zu rechnen, dass sie auch in Zukunft fleißig weiterentwickelt wird.

(mm),

Kategorien
CMS Programmierung

Rantasten an TYPO3 – relativ einfacher Einstieg per Introduction Package

Content-Management-Systeme wie TYPO3 erfreuen sich großer Beliebtheit. Gerade weil es viele Open-Source-Lösungen gibt, sind sie auch für kleine Webprojekte interessant. Im Gegensatz zu WordPress, das schnell installiert und sofort einsetzbar ist, muss man sich bei TYPO3 tiefer in die Materie einarbeiten, bevor man richtig loslegen kann. Ohne Kenntnisse von TypoScript geht es nicht. Mit der aktuellen Version 4.4 ändert sich dies nun.

Bislang kam man bei TYPO3 nicht drum herum, zumindest rudimentäre Kenntnisse in TypoScript zu haben. Denn bei einer neuen TYPO3-Installation war das Backend zwar direkt nutzbar. Es ließen sich also Seiten anlegen und mit Inhalt füllen. Wer jedoch das Frontend aufgerufen hat, sah zunächst einmal nichts. Ohne Template, was mit TypoScript eingebunden wird und in dem u. a. die Navigation definiert wird, konnten weder Navigation noch Inhalte dargestellt werden.

Die neue Version 4.4 bietet erstmals ein „Introduction Package“, das TYPO3 mit einem Standard-Template installiert und ohne weitere Konfiguration sofort einsetzbar ist.

Voraussetzungen

Damit TYPO3 in der aktuellen Version einwandfrei läuft, muss PHP ab Version 5.2 vorhanden sein. TYPO3 kann mit verschiedenen Datenbanken arbeiten, neben MySQL werden auch PostgreSQL und Oracle unterstützt. Wer auf eine MySQL-Datenbank setzt, sollte diese ab Version 5.0 nutzen.

Die interne Bildbearbeitung (zum Beispiel zum Skalieren von Bildern) erfolgt über ImageMagick. In der Regel erkennt das Install Tool, ob ImageMagick installiert ist und bindet es eigenständig ein.

TYPO3 installieren

Nach dem Hochladen der Dateien müssen folgende Verzeichnisse beschreibbar gemacht werden: „typo3temp“, „typo3conf“, „typo3/ext“, „uploads“ und „fileadmin“. Ebenso muss die Datei „typo3conf/localconf.php“ beschreibbar sein.

Da das Verzeichnis fileadmin nur im Zusammenhang mit dem Introduction Package zwingend Schreibrechte benötigt, warnt TYPO3 während der Installation leider nicht, falls diese Rechte nicht vergeben sind. Erst am Ende der Installation wird man feststellen, dass die Template-Dateien vom Introduction Package nicht kopiert werden konnten und das Frontend weiß bleibt.

Nach dem Aufruf des TYPO3-Installationsverzeichnisses wird das Install Tool gestartet, was durch die Installation führt. Aus Sicherheitsgründen startet die Installation erst, nachdem die Datei „ENABLE_INSTALL_TOOL“ im Verzeichnis „typo3conf“ abgelegt wurde. Es kann sich dabei um eine leere Textdatei handeln.

Datenbank einrichten mit dem Install Tool
Datenbank einrichten mit dem „Install Tool“

Das Install Tool fragt nun die Zugangsdaten zur Datenbank ab. Danach haben Sie die Möglichkeit, zwischen einer leeren Installation und einer Installation mit Standard-Template, welches dank des Introduction Packages installiert wird, zu wählen.

Wenn Sie sich für das Introduction Package entscheiden, können Sie noch die Grundfarbe des Standard-Templates über eine Farbpalette festlegen. Noch ein Password angeben, um sich anschließend im Backend anmelden zu können, und TYPO3 wird installiert.

Variante auswählen und Standard-Template anpassen mit dem Install Tool
Variante auswählen und Standard-Template anpassen mit dem „Install Tool“

Standard-Template und -inhalte

Nach der Installation findet sich eine fertig eingerichtete TYPO3-Umgebung vor. Neben dem Standard-Template sind auch exemplarische Inhalte installiert worden.

Wer Kenntnisse in HTML hat, kann das Standard-Template noch anpassen. Im Verzeichnis fileadmin/default/templates befinden sich alle HTML-, CSS- und Bilddateien. Es gibt je eine HTML-Datei für die Startseite sowie eine für die Unterseiten. Die HTML-Dateien sollten mit Vorsicht angepasst werden, da die Erweiterung Template Auto-parser aus den HTML-Dateien das Typoscript-Template erzeugt. Werden in der HTML-Datei  IDs geändert, kann es zu einer fehlerhaften Darstellung des HTML-Templates im Frontend kommen.

TYPO3-Standard-Template
TYPO3-Standard-Template

Am Einfachsten lassen sich Dateiänderungen über das Modul Filelist vornehmen, über das man Zugriff auf alle Dateien im Verzeichnis fileadmin hat.

Erweiterungen

Über das Introduction Package, welches selbst als Erweiterung in TYPO3 eingebunden ist, werden neben dem Template Auto-parser noch zusätzliche Erweiterungen installiert, die nicht zu einer Standard-Installation von TYPO3 gehören.

Zu diesen Erweiterungen gehören News („tt_news“), eine bekannte Erweiterung zum Verwalten von Nachrichten sowie Spamshield („wt_spamshield“), mit der Formulareingaben auf Spam geprüft werden können.

Ebenfalls installiert und fertig konfiguriert ist die Erweiterung RealURL („realurl“), mit der für Suchmaschinen optimierte URLs generiert werden. Gerade RealURL ist – vor allem im Umgang mit anderen Erweiterungen – nicht einfach zu konfigurieren.

Fazit

Wer mit TypoScript nichts am Hut hat und Gefallen an dem Standard-Template findet, wird mit dem Introduction Package einen guten Einstig in die Welt von TYPO3 finden. Alle, die mit einem individuellen Layout und mit zusätzlichen Erweiterungen arbeiten wollen, werden nicht drum herum kommen, sich früher oder später mit TypoScript auseinanderzusetzen.

Das Backend von TYPO3
Das Backend von TYPO3

Die fertige Installation mit Standard-Template und -Inhalten ist jedoch eine gute Basis, um sich mit TYPO3, seiner Architektur und TypoScript vertraut zu machen.

(mm),

Kategorien
CMS Programmierung

Gallery: Ein Content-Management-System für Fotos

Content-Management-Systeme wie zum Beispiel TYPO3 bieten viele Funktionen – gerade auch durch Erweiterungen. Aber wenn es um die Darstellung und Verwaltung von Fotos geht, sind die Möglichkeiten oft bescheiden. Mit Gallery gibt es jedoch ein Content-Management-System, das ganz auf Fotos spezialisiert ist. Mit der Version 3, die es derzeit als Release Candidate gibt, wurde das System komplett überarbeitet und bietet eine ganze Reihe neuer Funktionen.

Alternative zu Flickr und Co.

Dank der Fotoportale wie Flickr und Picasa stellt sich die Frage, ob sich die Mühe lohnt, ein CMS wie Gallery einzusetzen, wenn es doch bequemere Möglichkeiten gibt. Wer jedoch seine Fotos nicht in einer „Community“ teilen sondern selbst entscheiden möchte, wie seine Fotos dargestellt werden sollen, hat mit Gallery eine tolle Alternative.

Außerdem ist man unabhängig von den großen Portalen und kann nach Belieben die Features von Gallery ein- und ausschalten bzw. anpassen. Gallery ist sowohl optisch sehr ansprechend als auch einfach und intuitiv zu bedienen. Von Hause aus bringt es eine Vielzahl von Funktionen mit. Darüber hinaus lässt sich der Funktionsumfang durch Module um zahlreiche Features erweitern. Zudem ist Gallery kostenlos und einfach zu installieren.

Installation

Voraussetzung für die Installation von Gallery sind PHP und eine MySQL-Datenbank. Allerdings werden PHP und MySQL in der jeweils aktuellen Version 5 benötigt. Außerdem wird für die interne Bildbearbeitung die GD Library benötigt; alternativ sind auch ImageMagick oder GraphicsMagick möglich.

Schritt-für-Schritt-Anleitung für die Installation
Schritt-für-Schritt-Anleitung für die Installation

Nach der Installation ist Gallery direkt betriebsbereit. Unterschieden wird zwischen dem Galeriebereich, in dem Fotos dargestellt und von angemeldeten Benutzern Fotos hochgeladen und z. B. in Alben verwaltet werden können und dem Adminbereich. Im Adminbereich lassen sich u. a. Benutzer, Themen und Module verwalten.

Das Aussehen von Gallery lässt sich dank Themen verändern. Auf den Galerie- und den Adminbereich lassen sich unabhängig voneinander unterschiedliche Themen anwenden. Der Galeriebereich kann somit ein anderes Aussehen haben als der Adminbereich. Das hat den Vorteil, dass Themen nicht für das ganze System angepasst werden müssen. Man kann sich also auf das Aussehen des Galeriebereichs beschränken.

Zahlreiche fertige Themen lassen sich herunterladen und installieren. Wer das Aussehen seiner Galerie lieber selbst anpassen will, kann eigene Themen entwickeln. Die komplexe Architektur der Themen macht es jedoch nicht ganz einfach, sich mit dem „Theming“ vertraut zu machen. Grundsätzlich lässt sich auch das Aussehen der Dialogfenster und Pulldown-Menüs gestalterisch anpassen.

Gallery kommt mit mehren Sprachpaketen, u. a. auch deutsch. Die Sprachen lassen sich nach Belieben hinzufügen. Angemeldete Benutzer können eine bevorzugte Sprache auswählen. Dank des Übersetzungs-Modus lassen sich nicht übersetzte Texte (z. B. bei Modulen) bequem von jedem Benutzer in die eigene Sprache übersetzen. Ein manuelles Anpassen von Sprachdateien ist nicht nötig.

Die Benutzerverwaltung ist einfach. Es wird zwischen einfachen Benutzern und Administratoren unterschieden. Außerdem lassen sich Benutzergruppen einrichten.

Es lassen sich auch mehere Bilder gleichzeitig hochladen
Es lassen sich auch mehere Bilder gleichzeitig hochladen

Bedienung

Die Bedienung von Gallery ist schnell und einfach. Dank Ajax-Technologie sind die meisten Änderungen sichtbar, ohne dass die Seite neu geladen werden muss. Für jedes Foto lässt sich ein Titel sowie eine Beschreibung angeben. Außerdem lassen sich Fotos per einfachem Klick drehen.

Es lassen sich Alben anlegen, in die Fotos per Drag-and-Drop verschoben werden können. Die Sortierreihenfolge der Fotos eines Albums lässt sich individuell einstellen. So lassen sich Fotos nach Aufnahme- oder Hochladedatum oder manuell sortieren. Für Alben lassen sich zudem Zugriffsrechte einrichten. Auf diese Weise können für Benutzergruppen Rechte für das Anzeigen, Bearbeiten und Hinzufügen von Fotos zugewiesen werden.

Per Drag-and-Drop lassen sich Bilder spielend in andere Alben verschieben
Per Drag-and-Drop lassen sich Bilder spielend in andere Alben verschieben

Module

Über zusätzliche Module lässt sich der Funktionsumfang von Gallery erweitern. Eine Vielzahl der Module liefert Gallery bereits mit. So gibt es z. B. ein Modul, mit dem man allen Fotos automatisch ein beliebiges Wasserzeichen hinzufügen kann. Dazu wird einfach eine Grafikdatei bestimmt, die bei allen Fotos in eine definierte Ecke des Fotos hineinmontiert wird.

Eine beliebige Grafik lässt sich als Wasserzeichen einsetzen
Eine beliebige Grafik lässt sich als Wasserzeichen einsetzen

Wie es sich für eine zeitgemäße Fotogalerie gehört, lassen sich bei Gallery auch Module zur Kommentierung von Fotos sowie für RSS-Feeds installieren – ganz wie man es von Flickr und Co. kennt. Auch Vorkehrungen gegen Spam (Captcha und Akismet-Filter) sind als Modul vorhanden. Ebenso gibt es die Möglichkeit, sich Fotos in einer Slideshow anzuschauen. Verwendet wird hierbei der Medienbrowser „Cooliris“.

Es gibt noch eine Reihe weiterer Module, die Gallery mitbringt und die per einfachem Klick installiert werden können. Unter anderem lassen sich EXIF-Daten auslesen und darstellen und es lassen sich Schlagwörter für Fotos vergeben. Bei allen Modulen gilt, dass sie schnell installiert und ohne umständliche Konfiguration sofort einsetzbar sind.

Fazit

Wer Gallery bereits kennt, wird feststellen, dass das CMS mit der neuen Version einen großen Sprung gemacht hat. Aussehen, Bedienung und Funktionsumfang machen anderen Content-Management-Systemen ebenso Konkurrenz wie den diversen Fotodiensten à la Flickr.

Übersicht über Fotos eines Albums
Übersicht über Fotos eines Albums

Das moderne Standard-Thema sowie der Einsatz von Ajax sorgen dafür, dass man sich nicht großartig an die Bedienung von Gallery gewöhnen muss. Und mit den vielen Modulen lässt sich Gallery individuell anpassen, sodass kaum Wünsche offen bleiben.

(mm),

Kategorien
CMS Programmierung

Wikis fürs Informationsmanagement im Unternehmen nutzen

Es gibt zahlreiche kommerzielle Angebote für Intranetlösungen, die mit zahlreichen Funktionen – zum Beispiel zum Versenden von Rundschreiben sowie zum Verwalten von Projekten und Terminen – punkten. Manchmal reicht es jedoch eine Nummer kleiner. Mit einem eigenen internen Unternehmens-Wiki lassen sich zudem neue Möglichkeiten des internen Informationsaustauschs schöpfen.

Der große Vorteil eines Unternehmens-Wikis ist die dezentrale Verwaltung. Jeder kann seinen Beitrag leisten und für seinen Bereich die Inhalte des Wikis pflegen. Wenn es um die Bereitstellung von Informationen, um die gemeinschaftliche Entwicklung von Konzepten und das Sammeln von Ideen und Vorschlägen geht, bietet sich ein Wiki an. Wenn darüber hinaus spezielle Funktionen wie Terminverwaltung oder E-Mail-Versand von Bedeutung sind, dann wird dies mit einem Wiki kaum umsetzbar sein.

Auch für Vereine und Parteien bietet sich ein solches Wiki an. Gerade bei Parteien kann ein Wiki der Meinungsbildung und der gemeinschaftlichen Programmdebatte dienen.

Vom Wiki zum Unternehmens-Wiki

Die bekannteste Software für Wikis ist das MediaWiki, das auch von Wikipedia eingesetzt wird. MediaWiki gibt es kostenlos; es ist einfach zu installieren und zu bedienen. Daher wird die Installation hier nicht weiter erklärt. Wie viele andere Content-Management-Systeme braucht es PHP und eine MySQL-Datenbank.

Hauptseite eines frisch installierten Wikis
Hauptseite eines frisch installierten Wikis

Standardmäßig ist ein neu installiertes Wiki für alle offen zugänglich. Jeder kann Artikel lesen, bearbeiten und anlegen. Da Intranets oftmals auch an das Internet angebunden sind und damit auch Externe Zugriff darauf haben, sollte das Wiki so eingestellt werden, dass ein Zugriff auf das Wiki nur für angemeldete Benutzer möglich ist.

Benutzerverwaltung an Firmenbedürfnisse anpassen

Ebenfalls sollte eine Benutzeregistrierung her, bei der neue Benutzer erst durch einen Administrator freigeschaltet werden müssen. Standardmäßig ist das nicht der Fall; jeder kann ein Konto anlegen und sich damit sofort anmelden.

Alle Einstellungen, die zur Anpassung vorgenommen werden müssen, werden in die Wiki-Konfigurationsdatei LocalSettings.php geschrieben. Diese Datei sollte sich nach der Installation des Wikis im Hauptverzeichnis befinden.

Zunächst wird der Lese- und Schreibzugriff für alle verboten und anschließend für angemeldete Benutzer erlaubt. Dazu ans Ende der Konfigurationsdatei folgende Zeilen einfügen:

$wgGroupPermissions['*']['read'] = false;
$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['user']['read'] = true;
$wgGroupPermissions['user']['edit'] = true;

Jetzt ist der Zugriff auf das Wiki nur für angemeldete Benutzer möglich. Da jetzt allerdings alle Seiten nur mit Anmeldung zugänglich sind, ist auch die Anmeldeseite selber („Spezial:Anmelden“) nicht aufrufbar. Deshalb muss mindestens die Anmeldeseite von der Zugriffsbeschränung ausgenommen werden. Dazu lässt sich in der Konfigurationsdatei eine Ausnahmeliste („White List“) anlegen:

$wgWhitelistRead = array("Spezial:Anmelden");

In dem Array können alle Seiten angegeben werden, die immer (auch für nicht Angemeldete) aufrufbar sein sollen.

Bleibt noch das Problem, dass sich trotz Zugriffsbeschränkung jeder ein Benutzerkonto anlegen und damit anmelden kann. Dank der Erweiterung ConfirmAccount lässt sich dieses Problem lösen. Nach der Installation und Konfiguration der Erweiterung müssen neu angelegte Benutzerkonten erst durch einen Administrator freigeschaltet werden.

Ebenso ist die Bestätigung von E-Mail-Adressen durch Bestätigungslink, der an die neuen Benutzer geschickt wird, Bestandteil der Erweiterung.

Nachdem die Erweiterung ins Extensions-Verzeichnis kopiert wurde, muss folgende Zeile in die Konfigurationsdatei eingefügt werden:

require_once("$IP/extensions/ConfirmAccount/ConfirmAccount.php");

Mit dieser Zeile wird die Erweiterung eingebunden und steht zur Verfügung. Es lassen sich über die Konfigurationsdatei weitere Einstellungen für die Erweiterung vornehmen:

$wgConfirmAccountContact = "webmaster@mail.de";

In der Variablen „$wgConfirmAccountContact“ kann eine E-Mail-Adresse angeben werden, an die E-Mails über neu angelegte Benutzerkonten geschickt werden sollen. Es gibt noch eine ganze Reihe weiterer Einstellungen, die man vornehmen kann.

Außerdem müssen einige SQL-Befehle ausgeführt werden, um in der Datenbank einige Anpassungen für die Erweiterungen vorzunehmen. Die Befehle sind in einer SQL-Datei zu finden und können kopiert und mittels phpMyAdmin auf der Datenbank ausgeführt werden.

Wer anschließend auf die Anmeldeseite des Wikis geht, sieht, dass sich das Formular geändert hat. Aus dem Link „Neues Benutzerkonto anlegen“ ist der Link „Beantragen“ geworden.

Formular zum Beantragen eines Benutzerkontos
Formular zum Beantragen eines Benutzerkontos

Jetzt muss die neue Registrierungsseite („Spezial:Benutzerkonto_beantragen“) noch der Ausnahmeliste $wgWhitelistRead hinzugefügt werden. Die Seite, die bei erfolgreicher E-Mail-Bestätigung angezeigt wird („Spezial:E-Mail_bestaetigen“), sollte ebenfalls der Ausnahmeliste hinzugefügt werden.

Nachdem ein Konto beantragt wurde, wird eine E-Mail an die in der Konfigurationsdatei angegebene E-Mail-Adresse geschickt. Außerdem erhalten Administratoren ein kleines Hinweisfenster im Wiki, das sie auf neue Anträge hinweist. Anträge können bestätigt, abgelehnt oder als „abwarten“ markiert werden.

Der Antragsteller erhält eine Bestätigungsmail, die ihn informiert, ob sein Konto bestätigt oder abgelehnt wurde. Es gibt jedoch auch die Möglichkeit, einen Antrag als Spam zu behandeln. Dann wird er abgelehnt, an den Antragsteller jedoch keine E-Mail versandt.

ss
Offene Benutzerkonto-Anträge

Fazit

Wer ein Intranet möchte, in dem jeder mitarbeiten kann und in dem es kaum Hierarchien gibt, ist mit einem Wiki gut bedient. Wer mehr Kontrolle über Inhalte und jene, die diese bearbeiten, haben möchte, wird mit einem Wiki als Intranetlösung wenig Freude haben. Da in einem Wiki keine Benutzergruppen frei definiert werden können und der Lese- und Schreibzugriff auf bestimmte Inhalte nicht definiert werden kann, ist eine individuelle Benutzer- und Gruppenverwaltung nicht möglich.

Verschiedene Unternehmen setzen auf eigene Wikis, so zum Beispiel die Fraport AG, die mit dem „Skywiki“ ein Unternehmens-Wiki eingerichtet hat. Auch die sprd.net AG – besser bekannt als Spreadshirt – hat mit „Space“ ein eigenes Unternehmens-Wiki, während SEIBERT MEDIA mit „Confluence“ ein so genanntes Corporate Wiki zum Kauf anbietet.

Voraussetzung für ein gut funktionierendes Unternehmens-Wiki ist, dass sich alle Beteiligten auf bestimmte Regeln, wie sie auch Wikipedia formuliert hat, einigen. Dann steht einem erfolgreichen Wiki nichts mehr im Wege.

(mm), ™, (sl)

Kategorien
CMS Programmierung

Trends & Tipps: Drupal-Dev-Days München

303 Teilnehmer, 53 Sessions in Deutsch oder Englisch, 16 Sponsoren und jede Menge Spaß, Leidenschaft und Know-how. Das waren – kurz zusammengefasst – die Drupal-Dev-Days,  die vom 8. bis zum 9. Mai 2010 in München an der Fachhochschule München stattfanden.

Drupal-Dev-Days – was ist das?

Die internationalen und teils sehr prominenten Teilnehmer (unter anderen David Axmark, Co-Gründer von MySQL oder Kristof Van Tomme, Drupal Architect Open Atrium und viele andere) kamen vor allem aus Deutschland, Österreich und der Schweiz.

Die Teilnehmer des Drupal-Dev-Days in München
Die Teilnehmer des Drupal-Dev-Days in München

Weiterführende Links

Die Websites zum Event

Das Programm: Drupal-Dev-Days 2010
Die Veranstalter Drupal-User-Group, München
Der Ort: Fachhochschule München
Alle Videos der DrupalCon SF 2010

Reviews und Eindrücke anderer Teilnehmer
Drupal-Talkshow
Repanda – persönlicher Rückblick
Ralf Hendel  Networking im Drupal Camp
Karten Frohwein – Reisebericht
Planet Drupal

Allgemeine Infos zu Drupal
Die zentrale Anlaufstelle
Der Mann ist an allem schuld (DANKE!): Dries Buytaert
Hintergrundwissen & Geschichte: Wikipedia
Hervorragende Präsentation & Erläuterung von Daniel Zumstein, Schweiz

Die nächsten Drupal-Events:
Drupaldelphia (bereits gelaufen, 14. May 2010)
Drupalcamp: 5./6. Juni 2010, Timisoara/Rumänien

Installation, Bedienung, Extensions
Einfacher installieren geht nicht – die Stack-Installer von acquia
Drupal 6-Anleitung (deutsch)
Drupal 7-Anleitung (deutsch)
weitere Installations-Anleitung auf Drupal.org
Drupal-API-Extension für Dreamweaver

Tutorials
Einsteiger – sehr gutes Tutorial zu Drupal 6 (Drupal 7 Version ist bereits in Arbeit!) von Hagen Graf (deutsch)
Und für Design-Schnellstarter
Jede Menge Cheat-Sheets zu Drupal (englisch)

Drupal & Dreamweaver (Adobe-Tutorials):
Drupal-Site in 10 Schritten mit Dreamweaver CS4 (englisch)
Setting up PHP (CS4 / englisch)
Drupal Themes mit Dreamweaver erstellen (englisch)
Drupal Zen Subthemes (CS4 / englisch)
Introducion Dreamweaver CS5 (englisch)

Das gab es zu hören und zu sehen

Vorträge gab es nicht nur für die eingefleischten Drupal-Entwickler und Fans, auch Drupal-Interessierte, Neueinsteiger, Designer und Projektmanager fanden in dem breiten Angebot der Beiträge die passende Session, um einen guten, grundlegenden Eindruck der Drupal-Welt zu bekommen. Diese beindruckt vor allem durch die Hingabe und Vielfalt der unzähligen Menschen, die sich am Projekt beteiligen. Nicht umsonst hieß es deshalb sehr oft “… loves DRUPAL”.

Neben den Sessions und Vorträgen gab es auch ausreichend Freiraum, um mit anderen Teilnehmern in Kontakt zu kommen (unter anderem auf der Party am Samstagabend im extra angemieteten Repüblik) und das Orga-Team stand einem immer mit Rat und Tat zur Seite.

Drupal 7  – bereit, wenn’s fertig ist …

Sehr interessante Sessions waren der hoffentlich bald erscheinenden Version 7 von Drupal gewidmet. Momentan noch in der Alpha-4-Phase, steht einer finalen Release (Motto: “It´s ready when it´s done.”) wohl hoffentlich nicht mehr viel im Wege.

Eine ganze Reihe an Verbesserungen und Neuerungen soll die Reihe Drupal 7 beinhalten:

  • Integration der wichtigsten Module in den Core-Bestandteil wie CCK
 (bisher müssen diese Module extra nachinstalliert werden)
  • Installation der Themes und Module über die Admin-Oberfläche
  • verbesserte Medien-Integration
  • Steigerungen der Performance
  • Verbesserungen in der GUI des Backends (aufgeräumter und übersichtlicher) und Vereinfachung der Administration durch mehr Ajax-Einsatz (1 statt 3 Klicks-Prinzip)
  • und noch vieles mehr.

Warum PHP sich rechnet …

Ein weiteres Highlight des ersten Tages mit extrem hohem Unterhaltungswert war die Keynote von Johann-Peter Hartmann: “Warum PHP sich rechnet”. In seinem Vortrag nahm er vor allem die Rolle der agilen Software-Entwicklung genauer unter die Lupe, sprich, welche Auswirkungen zukünftig in der Webwelt zu erwarten sind – als da wären:

  • Wieso sich der Einsatz von PHP anstelle von Java rechnet und auch sinvoll ist.
  • Warum PHP gegenüber den klassische Anwendungssprachen wie Java oder C# nicht nur die preiswertere, sondern auch die bessere Wahl ist.

Das sah nicht nur Hartmann so, sondern auch eine Studie aus dem Hause Gardner. Schlußfolgerung: “They love Drupal”.

Was sonst noch diskutiert wurde

Weitere Sessions am Samstag und Sonntag behandelten unter anderem Themen wie eCommerce mit Drupal (Uebercart), den Einsatz von Ajax und – insbesondere – jQuery, das Standard-JavaScript-Framework von Drupal, Theme-Design (hierzu wird es bald noch eine ausführliche Tutorial-Serie geben), Social-Communities, Semantic-Web und vieles mehr.  Es ist sicherlich nicht sinnvoll, an dieser Stelle noch einmal alles ausführlich zu beleuchten. Denn es die Vorträge sind prima dokumentiert und im Internet abzurufen (siehe Linkliste). In diesem Sinne: „Danke an die Community !!!“

Ausblick: Jede Session wurde auf Video aufgenommen, die demnächst auf der Website zu finden sein werden.

Was gefehlt hat

Ein Thema habe ich allerdings vermisst, welches Drupal noch interessanter macht, als es ohnehin schon ist. 
Die seit kurzem erhältliche Integration beziehungsweise Zusammenarbeit mit Magento (Infos im Web). Und wer sich mit eCommerce beschäftigt, wird sicher schon mal was von Magento gehört haben, denn dieses System findet ebenso wie Drupal immer mehr zufriedene Anhänger.

Ausblick

Die Drupal Dev Days waren ein rundum gelungenes Event, professionell organsiert mit einer breiten Themenvielfalt, die jede Menge Infos, Tipps und Inspirationen enthielten.

Wir wollen eine Fortsetzung und freuen uns schon auf das nächste Mal wenn es hoffentlich dann einen Drupal-7-Vortrag (aktuelle Version ist momentan Drupal 7 Alpha 4) von Dries Buytaert, dem Erfinder von Drupal, gibt. “Dries you missed something special. Good luck for D7 and see you next time!” 

Und er wird kommen, denn wer sich so ins Zeug (siehe Video) legt wie die Jungs & Mädels aus München und mit Bier lockt (soll auch in der Typo3-Community stets wirken – Anmerkung der Redaktion), hat auch bei Herrn Buyaert einen Eindruck hinterlassen.

Drupal scheint also dieses Jahr und zukünftig die CMS-Welt um einiges weiter zu bereichern, denn nicht umsonst setzen mittlerweile Organsiationen (Amnesty International, das Weiße Haus, Greenpeace, die Stadt Athen) und Unternehmen (MTV, O´Reilly … ) auf dieses innovative Content-Management-System.

Ach ja – zum Schluß noch eine Message an einen der Hauptsponsoren: Gut Microsoft – diesmal habt Ihr es (MS-Server bereit für PHP) offentsichtlich schnell genug erkannt.  Mein Server läuft vorerst aber weiterhin unter Linux Red Hat.

(mm), ™

Kategorien
CMS Programmierung

Erster Schritt zum eigenen Drupal-Theme: Theme-Info-Dateien erstellen

Fertige Themes zu nutzen, ist zunächst ganz schön, um schnell zu einem brauchbaren Ergebnis zu kommen. Die Betonung liegt auf brauchbar. Individuell ist eine Lösung aus der Box nun wirklich nicht. Wenn Sie sich also daran wagen, eigene auf Ihre Bedürfnisse zugeschnittene Drupal-Themes zu kreiern, müssen Sie zuerst die notwendige Info-Datei für Drupal erstellen.
 Dieses Tutorial hilft Ihnen dabei.

Bevor es losgeht, hier noch ein paar Tipps für weiterführende Lektüre und nützliche Resourcen im Netz. Besonders hilfreich ist ein kleines Adobe-Air-Tool. Neben dieser Air-Applikation bietet die Site auch diverse Erweiterungen wie zum Beispiel eine Drupal- und auch eine jQuery-API-Extension für Dreamweaver an:

Erstellen der Theme-Info-Datei

Der Startbildschirm
Der Startbildschirm

Der Start-Bildschirm „Theme-Details
“ präsentiert sich sehr übersichtlich und aufgeräumt und fordert den Benutzer zur Eingabe der Basisinformationen auf.
 Bis auf die Eingabe zur Option des “Base-Theme” bei den erweiterten Einstellungen sind die ersten Eingaben sehr eindeutig nachzuvollziehen. Da diese aber nicht notwendig ist, kann sie unausgefüllt bleiben.

 Leider fehlt im Programm eine Hilfe oder Tooltippfunktion die dem Benutzer bei Bedarf ausführlichere Erläuterungen zu den Drupal-Themes bietet. Auch ein Screen-Shot kann für das Theme angegeben werden, allerdings muss dieser vorher als Datei (JPG, GIF oder PNG) vorliegen.

Regions & Features

Festlegung der Theme-Regionen & -Features
Festlegung der Theme-Regionen & -Features

Der zweite Options-Screen bietet dem Benutzer eine Vorauswahl der sogn. “Regions” wie Header (Kopfzeile), Footer (Fußzeile), Left (linker Seitenbereich, z.B. für die Navigation), Right (rechter Seitenbereich, zum Beispiel für Suchfeld, Artikel-Teaser etc.) und Content (Inhaltsbereich). Natürlich können hier nun einzelne Regions weggenommen oder auch hinzugefügt werden, die für individueller Designs notwendig sind.

Unter “Features” wählt der Benutzer die wesentlichen Hauptelemente des Themes ganz einfach per Checkbox aus.
Bereits hier ist also schon eine gewisse Grundkenntnis der Funktionsweise und des Template-Aufbaus von Drupal gefragt.

Stylesheets & Scripts

Eingabescreen für die festlegung der Stylesheets &  Script-Dateien
Eingabescreen für die festlegung der Stylesheets & Script-Dateien

Im dritten Screen werden nun die individuellen CSS- & Scriptdateien angegeben.
 Und schon sind wir unserem eigenen Drupal-Theme ein ganzes Stück näher gekommen, denn jetzt kann die Info-Datei generiert werden. Am besten gleich im richtigen Ordner im Drupalverzeichnis unter “sites”:

Der Pfad zum Speichern der Info-DateiDer Pfad zum Speichern der Info-Datei

Zu guter letzt, denn es geht (fast) nie ganz ohne: Handarbeit

Schauen wir uns die generierte Textdatei an:

;Generated by the Drupal 6 Theme Starter available at http://xtnd.us
name = Dr. Web
description = Test-Theme für Dr. Web Tutorial
screenshot =
base theme =
core = 6.16
engine = phptemplate
version = 1.0
php = 5.x
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[keyvisual] = Dr. Web Keyvisual
features[] = favicon
features[] = logo
features[] = name
features[] = primary_links
features[] = search
features[] = secondary_links
features[] = slogan
 stylesheets[all][] = styles.css stylesheets[print][] = print.css stylesheets[handheld][] = iphone.css stylesheets[all][] = layout-grids.css stylesheets[all][] = colors.css stylesheets[all][] = forms.css
scripts[] = drweb.js

Nicht notwendige Zeilen (fett markiert) sollten gelöscht oder per “;” auskommentiert werden.

Fazit und Ausblick

Ein kleines komfortables Tool, welches einem ein wenig Tipparbeit abnimmt, aber wohl eher für Anfänger zum Verständnis geeignet ist, die sich mit Drupal-Theming beschäftigen wollen. Der ambitionierte Themer zieht hier sicherlich die Copy-&-Paste-Methode im Editor seiner Wahl vor.

Interessant für Designer, die weniger mit Coding zu tun haben wollen, ist wohl eher die CMS-Integration von Adobe´s Dreamweaver CS5, welcher seit kurzem auch als englische Testversion verfügbar ist. Ebenso das bevorstehende Release der Dreamweaver Extension ThemeGenie in der Version 3.

(mm)

Kategorien
CMS Programmierung

50 hochwertige Themes für Drupal-Entwickler

Paul Andrew

Über Jahre hatte Drupal den Ruf, ein schwer erlernbares Content-Management-System (CMS) zu sein. Jeder Web-Entwickler wird Ihnen das bestätigen. Diese Einschätzung stimmt zwar, nimmt dem CMS jedoch einiges vom verdienten Glanz und Ruhm. Lassen Sie sich davon nicht abschrecken. Denn nachdem Sie die erste steile Lernkurve gemeistert haben, werden Sie begeistert sein, von den vielen Möglichkeiten, die Drupal Ihnen bietet. Zum Appetit anregen finden Sie hier eine Sammlung 50 hochwertiger Drupal-Themes sowie eine kurze Einführung und die Bekenntnisse eines Fans.

Drupal Homepage

Drupal behauptet seinen Platz unter den drei beliebtesten Content-Management-Systemen – nämlich WordPress, Joomla und Drupal (bezieht sich auf die USA/Anmerkung der Redaktion) – sehr gut. Zudem gibt es eine eigene, spezialisierte Entwickler-Gemeinde für Drupal. Und entgegen anderslautender Behauptungen ist Drupal ein äußerst flexibles CMS, das für nahezu jede Art von Website, jedweder Größe einsetzbar ist, ebenso wie fast alle anderen CM-Systeme auch. Es kommt natürlich immer auf die persönlichen Präferenzen und Vorlieben des Entwicklers oder der Entwicklerin an.

Diese Sammlung bietet nicht nur einige der besten frei verfügbaren sowie Premium-Drupal-Themes, sondern auch leere oder einfach gehaltene Vorlagen, die ideal dazu sind, Ihre ersten Schritte in der Drupal-Entwicklung zu wagen.

Eine Einführung in Drupal

Falls dies Ihre allerersten Schritte mit Drupal sind, wäre ein Blick in die Drupal-Grundlagen nicht schlecht. Falls Sie Video-Tutorials bevorzugen, können Sie die folgenden englischsprachigen Videos nutzen. Deutschsprachige Anleitungen gibt es im DrupalCenter.de.

9-teiliges Video-Tutorial für Drupal-Entwickler:

  1. Drupal 6, Einführung
  2. Herunterladen und Installieren
  3. Drupal einrichten
  4. Home Page Setup
  5. Eine Umfrage erstellen
  6. Drupal 6 Blocks
  7. Benutzer einrichten, Profile anlegen
  8. Drupal 6 Themes
  9. Bitnami relaunchen

Premium Drupal 6 Themes

Web Solutions

Dank seines zwei- beziehungsweise dreispaltigen Layout mit vielen Regionen im oberen Bereich, eignet sich Web Solutions hervorragend als Firmen-Website oder als Portfolio für Freiberufler im kreativen Bereich.

High Quality Themes for Drupal Developers

All Geared Up
Im wahrsten Sinne des Wortes voll gerüstet ist All Geared Up, ein sehr flexibles Theme mit zahlreichen mit einem transparenten Drop-Down-Menü als Hauptnavigation. Weitere Features: Zwei verschiedene Header-Stile, die Preface-Bereiche sind ebenfalls ein- und ausklappbar. Auch die Sidebar ist dynamisch erweiterbar und bietet zwei alternative Block-Stile.  Die Postscript-Regionen sind passend zur Site gestaltet und können in jeder beliebigen Kombination eingesetzt werden.

High Quality Themes for Drupal Developers

Platino (Demo)
Leichtes und übersichtliches Layout, garniert mit 25 flexiblen und editierbaren Regionen. Platino eignet sich hervorragend für Communities.

High Quality Themes for Drupal Developers

ZincOut (Demo )
Drei Regionen mehr bietet ZincOut. Neben den 28 Regionen enthält das Theme auch ein integriertes jQuery-Menü, Tool-Tips. Vor allem ist es individuell konfigurierbar.

High Quality Themes for Drupal Developers

Premium Business & Portfolio (Demo)
Dieses auf Unternehmen zugeschnittene Drupal Theme hat einen attraktiven Content Slider auf der Startseite sowie einen integrierten Blog und eine Portfolio-Seite. Die aktuellen Blogposts und Kommentare werden im Footer angerissen. Außerdem enthalten die Footer-Regionen einen Bereich für Werbung und Twitter-Integration.

High Quality Themes for Drupal Developers

Kontroller (Demo)

Kontroller bietet ein einfaches, klar strukturiertes Layout – wenn auch etwas überladen. Das Aussehen ist einfach via CSS-Datei an eigene Bedürfnisse anzupassen und hat eine verständliche Verwaltung für die Startseite.

High Quality Themes for Drupal Developers

ThemeNews Drupal News (Demo)
Das Layout-Raster dieses Themes im Magazin-Stil hat eine Sidebar, die ideal für Online-Anzeigen von 125×125 Pixeln geeignet ist. Das Farbschema ist via CSS-Datei frei adaptierbar. Das Theme lässt sich leicht installieren. Wer Hilfe braucht, kann in der mitgelieferten Schritt-für-Schritt-Anleitung nachschauen.

High Quality Themes for Drupal Developers

Magazine Plus (Demo)

Gut geeignet für Musik- oder Film-Magazine oder Blogs: Magazine Plus ist einfach konfigurierbar und bietet alles, was eine Community-Plattform oder ein Weblog braucht.

High Quality Themes for Drupal Developers

Black Portfolio (Demo)
Mit einem integrierten jQuery-Content-Slider und einer erweiterbaren Portfolio-Seite präsentiert sich Black Portfolio, das sich damit besonders für Webdesigner, Fotografen und andere Kreative eignet.

High Quality Themes for Drupal Developers

Smart Interiors (Demo)
Schlicht und schön: Smart Interiors glänzt mit einer Foto-Galerie auf der Startseite – ideal für Designer und (Innen)Architekten.

Freie Themes im Stil von Magazinen und Zeitungen

Alphorn (Demo)

High Quality Themes for Drupal Developers

Blog Grail (Demo)

High Quality Themes for Drupal Developers

Analytic (Demo)

High Quality Themes for Drupal Developers

Conch (Demo)

High Quality Themes for Drupal Developers

960 Robots (Demo)

High Quality Themes for Drupal Developers

Freie Themes für den kommerziellen Gebrauch

Orange (Demo)

High Quality Themes for Drupal Developers

Summertime (Demo)

High Quality Themes for Drupal Developers

Acquia Prosper (Acquia Prosper Demo)

High Quality Themes for Drupal Developers

Chrono (Demo)

High Quality Themes for Drupal Developers

Corporate Website (Demo)

High Quality Themes for Drupal Developers

Acquia Slate

High Quality Themes for Drupal Developers

Zero Point (Demo)

High Quality Themes for Drupal Developers

D4rk (Demo)

High Quality Themes for Drupal Developers

Freie Blog Themes für Drupal

Dessert (Demo)

High Quality Themes for Drupal Developers

BlogBuzz (Demo)

High Quality Themes for Drupal Developers

Browny (Demo)

High Quality Themes for Drupal Developers

Gateway (Demo)

High Quality Themes for Drupal Developers

Elements Theme (Demo)

High Quality Themes for Drupal Developers

Mulpo Theme (Demo)

High Quality Themes for Drupal Developers

id-Facta (Demo)

High Quality Themes for Drupal Developers

Alpha

High Quality Themes for Drupal Developers

Dingus

High Quality Themes for Drupal Developers

Fusion Theme (Demo)

High Quality Themes for Drupal Developers

Beach (Demo)

High Quality Themes for Drupal Developers

Arclite (Demo)

High Quality Themes for Drupal Developers

Mystique (Demo)

High Quality Themes for Drupal Developers

Pixel (Demo)

High Quality Themes for Drupal Developers

Internet Encyclopedia

High Quality Themes for Drupal Developers

Nitobe

High Quality Themes for Drupal Developers

Light (Demo)

High Quality Themes for Drupal Developers

Twittish

High Quality Themes for Drupal Developers

Freie, aus WordPress portierte Themes für Drupal

Magazeen

High Quality Themes for Drupal Developers

Arthemia

High Quality Themes for Drupal Developers

Colourise (Demo)

High Quality Themes for Drupal Developers

Color Paper (Demo)

High Quality Themes for Drupal Developers

Agregado

High Quality Themes for Drupal Developers

AD The Morning After (Demo)

High Quality Themes for Drupal Developers

Leere Vorlagen und Starter Themes für Entwickler

Zen
Sollten Sie Drupal zum ersten Mal einsetzen, um eigene standardkonforme Themes zu entwickeln, wird Zen Ihnen die Arbeit erheblich erleichtern.

Zen bietet ein vorgefertigtes, sauberes und einfaches Layout mit ein, zwei oder drei Spalten. Sie können zwischen fester und flexibler Breite wählen. Außerdem stehen im HTML-Markup die Inhaltsbereiche vor den Sidebars und der Hauptnavigation, zwecks besserem Zugang und Suchmaschinenoptimierung.

Auch sehr hilfreich: Das Theme ist mit einer hervorragenden Online-Dokumentation und einer Fülle von Kommentaren sowohl im PHP-Template als auch im HTML (page.tpl.php, node.tpl.php).

High Quality Themes for Drupal Developers

Beginning Blank Canvas
W3C-konform ist das Beginning-Theme für Entwickler. Es erlaubt wahlweise eine, zwei oder gar keine Sidebar und bietet zehn editierbare Regionen.

High Quality Themes for Drupal Developers

Framework Blank Canvas
Ein weitere anwenderfreundliche Vorlage ist Framework Blank Canvas mit einem Baseline-Gitter aus 24 Spalten und 950 Pixel fester Breite für ein-, zwei- und dreispaltige Layouts.

High Quality Themes for Drupal Developers

Genesis Starter Theme
Genesis ist das erste und soweit beste Framework zum Entwickeln von Drupal-6-Sub-Themes. Genesis bietet sehr flexible Layout-Optionen und ist einfach in drei Schritten zu installieren.

Eine gute Dokumentation und eine Sammlung von Video-Tutorials sind weitere Pluspunkte: Genesis Video Collection.

High Quality Themes for Drupal Developers

Blueprint Starter Theme
Blueprint ist ein Starter Theme, das – wie der Name schon sagt – auf dem CSS-Framework Blueprint aufsetzt. Wie alle Starter Themes hat es ein sehr flexibles Layout für ein bis drei Spalten und Konfigurationsmöglichkeiten, für die Platzierung der Blöcke (rechts, links, mittig).

High Quality Themes for Drupal Developers

Basic
Ursprünglich als vereinfachte Zen-Version (siehe oben) gestartet, hat Basic sich nun zu einem eigenständigen Starter Theme mit sauberer HTML-Struktur und erweiterbaren CSS-Klassen und -IDs und einem Top-Down-Ladevorgang, zwecks besserer Suchmaschinen-Ergebnisse.

High Quality Themes for Drupal Developers

Fusion

Mächtiges Framework mit vielfältigen Layout- und CSS-Optionen, die Sie durch Drupals Anwenderschnittstelle konfigurieren können. Fusion basiert auf einem vereinfachten Layout mit 960 Pixel fester Breite beziehungsweise einem flexiblen 16-Spalten-Gitter.

Es beinhaltet ein kommentiertes „Starter“ Sub-Theme für einfache CSS-Stylesheets. Zudem bietet es viele Helfer-Klassen für noch einfacheres Drupal-Theming.

High Quality Themes for Drupal Developers

(mm), ™

Kategorien
CMS Programmierung

Einblick in das CMS „TYPOlight“

Soll eine Website ohne Programmier-Kenntnisse gepflegt werden, kommt man um den Einsatz eines Content-Management-Systems (CMS) fast nicht herum. Content-Management-Systeme wie WordPress oder Typo3 sind recht bekannt und weit verbreitet. WordPress ist allerdings nicht für jedes Webprojekt geeignet. Auch beim Einsatz von Typo3 steht dem Entwickler zunächst etwas Arbeit bevor. Für den schnellen und einfachen Einsatz empfiehlt sich ein „leichtgewichtiges“ CMS, so wie etwa TYPOlight.

Das Content-Management-System TYPOlight erschien erstmals 2004. Der Name lässt annehmen, dass dieses CMS eine abgespeckte Version von Typo3 darstellt, dies ist allerdings nicht der Fall. TYPOlight ist ein komplett eigenständig entwickeltes System und keine Abspaltung oder eine Unter-Version eines anderen CMS. Bei TYPOlight handelt es sich um ein Backend-basiertes System. Die gesamte Administration der Seite und die Bearbeitung der jeweiligen Inhalte geschehen somit über eine spezielle Verwaltungsoberfläche. Wird eine Seite bearbeitet, kann das tatsächliche Erscheinungsbild, so wie es die Besucher später im Browser sehen, jederzeit über einen entsprechenden Button im Backend angezeigt werden.

Installation

Die Installation des Systems ist über das Installationsskript ein Kinderspiel. Insgesamt sind dazu nur sieben Schritte notwendig. Der erste und sicherlich wichtigste Schritt, ist die Vergabe eines neuen Passwortes für das Installations-Tool.


TYPOlight Installtool

Im zweiten Schritt verlangt das Installationsskript einen Sicherheitsschlüssel. Dieser Schlüssel wird bei TYPOlight zur verschlüsselten Datenspeicherung genutzt. Das entsprechende Feld muss allerdings nur ausgefüllt werden, wenn es bereits verschlüsselte Daten gibt. Wird das Feld bei der Installation leer gelassen, so generiert das Skript einen zufälligen Schlüssel.

Die nächsten drei Schritte befassen sich mit der Datenbank. Zunächst müssen selbstverständlich die Zugangsdaten zu der gewünschten MySQL-Datenbank eingegeben werden. Anschließend wird die Kollation – das heißt die Anordnung der Datenbanktabelle – festgelegt und dann die Tabellen für das CMS importiert.

Ist bereits ein Template für das System vorhanden, kann es nun ausgewählt und gespeichert werden. Vorteilhaft ist, dass von TYPOlight ein Default-Template (eine fiktive Music Academy) zum Antesten mitgeliefert wird.

Zum Schluss der Installation wird nur noch der eigene Administratoraccount angelegt. Das Content-Management-System ist nun bereits in vollem Umfang funktionsbereit.


TYPOlight Musterseite Music Academy

Erweiterungen und Templates

Natürlich lässt sich das Content-Management-System TYPOlight auch mit Plugins erweitern. Zwar ist die Fülle der angebotenen Erweiterungen bei weitem nicht so groß wie etwa bei WordPress, dennoch lassen sich einige auf der Extensionseite von TYPOlight finden. Auch fertige Templates werden von den Herausgebern des CMS angeboten. Diese sind allerdings nicht kostenlos, sondern ab 49,00 Euro erhältlich. Kostenlose Templates lassen sich bisher leider nur vereinzelt etwa über Google finden.

Funktionsweise

Die Verwaltung der Webseite ist seitenbasiert und hierarchisch aufgebaut. So ist die Grundlage zum Einfügen von Inhalten eine Seitenabfolge, die je nach Wunsch unterschiedlich strukturiert werden kann. Der Inhalt einer Seite wird über so genannte Artikel gepflegt. Dabei können mehrere Artikel auf einer Seite eingefügt werden. Ein Artikel besteht wiederum aus einem oder mehreren Inhaltselementen wie beispielsweise Text, Aufzählungen, Tabellen, Akkordeon, Code, Bilder, Galerie, Formular oder sonstigen Modulen.

Auf Basis der zentralen Seitenstruktur ist das wichtigste Element des Content-Management-Systems das Zusammenspiel von Seiten, Artikeln, Inhaltselementen und Modulen. Besucher rufen grundsätzlich nur die Seiten der Website auf. Ein Aufruf von einzelnen Artikeln, die Bestandteil einer festen Seite sein müssen, ist hier im Gegensatz zu einem Node-basierten CMS nicht möglich.

Backend

Um das Backend von TYPOlight aufzurufen, muss ähnlich wie bei WordPress und Typo3 ein bestimmter Ordner auf dem Webserver angesprochen werden. Hängt der Administrator /typolight an die URL der Webseite dran, gelangt dieser zum Login-Bereich. Dieser ist natürlich gegen Missbrauch geschützt. Auch dadurch, dass bei drei hintereinander falsch eingegebenen Passwörtern das jeweilige Konto für fünf Minuten gesperrt wird.

Das Backend von TYPOlight ist sehr übersichtlich gestaltet. Es unterteilt sich in zwei Bereiche, links die Navigation und rechts der jeweilige Bearbeitungsbereich. Die Navigation enthält nur die Punkte Inhalte, Layout, Benutzerverwaltung, System, Benutzerfunktionen. Somit ist auch die Navigation sehr schlicht und einfach gehalten.


Startseite vom Backend

Seitenlayouts

Artikel enthalten die jeweiligen Inhalte einer Seite. Das Seitenlayout hingegen legt fest, wie diese Inhalte dem Besucher der Webseite dargestellt werden. Das Design der Website entsteht hierbei durch eine Kombination aus Seitenlayouts und Stylesheets. Das CMS enthält von Haus aus ein integriertes CSS-Framework. Mit dem CSS-Framework-Builder ist es für Administratoren möglich, auch ohne tiefergehende HTML-Kenntnisse ein Layout zu erstellen.

Die Seitenlayouts bestimmen bei TYPOlight den eigentlichen Aufbau einer Seite, also etwa die Gesamtbreite, Anzahl Spalten oder welche Frontend-Module an welcher Stelle angezeigt werden sollen. So wird das Layout mit einigen Klicks nach und nach zusammen gestellt. Über dieses Verfahren können sogar ohne Programmierkenntnisse eigene Stylesheets, RSS- beziehungsweise Atom-Feeds oder die eigene Google Analytics ID und sonstiger beliebiger JavaScript-Code eingebunden werden.


Bearbeitung eines Seitenlayouts

Module

TYPOlight verfügt über eine Sammlung von fertigen Modulen, die in das Seitenlayout eingefügt werden können. So ist es etwa sehr einfach, ein Navigationsmenü, das aus der Seitenstruktur generiert wird, in die Seite einzubinden. Module können aber auch weitere Elemente wie eine Sitemap, ein Login-Formular, ein fertiges Formular zur Registrierung oder zur Bearbeitung von Benutzerdaten oder aber auch eine Suchmaschine, ein Flash-Film oder ein Zufallsbild sein. Natürlich ist es möglich, jedes Modul individuell mit einem Zugriffsschutz zu versehen.

Aber auch aufwändigere Module stehen für den sofortigen Einsatz zur Verfügung. Auf Wunsch kann ein komplettes News/Blog-Modul eingebunden werden. Dieses ist ein Teil der Core-Distribution und unterstützt eine Archivfunktionalität, Kategorien, Kommentare von Besuchern, hervorgehobene Beiträge und natürlich eine RSS- oder Atom-Feed-Funktion.

Auch das direkt in der Core-Distribution integrierte Newsletter-Modul ist sehr interessant. Es unterstützt nicht nur Abonnements über Double-Opt In sondern auch das Verschicken von Nachrichten im HTML- oder Textformat. Ist bereits eine bestehende Liste von E-Mailadressen vorhanden, so kann diese mit der fertigen Importfunktion als CSV-Datei importiert werden.


Übersicht Module

Neben der Blog- und Newsletter-Funktionalität steht dem Administrator auch die einfache Integration eines Kalenders bereit. Dabei unterstützt diese Funktion ganztägige Events, Events mit offenem Ende, mehrtägige Event und wiederholte Events. Auch hier ist möglich, einen eigenen RSS- oder Atom-Feed zu implementieren. Um die verschiedenen Events den Besuchern der Webseite zu präsentieren, stehen verschiedene Ansichten wie zum Beispiel Kalender, Mini-Kalender oder Eventliste zur Verfügung.

Rechteverwaltung

Das Content-Management-System verfügt über ein leistungsstarkes aber trotzdem leicht zu handhabendes Rechte-System. TYPOlight unterscheidet zwischen Mitgliedern und Benutzern, wobei Mitglieder Zugriff auf geschützte Bereiche im Frontend erhalten und Benutzer Zugriffsrechte im Backend.

Durch das aufwändige Rechtesystem kann der Zugriff bis ins kleinste Detail gesteuert werden. Auf diesem Wege ist es dem Administrator möglich, den Zugriff auf die verschiedenen Module sowie die einzelnen Formularfelder genau zu reglementieren. Zugriffsrechte können nicht nur auf Benutzerebenen vergeben werden, sondern auch für Gruppen. So können beispielsweise Redakteure nur Artikel erstellen und bearbeiten, nicht aber das Layout verändern.


Benutzerrechte bearbeiten

Sonstiges

Die Entwickler von TYPOlight haben auf eine Vielzahl verschiedener Aspekte geachtet. So sind beispielsweise sprechende URLs zur Steigerung der Suchmaschinenfreundlichkeit von Haus aus integriert.

Auch eine mehrsprachige Website lässt sich mit diesem CMS realisieren. Dazu wird die fertige Seitenstruktur mit den Inhalten in der Standardsprache, zum Beispiel Deutsch, kopiert. Anschließend werden alle Texte übersetzt. Das Content-Management-System liest beim Besuchen der Webseite die Browsersprache aus und leitet den Besucher automatisch auf die jeweilige Sprachversion um.

Fazit

Das Content-Management-System TYPOlight ist jedem zu empfehlen, der sich nicht mit tiefergehender Programmierung beschäftigen möchte. Die verschiedenen bereits komplett fertig eingerichteten Module können schnell und einfach mit wenigen Klicks auf die Website eingefügt und genutzt werden.

Das CMS erinnert an einen großen Baukasten, bei dem es allerhand verschiedene Bausteine gibt. Diese Bausteine muss der Administrator nur noch je nach Bedarf zusammensetzen.

(mm), ™

Kategorien
CMS Programmierung

Tomato CMS 2.x – Newcomer aus Vietnam

Schon die Herkunft dieses recht neuen Content Management Systems (CMS) weckt Interesse. Die TIG Corporation, die das Produkt TomatoCMS als Open Source entwickelt, hat ihren Sitz in Hanoi City. Möglicherweise sind das nicht die besten Voraussetzungen, um TomatoCMS erfolgreich in den USA einzuführen, aber hierzulande könnte es gelingen. Falls die Funktionalität internationalen Ansprüchen genügen kann natürlich. Schaun mer mal…

logo-w500.png

Zielgruppe

TomatoCMS will ausweislich der optisch und technisch ganz ansprechenden Website das CMS für jeden Einsatzzweck sein. Aus dem nicht ganz einwandfreien Englisch der Produkt-Site lässt sich entnehmen, dass TomatoCMS komplett modular aufgebaut ist.

TomatoCMS unterscheidet in Module, Templates und Plugins, was zunächst einen sehr flexiblen Zuschnitt auf den jeweiligen Einsatzzweck vermuten lässt. Anders als so manch anderes größeres CMS eignet sich TomatoCMS dem Vernehmen nach auch sehr gut als Blogsystem, was das Produkt-Blog zu beweisen vermag. Das Template des TomatoCMS-Blog wird übrigens mitgeliefert, zerschießt aber im Backend (!) die Dropdownnavigation.

TomatoCMS rühmt sich damit, DAS CMS auf der Basis des Zend Framework zu sein. Außerdem finden jQuery sowie das CSS-Framework 960.gs Verwendung. Letzteres stuften wir bei Dr. Web ja auch schon einmal als tauglich ein – genügend Gründe also für einen intensiveren Produkttest.

Grundlegendes

Wenn man bereits weiß, dass TomatoCMS auf dem Zend Framework basiert, wird man sich nicht wundern, dass das Gesamtsystem mit gepackten 7,23 MB und entpackten 27,7 MB mit 3.624 Dateien in 819 Ordnern nicht eben zu den Leichtgewichten gezählt werden kann.

In Sachen Systemvoraussetzungen setzt TomatoCMS auf aktuelle Standards. Es besteht auf einem Apache Webserver, PHP ab Version 5.2 und MySQL ab Version 5.0. An PHP Erweiterungen werden gd, json, mbstring, mysql, pdo, pdo_mysql, simplexml, xml, xmlreader und zip benötigt. Mein Webspace bei All Inkl erfüllt alle Voraussetzungen, im Grunde dürfte es bei aktuellem Standard-Webspace keine Probleme geben. Immerhin hat sogar 1&1 bereits auf MySQL 5 in den Webhosting-Produkten umgestellt.

Installation

Die Installation läuft im Grunde typisch ab. Sie laden das Komplettpaket von der Website herunter, entpacken es und geben Ihrem Lieblings-FTP-Client den Auftrag, das entpackte Verzeichnis auf Ihren Webspace hoch zu laden.

Ich richte stets vor dem Upload eine Subdomain sowie eine entsprechende MySQL-Datenbank ein, so dass ich im Rahmen des jeweiligen Installationsscripts nicht erst ins Provider-Backend wechseln muss.

Befindet sich TomatoCMS auf Ihrem Webspace, was aufgrund der Größe durchaus eine kleine Geduldsprobe darstellt, sollten Sie zuächst die Schreibberechtigungen für die Verzeichnisse app/templates, temp und upload, sowie auf die Dateien app/config/layout.ini und app/config/app.ini setzen. Die app.ini entspricht hinsichtlich ihrer Aufgabe sehr weitgehend der wp-config.php, die viele von Ihnen sicherlich aus WordPress kennen. Die app.ini wird im Zuge der Installation automatisch bestückt und enthält die wesentlichsten Informationen zum Betrieb des Systems, wie die Datenbankverbindung und die zu verwendende Sprache.

In der zum Testzeitpunkt aktuellen Version 2.0.2 existiert ein Installscript, das recht zuverlässig arbeitet und in meinem Fall simpel per Aufruf der zuvor eingerichtetetn Subdomain gestartet wurde. Da ich die Berechtigungen nicht im Vorfeld gesetzt hatte, sah mein Installationsscreen so aus und ich kam mangels Next-Button nicht weiter:

01-install-errors-w500.png

Nach Setzen der erforderlichen Berechtigungen widersetzte sich TomatoCMS nicht länger.

02-install-sin-errors-w500.png

Im nächsten Schritt fragt TomatoCMS Sie    nach Informationen  zur Datenbankverbindung, den Grundeinstellungen der Website, dem Starttemplate und der zu verwendenden Zeitzone. Lassen Sie sich nicht irritieren. TomatoCMS schlägt bereits Daten für die Datenbankverbindung vor. Das hat keinen weiteren Hintergrund. Überschreiben Sie einfach den Vorschlag mit Ihren eigenen Daten.

03-config-w500.png

Haben Sie alle erforderlichen Eingaben getätigt, teilt TomatoCMS Ihnen das temporäre Login mit und bittet um den finalen Installationsbutton-Druck.

04-install-complete-w500.png

Je nachdem welches Template Sie für den ersten Start ausgewählt haben, sehen Sie einen der beiden folgenden Screens:

05-first-start-empty-w500.png

Der Startbildschirm von Tomato CMS

05b-first-start-empty-blog-w500.png

Das Blog von Tomato CMS ist mit Vorsicht zu genießen.

Hinweis: Wählen Sie zunächst das Template Website, da das Blogtemplate die obere Navigation des Backend zerschießt (jedenfalls im Chrome, Firefox und Internet Explorer). Ohne funktionierende Dropdownnavi macht der Start ins TomatoCMS keine rechte Freude …

Erste Schritte

Um ins Backend zu gelangen, gibt es nirgends einen Link, den Sie klicken könnten. Stattdessen geben Sie in meinem Beispiel tomatocms.blogmanufaktur.de/admin ein. Es gab übrigens Probleme, wenn TomatoCMS in ein Unterverzeichnis installiert wird (zum Beispiel www.blogmanufaktur.de/tomatocms/admin). Diese Probleme sollen nach Aussage der Entwickler mittlerweile behoben sein. Da ich stets die Subdomain-Variante vorziehe, habe ich das Problem ohnehin nicht.

06-admin-login-w500.png

Haben Sie sich erstmals erfolgreich ins Backend eingeloggt, ändern Sie bitte sofort unter Account > Change Password Ihr Passwort. Das Backend, das hier wie in WordPress Dashboard heißt, begrüßt Sie recht übersichtlich:

07-admin-dashboard-start.png

Das Dashboard rekrutiert sein Layout aus der Darstellung der für die Website installierten Module und kann daher sehr schlank, aber auch sehr beladen daherkommen. Der Vorteil an der Sache: Der User sieht immer nur Möglichkeiten, die er in der konkreten Website auch tatsächlich hat. Bei der Gelegenheit wird auch klar, dass TomatoCMS immer nur eine einzelne Website verwalten kann.

Ein Modul nach Lesart TomatoCMS stellt eine bestimmte Funktionalität, beispielsweise die Kommentarfunktion, Anzeigen, Multimediaeinbindung oder Umfragen zur Verfügung. Alle Funktionen sind als Module realisiert.

Soll so ein Modul nun auf der Website auch optisch zum Zuge kommen, bedarf es neben dem Modul noch eines korrespondierenden Widgets, das die Anzeige der jeweiligen Funktion übernimmt. So wie sich die Funktionalität komplett aus Modulen generiert, wird die Optik komplett durch Widgets bestimmt, die unter Verwendung des 960.gs auf der einzelnen Seite frei beziehungsweise 960.gs-konventionskonform angeordnet werden können. Dazu weiter unten etwas mehr.

In Sachen Benutzerverwaltung unterstützt TomatoCMS das Rollenmanagement unter Verwendung von Usern und Usergroups. Rechte können sehr fein granuliert für jedes Modul und dessen Unterfunktionen vergeben werden.

Nicht gut gelöst ist die Multilingualität. Zwar kann TomatoCMS grundsätzlich in allen Sprachen der Welt, auch LTR betrieben werden, jedoch ist es erforderlich, für jedes Modul eine separate Sprachdatei zu erstellen und im jeweiligen Unterverzeichnis des Moduls abzulegen. Das hätte man sich weit einfacher vorstellen können, ist aber dem Konzept geschuldet, dass jedermann weitere Module frei entwickeln können soll. Im Falle fehlerhafter Modulübersetzungen fällt es nicht auf die Sprachdatei als Ganzes zurück ;-).

Die Aktivierung einer anderen Sprache hingegen ist einfach. Dazu öffnet man am besten die app.ini, die man so wenigstens auch etwas besser kennenlernt und platziert den gängigen Sprachcode:

08-config-app-ini-w500.png

Ist für ein Modul die gewünschte Sprache nicht vorhanden, soll die Standardsprache – also Englisch – verwendet werden. Die Sprachdateien können per Backend dialoggesteuert angelegt werden. Praktikabler erscheint mir aber das Herunterladen der jeweiligen englischen Sprachdatei mit nachfolgendem Übersetzen en bloc.

Oberflächendesign

Grundsätzlich ist das Layouten eines Templates für TomatoCMS aufgrund der Verwendung des 960.grid recht einfach. Dies vor allem deshalb, weil 960.gs gut dokumentiert ist und von daher keine tiefgreifenden Codeanalysen im Beispieltemplate erforderlich werden. Da habe ich in anderen Systemen schon die dollsten Sachen erlebt.

Noch toller aber wäre es, wenn der integrierte Layout-Editor des TomatoCMS funktionieren würde. Dessen im Grunde beeindruckende Funktionalität beschreibt das folgende YouTube-Video:

Danach hat der Layout-Editor vollen Zugriff auf das Grid-Framework und ist so theoretisch in der Lage, auch Personen, denen das Layouten mit 960.gs eher fremd erscheint, die Nutzung aller Layoutvarianten zugänglich zu machen. Leider ist es mir nicht gelungen, den Layout-Editor, der über das Dashboard unter Extend > Template > List Of Pages > Edit Layout aufgerufen wird, zu benutzen. Stets versucht der Editor eine Datei aufzurufen, die es im entsprechenden Verzeichnis nicht gibt, was letztlich zu einem „failed to open stream“ führt. Schade, denn der Layout-Editor könnte ein echter Alleinstellungspunkt sein.

Zudem erscheint mir die Einbindung der diversen Bibliotheken technisch stark verbesserungsbedürftig zu sein. So gibt es immer wieder Darstellungsfehler und nicht funktionierende Elemente im Backend, ohne dass man ein Fehlermuster erkennen könnte.

Fazit: TomatoCMS ist ein junger, aber interessanter Mitbewerber in der Arena der CMS. Derzeit ist er nicht ausgereift genug, um ihn ernsthaft für die produktive Nutzung in Erwägung zu ziehen. Ich prophezeie auch, dass TomatoCMS kurzfristig unter einem anderen Namen auftreten wird, denn die Bezeichnung TomatoCMS wird vom britischen Tomatonetwork bereits seit Jahren für ihr eigenes, geschlossenes KaufCMS verwendet. Dass man selbst den Namen nicht ordentlich recherchiert hat, passt ins insgesamt unreife Gesamtbild der vietnamesischen CMS-Hoffnung. In jedem Falle aber sollte man TomatoCMS oder wie auch immer es bald heißen mag, in Zukunft mindestens aus dem Augenwinkel beobachten.

Kategorien
CMS

Website Baker CMS – flexibel und einfach zu bedienen

Das Content Management System WebsiteBaker wurde 2004 als Open Source von dem Australier Ryan Djurovich ins Leben gerufen. WebsiteBaker sollte von Anfang an ein praxistaugliches Content Management System (CMS) sein, das sich ohne Expertenwissen erschließt, einfach zu bedienen ist und ein rasches Erstellen von Web-Seiten ermöglicht.

Wie viele andere Open-Source-Projekte erlebte auch WebsiteBaker nicht nur ruhige Zeiten. Im Herbst 2008 gab Ryan Djurovich seinen Rückzug aus dem Projekt bekannt und löste heftige Diskussionen über die Zukunft von WebsiteBaker aus. Seinen richtungsweisenden Einfluss auf die Community hatte Ryan Djurovich zu diesem Zeitpunkt bereits verloren, an der aktiven Entwicklung war er schon längere Zeit nicht mehr beteiligt.

Einer kleinen und engagierten Gruppe war klar, dass eine konsequente Weiterentwicklung eine solide Basis für eine größere, aktivere Gemeinschaft erfordert. Hierzu wurde ein nach deutschem Recht eingetragener und als gemeinnützig anerkannter Verein gegründet, der über alle Rechte an WebsiteBaker verfügt. WebsiteBaker Org e.V. versteht sich ausdrücklich als internationale Gemeinschaft und Garant für ein anhaltendes Engagement.

Seitenbaum zur Verwaltung der einzelnen Webseiten (Argos Backend-Theme)

Inzwischen ist eine geschäftige Ruhe eingekehrt. WebsiteBaker 2.8 erschien im Sommer 2009 und war ein wichtiger Meilenstein für die weitere Entwicklung, vor allem jedoch für das Selbstbewusstsein der Gemeinschaft.

WebsiteBaker kann und will sich nicht mit den Platzhirschen unter den Content Management Systemen, wie Typo3, Joomla oder Drupal messen – gleichwohl hat es sich still und leise einen festen Platz in der CMS-Landschaft erarbeitet. Bei anhaltend steigender Tendenz verzeichnet WebsiteBaker inzwischen über 5.000 Downloads und mehr als 37.000 Besucher im Monat. Der Anteil an deutschsprachigen Besuchern ist überraschend hoch und liegt zwischen 35 und 40 Prozent.

Erste Schritte

Die Systemanforderungen von WebsiteBaker sind gering, der Webserver sollte über PHP 5.2x und MySQL 4.x verfügen. Der Safe Mode muss ausgeschaltet sein.

Das aktuelle Release 2.8.1 vom Februar 2010 ist komprimiert knapp 4 MB groß und rasch heruntergeladen.  Die vollständige Installation dauert einschließlich FTP-Transfer auf den Webserver nicht länger als 10 Minuten – die Kenntnis der MySQL-Zugangsdaten vorausgesetzt. Besonderes Fachwissen ist nicht erforderlich.

WebsiteBaker begrüßt den Anwender mit einem übersichtlichen Backend, das sich in sieben (fast) selbsterklärende Funktionsbereiche gliedert:

  1. Seiten,
  2. Erweiterungen,
  3. Optionen,
  4. Benutzerverwaltung,
  5. Medien,
  6. Einstellungen,
  7. Admin-Tools.

Über die Optionen werden grundlegende Parameter festgelegt, zum Beispiel die Beschreibung der Website und Schlüsselwörter, die verwendet werden sollen, falls diese Angaben für eine einzelne Seite fehlen. Empfehlenswert ist das Einschalten des Seiten-Mülleimers. Gelöschte Seiten können so bei Bedarf wieder hergestellt werden. Bei WebsiteBaker lässt sich jeder Seite ein Template (Designvorlage) zuordnen. Über die Optionen legen Sie das Standard-Template fest. Ebenso kann das so genannte Backend-Theme gewechselt werden und so nicht nur das Aussehen sondern auch die Funktionalität des Backend beeinflusst werden. Die Einstellungen für den Versand von E-Mails durch das CMS werden ebenfalls über die Optionen festgelegt.

Tipp: Es lohnt sich, das Backend-Theme argos_theme auszuprobieren, das zum Beispiel im Medien-Bereich das automatische Entzippen von Archiven oder die automatische Begrenzung von Bildabmessungen ermöglicht.

Der Funktionsbereich Einstellungen dient der persönlichen Anpassung von E-Mail Adresse, Passwort, Zeitzone und Spracheinstellung für das Backend. Die Benutzerverwaltung ermöglicht die Vergabe von spezifischen Rechten für Benutzergruppen und einzelnen Benutzern. Über Erweiterungen lassen sich zusätzliche Module (Add-ons), Templates (Designvorlagen) sowie Sprachen hinzufügen und entfernen. Über Medien werden Grafiken, Animationen und sonstige Dateien verwaltet, die über die Website zur Verfügung gestellt werden.

Ein gründlicher Blick in die Admin-Tools lohnt sich. Die Funktion der meisten Verwaltungsprogramme erschließt sich dem Anwender automatisch. Interessant ist der JavaScript Admin: Hier verstecken sich unter anderem komfortable Drag-&-Drop-Funktionen für den Seitenbaum. Diese zu aktivieren ist empfehlenswert.

Eine der interessantesten Eigenschaften von WebsiteBaker sind die Droplets, die über die Admin-Tools verwaltet werden.

Eine Seite mit dem WYSIWYG Editor bearbeiten (TinyMCE und Argos Backend-Theme)

Droplets ermöglichen die Ausführung von PHP-Code an beliebigen Stellen, so lassen sich etwa mitten im Fließtext personalisierte Anreden einfügen, innerhalb von Templates Datenbankabfragen durchführen oder besondere Fähigkeiten realisieren. Der Phantasie sind hier keine Grenzen gesetzt.

Eingefügt werden Droplets im WYSIWYG-Editor durch Anklicken eines entsprechenden Symbols und Auswahl des gewünschten Droplets in einer Dialogbox. In Templates und Modulen wird der entsprechende Aufruf an der gewünschten Stelle platziert.

Die Erstellung und Verwaltung von Seiten ist bei WebsiteBaker so einfach, wie man es von einem Content Management System erwartet.

Beim Hinzufügen von neuen Seiten wird zunächst der Menütitel festgelegt. Aus diesem Titel generiert WebsiteBaker automatisch den Dateinamen und erzeugt eine physikalische Datei, die für die Anzeige der entsprechenden Seite sorgt. Diese sprechenden Dateinamen bilden zusammen mit der Möglichkeit, Seitentitel, Seitenbeschreibung und Schlüsselwörter für jede Seite individuell festzulegen, die Grundlage für ein sehr suchmaschinenfreundliches CMS.

Bei WebsiteBaker können Webseiten nicht nur als Inhaltsseiten mit Texten und Bildern angelegt werden, hier können ebenso Formulare oder andere Module verwendet werden. Darüber hinaus können innerhalb einer Seite beliebig viele Abschnitte definiert werden. So kann eine Seite beispielsweise aus einem Inhaltsbereich mit Text und Fotos, einem Formular und einem weiteren Inhaltsbereich bestehen.

Worin liegt der Reiz und die Stärke von WebsiteBaker?

WebsiteBaker ist rasch installiert, übersichtlich und einfach zu handhaben. Die Einarbeitungszeit ist, gerade im Vergleich zu den großen CMS, sehr gering. Ebenso einfach ist das Erstellen oder Anpassen von Templates. Für die Erweiterung der Grundfunktionen steht eine Vielzahl von Modulen zur Verfügung. Darüber hinaus können über Droplets mit geringem Aufwand weitere Funktionen bereit gestellt werden. Die leichte Handhabung des CMS ermöglicht auch jenen Betreibern, die ihre Website nicht selbst erstellt haben, ein schnelles Verständnis der Grundfunktionen.

WebsiteBaker ist sehr flexibel und kosteneffektiv und eignet sich besonders für die rasche Realisierung von Webpräsenzen. WebsiteBaker empfiehlt sich aber vor allem für die Umsetzung von speziellen Kundenwünschen – Anpassungen und Erweiterungen sind schnell und problemlos möglich.

Weiterführende Links und Tipps

Kategorien
CMS

Eigene Homepage kostenlos erstellen mit uCoz

Seit einiger Zeit gibt es zunehmend Anbieter im Bereich des kostenlosen Webhosting. Bei den einen kann man kostenlos seine HomePage einrichten, bei anderen sogar ein ausgewachsenes Forum mit Moderator und allem was dazu gehört.
Das CMS von uCoz hebt sich als internationale Plattform allein schon aufgrund seines umfangreichen Angebotes von anderen kostenlosen Mitbewerbern ab. Keiner der Konkurrenten kann da mithalten. Es bietet seinen Anwendern, von der Erstellung einer einfachen HomePage mit Gästebuch über ein anspruchsvolles Forum bis hin zum beeindruckenden Informationsportal (fast) alles, was das Herz eines ambitionierten Users oder eines unbedarften Laien begehrt.

uCoz besteht seit Oktober 2005 und wurde von russischen Programmierern entwickelt. Seit August 2009 ist in Deutschland eine Alpha-Version verfügbar. uCoz gibt es in acht Sprachen: Arabisch, Englisch, Spanisch, Französisch, Ungarisch, Ukrainisch, Deutsch und selbstverständlich Russisch.

Dabei leitet sich der Name uCoz vom Englischen Slogan „You cause us to be better“ und nicht wie man vielleicht vermuten könnte von einem russischen Wort ab. (Passend wäre beispielsweise das Verb „ukazannie“ was „etwas anzeigen“ bedeutet). Ebenso interessant wie die Bezeichnung des Dienstes, sind auch die Möglichkeiten der Anwendung.

Kostenlose Homepage für Privatpersonen, gemeinnützige oder gewerbliche Institutionen

Grundsätzlich steht uCoz sowohl Privatpersonen kostenlos zur Verfügung als auch Selbstständigen oder Gründern, die einen gewerblichen Auftritt im world wide web benötigen. Aber auch gemeinnützige Einrichtungen und Vereine profitieren von dem kostenlosen Webhosting. Ideal ist gerade für Vereine die Verwaltung der Texte im Content Management System (CMS), das uCoz bereit stellt und auch die Bearbeitung durch mehrere Anwender erlaubt. Dabei sind Programmierkenntnisse der Nutzer nicht notwendig.

Schüler können hier ihre Skills in der Gestaltung von Websites erproben und ihre ersten oder bereits ausgereifte Erfahrungen im Internet sammeln. Schulen können die Plattform kostenlos nutzen, um sich, ihre Bildungsmöglichkeiten, AGs und weitere Angebote rund um die Bildungseinrichtung einer breiteren Öffentlichkeit zu präsentieren. uCoz kann als wunderbares Projekt fungieren, Jugendliche an die Programmierung und das Webdesign heranzuführen. Schließlich sind die Rufe häufig und laut, darauf zu achten, dass Kinder an eine sinnvolle Arbeit mit dem Computer herangeführt werden.
uCoz hat bereits jetzt eine ansehnliche Gemeinde von Nutzern – weltweit gehören ihr mehr als eine halbe Million Mitglieder an. Tendenz steigend.

Eine Registrierung bei uCoz erfolgt unkompliziert durch Eingabe der Kontaktdaten, wie Email-Adresse, Geschlecht, Geburtstag und Wohnort. Die allgemeinen Geschäftsbedingungen zu akzeptieren und einen Sicherheitscode einzugeben gehören ebenfalls zur Prozedur. Nach der ordentlichen Registrierung können Nutzer beliebig viele HomePages bei uCoz einrichten.

Website erstellen

uCoz verspricht einen neuen Blick auf die Erstellung von Web-Seiten. Nach eigener Darstellung ist das Unternehmen bestrebt, Menschen zu Helfen, die eine HomePage einrichten möchten. Beide Behauptungen sind durchaus glaubwürdig.
Bemerkenswert erscheint beispielsweise, dass uCoz auf einem online SaaS (Software as a Service) System fußt. Wer einen Internetzugang hat, kann sich mit seiner E-Mail-Adresse und dem Password einloggen und seine Internetseite bauen.
In der Selbstdarstellung betont der Anbieter, seine Arbeitsweise beruhe auf dem Web 2.0 Prinzip und das ermögliche Usern, eine simple und schnelle Erstellung auch komplexer Webseiten.

Dazu hält uCoz auch einige praktische Komponenten und Features, die kinderleicht umzusetzen sind bereit. Die wichtigsten nennt der Webhoster, die nachfolgend aufgeführt werden sollen:

  • Es steht eine ansehnliche Auswahl fertiger Design-Vorlagen für die User bereit. Rund 250 Vorlagen sind vorhanden.
  • Inhalte können mit CMS (Content Mangement System) ohne HTML-Programmkenntnisse eingegeben und verwaltet werden.
  • Der zur Verfügung stehende Webspace ist ohne Begrenzung. Gleich nach der Registrierung stehen den Anwendern 400 MB Webspace zur Verfügung.
  • Eine Sitemap wird automatisch vom Programm erstellt.
  • Youtube-Videos können in den Webauftritt eingebunden werden, etwas also das sich viele Internetprovider als Funktionserweiterung bezahlen lassen, erhält man bei uCos ohne Gebühren.
  • Es entstehen keine Kosten für die Erstellung bzw. Verwaltung der Seiten und ein Backup der Seiten ist auf Wunsch gewährleistet.
  • FTP-Zugang und RSS Import und Export sind im uCoz Angebot enthalten.
  • Der Server läuft nach eigenen Angaben sehr stabil, die Verfügbarkeit wird mit 99,8 Prozent angegeben.
  • Praktisch ist auch der WYSIWYG-Online-Editor zur Erstellung des Internetauftritts. WYSIWYG bedeutet What You See Is What You Get und erleichtert die Erstellung von Websites erheblich.

Das System zur Verwaltung und Bearbeitung der Webseiten ist an das Design von Windows-Vista angelehnt. uCoz nennt es Webtop. Da dieser den Erfahrungen der Nutzer entgegenkommt, erleichtert er die intuitive Benutzung enorm, so dass auch Laien und Anfänger leicht ihren ersten Webauftritt realisieren können.

Folgende kostenlose Module stehen Nutzern bei uCos zur Verfügung und können leicht in die jeweilige HomePage eingebettet werden: Foren, Foto Alben, Nachrichten / Site News, Blogs, Web Polls / Abstimmungen. Es stehen E-Mail-Formulare bereit, ein Gästebuch kann integriert werden, RSS Import und Export ist möglich, Kleinanzeigen können eingebettet werden, FAQ, Tests und Websitesuche bis hin zum Mini-Chat können ganz leicht und unkompliziert eingebaut werden.

uCoz ist ausgesprochen komfortabel und einfach in der Bedienung, das bestätigen auch verschiedene (private) Tester, die ihre Erfahrungen in diversen Foren veröffentlichen.

Darüber hinaus verspricht der Webhosting Anbieter uCoz, dass Schutzmaßnahmen gegen Spam und unerwünschte Besucher getroffen wurden. An der Erweiterung der Möglichkeiten arbeiten die uCos-Programmierer stetig weiter, um den Anforderungen der Zeit und des jungen Publikums zu genügen.

Finanzierung von uCoz

Der Anbieter finanziert sich ausschließlich durch Werbung. Das heißt, dass auf jeder kostenlosen Seite ein ein Zentimeter hohes Banner als Werbemittel geschaltet wird. Außerdem erscheint auf jeder Seite das uCoz Copyright Logo.
Die kostenfreien Seiten der User werden demnach nicht übermäßig mit störenden Werbemitteln und Pop-Up-Fenstern überfrachtet, wie es manchmal leider üblich ist.

Wem bereits das Werbebanner und das Copyrightzeichen zu viel sind, erhält gegen eine geringe monatliche Gebühr komplett werbefreien Webspace.

Fazit

Der Funktionsumfang, die Möglichkeiten, die der Webdienst uCoz kostenfrei anbietet ist beeindruckend. Wer sich im Netz umsieht, wird nichts vergleichbares finden, keinen kostenlosen Webhoster, der auch nur annähernd an uCoz heranreicht.
Eine hohe Bedienerfreundlichkeit verspricht uCoz, die ihm auch von unabhängigen Testern immer wieder bestätigt wird.
Für den deutschen Markt ist zur Zeit eine Alpha-Version verfügbar. Hier sind selbstverständlich Optimierungsmöglichkeiten vorhanden, daran arbeiten die Programmierer beständig.

uCoz stellt zum einen ein sehr umfangreiches Projekt dar, das nicht innerhalb kurzer Zeit abschließend programmiert werden kann. Und zum anderen ist uCoz so angelegt, dass Neuerungen und Erweiterungen zu jedem Zeitpunkt integriert werden können (sollen).

uCoz erscheint als sehr interessantes und viel versprechendes Projekt, das eine Chance seitens der Nutzer verdient. In Zukunft dürfte man wohl noch einiges von dem Webdienst hören. Es bleibt auch abzuwarten, wie uCoz das Segment des kostenlosen Webhostings beeinflussen wird.

(sl),

Kategorien
CMS Programmierung

OneFileCMS & SlimStat – wenn der Kunde einen Igel in der Tasche hat

Am liebsten hätte ich diesen Kunden gleich abgelehnt. Ich kenne ihn seit Jahren und alles was er kauft, muss billig sein. Leider kennt er reihenweise Leute, denen das Portemonnaie offener steht und denen gute Arbeit auch gutes Geld wert ist. Weil er so ein Sparfuchs ist, wird er als guter Ratgeber betrachtet. Nun will er eine Website. Ablehnen geht nicht, sonst empfiehlt er nicht weiter. Also muss dieser Auftrag so günstig wie möglich abgewickelt werden.

Die Ansprüche des Knauserkunden

Glücklicherweise sind seine Ansprüche vergleichsweise bescheiden. Lediglich statische Seiten mit ein paar Bildern und etwas Text sind gefragt. Nur die Statistiklösung ist Pflicht. Als alter Kontrollfreak will der Kunde stets schauen können, wieviele Leute seine Homepage heute wieder angeklickt haben.

Irgendjemand hatte ihm bereits erzählt, dass heutzutage Optik und Inhalt streng voneinander zu trennen sind und so fragte er gezielt nach HTML, CSS und tabellenlosen Layouts. Man müsse ja schließlich auch an die mobilen Internetnutzer denken.

Werkzeuge der Wahl

Zunächst dachte ich an das gute alte Dreamweaver. Immerhin nutze ich das Programm seit 1999 und halte mich für recht fit und vor allem schnell im Umgang damit. Dann befand ich jedoch, dass es für diesen Kunden ein immer noch zu großer Aufwand ist, in Dreamweaver eine Site einzurichten, zu pflegen et cetera. Außerdem war mir klar, dass dieser Kunde häufige textliche Änderungen und Erweiterungen verlangen würde. Daher wäre eine rein webbasierte Lösung aka CMS schon besser geeignet. Schließlich habe ich mein Dreamweaver nicht immer unterm Arm.

Auf der Suche nach der simpelsten Lösung stieß ich im Rahmen meiner Recherchen auf OneFileCMS. OneFileCMS besteht aus einer einzigen Datei und ist dennoch ein recht ordentliches Content Management System. Naturgemäß benötigt es Schreibrechte auf seine Verzeichnisse. Eine Datenbank wird nicht hinterlegt. OFC bringt lediglich runde 6 KB auf die Waage. Für den schnelleren Einstieg steht eine Version mit „Beispiel-Site“ zur Verfügung, die es auf rund 50 KB bringt.

Für die gewünschte Website-Statistik wählte ich das gerade frisch in der Version 2 erschienene SlimStat aus. Slimstat ist zwar nicht so lightweight wie OneFileCMS (OFC), sondern mit 1,2 MB auf den ersten Blick schon ein ganz schöner Brummer. Rund 900 KB davon nimmt jedoch bereits die GeoIP.dat ein, die zur halbwegs genauen Lokalisierung der Besucher benötigt wird.

OneFileCMS in Betrieb genommen

Die Installation von OFC ist, wie Sie sich bereits vorstellen können, eine Kleinigkeit. Nachdem Sie sich das CMS von der Projektwebsite heruntergeladen haben, entpacken Sie es lokal. OFC gibt als Mindestanforderung PHP 5 an. Im Grunde wurde es unter 4.x lediglich nicht getestet.

Nach dem Entpacken passen Sie einige wenige Einstellungen in der PHP-Datei an.

01-config.png

Wesentlich ist lediglich der Bereich, in dem Sie einen Benutzernamen und ein Passwort vergeben. Vorsichtige Zeitgenossen benennen gleich die ganze Datei um. Dabei müssen Sie allerdings darauf achten, dass Sie die umbenannte Datei in die Zeile $config_excluded aufnehmen, da ansonsten auch die Hauptdatei des CMS editierbar wird.

Haben Sie die Änderungen vorgenommen, schieben Sie OFC via FTP auf den gewünschten Webspace. Haben Sie, wie ich, für diesen Test, die Version mit Beispielsite gewählt, bringt ein Aufruf der URL ohne Zusätze eine Homepage zu Tage, die ähnlich wie die folgende aussieht:

02-index.png

Der Aufbau ist simpel. Zum Admin-Bereich gelangt man über einen Link im Footer oder durch Eingabe der vollständigen URL zur entsprechenden PHP-Datei. Das Login verlangt die zuvor in der Datei verankerte Benutzername-Passwort-Kombination:

03-login.png

Von hier aus gelangen Sie in das Backend, das im Grunde wie ein Dateimanager aufgebaut ist. Und in der Tat stellt sich OFC in der Folge als eine geschickte Kombination aus Dateimanager und Texteditor dar.

04-backend-821.png

OFC nimmt Ihnen nichts ab. OFC ist sowas wie ein unkomfortableres TextMate, nur eben online. Dafür können Sie natürlich ohne jegliche Konvention des CMS selbst frei schaffen. Wenn Sie nicht auf Code Highlighting angewiesen sind, schrauben Sie von hier an den Include-Dateien, dem CSS und wenn nötig auch an den Javascripts herum. Ebenso können Sie Ordner und Dateien anlegen oder hochladen.

SlimStat als Ergänzung

SlimStat schien ein totes Projekt zu sein, nachdem sich ewig nichts mehr seit Version 0.9 getan hatte. Im November 2009 jedoch kam der Entwickler überraschend mit einer fast völlig neu programmierten Version 2 aus dem Gebüsch. Diese Version ist im Vergleich zu Boliden, wie Piwik oder vor allem Google Analytics eine kleine Nummer. So kann eine einzelne SlimStat-Installation auch nur eine einzelne Website tracken.

Ein Vorzug von SlimStat besteht darin, dass es nicht auf das Tracken per Jacascript limitiert ist, sondern per PHP-Include eingebunden werden kann, mithin für PHP-Websites eine genauere statistische Aufzeichnung garantieren sollte.

Installation und Inbetriebnahme von SlimStat

Nachdem Sie SlimStat von der Projektwebsite heruntergeladen haben, entpacken Sie es lokal und laden den dann entstandenen Ordner, der den Namen slimstat tragen sollte, komplett in das Hauptverzeichnis der betroffenen Website. SlimStat läuft ab PHP 4.3 und MySQL 4.0.

Nach dem Upload rufen Sie das Unterverzeichnis im Browser auf und der Installationsprozess startet:

05-slimstat-install.png

SlimStat benötigt Datenbankinformationen. Diese tragen Sie in die lokale Kopie der _lib/config.php nach und laden die Datei wieder hoch. Wie bei MySQL üblich, können Sie eine bereits bestehende Datenbank verwenden, SlimStat verwendet das Tabellen-Prefix slimstat_ und dürfte sich von daher mit Ihren sonstigen Daten nicht beißen. Wollen Sie ein anderes Prefix einstellen, so müssen Sie nochmal an die config.php ran und dort entsprechende Eintragungen vornehmen.

06-slimstat-tables.png

07-slimstats-ready.png

08-slimstats-del-setup.png

Nach wenigen weiteren Klicks gelangen Sie an den Punkt, an dem SlimStat Ihnen dringend vorschlägt, die Datei page/setup.php zu löschen. Tun Sie das nicht, gelangen Sie nicht in den Statistikbereich. Danach finden Sie folgendes vor:

09-erster-aufruf.png

Integration von OneFileCMS und SlimStat

Beide Lösungen sind nun für sich funktional. Um jetzt die Aufrufe der OFC-gepflegten Website über SlimStat verfolgen zu können, bedarf es noch des Einbaus einer der beiden Varianten zum Tracking, zweckmäßigerweise in die header.php oder, so Sie nicht mit einer header.php arbeiten, in jede PHP-Datei, die getrackt werden soll.

Dies kann mittels Javascript-Aufruf erfolgen, was bekanntlich an Genauigkeit zu wünschen übrig lässt und Besucher mit abgeschaltetem Javascript sogar gar nicht erfasst. Da wir schon einmal eine PHP-basierte Website haben, bietet sich die Verwendung des Aufrufs via PHP-Include förmlich an.

Ich öffne also die header.php in meinem Ordner includes mittels OFC und füge den folgenden Aufruf hinzu:

10-integration.png

Nach einigen Testbewegungen hin und er auf der Beispielsite finden sich erste Einträge in der Statistik und ich weiß, das wird dem Knauserkunden gefallen.

11-slimstat-toobig.png

Hier geht es zur vollständigen Statistik meiner OFC-Beispiel-Implementation. Der Screenshot kann nicht alle Features abbilden. Zu beachten ist, dass die Include-Variante keine Bildschirmauflösungen und Seitentitel tracken kann. Wer das benötigt, muss auf die JS-Variante ausweichen.

Normalerweise erfolgen an dieser Stelle der Vorstellung eines CMS immer Hinweise zum Theming. Das erübrigt sich natürlich beim OFC völlig, da es keinerlei eigenständige Konventionen des CMS gibt, die einen einschränken könnten. Sicherlich ist der Begriff CMS auch etwas sehr hoch gegriffen, Online-PHP-Editor oder pauschaler Online-Texteditor käme der Kernfunktionalität sicherlich näher.

OFC kann nicht viel und ist daher auf ganz bestimmte Anwendungsfälle limitiert. Für die berühmte Webvisitenkarte der Tankstelle um die Ecke reicht es jedoch völlig.

(tm), (sl)

Kategorien
CMS Programmierung

GetSimple – XML-basiertes CMS ohne Datenbank

Langsam wird es unübersichtlich im Wettbewerberfeld der CMS-Anbieter für kleine Websites. Es scheint sich herum zu sprechen, dass das größte Auftragspotenzial für Webentwickler in kleinen Websites steckt. Zwar sind die Projekte klein, die Budgets auch und die Erwartungen der Kunden viel zu hoch, aber über die schiere Masse lässt sich auch auskömmlich verdienen. Wichtig dabei ist ein CMS, dass den Entwicklungsprozess beschleunigt. Tut GetSimple das?

Zielgruppe

GetSimple richtet sich an Webentwickler mit einer eher kleinunternehmerischen Kundenstruktur.

Der Schreiner, Installateur, Automechaniker, Musiklehrer, Tierarzt mit regionalem Wirkungskreis steht auch im Jahr 2009 der Errichtung einer eigenen Website ausgabenkritisch gegenüber; sprich: Er will zwar eine haben, dafür aber kaum was bezahlen.

Der Webentwickler im Gegensatz dazu, hat nur seine Zeit zu verkaufen und muss sehen, dass er eine vernünftige Relation zwischen Zeitaufwand und Umsatzerlösen etabliert und aufrecht erhält. Aus eigener Erfahrung weiß ich, wie schwierig das im Umfeld kleiner Unternehmen ist. Ich hatte dabei stets das Glück ein oder zwei Großprojekte betreuen zu können, die quasi die Grundkosten gedeckt haben, so dass ich gewisse kalkulatorische Spielräume bei meinen mit zugenähten Jackentaschen auftretenden Kleinstkunden nutzen konnte.

Jedes Werkzeug, das einem Entwickler behilflich sein kann, gerade im genannten Kundenumfeld die Relation zwischen Aufwand und Ertrag in Richtung Ertrag zu verbessern muss also hoch willkommen sein. Dabei kann gelten: Je einfacher und fokussierter, desto besser.

GetSimple ist unstrittig sehr einfach und sehr fokussiert. GetSimple kommt nur für ganz bestimmte Anwendungsfälle überhaupt in Betracht. Es ist nicht geeignet, wenn ein Blog- oder eine sonstige Nachrichtenpublikation gefragt ist. Es ist auf wenige statische Seiten pro Präsenz ausgerichtet, mithin auf das, was man früher als „Web-Visitenkarte“ bezeichnete. Bereits wenn eine Multilevel-Navigation oder eine über eine Stufe hinausgehende Seitenhierarchie gefragt ist, braucht man GetSimple nicht mal mehr anzusehen. Das kann es nicht!

Dafür lässt es sich rasend schnell in Betrieb nehmen und auf einfache Weise mit dem Kundendesign versehen. Grund genug, das System einmal ernsthaft unter die Lupe zu nehmen…

Grundlegendes

GetSimple ist ein relativ leichtgewichtiges Kleinst-CMS mit angemessen niedrigen Systemvoraussetzungen. So reicht ein PHP ab Version 5.1.3 auf einem Unix-(Derivat-)Host mit Apacheserver betrieben völlig aus. Diese Voraussetzungen dürften 99 Prozent aller Hostingpakete oberhalb von 2,99 Euro monatlich locker erfüllen.

Eine Datenbankanbindung ist ausdrücklich nicht nur nicht erforderlich, sondern auch gar nicht möglich. GetSimple speichert ausschließlich in XML-Dateien. Das Gesamtsystem gehört mit einem Umfang von rund 250 Dateien bei 1,5 MB Speicherplatzbedarf zwar nicht zu den kleinsten, aber immerhin zu den kleineren Kleinlösungen.

Installation

Die Installation ist ähnlich schnell wie eine WordPress-Installation erledigt. Wir gehen den Prozess einmal kurz durch.

Zunächst laden Sie das Installationspaket (rund 620 kb) von der assoziierten Box.net-Website herunter und entpacken es auf der Festplatte, von wo aus Sie es unter Verwendung Ihres Leib-und-Magen-FTP-Clients auf den zu simplifizierenden Webspace schicken. Bevor Sie es durch Aufruf der Domain oder Subdomain aufrufen und damit automatisch in den Installationsprozess einsteigen, gilt es noch Schreibrechte zu prüfen.

Nach Aussage des Programmierers sollte ein 755 auf den Unterverzeichnissen data und backups reichen, um GetSimple betreiben zu können. Probieren Sie es also zunächst auch so aus. In meinem Falle bekam ich eine altbekannte Fehlermeldung:

01-install-01.png

Erst nachdem ich data und backups mit 777 ausgestattet hatte, konnte ich die Installation fortsetzen:

02-install-02.png

Im zweiten Schritt legen Sie lediglich Website-Name, -URL und den Benutzer samt E-Mailadresse fest. Die E-Mailadresse muss gültig sein, denn dorthin wird das automatisch generierte Passwort des Benutzers verschickt. Mehr als einen Benutzer kann das System nicht verwalten. Klicken Sie auf „Install Now“ landen Sie ohne weitere Umschweife zum ersten Male direkt im Backend:

03-backend-nach-install-500px.png

Hier weist Sie GetSimple darauf hin, dass es ratsam wäre, unverzüglich das generierte Passwort anzupassen. Folgen Sie dem Hinweis, gelangen Sie auf eine Übersichtsseite mit wichtigen Konfigurationsoptionen:

04-backend-erste-aenderungen.png

Nicht nur können Sie an dieser Stelle Ihr Passwort anpassen, vielmehr stellen Sie hier auch die Zeitzone ein und verwandeln das Backend in ein deutschsprachiges. GetSimple lässt sich im Lieferzustand auf tschechisch, polnisch, russisch, portugiesisch, spanisch, französisch, deutsch und englisch betreiben. Die Sprachdateien werden gelegentlich angepasst und stehen als separates Languagepack zum Download bereit. Zum Zeitpunkt meines Tests unterschieden sich Languagepack und mitgelieferte Sprachdateien allerdings nicht.

Nach der Erstinstallation wollen Sie sich vielleicht von der ordnungsgemäßen Funktionalität der 49 Kugeln des CMS überzeugen. Zu diesem Zweck klicken Sie rechts oben auf Support und wählen dann den überaus selbstbewusst benannten Navigationspunkt „Website Gesundheitscheck“.

05a-support-navi.png

Sie erhalten eine Übersicht, die im besten Falle der folgenden sehr ähnlich ist:

05-support-healthcheck.png

Das Backend

Das Backend des Systems bietet eine sehr aufgeräumte Hauptnavigation mit den Punkten Seiten, Dateien, Vorlagen und Backups.

06-hauptmenue.png

Dateien

Wie der Name schon vermuten lässt, verbirgt sich hinter diesem Tab ein Filemanager. Dieser ist allerdings untertrieben mit rudimentär zu beschreiben.

dateien-screen.png

Zwar kann man jeglichen Dateityp bis zur Größe des zulässigen Serverlimits hochladen und bei Bildformaten auch eine Lightbox-basierte Ansicht anzeigen lassen, mehr jedoch nicht.

08-dateiupload.png

Die Ansicht in der Hauptübersicht zeigt lediglich den Dateinamen, kein Thumbnail, so dass man auf sehr sprechende Namensvergabe angewiesen ist. Darüberhinaus gibt es keine Form der Kategorisierung, so dass Dateien lediglich in Form einer langen Liste verwaltet werden können. Ein Manko, dass bezogen auf die Zielgruppe vermutlich eher geringer wiegen dürfte.

Noch weniger schön ist, dass jegliche hochgeladene Dateien ausschließlich anhand ihrer URL in Seiten übernommen werden können. Ein Zugriff auf den Filemanager aus dem Editoren heraus ist nicht vorgesehen. Der Editor ist lediglich eine Textarea mit TinyMCE.

Man mag argumentieren, dass Systeme dieser Art ohnehin von kundigen Entwicklern realisiert werden, so dass die Beschränklung auf handgefertigtes HTML kein Problem ist. Allerdings hätte man sich dann das Dateimanagement auch gleich ganz sparen können, denn der kundigfe Entwickler kann auch seinen FTP-Client benutzen, wenn es ohnehin nur darum geht, Dateien auf den Webspace zu hieven.

Backups

Unter dem Punkt Backups erhalten Sie eine Liste verfügbarer Versionsbackups Ihrer im System angelegten, geänderten oder gelöschten Seiten. Um die Funktionalität gangbar zu machen, benötigen Sie die Möglichkeit, Cronjobs anzulegen, was mittlerweile auch bei günstigen Hostingspaces in aller Regel gegeben ist.

Auch über den Sinn dieser Möglichkeit lässt sich trefflich streiten. Bei einem sinnvollen Maximalvolumen von um die 12 verschiedenen Seiten mutet ein Backupsystem doch etwas übertrieben an.

Seiten

Der Tab Seiten beherbergt einen der beiden Kernbereiche des Systems, nämlich die Seitenverwaltung.

09-seitenscreen.png

Von hier aus erstellen, ändern und löschen Sie den Content, die eigentlichen Seiteninhalte. Auch an dieser Stelle bietet GetSimple tatsächlich nur einfachste Möglichkeiten.

10-neue-seite-erstellen.png

Innerhalb des Formulars zur Erstellung einer neuen Seite, das im Übrigen identisch zur Maske für die Änderung einer bestehenden Seite ist, steht Ihnen der bereits angesprochene TinyMCE mit Rudimentärformatierungsmöglichkeiten zur Verfügung.

Der Button „Datei hochladen“, der sich neben dem Textfeld befindet, suggeriert die Übernahmemöglichkeit der dort hochzuladenden Dateien in die Seite. Dem ist aber nicht so. Ein Klick auf „Editor umschalten“ nimmt der Textarea lediglich den TinyMCE und bringt HTML-Code zum Vorschein. Hier gibt es dann keinerlei Hilfsmittel mehr, alles ist von Hand zu coden.

Mittels des Buttons „Optionen“ öffnet man ein kleines Konfigurationsformular, in dem man die wesentlichen Eigenschaften der aktiven Seite festlegt. So vergibt man hier die anzuzeigende URL, sowie etwa gewünschte Tags/Keywords. Über den Punkt „Übergeordnete Seite“ lässt sich eine zweistufige Hierarchie realisieren. Eine neue Seite kann immer zu einer Seite untergeordnet sein, die ihrerseits nicht untergeordnet ist.

Über die Menüimplementierung oder allgemeiner die Navigation hin zu diesen Seiten muss sich der Entwickler wiederum selber kümmern. GetSimple geht vom Grundsatz davon aus, dass es lediglich gleichberechtigt nebeneinanderstehende Seiten gibt und diese dann auch im Menü angezeigt werden sollen, wobei die Reihenfolge über Prioritätenvergabe geregelt wird, mithin auch im Nachhinein noch geändert werden kann.

11-neueseite-optionen.png

Ein Vorschau-Button erlaubt den direkten Aufruf der neuen Seite über das eingestellte Frontend-Template. Das funktioniert allerdings nur sehr eingeschränkt, weil die Implementierung der Rewrites eine zusätzlich Aktion des Apacheservers erforderlich zu machen scheint, ähnlich wie ein Indexierungslauf. In meinem Test waren neu angelegte Seiten immer erst bis zu zwanzig Minuten nach ihrer Erstellung über die vergebene URL aufrufbar, davor gab es einen 404.

Der Punkt „Vorlage“ bietet lediglich an, die neu erstellte Seite mit einem (mitgelieferten) Kontaktformular zu versehen, weitere können Sie unkompliziert selber anlegen. Dazu später mehr.

Vorlagen

Der Tab „Vorlagen“ im Hauptmenü stellt den Einstieg in die umfangreichste Funktionalität des Systems dar. Von hier aus können vorhandene Themes ausgewählt und bearbeitet werden. Sogar die komplette Code-Arbeit an Themedateien und CSS ist theoretisch von hier aus möglich. Natürlich unter Verzicht auf Farbcodierung im Quelltext etc.

12-vorlagen.png

Interessant ist die Heransgehensweise des Systems an universelle Codeschnipsel, wie etwa den Footer oder die Sidebar. Diese werden als sog. Komponenten abgelegt und mit entsprechenden get_component-Funktionsaufrufen einfach in das Theme eingebunden. Die optische Gestaltung erfolgt über den vergebenen Komponentennamen im CSS.

13-komponenten.png

Sehr einfach lassen sich neben den bereits vorhandenen auch eigene Komponenten, so z.B. Unternavigationen oder ähnliches anlegen und über PHP-Funktionsaufrufe (etwa: get_component=’untermenue‘) an beliebiger Stelle im Theme verankern. Auf diese Weise bleibt das Theme von eigentlich nur contentrelevantem Code frei.

Überhaupt erfolgt das gesamte Theming auf dieser Basis. Es lohnt sich daher, sich einmal diese lange Liste möglicher Calls anzusehen. Aufgrund dieser Konzeption lassen sich insbesondere WordPress-Themes sehr einfach nach GetSimple übertragen.

Im Lieferumfang befinden sich bereits zwei hinreichend unterschiedliche Vorlagen, die als Grundlage für eigene Entwicklungen und Lehrstoff für den Einstieg in die Implementierungslogik mehr als gut geeignet sind. Entwickler wird es freuen, dass das System offen für die Definition und Verwendung eigener Functions ist, ohne dabei den Core zu betreffen. So genügt es, eine Datei mit dem Namen functions.php im Theme abzulegen, um die darin definierten Funktionen verwenden zu können.

Generell werden Themes im Unterverzeichnis theme unter Verwendung des Themenamens gespeichert (Beispiel: getsimple.blogmanufaktur.de/theme/Default_Simple/). Erforderlich ist ein Unterverzeichnis images zur Ablage der im Theme verwendeten grafischen Elemente, sowie eine CSS-Datei (in der regel default.css) und ein Haupttemplate namens template.php.

Benötigen Sie weitere Seitenvorlagen, so legen Sie diese im Verzeichnis unter ihren jeweiligen sprechenden Bezeichnungen, z.B. contact.php für ein Kontaktformular ab. Im bereits erwähnten Optionendialog der Seitenverwaltung ordnen Sie die so erstellten Einzelvorlagen der konkreten Seite dann zu.

Fazit: In der Tat gehört das Theming-Konzept von GetSimple zum intuitivsten, das ich bisher gesehen habe. Ob man mit den Einschränkungen, die das System ansonsten hat, leben kann oder will, wird im Wesentlichen von der eigenen Auftragsstruktur abhängen. Sicherlich ist es nicht wirtschaftlich, sich für einzelne Kleinkunden in GetSimple einzuarbeiten. Da macht es vermutlich mehr Sinn, die vorhandenen Kenntnisse in größeren Systemen zu nutzen und diese dann auf den kleinen Kunden herunter zu brechen. Ist man jedoch der regionale Entwickler für die örtliche Handwerkerschaft, könnte sich GetSimples beschleunigter Workflow schnell in klingende Münze auszahlen…