Bissinger's Blog

Sobald man damit anfängt, etwas größere und umfangreichere Website-Projekte anzunehmen, kommt es immer häufiger vor, dass man dem Nutzer bzw. Auftraggeber selbst mehr Freiheiten in Sachen Content geben sollte. D.h., dass mittlerweile so ziemlich jeder “Chef” meist kleinere, aber auch größere Änderungen innerhalb seiner Homepage selbst vornehmen möchte. Hat man beim erstellen des Projekts auf ein CMS wie Typo3 oder Joomla gesetzt, ist diese “Freiheit” schon mit inbegriffen. Sollte man sich jedoch dazu entschlossen haben, die Seiten im alleingang zu coden, stehen einem erstmal nur die Standard-HTML-Möglichkeiten in Form von Textareas zur Verfügung. Nicht gerade Benutzerfreundlich, wenn man seinem Kunden auch gleich noch eine Liste mit HTML-Tags inkl. Erklärung und einer mehr oder weniger kleinen Einweisung begegnen muss.

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.

Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren.

In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der Nutzung von Microsoft’s AlphaImageLoader-Filter, der durch DirectX bereitgestellt wird. Zu beachten ist, dass man den Code nur auf das background-Element im CSS beziehen kann. img-Tags werden davon nicht angesprochen. Per Conditional Comment wird der entsprechende CSS-Code speziell dem IE6 zugewiesen.

Wichtig bei der Filter-Angabe ist, dass man keine Leerzeichen verwendet. In einigen Anleitungen sind diese leider vorhanden und das Copy&Paste funktioniert dann natürlich nicht. Auch die Pfadangabe zu den Bildern unterscheidet sich zwischen dem Filter und dem background-Element im CSS.

<style type="text/css">
div#logo {
background-image: url(../images/logo.png);
}
</style>
<!--[if lte IE 6]>
<style type="text/css"><!
div#logo {
filter:progid  XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');
background: none;
}
</style>
<!--[endif]-->

Der Filter bietet unterschiedliche Möglichkeiten, das Bild zu skalieren. Über die Werte crop, image bzw. scale, die dem Element sizingMethod zugewiesen werden können, kann man das Bild auf folgende Weise skalieren:

• crop – Container und Bild behalten die angegebene Originalgröße
• image – Container wird auf die Bildgröße skaliert und enthaltener Text wird abgeschnitten (entspricht overflow:hidden) (Default-Wert)
• scale – Bild wird auf die Containergröße skaliert

Update: Auch img-Tags können per Inline-Styles transparent gemacht werden. Hierbei wird dann das src-Element überschrieben.

<img src="../images/logo.png" style="width: 200px; height: 80px; filter:progid  XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');" />

Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal WebmasterPro.de und .devSOURCE.

Melde mich nach langem warten mal wieder mit einem neuen Artikel. Durch die doch recht groß gefeierte Veröffentlichung von Opera 9.5 konnte ich mich einem kleinen Test natürlich nicht verschließen.

Generell macht der Browser eine ziemlich gute Figur. Gibt ja viele Seiten, die darüber schwärmen. Allerdings habe ich auch gleich wieder was zu mosern. So zeigt mir der Browser z.B. nicht immer alle Bilder einer Website an. Im nach hinein stellte sich jedoch meistens heraus, dass nicht Opera, sondern eher die Webdesigner die Schuld dafür tragen. Opera geht wohl u.a. eindeutig zu korrekt mit CSS-Einträgen um.

Bestes Beispiel ist Google mit seinem Mail-Dienst GMail. Hier kam es wohl dermaßen oft zu Problemen, dass Google ein JS herausgegeben hat, um die Problematik in den Griff zu bekommen.

Vielen Dank an Cybernetz, der mich auf das JS aufmerksam gemacht hat.

Trotz der immer größer werdenden Verbreitung und den umfangreichen Funktionen, die Opera von Haus aus mitbringt, werde ich allerdings beim Firefox bleiben. Hier muss man sich zwar erst alles per Addons nachträglich integrieren, allerdings finde ich ihn vom Gefühl her einfach angenehmer zu bedienen. Ist aber Geschmacksache.