da haben sich die Damen und Herren Politiker wieder was einfallen lassen, dass in mir die Frage reift, ob “die” denn überhaupt eine Ahnung von Medien, Technik, Datenschutz und Internet haben?

Aber auch für das neue Gesetz hab ich eine Lösung parat (siehe Abschnitt 2 – Captchas mit Adresse und Telefonnummer erstellen).

Doch der Reihe nach – Um was geht es überhaupt:
Nachdem durch das Medium “Twitter” immer wieder Insiderwissen an die Öffentlichkeit gelangt, haben die 27 EU- Datenschutzbeauftragten eine Gesetzesnovelle vorgelegt. Das Ding hat den fürchterlichen Namen “Richtlinie 2009/27 Amtsblatt W-140 Absatz 7 Artikel 4.3” und beinhaltet u.a. , das jedes Twitterprofil mit den persönlichen Daten  des Inhabers öffentlich gekennzeichnet sein muss – mindestens aber: Name, Adresse und Telefonnummer. Gem. der Stellungnahme des Datenschutzexperten Jörg Klingbeil (59), protestieren die Landesdatenschutzbeauftragen auf’s Heftigste. Twitterchef Evan Williams meinte einfach nur lapidar: “Auch das wird den Siegeszug von Twitter auf dem europäischen Markt nicht aufhalten können”.

Die EU-Richtlinie soll in den kommenden Wochen in verschärftes nationales Recht umgesetzt werden.  Bis Mai soll der Entwurf des “Gesetzes gegen den Missbrauch von neuen Medien (kurz: Medienmissbrauchsgesetz MMG)” schon verabschiedet werden.

Das haben die  Herren Politiker davon, wenn Wahlergebnisse per Twitter mitgeteilt werden, bevor sie offiziell sind.

Nicht im Gesetz steht, in welcher Form die Adresse und die Telefonnummer mitgeteilt werden muss. Deshalb hab ich über ein kleines Hintertürchen nachgedacht und liefere eine Anleitung, wie Ihr Eure Daten so darstellen könnt, dass sie zumindest von Maschinen (Robots) nicht gelesen werden können.

Captchas mit Adresse und Telefonnummer erstellen

Hierzu ist es wichtig, dass Ihr den Text nicht in der Datei auf Twitter einbettet, sondern eine Grafik generiert und dort die erforderlichen Daten einfügt.

Das kann sehr leicht mit einem kostenlosen Grafikprogramm (z.B. Gimp) bewerkstelligt werden. Profis greifen zu Photoshop. Achtet darauf, dass die einzelnen Zeichen keinen Rahmen haben (maschinenlesbar!) und dass sich die Farbe vom Hintergrund nur leicht abhebt (Tip1). Zudem ist es ganz hilfreich, wahllos dünne Linien durch das Geschriebene zu ziehen – auch damit haben die Robots ihr Probleme (Tip 2).

Achtet aber darauf, dass die Störstriche eine max. Deckkraft von 50% haben, denn sonst könnte das als unleserlich betrachtet werden, was ggf. rechtliche Konsequenzen hat. Wie hoch diese sein werden steht noch nicht fest.

Fazit

Missbrauch von Medien gehört verurteilt. Da stimme ich voll und ganz zu. Doch meines Erachtens schießt man da mit Kanonen auf Spatzen. Ich bin ersthaft am überlegen, ob ich meinen Twitter-Account nicht löschen soll. den Volltext bekommen die jedenfalls nicht!!!

Wie schaut’s bei Euch aus? Spielt Ihr mit? Oder habt Ihr keine bedenken, wenn Name und Adresse so öffentlich zugänglich sind? War die Anleitung hilfreich für Euch?

Ich freue mich über Eure Kommentare

Nachtrag vom 02.04.2010

April, April – so werden sich viele gedacht haben. Und so ist es auch. einige Zeit haben wir uns überlegt, wie wir einen “sanften” Aprilscherz unter die Leute bringen können und gleichzeitig in eulenspiegel’scher Manier den Spiegel vorhalten können: Facebook, Twitter, Schüler-VZ & Co und ihr schlechtes Abschneiden in puncto Datenschutz.

Erfreulicherweise sind auch viele darauf reingefallen. Die Idee wurde gemeinsam mit ALex (workablogic) geboren, der zahlreiche weitere Blogger mit in’s Boot holte. Nun hab ich noch das Vergnügen, mitzuteilen, wer mit von der Partie war:

workablogic.de,
meinungs-blog.de,
christiane-klein.com,
kaffeejunkies.at,
geneslebenswerk.de,
gesichtet.net,
blogfrosch.de,
pesuki.blogspot.com,
saphirasworld.de,
letzterstand.de,
gregel.com,
nicht-spurlos.de,
blogblogblog.de,
delijo.de,
crazytoast.de,
blog.tobis-bu.de.

Vielen Dank Euch allen für’s Mitspielen und für das Engagement. Es war ein rießen Spaß – bis zum nächsten Aprilscherz

Oliver

Foto: “Datenschutz” © Rainer Sturm / PIXELIO (beschnitten)

Anbieter für kostenlosen Speicherplatz gibt es mittlerweile genügend. Doch unterscheiden sie sich erheblich in Volumen, Service und Sicherheit. Einen Anbieter hab ich unter die Lupe genommen. Es handelt sich hierbei um “SkyDrive“, das von Microsoft angeboten wird. Der Zugang zu SkyDrive erfolgt über die ebenfalls kostenlose Microsoft Live-ID. Wenn Ihr beispielsweise einen X-Box-Zugang oder ein hotmail-Konto habt, verfügt Ihr auch schon über eine Live-ID. Ansonsten könnt Ihr eine ID bei bei Windows live kostenlos anlegen.

Ganze 25 GB stehen dem Anwender auf dem Online-Speicher zur Verfügung. So habt Ihr jederzeit die Möglichkeit, von überall auf Eure Musik, Fotoalben und Dokumente zuzugreifen. Auch zur Datensicherung lässt sich SkyDrive “missbrauchen”. Nervt z.B. eure Freunde, wenn Ihr dort zu Besuch seid und zeigt Ihnen Eure Musik oder die Bilder von Tante Heidruns 65. Geburtstag.

Im Folgenden möchte ich Euch zwei Möglichkeiten aufzeigen, wie Ihr SkyDrive im Explorer einbinden könnt.

1. SkyDrive per Webdav im Explorer einbinden

2. SkyDrive mit Gladinet im Explorer einbinden

Bedenkt, dass Ihr der Firewall entsprechende Erlaubnisse erteilt. Windows-nutzer greifen hier am Besten zum kostenlosen Firewall-Aufsetzer von Sphinx-Soft.

1. SkyDrive per WebDAV im Explorer einbinden

Zunächst loggt Ihr Euch bei SkyDrive ein und legt ein paar beliebige Ordner für Bilder, Datensicherung, Dokumente, Musik, Webanwendungen usw. an. Für jeden Ordner könnt Ihr angeben, wer auf die Daten zugreifen darf. Die Berechtigungen können jederzeit geändert bzw gelöscht werden. SO könnt Ihr Ordner und Daten anlegen, auf die nur Ihr zugreifen könnt – alternativ stehen sie “jedem” oder nur “bestimmten Personen” zur Verfügung. Auf Eurem SkyDrive sieht es dann in etwa so aus wie auf dem bild (Klicken zum Vergrößern).

Um Dateien zwischen dem heimischen PC und dem Online-Speicher auszutauschen, könnt Ihr entweder den entsprechende Dateibrowser (siehe Bild2) auf SkyDrive verwenden  im Browser verwenden oder Ihr benutzt eine passende Software auf Eurem PC. Bilder können z.B.  über Windows Vista oder Windows 7 direkt aus der Anwendung “Windows Live-Fotogalerie” hochgeladen werden (siehe Bild3). Alternativ geht’s auch über den Windows Explorer (Windwos-Taste + E), indem ich mit der rechten Maustaste auf das Bild klickt und “In Webalben hochladen” wählt (siehe Bild 4).

Durch einen kleinen Trick, könnt Ihr das SkyDrive auch direkt im Explorer einbinden. Dieses Laufwerk könnt Ihr dann benutzen, als wäre es auf Eurem heimischen PC. Ihr könnt also per “drag und drop” oder kopieren+einfügen auf das SkyDrive zugreifen. Das Ganze geschieht über WebDAV. Wie der Dienst unter Windows 7 und Windows Vista eingerichtet wird, hab ich im früheren Artikel “Blog per WebDAV sichern” beschrieben. Dort gibt es auch einen Workaround für evtl. auftretende Probleme.

