Die Wikipedia bekommt einen WYSIWYG-Editor

Prototyp des Visual Editors für MediaWiki

Eine der grössten Hürden für neue bzw. weniger routinierte Wikipedia-Autoren ist der archaisch anmutende Editor: Wer einen Artikel anlegen oder überarbeiten will, kommt kaum darum herum, sich in Wikitext (wie die spezielle Auszeichnungssprache der MediaWiki-Software heisst) einzuarbeiten. Im Zeitalter von WYSIWYG-Editoren ist das gewöhnungsbedürftig, auch wenn es gute Gründe dafür gibt. Wikitext ist über die Jahre zu einer ziemlich mächtigen Sprache herangewachsen, und entsprechend ist es nicht trivial, dafür einen benutzerfreundlichen und zuverlässigen Editor zu entwickeln. Wer mit WYSIWYG-HTML-Editoren arbeitet, kann dies gut nachvollziehen – auch diese produzieren nicht immer effizienten und fehlerfreien Code und sind zudem nicht immer so bequem in der Anwendung, wie man auf den ersten Blick glauben würde.

Trotzdem hat sich die Wikimedia Foundation an die Entwicklung eines visuellen Editors gewagt, denn die stagnierenden Benutzerzahlen der Wikipedia sind nicht zuletzt auf die zu komplexe Benutzeroberfläche zurückzuführen. Inzwischen ist ein erster Prototyp des Visual Editors verfügbar, der allerdings erst sehr grundlegende Funktionen bereitstellt (und damit noch weniger weit geht als der heutige Wikipedia-Editor):

Toolbar des Visual Editors

In der Visual Editor Sandbox kann man diesen Prototypen gefahrlos testen und Feedback an die Entwickler geben. Bis dieser Editor in der Wikipedia ausgerollt wird, dürfte es allerdings noch mindestens ein halbes Jahr dauern, wie man im Blog der Wikimedia Foundation nachlesen kann. Denn:

“It’s the biggest and most important change to our user experience we’ve ever undertaken.”

EtherPad: Gleichzeitig online am gleichen Textdokument arbeiten

EtherPad

Vor einiger Zeit habe ich in diesem Blog Gobby vorgestellt, ein Texteditor, mit dem mehrere Personen an unterschiedlichen Rechnern gleichzeitig dasselbe Dokument bearbeiten können (Kooperatives Schreiben). Etherpad macht im Prinzip dasselbe, ist aber eine web-basierte Anwendung, während Gobby als Desktop-Software auf jedem beteiligten Rechner installiert werden muss. Nebst der Farbmarkierung – die jeden Text einem Autor zuordnet – kennt EtherPad auch einen Time Slider, über den man die Entstehung eines Textes chronologisch nachvollziehen kann.

Wer schon einmal Google Docs oder Google Wave benutzt hat, kennt das Prinzip. Und wohl nicht zufällig wurde AppJet (das Unternehmen hinter EtherPad) im Dezember 2009 von Google übernommen. Glücklicherweise hat Google aber die Software als Open Source freigegeben, und so sind inzwischen verschiedene Webplattformen entstanden, wo man EtherPad weiterhin nutzen kann, beispielsweise bei typewith.me. Wer möchte kann aber auch den Source Code herunterladen und EtherPad auf einem eigenen Server beitreiben, beispielsweise in einem Intranet.

Bespin: Mozilla Labs lanciert einen browser-basierten Code Editor

image

Wie wäre es, wenn man Web-Applikationen ausschliesslich im Web-Browser entwickeln könnte? Dieser Frage sind einige Entwickler bei Mozilla Labs nachgegangen, und herausgekommen ist Bespin, der browser-basierte Code Editor.

Wie der obige Screenshot erahnen lässt ist dieser Editor derzeit nicht zu vergleichen mit einer voll ausgestatteten Entwicklungsumgebung. Bespin trägt auch erst die Versionsnummer 0.1 und wird offiziell als "early experimental prototype" bezeichnet. Im Sinne eines Proof of Concept zeigt er aber eindrücklich, wie performant ein in JavaScript realisierter Editor sein kann. Wer sich selbst davon überzeugen will, kann Bespin ab sofort nutzen. In einer der nächsten Versionen wird dann hoffentlich auch die Möglichkeit implementiert sein, dass man gemeinsam am gleichen Dokument arbeitet – der Collaboration Sidebar im obigen Screenshot ist im Moment nämlich nur eine Attrappe.

