Nun ist es offiziell: StockXpert wird von iStockphoto aufgesaugt und verschwindet vom Markt. Ich finde das sehr, sehr schade.

Hier die offizielle Meldung, die per E-Mail an alle eingetragenen Benutzer rausging:

Dear Frank Pfabigan,

We are sorry to announce that beginning today, StockXpert will no longer sell new credits or accept new members. On February 11, 2010, searching and downloading at StockXpert will cease. This will be the end of image sales at StockXpert.

All SXP members have the opportunity to transfer their remaining credits to iStockphoto. iStock offers the highest quality affordable microstock imagery in the industry. Come and see for yourself. SXP credits will be honored 1 for 1 at iStockphoto. If you aren’t already an iStock member, we encourage you to sign up now. Your credits will be transferred on February 11. If you miss that date, you will still be able to transfer your credits anytime over the next 6 months, until August 11, 2010.

To transfer your credits, login to your StockXpert account and follow the instructions on the front page.

The StockXpert.com website will remain accessible to members and active for certain functions. You will still be able to access your account history and purchase receipts. If you have any questions at all, please contact our Support team.

Please read more about the future of StockXpert here. Thank you for all of your support and patronage over the years. We look forward to seeing you at iStockphoto.

Goodbye, StockXpert. It’s been a great time. We’ll miss you…

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» Traurige Nachricht: StockXpert verschwindet

Vielen Dank an Mareike für diesen Tipp: Bei Bgpatterns.com kann man nette Seitenhintergründe kostenlos auf Knopfdruck generieren und einfach mitnehmen.

Eine wirklich richtig nett gemachte Webapplikation mit praktischem Nutzen.

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» Hintergrundmuster auf Knopfdruck bgpatterns

Durch einen Tipp von Torben bin ich auf DryIcons.com gestoßen, eine Seite mit einer großen Auswahl an Icon-Sets und Vector-Grafiken. Ein hoher Anteil hiervon ist kostenlos verfügbar (auch für kommerzielle Projekte). Für andere wird eine geringe Gebühr für kommerzielle Nutzung erhoben.

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» Viele freie Vector-Grafiken und schöne Icon-Sets

Es gibt eine sehr große Anzahl von professionellen Tools und Methoden, die Webdesignern das Leben vereinfachen sollen.

Dazu gehört auch eine stärker werdende Fraktion von CSS-Metasprachen. In syntaxtisch sauberer Umgebung kann man hier selbst sehr komplexe CSS-Regeln für eine oder mehrere Websites einfach auf Knopfdruck erzeugen, wenn man diese erstmal programmiert hat.

Da liegt meiner Meinung nach der Hund begraben: Die zugegeben schönen Möglichkeiten der CSS-Metasprachen lassen sich natürlich nur ausschöpfen, wenn man diese Metasprache auch beherrscht. Kommen als nächstes also wieder vereinfachende Tools, die wiederum die Metasprachen erzeugen, die wiederum die CSS-Dateien mit ihren Regelsätzen erzeugen?

Versteh mich nicht falsch: Viele Entwickler haben auf CSS-Metasprachen gewartet und werden diese dankbar in ihre Toolsammlung aufnehmen. Und ich kann mir selbst auch viele sinnvolle Einsatzmöglichkeiten dafür vorstellen. Daß es so etwas überhaupt gibt, zeigt die Notwendigkeit, über CSS (und wie es sein sollte) ganz neu nachzudenken.

Aber meiner Meinung nach sollte man ein Problem nicht unendlich elaborieren und abstrahieren. Es wäre nicht verkehrt, wenn all die Programmierer, die GUIs bauen sollen, sich auch endlich mal die Hände schmutzig machten und etwas über Typographie, Farben und Formen lernten.

Es gibt wirklich schöne OpenSource Lösungen, die ich mit Begeisterung einsetze, wie z.B. Zen Cart. Diese gesamte eCommerce Lösung ist so clever und unendlich erweiterbar geschrieben, aber wenn man sich den CSS-Code der Templates anschaut, erfasst mich das kalte Grauen…

