© fotolia.de

Webseiten in Vi erstellen? Nur Konsolenpuristen halten das für die beste Wahl. Alle anderen Anwender erstellen oder editieren ihre Webpräsenz besser mit einem speziell auf HTML und CSS zugeschnitten und komfortablen Editor. Fragt sich nur mit welchem?

Webseiten gelten als die Visitenkarten des 21. Jahrhunderts. Kaum ein Gewerbetreibender mag noch auf eine Präsenz im Internet verzichten. Auch wer das Design den Profis überlässt, möchte Änderungen oft selbst einpflegen. Grundsätzlich reicht für das Bearbeiten von HTML-Seiten ein einfacher Texteditor. Wie beim Schreiben von Programmcode erleichtern aber speziell darauf zugeschnittene Editoren die Arbeit.

Webeditoren gibt es in zwei Ausprägungen. Wysiwyg-Editoren (What you see is what you get) gleichen in der Bedienung einem Textverarbeitungsprogramm. Da der Benutzer nicht mit dem HTML-Code in Berührung kommt, eigen sie sich vor allem für unerfahrene Anwender. Die bekanntesten Vertreter sind die proprietären Programme Microsoft Frontpage und Adobe Dreamweaver.

Die zweite Variante sind Editoren, die den Programmierprozess zwar mit Syntax Highlighting oder Autocompletion unterstützen, jedoch keinen Wysiwyg-Editor enthalten.

Diese Ausgabe der Bitparade vergleicht den grafischen Webeditor Kompozer, den reinen Quelltexteditor Bluefish sowie Quanta Plus, der beide Verfahren vereint. Der Test prüft, wie gut sich die Software für Benutzer ohne umfassende HTML- und CSS-Kenntnisse eignet. Im Blick bleibt dabei auch die Qualität des entstehenden HTML-Quellcode. Maßgebend für die Bewertung ist der Validierungsservice [1] des World Wide Web Consortium (W3C).

Kompozer

Kompozer ist eine Weiterentwicklung von NVU [2], eines auf der Gecko-Engine von Mozilla basierenden HTML-Editors. Er versteht sich als einfach zu bedienendes Wysiwyg-Werkzeug, das es angeblich mit proprietären Konkurrenten wie Microsoft Frontpage und Adobe Dreamweaver aufnehmen kann.

Nur wenige Distributionen bringen Kompozer von Haus aus mit. Da die Software jedoch wie Mozilla, aus dem sie sich entwickelt hat, als Binary-Archiv vorliegt [3], ist ein Übersetzen aus den Quellen selten erforderlich. Kompozer besitzt eine übersichtliche Benutzeroberfläche. Standardmäßig geht das Programm zwar davon aus, dass der Benutzer seine Seite in dem veralteten Standard HTML 4.01 erstellen möchte, es beherrscht aber auch XHTML 1.0 Transitional und XHTML 1.0 Strict, nicht jedoch den aktuellen Standard XHTML 1.1.

Sperriges HTML

Kompozer soll laut Angaben der Entwickler so einfach zu bedienen sein wie eine Textverarbeitung. Wer jedoch erwartet, dass sich Elemente mit der Maus frei auf einer Seite platzieren lassen, wird enttäuscht. Allerdings liegt der Grund dieser Einschränkung eher in HMTL selbst, nur in ein »Div«-Tag eingebettete Elemente lassen sich frei auf der Seite platzieren.

Markiert der Anwender Text oder eine Grafik und klickt auf den Button »Layer« links in der untersten der drei Symbolleisten, erstellt Kompozer einen »Div«-Block, der sich mit der Maus frei auf der Seite platzieren lässt. Dass so entstandener HTML-Code häufig bei den unterschiedlichen Bildschirmauflösungen der Seitenbesucher schlecht skaliert, kann die Software ebenso wenig verhindern wie andere grafische Editoren.

Die Wysiwyg-Editierfunktionen sind zudem nicht ausgereift. Markiert der Anwender einen »Div«-Bereich, zeigt die Software am linken oberen Rand des platzierbaren Blocks eine Zugmarke, die größtenteils verschwindet, wenn er den Block an den oberen Rand zieht. Noch störender ist, dass die Zugmarke nicht funktioniert, wenn sie unter einem anderen »Div«-Layer liegt.

