© Stephen Mcsweeny, 123RF.com

Endlich gibt es wieder einen Wysiwyg-Editor für Linux, der sich mit Dreamweaver & Co. messen kann. Blue Griffon ist nach zweijähriger Entwicklungsarbeit flügge geworden und unterstützt bereits jetzt die kommenden Techniken und Webstandards HTML 5 und CSS 3.

HTML 5 ist im Anflug. Auch wenn die neue Generation der Auszeichnungssprache für Webseiten noch keinen Status als Webstandard hat, scheint das den professionellen Machern von Webseiten egal zu sein. Zu verlockend sind die vielfältigen Möglichkeiten, um auf die finalen Richtlinien des World Wide Web Consortium (W3C, [1]) zu warten.

Die Entwickler von Firefox, Opera und Safari haben zudem längst ihre eigenen Standards formuliert und damit begonnen, die neuen Features zu implementieren [2]. Google Chrome und Internet Explorer 9 unterstützen ebenfalls einen großen Teil der Neuerungen, sodass die Darstellung einer semantisch korrekt ausgezeichneten Seite mit HTML-5-Elementen bereits heute möglich ist.

Während die Bezeichnungen für HTML-5-Elemente und -Attribute in modernen Browsern einheitlich sind, sieht das bei CSS 3 jedoch völlig anders aus. Die damit möglichen abgerundeten Ecken, Textschatten oder Hintergrundverläufe zeigen Browser nur an, wenn die Auszeichnungen deren eigenen Vorgaben entsprechen. So sind momentan zwei bis drei verschiedene Notationen für ein Element nötig, damit sowohl Firefox und Safari als auch Google Chrome und Internet Explorer 9 es korrekt darstellen.

Frameworks und Editoren, die bereits ein Grundgerüst aus HTML und CSS mitbringen, erleichtern Entwicklern die Umstellung auf die neuen Techniken. Unter Linux erhebt sich jetzt Blue Griffon [3] in die Lüfte und flattert den kommenden Standards entgegen.

Treffen der Generationen

Blue Griffon stammt aus derselben Softwareschmiede wie Nvu [4] und dessen Fork Kompozer [5]. Nach rund zweijähriger Entwicklungsarbeit veröffentlichte die französische Firma Disruptive Innovations SAS die erste Alphaversion des Editors im Oktober 2008, zweieinhalb Jahre später erschienen innerhalb weniger Wochen Version 1.0, nach wenigen Tagen 1.1 sowie 1.1.1 – die letzten beiden Releases bereinigten im Wesentlichen Bugs.

Blue Griffon steht gleich unter drei Lizenzen: der Mozilla Public License 1.1 (MPL), der GNU General Public License Version 2 (GPL) und der GNU Lesser General Public License Version 2.1 (LGPL). Das Herzstück ist die Rendering-Engine Gecko in der neuen Version 2, die auch in Firefox 4 verbaut ist. Der Webeditor selbst ist kostenfrei.

Zusätzlich stehen kostenlose und kostenpflichtige Addons bereit [6], die Blue Griffon um interessante Features erweitern. Bei Redaktionsschluss waren alle kostenpflichtigen Extras über ein Paket namens “Silver Offer” für 35 Euro erhältlich. Die Projekthomepage bietet ein Installationsskript für 32- und 64-Bit-Rechner zum Download an. Meldet der Editor nach dem Setup fehlende Rechte für das Profil, sollten Nutzer die Besitzverhältnisse des Verzeichnisses »~/.disruptive\ innovations\ sarl« kontrollieren.

Eine neue Seite

Blue Griffon bietet einen hilfsbereiten Assistenten, der das Grundgerüst einer neuen Webseite fertigt. In mehreren Schritten fragt der Wizard den Dokumententyp, Metatags für den Header sowie die Gestaltung der Linkfarben, des Hintergrunds, der Seitenbreite und die Spaltenaufteilung ab (Abbildung 1). Der Assistent orientiert sich am CSS-Raster der YUI Grids aus der Yahoo User Interface Library [7]. Der fertige Quelltext enthält bereits Reset-Angaben, um Browsereigenheiten zu neutralisieren.

Abbildung 1: Blue Griffons Assistent hilft Entwicklern dabei, ein Grundgerüst für ihre neue Webseite zu erstellen, und fragt dazu verschiedene Rahmendaten ab.