Es ist am einfachsten, wenn Ihr Euch zusätzlich Microsoft 2010 beta Paket installiert, das Ihr bis Oktober 2010 kostenlos nutzen könnt.

Ihr öffnet eine Word-Datei mit Word 2010 und wählt

1. Datei
2. Freigeben
3. Speichern auf SkyDrive

Nach dem Einloggen seid Ihr mit Eurem SkyDrive verbunden. Ihr wählt den Ordner, in den Datei hochgeladen werden soll. Für diesen (einmaligen) Zweck nehmen wir einen öffentlichen (freigegebenen) Ordner. Nach kurzer Wartezeit (Windows verbindet sich mit dem Live-Dienst) kommt der “Speichern unter”-Dialog. Dort ist die eigentliche Adresse des Online-Speichers hinterlegt. Wir kopieren die Adresse mit der rechten Maustaste – siehe Bild 6.

Mit der Adresse im Zwischenspeicher erstellen wir nun eine WebDAV-Verbindung (siehe “Blog per WebDAV sichern“) . Hier in aller Schnelle: Im Explorer auf “Netzlaufwerk verbinden”, einen Laufwerksbuchstaben angeben und den soeben kopierten Pfad als Adresse eingeben. Benutzerkennung und Passwort können wir (auf Wunsch) speichern, damit es nicht jedes Mal abgefragt wird. Außerdem könnt Ihr festlegen, ob der Online-Ordner auch beim nächsten Windows-Start zur Verfügung stehen soll (was zu empfehlen ist).

Das war’s auch schon -
ab sofort ist ist Euer Skydrive im Explorer eingebunden (siehe Bild 7).

2. SkyDrive mit Gladinet im Explorer einbinden

Ihr verfügt bereits über ein SkyDrive-Konto (wie beschrieben) und ladet Euch die kostenlose Software “Cladinet Cloud Desktop” herunter (aktuelle Version 1.4). Nach der Installation startet Ihr das Programm. Ihr werdet gefragt, ob Ihr die kostenlose Version oder die Premium-Version (gebührenpflichtig) verwenden sollt. Die kostenlose Alternative (mit 1000 Dateiübertragungen pro Auftrag) sollte zunächst genügen.

Anschließend seht Ihr, welchen Applikationen per Cladinet im Explorer eingebunden werden können. Es ist wirklich erstaunlich, wie komfortabel und umfangreich dieses Programm ist. So könnt Ihr neben dem SkyDrive auch Google Docs und Picasa sowie Amazon S3, FTP und WebDAV-Laufwerke anlegen – und noch zahlreiche weitere.

Zunächst wird der Gladinet-Client auf dem gewählten Laufwerksbuchstaben  installiert (hier: “y”). Öffnet ihr dieses Laufwerk im Explorer, so steht Euch dort die eben erzeugte Datei “klick to mount” zur Erstellung der Verbindung zur Verfügung (siehe Bild9). Selbstverständlich könnt Ihr weitere Laufwerke mit beliebigen Verbindungen auch nachträglich hinzufügen. Wie auch immer: Ihr wählt “Mounting Virtual Directory” und werdet im folgenden nach Euren SkyDrive-Zugangsdaten gefragt (siehe Bild 10). Nach zweimaligen Bestätigen und der Frage, ob Ihr Eure Dateien auf der Cloud sichern wollt, wird das Laufwerk gemountet und steht im Explorer unter “y” (dem Gladinet-Clienten) zur Verfügung (siehe Bild11).

Fazit

Je länger ich für diesen Artikel recherchiere, ihn vorbereite und nun schreibe (mittlerweile auch schon den ganzen Nachmittag), desto mehr fällt mir auf, wie genial diese Dienste sind. Durch die Integration der unterschiedlichsten Online-Dienste im Explorer wird einem erheblich das Leben erleichtert.

Minimalisten, die nicht gerne zu Gladinet greifen, stellen eine WebDAV-Verbindung her. Durch beide Lösungen seit ihr jedenfalls in der Lage, externe Dienste derart im Explorer zu integrieren, als seine diese Laufwerke auf eurem Computer. Kopieren+Einfügen funktioniert ebenso wie drag&drop. Es muss auch nicht unbedingt “SkyDrive” sein. Stellt Euch doch mal vor, wie geil es ist, im Explorer die  auf ftp-Daten Eures Blogs zugreifen zu können. Datenspeicherung. Überall auf Deine Musik zugreifen zu können. Die eigene Bildergalerie oder eine Diashow. Auf Wunsch auch stets im Explorer. Die Möglichkeiten sind schier unbegrenzt.

So …. nun kommt die Melodie von “Die Sendung mit der Maus” …. und das nächste Mal zeige ich Euch, wie Ihr Eure Skydrive-Fotoalben auch in den Blog integrieren könnt

Wenn Euch das Lied gefallen hat, so freue ich mich über Eure Kommentare. Auch kritische Gegenstimmen sind Willkommen. Selbstverständlich werden hier auch Eure Fragen beantwortet. Wie schaut’s aus – habt ihr Lust auf soetwas? Was macht ihr denn so?

zu Hause haben wir eine Baustelle und im Blog sieht es ebenso aus: Das Theme wurde komplett neu aufgesetzt (auch wenn es äußerlich fast so aussieht als bisher). Es hakt noch an vielen Stellen und einiges muss noch optimiert werden. Doch nun ist es endlich soweit, dass ich wenigstens  mal wieder Content liefern kann.

Im Zuge der Optimierungsarbeiten überlegt ich mir auch, welcher “Lightbox-Effekt”  im Blog eingebaut werden soll. Die Frage ist durchaus berechtigt, denn Lightbox ist nicht gleich Lightbox. Oftmals ist es auch eine “Heavybox”, deshalb kommt es durchaus darauf an, dass man den “passenden” Effekt wählt.

Das t3n-Magazin ist um eine Attraktion reicher: Dort gibt es nun eine Community, bei der Ihr Fragen zu den Themen  Web 2.0, Open Source, Webentwicklung oder E-Business stellen oder beantworten könnt. So stellte ich dort vor ein paar Tagen auch eine Frage, die dankenswerterweise glänzend beantwortet wurde:

Was haltet Ihr von Lightbox-Effekten für Bilder im Blog? Alles Quatsch oder schicke Garnitur?

Welche sind bei Euch im Einsatz? Kennt Ihr empfehlenswerte Scripte?

Thomas Quensen meinte, ein Lightbox-Effekt sei besser als das große Bild auf einer neuen Seite anzuzeigen oder garnicht anzubieten. Dieser Meinung schließe ich mich vollkommen an. Jedenfalls nannte er einen Link zu einem Projekt, bei dem zahlreiche Lightbox-Effekte in einer Tabelle aufgelistet sind.

Was ist der “richtige” Lightbox-Effekt für mich?

In der o.g. Tabelle ist auch aufgelistet, welche Javascript-Dateien für die zahlreichen Lightblox-Clone jeweils erforderlich sind. Das Ganze sieht so aus (bei der Gelegenheit könnt Ihr meinen “Lightbox-Effekt gleich anschauen und Euren Senf dazu abgeben, wenn Ihr möchtet):

Lightbox-Effekte im Überblick (klicken zum Vergrößern)

Nun kommt es darauf an, ob Ihr einfach mal wild drauf los poppen wollt, oder ob Ihr Euch überlegt, welche Skripte bei Euch ohnehin aktiv sind. Denn viele Themes und Plugins erfordern für mehr oder weniger hilfreichen Schnickschnack einiges an Javascript-Power. So hatte ich vor einiger Zeit noch das WordPress-Plugin “Lightbox 2” aktiv, das neben den ohnehin vorhandenen Skripten (Lightbox.js und Lightbox-resize.js) noch 172k Prototype.js + Scriptaculous.js ludt. Das war eigentlich total unnötig, denn für andere Lightbox-Effekte war der vorhandene Blog viel besser geeignet. Meine Wahl fiel auf Fancybox, das neben dem hauseigenen Skript nur noch jquery.js benötigt, das bei mir ohnehin aktiv ist. Für Fancybox gibt es übrigens auch ein WordPress-Plugin, das allerdings entbehrlich ist. Eine weitere Beschreibung des nachfolgend vorgestellten Effekts findet Ihr bei Caschy.

