Ein mehr als sinnvolles Projekt bzw. eher eine Übersicht stammt von der Firma BraveNewCode Inc., die im Bereich Webdesign und -entwicklung angesiedelt ist.

Das Unternehmen hat eine Übersicht erstellt, die über 5000 WordPress-Plugins enthält und sehr übersichtlich darstellt, unter welchen WordPress-Versionen jedes einzelne Plugin funktioniert und auch, welche sonstigen Vorraussetzungen gegeben sein müssen. So z.B. die PHP4-Kompatibilität oder ob eine Datenbank-Anbindung erforderlich ist.

Diese Übersicht wandert auf jeden Fall in meine Favoriten!

Danke auch an Heiko vom “Code Styling Project“, durch dessen Blog ich einmal auf die Seite aufmerksam geworden bin und für seinen Test dieser Seite. Scheinbar gibt es bei den Test-Verfahren von BraveNewCode noch einige kleine Fehler.

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.

Wem jetzt auch noch die Bücher oder Lern-DVDs (wie z.B. die Video2Brain-Reihe, die ich ebenfalls sehr empfehlen kann) zu teuer sind – diese schlagen im Schnitt ja auch mit ca. 50 Euro zu buche – findet gerade bei den großen Verlagen wie Galileo Press oder O’Reilly komplette Werke als kostenlose E-Books zum Download. Ist jetzt zwar meiner Meinung nach nicht genauso gut, wie ein Buch zum anfassen, reinkritzeln oder nachschlagen, aber es erfüllt sicherlich seinen Zweck. Bei den E-Books fehlt natürlich auch die CD/DVD, die meist bei den umfangreicheren Büchern beiliegt. Jedoch lassen sich die meisten Tools und Anwendungen kostenlos auf anderen Seiten im Internet herunterladen, da die Verlage meist Open-Source-Produkte einsetzen.

Das Angebot gerade von Galileo Press war mir schon länger bekannt. Allerdings musste ich vor einiger Zeit erst wieder daran erinnert werden, als ich im Buchhaus W. ein Exemplar zum Thema Java-Programmierung gesucht habe. Konnte mich nicht zwischen dem von Galileo und Addison-Wesley entscheiden. Erst ein Kunde machte mich auf das Galileo-Press-Angebot “openbooks” aufmerksam. Demnach viel die entscheidung auf das Werk von Addison-Wesley. Die beistehende Verkäuferin war allerdings gar nicht so begeistert über den Tipp. War danach auch etwas eingeschnappt und Hilfe konnte man auch nicht mehr von ihr erwarten. Schade eigentlich, da ich ja trotzdem ein Buch gekauft hab.

Hier dann mal für alle Schüler, Studenten und sonstige Sparfüchse die Links zu den kostenlosen E-Book-Seiten.

Galileo Computing – Richtig viele Bücher (auf deutsch) zu Themen wie Programmierung, Netzwerke und Betriebssysteme

Galileo Design – Nicht ganz so viele Bücher zu Fotografie, ActionScript, PhotoShop und Dreamweaver

O’Reilly OpenBooks – Deutsches hauptsächlich zum Linux-Bereich

Computer-Literatur onlinelesen – Sammelsurium zu den unterschiedlichsten Gebieten. Manche Sachen sind nicht schlecht.

Auch sei nochmal auf meinen Artikel zum Thema Cheat-Sheets hingewiesen. Diese kleinen Übersichten zu häufig benötigten Funktionen in allen möglichen Gebieten sind echt nicht zu vernachlässigen.

Bei SixRevisions findet man eine schier unendliche Liste mit kleinen Helfern, speziell für Webdesigner. So erhält man dort nicht nur Links zu Faltkarten oder Postern mit Farbwerten und Tasten-Kürzel für Photoshop, sondern auch typographische Übersichten und HTML-Codes für Sonderzeichen. Sogar ein MausPad mit hexagonalen Farbwerten findet man!

Nebenbei findet man dort auch noch eine Auflistung für Web-Entwickler mit dem Themenbereich HTML, CSS, JavaScript und jQuery.

Ich persönlich mag diese Art der Hilfestellung. Man kann sie sich so schön an die Wand tackern. Zumindest so lange, bis man die Codes o.ä. auswendig kennt und keine Spickzettel mehr benötigt. Diese Helfer nennt man übrigens “Cheat Sheets” oder auch Referenz-Karten. In einigen Fachbüchern liegen diese immer mal wieder mit bei. Über eine Suchmaschine findet man zu diesen Begriffen Material zu den unterschiedlichsten Themen. Z.B. auch zu Spielen.

Hier mal wieder ein Dankeschön an Martin und sein privates Blog!

Bei Interesse einfach mal hier im phpforum vorbei schauen und gleich anmelden!

Kostenlos heißt mal wieder, das Buch ist kostenlos. Die Versandkosten von 3,95 € müssen natürlich gezahlt werden, solange man den versandkostenfreien Mindestbestellwert von 20 € nicht überschreitet.

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.

Im faq-o-matic-Blog habe ich jetzt ein VB-Script gefunden, dass Schriftarten aus einem Ordner namens “FontsToInstall” per Windows-Explorer kopiert und installiert und sich nebenbei auch noch um die Fehlermeldungen kümmert. Somit bleibt der sowieso schon genug gestresse User vom stupiden dauer-klicken verschont und kann sich wichtigerem widmen. Aufgerufen wird das Script per Kommandozeile, z.B. per C:\installfont.vbs.

Hier ist das Script nochmal als gepacktes ZIP-Archiv zum herunterladen.

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.

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.