Einfacher ist es da, einen Online-Editor nach dem WYSIWYG-Prinzip in die Seite einzubauen. Ein solcher Editor bietet vom Look&Feel her einen ähnlich großen Umfang wie eine normale Textverarbeitungssoftware a la Microsoft Word oder OpenOffice.

Auf der Suche nach einem geeigneten Editor, der sich einerseits leicht integrieren lässt und andererseits gut anpassbar und vor allem benutzerfreundlich ist, bin ich auf zwei schöne Vertreter gestoßen.

Zuerst möchte ich TinyMCE nennen. Dieser wurde mir von einem anderen Webdeveloper empfohlen. Nachteilig fand ich hier jedoch die fehlende Unterstützung von einem Datei- und Bilder-Upload, sowie -Management. Diesen Nachteil kann man jedoch gegen den Einkauf von einem bzw. zwei Plugins ausmerzen.

Besser und auch etwas anpassbarer fand ich da den FCKEditor. Hier ist eine Upload-Lösung schon integriert und auch die Toolbar lässt sich leicht personalisieren. Hier werden auch keine Textareas mehr benötigt. Man bindet nur noch eine JavaScript-Klasse in die Seite mit ein. Nachteilig natürlich für jene, die JavaScript deaktiviert haben. Aber da es schließlich nur ein ausgewählter Kreis von Nutzern benötigt, ist dieser Nachteil vertretbar. Sofern dieser Nutzerkreis keine Probleme mit JavaScript hat, versteht sich.

Zwei vielleicht interessante Seiten zu dem Thema habe ich natürlich auch wieder im Angebot.

Zum einen eine Gegenüberstellung mit dem Titel “FCKEditor vs. TinyMCE” aus dem WebTecker-Blog. Hier ist die Schlussfolgerung, dass jeder für sich selbst entscheiden muss, welchen Editor er einsetzen möchte.

Alternativ dazu eine ganze Liste von Online-Editoren mit Angaben zu unterstützen Browsern und ein paar Funktionen. Leider ist das ganze nicht mehr 100%ig aktuell. Die Liste wird bereitgestellt von Genii Software. Nett ist hier auch der direkte Link zu einer Demo einiger vorgestellter Editoren.

DEN ultimativen Online-Editor gibt es leider nicht. Auch ich muss zu dem Schluss kommen, dass jeder Webworker selbst testen und den für ihn am besten geeigneten Editor wählen sollte. Ich für mich bin mit dem FCKEditor sehr zufrieden.

Mit HTML kann man das “Problem” lösen, indem man im pre-Tag einfach width=50 eingibt. Somit wird nach maximal 50 Zeichen ein Zeilenumbruch durchgeführt. Je nach genutztem WordPress-Plugin wird dies jedoch wieder entfernt, wenn man pech hat.

CSS ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut bedient.

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;
}

Alternativ dazu kann man sich natürlich auch einen div-Container drum herum bauen, mit fester Breite und Höhe und dem ganzen einen overflow verpassen. Kann man, muss man aber nicht, weil nicht wirklich elegant. Vorteil ist jedoch, dass es ins Layout passt und trotzdem die Formatierung erhalten bleibt.

Beim durchsehen des Quelltextes stößt man zur Zeit auf folgenden, leicht kuriosen, Eintrag:

<link style="display: none;" rel="stylesheet" href="http  /www.woopra.com/wp-content/themes/woopra/style.css" type="text/css" media="screen">

Der Fokus liegt hier auf dem style="display: none;", der im link-Tag meiner Meinung nach ziemlich überflüssig ist. Nach einem Test mit einer Beispielseite scheint dieser Eintrag jedoch vom Firefox wie auch vom IE6 gekonnt ignoriert zu werden. Ich habe mal über die Web Developer Toolbar für den Firefox das im link-Tag angegebene Stylesheet manuell eingebunden und siehe da, zumindest das Design wird wieder korrekt dargestellt. Allerdings ohne Bilder. Über die im Quelltext angegebenen Source-Links lässt sich jedoch darauf zugreifen und vor allem der IE6 zeigt diese auch ganz normal an.

Ich bastel ja jetzt schon seit einiger Zeit an Websites herum, aber diesen Effekt kann ich mir im Augenblick noch nicht so ganz erklären. Vor allem, da nur Firefox das Design und die Bilder verschmäht.