Die Anleitung zu Kompozer, die unter [4] im PDF-Format vorliegt, weist auf dieses Problem hin. Besser als der Vorschlag, störende Elemente temporär zu verschieben, wäre es jedoch, den Bug in der Software zu beseitigen. Gelegentlich treten in dem Wysiwyg-Editor auch Anzeigeprobleme auf, zum Beispiel ein trotz Auswahl einer Hintergrundgrafik nicht komplett eingefärbter Seitenhintergrund. Bilder, Formulare mit allen Elementen wie Texteingabe- oder Listenfeldern sowie formatierten Text erstellt die Software mit wenigen Mausklicks (Abbildung 1). Kenntnisse in HTML sind dazu nicht erforderlich.

Abbildung 1: Webseiten, die eine gewisse Komplexität nicht übersteigen, entstehen bei Kompozer in einer Wysiwyg-Umgebung. HTML-Kenntnisse sind dabei nicht erforderlich.

Da sich Tags beliebig tief verschachteln lassen, ist in der Praxis nicht immer leicht zu erkennen, aus welchen Format-Tags sich das Aussehen eines bestimmten Elements ergibt. Kompozer zeigt daher vom »Body«-Tag aufwärts alle umschließenden HTML-Elemente für die Cursorposition an. Ein Rechtsklick darauf gewährt Zugriff auf CSS-Formatierungen wie Textformatierung, Hintergrundfarbe oder Rahmeneigenschaften.

Plus und Minus

Tabellen erstellt Kompozer über einen Wizard, der die gewünschte Zellenzahl, Tabellenbreite und Rahmenbreite abfragt. Tabulator- oder kommaseparierte Textblöcke wandelt er automatisch in Tabellen um. Ein CSS-Editor legt Styles in der HTML-Datei selbst oder in einem externen Stylesheet ab. Letzteres ist bei Sites mit mehr als einer Seite sinnvoller. Die Software bindet außerdem die Mozilla-Rechtschreibprüfung ein. Eine Seitenverwaltung veröffentlicht die lokal gespeicherten Seiten über FTP.

Eine Probe mit der W3C-Webseiten-Validitätsprüfung bescheinigte dem HTML-Code von Kompozer Konformität (Abbildung 2). Die Formatierung ist zufriedenstellend lesbar, untergeordnete XML-Elemente rückt die Software jedoch nicht ein (Abbildung 3). Außerdem benutzt Kompozer das »<br>«-Tag inflationär. Ein nachhaltiges Ändern der Document Type Definition von Transitional auf Strict ist nicht möglich.

Abbildung 2: Sauber gearbeitet: Der Quelltext, den Kompozer grafisch erzeugt hat, besteht die W3C-Validitätsprüfung ohne Beanstandungen und dürfte mit verbreiteten Browsern keine Probleme bereiten.

Abbildung 3: Keine Einrückungen und zu viele Zeilenumbrüche: Der Quelltext, den Kompozer liefert, ist zwar gültiges HTML, aber nicht übersichtlich formatiert. Eine Anpassung per Hand fällt schwer.

Neben dem Wysiwyg-Editor enthält Kompozer auch einen rudimentären Quelltexteditor. Er hebt die HTML-Tags farbig hervor, unterstützt den Benutzer aber nicht durch Code-Vervollständigung, die Formatierungs-Buttons sind in der Code-Ansicht deaktiviert. Außerdem funktioniert das Syntax Highlighting oft erst nach einem Speichern richtig, sodass der Quelltexteditor sich zu kaum mehr als dazu eignet, den vom grafischen Editor erzeugten HTML-Code zu überprüfen. Passt der Benutzer die Formatierung per Hand an, macht die Software dies zudem beim Speichern rückgängig. Machmal enkodiert Kompozer die Umlaute nicht richtig, sodass der Browser unleserliche Zeichen anzeigt.

Bluefish

Bluefish [5] ist ein reiner Quelltexteditor mit Syntax Highlighting. Vorrangig für HTML entwickelt unterstützt er mittlerweile auch andere Sprachen wie PHP, Java, Perl, Python, Ruby, C und Pascal. Eine Toolbar fügt die häufigsten HTML-Tags mit einem Mausklick ein. Attribute der Tags fragt die Software gegebenenfalls über Dialogfelder ab.

Das Programm ist für die meisten Posix-kompatiblen Betriebssysteme, unter anderem Linux, FreeBSD, Mac OS X, OpenBSD, Solaris und Tru64, zu haben. Der Editor belegt nur etwas halb so viel Speicher wie Quanta oder Kompozer.

Wer mit Bluefish arbeitet, muss sich mit HTML auskennen, eine unterstützende Wysiwyg-Funktion gibt es nicht. Dass die Software wichtige und weniger wichtige HTML-Tags nebeneinander über zahlreiche Symbolleisten anbietet (Abbildung 4), die sich über Karteireiter auswählen lassen, ermöglicht versierten Benutzern zügiges Arbeiten, überfordert jedoch Anfänger. In einem zusätzlichen Menü direkt über dem Editor hält die Anwendung Codeschnipsel bereit, etwa in PHP programmierte Formulare oder sich bei Mausberührung über Javascript-Events verändernde Grafiken.

Abbildung 4: Bluefish legt neue Webseiten mit bereits ausgefülltem Header an. Viele HTML-Tags stehen als Shortcuts auf den Buttonleisten zur Verfügung, beim Eintippen schließt die Software die Tags automatisch.

Automatisierung

Bluefish verfügt über einen integrierten CSS-Generator. Der Benutzer darf selbst Shortcuts für den Karteireiter »Schnellzugriff« definieren. Beim Anlegen neuer Dokumente erzeugt ein Schnellstart-Dialog das Grundgerüst einer HTML-Datei. Der Dialog kennt alle Document Type Definitions von HTML 4.01 bis XHTML 1.1. Zudem bindet Bluefish auf Wunsch beim Erstellen des HTML-Grundgerüsts auch gleich externe Stylesheets ein.

Bluefish schließt von Hand eingetippte HTML-Tags automatisch. Die Anwendung überprüft dabei allerdings nicht, ob es sich um ein gültiges Tag handelt, sie wiederholt nur den Namen des vom Benutzer eingetippten Tag mit vorangestelltem Schrägstrich. Auch Umlaute enkodiert Bluefish nicht automatisch. Die schlanke Anwendung enthält auch keinen FTP-Client.

Im Vergleich mit Quanta Plus fällt auf, dass es beim manuellen Eintippen keine automatische Code-Vervollständigung gibt. Da HTML-Tags jedoch nur wenige Buchstaben lang sind, verzögert dies das Schreiben nur wenig. Bluefish rückt den Code weder beim manuellen Eintippen noch beim Einsatz der Shortcut-Buttons automatisch ein. Daher hängt es vom Anwender ab, wie lesbar der Code bleibt und ob er W3C-konform ausfällt.

Quanta Plus

Die Mitglieder des Forums Linuxquestions.org haben Quanta Plus, den HTML-Editor der KDE-Umgebung, in den Jahren 203, 2004 und 2005 zum besten Webeditor gewählt. Im Test entpuppte sich das umfangreiche Programm jedoch als sehr anspruchsvoll bei den Ressourcen. Es belegte beim Betrieb auf Debian Etch 54 MByte Arbeitsspeicher und 41 MByte unter Slackware 12. Quanta bietet Syntax Highlighting für unterschiedliche Sprachen wie etwa HTML, PHP, Java und Javascript.

Auch Quanta startet als reiner Quellcode-Editor, bringt aber in aktuellen Versionen auch eine Wysiwyg-Unterstützung mit. Diese überzeugt im Praxistest allerdings nicht, der Anwender kann in der grafischen Ansicht derart wenig verändern, dass sie eigentlich nur den Namen “Vorschau” verdient. Elemente lassen sich nicht mit der Maus platzieren, Spaltenbreiten nicht interaktiv einstellen. Lediglich Text darf der Benutzer direkt in Wysiwyg-Ansicht bearbeiten.

Selbst dabei kam es zu Problemen: Der Cursor fror im Test öfter ein, die Wysiwyg-Anzeige reagierte nicht mehr. Auch die Qualität des so entstehenden HTML-Code überzeugte nicht. In der Praxis taugt der Wysiwyg-Editor daher nur, um in der kombinierten Quellcode-Vorschau-Ansicht den Cursor zu positionieren, denn Quanta Plus synchronisiert die Cursorplatzierung der beiden Fensterhälften. Dies beschleunigt das Bearbeiten umfangreicher Seiten.

Programmierumgebung

Der Quellcode-Editor selbst überzeugt durch großen Leistungsumfang und gute Bedienbarkeit. Vordefinierte HTML-Tags stehen wie bei Bluefish in mehreren Buttonleisten zur Verfügung, die der Benutzer über Karteireiter auswählt. Tabellen, Listen, Formulare, Grafiken und Links entstehen so mit wenigen Mausklicks. Über die Plugin-Schnittstelle integriert Quanta Plus einen Link-Checker, einen Imagemap-Editor und das KDE-CVS-Frontend Cervisia. Wie bei KDE-Anwendungen üblich kann der Anwender die Toolbars frei konfigurieren.

Das Programm unterstützt alle HTML-Versionen von HTML 4.01 bis XHTML 1.1. Die Document Type Definition stellt der Anwender beim Erstellen neuer Seiten ein, sie lässt sich aber auch noch nachher verändern. Die Auswahl an Meta-Tags für den Kopf der HTML-Datei allerdings fällt bedeutend magerer aus als bei Bluefish, denn die bei der Optimierung für Suchmaschinen wichtigen Tags »description« und »robots« fehlen.

Schnell vervollständigt

Wer sich mit HTML auskennt, tippt den Code am schnellsten per Hand. Als einziger der getesteten Editoren bietet Quanta Plus eine aus Programmierumgebungen bekannte Code-Vervollständigung. Öffnet der Benutzer eine spitze Klammer, erscheint ein Menü mit den im Kontext möglichen Tags (Abbildung 5). Jeder getippte Buchstabe reduziert die Auswahl. Außerdem bindet die Anwendung den PHP-Debugger Gubed [7] ein und wird damit zu einer vollwertigen IDE für dynamische Webseiten in PHP.

Abbildung 5: Vollwertige Entwicklungsumgebung: Mit Code-Vervollständigung und einem PHP-Debugger bewegt sich der Leistungsumfang von Quanta in Richtung einer IDE wie Eclipse.

Für Validität und Lesbarkeit des Code ist wie bei Bluefish der Anwender verantwortlich. Beim Eintippen von Code sorgt Quanta Plus anders als viele Programmiereditoren nicht selbstständig für sinngemäßes Einrücken. Anders als bei Bluefish erzeugt aber der Tabellen-Assistent der XML-Hierarchie entsprechend formatierten Code.

Fazit

Mit dem Wysiwyg-Editor Kompozer erstellen auch Anfänger vernünftige und – wenn sie eine gewissen Komplexität nicht übersteigen – gut programmierte Webseiten. Die Bedienung des grafischen Editors ist jedoch etwas gewöhnungsbedürftig und nicht immer intuitiv. Der Quelltexteditor fällt spartanisch aus: Er bietet lediglich HTML-Syntax-Highlighting, das jedoch den Code oft erst nach dem Speichern einfärbt und daher keine Hilfestellung beim Eintippen gibt.

Der reine Quelltexteditor Bluefish ist schlicht und übersichtlich und hält sich beim Ressourcenbedarf erfreulich zurück. Zahlreiche Code-Templates erleichtern weniger HTML-kundigen Anwendern das Schreiben von syntaktisch korrektem Code. Wie bei Quanta Plus lassen sich die Buttonleisten, die vordefinierte Codeschnipsel bereitstellen, vom Benutzter anpassen. Das automatische Schließen von Tags beschleunigt das Schreiben von Quellcode. Anfängern ohne Kenntnisse in HMTL und CSS hilft Bluefish jedoch nicht durch eine Wysiwyg-Funktion weiter.

Quanta Plus beeindruckt durch seinen großen Leistungsumfang: Mit Code-Vervollständigung, einem PHP-Debugger und einer Plugin-Schnittstelle lässt der Funktionsumfang des Quelltexteditors kaum einen Wunsch offen. Als Kehrseite ergibt sich allerdings ein überladenes Benutzerinterface. Die Anwendung belegt außerdem viel Speicher und läuft auf langsameren Systemen träge.

Besonders enttäuscht jedoch die Wysiwyg-Ansicht, sie bietet kaum Editiermöglichkeiten und ist instabil. Für Anfänger oder für kleinere Änderungen an bestehenden Seiten ist Quanta Plus daher nicht zu empfehlen. Die Erwartung, als mehrfach ausgezeichneter bester Linux-Webeditor in einer Liga mit der kommerziellen Konkurrenz zu spielen, erfüllt die Software nicht. (pkr)