TheGeek.de » Coding

Empfehlung: typeface.js – TTF und OTF Schriften im Browser verwenden

Marc — Tue, 29 Dec 2009 17:49:23 +0000

Ich habe die letzten zwei Tage für ein Kundenprojekt ein Screendesign in XHTML und CSS umgesetzt. Wichtiger Wunsch des Kunden war dabei, dass die extra für den Kunden entworfene Hausschrift Verwendung in der Webseite findet. Und das nicht zu knapp: Überschriften und vorallem das Menü sollte in der Schriftart “RKM Headline” ausgegeben werden.

Um TrueType/OpenType Schriften in eine Webseite zu integrieren, gibt es verschiedene Möglichkeiten. Einmal wäre da sIFR, was ich aber nicht verwenden wollte, da ich Flash eher mit Abneigung gegenüberstehe und es zudem Probleme mit AdBlockern geben kann. Die nächste Möglichkeit wäre gewesen, es mit CSS3 zu lösen, was aber ebenfalls ausschied, da dies von zu wenig Browsern unterstützt wird.

Nach ein wenig Recherche fand ich allerdings eine mir zusagende Lösung: typeface.js – ein kleines JavaScript, dass mittels SVG/VML die als TTF oder OTF gelieferte Schriftart im Browser verfügbar macht.

Der Einsatz ist relativ einfach: Auf der Webseite von typeface können beliebige Schriften (TTF/OTF) in JavaScript Dateien konvertiert werden, die zusammen mit der typeface.js im Header der Seite nach den eigenen CSS-Definitionen eingebunden werden.

Hier ein Beispiel:


	Beispiel

Anhand dieses HTML-Codes wird ein wichtiges Detail bereits deutlich: Jede Schriftvariante (Fett/Kursiv/…) muss gesondert in eine JavaScript Datei konvertiert werden, denn nur so ist es typeface möglich auch CSS-Angaben wie “font-weight: bold” richtig zu interpretieren. Fehlt die Fettschriftvariante der Schriftart, wird der Text nicht umgewandelt. Ein kleiner Stolperstein, aber wer es weiß, für den ist es kein Problem.

Ansonsten ist der weitere Einsatz von typeface einfach: Headline-Tags können per Stylesheet formatiert werden, bei anderen Tags muss eine Style-Angabe im Tag direkt gesetzt sein, Kind-Elemente werden nicht beachtet.

Beispieldefinition eines Headline-Tags:

#middle h2 {
	font-size:20px;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:18px;
	font-family:'RKM Headline',Arial,Helvetica,sans-serif;
	font-weight:bold;
}

Der Tag wird erstmal wie gewöhnlich formatiert, so dass die Überschrift auch schön aussieht, wenn typeface nicht funktioniert. Dann wird per “font-family” einfach unsere selbst erzeugte Schriftart “RKM Headline” gesetzt, um den Rest kümmert sich das JavaScript.

Möchtest du ein anderes Element als eine Headline mit der Schriftart anzeigen, kann dies auch über das Style-Attribut des Tags gelöst werden:

	Dies ist ein schöner Link
	

	

	Dies ist ein schöner externer Link

Hier nur wichtig: Im Class-Attribut des Tags muss “typeface-js” vorkommen, der Rest läuft über das Style-Attribut, aber auch die CSS-Attribute – wie z.B. die Schriftgröße – die auf das Element wirken werden berücksichtigt.

Schon klasse muss ich sagen… und OpenSource noch dazu! Daumen hoch für typeface!

Per RegEx geraden und ungeraden Tabellen-Zeilen ensprechende CSS-Klassen zuweisen

Marc — Wed, 23 Dec 2009 12:12:04 +0000

Wer vor dem Problem steht, dass ein Kunde bei einer Web-Anwendung unbedingt Tabellen-Zeilen mit wechselnden Farben je gerader und ungerader Zeile wünscht und dafür ca. 200 Kilobyte Quellcode überarbeiten müsste, der kann es sich ein wenig vereinfachen, wenn folgender Code vor der Ausgabe auf den auszugebenden Inhalt angewendet wird.

