Um so schöner, dass ich ein wenig zurück geben und die Folge 32 mit meiner Person bereichen – hoffentlich – konnte. Christian und ich plaudern ein wenig über die Ereignisse der Woche, die so über die unterschiedlichen Newsstreams einfliegen und schauen uns an, wohin es gehen kann und für was es gut ist. Parallel weisen wir auch auf das WordCamp in diesem Jahr hin und ich kann einige Hintergründe erläutern.

Vielen Dank nochmal für die Einladung an die Jungs.
Hört rein, kommentiert und gebt Feedback - die Jungs machen das toll; mal sehen wann die Gästeliste endlich um weibliches Publikum erweitert wird; es gibt ja nicht nur männliche Nerds.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Innerhalb der kleinen Spielerei sind diverse Anpassungen für Media Queries drin, so dass die Seite auch einen Effekt hat, wenn man die Größe des Browsers ändert bzw. mit verschiedenen Geräten auf die Seite gelangt. Dabei habe ich keinen Wert auf Schönheit gelegt, sondern eher Pragmatismus und Effekthascherei genutzt. So nutze ich Transition via CSS3 um das Verändern etwas animiert zu gestalten und so die Darstellung zu hübschen.
Schaut euch den Code einfach an, entweder direkt auf der Seite oder im Projekt auf github, wo ich alles abgelegt habe.

Für alle, denen noch der Zusammenhang fehlt; bitte einfach die Seite besuchen und den Browser in der Größe ändern; dabei die Ausgabe am oberen Rand beachten. Alternativ dieses kleine Video.

Mir ist klar, dass dies nicht die beste Lösung ist, da Media Queries in jeder erdenklichen Form auftauchen können und die Ausgabe den größten Nutzwert hat, wenn man die Ausgabe der optimierten Größe anpasst. Aber es stellt eine einfache und schnell Lösung dar. Alternativen sind vermutlich via JavaScript denkbar, die das Stylesheet parsen und anhand der gefunden Anweisungen zu Media Queries den Viewport auswerfen – aber diese Form erfordert etwas mehr zeit und Kraft; also schnell überzogen und in meinem Fall ist die vorgestellte Lösung vollkommen ausreichend; durch die Erweiterungen von Frederic sind auch noch andere Viewports eingeflossen und in diesem Zusammenhang habe ich mir bekannte typische Größen und Ausrichtungen integriert – Portrait und Landscape. Alles weitere seht ihr in der angesprochenen debug.css und direkt auf der Seite, die den Source des Stylesheets ausgibt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Spread some developer love and promote the docs

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Um das Verständnis von git zu bekommen und damit die Arbeit zu erleichtern und kontrolliert abzuwickeln, gibt es verschieden Wege: sei es Literatur, diverse Sites im Netz - ein besonderer Leckerbissen ist sicher der Blogpost „A successful Git branching model“ - oder ein CheatSheet zur visualisierten Darstellung. Letzteres erscheint mir in der folgenden Empfehlung besonders gelungen, daher auch dieser Tipp.

Eine Auflistung diverser Cheat Sheets findet man in der Help-List von github, in der es auch eine wunderbare deutsche Version gibt.

Als weiterer Hinweis möchte auf die Folien von Mario Müller verweisen, der anschaulich den Vergleich von git und SVN zieht.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

PHP Console is extension for Lagger and class PhpConsole, that displays PHP errors/debug messages in Google Chrome console and in notification popups.

Die Aussage trifft es im Grunde auch und bei der ersten Arbeit mit der Erweiterung für den Browser und nach Integration der Klasse sieht man die Ergebnisse sehr schön.
Das Inkludieren der Klasse habe ich via Plugin gelöst, kann natürlich auch statisch in den notwendigen Stellen der entsprechenden Dateien erfolgen.
Über alle Features der Erweiterung kann man sich umfassend auf der Projektseite umsehen; ebenfalls Dokumentationen und Download ist dort zu finden.

Im folgenden einige Einblicke in die Ausgabe und vielleicht macht es Lust auf einen ersten Test oder auch mehr.

Im ersten Screenshot seht ihr die Ausgabe der PHP-Fehler, die in der Console ausgegeben werden, diese kann man gleichzeitig nach dem Load der Seite als Popup bekommen, siehe letzer Screenshot. Dazu gibt es via Kontextmenu diverse Einstellungen der Erweiterung.

Alternativ eine Ausgabe im Log, welche ich via Plugin explizit als Beispiel erzeugt habe. So ist es möglich, dass ihr eure Ausgabe steuert.

Im letzten Screenshot ein Gesamtüberblick, inklusive der popups - man hat eine sehr schöne Ausgabe aller PHP Meldungen und sollte so beim Entwickeln nichts vergessen.

Im folgenden mein kleines Plugin (alternativ bei Github zum Download inkl. aller Dateien und Ordner), wobei ich die Klasse PhpConsole.php der php-Console im Ordner inc ablege. Die Ausgabe im Log der Konsole wird über die Funktion debug() gesteuert; dabei ist es möglich, dass man einen Namen mitgibt und so die Auswertung leichter lesen kann.