Schaut am Besten mal in Eurem Blog nach, welche Javascript-Dateien mit Lightbox-Effekt und welche ohne Lightbox-Effekt geladen werden. Hierfür gibt es zahlreiche Tools und Programme, die ich im Artikel “Blogladezeiten optimieren” vorgestellt habe.

Fancybox in WordPress einbinden

Das ist eigentlich nicht so schwer und wird auf der Herstellerseite auch gut erläutert. Ich fasse das ma ganz schnell zusammen:

1.) Javascript Dateien, Stylesheets und Bilder hochladen

2.) Javascript einbinden

im Normalfall in der header.php:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>

Nach “src” tragt Ihr natürlich Euren eigenen Pfad ein (aus Schritt 1). Vergewissert Euch, ob jquery.js aktiv ist – falls nicht, bindet Ihr es gleichfalls ein.

3.) Stylesheet einbinden

ebenfalls im Normalfall in der header.php:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

Auch hier tragt Ihr wieder Eure eigene Adresse ein. Die Stylesheet verweist u.a. auf  die Grafikdateien, die Ihr im Schritt 1 hochgeladen habt. Ggf. müsst Ihr die Datei noch bearbeiten, wenn die Grafikdateien in einem anderen Ordner gesteckt habt.

4.) “Popups” im Beitrag richtig verlinken

Damit sich der Pop-Effekt auch auswirkt, müsst Ihr die Bildverweise auch richtig verlinken.  Ihr fügt einfach das Attribut rel=”fancybox” hinzu. Das sieht dann beispielsweise so aus:

<a rel="fancybox" href="http://www.plerzelwupp.de/wp-content/uploads/2010/02/Lightbox01.png">

Damit Ihr das nicht jedes Mal machen müsst und Fancybox auch auf die vorhandenen Bildverweise anspringt, solltet Ihr noch eine passende Regel hinzufügen. Folgenden Code hab ich aus dem oben verlinkten Plugin geklaut:

<script type="text/javascript">
	jQuery(document).ready(function($){
		var select = $('a[href$=".bmp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".BMP"], a[href$=".GIF"], a[href$=".JPG"], a[href$=".JPEG"], a[href$=".PNG"]');
		select.attr('rel', 'fancybox');
		select.fancybox();
	});
</script>

Das war’s auch schon. Ab sofort könnt Ihr munter drauf los poppen.

Anwendungsmöglichkeiten von Fancybox:

Die Anwendungsmöglichkeiten sind sehr vielfältig. Es kann eine kleine Bildergalerie sein, die man dann auch durchklicken kann, oder einfach nur ein Textlink sein. z.B.

Ein paar Bilder (Beispiele):

• Bild 1: Herbst
• Bild 2: Urlaub in Kambodscha
• Bild 3: Singapore von oben
• Bild 4: Mein Kamel hat AUA
• Bild 5: Plerzelwupp bei Nacht

Auch Youtube Videos können eingebettet werden:

Hier könnt Ihr beispielsweise sehen, wie es bei mir zu Hause zugeht:

plerzelwupp (Oliver) bei den Bunnies

Für Youtube Videos ergänzt Ihr ganz einfach den Code (z.B. in der header.php), der auf der Seite von Fancybox dargestellt wird und ergänzt Eure Youtube-Verlinkung mit dem Attribut id=”tip4″.

Workaround bei Problemen

Falls der Effekt bei Euch ausbleibt, dann vergewissert Euch, dass die Stylesheet-Datei und Javascript ordnungsgemäß eingebunden sind. Benutzt hierfür eines der genannten Hilfsmittel aus dem oben verlinkten Artikel.

Vergewissert Euch außerdem, dass die Bilder in der Stylesheet ordnungsgemäß verlinkt sind.

Wenn es immer noch nicht geht erhaltet Ihr mit Firebug möglicherweise die Fehlermeldung:

jQuery: “$ is not a function”

In diesem Fall ersetzt Ihr im Javascript-Code sämtliche $-Zeichen durch “jQuery” und stellt die Codezeile jQuery.noConflict(); voran. der Code für obiges Youtube-Video lautet dann wie folgt:

<script type="text/javascript">
jQuery.noConflict();
jQuery("#tip4").click(function() {
	jQuery.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'easingIn'		: 'easeOutBack',
			'easingOut'		: 'easeInBack',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
</script>

So etwas wie ein Fazit

Wenn Ihr Bilder nicht auf eine neue Seite verlinken wollt, dann sind Lightbox-Effekte unerlässlich. Für welchen Effekt Ihr Euch entscheidet, bleibt natürlich Euch überlassen. Doch sollte bei der Wahl beachtet werden, dass es von Vorteil ist, einen Effekt zu wählen, dessen Skripte ohnehin am Laufen sind (für die “Kurzleser”: Das ist oben näher erläutert).

Natürlich eigenen sich auch Plugins – es gibt jede Menge davon; für die unterschiedlichsten Blogsysteme. Doch ich denke, mit der o.g. Liste seid Ihr besser bedient. U.a. auch deswegen, weil sich die Javascript-Dateien besser steuern lassen und ggf. zusammengefügt werden können. Doch darüber schreibe ich das nächste Mal.

Benutzt Ihr eigentlich solche Effekte? Was haltet Ihr davon? Hab ich Euch ein klein wenig inspiriert? Habt Ihr Lust auf poppende Bilder in Eurem Blog? – Ich freue mich über Eure Kommentare.

Foto: “Paarungszeit” © Bernd Boscolo / PIXELIO (beschnitten)

Oftmals sind die Gravatare sehr schnell da – doch es kommt auch sehr häufig vor, dass der ein oder andere Gravatar mal “hängt”. Außerdem gibt es eine gewisse Abhängigkeit von der Verfügbarkeit des Gravatar-Servers.

Warum also die Gravatare nicht cachen?

Nun, die Idee ist ja nicht neu. Dazu gibt es mehrere Anleitungen und/ oder Plugins im Netz. Doch so richtig funktioniert hat nichts von alledem. Da erinnerte ich mich an Tanja, die mit Ihrem Cache-Skript so allerlei Anwendungsmöglichkeiten aufzeigte. Das Skript kann, in jeweils abgewandelter Form, für zahlreiche Cache-Lösungen herangezogen werden. Man muss nur erfinderisch sein. Ob Ihr nun Widgets cachen wollt, “related Posts” oder den ganzen Kommentarbereich – hier seid Ihr richtig!

Jedenfalls hatten wir einen Dialog und wenige Tage später wandte sich Tanja per E-Mail an mich. Sie habe eine Gravatar-Cache-Lösung und ich solle es gleich ausprobieren. Das hat allerdings nicht auf Anhieb geklappt – in einem zweistündigen Telefonat haben “wir” es dann doch zum Laufen gebracht. Über die Hintergrunde werde ich nach Vorstellung des Skripts noch eingehen. Lest Euch zuerst alles durch, bevor Ihr anfangt.

Was bedeutet denn überhaupt “Gravatar-Cache”?

Die Gravatare Eures Blogs, die anhand der E-Mail-Adresse der Kommentierenden von gravatar.com geholt werden, werden “gefangen” und auf Eurem eigenen Host (als Kopie) abgelegt. Im Standard-Zustand des nachfolgend vorgestellten Skriptes werden die Gravatare vier Wochen lang gecached. Das heißt: Ein einmal von gravatar.com geladener Gravatar in Eurem Blog wird fortan nicht mehr von gravatar.com , sondern von der Kopie auf Eurer Domain (Eurem Wenhoster) geholt. Ihr könnt Euch selbst davon überzeugen: Je nach Browser kann dies in aller Regel per Klick mit der rechten Maustaste auf einen Gravatar in meinem Kommentarbereich überprüft werden. Im Kontextmenü gibt es einen Eintrag “Grafikadresse kopieren” (Firefox), “Eigenschaften” (Internet Explorer 8), “Bild-Adresse kopieren (Opera)” oder “Bild-URL-kopieren” (Chrome 4).

Doch genug der langen Worte – schreiten wir zur Tat.

Gravatare cachen

1. Cache-Ordner anlegen

Ihr legt direkt in das Root (also in der obersten Ebene des ftp-Verzeichnisses) einen Ordner “z-cache” an. Darin legt Ihr einen weiteren Ordner “gravatar” an. Im gravatar-Ordner legt Ihr wiederum einen Ordner “images” an. Alle drei genannten Ordner bekommen die Rechte 777.

2. comments.php bearbeiten

Ihr sucht den Gravatar-Aufruf der Kommentarausgabe:

<?php echo get_avatar( $comment, 60); ?>

Dieser Aufruf sollte normalerweise in der comments.php Eures Themes stehen. Es kann jedoch auch vorkommen, dass Euer Theme etwas anders arbeitet. In meinem Fall befindet sich der Aufruf beispielsweise in der functions.php. Auch die Größe “60″ kann variieren. Möglicherweise kommen bei Euch Gravatare anderer Größe zum Einsatz (bei mir sind es 50x50px). Dazu gleich mehr. Wir fahren mit der comments.php fort – ich erinnere an die obligatorische Sicherungskopie!!!

Jedenfalls löscht Ihr die o.g. Zeile und setzt stattdessen folgenden Code ein:

<?php $teil = get_comment_author_email(); //1 Teil Cachefile
	$teil = strtolower  ($teil);
	$teil = md5($teil);
	$cachefile13 = "z-cache/gravatar/".$teil.".html";
	$cachetime13 = 40320 * 60; // 40320 = 4 Wochen
	if (file_exists($cachefile13) && (time() - $cachetime13 < filemtime($cachefile13))) {
		include($cachefile13);
		//$test = date('d.m.Y H:i', (filemtime($cachefile13) + $cachetime13));
		//echo "<!-- Cache vom ".date('j. F Y H:i', filemtime($cachefile13))." - naechster Update: $test-->";
	}
	else {
	ob_start(); ?>

		<?php $text = get_comment_author_email();
		$text = strtolower  ($text);
		$text = md5($text);
		$cachefile21 = "z-cache/gravatar/images/".$text.".png";
		$grav_img = "http://www.gravatar.com/avatar/".$text."?s=60&d=wavatar&r=G";

		ob_start();
		$fp = fopen($grav_img, "rb");
		fpassthru($fp);
		fclose($fp);
		$file = ob_get_contents();
		ob_end_clean();

		$fp = fopen($cachefile21, "wb+");
		fwrite($fp, $file);
		fclose($fp); ?>

		<img alt="" src="http://www.plerzelwupp.de/<?php echo $cachefile21;?>" height="60" width="60" />

		<?php //echo get_avatar( $comment, 60); ?>

	<?php $fp = fopen($cachefile13, 'w'); // Cache 2. Teil
	fwrite($fp, ob_get_contents());
	fclose($fp);
	ob_end_flush();
	} // Cache Endefile ?>

• Wenn Ihr Gravatare anderer Größe verwendet, ändert Ihr die Zahl “60″ in den Zeilen 18, 31 (2x) und 33 entsprechend.

• Die Webadresse in Zeile 31 müsste Ihr auf Euren Blog umstellen.

• Die Zeilen 1-12 leiten den Cache ein, die Zeilen 35-39 schließen ihn wieder. In eventuellen Test-Szenarien löscht Ihr diese Zeilen und schaut, ob der Kern funktioniert. Beim ersten Aufruf einer Kommentarseite dauert die Ladezeit erheblich länger – ein gutes Zeichen: das Cache-Skript macht seine Arbeit. Vergewissert Euch im FTP-Verzeichnis, ob die neu angelegten Ordner gefüllt werden. Prüft außerdem nach, ob die geladenen Gravatare tatsächlich “bei Euch gehostet” sind.

Das war’s auch schon. Ab sofort müssten Eure Gravatare gecached werden! Doch erinnert euch an meine Worte: Lest erst mal weiter – insbesondere, was die Funktion fopen() betrifft.

Workaround: Mögliche Fehlerquellen erkennen

Arbeitet das Skript noch nicht richtig?

Die beiden auskommentierten Zeilen 8 und 9 sind zu Testzwecken eingerichtet. Aktiviert diese Zeilen bei den ersten Aufrufen und setzt dabei zusätzlich die Zeit in Zeile 3 auf 1 (anstatt 40320). Vergewissert Euch, ob der Cache auch funktioniert, indem Ihr nun den Quelltext öffnet und nach “cache vom….” sucht. Da müsste nun die richtige Zeit stehen.

Wenn Ihr den Cache per FTP wieder löschen wollt, empfiehlt es sich, zuvor die Caching-Funktion zu deaktivieren: Durch Auskommentieren oder Löschen der o.g. Zeilen (1-12 und 35-39). Nach dem Löschen des Caches aktiviert Ihr diese Zeilen wieder.

Die Sache mit fopen(): Es kann sein, dass Euer Hoster diese Befehle nicht unterstützt. Ob diese Funktionen bei Euch aktiviert sind erfahrt Ihr, wenn ich Euch eine kleine info.php bastelt. Dazu erstellt eine Textdatei mit folgendem Inhalt:

<?
phpinfo();
?>

Ihr speichert diese Datei dann unter info.php ab (aus die Dateiendung achten) und legt sie dann per ftp in Euer Heimverzeichnis. Mit dem Browser steuert Ihr diese Seite dann an – z.B. http://Eure-Domain/info.php

Dort sollten “allow_url_fopen” und “allow_url_include” Funktionen auf “on” stehen.

Bei mir war das zunächst nicht der Fall. Also wandte ich mich an den Kundensupport von 1&1. Nach erfreulich geringer Wartezeit erklärte mir ein kompetenter Mitarbeiter, dass diese Funktionen für externe URLs standardmäßig gesperrt ist. OK, soviel wusste ich auch. Ich wusste auch, dass diese Funktionen durch Bearbeitung der “php.ini” aktiviert werden können (bei mir war jedoch keine php.ini vorhanden – ‘dachte, ich käme nicht dran). Was ich aber nicht wusste: Bei meinem Hoster ist es erlaubt, solch eine php.ini zu erstellen. Der entsprechende Befehl zur Aktivierung der beiden Funktionen lautet:

allow_url_fopen=1
allow_url_include = on

Das Datei wird php.ini genannt und kommt sowohl in das Root, als auch in den Script-Ordner.

Wenn diese Funktionen bei Euch nicht unterstützt werden lohnt es sich auszuprobieren, ob Ihr auch eine php.ini erstellen oder eine bereits vorhandene modifizieren könnt. Ansonsten lohnt sich ein Anruf beim Hoster. Erklärt den Mitarbeitern, was Ihr vorhabt und was Ihr mit den Funktionen machen wollt. Vielleicht sind sie gnädig.

Übrigens: Falls url_fopen nicht unterstützt wird, merkt Ihr das auch, wenn statt denn Gravataren “fehlerhafte Bilder” angezeigt werden. Öffnet dazu eine der gecachten png-Dateien mit einem Texteditor (unter z-chache/gravatar/images). Dort müsste eine Fehlermeldung stehen – in der Art: Warning fopen(…Url….)…. failed to open stream: HTTP wrapper does not support writeable connections in … on line ……

Fazit

Die Ladezeiten der Artikel-Ansichten (mit Kommentaren) sind deutlich stabiler und schneller geworden. Kommt ein Besucher, dessen Gravatar bereits gecached ist, erhält beim neuerlichen Kommentieren die Cache-Version seines Gravatars. Meines Erachtens ist dieses Skript eine glänzende ALternative zu einem entsprechenden Plugin.

Vielleicht hab ich Euch ein wenig auf den Geschmack gebracht? Habt Ihr schonmal die gravatar-Ladezeiten beobachtet? Euch mit diesem Thema schon beschäftigt? Lust, das mal auszuprobieren? gerne gebe ich Hilfestellung.

Ich freue mich über Eure Kommentare

Nachtrag vom 16.02.2010

Jeffrey vom infoblog.li hat sich der Sache nun ebenfalls angenommen und das Skript noch erweitert bzw verfeinert. Die Gravatare können nun per Skript aktualisiert werden, was den Vorteil hat, das Alter der gecachten Gravatre nicht ständig auslesen zu müssen.  Das Skript könnte dann (beispielsweise über Nacht) per cronjob gestartet werden.  Jeffreys Beitrag ist hier zu lesen.

Schade nur, dass mein Hoster keine cronjobs zulässt vielleicht gibt es in dieser Hinsicht Vorschläge(?)

Um eins gleich vorwegzunehmen: Es geht hier nicht um xml-Sitemaps für Suchmaschinen Google & Co, sondern um eine Seitenübersicht  Eures WordPress-Blogs: Ein strukturierter Überblick Eurer Artikel, sortiert nach Kategorien. Ein toller Service für Eure Leser und Besucher.

Zunächst dachte ich, solch eine Sitemap wird ohnehin nicht geklickt, doch mittlerweile bin ich vom Gegenteil überzeugt: Die Sitemap wird geklickt! Meines Erachtens  sollte die Sitemap ein fester Bestandteil eines ordentlichen Internetauftritts sein.  Sie trägt zur Benutzerfreundlichkeit bei und schafft einen Überblick über den kompletten Blog. Wie so eine Sitemap aussieht, könnt Ihr hier sehen; wie sie erstellt wird, erfahrt Ihr im Folgenden.

Dies ist übrigens der dritte Beitrag in Folge zum Thema “xyz ohne Plugin” – irgendwie bin ich im Zuge der Serie “Blogladezeiten optimieren” in eine Art Blutrausch verfallen. Zahlreiche Plugins mussten einer händischen Methode weichen. Aber keine Angst: In den letzten beiden blogfreien Wochen hab ich genug Stoff für weitere Themen gesammelt

Lösung 1 – für Faule: Plugin

Wer es einfach und unkompliziert mag, erstellt eine Sitemap unter Zuhilfenahme eines Plugins. Empfehlenswert in diesem Zusammenhang ist das Plugin “Sitemap Generator for WordPress“. Es wird installiert wie jedes andere Plugin auch, unter Einstellungen/ DDSitemapGen modifiziert und an jeder x-beliebigen  Stelle im Blog unter Angabe des folgenden Codes zum Vorschein gebracht:

<!-- ddsitemapgen -->

Dieses Plugin war lange Zeit bei mir im Einsatz und verrichtete brav seine Dienste. Doch relativ leicht geht es auch ohne Plugin.

Lösung 2: Kategorien einzeln ausgeben

Wer nur wenige Kategorien hat, kann diese auch gezielt auslesen lassen. Dabei könnt Ihr nach folgendem Prinzip vorgehen:

Überschrift – Kategorie1

• Code zum auslesen der Kategorie 1

Überschrift Kategorie 2

• code zum Auslesen der Kategorie 2

usw……..

Bei dieser Herangehensweise erstellt Ihr für die Sitemap eine eigene Vorlage (“Template”). Am geschicktesten verwendet Ihr dafür die page.php eures Themes, kopiert diese und gebt der kopierten Datei den neuen Namen “sitemap.php”. Mit einem Editor (wie beispielsweise notepad++) bearbeitet Ihr diese Datei. Gleich am Anfang der Datei fügt Ihr folgende Zeilen ein:

<?php
 /*
 Template Name: Sitemap
 */
 ?>

Damit Euere WordPress auch “weiß”, dass es sich um ein Template mit dem Namen “Sitemap” handelt. Ursprünglich war das Template (eine Art “Schablone”) dazu gedacht, eine statische Seite auszugeben. Der Seiteninhalt wird in aller Regel mit dem Aufruf <?php the content(); ?> geholt. Nun wollen wir unsere Sitemap aber nicht mit Inhalten mit Content, sondern mit unserem eigenen Code füllen, deshalb löscht Ihr diese Zeile ganz einfach.

An diese Stelle kommt dann Euer Code zum Auslesen einer einzelnen Kategorie, den ich in abgewandelter Form von Frank Bültge “geklaut” habe:

<ul><h3>Beitr&auml;ge aus der Kategorie "Anleitungen"</h3>
<?php
$MyCat_Content = get_posts('numberposts=10&category=3');
$MyCat_Echo = '';

if (is_array($MyCat_Content)) {
 foreach ($MyCat_Content as $post) {
 $MyCat_Echo .= '<li><a href="' . get_permalink($post->ID) . '" title="' . $post->post_title . '">' . $post->post_title . '</a> (' . mysql2date('d. M Y', $post->post_date) . ')</li>';
 }
}
echo $MyCat_Echo;
?>
</ul>

In Zeile 1 befindet sich die Überschrift und der Name der Kategorie.

In Zeile 3 könnt hier hinter “numberposts” angeben, wieviele Artikel aus der Kategorie geholt werden sollen. In diesem Beispiel sind es die letzten 10 Beiträge – Ihr könnt aber auch beliebig mehr (oder weniger) angeben.

Wichtig ist noch die Kategorie-ID, die ebenfalls in Zeile 3 eingegeben wird. Im obigen Beispiel hat die Kategorie “Anleitungen” die ID-Nr. 3. Welche ID die jeweilige Kategorie hat, erfahrt Ihr im WordPress Frontend: Unter Artikel/ Kategorien werden Eure Kategorien aufgelistet. Wenn Ihr mit der Maus über die gewünschte Kategorie fahrt, seht Ihr in der Fußleiste die dazugehörige Adresse.  Das sieht in etwa so aus:

http://www.plerzelwupp.de/wp-admin/categories.php?action=edit&cat_ID=3

Alternativ könnt Ihr den Link auch in die Zwischenablage kopieren und an anderer Stelle ausgeben.

Das war’s auch schon. Das selbe macht Ihr dann mit den anderen Kategorien auch.

Wenn Ihr mit eurem Template fertig seid,  müsst Ihr zuguterletzt  eine statische Seite erstellen (Seite / erstellen). Diese nennt Ihr “Sitemap”. Ihr braucht hier keinen Content einzugeben. Wichtig ist nur, dass Ihr das richtige Template auswählt. Wenn Ihr alles richtig gemacht habt, müsste unter “Template” Eure Sitemap aufgelistet sein.

Das war’s auch schon! Ist doch nicht so kompliziert, oder?

Viel Spaß beim Nachmachen

Lösung 3: Sitemap komplett ausgeben lassen

Auf diese Methode möchte ich eigentlich nicht näher eingehen, denn sie wird bei obenlands.de eingehend erläutert. Die Herangehensweise ist die gleiche, jedoch mit anderem Code.

Unglücklicherweise hat das bei mir nicht zu 100% funktioniert: Die Kategorien wurden nicht vollständig ausgelesen. Das mag auch daran liegen, dass ich Kategorien im Laufe der Zeit umbenannt habe.

So etwas ähnliches wie ein Fazit

Für welche der drei Methoden Ihr Euch entscheidet könnt Ihr Euch selbst aussuchen. Wenn Ihr Euer Blog nicht über allzu viele Kategorien verfügt, könnt Ihr gerne die Methode 2 ausprobieren. Der Aufwand ist viel geringer als es zunächst aussehen mag. In wenigen Minuten verfügt Ihr über eine Sitemap. Das Ganze ohne Plugin. Wenn Ihr wollt, könnt Ihr Euch die Ausgabe auch nach Tanjas Methode cachen – das schont den Server und spart  etwas Zeit.

Wie schaut’s denn mit Dir aus? Hast Du schon eine Sitemap? Wie denkst Du darüber? Sollte eine Angeboten werden?

Wenn Ihr “nachbasteln” wollt, helfe ich (wie immer) gerne weiter, wenn es mal haken sollte. Ansonsten freue mich auf Eure Kommentare.

Foto: “Ein Herz für Bücher” © BirgitH / PIXELIO

Im Rahmen der Serie "Blog-Ladezeiten optimieren" recherchierte ich auch in Richtung "Pluginfreie Zone". Das ist natürlich etwas übertrieben, denn ganz ohne Plugin geht es nicht, doch lassen sich viele Aufgaben durch Alternativen ersetzen, die das ein oder andere Plugin überflüssig werden lässt.

Als erstes musste das Kontakt-Formular-Plugin weichen. Stattdessen ist nun ein pluginfreies Kontaktformular eingebunden,  das die zugesandten E-Mails automatisch in ein Google-Spreadsheet einfügt. Bei dieser Lösung ist die Benachrichtigungsfunktion übrigens in beide Richtungen aktiviert. René liefert hierzu eine glänzende Beschreibung.

Hurra, wieder ein Plugin gespart. Nun sollte es dem nächsten an den Kragen gehen, da fiel mir "WP-Polls" in's Auge. Mit jedem Blogaufruf wurde dieses  Plugin geladen, ob es benötigt wird oder nicht. Das war umso ärgerlicher, da ich lediglich zwei Umfragen im Blog gestartet habe.  Nun, WP-Polls ist zwar durchaus praktisch und gefällig im Funktionsumfang, doch es ist auch etwas behäbig.

Aber es geht ja auch ohne WP-Polls (oder ähnlichen Plugins) – und zwar auch hier wieder mit Google Text und Tabellen. Im Folgenden möchte ich beschreiben, wie das funktioniert und was dabei zu beachten ist.

Google Formular für Umfrage nutzen

Wir loggen uns bei Google-Text und Tabellen ein und erstellen ein neues Formular.

Wir landen im Bearbeitungsmodus für Formulare. Das vorgegeben Formular können wir gleich mal per Klick auf den Mülleimer löschen. Stattdessen legen wir ein neues Formular an.

Nun kommt es darauf an, welchen Formulartyp wir erstellen wollen. Unter "Element hinzufügen" treffen wir unsere Wahl. Für eine Umfrage eignen sich die Typen
1.) Auswahlfrage 2.) Ankreuzen 3.) Aus einer Liste wählen 4.) Skala 5.) Gitter

Damit Ihr gleich einen Überblick habt, was die verschiedenen Umfragetypen bewirken, hab ich hier mal einen Screenshot zusammengestückelt:

Das Erstellen dieser Formulare ist relativ selbsterklärend. Die Auswahlfrage (1.) sieht im Editor folgendermaßen aus:

Pflichtfragen werden übrigens mit einem Sternchen versehen und entsprechend gekennzeichnet.

Habt ihr Eure Umfrage erstellt, könnt Ihr noch eine Bestätigungstext eingeben, der nach dem Voten erscheint -  à la "Vielen Dank, dass Du abgestimmt hast, Deine Stimme wurde gezählt".

Außerdem gibt es unter "Bestätigung bearbeiten" noch die Option "Antwortzusammenfassung allen anzeigen".  Ist diese Option aktiviert, wird den Votern nach der Stimmangabe das derzeitige Umfrageergebnis angezeigt. Wollt Ihr das Umfrageergebnis in einem Standard-Kuchendiagramm darstellen, so aktiviert diese Option. Das ist die einfachste Möglichkeit. Wollt Ihr  aber Euer eigenes Diagramm basteln (Balken, Säulen, punkte, Linien, bunt, einfarbig, usw.), so lasst Ihr diese Option deaktiviert. Doch dazu später mehr.

