http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Hilfsmittel

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Editoren

XHTML- und CSS-Dokumente sind keine ausführbaren oder Binärdateien, sondern einfache Textdateien, das heißt, sie bestehen aus für den Menschen lesbarem Text und lassen sich mit jedem einfachen textorientierten Editor (auch: ASCII-Editor) öffnen und editieren. Jedoch greifen viele Webentwickler auf umfangreiche und zum Teil verhältnismäßig teure WYSIWYG-Programmpakete namhafter Hersteller zurück, die die Erstellung und Bearbeitung von Dokumenten unabhängig von deren Quelltext erlauben. Dieser Abschnitt stellt Vor- und Nachteile beider Editorarten gegenüber.

WYSIWYG-Programme

WYSIWYG ist das Akronym für das Prinzip What You See Is What You Get (Was du siehst, ist das, was du erhältst). Bei echtem WYSIWYG wird ein Dokument während der Bearbeitung am Bildschirm exakt so angezeigt, wie es bei der Ausgabe über ein anderes Gerät aussieht, beispielsweise einem Drucker. Übertragen auf die Webentwicklung ist ein WYSIWYG-Programm ein Werkzeug, dessen Darstellung während der Bearbeitung der XHTML-Datei deren späterer Anzeige im Browser exakt entspricht.

Microsofts Word gehört zu den bekanntesten WYSIWYG-Programmen. Der Benutzer sieht anfangs eine leere weiße Seite vor sich und beginnt, sie zu editieren. Er kann Texte formatieren, Bilder einfügen und Tabellen anlegen. Die gewünschten Inhalte lassen sich über Menübefehle und Dialoge einfügen. Die Ergebnisse seiner Aktionen kann er direkt auf dem Bildschirm überprüfen.

Nach demselben Prinzip soll ein WYSIWYG-Programmpaket zur Erstellung von Webseiten funktionieren. Das Programm setzt hierbei die vom Benutzer ausgeführten Aktionen im Hintergrund in Quelltext um. Wenn er es nicht möchte, braucht der Benutzer den Raum der grafischen Darstellung also gar nicht zu verlassen. Viele WYSIWYG-Editoren bieten auch die Möglichkeit, zwischen Layout- und Quelltextansicht umzuschalten, sodass Sie die Entwicklung der Seite auch direkt im Quelltext verfolgen und dort Korrekturen und Änderungen vornehmen können.


Abb. 3.1: Der WYSIWYG-Editor KompoZer

Vor- und Nachteile

Die Vorteile eines WYSIWYG-Programms liegen in der Natur der Sache:

  • Sie sind sehr schnell in der Lage, eine Seite fertigzustellen oder ein bestehendes Grundgerüst mit Inhalten zu füllen.
  • Das Transkribieren von der abstrakten Quelltextebene hin zu der Seitendarstellung im Browser fällt weg.
  • WYSIWYG-Programme verlangen keine oder kaum XHTML-Kenntnisse zur Fertigstellung einer Seite und verfügen zusätzlich oft über Layoutvorlagen, die Ihnen die Konzeption eines Screendesigns weitgehend abnehmen.
  • Viele WYSIWYG-Programme verfügen über ein ausgereiftes Projektmanagement, das Ihnen die konzeptionelle Arbeit zum Teil abnimmt.

WYSIWYG-Programmpakete scheinen ein guter Einstieg in die Webentwicklung zu sein, da Sie mit minimalen XHTML- und CSS-Kenntnissen rasche Ergebnisse erhalten und schnell ein Gefühl dafür entwickeln, welche Möglichkeiten klassisches Webauthoring bietet und welche nicht. Leider führt diese Arbeitserleichterung insgesamt zu einer Simplifizierung des Erstellens von Webseiten. Dadurch dass das Programm zum einen die Gedankenarbeit sowohl beim Projektmanagement als auch beim Erstellen des Seitenkonzepts und zum anderen auch die Erstellung des Quelltexts abnimmt, bekommt der Anwender schnell das Gefühl, die Erstellung von Webseiten sei eine sehr einfache Sache. Er hat damit nur dann recht, wenn er sich mit den Ergebnissen des WYSIWYG-Programms zufriedengibt. Dies sollten Sie jedoch nicht, denn leider haben derartige Programme auch sehr viele Nachteile:

  • WYSIWYG-Programme erzeugen in einigen Fällen unerklärlicherweise viel überflüssigen Code, was längere Ladezeiten im Browser und eine große Unübersichtlichkeit des Quelltexts bedeutet.
  • Oftmals entspricht der erzeugte Quelltext nicht den W3C-Empfehlungen; Sie erzeugen folglich ungültige Dokumente. Dies kann dazu führen, dass kein Browser die Webseite tatsächlich so darstellt, wie es die Vorschau Ihres WYSIWYG-Programmpakets, auf dem Sie sie entworfen haben, zeigt. Dies bedeutet unter Umständen kleinen Abweichungen, aber auch das völlige Fehlen wichtiger Seiteninhalte (siehe auch Kapitel 3.2 »Validatoren«).
  • Ein nicht unwesentlicher Nachteil ist die häufig mangelhafte Trennung von Markup und Layout und das inkonsequente Einsetzen von CSS, was Sie als Webautor per Hand wesentlich effizienter gestalten können.

WYSIWYG-Programmpakete werden zu Unrecht so genannt. Das WYSIWYG-Prinzip stimmt immer nur für den Autor einer Webseite selbst und für einen gewissen Nutzerkreis, der über die gleichen Voraussetzungen und die gleiche Umgebung wie der Autor verfügt. Im World Wide Web müssen Sie davon ausgehen, dass die Besucher die erstellten Seiten mit anderen Browsern auf anderen Betriebssystemen über andere Auflösungen betrachten. Dadurch können die Seiten bei den Besuchern anders aussehen als beim Autor. WYSIWYG-Programme sind somit vielmehr

  • WYSIWYMG- (What You See Is What You Might Get, Was du siehst, ist das, was du vielleicht erhältst),
  • WYSIMOLWYG- (What You See Is More Or Less What You Get, Was du siehst, ist mehr oder weniger das, was du erhältst),
  • WYTYSIWYTYG- (What You Think You See Is What You Think You Get, Was du zu sehen glaubst, ist das, was du zu erhalten glaubst) oder
  • WYSIWYM-Programme (What You See Is What You Mean, Was du siehst, ist, was du meinst) – vielleicht die treffendste Bezeichnung.

Aus diesem Grund verwendet kaum ein Hersteller eines Programms, das man in die Reihe der WYSIWYG-Programme einordnet, diesen Begriff selbst; da scheinen sich eher Bezeichnungen durchzusetzen wie »Werkzeug für Web-Authoring« (Macromedia Dreamweaver) oder »Tool für die Anwendungsentwicklung und die Webseitenerstellung« (Microsoft FrontPage).

Zum Seitenanfang

Texteditoren

Ein Texteditor ist ein Programm zum Bearbeiten von Texten, beispielsweise von XHTML-Dokumenten auf Quelltextebene. Der Editor lädt das zu bearbeitende Textdokument und zeigt seinen Inhalt auf dem Bildschirm an. Durch diverse Aktionen können die Daten dann bearbeitet werden, beispielsweise durch Einfügen, Löschen oder Kopieren.

Vor- und Nachteile

Die Nachteile von Texteditoren sind – gerade für Anfänger – offensichtlich:

  • Sie benötigen XHTML- und CSS-Kenntnisse, um eine Seite zu erstellen.
  • Das Tippen des Quelltexts dauert länger als das Zusammenklicken eines Dokuments in einem WYSIWYG-Programmpaket, selbst wenn Sie ausgiebig mit Includes (Mehrfachverwendung von in der Regel zentral abgelegtem Quelltext) oder Kopieren und Einfügen arbeiten.
  • Texteditoren verfügen in den meisten Fällen über kein umfangreiches Projekt- und Dokumentenmanagement.
  • Sie sind auf sich allein gestellt, wenn es um die Erarbeitung einer Informationsarchitektur geht.
  • Das Umsetzen eines Entwurfskonzepts in einen gut strukturierten XHTML-Quelltext erfordert große Abstraktionsfähigkeiten.

Die meisten Vorteile von Texteditoren offenbaren sich erst nach kurzer Eingewöhnungszeit:

  • Sie haben direkte Kontrolle über die Entstehung des Seitenquelltexts.
  • Sie können die Auswirkungen jeder noch so geringen Änderung am Quelltext sofort im Browser überprüfen.
  • Sie beschränken sich beim Schreiben Ihrer Seite auf das Wesentliche und schreiben dadurch keinen überflüssigen Code.
  • Sie ordnen Ihren Quelltext für Sie verständlich und logisch.
  • Sie haben enorme Lernfortschritte mit jeder Seite, die Sie schreiben. Sie gewinnen immer mehr Verständnis für die Zusammenhänge und sehen die Textauszeichnung im Quelltext getrennt von der Darstellung im Browser. Dadurch entwickeln Sie ein besseres Verständnis für stilistisch gutes Webauthoring.
  • Ein Wechsel des Editors ist leichter als bei WYSIWYG-Programmen, da der eigene Quellcode mit einem anderen Editor nach dem gleichen Prinzip weiterverarbeitet werden kann.
  • Es liegt in Ihrer Hand, nicht in der Hand eines Programms, ob Sie beim Erstellen der Seite Fehler machen oder nicht.

Erfahrene Webautoren bevorzugen in der Regel reine Texteditoren. Wie bereits erwähnt, reichen einfachste Texteditoren wie Notepad unter Windows vollkommen aus. Björn Höhrmann schrieb vor einigen Jahren überspitzt, aber nicht ganz zu Unrecht:

»Notepad ist kein HTML-Editor, Notepad ist das Schweizer Armeemesser mit integriertem Whirlpool für jeden, der nur ein bisschen auf sich hält und effektiv arbeiten will.«


Abb. 3.2: Minimalausstattung: Notepad

Dennoch sollten Sie bei der Wahl Ihres Editors auf einige nützliche Funktionen achten, die Ihnen die Arbeit an Ihrer Website ein wenig erleichtern:

  • Syntaxhervorhebung (syntax highlighting) von mindestens XHTML und CSS. Dadurch werden einzelne syntaktische Bestandteile eines Dokuments und eigentliche Inhalte unterschiedlich eingefärbt, wodurch die Orientierung im Quelltext erleichtert wird und Fehler schneller sichtbar werden. Syntaxhervorhebung für weitere relevante Sprachen wie JavaScript, PHP, Perl und andere ist wünschenswert und in den meisten Editoren auch vorhanden oder integrierbar.
  • Dateiübergreifendes Suchen und Ersetzen. Müssen Änderungen in einem Dokument oder in mehreren vorgenommen werden, führt eine einfache Suchen-und-Ersetzen-Funktion zu schnellen Ergebnissen. Die Verwendung von regulären Ausdrücken (regular expressions) wird der Profi ebenfalls zu schätzen wissen.
  • UTF-8-Fähigkeit und ganz allgemein die Unterstützung und Konvertierung von möglichst vielen Kodierungen und Zeichensätzen, wie den Familien ISO-8859-n, Windows 125 oder MacRoman, um alle nötigen Zeichen eingeben, anzeigen und abspeichern zu können (siehe Kapitel 2.10 »Zeichenkodierung«).
  • Zusätzlich eingebaute oder nachrüstbare Werkzeuge wie Validatoren, Rechtschreibprüfung, Quelltextvervollständigung, Makrofähigkeit, Verwendung von Textbausteinen, automatische Einrückung von Quelltextzeilen und Includes können die Arbeit ebenso vereinfachen wie benutzerdefinierte Werkzeugleisten mit häufig verwendeten Kommandos oder eigene Tastenkombinationen.