<?php
/*
Plugin Name: php-console
Plugin URI: http://bueltge.de/
Text Domain: php-console
Domain Path: /languages
Description: <a href="http://code.google.com/p/php-console/">php-console</a> - Google Chrome extension for displaying PHP errors/exceptions/debug messages in browser console or notification popups
Author: Frank B&uuml;ltge
Version: 0.0.1
Author URI: http://bueltge.de/
Donate URI: http://bueltge.de/wunschliste/
License: GNU v3
Last change: 29.03.2011
*/ 

/* load php-console functionality */
require_once( 'inc/PhpConsole.php' );
PhpConsole::start( TRUE, TRUE, dirname(__FILE__) );

class Wp_Php_Console {

	public function __construct() {

		$this->messages();

		$this->get_contents( 'GNU GENERAL PUBLIC LICENSE' );
	}

	public function messages() {
		global $wpdb, $pagenow;

		debug( $pagenow, 'Var Pagenow' );
		$sql = "SELECT * FROM $wpdb->options";
		debug( $sql, 'sql-options' );
	}

	public function get_contents( $string ) {

		$content = file_get_contents( '../license.txt', NULL, NULL, 0, 100 );
		$pos = strpos( $content, $string );

		debug( $pos , 'Position' );
		if ( ! $pos )
			debug( $content, 'Content' );
	}
}

new Wp_Php_Console();
?>

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Ich habe ein freies Script erstellt, welches nichts leistet, aber die kleine Auswahl an Schriften schön demonstriert und als Umgebung nutze ich die IDE Aptana, in der ich gerne arbeite; aktuell noch Version 2.*; wobei die neue Version 3 mit vielen Features aufwartet und aktuell als Beta genutzt werden kann.

Ich habe alle Fonts mit der gleichen Größe übernommen und auch die Screenshots sind gleich, so dass ihr euch ein Bild machen könnt. Weitere Vorschläge und Vorlieben bitte in den Kommentaren.

Während ich auf dem System mit der Droid sehr zufrieden bin, nutze ich im Editor in der Regel die Monospace. Unter Windows nutze ich die Consolas, 11 Punkte Regular.

Monospace 11 Regular

Andale mono 11 Regular

Courier New 11  Regular

Verdana 11 Regular

Inconsolata 11 Regular

Free mono 11 Regular

Droid 11 Regular

