5 Dreamweaver-Alternativen, die Sie kennen sollten

Der Composer/Nvu-Nachfolger BlueGriffon von Disruptive Innovations nutzt die Rendering-Engine Gecko, die in C++ geschrieben ist und unter anderem im Webbrowser Firefox zum Einsatz kommt, als Basis für den implementierten WYSIWYG-Editor. Dieser macht es möglich, HTML4-, HTML5- sowie XHTML-Seiten zu erstellen und zu editieren, die Sie bereits während des Schaffensprozesses in einer Vorschauversion begutachten können. Die Nutzeroberfläche ist in 20 Sprachen verfügbar, darunter unter anderem Deutsch, Spanisch, Englisch und Französisch. BlueGriffon läuft unter neueren Windows- (ab 7) und macOS-Systemen (ab 10.8) sowie – im Gegensatz zu Dreamweaver – auch unter der Linux-Distribution Ubuntu (ab 16.04). Ferner zeichnen den Web-Editor folgende Features aus:

• Einfache Einbindung von HTML5-Formularen, -Videos und -Audiodateien

• CSS-Editor (ermöglicht 2D- und 3D-Transformation-Techniken)

• SVG-Editor

• Font-Manager für FontSquirrel und Google Fonts

• Syntaxhervorhebung und Autovervollständigung

• modifizierbare Menüleisten und Keyboard-Shortcuts

• Barrierefreiheit dank ARIA (Accessible Rich Internet Applications)

Auch die Webentwicklungssoftware KompoZer ist aus dem Mozilla-Projekt Nvu hervorgegangen und basiert daher ebenfalls auf der Gecko-Engine. Zunächst handelte es sich bei KompoZer um kleine Optimierungen der Nvu-Software, bis das Programm schließlich als eigenständiger Web-Editor unter den freien Lizenzen GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) und MPL (Mozilla Public License) veröffentlicht wurde. Das Team aus dem Mozilla-Umfeld hat die Weiterentwicklung 2010 gestoppt, dennoch ist die Software auf allen gängigen Windows- und macOS-Systemen sowie Ubuntu (ab Version 14.04) nutzbar. Für KompoZer existieren mittlerweile über 20 verschiedene Sprachpakete – unter anderem Deutsch, Englisch, Französisch, Italienisch und Spanisch.

Auch wenn KompoZer nicht zu den Dreamweaver-Alternativen zählt, die hinsichtlich Funktionsumfang und Komplexität mit dem Adobe-Programm mithalten können, bietet die Open-Source-Anwendung seinen Nutzern dennoch einige Features, mit deren Hilfe sich professionell designte Webseiten gestalten lassen:

• Leistungsstarker WYSWYG-Editor, der einen einfachen Wechsel zwischen Code und Vorschau ermöglicht

• Integrierter CSS-Editor inklusive Importfunktion für bereits existierende Stylesheets

• Anpassbare Menüleisten

• Rechtschreibüberprüfung und Syntaxhervorhebung

• Tabs für das gleichzeitige Bearbeiten mehrerer Seiten

• Formular-Assistent

• Integrierter Markup-Cleaner, der Ihre Projekte auf W3C-Konformität prüft

• FTP-Seitenmanager inklusive Drag-and-drop-Funktion für Mediendateien wie Bilder

Bei Brackets handelt es sich um eine Open-Source-Alternative zu Dreamweaver, die Adobe im Jahr 2011 selbst als Community-Projekt ins Leben gerufen hat. Im offiziellen GitHub-Repository findet man heute mehr als 5500 Forks der MIT-lizenzierten Software, die auf HTML, CSS und JavaScript aufbaut. Der Webeditor ist sowohl für Windows und Mac als auch für Linux (Ubuntu und Debian) verfügbar, wobei die Linux-Varianten nicht die komplette Funktionspalette bieten. Brackets läuft auf Grundlage der JavaScript-Laufzeitumgebung Node.js und kann durch zahlreiche Erweiterungen ausgebaut werden – unter anderem durch einen WYSIWYG-Editor, der nicht in der Standardausführung enthalten ist.