Unten im Hauptfenster schaltet der Nutzer zwischen dem Wysiwyg-Modus und der Quelltextansicht hin und her. Für Ersteren empfiehlt es sich, die Option »Alle Tags Modus« unter »Ansicht« zu aktivieren. Sie blendet kleine gelbe Label an den HTML-Tags ein, die deren Verschachtelung verdeutlichen und für mehr Übersicht sorgen. Um diese HTML-Elemente mit CSS-Code anzureichern, ist der Dokumentpfad unten im Fenster hilfreich. Auch er bildet die Struktur der Seite ab, und ein Klick aktiviert das ausgewählte Element, dem der Nutzer nun mit dem CSS Editor die gewünschten Attribute hinzufügt oder bestehende bearbeitet.

Neue Techniken

Interessant ist auch das Menü »Einfügen« , das nicht nur Bilder, Tabellen, Links, Anker, Formulare und so weiter ins Dokument einträgt, sondern auch ein Untermenü für die neuen HTML-5-Elemente enthält. Die neuen Tags »<section>« , »<header>« , »<nav>« , »<article>« , »<aside>« , »<hgroup>« und »<footer>« strukturieren Webseiten besser [8] und machen sie auch für Suchmaschinen und Screenreader zugänglicher. Auch wenn sich HTML 5 noch in der Entwicklung befindet, kann es daher schon heute sinnvoll sein, eine Webseite mit den neuen Elementen anzureichern.

Ähnliches gilt für CSS 3, das für das moderne Styling von HTML 5 sorgt. Waren bisher bis zu vier Hintergrundbilder in jeweils eigenen »<div>« -Containern nötig, um abgerundete Ecken darzustellen, erledigt das jetzt ein einziger CSS-Befehl. Doch unterstützen selbst moderne Webbrowser noch nicht alle neuen Elemente [9].

Über »Konsolen | Stil-Eigenschaften« ist der Dialog »CSS Eigenschaften« zu erreichen, der detaillierte Einstellungen bietet. Ein reichhaltiger Schriftarten-Fundus verbirgt sich hinter »Einfügen | Web-Zeichensätze« . Anwender finden hier die Webfont-Schmiede Font Squirrel [10] und die Fonts der Google-Library [11].

Entwickler, die nicht nur Inline-Styles schreiben möchten, sollten sich in jedem Fall den CSS Pro Editor [12] anschauen. Das kostenpflichtige Addon installiert einen Stylesheet-Editor, der in der Handhabung deutlich komfortabler ist als Blue Griffon und viel mehr Möglichkeiten bietet (siehe Abbildung 2). Die Erweiterung erlaubt es unter anderem, externe CSS-Dateien einzubinden und die als Media Queries [13] bekannten Auszeichnungen für unterschiedliche Fensterbreiten zu schreiben.

Abbildung 2: Der CSS Pro Editor ermöglicht es unter anderem, mehrere Hintergrundbilder in einem Container anzulegen und zu bearbeiten.

Eine Webseite kann sich so an die Bildschirmgröße von Rechnern und Notebooks, aber auch an die von Tablet-PCs oder Smartphones anpassen. Eine gravierende Einschränkung müssen Käufer des CSS Pro Editors hinnehmen: Externe Stylesheets berücksichtigt Blue Griffon in der Wysiwyg-Ansicht leider nicht.

HTML 5 bietet mit »<video>« und »<audio>« zwei neue Tags für eingebettete Video- und Audiodateien. Der Browser spielt Multimediainhalte ohne Plugin ab. Die Browserhersteller haben sich bislang aber nicht auf einheitliche Formate einigen können. Neue Versionen von Firefox, Safari und Internet Explorer führen jeweils nur ihr bevorzugtes Format vor [14].

Entwickler, die Videos schon jetzt mit den neuen HTML-5-Elementen nutzen wollen, müssen das Video in mindestens zwei Varianten einbinden. Um zusätzlich eine Fallback-Lösung für ältere Browser anzubieten, ist zudem eine Flash-Variante erforderlich. Im Web kursieren bereits einige Skriptvorlagen und Tutorials zu diesem Thema [15].

Laut und bunt

Blue Griffon bindet per Mausklick Video- und Audiodateien (Ogg Theora, Ogg Vorbis und WAV) ein und öffnet entsprechende Dialoge zum Feintuning, in denen Anwender die Quelle, die Bedienelemente, die Wiedergabe in einer Endlosschleife sowie Höhe und Breite eines Videos festlegen. Praktisch: Der Editor generiert auf Knopfdruck einen Schnappschuss des Films (siehe Abbildung 3) und verwendet diesen als Vorschaubild in der Webseite (Attribut »poster« im Tag »<video>« ).

