Blogpopst-Previews

Blogpost Tooltips

Heute hatte ich mal wieder einen Einfall, was meinem Blog noch fehlt, also außer dem Refactoring der MySQL API. Irgendwie nicht zufriedenstellend waren nämlich die Post-Listen in der Sidebar, da durch das Datum neben dem Titel kaum eine Überschrift in eine Zeile gepasst hat. Nun habe ich das Problem „gelöst“, indem bei Mouseover ein Tooltip mit Meta-Infos angezeigt wird.

Das Ganze läd von einer simplen PHP-Schnittstelle mit AJAX bzw. „AJAJ“ (J für JSON) die Metadaten, also die Anzahl der Kommentare und die Tags, aber auch einen kleinen Textausschnitt („Teaser“). Mit jQuery geht das recht fix und mit wenig Code. Auch die Anzeige als Tooltip war recht einfach. Die runden Ecken werden im Firefox mit -moz-border-radius gemacht und auch die Transparenz wird von der CSS-Eigenschaft opacity geregelt, sodass kein weiteres Hintergrundbild nötig ist. Mit if ($(bla).width()<400) wird verhindert, dass bei genug Platz das Datum entfernt wird, zu sehen auf der Seite Archiv. Dank jQuery bleibt es bei 29 Zeilen JS-Code.

Auch der PHP-Teil ist recht simpel und besteht eigentlich nur aus einer SQL-Abfrage und der Funktion json_encode(), das sind dann 16 Zeilen.

Jetzt bin ich nur gespannt, wie sich das auf den Traffic bzw. die Reqeusts auswirkt, da jedes mal, wenn jemand über einen Link fährt, ein Request an den Server gesendet wird.

Achja, bisher gab es auch keine ausgefeilten 404-Seiten, aber jetzt gibt es eine Fehlerseite, die z.B. auch einen Link zur Suche anbietet.

Update 2009-08-01

Ich habe jetzt auch noch meine Lightbox an das Look & Feel der Blogpopst-Previews angepasst, sodass sie jetzt nicht nur individuell, sondern auch (im Firefox) gut aussehend ist. Außerdem läd sie jetzt keine Graphiken mehr, nur um „prev“, „next“ und „close“ anzuzeigen. Zu testen hier:

kufaish

Obwohl ich es eigentlich nicht so mag, in jQuery Plugins herumzubasteln, habe ich doch eine ganze Passage gerefactort und hoffe jetzt einfach mal, dass es auch im IE noch halbwegs klappt.

Selbstorganisierendes 3D-Clustering

Blogpost-Cluster nach Themenbereichen

Und wieder einmal ein bisschen mit Processing herum gespielt: Da meine 3D-Tagcloud ja noch recht wechselhafte Ergebnisse geliefert hat, habe ich nun die Erkenntnisse aus der Magnetismus-Implementierung in Processing verwendet, um die Blogposts noch besser anzuordnen. Sie ziehen sich zusammen, wenn sie ähnliche Themen behandeln, was wiederum anhand der gemeinsamen Tags festgemacht wird. Video:

Zunächst habe ich den Code aus den beiden erwähnten alten Sketches zusammen kopiert. Leider musste noch einiges geändert werden: Die Tags führen nicht länger ein Eigenleben, sondern dienen nur als Berechnungsgrundlage für die gegenseitige Anziehung der Blogeinträge. Zwar läd die Routine wieder die selbe .csv-Datei, doch diesmal legt sie nur einen Array von Blogeinträgen an, die jeweils eine Liste ihrer Tags speichern.

Daraufhin folgt eine kleine Erweiterung meiner „Magnetismus“-Partikel. die Anziehung wird nicht mehr durch eine Ladung bestimmt, sondern durch die Anzahl der gemeinsamen Tags. Sollte diese Anzahl 0 sein, erfahren die Blogeinträge eine kleine Abstoßung. Sollte die Anzahl 1 sein, ist die „Ladung“ 1, sollte sie 5 sein, ist die Ladung 5¹⁰⁰, also vergleichsweise groß. Das sorgt dafür, dass sich die Partikel gerne „durchkämpfen“. Dann haben die Partikel an sich immer die Ladung 1, weil es ja eine symmetriche Bindung ist. Es gibt wieder eine „Pauli-Kraft“, sodass die Partikel nicht wie ein Zelt zusammenfallen. Damit sie sich aber nicht unendlich abstoßen, habe ich auch noch eine weitere Kraft zum Zentrum hin hinzugefügt, die sich kontrollieren lässt, sodass manchmal die Blogeinträge etwas lockerer auseinander fallen und sich aber auch in der Mitte zu einem Ball zusammenfinden. Sehr eindrucksvoll finde ich wie bestimmte Themenkomplexe bei geringer „Zentripetalkraft“ in Kristall-artigen Strukturen zusammen bleiben.