Man kann effektiven CSS-Code schreiben. Oder eben auch nicht. Es ist wie mit BASIC. Auch der bekloppteste Spaghetticode kann toll funktionieren. Nur weil CSS unglaublich unübersichtlich und schlecht geschrieben werden kann, muß man nicht zu einer anderen Sprache springen. Man könnte CSS selbst weiterentwickeln und um striktere Syntax erweitern.

Dies hat mit der Transformation von C zu C++ bzw. Objective-C hervorragend funktioniert. Denn C ist – genau wie CSS – im Grunde sehr gut geeignet, eine Vielzahl von Problemen zu lösen und sehr effektiven Code zu erzeugen. Und zwar (sehr wichtig): für alle Stufen auf der Lernkurve.

Selbst sehr Fortgeschrittene können aus C immer noch ungeahnte Lösungen zaubern. Und Anfänger können schon nach kurzer Zeit professionelle Programme damit erzeugen. Eine Syntax sollte diese beiden Aspekte berücksichtigen: Unausschöpflichkeit (damit niemand an Grenzen stößt) und superleichten Einstieg durch überzeugend einfache Logik.

Nicht umsonst wurde/wird z.B. PASCAL an Schulen gelehrt, um den Einstieg in die Programmierung zu ermöglichen. Aber auch LOGIC (das mit der Schildkrötengrafik) ist vom logischen Ansatz her sehr schnell zu erfassen, während der Sourcecode von SMALLTALK hingegen nicht ohne weiteres verstanden werden kann.

Die philosophische Nasenscheidewand

Noch ist nur ein Niesen zwischen den beiden philosophischen Ansätzen, die verschiedene Webentwickler verfolgen. Zum Einen gibt es die CSS-Metasprachen Partei, zum Anderen diejenigen, die CSS selbst verbessern möchten.

Die Erfahrung hat gezeigt, daß sich aus solchen anfänglich noch winzig kleinen Entfernungen schnell große, unüberbrückbare Distanzen aufbauen können, bei der früher oder später eine Lösung auf die Müllkippe der Geschichte kommt.

Ich nehme das zum Anlaß, nochmals den Niedergang von Beta gegenüber VHS zu betrauern… das Schlechtere, aber besser Vermarktete hat sich durchgesetzt und uns viele ruckelnde Bilder mit viel Schnee beschert… Seufz.

Noch ist es nicht zu spät. Beide Ansätze lassen sich zu einer großartigen Lösung verbinden. Ich hoffe, daß auch andere Leute dieses Potential sehen und entsprechend darauf hinwirken.

Die Einen: CSS-Metasprache

Hier gibt es z.B. less und haml, wobei sass (syntactically awesome stylesheets) der Part von haml ist, der sich um die Stylesheets kümmert. less, haml und damit auch sass kommen aus der Ruby on Rails Ecke, das ist sowieso ein ganz eigenes Völkchen von Entwicklern

Die Anderen: Object Oriented CSS

oocss von Nicole Sullivan verfolgt den Weg der reinen Lehre und versucht, mit den Bordmitteln von CSS einen rationalen Umgang mit den Möglichkeiten von CSS selbst zu erreichen.

Die Zukunft? – Wer weiß..?

Ich persönlich bevorzuge den Ansatz von Nicole Sullivan mit dem oocss. Es gibt durchaus Wege und Möglichkeiten, sauberen CSS-Code zu schreiben, der auch für einen Dritten sofort pflegbar und erweiterbar ist. Die Ordnung im CSS lässt sich durch Wiederverwendbarkeit von CSS-Klassen, Aufteilung auf Dateien und viele andere Möglichkeiten herstellen.

Was meinst Du? – Wie organisierst Du Deinen CSS-Code für Kundenprojekte? Nutzt Du wiederverwendbare Module, die Du anpasst oder entwickelst Du immer alles vom weißen Blatt aus?