Das Skript durchsucht mit zwei kleinen Regular Expressions den Inhalt nach Tabellen und weist dann den Tabellen-Zeilen entsprechende Klassen (even/odd) zu. So können alle Tabellen per CSS formatiert werden. Klar leidet darunter die Performance etwas, aber sicherlich nicht viel mehr, als wenn ich in jeder Schleife in der eine Tabelle aufgebaut wird ein Zähler mitlaufen lasse und eine Bedingsabfrage mache.

	// Convert table rows to even/odd class
	preg_match_all( "/(.*)<\/table>/siU", $html, $matches );
	if( $matches )
	{
		foreach( $matches[ 1 ] AS $tbody )
		{
			$new_rows = '';
			if( preg_match_all( "/.+<\/tr>/siU", $tbody, $tbmatches ) )
			{
				$i = 0;
				foreach( $tbmatches[ 0 ] AS $tr )
				{
					// Ignore rows containing th cells
					if( strpos( $tr, '
Im Grunde ganz einfach: Die erste RegEx sucht alle vorhanden Tabellen und deren Inhalt. Danach werden die Zeilen des Inhalts ebenfalls per RegEx ermittelt und per Zeichenersetzung angepasst.
Vielleicht hilft das ja Jemandem irgendwann mal…

Spaß mit der Twitter API und Ausdruck des Protests gegenüber Harley Davidson

Marc — Wed, 09 Dec 2009 12:54:30 +0000

@moto1203 hat mich über Twitter kontaktiert und gefragt, ob es nicht irgendwie möglich sei ein Programm zu schreiben, dass bei bestimmten Hashtags eine @reply erzeugt. Thematisch ging’s konkret um den bekannten Motorradhersteller “Harley Davidson”, der kürzlich die Tochter- und Traditionsfirma “BUELL” einfach so dicht gemacht hat. Buell Motorräder wurden “nicht oft genug” verkauft, was aber nichts daran ändert, das die Kisten ihren Markt hatten. Das fanden wir jedenfalls schon ziemlich kacke von Harley Davidson.

Also habe ich kurzerhand einen neuen Twitter-Account mit dem klangvollen Namen “@subversives” erstellt und ein kleines PHP-Skript geschrieben, dass neue Tweets mit einem #harley Hashtag sucht und eine zufällig ausgewählte Antwort erstellt. Natürlich konfigurierbar. :-)

Dazu gibt es zwei kleine Funktionen. Die erste Funktion sucht Tweets nach einem bestimmten Suchbegriff:

// Twitter search api
function twt_search( $username, $password, $search, $since_id = 0, $rpp = 30, $page = 1 )
{
	// Curl init
	$curl = curl_init();

	// Curl basic settings
	curl_setopt( $curl, CURLOPT_URL, 'http://search.twitter.com/search.json' );
	curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );
	curl_setopt( $curl, CURLOPT_USERPWD, "$username:$password" );
	curl_setopt( $curl, CURLOPT_POST, true );

	// Build POST parameters
	$post_arr = array();
	$post_arr[] = "q=" . urlencode( $search );
	if( !empty( $since_id ) )
		$post_arr[] = "since_id=" . $since_id;
	if( !empty( $rpp ) )
		$post_arr[] = "rpp=" . $rpp;
	if( !empty( $page ) )
		$post_arr[] = "page=" . $page;
	curl_setopt( $curl, CURLOPT_POSTFIELDS, implode( '&', $post_arr ) );

	// Exec, set return
	$return = json_decode( curl_exec( $curl ) );

	// Close curl
	curl_close( $curl );

	return $return;
}

Übergeben werden Benutzername, Passwort, der Suchbegriff und – wenn bekannt – auch die “since_id”, welche es ermöglicht nur Tweets mit einer höheren ID zu ermitteln. Das ist für unser lustiges Protest-Skript wichtig, denn wir wollen die Leute ja nicht zuspammen und immer wieder auf die gleichen Tweets antworten. Nur neue Tweets seit der letzten Suche sollen berücksichtigt werden, also merken wir uns einfach die höchste Tweet ID und übergeben diese wieder bei der nächsten Suche. Der Parameter “rpp” steht übrigens für “results per page” – mit der Voreinstellung werden also maximal 30 Tweets zurückgegeben.

Technisch wird die Abfrage über die CURL-Bibliothek realisiert, theoretisch ginge es aber auch mit “file_get_contents” oder “fopen”, aber ich mag CURL. Ist ganz praktisch.

Die zweite benötigte Funktion erstellt über die Twitter API einen neuen Tweet. Auch hier stehen wieder einige Parameter zur Verfügung:

// Twitter update api
function twt_update( $username, $password, $status, $in_reply_to_status_id = '', $lat = '', $long = '' )
{
	// Curl init
	$curl = curl_init();

	// Curl basic settings
	curl_setopt( $curl, CURLOPT_URL, 'http://twitter.com/statuses/update.json' );
	curl_setopt( $curl, CURLOPT_RETURNTRANSFER, 1 );
	curl_setopt( $curl, CURLOPT_USERPWD, "$username:$password" );
	curl_setopt( $curl, CURLOPT_POST, true );

	// Build POST parameters
	$post_arr = array();
	$post_arr[] = "status=" . urlencode( $status );
	if( !empty( $in_reply_to_status_id ) )
		$post_arr[] = "in_reply_to_status_id=" . $in_reply_to_status_id;
	if( !empty( $lat ) )
		$post_arr[] = "lat=" . $lat;
	if( !empty( $long ) )
		$post_arr[] = "long=" . $long;
	curl_setopt( $curl, CURLOPT_POSTFIELDS, implode( '&', $post_arr ) );

	// Exec, set return
	$return = json_decode( curl_exec( $curl ) );

	// Close curl
	curl_close( $curl );

	return $return;
}

Neben Nutzername und Passwort können an diese Funktion der Statustext (Tweet) und der sehr wichtige Parameter “in_reply_to_status_id” übergeben werden. Wird die ID eines Tweets mit diesem Parameter übergeben, erkennt Twitter, dass es sich um eine @rely zu dem Tweet mit der übergebenen ID handelt. Da wir ja Antworten senden wollen, genau das richtige! Die Parameter “lat” und “long” sind übrigens nur schmückendes Beiwerk und werden von mir nicht genutzt. Ich habe das nur der Vollständigkeit halber mit rein genommen.

Nun zur Anwendung der Funktionen:

// Twitter account settings
$username = 'user';
$password = 'pass';

// Configure some reply variations in english and german
$replys_en = array(
	'Always remember #BUELL if you talk about Harley Davidson!',
	'Hey, remember #BUELL if you talk about Harley Davidson!',
	'Remember #BUELL FOREVER! Harley Davidson? NEVER!',
	'It makes me sick, that you dont talk about #BUELL ;-)',
	'#BUELL #BUELL #BUELL remember the Harley Davidson #FAIL',
	'#BUELL killed by Harley Davidson in 2k9. Remember that!',
	'#BUELL will never die. Harley Davidson will.'
);
$replys_de = array(
	'Erinner dich an #BUELL wenn du über Harley Davidson sprichst!',
	'Harley Davidson? Die Firma, die #BUELL zerstört hat?',
	'#BUELL FOREVER! Harley Davidson? NEVER!',
	'Es macht mich krank, dass nicht auch über #BUELL sprichst!',
	'#BUELL #BUELL #BUELL denk an den Harley Davidson #FAIL',
	'#BUELL wurde von Harley Davidson 2k9 geschlossen. HD is next!',
	'#BUELL wird niemals sterben, aber Harley Davidson. #Rentnerchopper'
);

// Load last parsed tweet id
if( file_exists( 'harley_since_id.dat' ) )
	$harley_since_id = file_get_contents( 'harley_since_id.dat' );
else
	$harley_since_id = 0;

// Search for tag harley
$harley = twt_search( $username, $password, '#harley', $harley_since_id );
if( is_object( $harley ) )
{
	if( count( $harley -> results ) )
	{
		foreach( $harley -> results AS $rkey => $tweet )
		{
			// Descending order, so the first array element has the highest id!
			if( $rkey == 0 )
				$harley_since_id = $tweet -> id;
			// Only reply if buell not found
			if( stripos( $tweet -> text, 'buell' ) === false && $tweet -> from_user != $username )
			{
				if( $tweet -> iso_language_code != 'de' )
					$reply = "@{$tweet->from_user} " . $replys_en[ array_rand( $replys_en ) ];
				else
					$reply = "@{$tweet->from_user} " . $replys_de[ array_rand( $replys_de ) ];

				echo "$reply\n";

				// Send reply
				twt_update( $username, $password, $reply, $tweet -> id );
			}
		}
	}
	else	echo "No new tweets to tag #harley\n";
}

// Store last parsed tweet id
file_put_contents( 'harley_since_id.dat', $harley_since_id );

Zuerst werden in zwei Arrays englische bzw. deutsche Ausdrücke des Protests definiert, danach wird aus einer kleinen Datendatei die ID des letzten gefundenen Tweets geladen und die Suche ausgeführt.
Die Suchfunktion gibt ein Objekt zurück, dass in der Eigenschaft “results” die gefundenen Tweets als Array enthält, welches anschließend durchlaufen wird. Beim ersten gefundenen Tweet wird die “since_id” neu gesetzt. Warum beim ersten? Na, weil die Tweets absteigend sortiert sind – der Erste ist also immer der Aktuellste.
Enthält der Tweet nicht das Wort “buell”, wird in der entsprechenden Sprache (deutsch oder englisch) eine @reply an den Twitter-Account des Tweets gesendet.

Tja, das war’s eigentlich schon. Wer es mal probieren und einen Spruch reingedrückt bekommen will, der zwitschert einfach mal was mit dem Hashtag #harley – es dauert allerdings ein wenig, bis die Antwort kommt, das Skript läuft nur alle 15 Minuten.

Ich bin gespannt, wie lange der Account aktiv ist, ohne als Spam gemeldet zu werden. ;-)

Interessantes Menü mit CSS Rotation

Marc — Tue, 08 Dec 2009 12:06:02 +0000

Gestern habe ich einen Artikel über Rotation von HTML Elementen mittels CSS auf snook.ca gelesen und da kam mir die Idee, dass mit diesen CSS-Anweisungen ja auch ein stylisches Menü gebastelt werden kann. Also habe ich mich gestern Abend kurz an den Rechner gesetzt und ein wenig gespielt. Nach anfänglichen Problemen im FireFox – was ich nicht erwartet hätte, ich dachte eher der IE spackt mal wieder rum – hat es mit meinem 90° gegen den Uhrzeigersinn gedrehtem Menü auch hingehauen.

Viel braucht es wirklich nicht, nur ein wenig HTML und ein wenig CSS, wobei der HTML-Code für das Menü absoluter Standard-Code ist, der auch für ein Top-Menü Verwendung finden würde.



		Home
		Weblog
		Infos
		Pornos
		Impressum

Der “menucontainer” ist übrigens überflüssig, den habe ich nur verwendet, weil ich das Menü nicht zentrieren, sondern etwas versetzt nach links anzeigen wollte.

Klarer wird es sichlich mit dem folgenden CSS, welches das Menü darstellt:

* {
	margin: 0em;
	padding: 0em;
	border: none;
}
#menucontainer {
	width: 800px;
	margin: auto auto;
}
#menu {
	width: 200px;
	-webkit-transform: rotate( -90deg );
	-moz-transform: rotate( -90deg );
	-moz-transform-origin: 100px 100px;
	filter: progid:DXImageTransform.Microsoft.BasicImage( rotation=3 );
}
#menu a:link, #menu a:visited {
	background-color: #F00;
	color: #FFF;

	margin-bottom: 25px;
	width: 200px;
	height: 50px;
	padding: 5px;
	line-height:90%;
	display: block;

	font-family: sans-serif;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
}
#menu a:hover {
	background-color: #DDD;
	color: #F00;
}