Abbildung 3: Blue Griffon erleichtert das Einbinden multimedialer Inhalte über entsprechende Konfigurationsdialoge. Praktisch ist vor allem die Funktion, ein Vorschaubild für Videos zu erstellen.

Vektorgrafiken im SVG-Format sind eigentlich ein alter Hut, aber mit dem »<svg>« -Tag werden sie in HTML 5 zu normal integrierbaren Elementen. Das mitgelieferte Addon SVG-Edit (erreichbar über das Icon mit der Blume und dem Stift in der Werkzeugleiste) erzeugt und bearbeitet SVG-Grafiken und integriert sie direkt in die aktuelle Webseite.

Dabei muss es nicht immer eine eigene Kreation sein: SVG-Edit erlaubt über »Image Library« den Zugriff auf zwei Bibliotheken mit fertigen Bildern, darunter die unter der Creative Commons lizenzierte Sammlung von IAN (Integration and Application Network, [16]).

Zutritt erwünscht

Eine prominente Stellung räumt Blue Griffon den von der Web-Accessibility-Initiative (WAI, [17]) empfohlenen Aria-Rollen ein. Diese Richtlinien sollen komplexe und interaktive Elemente wie Javascript- und Ajax-Anwendungen zugänglicher machen und Seitenbereiche nach ihrer Priorität ordnen.

Screenreader erhalten über die Accessible Rich Internet Applications einen genaueren Überblick über Zustände und Eigenschaften von Elementen einer Webseite. Moderne Browser und Screenreader verstehen die Rollenauszeichnung bereits; ältere ignorieren sie einfach. Im Webeditor erreichen Nutzer die Aria-Rollen direkt über das Dropdown-Menü ganz rechts in der Symbolleiste. Tooltips verraten mehr zu den einzelnen Rollen und geben Hinweise zum Einsatzzweck.

Die Auszeichnung mit Landmark-Rollen, einer Untermenge der Aria-Spezifikation, ergänzt die in HTML 5 verfügbaren Strukturelemente um Hinweise zu deren Inhalt und Bedeutung. Landmarks dienen als Orientierungshilfe bei der Navigation. Das Attribut »aria-required« können Screenreader hingegen als Kennzeichnung für eine erforderliche Eingabe in Formularfeldern interpretieren.

Abschlussarbeiten

Der integrierte DOM-Inspektor (Menü »Konsolen | DOM Explorer« ) hilft Entwicklern dabei, falsch verschachtelte »<div>« -Container oder nicht richtig geschlossene Tags im Quellcode aufzuspüren. Zudem erlaubt er direkten Zugriff auf die Tags, um IDs, Klassen und deren Werte schnell zu ändern.

Der »Markup Aufräumer« aus dem Menü »Extras« bereinigt den Quellcode, um ihn möglichst standardkonform und valide zu hinterlassen. Dieser Putzdienst – auch Tidy [18] genannt – ist ein Prüfangebot des W3C und im Falle von Blue Griffon wirklich sinnvoll: Bei jeder Zeilenschaltung fügt der Editor am Ende eines Absatzes oder einer Liste ein völlig unnötiges »br« ein. Wirklich störend ist der Bug bei Tabellen, denn Blue Griffon beglückt jede Zelle damit. Die integrierte Tidy-Funktion räumt zwar zuverlässig auf, wünschenswert wäre aber, auf solche Artefakte gar nicht erst achten zu müssen.

Die Basisversion allein macht nur bedingt glücklich. Für die Arbeit mit CSS 3, mit externen Stylesheets und den Media Queries ist die kostenpflichtige Erweiterung CSS Pro Editor unverzichtbar. Ein Wysiwyg-Editor, der nur Inline-Styles schreiben kann, ist für Profis keine echte Option. Die meisten Webentwickler arbeiten mit externen CSS-Dateien, und auch wenn Blue Griffon diese bearbeiten und abspeichern kann, ist das Programm ohne Code-Unterstützung nicht viel mehr als ein einfacher Texteditor.

Blue Griffon will ein Editor der nächsten Generation sein und vor allem die Arbeit mit HTML 5 und CSS 3 erleichtern. Darin ist das Programm – trotz einiger Kinderkrankheiten – jetzt schon erstaunlich gut. Vor allem die Unterstützung bei der Arbeit mit Formularen und die Auszeichnung mit HTML-5-, CSS-3- und Aria-Elementen überzeugen, einige kostenlose Addons runden die Sache ab. Blue Griffon hinterlässt insgesamt einen flugbereiten Eindruck.