DejaVu 11 Regular

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Der folgende Code ist lediglich in einer PHP-Datei zu speichern und kann dann genutzt werden. Ich habe nur wenig mit CSS gespielt und angepasst; ebenfalls ist die Browserunterstützung vermutlich nicht sonderlich groß, da ich rein auf HTML5 und CSS3 setze und keine Scripte dafür hinterlege.

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 /> 

	<title>Simple Media Queries Tester</title> 

	<meta name="description" content="Simple Media Queries Tester" />
	<meta name="author" content="Frank Bueltge - http://bueltge.de" /> 

	<style type="text/css" media="screen">
	/*<![CDATA[*/
		body { background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:100%;margin:20px; }
		a { text-decoration:none; color:#1152c8; }
		fieldset { border:1px solid #ccc; margin:0 0 20px 0; }
		form#mediaqueriestest input { margin:auto; }
		form#mediaqueriestest button { margin:auto;text-shadow:0 1px 1px #000;text-transform:uppercase; }
		form#mediaqueriestest button:hover { background:#1152c8;color:#000;cursor:pointer; }
		form#mediaqueriestest input:active, form#mediaqueriestest input:focus { outline:none;border:1px solid #333;background:#fff;color:#000;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; }
		form#mediaqueriestest fieldset, form#mediaqueriestest legend, form#mediaqueriestest input, form#mediaqueriestest button, iframe, footer {
background:#333;color:#fff;padding:7px 25px;border:1px solid #333;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; }
		form#mediaqueriestest fieldset, form#mediaqueriestest legend { background:#ccc;color:#000;margin:10px;padding-bottom:25px; }
		form#mediaqueriestest legend { padding:7px 25px;-webkit-box-shadow: 2px 2px 2px #333; }
		iframe { margin:0 auto; border:1px solid #ccc; margin:10px; }
		footer { display:block; color:#333; margin:20px 0 0 0; border:2px solid #ba0100; background:#fff; }
	/*]]>*/
	</style>

</head>
<body>
	<header>
		<h1><a href="http://bueltge.de/" title="to the weblog of the author">Simple Media Queries Tester</a></h1>
	</header>

	<section>
		<form id="mediaqueriestest" action="<?php echo htmlspecialchars( strip_tags($_SERVER['PHP_SELF']) ); ?>" method="get">
		<fieldset>
		<legend>Test your URL</legend>
		<label for="testurl">Test URL</label>
			<input type="text" name="testurl" id="testurl" placeholder="Input your test url here" size="70">
			<button type="submit">Test it!</button>
		</fieldset>
		</form>
		<?php
		if ( !empty($_GET['testurl']) ) {
			$newURL = htmlspecialchars( strip_tags($_GET['testurl']), ENT_QUOTES );
			if (preg_match("/^(www.)/i", $newURL) )
				$iframeurl = 'http://'.$newURL;
			elseif (preg_match("/^(http:\/\/)/i", $newURL))
				$iframeurl = $newURL;
			else
				$iframeurl = 'http://www.' . $newURL;

			echo '<iframe name="fullsize" id="fullsize" width="960" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
			echo '<iframe name="netbook" id="netbook" width="650" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
			echo '<iframe name="mobile" id="meinframe" width="450" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
		} else {
			echo '<p>keine Seite geladen - Adresse Eingeben</p>';
		}
		?>
	</section>

	<footer>
		<p>
		&copy; 2010 <a href="http://bueltge.de/">bueltge.de</a> &middot; <a href="http://bueltge.de/impressum/">Impressum</a>
		</p>
	</footer>

</body>
</html>

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Aufgrund meiner Neigung, den Lesefluss und die Aufbereitung selbst zu verwalten und zu regeln, liebe ich RSS Reader und Fullfeeds. Totgesagte leben länger - dies gilt in meinen Augen auch für RSS Reader. Insofern mein kleiner Beitrag - nicht alles ist wie es scheint und nicht jeder Trend oder Hype ist von Interesse.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Das Gestaltungskonzept der decoded basiert auf der grafischen Codierung von Worten. Diese erzeugt generative Figuren, welche die Namen von Sprechern, Leitworte oder andere Texte auf neue Weise darstellen.

Auf dass Eigenschaften wie Freiheit, Kraft und Unbeschwertheit dieses Vogels in mir sein mögen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Es gibt noch immer Potenzial zum Reduzieren der Größe, so bin ich kein Freak im Rahmen von JavaScript und hier sehe ich noch einiges an Möglichkeiten. Nun aber die beiden Lösungen zum Vergleich.

Variante 1 hat in erster Linie ihren Bedarf im CSS, viel Code für wenig Wirkung. Man braucht aktuell für diverse Browser unterschiedliche Syntax um die Rundungen zu erzeugen. Die Animation funktioniert nur in Webkit-Browsern und auch die RGB-Farben sind recht viele Zeichen.

1. Die 4,5k Variante
2. Die 1k Variante

Um diese Sachen auf 1k zu drücken musste einiges an Code weichen; eine andere Möglichkeit habe ich nicht gesehen. Die Animation habe ich nur im Ansatz zum Test eingebaut, sie ist wesentlich simpler. Das Spiel der Farben lasse ich via Zufall ablaufen und brauche trotzdem weniger Code. Lediglich die Möglichkeit RGB-Syntax zu nutzen ist geblieben, wird aber im JS per Zufall erzeugt.

In beiden Fällen habe ich es getan, weil ich mal etwas Spielen und Versuchen wollte. Einfach mal so und trotzdem sollte der Code valide und mit aktuellen Mitteln möglich sein. Interessant ist wohl das HTML5-Markup der 1k Variante - auch diese Version ist valider Code und ist doch recht untypisches Markup.

<!DOCTYPE html>
<meta charset="utf-8">
<title>one day at a time in 1k</title>
<style>body{background:#FFF;font:16px/23px Georgia,Times,serif;margin:20px}h1{font-size:45px}h3{display:none}time{font-size:50px;border:3px solid #F9F5EB;-webkit-box-shadow:4px 4px 6px #545454;-moz-box-shadow:4px 4px 6px #545454;box-shadow:4px 4px 6px #545454;padding:30px 40px}div{margin:120px 0}</style>
<script>function d(){var n=new Date(),t=n.getDate(),m=n.getMonth(),y=n.getFullYear(),y=t+'.'+m+'.'+y;if(t<10)t="0"+t;if(m<10)m="0"+m, datetime=y+'-'+m+'-'+t,x=document.createTextNode(y);d=document.getElementById('d');d.appendChild(x);d.setAttribute("datetime",datetime);setInterval('d.style.background="rgba("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",0.4)"',600);setInterval('d.style.margin=Math.floor(Math.random()*20)+"%"',500)}window.onload=d;</script>
<header><h1>Carpe diem (1k)</h1></header>
<div><h3>Today's date</h3><time id="d">&nbsp;</time></div>

Die style- und script-Elemente kann man im Grunde unbeachtet lassen, es geht um die anderen Tags, hier wird dem typischen Markup von HTML einiges entzogen.

Das html-, head- und body sind ganz entfallen. Gleiches kann man auch für colgroup und tbody machen. Andere Elemente dürfen nur das schließende Tag weg lassen: li, dt, dl, p, option und einige mehr.

Im Gegensatz dazu die Variante mit xHTML-Schreibweise und kompletten Tags.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 

		<title>one day at a time</title>

		<meta name="description" content="one day at a time - Small Sample Application">
		<meta name="language" content="en" />
		<link rel="stylesheet" href="style.css" />

		<script>
			function addDate(){
				var now   = new Date();
				var day   = now.getDate();
				var month = now.getMonth();
				var mname = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
				var year  = now.getFullYear();
				var date  = day + '.' + mname[month] + ' ' + year;
				if (day < 10) day = "0" + day;
				if (month < 10) month = "0" + month;
				var datetime = year + '-' + month + '-' + day;
				var dtxt   = document.createTextNode(date);
				document.getElementById('date').appendChild(dtxt);
				document.getElementById('date').setAttribute("datetime", datetime )
			}
			window.onload = addDate;
		</script>
	</head>
	<body>

		<div id="wrap">

			<header>
				<hgroup>
					<h1>one day at a time</h1>
					<h2>Carpe diem &mdash; <a href="http://en.wikipedia.org/wiki/Carpe_diem">Seize the day</a>.</h2>
				</hgroup>
			</header>

			<section>
				<h3>Today's date</h3>
				<div class="pulse">
					<time id="date">&nbsp;</time>
				</div>
			</section>

			<footer>
				<p>View in an HTML5 browser such as: <a href="http://ie.microsoft.com/testdrive/">IE9 Developer Preview</a>, <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>.</p>
				<p>See animation only on webkit browser such as: <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://www.google.com/chrome/index.html?hl=en&amp;brand=CHMB&amp;utm_campaign=en&amp;utm_source=en-ha-na-us-sk&amp;utm_medium=ha">Chrome</a>.</p>
			</footer>

		</div>

	</body>
</html>

Natürlich sind hier auch einige Inhalte mehr und vor allem wesentlich mehr Semantik unter gebracht. Eine schöner Vergleich der vielleicht zum Nachdenken anregt und mir wieder die Unterschiede und Möglichkeiten aufgezeigt hat.

Vielleicht Lust bekommen, zu spielen, zu testen und die neuen Möglichkeiten mit HTML5 und CSS3 zu versuchen - wenn ja, dann hat sich der Artikel gelohnt. Solltest du Hinweise für meine Spielerei oder Fehler gefunden haben - dann bin ich sehr dankbar und der Artikel hat sich noch viel mehr gelohnt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Vor zehn Jahren haben A List Apart einen Aufruf gestartet Much Ado About 5K. Weniger als 5 kByte waren zulässig um kleine Websites zu machen - diese Arbeiten sind aus meiner Sicht in erster Linie Anregung zu eigenen Gedanken und Inspiration für neue Arbeiten. Die Gemeinschaft der Webentwickler diskutiert gerne und so sind diese Formen der Themenanregung beliebt. Neben der Größe der Website von 10 k gibt es einige weitere Bedingungen - Standards: html5 und die Darstellung in Firefox, IE9, Safari und Chrome & diverse Bibliotheken - und damit ist zehn Jahre später ein neuer Wettbewerb 10k Apart durch fast das gleiche Team ins Leben gerufen. Zeit ein wenig Spaß zu haben und eine eigene kleine Arbeit bereit zu stellen.

Auch ich habe mich ein wenig von der vielen Arbeit erholt und mal eine kleine Spielerei gemacht, die man nun dort als App besichtigen kann - nichts besonderes, aber unterhaltsam und eine schöne Abwechslung. Ich wollte jeden Tag einen neuen Wert geben und uns die Erinnerung an jeden neuen Tag geben - 10k sollten dabei dicke reichen und so habe ich html5, CSS3 und JavaScript eingesetzt. Ebenfalls spiele ich mit den Animationsmöglichkeiten von CSS3, die allerdings aktuell nur in Webkit-Browsern wie Safari und Chrome laufen. Schaut es euch an und vielleicht nutzt es dem Lernen und dem Verständnis der neuen Mittel. Aber vielleicht motiviert es euch auch um ebenfalls an der Challange zu 10k Apart teilzunehmen.
Die Gallerie hat schon jetzt tolle Sachen dabei - auch wenn nicht alle Apps die 10k einhalten - zumindest wenn man mit Libraries wie jQuery arbeitet . Aber im Ende ist es eine tolle Aktion und die Teilnahme inspiriert. Es macht Spaß mit den neuen Möglichkeiten zu arbeiten und kein ToDo für alte Browser zu implementieren.

* Alternativ kann man sich die Spielerei auch in meinem kleinen Labor ansehen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

A/B Tests unterteilen die Zielgruppe der Website in unterschiedliche Gruppen - A & B. Je nach Gruppe wird das Werbemittel erstellt und ausgewertet. Ziel ist die Optimierung von Elementen auf der Site für die jeweilige Zielgruppe. Es findet also ein Vergleich des bestehenden Werbemittels mit einem veränderten Mittel statt und die Auswertung zeigt dann, welches Werbemittel besser anschlägt. Mehr Informationen gibt es beispielsweise bei Wikipedia.

Mitcho, Entwickler diverse populärer Plugins für WordPress und Firefox, hat mit Unterstützung von Automattic die erste Version des Plugins ShrimpTest veröffentlicht. Schon jetzt macht das Plugin eine gute Figur und lädt zum testen ein. Hintergründe und Informationen zu weiteren Releases erfährt man auf der Site und im Video zum Plugin. Das Plugin hat eine komplette Verwaltung im backend und im Frontend der Site kann man zwischen den verschiedenen Tests variieren.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Ein weiterer wichtiger Punkt, wohl der Wichtigste und der, der mich am meisten stört: die meisten FeedBurner-Nutzer leiden leiten jeden ihrer Feeds auf einen Feed um. Dies ist besonders nachteilig wenn man auf WordPress setzt, denn WP generiert im Standard für jede Archivsicht (Kategorien, Tags, Autoren, etc.) eigene Feeds - einfach so. Ich möchte ab und an nur bestimmte Bereiche des Autors oder der Site lesen und man nimmt mir die Chance dazu, in dem man alle Feeds der Applikation auf eine gemeinsame URL umleitet.

Ich mag die Idee der Feeds, ich liebe FullFeeds und ich liebe den Gedanken Inhalte zu tauschen und dem Leser die Art und Weise zu übergeben, wie er denn den Inhalt konsumiert. Gerade in Zeiten von unterschiedlichen Geräten zum Konsumieren von Inhalten, sei es iPad oder der mobile Client, ist es sehr schön, wenn ich als Konsument mein Leseverhalten beibehalten darf und nicht dem Zwang des Autors oder Websitebetreibers folgen muss. Ich will die Diskussion zum FullFeed damit nicht wieder aufleben lassen, dies habe ich schon getan, siehe Short Feeds: Es stinkt mir, aber auch dies ist eine Einschränkung, ebenso wie die Bündelung aller Feeds in einen via FeedBurner.

Der letzte Punkte ist ebenso störend, wenn man ihn gehen will oder muss - was wenn man den Account bei FeedBurner killt, dann gehen die Probleme erst richtig los. Die User haben den Feed über die URL von FeedBurner abonniert und ggf. verliert man alle Leser, die man über die Zeit geschätzt hat. Die URL von FeedBurner ist bei den Leuten im Reader, nicht die URL der Site - schade, denn Sie bekommen ohne Zusatzinfos nichts mit. Eine Weiterleitung ist so gut wie unmöglich und damit kann man nur hoffen, dass bei dieser Änderung der User seinen Reader updated und den letzten Post via FeedBurner-URL liest und auch ausführt.

Update: Weitere Aspekte gegen den Einsatz von FeedBurner nennt der Nachtwächter.

Aktuell sehe ich keinen Vorteil in der Nutzung von FeedBurner - sagt mir, warum ihr FeedBurner nutzt, oder warum nicht. Es interessiert mich wirklich.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Hits & Traffic

Im ersten Screenshot seht ihr die Zahlen, die die Serverstatisik des Hosters ausspuckt.

Ich meine, dass ≈4,4Millionen Hits pro Monat für ein One Man Show ganz gut sind; Probleme hatte ich ja schon ausreichend und daher musste ich ja, da ich nicht den Provider wechseln wollte, auf einen eigenen Server wechseln. Dank Sergej von wpSEO wird dieser auch ohne eigenes Zutun finanziert und so sind die Unkosten gleich null für mich persönlich - alternativ hatte ich überlegt, dass Blog anders zu fahren, da mir der Kostenaufwand für ein Freizeitprojekt recht hoch erschien.

Besucherzahlen

Der folgenden Screenshot zeigt euch die Monatsstatistik, die seit dem Einsatz von Mint gesammelt wurden. ich habe mal beispielhaft die Werte des Monats März hinzugefügt.

Populäre Seiten

Woher kommen die Leute und was wollen Sie - einen kleinen Einblick schafft der Blick auf den folgenden Screenshot. Hier ist nicht zu sehen, dass das Feed meines Blogs immer die Nummer 1 ist, dort kommen im Schnitt ≈250.000 Anfragen und 130.000 Besucher rein. Bei meinem Blog sind ganz klar die Feedleser die Masse; der Feed war es auch, der mir damals die meisten Probleme generierte. Die 250.000 Anfragen auf dem Feed sorgen für eine Last von 14.423.036 kByte.

Hinter den Kulissen

Das Blog läuft mir WordPress und auch sonst nutze ich keine Zaubertricks - setze auf klassische Methoden, die ich verstehe und kontrollieren kann. Ich bin der Meinung, dass Cache toll ist - aber man sollte wissen was man tut. Nicht selten befolgen Sites die Tipps aus dem Netz, verstehen aber nicht, was sie da tun und laufen dann in einem Problemfall in weitere Probleme rein. Blindes cachen bringt Ärger. Gerade im Umfeld von PHP und mySQL gibt es viele sehr unterschiedliche Methoden und wichtig ist mir, dass ich die Methode verstehe und möglichst keine Wissenschaft betreibe.

Zum Einsatz kommen möglichst nur Erweiterungen in WordPress, die ich selber schreibe, oder die ich geprüft habe. Dazu nutze ich den Editor und eigene Plugins von mir zur Analyse. Mir ist wichtig, dass die Last nicht durch Plugins enorm erhöht wird. Ebenfalls schaue ich genau auf die Last im Backend von WordPress, denn bei der wenigen Zeit die ich habe, will ich nicht noch auf Inhalte warten. Insofern beginnt eine Optimierung also bei der Installation, beim Theme und den Plugins, vor allem bei den Content-Filtern und ich nutze bewusst keine Widgets! Hier ist exakte, wissende und kontrollierte Arbeitsweise wichtig. Vieles an "Standard-caches" steuere ich via .htaccess; einen Einblick davon kann man sich in der Beispieldatei vom WP Basis Theme im SVN machen.

Am Rande: die größten Probleme machte mir in der Vergangenheit den Code, den ich in den Beiträgen darstelle, zu filtern. Der wurde via Filter maskiert und via Geshi formatiert - das war das aus ab einer gewissen Zugriffszahl. Aktuell arbeite ich mit einer eigenen Lösung und hinterlasse nur maskierten Code im Content, es läuft kein Filter mehr. Ich kenne kein Plugin für WordPress, was ich daher empfehlen kann, jeder Filter kann auf lange Sicht zu Problemen führen und das Blog ist abhängig vom Plugin, denn bei Deaktivierung wird der Code dann nicht selten interpretiert.

Im weiteren kommt nach Spielereien mit dem eAccelerator der APC zum Einsatz. Hier habe ich keine handhabe, ich habe das Modul vom Hoster installieren lassen und kann nicht daran drehen. Aber innerhalb von WordPress habe ich eine Erweiterung laufen, die den Standard-Cache von WP mit dem APC nutzt und parallel läuft das Plugin W3 Total Cache - dies ist aus meiner Sicht aktuell eines der Plugins, die man sich ansehen sollte, wenn man dahingehend Bedarf hat! Auch hier gilt, kontrolliert nutzen - nicht blind einschalten. Das Plugin hat sehr viele Funktionen, so dass man sehr schön gezielt schalten kann.
Ich kenne die Meinungen zu dem Auslagern auf statische Seiten, zum Beispiel via Plugin Super Cache, verliere damit aber eine gewissen Freiheit und muss mich wesentlich mehr um das Cachen kümmern. Daher bevorzuge ich eher andere Themen. Ebenfalls kommt hier kein CDN zum Einsatz; in einem anderen Projekt mit viel Grafik war dies wirklich ein Schachzug und hat extreme Geschwindigkeit gebracht.

Um es kurz zu machen: einige Einblicke in die Zahlen habe ich gebracht, gern zeige ich mehr, wenn man mag. Den technischen Aspekt möchte ich ungern klar darstellen, da aus meiner Sicht das Thema nicht schwarz & weiß ist, sondern bedacht eingesetzt werden sollte und immer in Abhängigkeit der Anforderungen steht. Schreibe Reviews für Kunden, dann schaue ich mir jedes Detail an, gebe Empfehlungen und immer wieder gibt es Unterschiede. Nicht jeder hat unbegrenzte Möglichkeiten, nutzt Server Load Balancing für eine Verteilung der Last. Es gilt, mit bedacht und kontrolliert an der Performance drehen.

Ein letzter Hinweis: wer mehr über die Optimierung bei sehr hohem Traffic wissen möchte, der sollte sich den Vortrag von Florian Holzhauer ansehen. Er administriert das Lawblog und dies hat ≈8Millionen Hits im Monat - ich bin also recht klein in der Blogwelt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

• Häufig gestellte Fragen zum Formatwechsel bei Google News-Sitemaps
• Das neue Format

  
  <?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
          xmlns:n="http://www.google.com/schemas/sitemap-news/0.9">
    <url>
      <loc>http://www.example.org/business/article55.html</loc>
      <n:news>
        <n:publication>
          <n:name>The Example Times</n:name>
          <n:language>en</n:language>
        </n:publication>
        <n:access>subscription</n:access>
        <n:genres>pressrelease, blog</n:genres>
        <n:publication_date>2008-12-23</n:publication_date>
        <n:title>Companies A, B in Merger Talks</n:title>
        <n:keywords>business, merger, acquisition, A, B</n:keywords>
        <n:stock_tickers>NASDAQ:A, NASDAQ:B</n:stock_tickers>
      </n:news>
    </url>
  </urlset>
  

• Plugin und Root-Lösung
  Hintergründe und die beiden Lösungen findet ihr auf der zugehörigen Seite, die ich erweitert habe und wo man das Plugin und die Datei für das Root downloaden kann.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Ich wünsche uns schon jetzt eine friedliche und interessante Adventszeit und hoffe, dass ich euch mit den täglichen Tipps nicht langweile. Parallel konnte ich die Freunde, Leidensgenossen, Mitstreiter und Männerherzen ebenso zu der Idee des Adventskalenders begeistern und daher wird es auch bei WP Engineer einen Kalender zur Weihnachtszeit geben; lasst euch überraschen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Eine neue Lösung namens CiteDrag von Elijah Grey ermöglicht es, dass man Elemente einfach per Drag&Drop in das Textfeld holt, Markieren und ziehen oder Elemente direkt ziehen.

Schlank und benutzerfreundlich kann die Lösung die eine oder andere Website aufwerten, daher sicher einen Blick wert: CiteDrag. Demo und Syntax sind verfügbar, Hintergründe sind im Artikel von Elijah zu finden.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Der klare Umschwung ist bei mir nach dem Lesen des Buches „High Performance Websites“ von Steve Souders, Chief Performance Yahoo! bei Yahoo!, gefallen und ich löse nun alles per <link.
Nun ist mir aber die öffentlich zugängliche Seite des Buchautors wieder unter gekommen und dort publiziert Steve einen Beitrag zum Thema. Diesen Link möchte ich damit einfach mal als Begründung, Rechtfertigung oder Lesetipp hier präsentieren.

Die klare Aussage: Kein @import nutzen.

Spannender Artikel, der sicher bei dem einen oder anderen Veränderungen hervorruft. Daher der Tipp, den Beitrag don’t use @import zum Buch zu lesen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Hintergründe, wieso, weshalb und warum sind im Artikel und in den Kommentaren zum Naked Day ´08 und im folgenden Artikel zu finden.

Auch in diesem Jahr kann man sich wieder registrieren und Code-Unterstützung integrieren, um sich nicht händisch um das de- und aktivieren des Stylesheets zu kümmern.

Der Naked Day ist eine kontroverse Aktion, der eine mag diese Idee und der andere hasst sie. Entscheidet selbst, lest die Hintergründe, denkt darüber nach oder diskutiert in geeigneter Runde. Aus meiner Sicht kann ein Naked Day nicht nur schamlos sein, er kann die Makel und Verbesserungen hervorrufen, die in der Basis statt finden und nicht via Schönheits-OP mit CSS.

View this site in alternate languages: English, Czech, Chinese, French, Korean

Die Idee

Hinter dieser Aktion steht die Idee die Webstandards zu fördern. Dazu gehören der korrekte Gebrauch von (x)HTML, semantisches Markup, hierarchische Struktur und zu letzt das Spiel der Wörter - der Inhalt. Es ist an der Zeit, deinen <body> der Öffentlichkeit zu zeigen. Damit zeigt man, dass gute Webseiten auch ohne Design leserlich sind.

Wie macht man mit?

Fülle das kleine Formular aus und deine Webseite wird in die offizielle Liste aufgenommen.

Am 9.April 2009 werden alle Formatierungen der Webseite entfernt, völlige Befreiung vom Design.

(optional): Setze den folgenden Hinweis am obersten Punkt deiner Seite.

<h3>What happened to the design?</h3>
<p>To know more about why styles are disabled on this website visit the
<a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
Annual CSS Naked Day</a> website for more information.</p>

Dieser Hinweis dient unter anderem als Hinweis für deine Besucher und sie wissen schnell warum und wieso dein <body> nackt ist.

Warum wieder?

Einige Leser sind interessiert und wollen wissen, warum es am 9.April zu dieser Aktion kommt.

• Die Aktion soll auf einen Dienstag, Mittwoch oder Donnerstag fallen (Viel-Traffic-Tage)
• Möglichst in der ersten Woche des April
• Es soll nie am 1.April sein (internationaler Scherz- und Streichtag)
• Es soll ausreichend Zeit zur Ankündigung sein

Einbinden via PHP

Um die nackten Tatsachen zu zeigen, kann man mittels PHP-Funktion den Naked Day automatisch einleiten. Folgende Funktion dient dieser Aufgabe.
WordPress User hinterlegen diese Funktion beispielsweis ein der Datei functions.php oder direkt im Template, die header.php. Alternativ kann auch das Plugin „WordPress Naked Day“ genutzt werden.

<?php
function is_naked_day($d) {
  $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
  $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
  $z = date('Z') * -1;
  $now = time() + $z;
  if ( $now >= $start && $now <= $end ) {
    return TRUE;
  }
  return FALSE;
}
?>

Die Funktion gibt TRUE aus, wenn es sich um den 9.April 2008 handelt. Daher gilt es nun die Funktion auszuwerten und jeweils zu reagieren. Dazu muss der Link zum Stylesheet in die if-Abfrage.

<head>
...
<?php
if ( is_naked_day(9) ) {
  echo '<!-- Naked Day hat kein Style -->';
} else {
  echo '<link rel="stylesheet" type="text/css" href="styles.css" /%gt;';
}
?>
...
</head>

In WordPress sollte das dann in der header.php eingepflegt werden. Das könnte dann beispielsweise so aussehen:

<?php
if ( is_naked_day(9) ) {
  echo '<!-- Naked Day hat kein Style -->';
} else { ?>
	<style type="text/css" media="screen">
		@import url(<?php bloginfo('stylesheet_url'); ?>);
	</style>
<?php }
?>

Warte… sind das 48 Stunden?

Das ist richtig. CSS Naked Day dauert für den Zeitraum eines internationalen Tages. Vom technischen Standpunkt aus ist der „9. April“ überall in der Welt 48 Stunden lang. Um zu garantieren, dass die Website für jeden auf der ganzen Welt Nackt ist, sind die 48 Stunden pure Nacktheit zu präsentieren.

Tools und Plugins

Die Aktion ist unter einer ganzer Reihe von Entwicklern bekannt und so gibt es auch eine große Anzahl von Tools und Plugins um die Aktion zu unterstützen. Schau die auf der Aktions-Seite um, dort findet man eine aktuelle Liste der Tools und Plugins; um nur Einige zu nennen: WordPress Plugin, PHP class, Rails Helper, Serendipity Plugin, LifeType Plugin, ...

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Um so schöner, dass es auch für die neue Version (alte Version) ein übersichtliches CheatSheet gibt, was beim Umgang ein leichten Zugriff erlaubt. Einfach mal drüber schauen.
Alternativ kann man noch immer auf das Firefox Add-on oder die Air-Applikation zurückgreifen.

Aufgefallen bei Technikwürze 132

Update: Cheat Sheet für jQuery Version 1.4 gibt es unter neuen Adresse

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Hintergrund der Idee ist das vereinfachte Debuggen in einer Oberfläche. Damit scheint MS die Entwickler in der Arbeit beim Anpassen an die IE-Familie unterstützen zu wollen und so bietet die aktuelle Beta auch die Version IE6, IE7 und IE8 zum arbeiten an.
Dabei ist die Oberfläche so aufgebaut, dass man zwei unterschiedliche Browser gleichzeitig sehen kann und in beiden die jeweils gleichen Elemente debuggen kann. Die Oberfläche kann aber auch in diesem Bereich unterschiedlich genutzt werden und so stehen verschiedene Aufteilungen und Zoom-Modi zur Verfügung. Ergänzend gibt es Lineal, Thumbnail View der Site und zwei unterschiedliche Darstellungsmodi beim Analysieren.

Der Clou aus meiner Sicht ist aber, dass man nicht nur den IE unterstützt, sondern auch jeden anderen Browser, insofern er lokal vorhanden ist. In einer kommenden Version soll es dann wie folgt aussehen. Der folgende Screenshot stammt von einer Beta, die man aktuell nicht offiziell downloaden kann. Will man das Tool testen, so findet man den Download im Beitrag des MSDN Blog

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Im weiteren gibt es eine Übersicht über die genutzte Applikation bzw. Service. Hier zeigt sich deutlich die Popularität von WordPress. Für Entwickler, die sich festlegen wollen oder müssen, ist so ein Trend sicher nützlich. Alternativ könnte man diesen Trend auch recht schön mit Google Trends abgleichen, aber so hat man eine Alternative und kann beide Charts einbeziehen.

Mehr Information gibt es im angesprochenen Beitrag auf Internet Blogs Technology Trends.

Update: Lesebefehl in diesem Zusammenhang - Nachteile des Bloggens

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Aus meiner Sicht ist die deutsche Sprache aber ein wenig komplexer und die bekannten Lorem ipsum-Texte bilden daher nicht immer alle eventuellen Probleme ab. Hintergründe und Infos zu diesem Thema werden sehr schön in dem Artikel „Blindtexte als Chance“ der Webkrauts dargestellt.

Zu diesem Zweck habe ich mir eine Seite erstellt, die mir diverse Auswahlbereiche mit HTML-Tags und Blindtexten in deutscher Sprache zur Verfügung stellt. Dabei habe ich die Idee des HTML-Impus von Chris Coyier genutzt und einzelne Bereiche angelegt, die die Übersicht ein wenig wahren. Ebenso kann man via Klick auf den Titel einer Box den Inhalt in die Zwischenablage kopieren.

Wer also ebenso ab und dann diverse Inhalte und Tags benötigt, gern kann es genutzt werden. Ebenso freue ich mich über Ideen zur Verbesserungen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

... natürlich ist in dem Zusammenhang die Übersicht von Peter Kröner zu HTML5 nicht zu vergessen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

• Informationelle Selbstbestimmung
• Individualsphäre
• Anonymität
• Datenschutz
• Schutz vor Überwachung
• Meinungs- und Bewegungsfreiheit
• Informationsfreiheit
• Das Recht auf politische Transparenz

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren