request_url_withoutHTTP=,canonical_url_withHTTP=,canonical_url_withoutHTTP=,request_url_withoutHTTP_realspaces=. Projekt: Mein Blog (Seite 1 von 4) « Tags « Blog « Bernhard Häussner
Bernhard Häussner
Tags: Artikel mit dem Tag «Projekt: Mein Blog» durchstöbern

100. Blogeintrag

26.02.2011, 15:12

Das ist nun also der 100. Blogeintrag, und er enthält eine kleine Chronik.

Die Graphik hier ist übrigens ein Screenshot aus einer Processing-Sketch, wo ich mit ein bisschen Java-Code eine Timeline zusammengestrickt habe, die die chronologische Verteilung der Blogeinträge zeigt und die Verlinkung mit den häufigsten Tags. Man sieht eindeutig, wann ich in Bremerhaven bzw. Wilhelmshaven war.

Angefangen hat das Blog als kleines Experiment. Ich hatte schon länger vor meine diversen Seiten in einer großen, irgendwie dynamischen, Seite unterzubringen und zu dokumentieren. Tatsächlich hatte ich wohl schon die ein oder andere Blog-ähnliche Seite gebastelt, mal um Smarty zu testen, mal um AJAX zu testen, außerdem hatte ich natürlich eine Menge Design-Entwürfe. Irgendwann musste ich all dies unter einen Hut bringen, und da ich meine Festplatte formatiert hatte, konnte ich bei 0 anfangen.

Der neue Plan war: Meine Seitenstrukturen mit XML-Dateien basteln, und außerdem objektorientiertes PHP schreiben.

Beide technischen Experimente sind inzwischen etwas veraltet. Meine PHP-Klassen von damals entsprechen heute nicht mehr meinen Ansprüchen, außerdem gibt es ja inzwischen Namespaces. Und das mit dem XML hat sich als problematisch herausgestellt, da bei jedem Seitenaufruf eine Menge XML-Dateien verarbeitet werden müssen. Zum Glück ist die Server-Hardware leistungsstark und die Besucherzahlen sind nicht zu hoch.

Andere technische Errungenschaften waren: Eine eigene Markup-Sprache, „progressive enhancement“ mit jQuery und PHP-Klassen-Autoloading.

Der erste Blogeintrag Hello World! wurde am 15.10.2008 geschrieben. Damals gab es allerdings noch kein CMS, das bedeutet des Eintrag wurde direkt in die Datenbank geschrieben. Online ging die Seite dann gut zwei Monate später, am 19. Dezember 2008. Das schließe ich jetzt einfach mal aus den ersten Log-Einträgen:

84.56.72.255 - - [19/Dec/2008:14:18:14 +0100] "GET / HTTP/1.1" 200 566 "-" "Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4"
[...]
92.75.61.95 - - [19/Dec/2008:19:31:46 +0100] "GET /index.php HTTP/1.1" 200 3001 "http://78.47.239.227/blogentry.php?link=28_Pretty_Good_Privacy_%28PGP%29" "Mozilla/5.0 (X11; U; Linux x86_64; de; rv:1.9.0.3) Gecko/2008092700 SUSE/3.0.3-4.4 Firefox/3.0.3" 

Ich stelle gerade erstaunt fest, dass die Links von damals, noch mit IP-Adresse und ohne die „schönen“ URLs, noch immer wie gewünscht weitergeleitet werden.

Auch an der live-Seite wurden immer weitere Verbesserungen vorgenommen, wie „schöne“ URLs mit htaccess, Kurz-URLs, erklärte Abkürzungen, und viele jQuery-Spielereien. Meine Aufzeichnungen über diese Seite finden sich allesamt unter dem Tag Projekt: Mein Blog.

Kommentare: keine

Blogpopst-Previews

26.07.2009, 16:42
Blogpost Tooltips

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:

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.

Kommentare: keine

Selbstorganisierendes 3D-Clustering

28.05.2009, 19:33

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:


Selbstorganisierender 3D-Cluster aus Blogposts basierend auf gemeinsamen Tags

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 5100, 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.

Kommentare: keine

3D-Tagcloud mit Processing

25.05.2009, 18:55

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.

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.

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:

Mit einer netten Textur und frei drehbar im neuen Style:

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

Kommentare: keine

Shortlinks implementiert

22.05.2009, 20:09

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.

Kommentare: 7 Einträge
[ Seite 1 2 3 4 ] Nächste Seite »
 
Χρόνογραφ
© 2008-2014 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: http://1.co.de/