Nach  Klick auf "In Webseite/Blog einbinden" erhaltet Ihr  jedenfalls den Code (iframe), den Ihr dann in Eurem Blog einbaut. Im iframe-Code könnt Ihr dann noch die Breite des Frames den Bedürfnissen Eures Blogs anpassen.

Live sieht das dann so aus – Ihr dürft gerne Voten Wie oben schon erwähnt, werden auch die Ergebnisse des Votings nach Klick auf  "siehe vorherige Antworten" in einem Standard-Kuchendiagramm dargestellt

Wo werden die Daten der Abstimmung gesammelt?

Tatsächlich steckt hinter dieser Umfrage bzw dem Formular eine Google-Tabelle, die Ihr natürlich auch aufrufen könnt. Diese Tabelle wird automatisch mit dem Formular erstellt und Ihr könnt Sie vom Dashboard (Google Text- und Tabellen) aufrufen. Hier ist ein Screenshot der Tabelle des obigen Formulars:

Eigenes Diagramm für Umfrageergebnisse erstellen

Der Gedanke, der dahinter steckt ist folgender: Ihr erstellt eine Umfrage, lasst das Ergebnis aber nicht anzeigen (die Option "Antwortzusammenfassung allen anzeigen" ist deaktiviert!). Stattdessen erstellt Ihr ein Diagramm Eurer Wahl, füttert es mit den Daten der o.g. "Google-Tabelle" und blendet dieses zusätzlich ein. Am besten Ihr erstellt eine Hilfstabelle in einem weiteren Tabellenblatt, in dem Ihr die Ergebnisse des Original-Tabellenblattes tabellarisch auswertet. Aus der Hilfstabelle wird dann das Diagramm erstellt, das Ihr freigebt und einbettet. Zur Verdeutlichung ein Screenshot:

Wie Ihr seht, genügt eine einfache "COUNTif-Abfrage" (analog Excels "Zählenwenn"): Zähle mir, wie oft der Begriff aus Zelle A2 in der Spalte B des anderen Tabellenblatts vorkommt.

Aus dieser Tabelle klöppelt Ihr dann Euer Diagramm. Die Möglichkeiten sind beinahe unendlich. Auf die Schnelle hab ich für obiges Beispiel ein Balkendiagramm erstellt und eingebunden:

Sogar Gadgets sind möglich, die auf der Google-Startseite angezeigt werden. Diese Gadgets könnt Ihr auch im Blog einbinden. Es ist natürlich alles Spielerei; hier jedenfalls das Ergebnis der obigen Umfrage als "Anzeigetafel". Diese Gadgets werden aktualisiert, sobald die Seite neu geladen wird.

Eure Meinung

habt Ihr vielleicht schon mit der obigen Umfrage kund getan. Ich freue mich aber auch über Kommentare

Wer noch mehr Spielereien mit Google-Spreadsheets ausprobieren möchte, dem sei auch mein früherer Artikel empfohlen: Wikipedia-Tabellen in Google Spreadsheet importieren und in Google-maps darstellen.

Mach Deinem Blog Beine

Im Web findet man so allerlei mehr oder weniger hilfreiche Plugins (für WordPress), die die Ladezeiten durch Caching und/oder Kompression beschleunigen sollen. Viele davon hab ich auch geleckt, doch keins hat mir geschmeckt. Immer wieder machten diese Werkzeuge an anderer Stelle Probleme, indem irgendwelche Bugs um Backend auftauchten. Doch dabei ist es garnicht so schwer, so einiges an Performance herauszuholen. Ganz ohne Plugin. Naja, fast zumindest – doch dazu später mehr

Ein paar weitere Tipps, um mehr Performance aus Eurer WordPress herauszuholen findet Ihr übrigens im früheren Beitrag WordPress-Hacks.

Immer wieder las ich vom neuen Feature “Webseiten-Leistung“, das in Google-Webmaster-Tools integriert ist. Nun hab ich mich endlich mal drangetraut und mich mit der Sache näher beschäftigt. Mit der Einführung des Tools ist der Verdacht nämlich nicht ganz von der Hand zu weisen, dass Google die Performance  als Kriterium bei der Beurteilung von Webseiten heranzieht. Aber vielleicht täusche ich mich da auch. Jedenfalls sind schnellere Ladezeiten auch ohne Google von erheblichem Vorteil.

Hier, im ersten Teil, möchte ich zunächst etwas über die Vorüberlegungen, die Analysewerkzeuge und einer manuellen gzip-Kompression der größten Ressourcenfresser berichten. Durch die Kompression konnte ich den Blog um einige hundert Kilobyte entschlacken. Natürlich befindet sich auch im derzeitigen Zustand noch genügend Ballast auf der Startseite, doch es ist ein Abwägen von Design, Funktion und Nüchternheit. Letztlich kann Ladezeitenoptimierung auch “Verzicht” bedeuten. Deshalb war die erste Maßnahme, die Anzahl der Artikel-Vorschauen zu reduzieren. Auch die rechte Seitenleiste wurde entschlackt. Meines Erachtens soll die Startseite einen groben Überblick und keinen Content liefern. Ein paar Eyecatcher, eine kurze Vorstellung. Der Rest ist über die Kategorie-Ansichten, der Sitemap, den statischen Seiten, dem Archiv und der Suchfunktion zu finden.

Google Page Speed

Google wartet nicht nur mit dem Lab-Dienst “Website-Leistung” auf, es gibt auch ein dazugehöriges Firefox-Plugin “Page Speed“, das als Aufsetzer zu Firebug eingesetzt wird. Letzteres ist also Voraussetzung für Page Speed.  Ebenfalls ein Aufsetzer zum bereits verlinkten “Firebug” ist das Anlaysetool YSlow. Beides Plugins sind erstklassige Helferlein bei der Analyse und der manuellen Optimierung des Blogs und unerlässlich für unser weiteres Vorgehen . Zusätzlich könnt Ihr Euch den beiden Web-Analysetools “Is my blog working?” und “Pingdom Tools” bedienen. Die Funktionsweise und Zweck des letztgenannten Dienstes wird  bei Hombertho glänzend erläutert. Darauf werde ich in den nächsten Teilen näher eingehen.

Sind die genannten Plugins installiert, wird  Firebug um folgende Karteikarten ergänzt:

Wenn Ihr PageSpeed zum ersten Mal auf Euren (nicht optimierten) Blog loslasst, kann es sein, dass die Ernüchterung groß ist. Die Ergebnisse werden als Ampel ausgegeben (wie hoffentlich auch bald bei den Lebensmitteln):

