Der richtige Webeditor Technikwürze 14

Herzlich willkommen zum Technikwürze Podcast Nummer vierzehn. Heute ist Montag, der 27. März 2006. Mein Name ist David Maciejewski. Technikwürze ist der Podcast rund um Webstandards. Jede Woche Montag gibt es auditive News aus der Webdesign-Szene, interessante Essays, Hintergrundinformationen und Interviews mit bekannten Machern und Entscheidern.

Wie blöd abhängig wir von Strom sind, das habe ich gerade eben gemerkt, denn wir hatten eben in ganzen Hoferstöcken einen totalen Stromausfall und nichts ging mehr. Deswegen ist dies die zweite Aufnahme vom Technikwürze-Podcast Nummer vierzehn. Heute geht es um Web-Editoren. Welcher ist der richtige? What you see is what you get ist das Stichwort.

Was du siehst, wirst du bekommen und meint nichts anderes, als wenn man mit, Microsoft Word eine Webseite erstellt, mit Microsoft Frontpage oder auch mit Adobe Photoshop und, lässt dann via Generator die HTML-Webseite generieren, also automatisiert bereitstellen. Im Layout-Modus mag das zwar ganz interessant sein und es mag auch sehr bequem sein, wenn man sich die Webseiten daraus generieren lässt.

Nur das, was dabei rauskommt, hat bei Weitem nichts mit Standards, Barrierefreiheit oder was auch immer zu tun. Die Webseiten sind in Tags eingeschlossen, die es nicht gibt. Tabellen gibt es dort en masse, aber nicht für die Darstellung tabellarischer Inhalte, sondern nur für Krumbelcode und irgendwelchen komischen Grafiken, die irgendwie platziert werden sollen. Das heißt, Finger weg von What you see is what you get-Editoren. Die Alternative kann nur sein: Texteditoren.

Und beim Texteditor gibt es natürlich gravierende Unterschiede. Es gibt einige Texteditoren, die mögen die einen und es gibt andere Texteditoren, die mögen die anderen. Doch es sollten alle gewisse Eigenschaften haben, die nützlich sind. Als Erstes fällt mir ein der Texteditor in Reinkultur.

Das wäre zum Beispiel Notepad oder Textedit, wo ihr ganz normal einfach in auf 'm weißen Blatt Papier sozusagen from the scratch eure Webseite erstellt und ganz einfach mit den ganz normalen Textwerkzeugen, dort was programmiert beziehungsweise auszeichnet. Das Ganze hat eben den Vorteil, dass ihr euch auf den Quelltext konzentriert. Der Nachteil ist, ihr habt keine wirkliche Übersicht über euren Quelltext.

Es sei denn, ihr habt ein sehr gutes Auge, ihr habt keine Hilfe und, der Komfort ist völlig dahin. Die Alternative von reinen Texteditoren, ist daher ein sehr komfortabler Editor und da gibt es eine ganze Menge. Und die Eigenschaften dieser, Elemente, die könnten wie folgt aussehen. Ziemlich wichtig ist das eingestellte Encoding, die Zeichenkodierung der Webseite, wie ihr sie erstellt.

Die Zeichenkodierung meint folgendes: Wenn ihr euch eine Webseite anschaut, dann ist meist eine Standardzeichenkonfiguration eingestellt und das wird in den meisten Fällen ISO 8859-1 sein. In diesem Zeichensatz sind alle Buchstaben enthalten und auch eben die Umlaute hier in Deutschland, die dazu dienen soll, damit die Webseite anhand dieses Pools von Buchstaben die Webseite darstellen kann.

Das heißt, eine Webseite, die ihr auf ISO 8859-1 kodiert habt, die wird im Browser 88, 59-1 auch entsprechend angezeigt. Mit diesem Zeichensatz hättet ihr zum Beispiel Probleme in internationalen Ländern. Das heißt zum Beispiel Amerika oder das heißt zum Beispiel auch England. Da die keine Umlaute in ihren Zeichensätzen haben, können sie auch die entsprechende Webseite nicht anzeigen.

Gute Texteditoren können allerdings auch dies beheben und die Umlaute konvertieren, sodass sie auch in der Ansprache angezeigt werden können. Nur das ist nicht wirklich mega professionell. Mega professionell wäre in meinem Sinne ein wirkliches Encoding. Es gibt zum Beispiel den internationalen Standard Unicode, namens UTF-8. Mit dem UTF-8-Standard sind mehr Zeichensätze, internationale Zeichensätze enthalten als zum Beispiel bei uns in der ISO 8859-1.

Das bedeutet, in der UTF-8 sind neben ein klein wenig chinesischen Schriftzeichen zum Beispiel auch die Umlaute drin. Den UTF-8-Standard, der ist international eigentlich vorhanden. Das heißt, wenn ihr eine Webseite entsprechend richtig kodiert in UTF-8, dann, wird der Inhalt und werden die Umlaute auch in Amerika oder auch eben in England oder anderen Ländern richtig dargestellt.

Eigentlich sollte der Browser auch dies automatisch umstellen, sofern ihr eben den Webserver so konfiguriert habt, dass der diese Webseiten eben auch als UTF-8 ausliefert. Also UTF-8 ist eben das Stichwort beim Encoding. Meint, ihr könnt auch die Umlaute in Reintext, in Klartext in euren Quelltext schreiben, ohne dass dieser umgewandelt werden muss oder ohne dass es Probleme geben wird, diesen darzustellen.

Das Zweite, was euer Editor haben sollte, ist die Definition von Zeilenenden, denn der unterscheidet sich. Jede Zeile im Quelltext endet irgendwann und an dieser Stelle kommt bei Windows zum Beispiel Slash r Slash n und beim Unix-Pendant Linux ist es zum Beispiel Slash m. Slash. Fehler. Okay. Zeilenendenkodierung. Also es kann Probleme geben, wenn ihr auf Windows zum Beispiel kodiert und zeigt das auf 'n Unix-Rechner an, dann kann es eben Probleme bei den Zeilenenden geben.

Sucht euch also einen Webeditor, der eben diese Definition hat. Das bedeutet, wenn ihr zum Beispiel auf einem Unix-Server oder Linux eure Webseite später publiziert, das ist in den meisten Fällen eben der Fall, dann stellt dieses auf Unix, sodass die Zeilenenden richtig dargestellt werden. Das, was natürlich auch ganz wichtig ist bei eurem Editor, ist die Codever, vervollständigung, die Tag Completion für Tags, Attribute und sogar Attributwerte. Das Ganze hat mit Komfort zu tun.

Ihr könnt zwar in 'nem ganz normalen Texteditor euren Quelltext schreiben, nur ihr musst so Profi genug sein, damit ihr sämtliche Tags auswendig kennt. Es ist möglich, ich mache das, aus dem Kopf heraus kann ich das auswendig tun. Nur grade für Anfänger empfehle ich euch einen Editor, der euch Vorschläge macht.

Wenn ihr zum Beispiel, einen Body Tag schreibt oder ihr schreibt einen Div oder ihr schreibt einen Paragrafen oder was auch immer ihr macht oder ihr erstellt irgendwas in CSS, dann könnt ihr noch nicht als Anfänger sämtliche Befehle und sämtliche Tags und Attribute auswendig können.

Tag Completion heißt, wenn ihr an, Tag beginnt, zum Beispiel 'n Div Container, setzt ein Leerzeichen, dann kommt in so 'nem Alt-Text, Alt-Attribut oder in so 'nem kleinen Fenster eben ein Hinweis, welche Elemente ihr in diesem Container oder was auch immer ihr da programmiert, verwenden könnt. Bei einer Tabelle wäre das zum Beispiel das Attribut, Summary, wo ihr quasi einen, Zusammenschluss, eine Zusammenfassung von den Inhalten in dieser Tabelle gibt.

Dies ist sehr, sehr wichtig eigentlich und auch zur Kontrolle, recht gut geeignet in eurem Editor für die Erstellung von Webseiten. Tag Completion, Codever, vervollständigung, sollte es natürlich in verschiedenen Sprachen geben. Und hier unterscheiden sich die verschiedenen Editoren gravierend. Also einige Editoren verfügen zum Beispiel nur über den Sprachraum HTML401, andere wiederum um den neuesten XHTML11.

Also ihr solltet schon darauf achten, dass der Editor entsprechend auf den aktuellen Stand ist. Wenn ihr CSS, Style Sheets erstellt, dann sollte dieser Editor nämlich auch Tag Completion oder Codevervollständigung ebenfalls für CSS anbieten. Heißt, genau das Gleiche wie in HTML. Wenn ihr irgendwelche Attribute erstellt, dann sollte er euch den Vorschlag machen, welche innerhalb von diesem Element eigentlich möglich sind.

