Aber zuerst eine kleines Beispiel, wie der HTML-Code dazu aussehen könnte:

<select name="auswahl" id="auswahl">
	<option value="">--Bitte wählen --</option>
	<option value="1">Eins</option>
	<option value="2">Eins</option>
	<option value="3">Eins</option>
	<option value="4">Eins</option>
	<option value="5">Eins</option>
	<option value="1000000">Einemiooooon!!!!</option>
</select>

Filtern:
<input type="text" size="12" value="" onkeyup="filterSelectField( 'auswahl', this.value )"/>

Die dazugehörige JavaScript-Funktion sieht dann so aus:

function filterSelectField( fieldid, s ) {
	var rex = new RegExp( '^' + s.replace( '\.', '\\.' ), "i" );
	$$('select#' + fieldid + ' option').each( function (ele) {
		if( ele.value != '' )
		{
			if( ele.innerHTML.search( rex ) == -1  )
				ele.hide();
			else
				ele.show();
		}
	} );
}

Die Funktionsweise ist schnell erklärt: Mittels einer RegEx wird die Bennenung des Werts der “option” durchsucht und bei einem Treffer angezeigt und bei keinem Treffer ausgeblendet. Einfacher und schneller geht’s nun wirklich nicht. :-)

Viel Spaß damit.

Anonymous

Derzeit ist die Hacker Gruppierung Anonymous des öfteren in Medien, sei es mit dem bereits jetzt legendärem Hack der Gema durch die AnonyPwnies, oder mit der “Operation Bart” in den USA. Zudem läuft hier in Deutschland derzeit die “Operation Summerstorm”, sowie “Operation Blitzkrieg”, die sich den Rechtsradikalen entgegenstellt und deren Webseiten hackt und mit DDoS Angriffen blockiert – so zum Beispiel die Webseite der NPD. Bei den DDoS Angriffen wird das Tool LOIC (“Large Orbit Ion Canon”) eingesetzt, was allerdings so einige Probleme mit sich bringt: Die Server werden von vielen Teilnehmern der Aktionen mit sinnlosen HTTP Requests geflutet, die IP Adressen der Teilnehmer landen dabei natürlich im Log des Webservers, wodurch es in den .NL und in .GB bereits zu Festnahmen gekommen ist, die IP Adressen führten die Ermittler zu den Angreifern. Die IP ließe sich natürlich auch fälschen, doch die Mehrheit der Teilnehmer an den DDoS Aktionen wird wohl ein Windows XP/Vista/7 verwenden, wo IP Spoofing nicht mehr möglich ist. Um diese Problematik zu umgehen, entwickeln einige Anonymous Hackavisten derzeit an einem neuen Tool mit dem Namen “RefRef”, das nach einem anderen Prinzip arbeitet. Ich habe mir das Thema angesehen und will nun ein wenig etwas darüber schreiben.

Laut den Entwickeln wird das in JavaScript geschriebene Tool RefRef darauf basieren, dass sich per JavaScript “die eigene Rechenkapazität der Website gegen [die Website] selbst richtet”. Dazu nutzt das Tool “Schwachstellen in SQL aus, um einen vernichtenden Effekt auf die Ziel-Website auszuüben”. Laut Informationen der Entwickler nutze RefRef eine Schwachstelle im Javascript und im SQL-Server aus, um eine JavaScript Datei im Temp-Verzeichnis des Servers abzulegen, um mit einem erneuten Request diesen in eine Endlosschleife von Selbstaufrufen zu bringen. Das klingt für mich ehrlich gesagt ziemlich seltsam und verworren, gut war glaube ich auch ein Artikel beim “ehemaligen Nachrichtenmagazin”. Auch die weiteren Medienberichte zum neuen Tool geben wenig Aufschluss, sind alle irgendwie unterschiedlich und ich halte die Aussagen für ziemliches Snakeoil – trotz der Tatsache, das dieses neue Tool angeblich bereits erfolgreich an pastebin getestet wurde.

