Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

webEdition

CMS

webEdition

Content-Management-Systeme gibt es mittlerweile für die unterschiedlichsten Anforderungen. Allerdings sind darunter nur wenige, die Entwicklern auf einfache Weise volle Kontrolle über den Quellcode gewähren. webEdition ist eines dieser Systeme.

Das CMS webEdition bietet volle Kontrolle über den Quellcode bei einer überschaubaren Lernkurve für die Umsetzung von Layouts in Templates mit Hilfe der eigene Meta-Sprache. Funktionen, für die bei anderen Systemen Plugins benötigt werden, sind in webEdition bereits integriert.

Gähnende Leere statt vorgefertigte Themes

Nach erfolgreicher Installation des CMS, die mit Hilfe eines Assistenten in wenigen Schritten erfolgt, sieht man – im Gegensatz zu anderen Systemen – erst einmal noch nichts. Während andere Systeme mit fertig gestalteten Themes/Templates aufwarten, ist webEdition zu Beginn völlig leer. Dies bedeutet zwar am Anfang – wie bei allen derartigen Systemen – eine gewisse Einarbeitungsphase (wobei sich hiervon niemand entmutigen lassen sollte), im Gegenzug aber die absolute Kontrolle über den ausgegebenen Quellcode.

Auf dem Weg zur ersten Vorlage

Die Lernkurve auf dem Weg zur ersten eigenen Seitenvorlage ist nicht sonderlich steil. Beim Anlegen einer Vorlage wird diese mit Beispiel(-Template)-Code gefüllt, anhand dessen sich die Basis-Funktionen erklären lassen. Seltsamerweise wird bei diesem Code, trotz HTML5-Doctype, eine Layout-Tabelle verwendet, die natürlich einfach entfernt werden kann, wie im folgenden Code zu sehen.

  1. <!doctype html>
  2. <html dir="ltr" lang="<we:pageLanguage type="language" doc="top" />">
  3. <head>
  4.   <we:title></we:title>
  5.   <we:description></we:description>
  6.   <we:keywords></we:keywords>
  7.   <we:charset defined="UTF-8">UTF-8</we:charset>
  8. </head>
  9. <body>
  10.   <article>  
  11.     <h1><we:input type="text" name="Headline" size="60"/></h1>
  12.     <p><we:input type="date" name="Date" format="d.m.Y"/></p>
  13.     <we:ifNotEmpty match="Image">
  14.       <we:img name="Image" showthumbcontrol="true"/>
  15.     </we:ifNotEmpty>
  16.     <we:textarea name="Content" width="400" height="200" autobr="true"
  17.     wysiwyg="true" removefirstparagraph="false" inlineedit="true"/>
  18.   </article>  
  19. </body>
  20. </html>

Das Kernstück bei der Entwicklung eines webEdition-Templates sind die sog. we-Tags. Mit dieser Meta-Sprache lassen sich auf einfache Weise unterschiedliche Eingabemöglichkeiten (Textfeld, Textarea, Bild etc.) für Redakteure integrieren. Dabei ist die Syntax der we-Tags in den meisten Fällen selbsterklärend. So steht <we:img … /> für die Eingabe eines Bildes, <we:input … /> für ein einzeiliges Textfeld und <we:textarea … /> für ein mehrzeiliges Textfeld inklusive eines WYSIWYG-Editor. Dieser eigens für webEdition entwickelte Editor kann individuell an die Bedürfnisse der Redakteure angepasst werden, um deren »Gestaltungsfreudigkeit« Grenzen zu setzen. Ab der demnächst erscheinenden Version 6.3.4 kann alternativ auch eine angepasste Version des TinyMCE als WYSIWYG-Editor verwendet werden. Das Layout im Backend, das die Redakteure zu Gesicht bekommen, ist vergleichbar mit dem im Frontend, so dass eine visuelle Orientierung bei der Bearbeitung der Inhalte möglich ist.

Template-Bearbeitung

Bei der Bearbeitung des Template-Codes stehen verschiedene integrierte Editoren (reine Textarea, Java-Editor, JavaScript-Editor, CodeMirror2 mit hilfreichen Tooltips zu den we-Tags) zur Verfügung. Außerdem kann über das Editor-Plugin der Quellcode auch in einem externen, lokalen Editor geöffnet, der Inhalt durch lokales Speichern zurück in das webEdition-Backend übertragen und dort dann gespeichert werden. Diese vielseitigen Editier-Optionen erleichtern das Erstellen und Überarbeiten von Templates sehr.

webEdition - Screenshot Template Artikel
Artikel-Template im Backend
webEdition - Screenshot Template Tooltip
Tooltip für we-Tags
webEdition - Screenshot Backend Artikel
Artikel-Bearbeitungsmaske für die Redakteure im Backend
webEdition - Screenshot Frontend Artikel
Artikel-Ansicht im Frontend