XML Copy Editor: Ein XML-Editor für den Alltag

image

Immer mehr digitale Daten sind nicht in proprietären binären Dateien, sondern im XML-Format gespeichert. Für den Datenaustausch und für die langfristige Archivierung hat dies enorme Vorteile. Dabei sind XML-Dateien nichts anderes als strukturierte Textdateien und können deshalb mit jedem beliebigen Text-Editor geöffnet werden. Wer regelmässig XML-Dateien bearbeiten muss, sollte sich allerdings den Komfort eines spezialisierten Editors gönnen.

Da ich kein Entwickler bin, sind meine Anforderungen an einen XML-Editor eher bescheiden. Trotzdem habe ich eine ganze Reihe von Open-Source-Produkten getestet, bis ich fündig wurde. Konkret gelten für mich folgende Minimalanforderungen:

  • Tags und Daten müssen visuell gut unterscheidbar sein (Syntax-Highlighting).
  • Die Hierarchie der Elemente muss über Einrückungen o.ä. erkennbar sein.
  • Elemente müssen auf- und zugeklappt werden können (Folding).
  • Dokumente müssen auf Wohlgeformtheit und Gültigkeit geprüft werden können.
  • Der Editor muss auch mit grossen Dateien umgehen können.
  • Der Editor muss performant sein (rasch geöffnet, flüssig auch im Umgang mit grossen Dateien).
  • UTF-8 muss unterstützt werden.
  • Suchen/Ersetzen-Funktionen im üblichen Umfang sind zwingend.

Um Sie nicht länger auf die Folter zu spannen: XML Copy Editor erfüllt alle diese Anforderungen und ist dabei sowohl für Windows als auch für Linux verfügbar. Er schaffte es insbesondere auch, eine 135 MByte grosse Datei mit über 2,3 Millionen Zeilen zu öffnen. Das dauert dann zwar einen Moment, weil das gesamte Dokument geparsed und formatiert werden muss, aber es funktioniert. Und wer es eilig hat, kann den speziellen Befehl “Öffne grosses Dokument…” benutzen, dann entfallen Syntax-Highlighting und Klappmechanismen, so dass das Dokument schneller zur Verfügung steht.

Gobby: Gemeinsam Textdateien bearbeiten

image

Es gibt ganz unterschiedliche Lösungen, wenn mehrere, räumlich getrennte Personen gemeinsam einen Text bearbeiten wollen.

Da wäre beispielsweise der Überarbeitungsmodus von Textverarbeitungen zu nennen, der jede Änderung in einem Dokument protokolliert. Auf diese Weise lassen sich die Beiträge der einzelnen Autoren auseinanderhalten, akzeptieren oder verwerfen und (falls mehrere Versionen eines Dokuments existieren) zusammenführen. Dieses Prinzip eignet sich insbesondere dann, wenn es nicht nur um rohen Text, sondern um formatierte Dokumente geht und wenn die Autoren bei der Arbeit nicht immer online sein wollen. Zumindest diejenige Person, welche das Dokument am Schluss bereinigt, muss allerdings fortgeschrittene Anwenderkenntnisse besitzen.

Ein anderer Ansatz sind Wikis, welche ebenfalls jede Änderung festhalten. Im Unterschied zu Textverarbeitungen braucht es allerdings niemanden, der am Schluss den Text redigiert: Es gilt ganz einfach immer die letzte Version, und das Änderungsprotokoll dient lediglich dazu, alle Änderungen inkl. ihre Urheber anzuzeigen und im schlimmsten Fall rückgängig zu machen. Wikis sind Server-Applikationen, somit ist die aktuellste Version des Texts immer für alle Autoren verfügbar; dafür muss man immer online sein, und nicht alle Wikis bieten den Komfort von WYSIWYG-Editoren.

Ein drittes Konzept sind Programme, welche das kollaborative Schreiben in Echtzeit über LAN- oder Internet-Verbindungen erlauben. Nebst den kommerziellen Vertretern dieser Gattung wie MoonEdit oder SubEthaEdit gibt es auch eine entsprechende Open Source Software: Gobby. Hauptanwendungsgebiet solcher Texteditoren ist die gemeinsame Arbeit an Programmcode, aber natürlich kann man damit auch normale Texte schreiben – einfach ohne Formatierung.