Wenn ich ein CSS-Stylesheet beginne, schalte ich zuerst für alle Elemente die margins, paddings und die borders aus, um sie später für die Elemente wieder zu setzen, wo ich diese Eigenschaften wirklich brauche. Das macht die ganze Sache immer klarer und behebt viele Probleme mit dem IE auf einen Schlag.

Dem div “menucontainer” wird dann eine Breite von 800 Pixeln zugewiesen und ein automatischer margin, wodurch das gesamte div element im Browser zentriert wird.

Dann kommt schon die Anweidung, die das Menü gegen den Uhrzeigersinn dreht. Zuerst wird eine Breite vergeben, die der Breite der einzelnen Menüpunkte entspricht. Das muss so sein, sonst funktioniert es im IE 7 nicht.
Danach folgen Anweisungen für die verschiedenen Browser um die Rotation durchzuführen. Wichtig beim FireFox: “-moz-transform-origin” muss korrekt gesetzt werden, sonst sitzen die Menüpunkte später zu tief. Jeweils die Hälfte der Menüpunkt-Breite für horizontalen und vertikalen Wert haben sich bei mir bewährt.

Die einzelnen Menüpunkt können beliebig formatiert werden, auch margins und paddings sind kein Problem. Wichtig ist allerdings, dass “display” auf “block” gesetzt wird und feste Breiten und Höhen vergeben werden, sonst wird es Probleme bei der Darstellung geben.

