» Go Firefox 3.5!

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Firefox 3.5 verfügbar. Über 5000 Verbesserungen

Lies auch diese interessanten Beiträge

• Neues Gewand für Firefox Webbrowser (0)
• Google Adsense Einnahmen permanent in Firefox anzeigen (0)

Recyclable Code

Wenn es Nacht wird und die lauten Nachbarn endlich Ruhe geben, kann man mal einen klaren Gedanken fassen und eine Idee ausarbeiten. Ich habe mir den geschriebenen Artikel zu CSS-Metasprachen nochmals durchgelesen und mir gedacht: warum startest Du selbst nicht etwas in dieser Richtung?

Denn: Es gibt nichts Gutes, außer: Man tut es (Erich Kästner)

Ich rufe hiermit eine Initiative ins Leben, die Recyclebaren Code (Wiederverwendbaren Sourcecode) für Entwickler leichter auffindbar machen soll, indem man explizit auf diesen auf seinen eigenen Blogs darauf hinweist.

So kann jeder, der es möchte, jederzeit mit eigenen Mitteln partizipieren. Es gibt keinen Clubausweis, keine Armbinde, sondern nur einen Codex:

Helfe anderen Entwicklern dabei, guten Sourcecode zu schreiben, indem Du auf Deinem blog auf Quellen hinweist oder selbst Beispielcode veröffentlichst.

Juhu! Kurzerhand habe ich mich nun auch entschlossen, nächsten Samstag ein Bloggertreffen ins Leben zu rufen, auf dem dies und alles besprochen werden kann. Wer möchte, der möge sich am Samstag, 04.07.2009, 15:00 Uhr auf dem Marktplatz Lübeck, Bestuhlung des Ratskellers, einzufinden.

Edit 28.06.2009: Location auf der Google Map

Möglicherweise wird es das einsamste Bloggertreffen der Welt, aber wer weiß? – Vielleicht kommt ja doch einer…

Als Logo für diese Initiative stelle ich mir dieses von reverseenergy.com entliehene Bild vor. Etwas in dieser Richtung zumindest. Es gibt bestimmt begabte Webdesigner unter den Lesern, die ein tolles Logo für diese Initiative bauen könnten.

Um gleich einen ersten Nutzen für den Leser zu generieren: hier ist ein Hinweis auf funktionierenden Sourcecode für die Erstellung von HTML-Seiten mit flexiblen Spaltenanordnungen auf Basis von CSS. 40 Basis-Layouts zum Loslegen. » 40 CSS Layouts

Es ist eigentlich nichts Neues an der Initiative Recyclable Code. Aber es hat jetzt einen Namen, ein Schlagwort, nach dem man suchen kann. In Zukunft werden Google-Suchen nach “recyclable code css-layout” und ähnliche hoffentlich viele Treffer auflisten. Und da es nichts wirklich Neues ist; da wir alle es sowieso schon tun, kann es auch sehr schnell sehr erfolgreich werden.

Aus SEO-Sicht ergibt sich hier auch etwas Interessantes: Durch die inhaltliche Verknüpfung über Hinweise auf verwendbaren Sourcecode unter dem Namen Recyclable Code zieht sich ein roter Faden über viele verschiedene Blogs, die so über diese Schiene wieder viele neue Besucher erhalten können. Wer also daran teilnimmt, kann nur davon profitieren. Und noch kannst Du einer der Allerersten sein

Bisherige Teilnahme an der Initiative Recyclable Code:

• SEO-Scout.org
• Webdesigner-Luebeck.de (das ist einfach, das ist auch meiner)
• Dein Blog demnächst hier? In einer eigenen Blogroll?

Mach mit!

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Initiative: Recyclable Code

Lies auch diese interessanten Beiträge

• No related posts.

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.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

CSS-Metasprachen: Hilfe oder Verlagerung des Problems auf abstraktere Ebene?

Lies auch diese interessanten Beiträge

• No related posts.

Zudem will die GEMA demnächst die Veranstalter-Abgaben um 600% für Live-Veranstaltungen erhöhen. Das würde das AUS für alle Kleinkonzerte in Clubs, Discos, Straßenfesten und ähnlichen bedeuten und die lebendige Kleinkultur jeder Stadt beenden.

Nur die jetzt schon großen und bekannten Künstler würden hiervon profitieren. Bedenke, daß hierzu vor allem Lady Gaga und der Musikantenstadl gehören. Praktisch jedes Ska- Punk- Rock-Konzert würde nicht stattfinden können.

» Zeichne jetzt die Petition des Deutschen Bundestages “GEMA”

Ich bin Nr. 50126

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Bundestag Petition GEMA

