Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Konzentriert und strukturiert Texten

Konzentriert und strukturiert Texten

Ralf Graf findet, dass Webworker den zarten Trend in der Textverarbeitung weg von Word und Co. hin zu einfachen Textformaten aufgreifen und die Ablösung der ungeliebten so genannten »WYSIWYG«-Editoren in CMS und Web-Anwendungen fördern sollten.

Jeder Webworker kennt sie, die meisten Webworker hassen sie: So genannte WYSIWYG-Editoren, die in Backends von CMS und Web-Anwendungen dem Anwender das Erstellen von Texten und deren Formatierung in der »gewohnten« Anmutung von Textboliden der Kategorie Word und Co. ermöglichen. Aber sie bescheren dem um »schönen und effizienten« Code besorgten Webworker regelmäßig graue Haare. Zweimal Return gedrückt und ein Bild eingefügt und anschließend gelöscht, dazu einen Absatz dreimal umgestellt – schon schreibt die WYSIWYG-Komponente eine herrliche Code-Suppe mit leeren Absätzen und Listen in die CMS-Datenbank. Manche Webworker schreiben deshalb sogar mit Regex-Akrobatik garnierte Postprozessoren in ihr CMS oder benutzen weitere Komponenten, um den Code anschließend wieder zu bereinigen.

Textverarbeitung im Wandel

Die bei der CMS-Konzeption beim Benutzer vorausgesetzte »gewohnte Arbeitsumgebung« ist im Wandel. In den letzten Monaten gibt es einen Trend zu beobachten, der das seit der Einführung der grafischen Oberfläche bei Personal Computern Ende der 80er Jahre herrschende Paradigma der Textverarbeitung im »WYSIWYG«-Modus in Frage stellt.

Menschen, die schon länger Computer benutzen, stoßen auf das Problem, dass sie Textdokumente aus vergangenen Jahren nicht mehr korrekt öffnen können. Die Programme für die proprietären Formate der Textverarbeitungs- oder DTP-Pakete vergangener PC-Epochen sind nicht mehr vorhanden, die Dokumente nicht mehr lesbar, es hat z.B. niemand mehr ein WordStar für DOS parat. Es setzt sich die Erkenntnis durch, dass die Erstellung von Texten in reinem Text oder mit einfacher Markup-Syntax die Gewähr dafür ist, dass Texte auch in Zukunft noch lesbar und weiter verwendbar sind.

Dazu kommt das »Usability-Problem«. Zu den ablenkenden Verlockungen aus dem Internet auf einem multitaskenden Desktop-System kommt in einer althergebrachten Textverarbeitung die permanente Ablenkung von der eigentlichen Aufgabe: Das Schreiben des Texts. 15 ständig sichtbare Formatierungsleisten mit je 40 Buttons für Formatierungen aller Art locken zum »Spielen« mit dem Format des Texts und stören so die Konzentration auf den Inhalt.

Neue Schreibprogramme: Weniger ist mehr

So schreiben nun nicht mehr nur die Nerds Texte konzentriert in ihren vim oder emacs in der Konsole, sondern auch »Normalos« nutzen gerne die neumodischen, hübsch gestylten minimalistischen Textprogramme mit ihrem Fokus auf das Schreiben. Anwendungen wie WriteRoom , Byword oder IA Writer sind Verkaufserfolge in Apples AppStore. Der Autor konzentriert sich in so einem »stylischen« minimalistischen Schreibprogramm auf die Erstellung des Texts und kümmert sich erst danach um die Ausgabe und Formatierung des Dokuments. Interessant im Kontext dieses kleinen »Paradigmenwechsel der Textverarbeitung« ist das Interview auf Golem mit dem Autor des IA Writers.

Screenshot: Byword mit einem geöffneten Markdown-Dokument

Markup statt WYSIWYG: Markdown, Textile und Co.

Um die Struktur eines Text-Dokuments zu erfassen, verabschieden sich diese Programme von proprietären Binärformaten und verwenden statt dessen RTF oder eine simple Markup-Syntax wie das vom bekannten Blogger John Gruber entwickelte Markdown. Markdown ist, ebenso wie das ähnliche Markup-Format Textile, ausgesprochen populär und als Bibliothek für eine Vielzahl von Programmiersprachen, Web-Frameworks und CMS verfügbar.

Bei der Verwendung von Markdown strukturiert der Autor seinen Text mit einfachen Kürzeln für Überschriften, Absätze, Links usw. Diese beinträchtigen den Lese- und Schreibfluss nicht störend und sorgen dafür, dass der Text auch unverarbeitet gut lesbar bleibt. Ein Beispiel:

  1. # Überschrift h1
  2.  
  3. Ein Absatz mit Text und [einem Link](http://google.de). Das ist schön.
  4.  
  5. Noch ein Absatz. Und darunter Schluss eine Aufzählung:
  6.  
  7. - Eins
  8. - Zwei
  9. - Drei

Ist der Text fertig, wird er als HTML (oder ein anderes Format) formatiert ausgegeben und weiter verwendet oder gedruckt.

Es kann nur im Interessen von uns Webworkern liegen, diesen Trend zu fördern. Das ungestörte und strukturierte Schreiben ist genau das, was der Autor eines Textes in einem CMS für eine Website in Wirklichkeit will. Schriftgrößen und Stil eines Textes auf einer Website sind normalerweise sowieso strikt vorgegeben. Es gibt also keinen Grund für einen WYSIWYG-Editor mit einem gewaltigen Fundus an Formatierungsmöglichkeiten ähnlich Word und Co. Die meisten Formatierungsoptionen muss der Webworker dann sowieso abschalten. Schließlich wurde die edle Webfont für die Website nicht in diversen Meetings mit der Marketing-Abteilung und deren Agenturen mühsam ausgewählt, um dann vom Autor der Inhalte im CMS durch dessen Vorliebe für »Comic Sans in Pink« im WYSIWYG-Editor überschreiben zu werden.

Ergo kann der Webworker sich so ein Element gleich sparen. Statt dessen bekommen die Autoren ein reines Textfeld, unterstützt nur durch eine handvoll Buttons, die als Gedächtnishilfe für Markdown-Formatierungen oder zum Einfügen eines Links oder eines Bildes dienen. Mit einem Werkzeug wie dem jQuery-Markup-Editor markItUp! kann jeder diese Aufgabe benutzerfreundlich und flexibel lösen (wie dieses Beispiel einer Implementation in Markdown zeigt). Manch ein CMS wie z.B. welcompose setzt diese Lösung bereits ein.

Screenshot: MarkItUp-Komponente mit einem Text in Markdown

Unbedingt notwendig ist die Verwendung einer solchen Komponente aber nicht, im Grunde reicht für das strukturierte Schreiben eine ganz »normale« Textarea zur Erfassung des Textes völlig aus. Das Blogsystem/CMS Textpattern macht das schon seit Jahren mit Textile als Markup-Variante.

Fazit: Monokultur aufbrechen!

Dass alle Sekretärinnen demnächst ihre Briefe in Markdown schreiben, ist sicher nicht zu erwarten. Aber dass eine Schreibumgebung für Endanwender im Web immer wie Word aussehen und funktionieren muss, ist auch nicht in Stein gemeißelt. Wer den Markt der »neuen« Schreibprogramme anschaut, sieht einen zarten Trend, denn irgendjemand muss diese ganzen Schreibprogramme schließlich kaufen. Den kann man auch im Web aufgreifen und in Frage stellen, dass »das Normale« in CMS und Web-Anwendung immer ein WYSIWYG-Word-Lookalike sein muss. Schließlich gibt es etwas zu gewinnen: Leichteres Handling der Benutzereingaben und vor allem schöneren HTML-Code, der die Website durch bessere Accessibility und strukturierteres »Suchmaschinenfutter« bereichert.

Kommentare

Peter Jakobs
am 02.12.2011 - 08:45

oder kurz: wir hätten bei TeX bleiben sollen.

Permanenter Link
Gerrit van Aaken

Gerrit van Aaken (Webkraut)
am 02.12.2011 - 09:08

Grundsätzlich alles meine Rede. Das einzig störende ist meines Erachtens aber der Einsatz von Bildern. Man kann die Textstruktur schön ansehen und sich das fertige Layout vorstellen. Doch sich eingefügte Bilder vorzustellen, diese Fantasieleistung bringen die meisten Kunden nicht auf.

Von daher würde ich eine Art Live-Vorschau begrüßen. So ein Zweispalter: Links der Markdown-Text, rechts dabenebn das fertig gerenderte Produkt, ständig aktualisiert, mit Bildern und angedeutetem Styling.

Permanenter Link

Lars Laade
am 02.12.2011 - 09:59

Eine tolle kleine App für Markdown ist Mou:

Permanenter Link

Kai Nehm
am 02.12.2011 - 10:13

Für mich ist aktuell der beste Ansatz der Editor von Confluence.
In dem Editor kann ich Markdown schreiben, die Formatierung wird dann live auf den Text angewendet.

Ist recht schnell und in Kombination mit den klassischen Buttons wohl die eleganteste Lösung Gelegenheits- und Poweruser abzuholen. Was da nicht so ganz einfach klappt, ist i.e. nachträglich aus einer h2 eine h3 zu machen.

Permanenter Link

Marcel Stockhausen
am 02.12.2011 - 11:08

@Kai Markdown in Confluence geht doch aber nur über ein Plugin oder? Falls ja, wie heißt das Plugin?

Permanenter Link

Claude
am 02.12.2011 - 12:12

Mir scheint, dieser Paradigmenwechsel der Textverarbeitung betrifft bisher eine eher kleine Gruppe von Endnutzern - typische Apple-Kundschaft mit Sinn für minimalistischen Style.
Mit der wachsenden Bedeutung des mobilen Internets könnte es allerdings leichter werden, "normalen" Endkunden solche Editoren in CMS-Systemen schmackhaft zu machen, da die Inhalte ohne weitere Berabeitung für die mobile Website verwendet werden können und so doppelter Pflegeaufwand entfällt.

Permanenter Link

Mathies
am 02.12.2011 - 15:19

Ich finde Hervorhebungssprachen auch gut und benutze auf meiner Homepage AsciiDoc, um auch Fußnoten, Hinweisboxen etc. verwenden zu können.

Für einfache, übersichtliche Texte kommt man als geübter Anwender klar. Für anspruchsvolle technische Texte, Dokumentation u.ä. kommt man mit Hervorhebungssprachen wie Markup und Co. leider nicht sehr weit, weil das Verschachteln von Elementen schnell sehr schwierig oder unmöglich wird.

Über die einfachen Hervorhebungen mit Sternchen und Unterstrichen hinaus wird es für den Ottonormalnutzer auch schon schwierig, die Konzepte hinter den Formatierungen zu verstehen und ohne zu sehen, was herauskommt, ist das Editieren recht abstrakt.

Schön wäre auch, wenn es eine Art DocBook für's Web gäbe, das im Gegensatz zum jetzigen Standard etwas mehr Freude beim Editieren macht und damit echtes inhaltliches Markup statt Formatierungen erlaubt.

Permanenter Link

nik
am 02.12.2011 - 15:42

Ich stimme grundsätzlich mit dem Artikel überein. Es gibt allerings noch einige Unzulänglichkeiten, die Textile- und Markdown-Umgebungen nicht leisten:

- Umgang mit Umbrüchen/Absätzen. Gerade in engen Textareas ist schwer auzumachen, was ein Soft-wrap und was ein echter Line-Feed ist. Das Attribut wrap="off" ist nicht einmal spezifiziert, ist aber auch kaum praxistauglich. Infolgedessen findet eine Doppelbelegung der Metapher Zeilenumbruch im Editor statt. Eigentlich müsste man deshalb konsequent auf eine -Unterstützung verzichten, gerade auch in C&P Zeiten (man denke an E-Mail-Formatierungen)
- Umgang mit Einrückungen. Texteinrückungen mit Space sind schwer einzuschätzen, manche Formate haben aber gleich tief eingerückte Zeilen mit Bedeutung belegt (dazu kommt der Punkt Umbrüche)
- Absätze innerhalb von Listenpunkten sind ein echtes Problem. Wenn überhaupt möglich, weicht die Syntax von der normaler Absätze (Leerzeile) ab.
- Viele Formate sind schon wieder überfrachtet und bieten CSS, Klassen, IDs u.ä. an. Gerade Inline-Styles sind hier eigentlich fehl am Platz.

Gerrits Einwand ist recht brauchbar, eine Live-Vorschau kann viele dieser Probleme quasi spielerisch lösen oder zumindest entschärfen.

Permanenter Link

nik
am 02.12.2011 - 15:44

(vor -Unterstützung stand «br»)

Permanenter Link

Paul
am 03.12.2011 - 05:15

[…]

Von daher würde ich eine Art Live-Vorschau begrüßen. So ein Zweispalter: Links der Markdown-Text, rechts dabenebn das fertig gerenderte Produkt, ständig aktualisiert, mit Bildern und angedeutetem Styling.

Das ist schnell realisiert. Habe ich selbst schon gemacht. Stackoverflow bringt sowas beispielsweise ebenfalls schon mit.

Permanenter Link

Paul
am 03.12.2011 - 05:48

Zu meinem Beitrag von oben noch ein Link zur Demonstration. (Es handelt sich bisher nur um eine Testseite. Mein Blog kommt erst in den nächsten Tagen online.)

@nik:

- Umgang mit Umbrüchen/Absätzen. Gerade in engen Textareas ist schwer auzumachen, was ein Soft-wrap und was ein echter Line-Feed ist. Das Attribut wrap="off" ist nicht einmal spezifiziert, ist aber auch kaum praxistauglich. Infolgedessen findet eine Doppelbelegung der Metapher Zeilenumbruch im Editor statt. Eigentlich müsste man deshalb konsequent auf eine <br>-Unterstützung verzichten, gerade auch in C&P Zeiten (man denke an E-Mail-Formatierungen)

Markdown wurde nie für eine Textarea konzipiert. Einfache Umbrücher werden aber ignoriert, genau so wie du es forderst.

- Umgang mit Einrückungen. Texteinrückungen mit Space sind schwer einzuschätzen, manche Formate haben aber gleich tief eingerückte Zeilen mit Bedeutung belegt (dazu kommt der Punkt Umbrüche)

Das Problem besteht wirklich. Als Lösung gibt es bspw. Github Flavored Markdown.

- Absätze innerhalb von Listenpunkten sind ein echtes Problem. Wenn überhaupt möglich, weicht die Syntax von der normaler Absätze (Leerzeile) ab.

Nein:

List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab.

~Markdown-Dokumentation

- Viele Formate sind schon wieder überfrachtet und bieten CSS, Klassen, IDs u.ä. an. Gerade Inline-Styles sind hier eigentlich fehl am Platz.

Bei Markdown ebenfalls nicht vorhanden.

Permanenter Link
Ralf Graf

Ralf Graf (Autor)
am 03.12.2011 - 10:24

@Peter Jakobs: Genau! ;) Nur dass die wenigsten wissenschaftliche Arbeiten verfassen müssen, für simpler strukturierte Texte, die am Ende auch ins Web sollen, ist IMHO einfacheres Markup geeigneter.

@Claude Irgendwer muss ja anfangen, immerhin verkaufen sich die "neuen Textdinger" ja ganz gut. Tablets werden das auch forcieren, die Leute werden sehen wie schön man schreiben kann ohne 47 Formatierungsleisten.

@nik: Das mit den Umbrüchen verstehe ich nicht, "zwei oder mehr Leerzeichen" (MD) bzw. "einmal Return" (Textile) machen einen sanften Zeilenumbruch mit br und "zweimal Return" mit leerer Zeile dazwischen produzieren einen neuen Absatz. Da sehe ich kein Problem für Autoren, das sollte jedem in kurzer Zeit einleuchten.

Eine schöne "Live-Vorschau-Anwendung" für Texten auf dem Mac ist übrigens Marked http://markedapp.com/, der kann man über die Einbindung eines anderen Text-Prozessor-Skripts auch beliebige andere Markup-Sprachen beibringen.

Permanenter Link

Peter
am 05.12.2011 - 09:42

Ich liebe MD :-)

Seit 2004 ist es Bestandteil meiner bwlc und mit PHP Markdown Extra ist das Tool inzwischen ganz schön gewichtig geworden. Was mir etwas fehlt sind einige Features für Barrierefreiheit.

Permanenter Link

Kai Nehm
am 05.12.2011 - 15:30