Beim Rendering habe ich wieder ein bisschen neuen Code ausprobiert. Die Linien repräsentieren nun die Stärke der gegenseitigen Anziehung (nicht wie vorher die Entfernung) und die Partikel haben einen DOF-Effekt bekommen: Eine Textur, die sich je nach Entfernung zur Kamera verändert, zu einer weich gezeichneten Version der Textur.

3D-Tagcloud mit Processing

Dreidimensionale Tag-Wolke mit Verbindungen zu den Blogeinträgen, Tag „Webdev“ rot aktiviert, gemacht mit Processing.

Ich habe ja schon etwas mathematisches und recht interaktives mit Processing gemacht. Jetzt wollte ich noch eine kleine Daten-Visualisierung basteln. Da ich wenig Lust habe tagelang irgendwelche tweets zu analysieren und ich mich nicht in die Musik-Librarys von Processing einarbeiten wollte, habe ich meine Blogeinträge und die dazugehörigen Tags als Datenset hergenommen, was auch noch eine recht überschaubare Datenmenge ist, und sie in einer Art 3D-Netz angeordnet. Video:

Zunächst einmal habe ich die Daten als .csv aus der Datenbank exportiert. Dieses Dateiformat ist zum Glück einfach mit Processing einzulesen. Daraus habe ich ein paar Objekte erstellt. Hier war ich mir ein bisschen unsicher, wie das zu realisieren sei. Im Endeffekt habe ich 3 Arrays von Objekten, einer enthält alle Tags, einer alle Blogeinträge und ein dritter alle Verbindungen. Zusätzlich bekommen alle Tags noch eine ArrayList mit ihren zugeordneten Blogeinträgen, um das aktivieren (röten) einfacher zu machen.

Dann haben die 3 Objekte (Eintrag, Tag, Verbindung) erstmal jeweils eine rendering-Methode bekommen. Die Einträge und Tags zeigen einfach ihr Label an, und beginnen auf einer Ebene mit (mehr oder weniger) zufälliger Position. die Verbindungen, die jeweils einen Pointer auf einen Eintrag und einen Tag speichern, rendern sich als Linie zwischen den Positionen der beiden. Zusätzlich habe ich noch eine Szene implementiert, die von der aktuellen Framezahl die Kameraposition und das aktivierte Tag bestimmt.

Die rein zufällige Anordnung zu Beginn

Eine rein zufällige Anordnung ist allerdings nicht wirklich zufriedenstellend. Deshalb beginnen nun die Tags als nächstes sich dem Schwerpunkt ihrer zugehörigen Blogeinträge zu nähern und die Blögeinträge nähern sich dem Schwerpunkt ihrer Tags. Aus Spaß habe ich das einmal laufen lassen, natürlich kollidiert das ganze recht zielstrebig. Als zweiter Bewegungsparameter kommt hinzu, dass, wenn ein gewisser Mindestabstand unterschritten wird, sich die Blogeinträge und Tabs auch gegenseitig abstoßen. Hier musste ich die Parameter recht fein abstimmen.

Damit nicht der Expansionscharakter die Überhand bekommt (wie bei unserem Universum?), habe ich auch noch eine Arena eingeführt: Wenn die Schriftposition aus einem Zylinder in der Mitte des Bildschirms heraus wandert, greift ein „Sheepdog“, der das Bewegungsverhalten überschreibt und die Tags bzw. Einträge zurück zum Mittelpunkt zieht, bis sie wieder im Rahmen sind. Da die Blogeinträge sowieso etwas unter Druck stehen, sorgt das dafür, dass alles schön zentriert bleibt und ein bisschen in ein Raster gepresst wird.

