Welche Vorteile sich für den Benutzer und welche Nachteile für einen Webmaster sich hierdurch ergeben soll hier kurz aufgezeigt werden.

Vorteile für den Benutzer

Durch unterschiedliche E-Mail-Adressen, welche aber alle zu einem Postfach führen, gibt es für den Benutzer eine Reihe von Vorteilen.

Organisation/Kategorisierungen

Der Benutzer kann die E-Mails besser organisieren bzw. kategorisieren. Beispielsweise wird für alle Newsletter die E-Mail-Adresse m.ax.mueller@googlemail.com verwendet, für den privaten Kontakt max.mueller@googlemail.com. Mit Hilfe der Filtereinstellungen bei Google-Mail können dann alle Newsletter unabhängig vom Absender mit einem Label versehen und aus dem Posteingang verschoben werden – so findet man im Posteingang dann wirklich nur die “wichtigen” E-Mails.

Privatsphäre

Manche Plattformen bieten die Möglichkeit über eine E-Mail-Adresse zu prüfen ob ein User angemeldet ist (z.B. Facebook). Dies ist nicht von jedem User gewünscht. Hier bietet sich dann mit einer Google-Mail-Adresse die Möglichkeit seine E-Mail-Adresse auf der Plattform z.B. auf max.m.u.e.l.l.e.r@googlemail.com zu ändern. Sucht ein User nach max.mueller@googlemail.com so wird er nicht fündig werden – und trotzdem muss man nicht eine weitere E-Mail-Adresse registrieren.

Nachteile für den Webmaster

Natürlich ergeben Sie durch dieses Feature auch Nachteile. Oft wird die E-Mail-Adresse als primary Key verwendet um so Mehrfachanmeldungen oder Nutzungen schnell und einfach zu unterbinden. Dies wird genutzt unter anderem bei:

• Serialversand
  Das Produkt X darf 14 Tage mit der Serial Y getestet werden. Wird danach versucht erneut eine Serial anzufordern, schlägt das für die benutzte Adresse fehl
• Unterbinden von Mehrfachregistrierung
  Es soll verhindert werden dass sich ein Benutzer mehrfach registriert – unabhängig ob das Verhalten gewollt oder ungewollt ist. Sei es auf Community-Seiten oder auch finanziell orientierten Homepages wie Online-Shops.

Natürlich gibt es neben der “Google-Mail-Problematik” auch noch andere Möglichkeiten wie Wegwerf-E-Mail-Adressen, Automatische Erstellung von E-Mail-Konten, oder sogar der Besitz einer (E-Mail-)Domain (ich@meineDomain.de, ich1@meineDomain.de, …). Wir wollen uns aber hier nur mit Google-Mail beschäftigen.

Eine Möglichkeit das Problem zu umgehen ist der folgende einfache Algorithmus:

1. Prüfe ob Google-Mail-Adresse
2. Wenn Ja entferne im Benutzername alle Punkte
3. Speichere E-Mail-Adresse

Wenn nun geprüft werden soll, ob ein Account schon eine E-Mail-Adresse verwendet, wird auf diese der Algorithmus angewandt, und dann z.B. die Datenbank nach der Mail-Adresse durchsucht. Bleibt die Suche erfolglos, darf sich der User registrieren, wenn nicht, ist der User wohl mit einer ähnliche Adresse bereits registriert und sollte darauf hingewiesen werden. Wichtig ist hierbei, dass der Datenbestand, in dem die Mail-Adresse gesucht wird, bereits die “gesäuberte Adressen” besitzt.

Hinweis: Bei Google-Mail sind gmail.com und googlemail.com möglich. Dies wird vom Script entsprechend beachtet und alle Adressen auf gmail.com umgeschrieben.

Die Implementierung könnte in PHP z.B. gefolgt aussehen:

/**
 * Cleans an e-mail-address (especially Google-Mail-adresses) to avoid duplicates.
 * @param String $emailStr e-mail-address
 */
function clean_email($emailStr) {
	$emailStr = strtolower ($emailStr);
	$tokens = preg_split ("/@/", $emailStr);

	if ($tokens [1] == "gmail.com" || $tokens [1] == "googlemail.com") {
		return str_replace (".", "", $tokens [0]) . "@googlemail.com";
	} else {
		return $emailStr;
	}
}

Ein Aufruf von

echo clean_email("m.a.x.MUELLE.R@gmail.com") . "<br/>";
echo clean_email("m.a.x.MUELLE.R@googlemail.com") . "<br/>";
echo clean_email("max.mueller@web.de");

hat dann entsprechende folgende Ausgabe:

maxmueller@googlemail.com
maxmueller@googlemail.com
max.mueller@web.de

Epilog

Nicht immer wenn sich ein User versucht nochmal zu registrieren ist dies beabsichtigt. Ggf. hat der User schlicht vergessen dass er auf einer Seite registriert ist, oder kann sich nicht mehr einloggen, weil er seine Logindaten nicht mehr kennt. Deshalb sollte immer eine entsprechende Meldung ausgegeben werden wie z.B. “Es ist bereits ein User mit dieser E-Mail-Adresse registriert. Haben Sie Ihr Passwort vergessen?” mit entsprechenden Link zu einer Seite, wo ein neues Passwort beantragt werden kann.

Auch ist bei Prüfung auf Google-Mail-Adressen und Wegwerf-Adressen natürlich nicht vor einer Mehrfachregistrierung geschützt. Sicher ist das nur über das kostenpflichtige und  zeitaufwendige Postident-Verfahren – was jedoch im Internet an der Praxis scheitert.

Weitere Informationen:

• Google Mail-Hilfe – Empfangen von E-Mail-Nachrichten anderer Personen
• bspamfree.org – Wegwerf-E-Mail-Adressen
• Wikipedia – Postident
• Deutsche Post – Identitätsprüfung

Geolocation lässt sich beispielsweise mit (kostenlosen) GeoLite City von MaxMind sehr einfach in PHP-Projekte integrieren. Mit nur wenigen Dateien und wenigen Zeilen Code lässt sich so der Standort des Besuchers relativ genau (für Deutschland mit 71% Trefferquote) bestimmen.

Die benötigten Dateien…

• geoip.inc
• geoipcity.inc
• geoipregionvars.php
• GeoLiteCity.dat – die eigentliche Datenbank

… lassen sich hier herunterladen.

Folgender PHP Code liefert die Geolocation des Besuchers:

include("geoipcity.inc");
include("geoipregionvars.php");

function getCity() {

	$gi = geoip_open("GeoLiteCity.dat", GEOIP_STANDARD);
	$record = geoip_record_by_addr($gi, $_SERVER['REMOTE_ADDR']);
	geoip_close($gi);

	return $record->city;
}

Das $record-Objekt enthält aber auch noch andere, interessante Daten:

print $record->country_code . " " . $record->country_code3 . " " . $record->country_name . "\n";
print $record->region . " " . $GEOIP_REGION_NAME[$record->country_code][$record->region] . "\n";
print $record->city . "\n";
print $record->postal_code . "\n";
print $record->latitude . "\n";
print $record->longitude . "\n";
print $record->metro_code . "\n";
print $record->area_code . "\n";

Fragen, Anregungen? Dafür sind die Kommentare da!

Was für Möglichkeiten sich mit dieser API ergeben zeigen zahlreiche eindrucksvolle Beispiele. Hier ist eines meiner Experimente:

Favelizer – ein 16 x 16 Pixel Frequenz Spectrum in der Browseradresszeile:

Eine Live-Vorschau findet sich hier: http://labs.daslaboratorium.de/favelizer

Wer sich die gepatchte Firefox-Beta nicht herunterladen möchte, kann den Favelizer auch hier in Aktion ansehen (leider ohne Sound):

So funktionierts:

Das Audio-Element erhält ein onaudiowritten Attribut, mit dem wir beim Abspielen der Musik fortlaufend eine beliebige Javascript Funktion aufrufen können:

<audio src="datei.ogg" controls="true" onaudiowritten="update(event);">

Mit dem übergebenen event-Objekt können wir auf die Audio-Signale zugreifen:

function update(event) {
     signal   = event.mozFrameBuffer;
     spectrum = event.mozSpectrum;
 }

Um das Favicon dynamisch und möglichst schnell erzeugen zu können, greife ich auf processing.js zurück. Das ist wesentlich einfacher als beispielsweise mit

ctx = $('frame').getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(1, 1, 1, 16);

Pixel für Pixel einzeln zu färben.

Processing.js ist eine durch Javascript verwirklichte eigene Programmiersprache und gleicht in seinem Aufbau Java. Processing.js nutzt das html5 canvas object und ermöglicht beeindruckende Graphikdarstellungen im Browser – ganz ohne Flash.

Mit einem bisschen Mathematik lässt sich so ganz einfach ein Frequenz Spectrum auf 16 x 16 Pixel bringen:

void draw() {
    background(0);
    strokeWeight(1.0);

    if (spectrum.length > 0) {
        for (int i = 0; i <= 16; i++) {
            var j         = i + 30 * spectrum.item(i * 4);
            var log       = -1 * Math.log(1 / j);
            var magnitude = 16 - spectrum.item(i * 4) * 256 * log;
            stroke(0, 255, 0);
            line(i, 16, i, 16 - magnitude);
        }
    }
}

Das Favicon brauchen wir dann nur noch in regelmäßigen Abständen auszutauschen:

window.setInterval(function() {
    var icon = $('icon');
    var newIcon = icon.cloneNode(true);
    newIcon.setAttribute('href', ctx.canvas.toDataURL());
    icon.parentNode.replaceChild(newIcon, icon);
 }, 60);

Es lohnt sich auf jeden Fall ein Blick in den Sourcecode: http://labs.daslaboratorium.de/favelizer

Es stockt bei mir!?

Das liegt daran, dass wir zum Austausch der einzelnen Favicon-Frames ein neues Objekt erstellen und damit das alte Icon auswechseln müssen. Da häuft sich natürlich einiges an Datenmüll (alte, nicht mehr verwendete Objekte) an, der aufwendig beseitigt werden muss. Der sg. Garbage-Collector verschluckt sich. Eine schnelle Lösung habe ich im Moment leider noch nicht parat.

Wer beispielsweise schon einmal mit Google Wave gespielt hat, wird merken, dass eingegebene Zeichen (mit sehr kurzer Verzögerung) auf dem Bildschirm des Gesprächspartners erscheinen. Wer so etwas mit Ajax verwirklichen will muss trickreich mit so genannten long live HTTP GET Requests spielen (siehe diese Google Wave Präsentation, Minute 11:00). Doch Abhilfe naht: das HTML5 WebSocket Interface findet sich bereits in den erstsen Web-Browsers implementiert. Auch der neue Editor’s Draft der WebSocketAPI von gestern (15. April 2010) sieht vielversprechend aus.

Das WebSocket Interface erlaubt den Aufbau einer bestehenden, fullduplex Verbindung über das WebSocket Protokoll und lässt sich erstaunlich einfach mit JavaScript in die eigenen Webanwendungen implementieren. Es besitzt einen Constructor

WebSocket(url [, protocol])

mit den Parameter URL (String) und dem optionalen Parameter protocoll (String).

Das WebSocket Interface besitzt die folgenden Attribute:

readonly String URL
readonly unsigned short readyState
    0 = Connecting
    1 = Open
    2 = Closing
    3 = Closed
readonly unsigned long bufferedAmount

Das WebSocket Interface besitzt zudem die folgenden Funktionen:

boolean send(String data)
void close()

Außerdem besitzt das Interface folgende Events:

onopen
onmessage
onerror
onclose

Eine typische und rudimentäre Implementierung könnte demnach so aussehen:

var mySocket = new WebSocket('ws://domain.com:80');
mySocket.onopen = function() {
    setInterval(function() {
        mySocket.send('Hello');
    }, 50);
}

Wir erstellen demnach ein WebSocket Objekt und senden alle 50ms eine Nachricht an den Empfänger auf Port 80. Hier können bereits Probleme auftreten: Was wenn die Verbindung des ausführenden Rechners nicht ausreicht um alle 50ms eine Nachricht zu versenden? Hierfür nehmen wir das Attribut bufferedAmount zur Hilfe. bufferedAmount ist nur dann gleich 0, wenn keine Daten mehr in der Warteschlange zum Versenden sind. Unsere überarbeitete Implementierung:

var mySocket = new WebSocket('ws://domain.com:80');
mySocket.onopen = function() {
    setInterval(function() {
        if(mySocket.bufferedAmount == 0) {
            mySocket.send('Hello');
        }
    }, 50);
}

Empfangene Daten können wir mit dem onmessage Event verarbeiten:

mySocket.onmessage = function(data) {
    document.getElementById('Output').appendChild(
        document.createTextNode(data)
    );
}

Hier zeigen wir die Daten im Browserfenster an. Fehler können wir mit dem error Event abfangen. Das Auslösen des error Events muss nicht zwangsläufig bedeuten, dass die Verbindung abgebrochen ist, kann es aber:

mySocket.onerror = function(error) {
    alert('error');
    if(mySocket.readyState != 1) {
        document.getElementById('Output').appendChild(
            document.createTextNode("Ein Fehler ist aufgetreten.")
        );
    }
}

Um Daten mit einem Server auszutauschen benötigen wir einen Server, der das WebSocket-Protokoll unterstützt. Für die ersten Experimente eignet sich zum Beispiel pywebsocket. Es kann sowohl als Apache-Modul oder auch als Stand-Alone-Server betrieben werden.

Im Moment unterstützen meines Wissens leider nur Google Chrome und Safari WebSocket. Firefox wird es in nicht alzu ferner Zukunft implementieren. Eine Chat-Demo unter Verwendung von WebSockets findet sich hier.

Anregungen? Hierfür sind die Kommentare da.

Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in [..] und

Warning: file_get_contents([..]) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in [..]

auf. Mit folgender Funktion kann man das Verhalten von file_get_contents jedoch emulieren.

Die Funktion get_contents_by_uri benutzt fsockopen um Inhalte zu laden:

/**
 * Gets contents of any webside by an URI.
 * @author http://blog.root-of-all-evil.com
 * @param String $uri
 */
function get_contents_by_uri($uri) {
	$uriElem = parse_url ( $uri );
	$fp = @fsockopen ( $uriElem ['host'], 80, $errno, $errstr, 10 );

	if (! $fp) {
		throw new Exception ( "Could not create socket: '" . $errnstr . "' (" . $errno . ")." );
	}

	$request = "GET " . $uriElem ['path'] . (isset ( $uriElem ['query'] ) ? "?" . $uriElem ['query'] : "") . " HTTP/1.1\r\n";
	$request .= "Host: " . $uriElem ['host'] . "\r\n";
	$request .= "Connection: Close\r\n\r\n";

	fwrite ( $fp, $request );
	$response = "";
	while ( ! feof ( $fp ) ) {
		$response .= fgets ( $fp, 128 );
	}
	fclose ( $fp );

	// split headers from data
	$responseSplit = explode ( "\r\n\r\n", $response, 2 );

	return $responseSplit [1];
}

Erklärung

Socket erstellen

Die übergebene URI wird über die PHP-Funktion parse_url in ihre Teilmengen zerlegt. Anschließend wird ein Socket erstellt für den entsprechenden Host, auf Port 80 mit einem Timeout von 10 Sekunden. Fehlermeldungen unterdrücken wir durch das @, da wir explizit nach Erfolg abfragen und ggf. eine Ausnahme werfen.

Anfrage schicken, Antwort lesen

Danach wird über fwrite eine entsprechende GET-Anfrage geschickt, welche auch – falls vorhanden – die Parameter der URI und nicht nur den Pfad beachtet. Die darauffolgende Antwort wird in die Variable response gelesen.

Antwort bearbeiten und zurückgeben

Da diese neben dem eigentlichen Inhalt auch den Antwortheader enthält wird die Funktion explode benutzt um den Inhalt davon abzuschneiden. Durch den dritten Parameter bei explode mit dem Wert 2, stellen wir sicher, dass nur einmalig an Hand einer Leerzeile getrennt wird wie Sie sich zwischen Antwort-Header und HTML-Code befindet und nicht mehrmals, da natürlich auch Leerzeilen im HTML-Code selbst auftreten können.

Das zweite Element von responseSplit wird zurückgegeben, responseSplit[0] würde entsprechend den Antwort-Header liefern.

Beispielaufrufe

Der einfachste Aufruf:

echo get_contents_by_uri ( 'http://www.google.de/' );

Aufruf mit Parametern:

echo get_contents_by_uri ( 'http://www.google.de/search?hl=de&site=&q=test' );

Aufruf mit Ausnahmebehandlung:

try{
    echo get_contents_by_uri ( 'http://does_not_exist_.com/bogus.html' );
}
catch(Exception $e)
{
    echo "get_contents_by_uri: ".$e->getMessage();
}

Weitere Links:

• PHP – Funktion parse_url
• PHP – Funktion file_get_contens
• PHP – Funktion fsockopen
• PHP – Funktion explode

Einer der Hauptkritikpunkte von Ajax ist die fehlende native Unterstützung von Bookmarks – also Favoriten. Dynamisch durch Javascript und Ajax veränderte Webseiten lassen sich nicht in ihrem momentanen Zustand zu den Favoriten hinzufügen, da lediglich die URL der Seite nicht aber die vorangegangen Aktionen des Benutzers die zum momentanen Zustand der Seite geführt haben, gespeichert werden. Gleiches gilt für das Verlinken auf solche dynamischen Seiten – in Zeiten des Austausch von Links in sozialen Netzwerken ein nicht zu unterschätzendes Defizit.

Dabei gibt es Wege und Möglichkeiten auch Javascript mit Parametern über eine URL zu versorgen. Ein simples Beispiel soll hier gezeigt werden.

Javascript Parameter mittels Anker

Anker, das ist der letzte Teil einer jeden URL, beginnend mit einem Raute- oder auch Hash-Zeichen(#). Anker verweisen auf ‘Lesezeichen’ auf der Webseite und dienen dazu, beim Verlinken verticale Lesezeichen anzuspringen oder auch um innerhalb einer Webseite vertikal zu springen.

Der große Vorteil von Ankern für Javascript Parameter ist die Möglichkeit diese durch Javascript zur Laufzeit zu verändern ohne, dass die Webseite verlassen wird. Es ist also möglich die Anker jederzeit durch Javascript ohne Einschränkung des Benutzers zu bearbeiten. Anker können über den Zugriff auf die Eigenschaft

window.location.hash

ausgelesen und verändert werden.

Mehrere Javascript Parameter im Anker unterbringen

Wie bei gewöhnlichen GET-Parametern, müssen auch mehrere Javascript Parameter möglich sein. GET-Parameter verwenden zur Trennung ein & Zeichen:

http://url.de?parameter1=wert1&parameter2=wert2

Auch bei Javascript-Parametern kann ein &-Zeichen verwendet werden um Parameter von einander zu trennen. Ich persönlich schlage aber das ~-Zeichen vor um Javascript-Parameter von den gewöhnlichen GET-Parametern auch optisch zu trennen.

http://url.de?parameter1=wert1&parameter2=wert2#javascript1=jswert1~javascript2=jswert2

Selbstverständlich ist dies nur Geschmackssache und ist abhängig von der jeweiligen verwendeten Implementierung.

Javascript Parameter auslesen

Um die mitgegebenen Parameter auszulesen nutze ich die folgende rudimentäre Implementierung:

function getParams() {
	var params = window.location.hash.replace('#', '').split('~');
	var toReturn = new Array();
	for(var i = 0; i < params.length; i++) {
		var find = /^(\w+)(=(.*))?$/;
		find.exec(params[i]);
		toReturn[RegExp.$1] = RegExp.$3;
	}
	return toReturn;
}

Die Funktion wird beim Start ausgeführt und gibt ein assoziatives Array ähnlich der $_GET und $_POST Arrays in PHP zurück. Selbstverständlich ist auch eine objekt-orientierte Implementierung möglich (ja, richtig gehört, Javascript kann sehr wohl objektorientiert sein).

Javascript Parameter setzen und löschen

Javascript Parameter können wie folgt gesetzt werden:

function setParam(param, value) {
	var paramtxt = (value) ? param + '=' + value : param; // Parameter zusammensetzen
	var params = window.location.hash.replace('#', '').split('~');
	var location = params.findParam(param);
	if(location === false)
		// wenn der Parameter noch nicht gesetzt war, setzen wir den Parameter neu
		params.push(paramtxt);
	else
		// war der Parameter schon gesetzt ändern wir ihn entsprechend ab
		params[location] = paramtxt;
	window.location.hash = params.join('~');
}

/* Array.findParam(needle) Hilfsfunktion - ähneld einer in_array Funktion */
Array.prototype.findParam = function(needle) {
	for(var i = 0; i < this.length; i++)
		if(this[i].search('^' + needle + '(=.*)?$') != -1) return i;
	return false;
}

Parameter lassen sich so ohne Probleme neu setzen oder überschreiben. Um Parameter komplett zu löschen eignet sich folgende Funktion:

function removeParam(param) {
	var params = window.location.hash.split('~');
	var location = params.findParam(param);
	if(location !== false)
		params.splice(location, location);
	window.location.hash = params.join('~');
}

Mit diesen drei Funktionen können wir also Javascript Parameter im Anker auslesen, setzen und löschen. Das sollte für eine einfache Implementierung reichen.

Beispiel

Ein einfaches Anwendungsbeispiel findet sich hier: http://labs.daslaboratorium.de/roae/jsparams.html

Mein erster Gehversuch mit JavaScript Parameter findet sich auf www.regnets.in implementiert.

Kommentare oder Anregungen? Dafür gibt es die Möglichkeit zum Kommentieren.

Aufbau einer URL prüfen

Ein eigenständiger Validator ist im Zend Framework nicht vorhanden welcher den Aufbau einer URL / URI prüft. Jedoch bietet Zend_URI mit der Methode check() hier eine entsprechende Funktionalität an. Auf diese greifen wir in einem selbst geschriebenen Validator zurück:

class Validator_Uri extends Zend_Validate_Abstract {
	const INVALID_URI = 'invalidUri';
	protected $_messageTemplates = array (self::INVALID_URI => "'%value%' is not a valid URI" );

	public function isValid($value) {
		$this->_setValue ($value);

		if (! Zend_Uri::check ($value)) {
			$this->_error ( self::INVALID_URI );
			return false;
		}

		return true;
	}
}

Erreichbarkeit einer URL prüfen

Es ist nicht nur wichtig, dass die Ressourcenangabe in Ihrem Aufbau korrekt ist, sondern auch, dass sich dahinter ein erreichbares Objekt (Webseite, Bild, PDF etc.) befindet.
Mit Hilfe der PHP-Funktion get_headers prüfen wir den Antwort-Header auf Erfolg (200 OK). Mit Hilfe des @ unterdrücken wir eine Fehler-Ausgabe von PHP, wenn der String an get_headers keine URL sein sollte:

class Validator_Uri_Reachable extends Zend_Validate_Abstract {
	const URI_REACHABLE = 'uriReachable';
	protected $_messageTemplates = array (self::URI_REACHABLE => "'%value%' not reachable" );

	public function isValid($value) {
		$this->_setValue ( $value );

		$headers = @get_headers ( $value );
		if (! preg_match ( '/200 OK/', $headers [0] )) {
			$this->_error ();
			return false;
		}

		return true;
	}
}

Entsprechend kann dann in einem Zend-Formular z.B. eine Homepageadresse geprüft werden:

$hpUrl = new Zend_Form_Element_Text ( 'hpUrl' );
$hpUrl->setLabel ( 'Homepage:' )
			  ->setDescription ( 'Ihre Homepage- oder Blog-Adresse' );
			  ->setAttrib ( 'value', 'http://' )
			  ->addValidator ( new Validator_Uri() )
			  ->addValidator ( new Validator_Uri_Reachable() )

Weitere Links:

• Zend Framework Dokumentation – Schreiben von Prüfern
• PHP – Funktion getheaders
• Wikipedia – Aufbau einer URL
• ROAE Blog – Tools für Regex / Reguläre Ausdrücke

This little sniplet will enable you to parse ISO 8601 Period (Duration) Time Formats into seconds. The ISO 8601 Period is represented by a string like PnYnMnDTnHnMnS where nY represents the number of years, nM the months, nD the days, nH the hours, nM the Minutes and nS the Seconds. The T seperates the date (to the left of the T) from the time (to the right of the T). Parsing this string is quite tricky, because unneeded values (like years and months for durations shorter than a month) can be left out. Parsing is also tricky, because we face two “M” as identifiers (for months and Minutes).

// ISO 8601 period format PnYnMnDTnHnMnS (e.g., P0Y0M2DT23H32M51S) to seconds
function calcFinishTime($timeleft)
{
	$parsed = array('Y' => 0, 'Mo' => 0, 'D' => 0, 'H' => 0, 'Mi' => 0, 'S' => 0);
	$calcSec = array(12, 31, 24, 60, 60);
	$toParse = preg_split('/T/', strtoupper($timeleft));
	foreach($toParse as $i => $array) {
		$split = preg_split('/([PYMDTHMS]+)/', $array, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);
		$count = count($split);
		for($j = 0; $j < $count; $j++) {
			if(is_numeric($split[$j])) {
				$type = substr($split[$j +1], 0, 1);
				if($i < 1 && $type == 'M')	$type = 'Mo';
				elseif($type == 'M')		$type = 'Mi';
				$parsed[$type] += (int)$split[$j];
			}
		}
	}
	$k = 0;
	foreach($parsed as $type) {
		$sec = 1;
		for($j = $k; $j < 5; $j++) {
			$sec *= $calcSec[$j];
		}
		$parsed['seconds'] += $sec * $type;
		$k++;
	}
	$parsed['endtime'] = time() + $parsed['seconds'];
	return $parsed;
}

A input of “P2DT3H6M24″ will result in an array like this:

array(8) {
  ["Y"]=>
  int(0)
  ["Mo"]=>
  int(0)
  ["D"]=>
  int(2)
  ["H"]=>
  int(3)
  ["Mi"]=>
  int(6)
  ["S"]=>
  int(24)
  ["seconds"]=>
  int(183984)
  ["endtime"]=>
  int(1270843142)
}

Hier sollen die notwendigen Schritte aufgezeigt werden, welche es benötigt, von Bildern automatisiert Thumbnails zu generieren. Das Orginal-Bild und das Thumbnail (Vorschaubild) sollen beide über ein Wasserzeichen geschützt sein.

Sämtliche benötigten Dateien werden zur Verfügung gestellt, sodass die notwendigen Schritte gut nachvollzogen werden können.

Das Ziel

Das Video zeigt auf, wie Sie die Aktion, welche wir erstellen, anwenden. Natürlich könne Sie jedes beliebige Wasserzeichen verwenden.

Vorbereitung

Die benötigten Dateien laden Sie bitte hier herunter. Nachdem Sie diese auf dem Desktop entpackt haben, starten Sie bitte Adobe Photoshop.

Zu Beginn starten wie Adobe Photoshop und  blenden die Aktionen-Palette über Fenster -> Aktionen oder die Funktionstaste F9 ein.

Aufrufen der Aktionen-Palette

Im rechten Teil verfügen wir nun über die Aktionen-Palette.

Aktionen-Palette

Mit Hilfe dieser Palette können wir (fast) alles was wir in Photoshop ausführen aufzeichen lassen und dann später durch einen Knopfdruck abspielen.

Darüber hinaus öffnen Sie bitte die Datei ROAE-Tutorial/logo.gif (Sie können später die Datei durch Ihr eigenes Logo ersetzen).

Aktion erstellen und aufzeichen

Hinweis: In den Dateien ist bereits die fertige Aktion enthalten (Datei Wasserzeichen_und_Thumbnaill-Photoshop_Aktion), welche Sie durch einen Doppelklick in Photoshop importieren können. Sie müssen also nicht die folgenden Schritte nicht durchführen.

Aus je einem Orginal-Bild sollen zwei Bilder erstellt werden. Einmal das Bild mit einem Wasserzeichen versehen, zum zweiten ein Thumbnail (Vorschaubild), mit einer Breite von 400 Pixeln und ebenfalls einem Wasserzeichen.

Schritt 01: Aktion erstellen

Um die notwendigen Schritte aufzeichnen zu lassen, klicken wir in der Aktionen-Palette auf Neue Aktion erstellen

Erstellen einer neuen Aktion

und tragen in dem neuen Fenster als Aktionsname Wasserzeichen und Thumbnail ein.

Neue Aktion erstellen & aufzeichnen beginnen

Rechts in der Aktionenpalette ist nun der Eintrag Wasserzeichen und Thumbnail markiert. Des weiteren ist der Aufnahme-Knopf aktiviert:

Aktionen werden aufgezeichnet

Bitte achten Sie darauf folgende Schritte genau wie beschrieben auszuführen. Kleine Abweichungen (z.B. wechseln zwischen den geöffneten Dateien) können später zu einem Fehler führen.

Schritt 02: Orginal-Bild öffnen

Über Datei -> Öffnen laden wir zuerst eines unser Original-Bilder in Photoshop. Wählen Sie die Datei ROAE-Tutorial/original_bilder/auto.jpg aus dem entpackten ZIP-Archiv (hier können Sie die Bilder nochmal herunterladen – falls Sie dass noch nicht gemacht haben sollten).

Schritt 03: Hintergrund in Ebene wandeln

Betrachten Sie nun die Ebenenpalette rechts unten (sollte diese nicht sichtbar sein, so blenden Sie diese bitte über Fenster -> Ebenen bzw. die Funktionstaste F7 ein). Klicken Sie mit der rechten Maustaste in der Ebenpalette auf die Ebene Hintergrund und wählen Sie im Kontexmenü Ebene aus Hintergrund. Durch diese Aktion wird die Ebene zu einer “gewöhnlichen” Ebene, was mehr Operationen gestartet.
Den Dialog  welcher Name, Farbe und ähnliches abfragt, bestätigen Sie mit ENTER, d.h. die Standardeinstellungen werden übernommen.

In Ebene wandeln

Die Ebene heißt danach nicht mehr Hintergrund, sondern Ebene 0 oder ähnlich.

Schritt 04: Wasserzeichen kopieren

Wechseln Sie nun auf das zuvor bereits geöffnete Datei logo.gif.

Wählen Sie nun das komplette Bild aus, in dem Sie über das Menü Auswahl -> Alles auswählen oder die Tastenkombination STRG + A verwenden. Kopieren Sie das Wasserzeichen in die Zwischenablage über das Menü Bearbeiten -> Kopieren (alternativ STRG + C).

Schritt 05: Wasserzeichen in Orginal-Bild einfügen

Wechseln Sie nun zurück auf das Original-Bild mit dem Auto und fügen dort das Wasserzeichen über Bearbeiten -> Einfügen (alternativ STRG + V) ein. Das Wasserzeichen wurde nun zentriert eingefügt und in der Ebenen-Palette eine neue Ebene erstellt:

Zentriertes Logo und neue Ebene

Schritt 06: Wasserzeichen ausrichten

Kontrollieren Sie dass in der Ebenen-Palette die Ebene, mit dem Wasserzeichen markiert ist (Ebene 1). Markieren Sie nun wieder alles über Auswahl -> Alles auswählen bzw. STRG + A. Richten Sie nun das Logo aus in dem Sie im Menü Ebene -> Ebenen an Auswahl ausrichten -> Untere Kanten und Ebene -> Ebenen an Auswahl ausrichten -> Rechte Kanten wählen. Das Wasserzeichen befindet sich nun bündig unten rechts.

Wasserzeichen ausgerichtet

Schritt 07: Bild mit Wasserzeichen speichern

Über Datei -> Speichern unter speichern wir das Bild  in dem Ordner roae_tutorial/fertige_bilder/orginal_Bild.jpg. Wählen Sie hierzu bei Format JPEG (*.JPEG, *.JPG, *.JPE).

Bei den Speicheroptionen setzten Sie bitte die Qualität (1) auf Hoch und klicken anschließend auf Speichern .

Qualtität für Bild festlegen

Schritt 08: Thumbnail erstellen

Wählen Sie im Menü Bild -> Bildgröße. Für die Breite tragen Sie 400 unter Pixel ein und klicken anschließend auf OK.

Bildgröße ändern

Schritt 09: Thumbnail speichern

Speichern Sie das verkleinerte Bild nun über Datei -> Speichern unter  in dem Ordner roae_tutorial/fertige_bilder/thumbnail.jpg. Wählen Sie als Dateityp auch hier wieder JPG. Als Qualitätsstufe dürfte hier Mittel in vielen Fällen ausreichend sein.

Schritt 10: Fenster schließen

Schließen Sie nun das Fenster mit dem Orignal-Bild. Eine Nachfrage ob Sie die Änderung speichern wollen verneinen Sie. Die Datei mit dem Wasserzeichen / Logo lassen Sie geöffnet.

Schritt 11: Aufnahme beenden

Beenden Sie nun die Aufnahme über den Button Aufnahme beenden.

Beenden der Aufnahme

Aktion auf alle Bilder in einem Ordner anwenden / Stapelverarbeitung

Damit die Aktion erfolgreich ausgeführt werden kann, schließen Sie alle Dateien in Photoshop. Anschließend öffnen Sie das Wasserzeichen (ROAE-Tutorial/logo.gif).

Einstellungen

Wählen Sie Datei -> Automatisieren -> Stapelverarbeitung. Es öffnet sich ein großer Dialog der sich in die Bestandteile Abspielen, Quelle, Ziel und Fehler unterteilt. Übernehmen Sie nun die Einstellungen wie im Screenshot gezeigt. Die einzelnen Werte sind gefolgt nochmal schriftlich erläutert:

Einstellungen für die Stapelverarbeitung

Abspielen

Wählen Sie bei Satz Standardaktion (1), bei Aktion Wasserzeichen und Thumbnails (2).

Quelle

Bei der Art der Qelle wählen Sie Ordner (3) damit Sie im Dialog den Pfad zu den Orginal-Bildern (ROAE-Tutorial/original-Bilder) angegeben können (4). Öffnen in Aktionen überschreiben (5) muss darüber hinaus aktiviert werden.

Ziel

Bei Ziel wählen Sie wie bei Quelle  Ordner (6) und legen als Pfad im Dialog den Ordner fertige Bilder (ROAE-Tutorial/fertige-Bilder) fest (7). Hier muss “Speichern unter” in Aktionen überschreiben aktiviert werden (8), da sonst die Dateien überschrieben werden.

Im Bereiech Dateibennenung legen Sie bitte folgendes fest: Dokumentenname (9) + _ (10) + Dreistellige Seriennummer (11) + Erweiterung (12). Die Anfangsseriennummer sollte den Wert 1 haben (13)

Fehler

Im Bereich Fehler wählen Sie Bei Fehlern anhalten (14)

Starten und Resultat

Nachdem Sie all diese Einstellungen vorgenommen haben, klicken Sie auf OK (15). Kurz darauf können Sie Photoshop bei der Arbeit zuschauen, wie innerhalb weniger Sekunden die Bilder erstellt  und im Ordner fertige Bilder abgelegt werden:

Die fertigen Bilder, automatisch generiert von Photoshop

Sie können nun natürlich die das Logo oder die Orginal-Bilder durch ihre eigenen ersetzen. Auch können Sie die Aktion anpassen und z.B. die Vorschaubilder mit abgerundeten Ecken versehen.

Für Fragen, Hinweise und Anmerkungen kann wie immer die Kommentarfunktion benutzt werden.

Siehe auch

• Thumbnails erzeugen und Durchschnittsfarbe in PHP ermitteln

Dabei geht es viel einfacher. Warum nicht eine einzelne Wordpress-Installation für mehrere Blogs und Domains nutzen? Die Wordpress-Installation also multidomainfähig machen. So muss nur ein einziges Wordpress-System muss aktualisiert werden und alle meine Blogs arbeiten mitder neuesten Version.

1. Schritt – alle Wordpress-Installationen auf die gleiche Version updaten

Damit die Zusammenführung reibungslos funktioniert müssen zunächst alle vorhandenen Wordpress-Installationen ein letztes mal auf die aktuellste – oder zumindest gleiche – Version aktualisiert werden.

2. Schritt – einen neue Wordpress-Installation in neuem Verzeichnis anlegen

Sind alle Wordpress-Installationen auf die gleiche Version aktualisiert worden müssen wir eine komplett neue Wordpress-Installation anlegen. Dazu laden wir die benötigte Wordpress-Version herunter und entpacken sie auf unseren Server in einem neuen Verzeichnis. Achtung: Die Installation selbst muss nicht ausgeführt werden. Lediglich die Dateien müssen auf den Server entpackt werden.

3. Schritt – eine neue Datenbank anlegen (optional)

Um die neue Installation von allen vorherigen zu trennen empfehle ich eine neue Datenbank anzulegen. Das muss aber nicht sein. Die Wordpress-Installation kann auch in einer bereits vorhanden Datenbank arbeiten.

3. Schritt – die wp-config.php anpassen

Der Trick ist einfach: Wordpress nutzt für die Datenbank einen Table_Prefix. Dieser wird in der wp-config.php festgelegt und kann von uns beliebig verändert werden. Folgende Änderungen an der Variablendeklaration von $table_prefix müssen an der wp-config vorgenommen werden:

$table_prefix = str_replace(array('.', '-' ), '_', $_SERVER['HTTP_HOST'] ) . '_';
$table_prefix = str_replace(array('www_'), '', $table_prefix);

Unser Table_Prefix wird jetzt also gemäß unserer aufgerufenen Domain ausgewählt. Striche und Punkte werden in Unterstriche übersetzt, das “www” entfernt. Beispiel:

• “www.mein-cooler-blog.de” wird auf die Tabellen mit dem Table_Prefix “mein_cooler_blog_de_” basieren
• “www.meinblog.com” wird auf die Tabellen mit dem Table_Prefix “meinblog_com_” basieren
• “blog.meine-domain.de” wird auf die Tabellen mit dem Table_Prefix “blog_meine_domain_de_” basieren

Dazu müssen die Verbindungsdaten der (neu erstellten) Datenbank wie gewohnt in der wp-config.php angepasst werden.

4. Schritt – alle wp-content Ordner übertragen

Sämtliche wp-content Ordner aus den alten Wordpress-Installationen müssen in die neue Installation übertragen werden. Dabei werden alle Bilder, Medien, Plugins und Skins mit übertragen.

5. Schritt – die Datenbanktabellen umziehen

In diesem Schritt müssen alle Datenbanktabellen der einzelnen Wordpress-Installationen in die (neu erstellte) Datenbank umgezogen werden. Das lässt sich mit php_MyAdmin recht leicht lösen (allerdings wird der Table_Prefix nicht geändert und muss manuel geändert werden):

Das PHP-Skript macht dagegen alles vollautomatisch und ändert den Table_Prefix gleich mit:

<?php
function echoOk($msg) { echo('[OK]    ' . $msg . "\n"); }
?><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Datenbank-Umzug</title>
<style>
    div.form label, div.form input {
        display: block;
    }
    div.form label {
        margin: 10px 0 5px 0;
    }
    div.form input {
        margin: 5px 0 10px 0;
    }
</style>
</head>
<body>
<?php
    $formElements = array('server', 'username', 'password',
        'database', 'newdatabase',
        'tableprefix', 'newtableprefix');
    $showForm = false;
    foreach($formElements as $element) {
        if(!isset($_POST[$element])) {
            $showForm = true;
        }
    }
    if($showForm) {
?>
<div class="form">
    <form action="" method="post">
        <fieldset>
            <label for="server">Datenbank-Server</label>
            <input type="text" name="server" />
            <label for="username">Benutzername</label>
            <input type="text" name="username" />
            <label for="password">Passwort</label>
            <input type="password" name="password" />
        </fieldset>
        <fieldset>
            <label for="database">Ursprüngliche Datenbank</label>
            <input type="text" name="database" />
            <label for="newdatabase">Neue Datenbank</label>
            <input type="text" name="newdatabase" />
            <label for="tableprefix">Ursprünglicher Table_Prefix</label>
            <input type="text" name="tableprefix" />
            <label for="newtableprefix">Neuer Table_Prefix</label>
            <input type="text" name="newtableprefix" />
        </fieldset>
        <fieldset>
            <p>ACHTUNG: Dieses Skript sendet manche der eingegebenen Daten ungefiltert an die Datenbank und überschreibt bereits existierende Tabellen beim Umzug!</p>
            <input type="submit" />
        </fieldset>
    </form>
</div>
<?php } else {
    echo('<pre>');
    try {

        $con = mysql_connect($_POST['server'], $_POST['username'], $_POST['password']);
        if(!$con) {
            throw new Exception('Verbindung mit Server nicht möglich. ' . mysql_error());
        } else {
            echoOk('Mit \'' . htmlentities($_POST['server']) . '\' verbunden.');
        }

        if(!mysql_select_db($_POST['database'], $con)) {
            throw new Exception('Auswahl der Datenbank nicht möglich. ' . mysql_error());
        } else {
            echoOk('Aktuelle Datenbank \'' . htmlentities($_POST['database']) . '\'.');
        }

        $res = mysql_query('SHOW TABLES IN `' . $_POST['database'] . '` LIKE \'' . $_POST['tableprefix'] . '%\'', $con);
        if(!$res) {
            throw new Exception('Fehler bei Datenbankabfrage. ' . mysql_error());
        } else {
            while($result = mysql_fetch_row($res)) {
                $tables[] = $result[0];
                $newTables[] = str_replace($_POST['tableprefix'], $_POST['newtableprefix'], $result[0]);
            }
            $numTables = count($tables);
            if($numTables > 0) {
                echoOk($numTables . ' Tabellen mit Table_Prefix \'' . htmlentities($_POST['tableprefix']) . '\' in Datenbank \'' . htmlentities($_POST['database']) . '\' gefunden.');
            } else {
                throw new Exception('Keine Tabellen mit Table_Prefix \'' . htmlentities($_POST['tableprefix']) . '\' gefunden.');
            }
        }

        foreach($tables as $num => $table) {
            $res = mysql_query('DROP TABLE IF EXISTS `' . $_POST['newdatabase'] . '`.`' . $newTables[$num] . '`', $con);
            if(!$res) {
                throw new Exception('Fehler bei Datenbankabfrage: ' . mysql_error());
            }
            $res = mysql_query('CREATE TABLE `' . $_POST['newdatabase'] . '`.`' . $newTables[$num] . '` LIKE `' . $_POST['database'] . '`.`' . $table . '`');
            if(!$res) {
                throw new Exception('Fehler bei Datenbankabfrage: ' . mysql_error());
            }
            $res = mysql_query('INSERT INTO `' . $_POST['database'] . '`.`' . $table . '` SELECT * FROM `' . $_POST['newdatabase'] . '`.`' . $newTables[$num] . '`');
            if(!$res) {
                throw new Exception('Fehler bei Datenbankabfrage: ' . mysql_error());
            } else {
                $process = round($num / $numTables * 100);
                if($process < 10) {
                    $process = ' ' . $process;
                }
                if($process < 100) {
                    $process = ' ' . $process;
                }
                echoOk('[' . $process . '%] Tabelle \'' . htmlentities($table) . '\' nach \'' . htmlentities($newTables[$num]) . '\' kopiert.');
            }
        }
        echoOk('[100%] ' . $numTables . ' Tabellen kopiert.');

        if(!mysql_close($con)) {
            throw new Exception('Verbindung mit Server konnte nicht geschlossen werden.');
        } else {
            echoOk('Verbindung mit Server geschlossen.');
        }

    } catch(Exception $e) {
        echo('[ERROR] ' . $e->getMessage() . "\n");
    }
    echo('</pre>');
} ?>
</body>
</html>

Das Skript zum schnellen Umzug von mysql Tabellen kann auch hier heruntergeladen werden: PHP Skript zum schnellen Umzug von mysql Tabellen

6. Schritt – Domain ändern

Letzter Schritt: Die Domain muss jetzt nur noch auf den Speicherplatz der neuen Wordpress-Installation umgestellt werden.

Troubleshooting bei “kaputten” Umlauten

Sollten Umlaute nicht funktionieren, empfehle ich diesen Blogpost: Den Inhalt einer mysql Datenbank in utf8 umwandeln