Getestet habe ich die Anweisungen im IE 7 und im FireFox 3.5. Im IE 6 läufts so lala, könnte man sicherlich auch noch hinbekommen, aber ich bin der Meinung, dass der IE 6 nicht mehr unterstützt werden muss. Wer den IE 6 noch nutzt, der fährt auch Autos ohne Bremsen.

Hier gibt’s die komplette Datei und hier eine kleine Vorschau, wie es aussehen könnte:

Home
Weblog
Infos
Pornos
Impressum

Tab-Menüs mit Prototype generalisieren

Marc — Fri, 27 Nov 2009 14:37:56 +0000

Wer kennt es nicht: Mehrere Datentabellen oder -abschnitte auf einer Seite und der Benutzer verliert schnell den Überblick. Die Lösung: Ein wenig JavaScript, mit ein wenig CSS und ein paar DIVs garniert, das ganze kräftig durchkneten und fertig ist der Tabbed-Content für jeden Einsatzzweck.

Hier ein wenig HTML:


Datenblatt 1
Datenblatt 2
Datenblatt 3
Datenblatt 4
Datenblatt 5

Jede Menge Daten (1)
Jede Menge Daten (2)
Jede Menge Daten (3)
Jede Menge Daten (4)
Jede Menge Daten (5)

Oben findet sich unser Tab-Menü, dass die insgesamt 5 Daten-Layer per Klick einblenden soll. Die DIVs mit den Daten sind per Style-Definition erstmal nicht sichtbar, bis auf den ersten DIV, da davon auszugehen ist, dass ohne einen Klick auf etwas das erste Datenblatt angezeigt werden soll. Damit das Tab-Menü auch ansprechend aussieht, brauchen wir noch folgende CSS Definitionen:

#tabmenu {
	overflow:hidden;
	border-bottom:1px solid #FFF;
}
#tabmenu .tab {
	float:left;
	border:1px solid #660000;
	border-bottom:none;
	margin-left:3px;
	padding:3px;
	background-color:#F4F4F4;
	font-weight:bold;
}
#tabmenu .active {
	background-color:#FFFFFF;
	color:#000099;
}
#tabmenu .tab:hover {
	background-color:#FFFFFF;
	cursor:pointer;
}