Software-Entwicklung ist teuer, da man erstens Spezialisten benötigt und zweitens, da sie Zeit kostet: die Entwicklungszeit. Durch Low-Level-Einstiegssyntax wird es mehr “Spezialisten” geben, die ein gegebenes Problem lösen können. Und durch wiederverwertbaren Code (recylce this!) sinkt die Dauer der Entwicklungszeit, wenn man den Sourcecode nur noch modulartig zusammensetzen muß.

Die mit Abstand beste Modularchitektur, die ich bisher bei einem OpenSource Projekt gesehen habe, ist bei Drupal zu finden. Dort gibt es Leute, die APIs als Module für wiederum andere Module bereitstellen. Das nenne ich perfekte Zusammenarbeit. Es gibt dort weitaus weniger konkurrierende Module (die alle dieselbe Funktionalität bereitstellen). Und die Modul-Autoren empfehlen teilweise sogar das Modul des anderen für bestimmte Konditionen. Hut ab.

Vielleicht wäre die Lösung für das “Problem” CSS einfach ein Compiler mit Debugger, der Warnungen und Fehler auswirft und dem Autor direkt anzeigt, was wirklich nicht geht und was nicht “so schön” ist. Und letztlich optimierten CSS-Code in komprimierter Form ausspuckt, der superschnell geladen werden kann.

Vielleicht liest dies ja jemand und setzt diese Idee in die Tat um

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» CSS-Metasprachen: Hilfe oder Verlagerung des Problems auf abstraktere Ebene?

Wikipedia hat Abbildungen von historischen, wunscherschön und aberwitzig arbeitsintensiv aufbereiteten Initialen aus verschiedenen alten Dokumenten.

Das gezeigte Beispiel ist ein Screenshot aus einem Kundenprojekt.

Realisiert habe ich das mit jQuery und Hilfe aus dem Internet, mit Google gefunden. Es gibt mehrere Ansätze, Initiale zu realisieren. Im Grunde geht es darum, den Text zu filtern, den ersten Buchstaben “zur Seite zu schieben” und durch ein Bild zu ersetzen, daß das gewünschte Initial (entsprechend dem 1. Buchstaben) zeigt.

Was so einfach klingt, hat mich tatsächlich über 10 h Entwicklungszeit gekostet, bis es stabil, optisch zufriedenstellend und gemäß den Kundenvorgaben funktionierte.

Realisiert wurde es mit der aktuellen jQuery Version 1.3.2. Auf jQuery wird einfach per script-Anweisung im head-Bereich der Datei referenziert:

15
16
17

...
<script type="text/javascript" src="mein/pfad/jquery-1.3.2.min.js"></script>
...

Da die Kundenwebsite vorsieht, daß diese Dropcaps in verschiedenen “Bereichen” der Seite auftauchen können, habe ich mir folgenden Funktionsaufruf zurechtgelegt:

<!-- den sourcecode des dropcaps.js laden, source siehe unten -->
<script type="text/javascript" src="pfad/zum/js-code/dropcaps.js"></script>

20
21
22
23
24

<script type="text/javascript">
$(document).ready(function(){
  dropcaps( "der/pfad/zu/den/bildern/img/", "div-tag (bereich)" );
});
</script>