Update: Nach einigem suchen bin ich jetzt doch noch auf den Übeltäter gestoßen. Das Problem verursacht das Plug-In Adblock Plus. Hat man hier den “ABP Tracking Filter” abonniert erhält man eine Regel namens “.woopra.”. Diese deaktiviert jegliche Anzeige und Ausführung von Scripten, Bildern und Stylesheets, die über eine Website geladen werden. Ausgenommen ist hierbei die direkte Anzeige im Browser über einen URL-Aufruf, weshalb auch das direkte Laden der Bilder bzw. das manuelle Einbinden des Stylesheets funktioniert hat.

Manchmal sollte man schon wissen, was diverse Plug-Ins bzw. Addons so treiben und im Hintergrund anstellen.

Das ganze funktioniert jetzt erstmal nur bei der Vergabe einer festen Breite.

Erstmal benötigt man einen Rahmen, den man später um seinen Inhalt haben möchte. Ich habe diesen mit Photoshop auf die schnelle erstellt.

• PS öffnen, neues Bild erstellen (500x500px) und neue Ebene erstellen.
• Untere Ebene ist weiß, obere ist schwarz.
• Rechtsklick auf ober Ebene (schwarz) -> Fülloptionen…, “Schein nach innen” auswählen, Füllmethode: Normal, Deckkraft: 100%, Farbe: weiß (eben wie die untere Ebene), Größe: 40px, Kontur: Halbrund.

• Taste “K” drücken bzw. Slice-Werkzeug auswählen. Damit lassen sich jetzt einzelne Bereiche im nachhinein zurecht schneiden. Erstmal ein Rechteck in die mitte des Bildes ziehen. Größe und Form ist egal, hauptsache mittig.

• In der Werkzeugleiste klickt man jetzt etwas länger auf das Slice-Werkzeug um sich das Slice-Auswahl-Werkzeug zu holen oder man hält einfach die STRG-Taste gedrückt (die wechselt automatisch um).

• Doppelklick auf das Rechteck mit der Nummer 01 (links oben im Rechteck zu sehen).
• Slice-Typ: Bild, Name: lo (für links oben), X: 0, Y: 0, B: 40 (s.o. Größe des Rahmens), H: 40 (s. Breite), Slice-Hintergrundart: Ohne.
• Jetzt wählt man Slice 02 aus und geht genauso vor. Name: mo (mitte oben), X: 40, Y: 0, B: 10 (reicht erstmal), H: 40.
• Weiter zu Slice 03 – Name: ro, X: 460 (weil 500-40=460), Y: 0, B: 40, H: 40. Jetzt entsteht ein neues, aktives Slice 04. Nummer 03 bleibt grau und ist somit erstmal nicht aktiv.
• Nun zum Slice unterhalb von 01. Name: lm, X: 0, Y: 40, B: 40, H: 10.
• Slice unterhalb von 04 bekommt den Namen: rm, X: 460, Y: 40, B: 40, H: 10.
• Unten links (geht’s weiter mit Name: lu, X: 0, Y: 460, B: 40, H: 40.
• Nebendran wird ein Slice namens mu und den Werten X: 40, Y: 460, B: 10, H: 40 erstellt.
• Das letzte nennt man ru, X: 460, Y: 460, B: 40, H: 40.
• Jetzt dürfte man einige Slices auf dem Bild sehen, mit Glück nur 9, ansonsten eben mehr. Alles kein Problem, hauptsache man hat die 8 wichtigen lo, mo, ro, lm, rm, lu, mu und ru.
• Hat man diese, speichert man das ganze wie folgt: Datei -> Für Web speichern… .
• Mit einem Rechtsklick auf das Bild und “Auto-Slices ausblenden” verschafft man sich noch etwas Übersicht.
• Man wählt jetzt Slice 01 aus, danach mit gedrückter Shift-Taste das Slice daneben und darunter, dann das rechts oben und darunter, das links unten und daneben und das einzelne rechts unten. 8 sollten es jetzt schon sein.
• Ganz rechts wählt man nun das Dateiformat aus. Bei JPEG macht man in diesem Fall nichts verkehrt und schon kann man auf Speichern klicken.
• Am einfachsten ist das Speichern als “HTML und Bilder”. Hierbei werden die ausgewählten Slices mit den vorher eingegebenen Namen im Ordner “Bilder” abgespeichert. Nur diese werden nachher auch benötigt.
• Somit hat man nun 8 jpg-Bilder. Die vier Ecken, sowie 4 Teilstücke aus den Rändern.
• Die Datei “Abstandhalter.gif” wird nicht benötigt und kann gelöscht werden.

Der Einfachheit halber erstellt man jetzt eine html-Datei direkt im Ordner “Bilder”. Der Inhalt sollte einer Standard-HTML-Seite entsprechen und wird erstmal im Body um folgende Zeilen ergänzt:

<body>
<div id="page">
<div id="oben">
<div id="lo"></div>
<div id="mo"></div>
<div id="ro"></div>
</div>
<div id="rm">
<div id="lm">
<div id="text"></div>
</div>
</div>
<div id="footer">
<div id="lu"></div>
<div id="mu"></div>
<div id="ru"></div>
</div>
</div>
</body>

Jetzt braucht man nur noch die passenden CSS-Einträge:

<style type="text/css">
/* erstmal alles auf Anfang */
* {
padding  ;
margin  ;
border  ;
}
p {
color:white;
background-color:black;
}

/* Gesamt-Rahmen */
#page {
width:880px;
}