• Rot: hier besteht (nach Ansicht von Google) Optimierungsbedarf
• Gelb: nicht ganz optimals – Einstellung ggf. überprüfen
• Grün: Alles OK

Wenn da zwei oder mehr “rote Ergebnisse” ausgespuckt werden, habt Ihr durchaus Spielraum nach oben

In den nächsten Artikeln möchte ich darüber berichten, wie ich die Analysen gedeutet habe und wie ich vorgegangen bin. Dabei bin ich mir recht sicher, dass auch für Euch etwas Brauchbares dabei ist.

Wie bereits angedeutet, fange ich im ersten Teil mit der unschönen Page-Speed Meldung an:

Enable gzip Kompression

Compressing the following resources with gzip could reduce their transfer size by about two thirds

Ist der Punkt grün, braucht Ihr heute nicht weiterlesen, ist er gelb oder rot, so dürfte es Euch vielleicht interessieren, wie ich vorgegangen bin. Die Ausgabe bei YSlow ist übrigens ähnlich. Jedoch hat mir bei Page-Speed besser gefallen, dass auch gleich angezeigt wurde, um welches Volumen es bei den einzelnen Dateien geht.

Komprimierungsmöglichkeiten:

Bevor wir beginnen, legen wir eine Sicherung an, damit wir unsere Schritte im Zweifelsfall rückgängig machen können. Zusätzlich sei erwähnt, dass das Thema “Blogladezeiten” sehr heiß diskutiert wird. Nicht alle Vorschläge und Plugins führen zum richtigen Ziel. Letztendlich kostet es etwas Geduld und Spielerei, bis es zu einer gesunden Mischung kommt. Einige Überlegungen und Vorschläge sind nachfolgend aufgeführt.

1. Seitenausgabe mit Plugin komprimieren

Zur Komprimierung von Dateien und der Blogausgabe gibt es unzählige Möglichkeiten und Plugins. In diesem Zusammenhang möchte ich auf Sergejs Plugin für die Komprimierung der Beiträge  verweisen. Hier wird die Kompression der Seitenausgabe einem php-Script überlassen. Das ist vor allem dann zu empfehlen, wenn der eigene oder Shared-Host-Server keine eigene Komprimierung unterstützt. Auf gidnetwork.com könnt Ihr dann testen, ob das genannt Plugin fruchtet. Jedoch komprimiert dieses Tool keine Javascript- oder CSS-Dateien, sondern nur die Seitenausgabe.

2. Dateien serverseitig komprimieren

Wenn Euer Server das externe Erweiterungsmodul mod_deflate unterstützt, könnt Ihr auch so vorgehen wie Perun. In seinem lesenswerten Artikel beschreibt er die Möglichkeit, die verschiedenen Dateitypen serverseitig komprimieren zu lassen. Hierzu ergänzt Ihr Eure .htaccess-Datei mit folgendem Codeschnipsel:

Für mod_deflate:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

Für mod_gzip: (gefunden bei samaxes.com)

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Kim Hübel behandelte die gleiche Thematik, wie ich soeben per pingback und tweet feststellte. Auch dort gibt es einen mehrteiligen Beitrag zum Thema – Hingehen, Lesen!

Welche Dateitypen komprimiert werden sollen, könnt Ihr selbst festlegen. Allerdings ist auch hier zu beachten, dass der Server bei jeder Datei-Anfrage komprimieren muss, was summa summarum nicht immer einen Vorteil bei der Ladezeit bringen muss. Je nach Auslastung des Servers könnte sich das auch negativ auswirken (z.B. beim shared hosting). Letztendlich müssen die Dateien beim Empfänger auch noch dekomprimiert werden. Doch es ist unbedingt einen Versuch wert.

Unterstützt Euer Server kein mod_deflate oder mod_gzip, werdet Ihr nach Bearbeitung der .htaccess den Blog nicht mehr erreichen können. Es wird ein “500-Error” ausgegeben. Halb so tragisch – durch erneutes Bearbeiten der Datei ist alles wieder beim Alten. Das mit der Sicherungskopie sagte ich schon, oder?

Wer auf Nummer sicher gehen will, bastelt sich eine kleine php-Datei mit folgendem Inhalt:

<?
phpinfo();
?>

Ladet diese per ftp auf den Blog und ruft diese Datei mit dem Browser auf und informiert Euch bei der Ausgabe Eurer php-Umgebung.

3. Dateien per ob_gzhandler komprimieren

Eine weitere, halbmanuelle Möglichkeit, Dateien per php komprimieren zu lassen, wird bei phpperformance.de beschrieben. Dies wäre eine Alternative, falls das mit dem mod_deflate bzw mod_gzip nicht funktioniert. Hierzu werden die zu komprimierenden Dateien mit einem Code ergänzt. Wer sich nicht durch sämtliche Dateien durchhangeln möchte, kann das auch automatisch generieren lassen. Der Autor des o.g. Beitrags liefert hierzu auch eine schöne Lösung. Sinngemäß wird eine Datei mit dem ob_gzhandler-Code erstellt, deren Inhalt per .htaccess-Befehl an den Anfang der gewünschten Dateien gestellt wird. Es ginge aber auch per Stapelverarbeitung auf dem heimischen Rechner – so hab ich das ausprobiert.

4. CSS-Dateien als php ausgeben und komprimieren

Eine weitere Komprimierungsmethode besteht darin, CSS-Dateien in php-Dateien umzuwandeln, die dann per gzip komrimiert werden können. Das hab ich bei markensysteme.de gefunden und es hat mir ganz gut gefallen: Die Stylesheet-Dateien werden durch einem kleinen Code (am Anfang und am Ende der Datei) ergänzt und in eine php-Datei umbenannt. Die Header.php (bzw. der Verweis auf die css-Datei) muss natürlich auch auf die neu erstellte php-Datei verweisen und entsprechend abgeändert werden.

5. Code-Kompression

Diese Komprimierungsmethode lässt sich eigentlich mit allen anderen genannten Methoden kombinieren. Denn hier werden keine Dateien komprimiert, sondern deren Inhalt (Code). Hierzu gibt es verschiedene Kompressions-Generatoren.

Google Page-Speed hat entsprechende Code-Kompressoren für CSS- und js-Dateien bereits eingebaut:

Bild 3: Minify CSS- and Java-Script (Klicken zum Vergrößern)

Ihr kopiert Euch den Inhalt der “minified version” und ersetzt den Originalinhalt der jeweiligen Datei. Zum dritten Mal erinnere ich daran, vorher alles zu sichern. Im oberen Beispiel wären zwar nur 512 bytes (2 %) gespart, es gab allerdings auch ganz andere Kaliber von mehreren KB. übrigens hab ich (im obigen Beispiel) einige css-Dateien in einer einzigen zusammengefasst (test.css). Doch dazu mehr in den nächsten Teilen.

An dieser Stelle soll auch Sergejs “Code-Compressor” nicht unerwähnt bleiben. Er komprimiert js- und css-Dateien wahlweise in “basic” oder “powerfull”.

Es gibt daneben noch zahlreiche weitere Kompressoren  – doch die beiden sollten eigentlich genügen.

6. Dateien manuell komprimieren

Kommen wir zu letzten Kompressionsmethode, die ich hier vorstellen wollte. Das werde ich nun etwas ausführlicher tun, denn das ist die Methode, für die ich mich entschied. Die Methode im Schnelldurchlauf: Ihr komprimiert Eure Dateien selbst – z.B. Javascript Dateien – erstellt quasi Eure eigene gzip-Dateien und stellt diese auf dem Server bereit. Hinzu kommen ein paar Codezeilen in der .htaccess, die dafür sorgen, dass die gzippte Datei ausgegeben wird, sofern verfügbar. Diese Methode hat den Vorteil, dass Ihr:

• wisst, was geschieht
• die Originaldateien ebenfalls auf dem Server bleiben (zur Sicherheit)
• Weder Server noch php Komprimierungsarbeit leisten müssen.

Diese Methode hat den Nachteil, dass jede Datei händisch bearbeitet werden muss und geänderte Dateien (z.B. nach einem Update) nachgepflegt werden müssen. Das klingt im Moment recht erschütternd, ist jedoch viel weniger Aufwand als man glauben mag. Auch hier war Google Page Speed und YSlow behilflich. Sie zeigten mir die größten Sünder an. Nur Dateien ab einem gewissen Einsparungspotential ab ca 5kb hab ich optimiert. Das Beispiel auf Bild 4 zeigt, wie ein Bloggerkollege fast 300KB Transfergröße einsparen könnte. Der Screenshot ist einem anderen Blog entnommen,  bei mir waren es sogar fast 400KB (zwischenzeitlich optimiert).