Was ich mir vorstellen könnte, wäre allerdings folgendes Szenario: Wenn eine Seite für SQL-Injections anfällig ist, wäre es durchaus möglich von außen nicht erwünschte Inhalte in die Seite einzuschleusen. Dieser Inhalt könnte z.B. ein kleines JavaScript sein, dass in einem sehr kleinen Intervall asynchrone HTTP Requests erzeugt, die ebenfalls die SQL-Injection ausnutzen und den Datenbank Server zusätzlich mit sinnlosem Quatsch (z.B. “BENCHMARK” hehe) beschäftigen. Hierdurch würden auch reguläre Besucher der Seite zum DDoS beitragen, was ein unglaublich wirkungsvoller Multiplikator, gerade bei stark frequentierten Seiten wäre. Zudem handelt es sich bei einem solchen Angriff um einen Doppelschlag: Die Datenbank wird in die Knie gezwungen und auch der Webserver wird ordentlich beschäftigt. Zur Verfolgbarkeit: Würde die SQL-Injection z.B. über TOR oder I2P gemacht, wäre der Angreifer nicht durch Ermittlungsbehörden aufspürbar. Und ein Anonymisierungsdienst bietet sich an, weil es ja kein DDoS Angriff ist, zu dem ein Netz von Bots oder Personen benötigt wird. Lediglich ein Request für den Inject, das war es.

Problem bei der ganzen Sache: Nicht alle Webauftritte sind anfällig für SQL-Injections. Es muss also eine gravierende Lücke in der Software vorhanden sein, so dass ein externer Zugriff auf die Datenbank ermöglicht wird, aber es ist ein denkbares Szenario und wie die AnonyPwnies beim GEMA Hack sagten “as always startet with a sql injection”. Die Entwickler schreiben dazu folgendes:

“RefRef is a revolutionary DoS java site. Basically, by using an SQL and .js vulnerability, you can send a page request packet from your home computer with embedded .js file, because of the vulnerability in the SQL/Javascript engine on MOST websites, the site actually TEMPs the .js file on its own server. So now the .js is in place on the host of the site. Next since you still have the request, it picks up the .js file, and all of the requesting for packets power happens on the server, not the requestee. I send two packets from my iphone, and everything else happens on the server. Basically eats itself apart, because since both are on the server, its all a local connection. This tool only makes you vulnerable if you don’t keep your systems patched, perform the basic security, which is how Sony got caught with it’s pants down.”

Ich verstehe diese Aussage nicht wirklich, weil ich auf anhieb keine Warnung gefunden habe, dass für Apache so ein Angriffsvektor besteht.  Sie sprechen von zwei Requests, der erste ein manipulierter HTTP Request, der eine JavaScript Datei im tmp Verzeichnis ablegt, und den zweiten, der die Datei aufnimmt und ab da sollen alle Requests lokal laufen. In anderen Berichten steht dann überhaupt nichts mehr von einer JavaScript Datei, sondern nur, dass das Tool in JavaScript entwickelt würde. Es ist daher auch nicht auszuschließen, dass da einfach falsch zitiert wurde, oder ähnliches, denn folgender Text von hackingtricks.in lässt eher auf einen HTTP Header Exploit schließen, obwohl der erste Satz des oben zitierten Textes, doch eher nach der SQL Injection Variante klingt.

“Wie sich herausstellt, wird der Angriff clientseitig gestarted und sendet ein separates Skript mit dem Verbindungs-Request zum Zielserver. Dieser Request ist tatsächlich der Exploit selbst und sobald der Server beginnt den Request zu verarbeiten wird er damit fortfahren, bis er abstürzt. Kurz gesagt, je stärker der Server um so schneller wird er abstürzen.”

Screenshot von RefRef

Generell sind die Informationen der ausländischen Medien andere, als das was deutsche Medien – unter anderem auch Gulli.com – zur RefRef geschrieben haben. Ein HTTP Header Angriff hat nämlich wenig mit SQL und JavaScript zu tun. Die Informationslage ist also mehr als unklar. Tja, was ist es denn nun? SQL injected content hack, schnödes DDoS, Webserver Exploit, oder gar alles zusammen? Auch der Screenshot, der von Anonymous im Internet gepostet wurde trägt nicht wirklich zur Klärung bei. Das sieht nämlich nach einem ziemlich einfachen JavaScript DDoS Tool aus, was keinen Unterschied zu LOIC darstellen würde. Eine weitere Option wäre allerdings noch, dass es eine Kombination aus DDoS und SQL Injection ist. Der Server würde dann von Hand bombardiert, wobei die SQL Injections vom Tool angehangen werden, um den Datenbank-Server lahmzulegen.

Ich persönlich vermute aber, dass es sich um ein Tool für das oben von mir beschriebe Szenario handelt. SQL Injection, JavaScript wird in die Ausgabe eingeschmuggelt und die Besucher bombardieren unwissentlich Server und Datenbank. Eigentlich recht elegant, aber dazu muss die Seite eben anfällig für SQL Injections sein. Wir werden es im September sehen, dann soll das Tool angeblich released werden.

Ich bin gespannt und hoffe, dass sich das ganze nicht wirklich als Snakeoil, oder einfach nur eine witzige Aktion von Anon handelt, denn rein sicherheitstechnisch wäre es interessant den Angriff zu untersuchen, damit wir unsere Server dagegen absichern können.

Wenn jemand Tipps, Anregungen, einen Link hat, oder einfach mehr weiß als ich, dann schreibt doch bitte einen Kommentar. :-)

JavaScript ist alles andere als barrierefrei, denn die Braille Browser, die von blinden Menschen benutzt werden, beherrschen kein JavaScript. Aber: Wir können trotzdem GUIs mit AJAX und jede Menge Eyecandy programmieren und der shit läuft trotzdem auch ohne JavaScript. Im Grunde ist es sogar kein großer Aufwand und bekanntlich führen sogar mehrere Wege zum Ziel. Den Weg, den ich immer gehe, den möchte ich mal kurz vorstellen.

Vorweg: Nicht notwendig, aber hilfreich ist der Einsatz eines Template Systems, wie z.B. Smarty. Da ich Smarty aber ziemlich unhandlich finde, habe ich mir seinerzeit mal eine eigene Template-Klasse geschrieben, mir der ich gut zurecht komme.

Erstmal zum grundlegenden Prinzip: Ein AJAX Request wird in der Regel durch eine onclick Aktion oder über das href Attribut eines Links ausgelöst. Soll das Ganze auch ohne JavaScript noch funktionieren muss im href Attribut ein Link stehen, der die Aktion ohne Einsatz eines asynchronen Requests auslöst, im onclick steht der Aufruf des AJAX Requests und danach, ganz wichtig, “return false”.

Ein Beispiel für einen solchen Link:

<a href="index.php?action=show_entry&entry_id=23" onclick="ajax_request( 'action=show_entry&entry_id=23&ajax=true', 'contentdiv' ); return false;">Zeige Eintrag</a>

Ist JavaScript beim Klicken des Links nicht aktiv, wird der Link regulär aufgerufen, mit Hilfe von PHP entsprechend ausgewertet und das benötigte HTML erzeugt. Ist JavaScript aktiv, dann wird der AJAX Request gestartet und das reguläre Verfolgen des Links im href Attribut durch “return false” unterbunden. An PHP wird mittels Parameter “ajax=true” übermittelt, dass nicht das vollständige HTML zu erzeugen ist, sondern nur das was für den Inhaltsbereich benötigt wird.