Damit wir nun nicht für jeden einzelnen Tab eine “onclick” Aktion schreiben müssen, habe ich mir überlegt ein auf Prototype aufsetzendes JavaScript zu schreiben, dass anhand der verwendeten IDs der Tabs und der Daten-DIVs (die nur zueinander passen müssen) eine generell einsetzbare Lösung schafft. Das Skript kann im Head-Bereich der Seite eingebunden werden und durchsucht beim Aufruf, ob Tabs vorhanden sind und behandelt diese entsprechend.

/**
 * Render a tabbed menu
 */
var tabids = [];
var containerids = [];
function create_tabs()
{
	$$('.tab').all( function( el ) {
			tabids.push( el.id );
			containerids.push( el.id.replace( 'tab_', '' ) );
			el.observe( 'click', handle_tab_click );
			return true;
	} );
}
/**
 * Hande a clicked tab
 */
function handle_tab_click( event )
{
	// Get container id
	containerid = this.id.replace( 'tab_', '' );
	// Set active tab menu point
	tabids.all( function( tab ) {
		$(tab).removeClassName( 'active' );
		return true;
	} );
	this.addClassName( 'active' );
	// Set active tab content container
	containerids.all( function( container ) {
		$(container).hide();
		return true;
	} );
	$(containerid).show();
}
/**
 * Init tabbing
 */
Event.observe( window, 'load', create_tabs );

Die erste Funktion “create_tabs” sucht alle DIV-Layer innerhalb der Seite, die mit der CSS-Klasse “tab” versehen sind. Die gefundenen Tabs werden danach zur weiteren Verarbeitung in einem Array gespeichert und mit einer String-Ersetzung der zugehörige Daten-Layer ermittelt. Die IDs der Datenlayer werden ebenfalls in einem Array gespeichert. Zu guter letzt wird dem Tab-Menüpunkt noch eine Handler-Funktion zugewiesen.

Die zweite Funktion ist diese Handler-Funktion. Beim Klick wird zuerst ermittelt, welcher Daten-Layer angezeigt werden soll, indem durch eine Zeichenersetzung das “tab_” in der ID des Tab-Menüpunkts entfernt wird. Übrig bleibt dann z.B. “datasheet1″, wenn der erste Menüpunkt ausgewählt wurde. So weiß die Funktion für den späteren Verlauf, welcher DIV angezeigt werden muss.

Nun geht es daran, das Tab-Menü entsprechend zu verändern, denn es soll ja der angeklickte Menüpunkt hervorgehoben werden. Dazu entfernen wir per Prototype-Methode “all”, die auf das bei der Initialisierung erstellte Array angewendet wird, bei allen Tabs die CSS Klasse “active”. Danach wir die Klasse “active” dann beim angeklickten Punkt gesetzt und das Menü ändert sich so entsprechend dem Nutzerverhalten.

Dann durchlaufen wir ebenfalls mit “all” das Array, das die IDs der Datenblätter enthält und verstecken mittels “hide” alle DIVs. Nun wird nur noch das richtige DIV eingeblendet und das Tabbing ist komplett.

Großes Finale im Skript ist dann noch ein Event-Observer, der nach dem Laden der Seite die Funktion “create_tabs” aufruft und so alle auf der Seite gefundenen Tabs initialisiert.

Wichtig für den Einsatz des Skripts ist nur folgendes: Die IDs der Tab-Menüpunkt und der Layer mit den Daten müssen auf einander abgestimmt sein und ein Tab-Menüpunkt muss immer mit “tab_” beginnen. Lege ich also einen Tab mit der ID “tab_datentabelle123″ an, dann muss das DIV mit den Daten die ID “datentabelle123″ haben, sonst funktioniert es nicht. Natürlich müssen die Tab-Menüpunkte auch die richtigen CSS-Klassen haben, aber das versteht sich wohl von selbst.

Und so könnte es aussehen:

Datenblatt 1

Datenblatt 2

Datenblatt 3

Datenblatt 4

Datenblatt 5

Jede Menge Daten (1)

WordPress und lighttpd, Permalinks mit URL rewriting

Marc — Tue, 24 Nov 2009 11:54:00 +0000

Ich nutze schon seit langem keinen Apache Webserver mehr, sondern lighttpd, da dieser schlank und performant ist. Einziger Nachteil ist in meinen Augen die fehlende Kompatibilität zu “.htaccess” Dateien, die bei vielen Open-Source Web-Anwendungen oft bereits mitgeliefert werden, um z.B. die URL’s für Suchmaschinen zu optimieren. Bei WordPress wird diese Funktion über die sogenannte “Permalink Struktur” realisiert. Einfach erklärt: Mittels URL rewrite wird eine eigentlich nicht existente URL trotzdem an die Web-Anwendung übergeben, ohne einen 404 Status Header zu senden. WordPress kann den passenden Inhalt dann anhand der definierten Permalink Struktur laden und anzeigen. Diese Funktionalität wollte ich bei keinem meiner Blogs missen und kann glücklicherweise auch recht einfach für lighttpd umgesetzt werden.