/* Oberer Rahmen */
#lo {
float:left;
background: url(bilder/lo.jpg) no-repeat black; /* Grafik wird nicht wiederholt */
height:40px;                                    /* Höhe und Breite sind 40px, wie bei PS angegeben */
width:40px;
}
#mo {
float:left;
background: url(bilder/mo.jpg) repeat-x black;  /* Grafik wird nur in x-Achse, also vertikal wiederholt */
height:40px;
width:800px;                                    /* ergibt sich aus 880px-40px-40px (#page-#lo-#ro) */
}
#ro {
float:left;
background: url(bilder/ro.jpg) no-repeat black;
height:40px;
width:40px;
}

/* Mittlerer Rahmen für Content */
#rm {
background: url(bilder/rm.jpg) repeat-y black right top;        /* erst der rechte Rahmen */
}
#lm {
background: url(bilder/lm.jpg) repeat-y transparent left top;   /* dann der linke Rahmen und Rest transparent */
color:white;
width:100%;                                                     /* wichtig, sonst klappt's nicht */
}

#text {
padding: 0 60px;
}

/* Unterer Rahmen */
#lu {
float:left;
background: url(bilder/lu.jpg) no-repeat black;
height:40px;
width:40px;
}
#mu {
float:left;
background: url(bilder/mu.jpg) repeat-x black;
height:40px;
width:800px;
}
#ru {
float:left;
background: url(bilder/ru.jpg) no-repeat black;
height:40px;
width:40px;
}
</style>

Das ganze kann man sich natürlich auch als gepacktes ZIP-Archiv hier herunterladen.

Für dieses Konstrukt kann man fast jede Rahmen-Grafik nutzen, die man findet. Auch lassen sich so z.B. Bilderrahmen erstellen. Dabei sollte man allerdings auf die Transparenz der Grafiken achten. Also nur als GIF oder PNG (Vorsicht: IE) speichern und ohne weißen o.ä. Hintergrund. Ebenfalls sollte man auf die Wiederholbarkeit der Ränder achten. Sprich, die Texturen sollten sauber aneinander gereiht werden können.

Beim durchstöbern vom Smashing Magazine bin ich zufällig über eine Anleitung oder auch Leitfaden gestoßen, der sich mit unterschiedlichen Ansätzen der Kommentierung auseinander setzt. Dementsprechend wird gezeigt, wie man seine CSS-Dateien durch Kommentare sauber aufbereitet, um auch nach Jahren immer noch den Durchblick zu behalten. Auch ist es eine große Hilfe bei Gemeinschafts-Projekten, wenn also mehrere Personen an einer CSS-Datei hantieren. Und generell bietet eine strukturierte Kommentierung einen schnellen Überblick des Inhalts und ein zügigeres Auffinden einzelner Elemente.

Für jeden, der effektiv, schnell und zukunftsorientiert “programmieren” will sollte sich diesen Leitfaden einmal ansehen und auch einige der Tipps und Vorschläge anwenden. Man macht dabei nur sich selbst und anderen damit das Leben und Umgestalten leichter.