Das klingt nun erstmal so, als wäre es sehr aufwändig, aber mit einem Template System ist es ein Kinderspiel. Ein wenig PHP Pseudocode dazu:

	// Auswahl des Templates
	if( empty( $_REQUEST[ 'ajax' ] ) )
	{
		$content = new template( 'templates/tpl_main.html' );

		$menu = new template( 'templates/tpl_menu.html' );
		$menu -> finish();

		$sidebar = new template( 'template/tpl_sidebar.html' );
		$sidebar -> finish();

		$content -> set( 'menu', $menu -> get_html() );
		$content -> set( 'sidebar', $sidebar -> get_html() );
	}
	else
	{
		$content = new template( 'templates/tpl_ajax.html' );
	}

	// Erzeugen und einsetzen des Inhalts der gewünschten Aktion
	if( $_REQUEST[ 'action' ] == 'show_entry' )
		$content -> set( 'content', show_entry( intval( $_REQUEST[ 'entry_id' ) ) );

	// Template rendern und ausgeben
	$content -> finish();
	echo $content -> get_html();

Im Prinzip ist es also ganz einfach: Ist der Parameter “ajax” leer, dann wird mittels des Template Systems die vollständige Seite zusammengebaut. Kommt der Request per AJAX, dann wird nur der benötigte Teil ausgegeben und mittels JavaScript in das entsprechende Div gesetzt. Im Prinzip also doch einfacher, als man vermutet.

Auch Formularübergaben können so sehr einfach sowohl per AJAX, als auch regulär abgesendet werden:

<form name="entryaddform" id="entryaddform" action="index.php" method="post">
<input type="hidden" name="action" id="entryaddform_action" value="entry_add"/>
<input type="hidden" name="ajax" id="entryaddform_ajax" value=""/>

<fieldset>
	<legend>Eintrag anlegen</legend>

	<div>
		<label for="entry_titel">Bezeichnung des Eintrag</label>
	</div>
	<div>
		<input type="text" name="entry_titel" id="entry_titel" size="40"/>
	</div>

</fieldset>

<input type="submit" value="Speichern" onclick="$('entryaddform_ajax').value = 'true'; ajax_form( 'entryaddform' ); return false;"/>

</form>

Auch hier ist es wieder sehr einfach: Genau wie beim Link, liegen auf der onclick Aktion des Submit Buttons die entsprechenden JavaScript Anweisungen, um das Hidden Field “ajax” mit einem Wert zu füllen, das Formular asynchron abszusenden und um schlussendlich das reguläre Senden des Formulars mit “return false” zu unterbinden. Ist JavaScript nicht aktiv, wird das Formular reguläre mit leerem Parameter “ajax” abgesendet.

Es ist also tatsächlich relativ einfach eine moderne Webanwendung barrierefrei zu gestalten.

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:

<head>
	<title>Beispiel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="style.css" media="screen"/>
	<script type="text/javascript" src="js/typeface-0.14.js"></script>
	<script type="text/javascript" src="js/rkm_headline_regular.typeface.js"></script>
	<script type="text/javascript" src="js/rkm_headline_bold.typeface.js"></script>
</head>

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:

	<a class="typeface-js" style="font-family: 'RKM Headline',Arial,Helvetica,sans-serif;">Dies ist ein schöner Link</a>
	<br/>
	<br/>
	<a class="extern_link typeface-js" style="font-family: 'RKM Headline',Arial,Helvetica,sans-serif;">Dies ist ein schöner externer Link</a>

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!

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.*>(.*)<\/table>/siU", $html, $matches );
	if( $matches )
	{
		foreach( $matches[ 1 ] AS $tbody )
		{
			$new_rows = '';
			if( preg_match_all( "/<tr.*>.+<\/tr>/siU", $tbody, $tbmatches ) )
			{
				$i = 0;
				foreach( $tbmatches[ 0 ] AS $tr )
				{
					// Ignore rows containing th cells
					if( strpos( $tr, '<th' ) === false )
					{
						if( $i % 2 == 0 )
							$new_rows .= str_replace( '<tr', '<tr class="even"', $tr );
						else
							$new_rows .= str_replace( '<tr', '<tr class="odd"', $tr );
						$i++;
					}
					else	$new_rows .= $tr;
				}
				$html = str_replace( $tbody, $new_rows, $html );
			}
		}
	}

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…

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. ;-)

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:

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:

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.

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:

<div id="layer_bg">
	<div id="layer2">
		<div id="layer1">
		</div>
	</div>
</div>

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.