Der Web-Editor Bluefish bietet eine professionelle Entwicklungsumgebung mit buchstäblich hunderten Funktionen und einer ausgefeilten Projektverwaltung. Dabei schafft er trotzdem den Spagat, Einsteigern das Leben leicht zu machen.

Das Internet läuft auf Linux-Servern und größtenteils mit Techniken aus dem Linux-Umfeld. Da liegt es nahe, dass auch Webdesigner unter Linux arbeiten. Erstaunlicherweise ist das Angebot an Software für diesen Zweck nur im Segment für Vollprofis gut ausgebaut. Zwar fühlen sich die große IDE für Berufsprogrammierer und der bewährte Kommandozeileneditor auf Linux heimisch, an intuitiven Webeditoren für Menschen mit mehr Talent für Design und Inhalt als für komplexe Programmlogik mangelt es. Einzig der Webeditor Bluefish [1] hält hier seit einigen Jahren die Fahne hoch (Abbildung 1).

Abbildung 1: Bluefish bietet hunderte Komfortfunktionen für die Arbeit mit HTML-Quellcode und zeigt auf Mausklick das Ergebnis im Browser an (hier in Chromium).

WYSIWYG?

Für das Gestalten von Webseiten setzen viele Programme auf WYSIWYG, Sie arbeiten dort also direkt in der Browser-Ansicht der Seite. Solche Editoren erlauben jedoch konzeptbedingt nur eher simple Layouts und zeigen sich von der Modularität moderner Websites schnell überfordert. Außerdem programmiert keine Automatik so elegant und effizient wie ein Mensch: Selbst Anfänger finden schnell heraus, wie sie einen gewünschten Effekt einfacher und damit schneller als ein Automat erzielen.

Der direkte Zugriff auf den Quellcode erweist sich spätestens beim ersten Darstellungsproblem als unerlässlich. Allerdings ist der Umgang mit Quellcodes nicht intuitiv. Wer mit einem universellen Texteditor wie Vim oder Gedit eine Webseite schreibt, muss zu Anfang dauernd in den Referenzen der verwendeten Programmiersprachen [2] nachschlagen, wie sich denn nun ein gewünschter Effekt programmieren lässt.

An dieser Stelle setzt Bluefish an: Hier fügen Sie hunderte von oft gebrauchten Befehlen und Konstruktionen per Mausklick in Webdateien ein. Für komplexere Aufgaben gibt es Assistenten, die sinnvolle Alltagsbegriffe wie Liste oder Grafikbeschreibung statt der zuweilen kryptischen Namen der Programmierbefehle anbieten.

Die von uns getestete aktuelle Entwicklerversion bietet auch bereits viele HTML5-Elemente in einem neuen Karteireiter des Editormenüs. Ob sich dieses neue Menü wirklich als gute Idee erweist, muss sich erst noch zeigen: Schließlich begründen die neuen Elemente keineswegs ein “neues HTML”, es handelt sich einfach um neu eingeführte Techniken im “ganz normalen” HTML. Prinzipiell ist etwa das HTML5-Video-Tag (Abbildung 2) nichts weiter als eben ein neues HTML-Tag: Es wäre also in einer Liste mit den bekannten Tags für Links oder Bilder gut aufgehoben.

Abbildung 2: Die HTML5-Unterstützung in Bluefish macht schöne Fortschritte. Hier der Assistent für das neue Video-Tag in Aktion.

In der Praxis dürften derzeit viele Nutzer aber gerade die neuen Tags in einem Editor gezielt suchen – einfach, um sie auszuprobieren. In dieser Phase erscheint das Extramenü zumindest nicht ganz sinnlos. Werden die HTML5-Tags aber erst Alltag, gerät das Extramenü zur überflüssigen Kuriosität.

Unendliche Weiten

Webseiten kommen im Browser in Form von HTML, CSS und Javascript an. Webentwickler kombinieren dazu einige hundert Befehle und Parameterangaben für Werte wie Größe und Farbe zu immer neuen Konstruktionen. Entwickler von Webeditoren können unmöglich alle Kombinationsmöglichkeiten voraussehen. Trotzdem sollen die beliebtesten und wichtigsten Funktionen mit einem Klick zu erreichen sein, also müssen die Programmierer auswählen, welche Funktionen sie weglassen, um die Programmoberfläche nicht zu sehr zu überladen.

Die Bluefish-Entwickler tendieren eher dazu, soviel wie möglich anzubieten, wobei sie parallel vier verschiedene Methoden nutzen:

• Mit vorgefertigten Menüeinträgen und Knöpfen fügen Sie die wichtigsten Alltagsfunktionen per Mausklick ein, wie etwa Überschriften, Absätze oder Hervorhebungen. Für komplexere Funktionen – etwa Bilder, Listen oder Links – öffnen Sie mit dieser Methode Assistenten, in denen Sie Werte wie die Bildadresse oder die gewünschte Zahl der Listenpunkte eintippen.
• Eine Automatik macht noch während des Eintippens von Befehlen Vorschläge für deren Komplettierung. Tippen Sie eine spitze Klammer und dann einen Buchstaben, klappt neben der Schreibmarke eine Liste mit möglichen Vervollständigungen aus.
• Bearbeitbare Funktionslisten funktionieren ähnlich wie normale Menü-Einträge, lassen sich aber an Ihre Wünsche anpassen und auch löschen oder neu anlegen.
• Mithilfe von Assistenten legen Sie ganze Dateien nach Vorlagen neu an.

Erst die letzten beiden Methoden machen aus Bluefish einen wirklich empfehlenswerten Webeditor. Selbst Einsteiger in die Webprogrammierung entwickeln sich bald zu Perfektionisten, die nur noch das wollen, was sie als das non plus ultra empfinden. Solche individuellen Optimallösungen tragen Sie in Bluefish selbstständig in die Templates des Dateimenüs und in die Funktionsliste in der Seitenleiste ein (siehe Kasten “Individueller Bluefish”).

Auch die Autovervollständigung funktioniert gut. Beim Formatieren von bereits geschriebenen Texten wirkt diese Methode allerdings oft etwas umständlich: Bluefish fügt beim Vervollständigen des Anfangs auch gleich den Schluss des Tags hinzu – der steht dann vor dem Textabschnitt, den er eigentlich abschließen soll. Beim nachträglichen Formatieren wenden Sie die gewünschten Tags also besser mit Mausklicks oder Tastaturkürzeln auf markierte Abschnitte an.

Abbildung 3: In der Funktionsliste definieren Sie eine eigene Gruppe, der Sie dann die gewünschten Schnipsel hinzufügen.

div-Tag in das Dokument.” width=”278″ height=”300″ /> Abbildung 4: Hier bittet der Assistent Sie, einen Kommentar einzugeben. Diesen schreibt Bluefish vor dem div-Tag in das Dokument.

Der große Navigator

Moderne Webseiten bestehen aus vielen verschiedenen Dateien. Dieses modulare Prinzip erleichtert die Arbeit und beschleunigt die Seite, indem sie hilft, Doppelungen zu vermeiden. Bluefish bietet für den Umgang mit solchen Dateinetzwerken gleich mehrere nützliche Werkzeuge.

Zunächst sollten Sie die Dateien, die Sie in Ihrem Projekt verwenden möchten, öffnen und mit Projekt | Neues Projekt als Projekt speichern. In der Voreinstellung zeigt Bluefish im Verzeichnisbaum links im Fenster nur Einträge, die zum geöffneten Projekt gehören. Viele Verzeichnisse blendet es deshalb beim ersten Start aus (Abbildung 5). Öffnen Sie deshalb die Dateien für Ihr erstes Projekt am besten über das Menü mit Datei | Datei öffnen. Die geöffneten Dateien des Projekt ordnet Bluefish in Tabs am unteren Rand des Editorbereichs an. Prinzipiell lässt sich diese Tableiste auch nach oben verschieben, im Test erlebten wir allerdings dabei einen der seltenen Abstürze.

Gesamten Baum anzeigen im Rechtsklickmenü.” width=”183″ height=”300″ /> Abbildung 5: Der Dateibaum in der Seitenleiste versucht, nur zum aktiven Projekt gehörende Verzeichnisse anzuzeigen. Möchten Sie einen normalen Dateibaum, aktivieren Sie Gesamten Baum anzeigen im Rechtsklickmenü.

Lassen Sie den Mauszeiger über einem Tab schweben, zeigt Bluefish einen Tooltipp mit der genauen Adresse und weiteren Detailinformationen zur jeweiligen Datei. Mit den Tabs lässt sich recht gut arbeiten. Wächst das Projekt allerdings auf mehr als zehn bis zwölf Dateien an, beginnt Bluefish, Tabs auszublenden. Dann zeigt der Editor an den Enden der Tabliste Pfeile an, mit denen Sie sich durch die Tabs klicken. Ein Rechtsklick auf einen Tab präsentiert alle Dateinamen in einer vertikalen Liste, die ab etwa 20 Dateien Scroll-Schalter oben und unten anzeigt. Spätestens hier wird die Tableiste unübersichtlich