In der Dreamweaver-Alternative sehen Sie die Vorschau Ihres Codes standardmäßig also nicht direkt im Programm. Sie haben allerdings die Möglichkeit, das vorläufige Ergebnis Ihres Webprojekts jederzeit in Google Chrome zu betrachten. Hierfür müssen Sie jedoch den Internetbrowser zunächst ebenfalls installieren. Drei elementare Features heben die Entwickler von Brackets für den modernen Webeditor hervor:

• Schnelles Bearbeiten: Brackets offeriert die perfekte Plattform für das Schreiben von Code. Sie öffnen das Programm und legen einfach sofort los. Dabei müssen Sie nicht zwischen verschiedenen Dateien für HTML, CSS und JavaScript hin und her wechseln, sondern nutzen einfach integrierte Editoren für Stylesheets und Skripte direkt im HTML-Dokument. Sie wählen das gewünschte Element aus und öffnen dann mithilfe spezifischer Shortcuts die erwähnten Bearbeitungsmasken.

• Live-Vorschau: Wenn Sie auf die Vorschaufunktion mit Chrome zurückgreifen, sendet Brackets diesem automatisch in Echtzeit alle Änderungen am HTML- und CSS-Code, sodass Sie sofort überprüfen können, ob diese wie gewünscht funktionieren. Anpassungen an JavaScript-Anwendungen sind bis dato noch nicht in die Live-Vorschau integriert, eine entsprechende Funktion ist jedoch laut Hersteller geplant. Aktuell ist es bereits möglich, JavaScript-Modifikationen in der Browser-Vorschau zu sehen, indem Sie das Brackets-Projekt zuvor abspeichern.

• Unterstützung von Präprozessoren: Das Code-Editieren zeichnet sich in der kostenlosen Alternative zu Dreamweaver nicht nur durch eine hohe Geschwindigkeit, sondern auch durch die Möglichkeit aus, Less- und SCSS-Dateien zu nutzen – dank der Unterstützung der CSS-Präprozessoren Less und Sass. Mit ihrer vereinfachten Syntax, mit der Brackets ebenfalls umzugehen weiß, schreiben und bearbeiten Sie Ihre Stylesheets noch schneller.

Aptana Studio ist die freie, integrierte Entwicklungsumgebung der Firma Aptana Inc. Die Plattform basiert auf dem Java-Tool Eclipse und unterstützt neben JavaScript, HTML5 und CSS3 auch diverse Programmiersprachen wie PHP, Python und Ruby. Ferner können Ajax-Bibliotheken wie jQuery, Prototype oder script.aculo.us direkt in die Anwendung eingebunden und auf diese Weise für den Entwicklungsprozess genutzt werden. Die Dreamweaver-Alternative gibt es als Stand-alone-Version für Windows (ab XP), Linux (ab Ubuntu 9.04 / Fedora 12) und macOS (ab OS X 10.5) und als Eclipse-Plug-in (mindestens Eclipse 3.6). Das Entwicklerteam verbreitet Aptana Studio unter einem dualen Lizenzmodell: Nutzer können entweder eine Kombination aus GNU-GPL-Lizenz und Aptana-GPL Exception oder alternativ die Aptana Public License (APL) wählen.

Neben der breiten Unterstützung von Programmiersprachen und Plattformen zeichnen den Webeditor folgende Kernfeatures aus:

• Code-Assistent: Der Code-Assistent gibt Vorschläge für mögliche Argumente, Eigenschaften oder Methoden und zeigt zudem die Unterstützung jeglicher HTML-, CSS- und JavaScript-Elemente Ihres Webprojektes in den gängigen Internetbrowsern an.
• Integrierte Debugger: JavaScript- und Ruby-on-Rails-Debugger sind bereits implementiert und helfen dabei, Fehler in Ihrer Webanwendung aufzuspüren und zu beheben.
• Bereitstellungs-Assistent: Aptana Studio bietet mit dem Bereitstellungs-Assistenten ein Tool, das Sie beim Upload, Download und bei der Synchronisation Ihrer Webprojekt-Dateien via FTP, SFTP und FTPS unterstützt.
• Versionskontrolle: Sie können Ihr Webprojekt unkompliziert mit Git verknüpfen und so ein sicheres, gemeinsames Arbeiten am Quellcode sicherstellen, wie es etwa online bei GitHub möglich ist.
• Integriertes Kommandozeilen-Tool: Dank eingebautem Terminal führen Sie Systembefehle direkt in Aptana Studio aus.
• Flexible Entwicklungsumgebung: Sie können Aptana Studio frei nach Ihren Wünschen konfigurieren und die Basismöglichkeiten durch Skripts für Standardbefehle erweitern und mit Shortcuts versehen, um die optimale Usability zu erzielen.

Unter dem Namen Atom hat GitHub, der Hosting-Dienst für Entwicklungsprojekte aller Art, 2014 seine ganz eigene Version eines Webeditors veröffentlicht. Als Grundbasis fungiert das plattformübergreifende Framework Electron (ehemals Atom Core), das den Browser Chromium mit der JavaScript-Laufzeitumgebung Node.js kombiniert und ebenfalls die Handschrift der GitHub-Entwickler trägt. Nachdem zunächst ausschließlich Erweiterungen und Pakete unter einer Open-Source-Lizenz freigegeben wurden, entschied sich GitHub am Ende dafür, auch den Quellcode des gesamten Projekts inklusive aller Standard-„Packages“, wie die Funktionsmodule des Editors genannt werden, unter der MIT-Lizenz freizugeben. Die Funktionen des Webeditors sind über einzelne JavaScript-APIs erreichbar, wobei die Entwickler die Nutzung von CoffeeScript anstelle von JavaScript empfehlen. Für CSS-Inhalte ist in Atom die vereinfachende Stylesheet-Sprache Less als Standard vorgegeben.

Der Webeditor unterstützt dank entsprechender Plug-ins neben den neuesten Standards von HTML, CSS und JavaScript bzw. CoffeeScript auch diverse Programmiersprachen wie zum Beispiel PHP, Ruby, Java, C, C++, Python und Perl. Zu den vielfältigen Features der kostenlosen Alternative zu Dreamweaver zählen unter anderem folgende:

• Integrierter Paketmanager: Atom wartet mit seinem eigenen Paketmanager apm (Atom Package Manager) auf, der die Einbindung und Installation von Packages zum Kinderspiel macht.

• Automatische Vervollständigung: Je nachdem, mit welcher Programmiersprache Sie gerade arbeiten, bietet Atom Ihnen beim Schreiben Vorschläge zur Vervollständigung des Codes an. Mit nur einem Tastendruck können Sie diese Empfehlungen dann übernehmen. Zudem können Sie den Fundus möglicher Vorschläge durch eigene Code-Snippets erweitern.

• Syntaxhervorhebung: Für installierte Programmiersprachen bietet die Dreamweaver-Alternative Ihnen Syntaxhervorhebung für die wichtigsten Regeln. Diese werden automatisch farblich hervorgehoben, insofern Sie von dieser Option Gebrauch machen wollen.

• Versionsverwaltung: Atom hat als GitHub-Anwendung erwartungsgemäß das Versionskontrolle-Tool Git implementiert, das Sie dabei unterstützt, den Überblick über Veränderungen an Ihrem Webprojekt zu behalten. Sie können den Editor beispielsweise so einstellen, dass veränderte Zeilen visuell hervorgehoben werden.

• Dateisystem-Browser: Dank des Dateisystem-Browsers suchen und öffnen Sie einzelne Dateien, ein komplettes Projekt oder gar mehrere Projekte unkompliziert in einem einzigen Fenster.

• Command Palette: Über eine einfache Tastenkombination rufen Sie eine Suchmaske auf, mit der Sie verfügbare Befehle finden und unkompliziert auf diese zugreifen können.