Wenn ihr darüber hinaus noch richtig programmiert, und zwar in der Sprache PHP oder auch in Java Server Page, dann sollte ebenfalls, für diese Sprachen eine Code Completion zur Verfügung stehen. Das grenzt die Wahl des Editors richtig ein.

Also wenn ihr mit PHP programmiert, dann fällt mir spontan eigentlich nur ein Tool ein und das ist das Zend Studio von Zend, mit dem ich selbst programmiere, was eben auf Basis von PHP5 mir Code Completion bietet für diese Sprache wie XHTML, Java Server, Page für SQL Strings und für CSS. Wenn ihr das Ganze nicht braucht, PHP, MySQL und so weiter, dann könnt ihr auch andere Editoren verwenden, wie zum Beispiel Macromedia Dreamweaver. Die bieten eben Tag Completion auch für XHTML und CSS an.

CSS ist auch das Stichwort. Ich hatte damals meine Webseiten entwickelt, als ich noch nicht Zend hatte, mit einem CSS-Editor und das war Topstyle von Bradbury. Ein sehr, sehr guter Editor, der inzwischen ebenfalls mutiert ist zu einem HTML-Editor, auch mit Tag Completion, soweit ich weiß, eben für XHTML. Ihr müsst selber sehen, ob der für euch geeignet ist. Schaut euch den am besten mal an. Dreamweaver, und Adobe GoLive sind auch Vertreter der Riege von What you see is what you get Editoren.

Da fällt mir aber spontan eben ein, dass ihr diese nur gebrauchen könnt. Oder anders:, diese Webseiten solltet ihr am besten nur einsetzen, wenn ihr wirklich schon Profi genug seid, um sauberen Quelltext herzustellen. Denn sobald ihr euch 'n bisschen auf diese Programme verlässt, ich hab es letztens ausprobiert mit Dreamweaver, und ihr schiebt euch eure Webseite zusammen, dann wird selbst bei Dreamweaver unsauberer Code rauskommen.

Das heißt, wenn ihr euch darauf verlasst, müsst ihr später definitiv noch mal in den Quelltext gehen und was ändern. Und da sage ich immer, es macht gleich Sinn, richtig gleich von Hand zu programmieren oder eben herauszuzeichnen, anstatt sich eben auf die What you see is what you get Funktionen zu konzentrieren. Das nächste Stichwort, was auf meiner Liste steht, ist die Vorlagenbibliothek von den Editoren.

Heißt, wenn ihr irgendwas erstellt, zum Beispiel ein Formular in HTML, dann müsst ihr den Form Tag anfangen, ihn irgendwann schließen und ihr habt euch vielleicht in gewisser Weise irgendwelche Vorlagen im Kopf zusammengebaut, wie ein Formular auszusehen hat. Da sind Paragrafen zum Beispiel drin, da sind Label Tags drin und was auch immer in einer bestimmte Reihenfolge.

Damit ihr das nicht jedes Mal von neu tippen müsst, bieten gute Webeditoren auch Vorlagen an, die ihr zum Beispiel auch selbst editieren könnt. Eine Vorlage könnte sein: Erstelle mir ein fertiges Formular. Ihr macht euch quasi ein Template, eine Vorlage, holt die per Drag and Drop auf eure Ebene und habt dann quasi eine gute Basis, mit der ihr arbeiten könnt.

Richtig professionelle Editoren bieten euch des Weiteren eben auch an, die Quelltextverwaltung oder die Verwaltung von Repositories über CSV und Subversion. Das kommt natürlich nur bei PHP, Objekten in Verbindung. Also wenn ihr mit der Versionierung arbeitet, dann sollten diese Editoren auch eben direkt, etwas in dieser Hinsicht bieten. Kommen wir wieder zurück zur Basis. In der Basis ist auch ganz wichtig, wenn ihr den Überblick über euren Quelltext behaltet.

Und, die Vergangenheit hat es gezeigt oder auch v-verse Editoren. Am besten geht dies, wenn bestimmte Tags, sagen wir direkt mal ein HTML oder CSS, farblich hervorgehoben sind. So ist in CSS, ein Attribut zum Beispiel grau und, die Selektoren in Grün zum Beispiel. Das könnte ebenfalls dafür fü, dazu führen, dass ihr eben genau unterscheiden könnt, was ist im Falle was.