Das Prinzip ist rasch erklärt (vgl. Screenshot): Nehmen wir an, ich arbeite an einem PHP-Skript und brauche dabei Unterstützung. Ich starte Gobby und eröffne eine Sitzung, wobei ich ein Passwort vergeben kann, falls ich den Zugang für andere Personen beschränken will. Nun fungiert mein Rechner als Host, und andere Personen können an der Sitzung teilnehmen.

Ich öffne die PHP-Datei, die ich bearbeiten möchte, und lade (z.B. über E-Mail oder Telefon) Max Muster ein, wobei dieser nur die IP-Adresse meines Rechners und allenfalls das Passwort wissen muss. Max startet ebenfalls Gobby, wählt die Funktion “Sitzung beitreten” und kann dann ebenfalls auf die PHP-Datei zugreifen. Wir können nun gleichzeitig Änderungen vornehmen, wobei über Farbmarkierung jederzeit klar ist, wer was eingegeben hat. Sofern man nicht sowieso per Telefon oder Chat in Verbindung steht, bietet Gobby eine integrierte Chat-Applikation, über die man miteinander diskutieren kann.

Wie gesagt: Das Prinzip ist rasch erklärt, und es ist bestechend. In der Praxis gibt es allerdings noch die eine oder andere Hürde zu meistern. So ist Gobby spürbar eine Linux-Applikation – unter Windows muss man GTK+ installieren, für den Mac muss man auf MacPorts zurückgreifen. In der Anwendung sind insbesondere die Angabe der korrekten IP und die Freischaltung der von Gobby benutzten Ports in der Firewall kritische Punkte. Wenn die Verbindung aber einmal steht, ist die Zusammenarbeit sehr einfach und ausgesprochen effizient.

(via T3N)

It’s All Text: Inhalt eines Formularfelds in einem Texteditor bearbeiten

image

Manchmal wäre es schön, wenn man einen längeren Text nicht im Formularfeld eines Browsers, sondern in einem vertrauten Text-Editor bearbeiten könnte. Dank der Firefox-Extension It’s All Text ist dies problemlos möglich: Sie zaubert unter jedes Formularelement vom Typ Textarea einen Edit-Button, welche den aktuellen Inhalt des Felds an einen beliebigen externen Editor übergibt. Dort kann man den Text dann mit allen Schikanen bearbeiten. Ist man fertig, schliesst man ganz einfach das Editorfenster, und It’s All Text schreibt den Text automatisch in das Formularfeld in Firefox zurück. Besonders wenn man HTML oder Programmcode editieren muss, ist diese Lösung so simpel wie unverzichtbar.

Eine ähnliche Lösung existiert übrigens in Form der Extension Mozex.

TYPO3: Code Completion für den TypoScript-Editor

Der TypoScript-Editor für das TYPO3-Backend scheint eine Code Completion zu erhalten. Auf der entsprechenden Website gibt es zwar fast keine Informationen, dafür eine Video, das ziemlich klar zeigt, worum es geht:

Codecompletion for Typoscript

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

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.

SVG-Vektorgrafiken erstellen mit GLIPS Graffiti Editor

image

SVG (Scalable Vector Graphics) ist ein faszinierendes Grafikformat: Da es auf XML basiert, kann es mit jedem Texteditor bearbeitet werden, und deshalb lässt sich eine SVG-Grafik auch sehr einfach mit einer Skriptsprache wie z.B. PHP manipulieren.

Der einfachste Weg, um eine SVG-Grafik zu erstellen oder zu betrachten führt aber über ein Grafikprogramm. Nebst dem Klassiker Inkscape kann man dafür beispielsweise auch den GLIPS Graffiti Editor nutzen, der sich auf die grundlegenden Funktionen beschränkt und deshalb sehr übersichtlich und leicht zu erlernen ist. Wie viele Java-Programme ist GLIPS ein kleines bisschen träge, dafür läuft es auf allen Betriebssystemen, die Java unterstützen. Als Lizenz kommt die Lesser General Public License (LGPL) zum Einsatz.