Das $(document).ready( ... wird von jQuery bereitgestellt und stellt sicher, daß der enthaltene Code erst nach dem vollständigen Laden des Dokumentes ausgeführt wird. Hier drin befindet sich der Aufruf der Funktion dropcaps(), dessen Code so aussieht:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

function dropcaps( picpath, bereich )
{
 
	$("#" + bereich + " p").each( function( index ) {
		var paragraph = this;
		var node = paragraph;
 
		while( node.childNodes.length ) {
			node = node.firstChild;
		}
 
		var text = node.nodeValue;
 
		/* html-source erhalten, da hier links etc. drin liegen koennen */
		var source = $( this ).html( );
		var source = source.slice( 1 );	/* das 1. zeichen wegschmeissen */
 
		var first_letter = text.substr( 0, 1 );
 
		var match = /[a-zA-Z]/.test(first_letter);
 
		if( match ) {
			node.nodeValue = text.slice(1);
 
			$( this ).html( "<span class=\"dropcap-"
				+ first_letter.toLowerCase( )
				+ "\" style=\"background-image: url( " + picpath + "drop-"
				+ first_letter.toLowerCase( )
				+ ".png)\">"
				+ first_letter
				+ "</span>"
				+ source
			);
 
		}
	});
}
 
/* based on these sources:
 * http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps
 * http://northtemple.com/2008/12/02/hot-and-graceful-jquery-dropcaps
 */

Die Quellangaben im Source zeigen an, woher der Quellcode ursprünglich stammt. Prinzipiell habe ich die verschiedenen Ansätze dieser beiden Autoren zu einer neuen Lösung verschmolzen. Da ich mir immer noch kein jQuery Buch gekauft habe (was ich schon sehr lange vorhabe), muß ich mir alles mühsam irgendwo aus dem Internet puhlen.

Es war ein ziemliches Gefummel, den ursprünglichen Text mitsamt enthalten HTML-Tags zu erhalten, denn die Methoden der beiden Autoren hatten das nicht berücksichtigt; somit waren z.B. im Text enthaltene Links plötzlich futsch. Alles in allem also viel Zeit für die Suche nach Lösungen für bestimmte Teilprobleme.

Ich muß mir unbedingt das Buch kaufen

Man muß natürlich alle Zeichen, die als Initial in Frage kommen könnten, als Bilder aufbereiten. Ist zwar nicht schwierig, aber nimmt auch Zeit in Anspruch. Auch hier steckt der Teufel im Detail: die Buchstaben so einer Schnörkelschrift in einer fixen Punktzahl sind nicht alle gleich groß. Man muß daher auch die Bildgröße einiger-vieler anpassen.

Zusätzlich gibt es durch die zugehörige CSS-Datei eine Möglichkeit der Feinjustage der Initialien:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/* dropcaps */
.dropcap{
    text-indent: 0;
}
.dropcap-a, 
.dropcap-b, 
.dropcap-c, 
.dropcap-d, 
.dropcap-e, 
.dropcap-f, 
.dropcap-g, 
.dropcap-h, 
.dropcap-i, 
.dropcap-j, 
.dropcap-k, 
.dropcap-l, 
.dropcap-m, 
.dropcap-n, 
.dropcap-o, 
.dropcap-p, 
.dropcap-q, 
.dropcap-r, 
.dropcap-s, 
.dropcap-t, 
.dropcap-u, 
.dropcap-v, 
.dropcap-w, 
.dropcap-x, 
.dropcap-y, 
.dropcap-z {
    width: 40px;
    height: 33px;
    display: block;
    text-indent: -5000px;
    float: left;
    margin-top: 3px;
    margin-right: 2px;
    background: transparent top center no-repeat;
}
 
.dropcap-h { width: 50px; }
.dropcap-j { height: 40px; }
.dropcap-k { width: 50px; }
.dropcap-m { width: 55px; }
.dropcap-n { width: 45px; }
.dropcap-p { width: 45px; }
.dropcap-y { width: 40px; height: 40px; }

Wer diesen Code für eigene Projekte nutzen möchte, kann das gerne tun. Ich bitte nur darum, die Quellangaben zu den Vorgängern und zu mir irgendwo im Source mitzuführen.

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» Dropcaps mit jQuery

Dort kann man nicht nur ein Bild mit Buchstaben hochladen, um sich anzeigen zu lassen, welche Fonts (oder ähnliche) im Bild verwendet wurden, sondern erhält dort auch eine große Menge kostenloser Fonts. Zum jetzigen Zeitpunkt 427!

Die Font-Erkennung (hochgeladenes Bild mit Textausschnitt) funktioniert zwar nicht in jedem Fall einwandfrei, aber man bekommt zumindest einen ganzen Schwung “ähnlicher” Fonts angezeigt. Sehr hilfreich, wenn man etwas “nachsetzen” möchte (oder muß).

Wer die Suche entsprechend einsetzt, findet hier sehr schnell die Liste mit den 427 kostenlosen Fonts. Alle Fonts sind mehrfach verschlagwortet (Tags), über Kategorien oder Stile zu finden. Jeder Treffer zeigt weitere, ähnliche Fonts an. Sehr schön gemacht.

Viel Spaß mit MyFonts! (einfach auf das Bild klicken, um hinzuspringen)

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» 427 kostenlose Fonts bei MyFonts

Diese verrückte Aktion kommt von hier und soll vor allem mit einer Portion Humor auf die Einhaltung von Webstandards aufmerksam machen.

Ich zeige euch hier meinen nackten <body>. Das ist ganz natürlich, da braucht man sich nicht zu schämen.

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» CSS-Naked Day am 09. April 2009

Coverflow mit Flash & Flex

Apples Coverflow-Effekt, z.B. in iTunes, mittlerweile aber auch im Finder anzuschauen, ist sehr beliebt. Mit dieser Darstellung lassen sich eine große Menge von Daten platzsparend, aber gleichzeitig sehr schnell navigierbar darstellen.

Auf der Seite video-flash.de kann man sich einen Überblick darüber verschaffen, welche Lösungen es derzeit mit Flash / Flex gibt.

Sicher ganz nützlich für den einen oder anderen Webentwickler, denn Kunden sehen so etwas auch und fragen danach. Dann ist es gut, wenn man schonmal weiß, wo man sich näher informieren kann und wie man das auf der Website des Kunden umsetzen kann.

• Übersicht Coverflow-Effekt mit Flash/Flex

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» Übersicht der Coverflow Effekte in Flash und Flex

4 zum Preis von 1: WooThemes für Wordpress

WooThemes hat ein besonderes Weihnachtsangebot: 4 für 1. WooThemes stellt sehr hochwertige, professionelle Wordpress-Themes her, die keine Wünsche offen lassen. Mit diesem Superschnäppchen-Angebot wollen sie wohl noch schnell die Geschenke für ihre Kinder sichern.

Ich habe selbst auch zugeschlagen und mir 4 sehr schöne Templates in der Developer Licence zum Preis von nur 1 gekauft. Anstatt 4 x $150 ($600) habe ich nur $150 bezahlt, also $450 gespart.

Mit diesen Neuen habe ich meine Basis an Wordpress-Themes, die man schnell für Kunden anpassen kann, verbreitert, spare also letztendlich Zeit und könnte diesen Vorteil auch an meine Kunden weitergeben (wenn der Kunde nett ist, mache ich das auch).

Schlag zu. Schau Dir die WooThemes für Wordpress mal an, jedes kann ausgiebig in einer Live-Demo betrachtet werden. Es sind viele schöne dabei, die noch weitere Unter-Styles bieten (ein komisches Wort, aber Du weißt, was ich meine…).

» Guck Dir das WooThemes Angebot an

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» 4 professionelle Wordpress-Themes zum Preis von 1!

Das Gehadere mit sich selbst, ob man es nun so oder so macht, wie man dies und das gestalten soll, muß ein Ende haben. Zudem musste ich feststellen, daß man ein Wordpress-Theme leider nicht komplett lokal entwickeln kann. Der Online-Gang war zwangsläufig fällig.

Von der Entwicklung in einem “geheimen Verzeichnis auf dem Webserver” halte ich nichts. Es ist so schon schwierig genug, all seine Blogs auf dem neuesten Stand zu halten. Da verliere ich dann irgendwann den Überblick.

Was sagst Du? – Gefällt Dir die Richtung, in die das gehen soll? Oder ist der Header oder nur der Menübereich doch zu dunkel? – Gerade mit der Farbwahl fällt und steht ja alles…

Ein Theme zu entwickeln heißt, lange mit sich selbst zu kämpfen, bis man sich auf eine Linie oder einen Look geeinigt hat. Denn alles nochmal umzustricken, ist viel zu aufwändig. In dieses Theme sind eine Menge raffinierter Sachen eingebaut, die ich bei Gelegenheit mal einzeln betrachtet vorstellen werde.

Jetzt ist aber wirklich Feierabend. Ich blute aus den Augen.

SEO Scout | Suchmaschinenoptimierung. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)
» Sag hallo zu meinem neuen Theme