Mit dem größten Klopper fangen wir nun an. Durch Komprimierung der Datei prototype.js könnten fast 84KB gespart werden. Wir laden die Datei per ftp auf dem heimischen Rechner und komprimieren diese mit 7-zip.

Als Komprimierungsmethode wählen wir GZip  – als Stärke hab ich “Maximum” ausgewählt:

Die neu erstellte (komprimierte) Datei hat nun die Dateiendung “gz”. Aus Kompatibilitätsgründen benennen wir die Dateiendung in “jgz” um. Also: “prototype.js.jgz”.

Diese Datei laden wir dann auf den Server – gleicher Ort wie die Ursprungsdatei.

Damit der Server auch die gezippte (und nicht die Originaldatei) ausgibt, muss die Datei .htaccess noch folgendermaßen ergänzt werden:

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz

Es wird geprüft, ob eine gepackte Version vorliegt. Ist dies der Fall, wird dies anstelle der Originaldatei ausgegeben – gefunden bei tutorialajax.com.

Abschließend bewundert Ihr das positive Ergebnis, indem Ihr Eure Seite neu ladet und eine erneute Page Speed-Analyse startet. Das könnt Ihr dann nach und nach mit den Dateien machen, bei denen sich das Einsparpotential lohnt. Bei mir waren das gerade mal ca 8 Dateien und es ist ja auch sehr schnell erledigt. Ist der Page-Speed-Haken “grün”, könnt Ihr aufhören – entsprechend ist es auch bei YSlow.

Fazit

Dargestellt hab ich sechs Kompressionsmethoden – jede hat Ihre Daseinsberechtigung. Ob und für welche Kompressionsmethode Ihr Euch entscheidet, bleibt Euch überlassen.

Erwartet keine Wunder: Kompression ist nicht alles – es gibt zahlreiche weitere Faktoren, doch dazu mehr im nächsten Teil.

Wie bereits erwähnt, kann sich Kompression auch nachteilig auswirken. Sucht Euch etwas aus, probiert, spielt und testet. So wie ich das auch (für die Startseite) getan habe. Doch seid vorgewarnt: Es geht nie zu Ende

Wenn Euch der Artikel gefallen hat und etwas interessantes für Euch dabei war, dürft hier hier gerne Euren Senf abgeben. Welche Erfahrungen habt Ihr denn gemacht? Kommt eine der Komprimierungsmöglichkeiten für Euch in Frage? Ist Euer Blog optimiert?

Foto: “Hand und Fuß” © Albrecht E. Arnold / PIXELIO

Aus der Reihe "wir schreiben einen Gastartikel für plerzelwupp" kommt heute ein Nachzügler, dem ich nicht minder dankbar bin

Hallo zusammen,

auch ich werde nun mal eine Schicht als Olivers Urlaubsvertretung übernehmen. An diser Stelle möchte ich Oliver schonmal für das entgegengebrachte Vertrauen danken und hoffe, dass ihm und natürlich auch dir als Leser mein Artikel gefallen wird. Passenderweise ist mein Name ebenfalls Oliver, daher werde ich seinen „Oliver“-Stil hoffendlich gut imitieren können.

Normalerweise schreibe ich unter dem Namen MindTaxi im gleichnamigen Blog auf http://mindtaxi.de. Ok, ich muss gestehen, dass es eigentlich gar nicht ausschließlich mein Blog ist, sondern ein Gemeinschaftsprojekt von meiner Freundin Manuela (alias Taxie) und mir.

Meine Artikel befassen sich hauptsächlich mit IT-orientierten Themen wie Computer, Internet und Technik, aber auch im Bereich Pflanzen & Kräuter habe ich ab und zu etwas mitzuteilen. Taxie publiziert dagegen hauptsächlich in den Bereichen Backen & Kochen, sowie Pflanzen & Kräuter oder sie schreibt Buchrezensionen. Aber nun genug zu meiner Person. Ich denke mal, du konntest dir eine kleine Vorstellung darüber machen, wer jetzt gerade schreibt. In diesem Gastartikel, möchte ich dir eine wirklich sehr simple Möglichkeit nahebringen, Werbung im Internet effektiv zu blockieren.

Werbung blockieren mit Bordmitteln

Wie du sicherlich weißt, gibt es zahlreiche Plugins für die verschiedensten Browser, mit dessen Hilfe man unerwünschte Werbung aus Webseiten herausfiltern kann. Was viele Menschen nicht wissen: Es geht jedoch auch noch einfacher und zwar ganz ohne den Einsatz von Zusatzsoftware. Der Vorteil der von mir vorgestellten Methode ist, dass nicht nur die Werbung beim Surfen mit dem Browser blockiert wird, sondern die gesamte Werbeauslieferung zu deinem System. Das heißt, dass so auch die Werbung im Emailclient oder im Messagingprogramm keine Chance mehr hat.

In jedem Windowssystem existiert im Ordner c:\windows\system32\driver\etc\ eine Datei namens "hosts". Falls du mit dem freien Betriebssystem Linux arbeitest, so ist diese Datei im Verzeichnis /etc/ zu finden. Die Systax ist analog zur Windowsvariante. Mit Hilfe dieser Datei, kann man einem beliebigen Hostnamen eine "feste" IP zuweisen. Der Name wird zukünftig nicht mehr per DNS aufgelöst.

Zur Erklärung für die Nicht-TI-ler: Wenn man einen Adresse im Browser eingibt, so wird zuerst in der hosts-Datei nachgeschaut, ob die Zieladresse bereits bekannt ist. Falls die Adresse nicht bekannt ist, wird der DNS-Server (Nameserver des Providers) gefragt. Dieser liefert dann die zur Adresse gehörige IP-Adresse zurück und dein Rechner kann Kontakt zum Zielcomputer aufnehmen.

Host-Datei füllen

Genau dieses Verhalten kannst du dir nun zunutze machen, indem du die Hostnamen bekannter Werbeserver in die hosts-Datei einträgst und mit der eigenen IP-Adresse 127.0.0.1 verknüpfst. Wenn jetzt eine Anfrage ins Internet geschickt wird, kann die Zieladresse (sofern es sich um eine Werbeanzeige handelt) direkt mit der lokalen hosts-Datei ermittelt werden. Da auf dem heimischen Computer im Normalfall kein Webserver installiert ist, der auf der Adresse 127.0.0.1 auf Anfragen lauscht, sollte die „umgeleitete“ Werbeanfrage ins Leere laufen und der Browser kann die Werbung nicht anzeigen.

Eine Liste mit Adressen bekannter Werbeanbieter, die gesperrt werden können, findest du hier:

http://www.mvps.org/winhelp2002/hosts.txt

Du musst sie nur noch in deine hosts-Datei einfügen.

Die Auslieferung an den Browser ist hier nur beispielsweise genannt, analog werden natürlich auch Anfragen vom Emailclient oder Messagingprogramm behandelt und entsprechend umgeleitet. Zusätzlich zum Blockieren von Werbung kannst du dieses Vorgehen auch nutzen um diverse Programme vom "Nach-Hause-Telefonieren" abzuhalten, wie es viele Produkte von Microsoft oder google gerne machen.

Je nach Anwendungsbeispiel ist jedoch für die gezieltere Anwendungskontrolle eine zusätzliche Installation einer (Desktop-)Firewall nötig. Mit Hilfe dieses Programms kannst du nun noch differenziertere Filterregeln erstellen, z.B.: Der Zugriff auf google.de auf Post 80 (normales Surfen im Internet) soll erlaubt werden, die Verbindung zu google.de auf Port 12345 jedoch nicht.

Diese Art von Filtern sind mit der von mir vorgestellten Methode nicht realisierbar, da bei der hosts-Datei nur der Domainname (also google.de) geprüft wird und nicht der Zielport, das Protokoll  oder weitere Details.

So, das wars auch schon. Ich hoffe, ich habe dir näher bringen können, dass es für manche Probleme auch ganz einfache Lösungen gibt und nicht immer unbedingt eine teure Zusatzsoftware eingesetzt werden muss.

Wir freuen uns über Deinen Besuch und Deine Kommentare

Foto: "Werben verboten" © low500 / PIXELIO