In Sachen PHP könnte die Farbhervorhebung sein, dass sämtliche Funktionen die eine Farbe haben und ebenfalls Attribute oder was auch immer oder Text, eine andere, sodass ihr einen besseren Überblick behaltet. Wenn ihr euch eine ganz, ganz lange Webseite vorstellt, die einen elendig langen Quelltext habt und guckt den in Reintext an und in Schwarz, dann werdet ihr garantiert den Überblick verlieren. Werden diese Tags eben in Farben umgewandelt, sollte dies kein Problem darstellen.

Also gute Editoren sollten ebenfalls auch in der Lage sein, die entsprechenden Sprachen automatisch zu erkennen und automatisch in der jeweiligen Farbe zu färben. Das Ganze zusammenfassend bleibt festzuhalten: Finger weg von What-you-see-is-what-you-get-Editoren. Es sei denn, in diesem Pendant Dreamweaver und Adobe GoLive könnt ihr den Quelltext eben auch selbst schreiben. Übrigens, die Engine in Dreamweaver von Macromedia, heute Adobe, ist das Programm Macromedia Homesite.

Das ist damals erfunden worden von der Firma Allaire. Die wurde aufgekauft von Macromedia und die hatten 'n ganz geiles Produkt eben damals draußen gehabt, das war Homesite. Ist heute noch zu kaufen, wird aber kaum noch promotet. Dies ist zum Beispiel ein Editor, womit ihr ganz sauber HTML mit Tag Completion, mit Farbhervorhebung benutzen könnt. Neunzig Prozent davon sind in Dreamweaver eingebaut, das heißt eigentlich schon eine gute Basis.

Adobe GoLive, mit dem Programm habe ich mich noch nicht großartig beschäftigt, sollte vom Umfang her aber fast genauso gut sein wie Dreamweaver. Nach dem Zusammenschluss von Adobe und Macromedia bleibt mal abzuwarten, welches dieser Programme weiterhin bestehen wird. Ich tippe auf Dreamweaver. Microsoft Frontpage, in diesem Falle kann ich euch überhaupt nicht empfehlen, gehört zur Riege von Webeditoren.

Von den Fingern, die Finger solltet ihr auch ebenfalls lassen von, Word oder anderen, Textschreibprogrammen, die in der Lage sind, Webseiten zu erstellen. Auch das sehr professionelle Programm InDesign von Adobe, was dazu gut ist, um richtig Printprodukte in professionellster Qualität zu bieten. Die können auch Webseiten erstellen, aber auch das, was da rauskommt, ist eigentlich Müll. Es gibt noch 'ne ganze Menge weitere Editoren, dessen Namen mir jetzt garantiert nicht einfallen.

Am besten, ihr schaut wirklich, welche Attribute hat welcher diese Editoren von denen, den ich euch heute erzählt habe. Das wäre das Encoding, die Zeichenkodierung, die Definition von Zeilenenden, die Codevervollständigung, Tag Completion, die Farbhervorhebung für CSS, XHTML, das geläufigste oder auch wenn ihr programmiert PHP und SQL, die Vorlagen und die Quelltextverwaltung für PHP-Projekte. Im Grunde genommen steht auf jeder Webseite, was jeder Editor bietet.

Ladet euch 'ne Testversion runter, schaut es euch an und wenn es euch gefällt, kauft es, installiert es. Ihr macht da garantiert nix falsch. Feedback. Sicherlich habt ihr auch ein paar Hinweise für mich, welche Editoren ich nennen kann, welche ich vergessen habe und welche unbedingt hervorzuheben sind. Wenn ihr dererlei Hinweise für mich habt, schreibt mir bitte eine E-Mail an echo@Technikwürze.de oder hinterlasst eine im Kommentarbereich auf der Webseite Technikwürze.de eben euren Kommentar.

Das kann im Übrigen auch, auditiv geschehen. Ihr, da gibt es eine Funktion, wo ihr 'n MP3 eben hochladen könnt und, solltet ihr mir MP3-Files zuschicken, auch gerne an echo@Technikwürze.de, dann werde ich diese Kommentare zu dieser Sendung gerne bringen und veröffentlichen. Die Mucke. Das war Technikwürze vierzehn, euer Podcast rund um Webstandards. Für euch gibt's noch 'n bisschen Musik von Brett Phillips mit dem Song "Concretes" aus dem Podsave Music Network.

Mein Name ist David Matceski und wir hören uns wieder nächste Woche Montag mit neuen Themen rund Webstandards und um die Bereitstellung von barrierefreien Webseiten. Bis dahin.

Der Podcast Club vereint.