Brackets: Open Source Web-Editor von Adobe

Brackets Web-Editor (Screenshot)

Es mag erstaunen, dass ausgerechnet Adobe – Hersteller von Dreamweaver, dem unangefochtenen Standard bei den kommerziellen Web-Editoren – einen frei verfügbaren Web-Editor mit MIT-Lizenz herausbringt. Und doch ist Brackets eines der von Adobe unterstützten Open-Source-Projekte. Ebenfalls überraschend ist der Umstand, dass Brackets nicht in einer der für Desktop-Applikationen typischen Programmiersprache entwickelt wird, sondern mit den Web-Technologien HTML, CSS und JavaScript. Dadurch ist die Software vergleichsweise einfach erweiterbar.

Brackets zeichnet sich insbesondere durch folgende Eigenschaften aus:

  • Die Applikation ist schlank und effizient. (Dafür ist sie keine vollwertige Entwicklungsumgebung, sondern ein reiner Code Editor.)
  • CSS- und JavaScript-Code wird im HTML-Code inline dargestellt und editiert. Dies bedeutet, dass man nicht ständig zwischen verschiedenen Files wechseln muss.
  • Jede Änderung am Code wird sofort in einem parallel geöffneten Browser sichtbar – und zwar ohne die übliche Save & Reload-Prozedur.

Wie sich der Editor in der Praxis anfühlt, kann man als Normalanwender allerdings nicht ohne weiteres ausprobieren: Nebst der eigentlichen Applikation (Brackets) benötigt man auch eine Shell für das jeweilige Betriebssystem (Brackets App). Ausserdem ist die Software noch nicht wirklich fertig:

“Brackets isn’t ready for general use yet. It’s still very early in development, is missing a lot of basic editor features, and probably has bugs.”

Das nachstehende Video zeigt allerdings schon recht genau, wie Brackets daherkommen wird und welches seiner herausragenden Eigenschaften sein werden:

Brackets: A Free Open Source Code Editor for the Web

Datenschutz-Hinweis: Wenn Sie dieses Video abspielen, können Sie von YouTube getrackt werden.

Wer es etwas genauer wissen möchte, dem sei die Präsentation von Adam Lehmam bei Adobe empfohlen:

Brackets: An Introducton

Datenschutz-Hinweis: Wenn Sie dieses Video abspielen, können Sie von YouTube getrackt werden.

SELFHTML startet als Wiki

SELFHTML Wiki

Im deutschsprachigen Raum ist SELFHTML die bekannteste und umfassendste Online-Dokumentation zu HTML und CSS. Ihre Weiterentwicklung ist allerdings ins Stocken geraten, und nach redaktionsinternen Differenzen über die zukünftige Strategie hat der Gründer Stefan Münz anfangs 2007 das Projekt verlassen. Münz wollte SELFHTML in ein Wiki überführen und so die Schwelle für die Mitarbeit neuer Autoren senken, während ein Teil der Redaktion an den bisherigen Technologien und Prozessen festhalten wollte.

Inzwischen scheint das Wiki-Konzept weitere Anhänger gefunden zu haben, und so wurde Mitte März 2010 das SELFHTML Wiki lanciert (offizielle Ankündigung). Dieses (wie die Wikipedia auf der MediaWiki-Software basierende) Wiki soll langfristig die alte Dokumentation ablösen. Ob dies gelingen wird, ist derzeit noch nicht abzuschätzen: Das Wiki wird derzeit zwar regelmässig, aber auf niedriger Frequenz bearbeitet, und es besteht momentan noch das Problem, dass im Wiki kein ausführbarer Demo-Code eingefügt werden kann. Bis alle Inhalte der alten Dokumentation in das Wiki überführt sind, wird es wohl noch einige Zeit dauern. Und ob das SELFHTML-Wiki eine ähnlich stringente Struktur entwickeln wird wie die alte SELFHTML-Dokumentation hängt massgeblich davon ab, wie gut die Redaktion das Projekt begleitet. Zu wünschen wäre es, denn wenn dieser Versuch scheitern würde, dann hätte SELFHTML wohl keine langfristige Zukunft mehr.

Aptana Studio: Entwicklungsumgebung für HTML, CSS, JavaScript, PHP, Ruby on Rails, Python und mehr

image

Lassen Sie mich zunächst eines klarstellen: Ich bin kein Entwickler. Ich habe zwar ganz gute HTML- und CSS-Kenntnisse und schreibe zur Not auch einfache PHP-Skripts, aber mein übriges Wissen über Programmierung ist rein theoretischer Natur. Insofern kann ich Aptana Studio nicht bis ins letzte Detail beurteilen – aber das, was ich verstehe, gefällt mir ausserordentlich.

Aptana Studio ist eine Entwicklungsumgebung (Integrated Development Environment IDE), die – abgesehen von Microsoft-Technologien und Java – so ziemlich alle Sprachen unterstützt, welche derzeit angesagt sind, wenn es um Web-Applikationen geht. Das beginnt bei HTML und CSS, geht weiter über JavaScript (wobei zahlreiche populäre AJAX Frameworks wie Scriptaculous, YUI, Prototype, Mootools, jQuery oder ExtJS zum Lieferumfang gehören) und schliesst auch PHP, Ruby on Rails sowie Python ein.