Etwas Ordnung im Chaos, die Blogeinträge haben sich bis an den Rand expandiert, „XSLT“ wandert noch nach außen

Je nach Anfangsposition funktioniert der Algorithmus mal besser und mal schlechter, vielleicht müsste ich noch etwas an den Parametern schrauben. Es ist auch schwer zu sagen, was gut und schlecht ist, aber hin und wieder gehen Tag-Eintrag-Verbindungen über den halben Zylinder („mangelnder Ellbogen-Einsatz“?) und bei manchen Durchläufen werden z.B. einige einfache Verbindungen recht schön kurz.

Das ganze lief mit dem P3D-Renderer eigentlich ganz ordentlich, doch dank diesem Tutorial zu Additive Blending mit OpenGL wird jetzt auch mit dem OpenGL-Renderer der Text ohne die weißen Flächen in den Buchstaben gerendert. Ich musste nur alles auf schwarz umstellen, was allerdings auch nicht schlecht aussieht. Jetzt läuft die Animation mit Kantenglättung (smooht() und P3D läuft bei mir sehr sehr langsam) weich wie Butter. Und so sieht alles in schwarz aus:

OpenGL-Tags läuft flüssig bei 1920x1200

Mit einer netten Textur und frei drehbar im neuen Style:

OpenGL-Tags flüssig und frei drehbar bei 1920x1200

Irgendwie interessiert mich als nächstes „Magnetismus“. Man liest recht viel darüber, mal sehen was genau man sich darunter vorzustellen hat.

Shortlinks implementiert

Shortlinks implementiert

Da mein Domainname doch recht lang zu tippen ist, und sich für twitter sowieso kurze URLs gut eigenen, habe ich jetzt auf dieser Seite die meisten Seiten mit kurz-URLs ausgerüstet. So kann man jetzt z.B. mit meinem ShortURL Auto-Discovery Twitter Bookmarklet ohne Probleme Links auf diese Seite posten und man muss nur noch 1-co.de in die Adressleiste tippen, um auf die Startseite zu kommen.

Die Shortlinks werden auf den entsprechenden Seiten mit dem HTML-Tag <link rel="shortlink" href="http://1-co.de/bj" /> und mit dem HTTP-Header Link: <http://1-co.de/bj>; rel=shortlink ausgewiesen.

Hauptsächlich möglich wird das durch ein paar manuelle Einträge in der .htaccess und durch diese zwei bzw. vier netten Helfer-Funktionen (PHP), die Zahlen (int) in Zeichenfolgen (Strings) umwandeln, wodurch sie rund 20-40% kürzer werden:

function toAlphaNumber($num){
  $anum = '';
  $BASE=62;
  while ($num>=1) {
    $x=$num%$BASE;
    $anum=chr2($x).$anum;
    $num=floor($num/$BASE);
  }
  return $anum;
}
function fromAlphaNumber($str){
  $BASE=62;
  $num=0;
  for ($i=0,$len=strlen($str);$i<$len;$i++) {
    $num+=uchr2($str{$i})*(pow($BASE,($len-1-$i)));
  }
  return $num;
}
function chr2($i) {
  $i+=48;
  if ($i>57) $i+=7;
  if ($i>90) $i+=6;
  if ($i>122) throw new Exception('Too high');
  $c=chr($i);
  return $c;
}
function uchr2($c){
  $i=ord($c);
  if ($i>122) throw new Exception('Too high');
  if ($i>90) $i-=6;
  if ($i>57) $i-=7;
  $i-=48;
  return $i;
}

In der .htaccess:

#manual shortening
RewriteRule ^b$ http://bernhardhaeussner.de/blog [R=301,L]
# [...]

#call a php script that redirects to the right blog post
RewriteRule ^b/([A-Za-z0-9]+)$ blogentry.php?encid=$1 [L]

Jetzt bin ich ja mal gespannt, wie viele Leute meine Posts twittern...

Für Wordpress-User (Update 2009-06-23)

Wer sich mit nichts herum ärgern will und ein ausgereiftes und einfach konfigurierbares Plugin sucht, ist mit dem Plugin Twitter Friendly Links (empfohlen von eins78) gut aufgehoben.

Für Wordpress-User & Bastler (Update 2009-06-20)