Den Entwicklern von Bluefish ist freilich durchaus bewusst, dass viele Webprojekte deutlich mehr als nur 20 Dateien umfassen. Daher lässt sich auch der Verzeichnisbaum links vom Editor für die Navigation in Projekten nutzen. Hinter dem Tab mit dem Buchsymbol rechts neben dem Tab für den Verzeichnisbaum verbirgt sich obendrein eine Lesezeichenliste. Gerade für große Projekte erweist sich diese Bookmark-Funktion auf Dauer allen anderen Navigationsmethoden überlegen.

Mit einem einfachen Trick bekommen Sie sogar einen beschreibenden Titel für Ihre Datei als Lesezeichen. Tragen Sie dazu einfach einen Kommentar mit dem gewünschten Text in einer Datei ein. Anschließend klicken Sie doppelt in den Leerraum rechts neben der Zeilennummer – schon taucht der Text zusammen mit dem Dateinamen in der Bookmark-Liste auf.

Die Lesezeichen bindet Bluefish an die Zeile in der Datei und an den in dieser Zeile beginnenden Inhalt. Das Lesezeichen bleibt auch beim Einfügen oder Löschen von Zeilen über dem Lesezeichen an seinem Platz. Das ändert sich erst, wenn Sie den Inhalt der Zeile selbst modifizieren. Verschieben Sie einen mit Lesezeichen versehenen Block an eine andere Stelle, bleibt das Lesezeichen dagegen stur an seinem Platz, in der Lesezeichenliste erscheint weiter der inzwischen verschobene Code.

Brot und Butter

Über die Brauchbarkeit einer IDE entscheidet vor allem die Qualität des integrierten Editors. Neben der schon erwähnten Code-Vervollständigung wartet Bluefish auch mit allen anderen heutzutage üblichen Funktionen auf. So lassen sich Codeblöcke, auf- und zufalten, die von Klammern oder bestimmten HTML-Tags gebildet werden. Dabei verhält sich Bluefish nicht immer ganz konsistent: So dürfen Sie Paragraphen oder Listenpunkte manchmal falten, manchmal wieder nicht. Zuverlässig funktioniert die Erkennung aber bei Klammern und bei den wichtigsten Tags wie div, ?php oder form.

In früheren Versionen kritisierten viele Nutzer die Einfärbung des Codes in Bluefish: Da änderten sich die Farben erst nach Eingabe einer neuen Zeile, aus anderen Dateien eingefügter Code nahm erst nach diversen Voodoo-Ritualen die gewünschten Farben an. Dergleichen Probleme treten im aktuellen Bluefish nur noch selten auf. Bei Code, den wir probehalber aus der Quelltextansicht von Firefox herauskopierten, zeigte Bluefish alle Tags sofort korrekt an – bis auf die Zeilenumbrüche, die ungeachtet aller angewandten Tricks penetrant die schwarze Fließtextfarbe beibehielten (Abbildung 6). Das Problem scheint damit zusammenzuhängen, dass br kein schließendes Tag und normalerweise auch keine Attribute besitzt: Alle Tags mit paarigen Tags und Attributen färbte Bluefish sofort korrekt.

br-Tags schwarz – ebenso wie das HTML5-Tag footer, obwohl wir dieses aus dem Menü von Bluefish einfügten.” width=”285″ height=”300″ /> Abbildung 6: In aus Firefox eingefügtem Quelltext bleiben die br-Tags schwarz – ebenso wie das HTML5-Tag footer, obwohl wir dieses aus dem Menü von Bluefish einfügten.

Das gilt allerdings nicht für die meisten HTML5-Elemente. Obwohl sich footer, canvas und Konsorten sogar aus den Menüs von Bluefish einfügen lassen, färbt der Editor sie nicht immer als HTML-Tags ein. Ähnliches gilt auch für Befehle aus der Welt von CSS3, der aktuellen Version der Designsprache für Webseiten. Eigenschaften wie text-shadow oder border-radius bleiben “farblos”. Immerhin verursachen HTML5- oder CSS3-Tags keine fehlerhafte Anzeige des umgebenden Codes, der Einfärbemechanismus von Bluefish ignoriert sie einfach. Für die per Assistent eingefügten Tags audio und video hingegen funktioniert das Highlighting bereits.Ein Blick in den Bluefish-Quelltext zeigt, dass die Entwickler bereits an Lösungen für dieses Problem arbeiten. So finden sich bereits Definitionsdateien für die Behandlung von HTML5-spezifischen Elementen.