Die Entwicklungsumgebung glänzt mit guter Unterstützung zur Fehlervermeidung und -suche: Bereits beim Schreiben des Codes werden Syntaxfehler moniert, und es gibt einen Debugger, der die Fehlersuche zur Laufzeit ermöglicht. Elegant ist auch die Art und Weise, wie man ein Skript (z.B. PHP) direkt ausführen und erst noch in unterschiedlichen Browsern ausgeben kann – und zwar ohne dass man einen lokalen Webserver installieren müsste.

Aptana Studio basiert auf Eclipse und kann entweder als Eclipse-Plugin oder als eigenständige Applikation für Windows, Mac OS oder Linux installiert werden. Die Community Edition ist kostenlos und kann wahlweise unter der GNU General Public Licence oder unter der Aptana Public Licence genutzt werden. Interessant ist übrigens das Businessmodell von Aptana: Während die IDE kostenlos zur Verfügung gestellt wird (sofern man nicht die Pro-Version wählt) ist die Nutzung der Server in der Aptana Cloud kostenpflichtig. Und weil das Deployment mit Aptana Cloud so elegant in Aptana Studio integriert ist, wird sich wahrscheinlich manch ein Entwickler entschliessen, seine Test- und Live-Umgebungen bei Aptana zu betreiben.

Aardvark & Firebug: Beliebige Webseiten direkt im Firefox bearbeiten

Es gibt verschiedene Situationen, in denen man eine Webseite gerne direkt im Browser anpassen würde. Beispielsweise wenn man nur einzelne Elemente der Seite ausdrucken bzw. screenshotten möchte. Oder wenn man jemandem veranschaulichen möchte, wie die Seite umgebaut werden soll. Oder um eine Seite auf die wesentlichen Elemente zu reduzieren und sie anschliessend als Template zu nutzen.

Nun ist ein Browser per Definition ein Programm, um Webseiten anzuzeigen – nicht um sie zu bearbeiten. Zwei Firefox-Extensions machen es trotzdem möglich: Aardvark und Firebug.

image

Aardvark ist die einfachere und schnellere Variante. Ein roter Rahmen zeigt an, welches HTML-Element sich gerade unter dem Mauszeiger befindet, und per Tastaturkürzel wird dieses Element bearbeitet. Um den DIV-Tag in unserem Beispiel zu entfernen genügt es, die Taste «R» (remove) zu drücken; mit der Taste «C» (colorize) würde er eingefärbt. Die Möglichkeiten sind beschränkt, dafür sind auch keine HTML-Kenntnisse erforderlich.

image

Mit Firebug, dem Universalwerkzeug für Web-Entwickler, kann man das natürlich auch. Hier editiert man den HTML-Quelltext einer Seite und sieht sofort die modifizierte Seite. Dies ermöglicht weitaus detailliertere und komplexere Eingriffe in eine Seite – sofern man weiss, was man tut. Übrigens lassen sich so auch eingebundene CSS Styles editieren. Auf diese Weise kann man sehr rasch alternative Formatierungen ausprobieren.

Firefox 3: Was ist neu?

Inzwischen liegt die Beta 2 von Firefox 3 vor – Zeit, sich den neuen Open Source Browser etwas genauer anzuschauen:

image

Die auffälligste Neuerung beim Firefox 3 ist die Adresszeile (engl. Location Bar): Beginnt man eine neue URL einzutippen, erscheinen im Dropdown nicht nur Vorschläge aus der History, sondern auch aus den Bookmarks. Ausserdem wird der Seitentitel mitangezeigt, was unter Umständen wesentlich informativer ist als die URL.

image

Wer häufig grosse Dateien herunterlädt und keine allzu performante Internet-Anbindung besitzt, wird die Möglichkeit schätzen, neu einen Download zu unterbrechen und später wieder aufzunehmen.

 image

In der aktuellen Beta 2 noch nicht sichtbar ist das Redesign, das Firefox in der Version 3 erhalten soll. Dabei geht es nicht einfach nur darum, ein schöneres, moderneres Design umzusetzen, sondern Firefox möglichst in die Design-Welt des jeweiligen Betriebssystems zu integrieren – wie obige Grafik am Beispiel eines einzelnen Icons sehr schön zeigt.

image

Ebenfalls überarbeitet worden ist der Lesezeichen-Manager: Bookmarks (Lesezeichen) und die History (Chronik) werden nun im gleichen Fenster angezeigt. Dies scheint mir eine gute Entscheidung, denn letztlich geht es in beiden Fällen darum, wichtige URLs wiederzufinden. Auch die Unterstützung von Tags wurde verbessert, Bookmarks können nun direkt bearbeitet werden (ähnlich wie bei der Extension Flat Bookmark Editing), und offenbar gibt es auch eine automatische Backup-Funktion, dank der man seine Bookmarks gemäss dem Stand der letzten Tage wiederherstellen kann.

Auch für Web-Entwickler und Extension-Programmierer hat die neue Firefox-Version einige Verbesserungen zu bieten, namentlich eine bessere CSS-Implementierung und die Unterstützung von JavaScript 1.8. Mehr Informationen zur aktuellen Beta 2 gibt es auf der Mozilla-Website.