Lies auch diese interessanten Beiträge

• No related posts.

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

iPhone OS Update 3.0 verfügbar

Lies auch diese interessanten Beiträge

• Wordpress 2.7 absolut phantastisch (3)
• Vorgeschaltet: Wordpress 2.6.5 mit Bugifxes noch vor WP 2.7 (1)
• Übersicht der Coverflow Effekte in Flash und Flex (0)
• Twitter Mania: Google Got Shut Down. Apple Rumours Heat Up. (3)
• Apple Keynote: Music (0)

Ich habe es wie im Falle des Kommentar-Spammers Werner Burczyk gemacht, der hier zigfach irgendwelche ellenlangen Texte als Spam-Kommentar hinterlassen hat: ich habe seine Eltern angerufen.

Nee, das nicht. Aber ich habe den jeweiligen Hoster informiert, daß der Benutzer soundso unter der IP-Adresse soundso Spam verbreitet und daß diese sich bitte darum kümmern sollen, daß das aufhört.

Da in den Wordpress-Kommentaren die IP-Nummer mitgeloggt wird, kann man diese einfach z.B. bei whois.domaintools.com einkippen und hat schon mal einen ersten Anhaltspunkt darüber, woher der Spammer kommt (oder zu kommen scheint).

Alle Hoster haben eine “abuse” E-Mail Adresse, dorthin kann man schreiben, wenn man einen Spammer stoppen möchte. IP-Adresse, Zeit und Inhalt des Spams am besten mitschicken. Die schauen zumindest nach, ob der Spammer wirklich über sie konnektiert ist und wenn ja, schreiten viele tatsächlich zur Tat und geben dem Spammer eine Nackenschelle.

Spammer scheinen echt nichts mit ihrer Zeit anfangen zu können. Das macht mich ein bißchen traurig. Trotzdem gehören die eingesperrt. Oder erschossen. Oder beides. Na, zumindest Kopf ab, wie die Herz-Königin aus Alice im Wunderland oft und gerne ausruft.

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Casino Kommentar Spammer

Lies auch diese interessanten Beiträge

• No related posts.

Anderenorts erfreuen sich solche live-Treffen größerer Beliebtheit. Hier kann man mit “Kollegen” fachsimpeln, Probleme diskutieren, aktuelle Trends unter die Lupe nehmen und vieles mehr. In gemütlicher Runde bei einem Essen und einem Bierchen oder zwei.

Ich selbst bin nicht motorisiert, daher schränkt sich der Radius bitte unbedingt auf Lübeck-Altstadt ein. Klar kann ich auch nach Hamburg fahren, aber es soll auch keinen Aufwand mit sich bringen, zu so einem Blogger-Treffen zu gehen. Es sollen sich lokal Ansässige auf einen Schnack treffen.

Wenn Du dieser Idee nicht abgeneigt bist, hinterlasse doch einen Kommentar mit einem Vorschlag für Ort + Zeit, damit die Diskussion ins Rollen kommt. Ich bin wirklich gespannt, ob und wieviele sich melden. Dass es hier in Lübeck Blogger gibt, weiß ich. Ich höre euch atmen und verfolge Euer Geschriebenes

Edit 28.06.2009: Blogger-Treffen am 04.07.2009, 15:00 Uhr, Ratskeller Lübeck (draußen)

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Blogger-Treffen in Lübeck?

Lies auch diese interessanten Beiträge

• No related posts.

Web 2.0 sollte vor allem Interaktivität mit den Besuchern auf ansonsten statische (nur zu konsumierende) Websites bringen. Mit diesem neuen Gedanken der “partiellen Mitgestaltung der Inhalte einer Seite durch den Besucher” wurden viele neue, schöne und benutzerfreundliche Anwendungen und Plugins vor vorhandene Blog-/CMS entwickelt und haben sich sehr schnell sehr großer Beliebtheit erfreut.

Mit Google Wave wird nun die darunterliegende technische Plattform, das Web selbst, revolutioniert. Google Wave verfolgt den Ansatz, den viele vorher schon hatten: sogenannte Waves stellen inhaltliche Komponenten dar, die man mit beliebigen, zur Verfügung stehenden Funktionen befüllen kann.

Historischer Abriss

Apple hatte dereinst ein Entwicklungsprogramm, das sog. “Parts” zur Verfügung stellt, in dem einzelne Funktionalitäten von Programmen durch den Benutzer zu “seiner eigenen Anwendung” zusammengeklickt werden konnten. Also z.B. die Bildskalierung von Photoshop in einem Texteditor. Ungeahnte Möglichkeiten und absolute Benutzerfreundlichkeit.