Abb. 3.3: Kombinierte Quelltext- und WYSIWYG-Ansicht in Macromedia Dreamweaver 8 (Screenshot von Andreas Borutta)

An dieser Stelle soll nicht verschwiegen werden, dass die Welt der Editoren nicht nur schwarz-weiß ist. Die meisten WYSIWYM-Programme ermöglichen beide Arbeitsformen, und es gibt Entwickler, die eine zweigleisige Arbeitsweise als die effektivste empfinden. Die WYSIWYM-Oberfläche dient dabei nur dem bequemen Editieren und Auszeichnen mit Standardelementen, während der Quelltext jederzeit parallel sichtbar ist und die Gestaltung vollständig über CSS vorgenommen wird – häufig assistiert durch das jeweilige Programm. Abbildung 3.3 zeigt ein Beispiel für diese Arbeitsweise.

Zum Seitenanfang

Fazit

Je nach verwendetem Betriebssystem, Geschmack und der erforderlichen Einarbeitungszeit mag die Wahl auf den einen oder anderen Editor fallen. Manche bevorzugen universelle und extrem mächtige Editoren wie vim oder UltraEdit, deren Bedienung allerdings längere Zeit erlernt werden will, die dann aber keine Wünsche offen lassen und zum Teil auf zahlreichen Betriebssystemen verfügbar sind. Andere bevorzugen einfach zu bedienende Editoren wie Notepad++ oder BBEdit. Auf Websprachen spezialisierte Editoren sind Phase 5, Homesite und Bluefish. Programmierer werden XHTML- und CSS-Dokumente mit dem Quelltexteditor ihrer Software-Entwicklungsumgebung bearbeiten, beispielsweise Eclipse. Tabelle 3.1 und Tabelle 3.2 listen einige empfehlenswerte Editoren auf. Ausführliche Auflistungen finden Sie darüber hinaus bei Dr. Web: WYSIWYG-Programme und Texteditoren.

Tabelle 3.1: Empfehlenswerte Texteditoren
Editor OS Kostenlos? URL
Arachnophilia Win ja http://www.arachnoid.com/arachnophilia/
BBEdit Mac nein http://www.barebones.com/products/bbedit/
BlueFish Unix ja http://bluefish.openoffice.nl/
Eclipse Win/Mac/Unix ja http://www.eclipse.org/
HomeSite Win nein http://www.adobe.com/products/homesite/
Notepad++ Win ja http://notepad-plus.sourceforge.net/de/site.htm
Notepad2 Win ja http://www.flos-freeware.ch/notepad2.html
PageSpinner Mac nein http://www.optima-system.com/pagespinner/
Phase 5 Win eingeschränkt http://www.phase5.info/
UltraEdit Win nein http://www.ultraedit.com/
vim Win/Mac/Unix ja http://www.vim.org/
Tabelle 3.2: Empfehlenswerte WYSIWYM-Editoren
Editor OS Kostenlos? URL
Dreamweaver Win/Mac nein http://www.adobe.com/products/dreamweaver/
Namo WebEditor Win nein http://www.namo.com/products/webeditor.php
NetObjects Fusion Win nein http://www.netobjects.de/
KompoZer Win/Mac/Unix/OS2 ja http://www.kompozer.net/

Es gibt Hunderte guter Editoren für die unterschiedlichsten Ansprüche. Schauen Sie sich in Ruhe einige an und probieren Sie sie längere Zeit aus. Ich selbst arbeite seit mehreren Jahren mit dem Texteditor UltraEdit. Auf diesen oder einen anderen Texteditor sollten Sie vor allem dann zurückgreifen, wenn Sie diese Einführung durcharbeiten.