Lighttpd bietet hierfür die Möglichkeit in einem virtuellen Host eine URL rewrite Regel zu definieren. Im VHost von thegeek.de sieht das z.B. so aus:

# Auszug aus dem thegeek.de VHost
$HTTP["host"] =~ "(^www\.thegeek\.de)|(^thegeek\.de)" {
	url.rewrite =	(
				"^(/gallery/|/wp-.*|/xmlrpc\.php|/robots\.txt|/sitemap\.xml|.*\?album=[0-9]+&gallery=[0-9]+|.*\?p=[0-9]+|.*\?cat=[0-9]+|.*\?feed=|.*\?s=).*$" => "$0",
				"^" => "index.php"
			)
}

Die erste Regel greift bei den URL-Parametern des NextGen Gallery Plugins, den WordPress internen Verzeichnissen und Parametern, der Google-Sitemap, der robots.txt, sowie der XML-RPC und Feed Schnittstelle. Trifft die Regel zu, wird die URL auf keinen Fall umgeschrieben und so wie sie ist weitergegeben. Dies ist absolut notwendig, denn sonst würde z.B. “thegeek.de/wp-admin” auch umgeleitet und das Backend könnte nicht mehr aufgerufen werden.

Die zweite Regel leitet alle restlichen URL’s zur Index Datei von WordPress um, welche die URL dann interpretieren kann, um anhand der Permalink Struktur den richtigen Inhalt zu finden.

Im Grunde recht einfach und vorallem: Es funktioniert prima.

Parallax Scrolling Effekt mit Prototype/Scriptaculous JavaScript

Marc — Wed, 11 Nov 2009 10:09:57 +0000

Wer sich an Spiele wie “Shadow of the Beast” erinnert, der muss sich auch zwangsweise an diesen netten Pseudo-3D Effekt erinnern, mit dem diese Spiele ihren coolen Look erhielten. Parallax Scrolling nennt man diese Technik übrigens, bei der verschiedene Layer aus Grafiken übereinander gelegt und unterschiedlich schnell horizontal oder auch vertikal bewegt werden.

Weil mir gestern Abend langweilig war, habe ich mich damit beschäftigt den Parallax Effekt versuchsweise in JavaScript umzusetzen. Als Bibliotheken verwende ich dabei PrototypeJS und Scriptaculous. Nachdem ich mit einem Grafikprogramm meine 3 Layer gezeichnet und PNGs mit Transparenz exportiert hatte, ging es an die Umsetzung. Schnell wurde mir klar, wie simpel es im Grunde ist mit ein wenig CSS und JavaScript diesen Effekt zu erzeugen.

Das HTML Grundgerüst besteht lediglich aus 3 DIV Layern:

Auf diese DIVs werden ein paar einfache CSS Regeln angewendet, um die Hintergrundgrafiken zu setzen. Zudem wird noch die Breite und Höhe definiert und der “overflow” auf “hidden” gesetzt. So wird es möglich per CSS Anweisung “background-position” den Hintergrund, also unseren Parallax-Layer, zu verschieben und einen Scroll-Effekt zu realisieren.