TypoScript editieren mit SweeTS

image

Vor ziemlich genau einem Jahr hatte ich mich auf die Suche gemacht nach Tools, welche das Editieren von TypoScript-Code komfortabler gestalten als im TYPO3-Backend. Die Mindestanforderung war damals, dass der gesuchte Editor ein Syntax-Highlighting für TypoScript bieten musste. Damals war ich auch auf SweeTS (eine Sammlung von Konfigurationsdateien für den kostenlosen Editor PSPad) gestossen.

image Nach einem Jahr Praxis kann ich sagen: SweeTS ist für mich persönlich das Tool der Wahl, wenn es darum geht, mehr als nur ein, zwei Zeilen Code zu bearbeiten. Der Umstand, dass die TypoScript-Templates nicht in der TYPO3-Datenbank, sondern im Filesystem (fileadmin) liegen müssen, damit der Editor per FTP darauf zugreifen kann, empfinde ich inzwischen als Vorteil, weil so der gesamte Code an einem einzigen Ort liegt und sehr schnell zugänglich ist.

In der täglichen Arbeit schätze ich insbesondere folgende Funktionen von SweeTS:

Das (konfigurierbare) Syntax-Highlighting. Es ist nicht perfekt, aber nur schon Kommentare und Code visuell gut unterscheiden zu können ist viel wert. Und obwohl das Highlighting gelegentlich überraschende Formatierungen wählt, so ist es bei der Vermeidung von Tippfehlern dennoch eine grosse Hilfe.

image Die Markierung von Klammerpaaren. Nichts ist ärgerlicher als ein Fehler wegen einer vergessenen oder überflüssigen Klammer. SweeTS markiert automatisch das Gegenstück, sobald der Cursor auf einer Klammer steht, so dass man leicht überprüfen kann, ob die Klammersetzung korrekt ist.

image Die Autocomplete-Funktion. Beginnt man eine Wort zu tippen und drückt CTRL+J, so öffnet sich ein Popup mit allen passenden Schlüsselwörtern. Das beschleunigt das Tippen, überbrückt allfällige Gedächtnislücken und reduziert Tippfehler. Das Dropdown kennt auch CSS-Classen, die man schon einmal im Code benutzt hat – selbst definierte Elemente (z.B. temp.*) dagegen tauchen in der Liste nicht auf.

image Das Clip-Konzept. Per Tastenbefehl wird ein Popup mit Code-Snippets, sogenannten Clips, aufgerufen, die dann per Mausklick oder Tastendruck in den Code einkopiert werden können. Ähnlich schnell lassen sich Code-Bestandteile als Clip speichern (sie werden dabei in eine *.DEF-Datei im Verzeichnis Context geschrieben). Bei häufig wiederkehrenden Code-Blöcken reduziert dies die Tipparbeit dramatisch. Für meine Begriffe eher verzichtbar sind die sogenannten Interactive Clips oder Dialogue Macros, welche zunächst in einem Dialogfenster die Parameterwerte abfragen.

image Der Code-Explorer – mit Einschränkungen. Bei einer “richtigen” Entwicklungsumgebung für eine “richtige” Programmiersprache bietet ein Code-Explorer einen raschen, strukturierten Zugriff auf alle Identifikatoren, welche der Programmierer irgendwo in seinem Code definiert hat: Variablen, Konstanten, Funktionen, Klassen und was der Konstrukte einer Programmiersprache mehr sind. Bei SweeTS listet der Code-Explorer primär Elemente des TypoScript-Objektbaums – aber eben nur alphabetisch und nicht etwa strukturiert wie im TypoScript Object Browser des TYPO3-Backends.

Die kontext-sensitive Online-Hilfe. SweeTS bringt auch die offizielle TypoScript-Dokumentation mit und integriert sie in die Hilfe-Funktion von PSPad. Markiert man ein Word im Quellcode und drückt ALT+F1, so kann dieses Wort per Tastendruck in der Dokumentation gesucht werden.

SweeTS liegt seit einigen Tagen in der Version 1.15 vor und ist kompatibel zur neusten PSPad-Version 4.5.3. Ausserdem haben die Entwickler angekündigt, SweeTS auch auf gEdit unter Linux zu portieren.