@Marcel, sorry für die späte Antwort.
Confluence hat mit der Version 4.0 umgestellt und speichert alle Inhalte als xml.
Nachrüsten von 3.x per Plugin ist afaik nicht möglich, Upgrade muss an der Stelle sein.

Permanenter Link

Dorothea Schäfer
am 07.12.2011 - 08:10

Wenn ich mein Kinder beobachte, dann sehe ich große Chancen für die "minimalistischen Textprogramme". Diese sind das Licht am Horizont der im privaten Webgebrauch bb-Code gewohnten Web-Natives, die erste Schritte mit Textverarbeitung machen wollen.

Permanenter Link

André Olejko
am 10.12.2011 - 22:29

Interessant. Vor ziemlich genau 10 Jahren habe ich ein minimalistisches Schreibprogramm programmiert (TW, siehe u.g. Website) - damals noch für DOS und ohne MarkDown, aber wie iA Writer auch bewusst ohne Konfigurationsmöglichkeiten und Mausunterstützung. Die Intention war dieselbe: Jedermann sollte einfach Texte schreiben können und diese mit aussagekräftigen Titeln jenseits der 8+3-Zeichen-Begrenzung von DOS speichern.

Angesichts dessen, dass einige "Kenner und Profis" das Ding als Rückschritt in die Steinzeit und doch etwas zu primitiv eingeschätzt hatten, war das Feedback der Anwendern überraschend positiv - Grundtenor: Endlich mal was ohne Schnickschnack, das auch ich verstehe.

Schön, dass radikale Einfachheit nun doch noch bei einem breiteren Publikum ankommt.

Permanenter Link

Die Kommentare sind geschlossen.