#layer_bg {
	border:10px solid #FFF;
	width:1150px;
	height:400px;
	margin:auto auto;
	background-image:url( 'layer_bg.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	overflow:hidden;
}
#layer1 {
	background-image:url( 'layer1.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}
#layer2 {
	background-image:url( 'layer2.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}

Die Bewegung der Hintergrundgrafiken übernimmt eine kleine JavaScript-Funktion, an welche die Art der Bewegung übergeben wird.

var position_index1 = 0;
var position_index2 = 0;
var position_index3 = 0;
var effect_running = false;
function run_effect( $move_type )
{
	if( !effect_running )
	{
		effect_running = true;
		if( $move_type == 'move_left' )
		{
			position_index3 += 200;
			position_index2 += 200;
			position_index1 += 200;
		}
		if( $move_type == 'move_right' )
		{
			position_index1 -= 200;
			position_index2 -= 200;
			position_index3 -= 200;
		}
		if( $move_type == 'rotate_left' )
		{
			position_index3 += 200;
			position_index2 += 50;
			position_index1 -= 200;
		}
		if( $move_type == 'rotate_right' )
		{
			position_index3 -= 200;
			position_index2 -= 50;
			position_index1 += 200;
		}
		new Effect.Morph( 'layer_bg', { style:'background-position:' + (position_index3 * 1) + 'px 0px;' } );
		new Effect.Morph( 'layer2', { style:'background-position:' + (position_index2 * 2) + 'px 0px;' } );
		new Effect.Morph( 'layer1', { style:'background-position:' + (position_index1 * 3) + 'px 0px;', afterFinish:function() { effect_running = false; } } );
	}
}

Bei Eintritt in die Funktion wir zuerst geprüft, ob eine Bewegung nicht bereits läuft, falls das nicht der Fall ist, werden für die unterschiedlichen Bewegungs-Arten die neuen Werte für die Hintergrund-Position des Hintergrundbildes berechnet und anschließend mit dem Effekt “Morph” gesetzt. Je näher der Layer an der “Kamera” ist, um so mehr (schneller) wird er bewegt, wodurch dem Betrachter eine dritte Dimension vorgegaukelt wird.

Wer das vollendete Versuchsobjekt betrachten möchte, der kann das nun gerne tun und noch einen Blick in den Quellcode der Seite werfen. Ich habe den Code noch um einige Kleinigkeiten erweitert, z.B. um die Steuerung per Pfeiltasten.

Natürlich ist das mal wieder sinnloses eyecandy, denkbar wäre aber, ein schickes Menü damit zu realisieren.

SOAP Dienste programmieren mit PHP

Marc — Tue, 10 Nov 2009 13:28:11 +0000

Wer für seine eigene Anwendung eine Web-API anbieten möchte, hat vielfältige Möglichkeiten dies zu realisieren. Per einfachem HTTP GET oder POST Request und einer Rückgabe als XML/RSS/CSV/JSON/whatever, oder – was ich etwas eleganter finde – per SOAP. Dabei ist das Entwickeln eines eigenen SOAP Dienstes mit PHP gar nicht so kompliziert, wie vielleicht vermutet. Zumindest finde ich SOAP schöner als die weitere Alternative XML-RPC.

Aber nun zur Definition von SOAP (Quelle: Wikipedia): SOAP (ursprünglich für Simple Object Access Protocol) ist ein Netzwerkprotokoll, mit dessen Hilfe Daten zwischen Systemen ausgetauscht und Remote Procedure Calls durchgeführt werden können. SOAP stützt sich auf andere Standards: XML zur Repräsentation der Daten und Internet-Protokolle der Transport- und Anwendungsschicht (vgl. TCP/IP-Referenzmodell) zur Übertragung der Nachrichten. Die gängigste Kombination ist SOAP über HTTP und TCP.

In der Praxis bedeutet das folgendes: In einer XML Datei (WSDL) werden Nachrichten-Typen definiert und an Operationen gebunden. Dabei gibt es Input-Nachrichten und Output-Nachrichten, sprich Übergaben und Rückgaben. Die WSDL Datei (WSDL = Web Services Description Language) wird dabei vom Client, als auch vom Server genutzt und regelt so die Kommunikation dieser beider Stellen.

Die Vorgehensweise um einen neuen Web-Service zu erstellen ist bei mir immer zuerst die WSDL zu erzeugen, danach die Operationen im Server abzubilden, um diese anschließend mit dem Client zu testen. Eine Beispiel WSDL könnte z.B. so aussehen:




	
	
		
		
	
	
		
		
		
		
	
	
		
			
			
		
	
	
		
		
			
			
				
			
			
				
			
		
	
	
		Return latest posts

Diese WSDL definiert eine einfache Funktion “GetPosts” mit einer eingehenden Nachricht und einer ausgehenden Nachricht. Für die einzelnen Felder der Nachrichten sind entsprechende Typen definiert. Nachdem die Nachrichten an die Operation “GetPosts” gebunden wurden, wird mit dieser Operation ein Soap-Service definiert. Ein Service besteht also aus einem Binding, welches wiederum aus eine Input- und/oder Output-Message besteht. Das klingt nun zugegeben ziemlich kompliziert, ist aber in der Praxis wirklich einfach nachzuvollziehen, wenn wir uns mal den Server-Quellcode zu dieser WSDL Definition ansehen.

 'UTF-8' );

// Don't cache WSDL files, mandatory for development
ini_set( 'soap.wsdl_cache_enabled', '0' );

class thegeek_soapserver
{
	function __construct( $parameters )
	{

	}

	public function GetPosts( $apikey = '', $num = 10 )
	{
		if( $apikey == 'demoapikey' )
		{
			$posts = array( 	array( 'title' => 'Demo Post 1', 'body' => 'Demo content 1' ),
						array( 'title' => 'Demo Post 2', 'body' => 'Demo content 2' ),
						array( 'title' => 'Demo Post 3', 'body' => 'Demo content 3' ),
						array( 'title' => 'Demo Post 4', 'body' => 'Demo content 4' )
			);
			return array(	'return' => true,
					'error' => '',
					'posts' => $posts,
					'posts_count' => 0
			);
		}
		// API KEY FAIL
		else
		{
			return array(	'return' => false,
					'error' => 'API KEY INVALID',
					'posts' => array(),
					'posts_count' => 0
			);
		}
	}
}

// Run SOAP server
$soapserver = new SoapServer( 'http://thegeek.de/wp-soap/thegeek.wsdl', $soap_config );
$soapserver -> setClass( 'thegeek_soapserver', 'some parameters for the constructor (example only...)' );
$soapserver -> handle();

?>

Nachdem die Soap-Config für die PHP Klasse “SoapServer” definiert und das caching von WSDL Dateien per “ini_set” ausgeschaltet wurde, folgt unsere eigene Klasse, die den Web-Service abbildet. Der Konstruktor kann wie gewohnt definiert werden, auch beim Initialisieren unserer Klasse über die PHP Klasse “SoapServer”, können beliebige Parameter übergeben werden. Übrigens sind auch extends problemlos möglich.

Dann findet sich in der Klasse eine Methode, welche unseren SoapService “GetPosts” abbildet, als Übergabeparameter sind die Variablen unserer Input-Nachricht angegeben. Wie die Variablennamen in der Methode gewählt werden ist egal, aber die Methode muss genau so heißen, wie in der WSDL angegeben (soap:operation soapAction=”GetPosts”). Der Code in der Methode dient natürlich nur der Verdeutlichung, wie Rückgaben erfolgen, nämlich als assoziatives Array, welches die in der WSDL definierte Output-Nachricht abbildet.

Um unsere Server-Klasse dann zu initialisieren, wird die PHP Klasse “SoapServer” mit entsprechenden Parametern (Web-Pfad zur WSDL, SoapConfig) aufgerufen. Danach wird mit Hilfe der Methode “setClass” unsere Klasse als Handler ausgewählt und der Server letztendlich mit der Methode “handle” konstruiert.

Fehlt eigentlich nur noch ein kleiner Test-Client:

 'UTF-8' ) );