Funktionsvielfalt

Alle Funktionen aufzuzählen, die Bluefish in seinen Menüs bereithält, würde den Rahmen dieses Artikels mehrmals sprengen. Wer sich nicht mit der Maus durch die mehr als 300 Menü-Einträge hangeln möchte, kann in Bluefish zwei Spezialfunktionen von GTK nutzen.

Untermenüs mit oft benutzen Funktionen trennen Sie an der Schneidlinie oben ab und erzeugen damit ein neues Fenster, das permanent zur Verfügung steht. Noch schneller klappt der Zugriff mit Tastaturkommandos. Für viele Einträge des Hauptmenüs gibt es bereits Kombinationen, von denen die meisten mit [Strg]+[Alt] beginnen. So erzeugt [Strg]+[Alt]+[C] einen Kommentar. Alle Tastaturkürzel ändern Sie bei Bedarf, indem Sie einfach den Mauszeiger über einen Eintrag führen, ohne ihn dabei anzuklicken, und dann die gewünschte Kombination eintippen.

Im Menü Bearbeiten finden Sie wie üblich die Funktionen zum Suchen und Ersetzen. Beide bearbeiten wahlweise die aktive Datei, eine Auswahl oder auch übergreifend alle geladenen Dateien. Der Suchmechanismus erlaubt sowohl Reintext als auch reguläre Ausdrücke im Perl-Stil (Abbildung 7).

Ersetzen Moduls bei der Option Dateien auf dem Datenträger gedacht haben, bleibt ihr Geheimnis.” width=”300″ height=”155″ /> Abbildung 7: Was sich die Entwickler des Moduls Ersetzen Moduls bei der Option Dateien auf dem Datenträger gedacht haben, bleibt ihr Geheimnis.

Unter Werkzeuge finden Sie neben einigen anderen allgemeinen Bearbeitungsfunktionen auch das Untermenü Befehle. Hier starten Sie die aktuelle Datei im Webbrowser. Läuft ein lokaler Webserver oder arbeiten Sie direkt auf einem Server, tragen Sie dessen URL nach einem Rechtsklick in den Verzeichnisbaum links unter Dokumentenverzeichnis setzen ein. Anschließend öffnet Bluefish die Datei nicht unter deren Dateiadresse, sondern über einen Aufruf des Webservers. So zeigt Ihnen Bluefish auch korrekte Vorschauen von PHP-Dateien und allem anderen, was einen Webserver voraussetzt.

Das Menü Zencoding enthält einige Befehle für ein in Python umgesetztes System zur schnellen Eingabe von Code mit Hilfe von Abkürzungen. Zencoding [3] ist bestimmt nichts für Einsteiger, kann aber Profis die Arbeit sehr erleichtern.

Das Menü Dialoge wiederholt noch einmal die Inhalte der HTML-Toolbar direkt unter der Hauptwerkzeugleiste von Bluefish, ist dabei aber seltsamerweise nicht ganz vollständig. Dafür lassen sich hier – im Gegensatz zur Toolbar – mit der bereits erwähnten GTK-Methode Tastaturkürzel für die einzelnen Menüpunkte festlegen. In der Toolbar finden Sie im Reiter CSS den CSS-Editor von Bluefish (Abbildung 8).

Abbildung 8: Auch im CSS-Editor bringt Bluefish neue Technik mit. So kennt es bereits die CSS3-Eigenschaft text-shadow, weiß aber noch nicht das dazu auch eine Farbe gehört.

Fazit

Bluefish bietet buchstäblich hunderte nützlicher Funktionen. Besonders seine Projektverwaltung präsentiert sich praxistauglich und effizient. Problemchen gibt es eigentlich nicht in den Funktionen des Programms selbst, sondern damit, dass einige Funktionen in Bluefish mit der sich schnell entwickelnden Webtechnologie nicht ganz Schritt halten. Erfreulicherweise bietet Bluefish auch einige Möglichkeiten, diese kleinen Fehlstellen eigenständig auszubessern. Dank seiner offenen Bauweise und Konfigurierbarkeit lässt er sich ohne großen Aufwand zu einem zeitgemäßen Werkzeug ausbauen und wird so seinem Ruf als komfortabelster Profi-Webeditor für Linux nach wie vor gerecht.