Viele andere Ansätze solcher “Shared Applications” oder wie immer man es nun nennen mag, haben wir kommen und gehen sehen. Das bedeutet aber nicht, daß die Idee an sich schlecht ist (im Gegenteil), die Zeit war anscheinend einfach noch nicht reif dafür. Die Hersteller von Anwendungen haben nicht so richtig “mitgespielt”. Auf deren Seite gab es zum Beispiel Bedenken bezüglich der Lizensierung/Bepreisung Ihrer Programme und dergleichen mehr.

Die Zukunft

Mit Google Wave rollen die Brüder Jens und Lars Rasmussen, denen wir schon die wundervolle Anwendung Google Maps verdanken, die Zukunft ein weiteres mal aus. Diesmal scheint die Zeit reif zu sein, denn das Thema “Google Wave” ist “heiß”. Die Anzahl der Suchergebnisse steigt dramatisch an und Google Wave ist Top-Thema auf sehr vielen Seiten, Foren und Pressemitteilungen.

Google Wave läuft zu 100% im Webbrowser und benötigt prinzipiell keine Browserplugins. Die extrem skalierbare und hochperformante Google API ist die Basis für alle Google Wave Dienste und Anwendungen. Im 1,5 h Video zu Google Wave von der Googlio I/O Konferenz werden eindrucksvolle Beispiele gezeigt, was man mit Google Wave alles anstellen kann.

Ein Basisfeature von Google Wave ist die Synchronisierung von Benutzereingaben: Während ich einen Text eingebe, taucht dieser live auf dem Bildschirm der Empfänger auf. Jeder kennt das von iTalk und anderen Chats, aber in einer Email? Oder einer anderen Anwendung wie z.B. Twitter?

Dokumente können live und in Echtzeit von vielen Benutzern gleichzeitig bearbeitet werden. Ein Blogroboter kann das, worüber ich in einer anderen “Anwendung” geschrieben habe, in meinen Blog übernehmen. Dateien, Videos, Bilder können mit einem Mausklick gesucht und hinzugefügt werden. Just like that.

Kurzum, Google Wave wird das Web und die Art und Weise, wie Menschen miteinander kommunizieren und zusammenarbeiten, revolutionieren. Nämlich: vereinfachen, verbessern. Schneller, höher, weiter. Dabei ist Google Wave nicht auf das Web beschränkt: Die Google API stellt verschiedene “Layer” bereit, damit der Inhalt in (für das Anzeigegerät) angepasster Form auch auf mobile Devices wie z.B. Android, iPhone und vielen anderen angezeigt werden kann.

Ich schlage vor, Du schaust Dir die Videopräsentation zu Google Wave selbst mal an und klickst auch auf den Let me know when it’s ready Button, damit Du automatisch informiert wirst, wenn Google Wave für das “Publikum” bereit ist. Entwickler sollten sich unbedingt die API und die Dokumentation anschauen und anfangen, Anwendungsmöglichkeiten für Google Wave zu entwickeln.

» Video anschauen und mehr über Google Wave erfahren.

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Google Wave: Die nächste Webrevolution steht an

Lies auch diese interessanten Beiträge

• Webseite-Ladezeit in Google Analytics anzeigen und auswerten (9)
• Twitter Mania: Google Got Shut Down. Apple Rumours Heat Up. (3)
• Spaß mit Google Talk (2)
• SEO Scout erhält Google Pagerank 4 (3)
• PageRank 8 mit 18 Backlinks (10)

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.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Dropcaps mit jQuery

Lies auch diese interessanten Beiträge

• Sag hallo zu meinem neuen Theme (2)
• Guter Artikel über Farbwahl bei Websites und Blogs (0)

• Robust bedeutet: der WP-Editor zerschiesst einem beim Nachbessern nicht die Formatierung und killt vermeintlich falsche Tags
• Anwenderfreundlich bedeutet: man muß nicht sämtliche führenden Spitzen-Klammern manuell in ihre HTML-Entities umwandeln

Einfach, schnell, schön, gut: WP-Syntax.

Seo-Scout.org. Methoden für Suchmaschinenoptimierung, Blog-Optimierung, Geldverdienen mit Blogs. Grundlagenartikel und Fortgeschrittenen-Stuff ;-)

Sourcecode-Darstellung im Wordpress-Blog

Lies auch diese interessanten Beiträge

• Wordpress Template Tags (1)
• Wordpress der unbekannte Klumpen (1)
• Wordpress 2.7 absolut phantastisch (3)
• Vorsicht mit dem Wordpress Wysiwyg-Editor! (3)
• Vorgeschaltet: Wordpress 2.6.5 mit Bugifxes noch vor WP 2.7 (1)