if( is_object( $soap_client ) )
{
	$soap_result = $soap_client -> GetPosts( 'demoapikey', 10 );
	// Debug output
	echo "";
	print_r( $soap_result );
	echo "";
}
else	die( 'SOAP Server not available' );

?>

Der Client ist ziemlich problemlos umzusetzen: Einfach mit der PHP Klasse “SoapClient” ein Client-Objekt erzeugen (Web-Pfad zur WSDL übergeben) und die Methoden (= Operationen) wie in der WSDL definiert nutzen. Obiges Beispiel gibt folgendes aus:

Array
(
    [returncode] =>
    [error] =>
    [posts] => Array
        (
            [0] => Array
                (
                    [title] => Demo Post 1
                    [body] => Demo content 1
                )

            [1] => Array
                (
                    [title] => Demo Post 2
                    [body] => Demo content 2
                )

            [2] => Array
                (
                    [title] => Demo Post 3
                    [body] => Demo content 3
                )

            [3] => Array
                (
                    [title] => Demo Post 4
                    [body] => Demo content 4
                )

        )

    [posts_count] => 0
)

So schwierig ist das mit SOAP und PHP also nicht. Wichtig ist allerdings noch: PHP muss mit der Option “–enable-soap” kompiliert werden, um die SOAP Extension nutzen zu können. Alternativ kann aber auch das SOAP PEAR Paket genutzt oder auf die Klasse nuSoap zurückgegriffen werden.

Wer selbst mal von seinem Webspace aus testen will: http://thegeek.de/wp-soap/thegeek.wsdl

Wer Fragen hat: Comments are open.

Twitter Listen als RSS/Atom Feed abonnieren

Marc — Mon, 09 Nov 2009 12:17:53 +0000

Die neue Listenfunktion bei Twitter ist klasse, denn damit lassen sich endlich die Leute denen man folgt thematisch gruppieren. Da die Listen nun auch per Twitter API angesprochen werden können, ist es möglich die Tweets einer Liste per RSS bzw. Atom zu abonnieren. Eine praktische Sache.

Einfach im Browser oder RSS Reader eine dem folgenden Format entsprechende URL eingeben:

http://api.twitter.com/1/ACCOUTNAME/lists/LISTENNAME/statuses.atom

Wobei “ACCOUNTNAME” durch den Twitternamen z.B. “motorradblogger” zu ersetzen ist. Das gleiche gilt natürlich für “LISTENNAME“.

Zum Beispiel so: Meine Liste von Motorradbloggern.

E-Mail Adresse vor Spam-Robots schützen

Marc — Tue, 03 Nov 2009 12:16:39 +0000

Wenn man mal eben fix eine E-Mail Adresse vor Spam-Robots sichern will, dann geht das ganz einfach mit ein wenig JavaScript.

	// Entweder so
	document.write( 'post'+'@'+'thegeek'+'.'+'de' );

	// Oder auch so [prototype]
	$('my_mail_adress').update( 'post'+'@'+'thegeek'+'.'+'de' );

Wichtig ist noch folgendes:

Sollte JavaScript nicht verfügbar sein, wird einfach die E-Mail Adresse ohne “@”-Zeichen und Domain ausgegeben, was die Spam-Robots nicht dekodieren können.

Siehe hier (mit Protype umgesetzt, da document.write bei asynchron geladenem Content nicht sinnvoll ist):

PS: Die Mail-Adresse existiert nicht und wurde wirklich dynamisch mit JavaScript eingefügt. :-)