Auf Anfrage von eins78 hier noch drei Ticks für Wordpress-Blogs: Theoretisch können auch Worpress-Autoren einfach das Bookmarklet ins HTML-Markup der Seite setzten, es ist ja ein ganz normaler Link. Allerdings funktioniert es nicht ohne Javascript und es gibt folgende elegante Lösung:

Empfehlenswerter und fast genauso einfach ist es, dieses Plugin zu benutzen: Es kümmert sich nicht nur um die Erstellung von kurz-URLs und den entsprechenden Link-Tag im <head>-Bereich: Es erstellt u.a. eine globale Variable $shortlink_url in der die kurze URL gespeichert ist. Dann muss man nur noch im Template-Ordner wp-content/themes/(templatename)/ in der (index.php) folgendes in das Template setzen:

<?php if ( isset($shortlink_url) && $shortlink_url!='' ): ?>
  <a
   href="http://twitter.com/home/?status=check+out+<?php echo $shortlink_url;?>"
   rel="nofollow shortlink"
  >
  tweet this
  </a>
<?php endif; ?>

Ich habe es probeweise im default-Template direkt in das <small> gesetzt, in dem auch Datum und Autor stehen, dann wird es klein unter der Überschrift angezeigt. Die Darstellung des Links lässt sich natürlich noch anpassen. Nachteil an dem Plugin ist, dass die Weiterleitung nicht auf Anhieb funktioniert. Man müsste erst ungefähr so etwas in die .htaccess schreiben:

RewriteRule ^([0-9]+)$ ?p=$1 [R=301,L]

Eine Lösung ganz ohne Plugin hat Thomas Scholz veröffentlicht. Sie „schont die Optionstabelle und erleichtert individuelle Anpassungen“. Allerdings enthalten die Kurzlinks ?p=, weshalb die URLs nicht ganz so schön werden.

Schöne URLs dank mod_rewrite

blogjournal.php?page=2 => blog/journal/2                   (22->14;64%)
blogtags.php?tag=PHP&page=2 => blog/tags/PHP/2             (27->15;56%)
blogentry.php?link=1_Hello_World! => /blog/1_Hello_World!  (33->20;61%)

Eigentlch war das ja schon lange geplant, alle URLs etwas zu verschönern, und sämtliche überflüssige .php?bla=&foo= rauszunehmen. Doch ich hatte immer das Problem, dass die alten URL nicht mehr benutzbar waren. Das ganze habe ich erst versucht mit RewriteRules zu lösen, doch es hat sich herausgestellt, dass es mit PHP leichter zu lösen ist. Wie alles funktioniert will ich hier kurz beschrieben.

Wer den RSS-Feed liest, dem ist vielleicht aufgefallen, dass über Nacht ein paar viele neue Einträge dazu gekommen sind. Diese sind leider gar nicht neu, jedoch da ich das URL-Format ändern musste, werden sie als neu erkannt. Die Seite hat jetzt URL-mäßig einen schönen hierarchischen Aufbau:

/
/about
/blog
/blog/1_Hello_World!
/blog/[...alle Einträge]
/blog/archiv
/blog/feeds
/blog/journal
/blog/journal/1
/blog/journal/2
/blog/journal/[...alle Seiten]
/blog/newcomments
/blog/tags
/blog/tags/PHP
/blog/tags/PHP/1
/blog/tags/PHP/2
/blog/tags/PHP/[...alle Seiten]
/blog/tags/[...alle Tags]
/contact
/projects
/projects/1_Mein_Blog

Das alles wird erstmal von mod_rewrite erledigt. Die URLs oben werden in PHP-verträgliche URLs mit GET-Paramtern usw. umgewandelt. Damit dann aber nicht immer Seiten doppelt erscheinen, musste ich im PHP-Script überprüfen, durch welche URL das Script aufgerufen wurde. Stimmt diese nich mit der kanonischen URL überein, dann leitet das Script mittels eines 301-Redirects direkt an diese weiter. So ist jedes Dokument nur einmal vertreten, was sowol meinen Aufrufstatistiken zuvorkommt, Verwirrung bei Benutzern vorbeugt und Suchmaschinen zufrieden stellt.