Artikel-Liste

Eine Auflistung von Seiten dieses Typs z.B. als Artikel-Liste kann ebenso einfach erstellt werden. Der Code hierfür sieht ähnlich übersichtlich aus:

  1. <!doctype html>
  2. <html dir="ltr" lang="<we:pageLanguage type="language" doc="top" />">
  3. <head>
  4.   <we:title></we:title>
  5.   <we:description></we:description>
  6.   <we:keywords></we:keywords>
  7.   <we:charset defined="UTF-8">UTF-8</we:charset>
  8. </head>
  9. <body>
  10.   <h1><we:input type="text" name="Headline" size="60"/></h1>
  11.   <we:listview type="document">
  12.     <we:repeat>
  13.       <article>  
  14.         <h2><we:field type="text" name="Headline" size="60"
  15.           hyperlink="true"/></h2>
  16.         <we:ifFieldNotEmpty type="img" match="Image">
  17.           <we:field type="img" name="Image" showthumbcontrol="true"
  18.             thumbnail="100x100"/><br />
  19.         </we:ifFieldNotEmpty>
  20.         <p>(<we:field type="date" name="Date" format="d.m.Y"/>)
  21.           - <we:field name="Content" max="100" /></p>
  22.       </article>  
  23.     </we:repeat>
  24.   </we:listview>
  25. </body>
  26. </html>
webEdition - Screenshot Template Artikel-Übersicht
Artikelübersicht-Template im Backend
webEdition - Screenshot Frontend Artikel-Übersicht
Artikelübersicht im Frontend

webEdition-Meta-Sprache

Sind beim Erstellen von Templates bestimmte we-Tags unklar, so hilft webEdition auf der Template-Maske mit einer Tag-Hilfe. Hier können alle we-Tags, inklusive möglicher Attribute, nachgeschlagen, sowie direkt konfiguriert und per Mausklick in den Code eingefügt werden.

webEdition - Screenshot Tag-Hilfe
Tag-Hilfe auf der Template-Maske

Die we-Tags für die Eingabe im Backend sind nur ein paar einfache Beispiele. Mit dieser Meta-Sprache lässt sich nahezu jede für eine durchschnittliche anspruchsvolle Website benötigte Funktionalität umsetzen. Stößt sie an ihre Grenzen kann jederzeit eigener PHP-Code in den Templates verwendet werden. Wenn das noch nicht reichen sollte, können mit etwas mehr als grundlegenden PHP-Kenntnissen sogar eigene we-Tags erstellt werden.

Mit Hilfe dieser Grundlagen kann bereits ein in HTML und CSS umgesetztes Layout einfach als »Template« in webEdition angelegt und um die benötigten Eingabemöglichkeiten ergänzt werden.

Möglichkeiten zur Verwaltung von Inhalten

Natürlich kann im Rahmen dieses Artikels nur ganz leicht an der Oberfläche der Möglichkeiten eines CMS gekratzt werden. Neben der Möglichkeit, Inhalte Dokument-/Seiten-basiert vorzuhalten, gibt es in webEdition noch das Datenbank-/Objekt-Modul, mit dessen Hilfe die Inhalte in neutraler Form verwaltet werden können, um diese dann an unterschiedlichen Stellen in unterschiedlichen Darstellungen auszugeben.

Weitere Funktionen

Wie die meisten anderen Systeme enthält webEdition eine feingliedrige Benutzer-/Rechte-Verwaltung sowie eine Kundenverwaltung, eine Bannerverwaltung, ein Shop-Modul, ein Workflow-Modul, Import-/Export-Möglichkeiten und etliche weitere Module, die bei den meisten anderen »nur« als Drittanbieter-Plugins zur Verfügung stehen. Selbstverständlich kann man mit webEdition die URLs jeder Seite individuell bearbeiten und somit für Suchmaschinen optimieren.

Vom kommerziellen CMS zum Open-Source-Projekt

Die Arbeit an webEdition begann im Jahre 2000 und bereits 2001 kam das CMS als kostenpflichtiges Produkt der Astarte New Media AG auf den Markt. 2003 wurde es von der neu gegründeten webEdition Software GmbH übernommen und weiterentwickelt, die 2006 in living-e AG umfirmiert wurde. Ab November 2008 stellte die living-e AG das CMS ab der Version 6 unter der GPL-Lizenz zur Verfügung und beendete im Juni 2009 die Weiterentwicklung. In der Folge wurde diese von einer Community vorangetrieben, die sich im Februar 2010 zum gemeinnützigen webEdition e.V. zusammenschloss. Somit ist nicht nur der Fortbestand des CMS, sondern auch dessen Weiterentwicklung durch die wachsende Community (10.000 Installationen seit Gründung des Vereins) gesichert. Seit 2011 findet die jährliche webEdition-Konferenz statt, bei der sich Entwickler und Designer sowohl über die Zukunft des CMS als auch über dessen Einsatzmöglichkeiten austauschen können.