Außerdem sind die URLs nicht mehr von der Technik hinter den Kulissen abhängig. Sollte ich also irgendwann die Technik von PHP auf ColdFusion, ASP, Java oder was es alles gibt umstellen, bleiben die URLs (höchstwahrscheinlich) gleich. Sie enthalten keine sinnlosen Dateiendungen usw. Der Prozess funktioniert so:

                           |
                           V
              Request mit beliebiger URL
                           |
                           V
Apaches mod_rewrite wandelt in „normale“ URL mit GET Parametern um
                           |
                           V
    PHP parst die URL und entschiedet, was angezeigt werden soll
                           |
                           V
 PHP vergleicht die kanonische URL zur Anzeige mit der des Requests
             /                          \
            /                            \
    URL ist gleich                   URL ist anders
           |                              |     
           V                              V
  Content wird angezeigt         301 an die richtige URL

Im PHP sieht das Vergleichen dann ungefähr so aus: (z.B. in blog.php)

function setCanURL($root,$url) { // Leiter weiter, falls nötig
	$request_url_withoutHTTP=$_SERVER['REQUEST_URI'];
	$canonical_url_withHTTP=$root.$url;
	$canonical_url_withoutHTTP=removeDomain($root.$url);
	$request_url_withoutHTTP_realspaces=rawurldecode($request_url_withoutHTTP);
	if ($request_url_withoutHTTP_realspaces!=$canonical_url_withoutHTTP) {
			redirect301($canonical_url_withHTTP);
	}
}
function redirect301 ($newurl) { // Macht 301 Weiterleitungen
	header("HTTP/1.1 301 Moved Permanently"); 
	header("Location: $newurl"); 
	header("Connection: close");
	die();
}
function removeDomain($url) { // gibt die URL ohne den Domaine-Teil zurück
	$url=preg_replace('/https?:\/\/([0-9a-zA-Z]+\.){1,}([0-9a-zA-Z]+)\//','/',$url);
	return $url;
}
setCanURL('http://localhost/testseite/','blog');

Man muss natürlich immer irgendwie wissen, wie die kanonische URL aussehen soll. Dann ruft man einfach die Funktion auf. Es ist egal, wie die alte URL aussah! Am besten noch da einbauen, wo die URLs geparst werden bevor die Seite gerendert wird.

Super-Geeky Firefox Quicksearch feature

Die neuen URLs machen auch etwas sehr Zeitsparendes möglich. Empfiehlt sich bei allen Seiten zu machen, die man häufig benutzt (und man kurze URL-Pfade besucht):

In Firefox erstellt man im Bookmark-Manager ein neues Bookmark mit Folgenden Eigenschaften:

• Adresse: http://bernhardhaeussner.de/%S (Großes S)
• Schlüsselwort: bh

Allgemein funktioniert das so, dass man z.B. für Suchfunktionen „[Schlüsselwort] [Begriff]“ in die Adresszeile eingeben kann, und so eine Schnelle Suchfunktion hat. Da Firefox aber nichts anderes macht, als %S mit dem Begriff zu ersetzten, kann man das auch für jede andere URL verwenden. So kann ich jetzt durch Eingabe von bh blog direkt zu meinem Blog kommen. Sehr praktisch... Übrigens, benutzt man den Kleinbuchstaben %s wird / zu %2F und ähnliches, wodurch man nicht alle URLs eingeben kann, was jedoch in GET-Parametern wichtig ist („urlencode“).

Super-Geeky Konqueror Quicksearch feature + KRunner

Im Konqueror gibt es auch eine Suche über die Adressleiste, die sich Webkürzel nennt. Man kann diese Webkürzel in Konqueror einrichten im Einrichtungsdialog unter Webkürzel. Dort gibt man dann als Adresse http://bernhardhaeussner.de/\{@} ein und als Kürzel z.B. bh, bxt.

Selbst wenn man Konqueror nicht benutzt, lassen sich diese Kürzel in KRunner benutzten: Ein Tastendruck auf ALT+F2 und die Eingabe von bh:blog führt dann also direkt zu meinem Blog. Ziemlich praktisch und lässt sich auch beliebig erweitern.

Zum Glück ist meine Seite auch noch nicht überall verlinkt, weshalb ich auch sonst nicht viel ändern muss.