Fazit: Quellcode-Kontrolle und einfache Backend-Bearbeitung

Wer auf der Suche nach einem CMS ist, das absolute Kontrolle über den ausgegebenen Quellcode bietet, der sollte sich webEdition einmal näher anschauen. Ein weiterer Pluspunkt ist die einfache, visuell am Frontend angelehnte Bearbeitung im Backend, so dass aufwändige Schulungen für Redakteure wegfallen. Wer allerdings eine Plugin-Vielfalt für die unterschiedlichsten Anwendungsfälle erwartet, wie sie viele der anderen Systeme bieten, der wird enttäuscht sein. Allerdings bietet webEdition die Möglichkeit, diese Funktionalitäten durch einfache eigene Entwicklungen abzudecken.

Nähere Informationen gibt es auf der Website des webEdition e.V. sowie in dem erst vor Kurzem (Oktober 2012) erschienenen ersten Buch über webEdition.

Kommentare

Timo Langer
am 27.12.2012 - 13:39

toller Artikel, der die wesentlichen Vorzüge von webEdition kurz und knapp zusammenfaßt. Wir arbeiten schon lange mit dem CMS webEdition und können jedem Entwickler nur Nahe legen, mal einen genaueren Blick zu riskieren. Die volle Kontrolle über den produzierten Quellcode bietet viele Vorteile zur Produktion suchmaschinenfreundlicher und responsive Webseiten. Dass es nicht unzählige ungeprüfte Plugins gibt keine Schwäche, sondern die Stärke des Systems, das Coding so zu gestalten, wie es das jeweilige Projekt fordert und nicht ein undurchsichtiges Sammelsurium von Erweiterungen mit unterschiedlichen Frameworks anzuhäufen von denen zumeist nur ein Bruchteil wirklich genutzt wird.

Permanenter Link

Christian Tigges
am 08.02.2013 - 16:09

Ich nutze webEdition jetzt schon seit der Version 4. Ich habe schon verschiedenste CMS-Systeme ausprobiert. Bis heute bin ich von webEdition am meisten überzeugt. Ich sehe es genauso wie Herr Langer: Die fehlenden Plugins sehe ich ebenfalls als Vorteil nicht als Schwäche!
Ich finde es vor allem wichtig, dass das System offen ist für alles. So lässt sich z.B. responsive Webdesign sehr flexibel und einfach in webEdition umsetzen.

Permanenter Link

Michael
am 12.02.2013 - 11:19

Habe WE auch (vor langer Zeit) einige Male verwendet. Wenn ich mich recht erinnere, braucht(e) man Java lokal installiert, weil die Backend-Oberfläche ein Java-Applet sei? Irgendwann hörte ich auch, dass WE im Vergleich zu z.B. ModX viel mehr serverseitige Power brauchen soll, bzw. irgendwie weniger performant sei. Weiss da irgendwer was drüber?
Vom sonstigen Handling fand ich dieses CMS ganz grossartig - die Kunden / Redakteure übrigens auch!

Permanenter Link

Timo Langer
am 12.02.2013 - 12:07

Java braucht man nur für das Applet zum Multiupload von Dateien. Für die Navigation im Backend gibt es eine Fallback Lösung mit Selects, für die User die kein java installiert haben. Die Performance wurde mit den letzten Updates in der Version 6 deutlich erhöht, das eigene Caching gibt es nicht mehr, wird auch nicht wirklich benötigt. In Sachen Benutzerfreundlichkeit für Redakteure ist webEdition meiner Ansicht nach weiter ungeschlagen!

Permanenter Link

Andreas
am 12.05.2013 - 00:26

Hallo Michael,

in der aktuellen Version 6.3.6 wurde das Hauptmenü bereits durch ein CSS-Menü ersetzt. In der kommenden Version 6.3.7 werden auch in den Modulen keine Java-Menüs mehr verwendet.

Was die Performance angeht, kann ich dich beruhigen - eigentlich verbraucht webEdition im Gegensatz zu anderen CMS eher wenig Ressourcen. Zudem hat in der Version 6.3 ein kompletter Rewrite des System-Cores stattgefunden, was zu einer Reduzierung der Ressourcen bei gleichzeitiger Performancesteigerung geführt hat!

Grüße, Andreas

Permanenter Link

Die Kommentare sind geschlossen.