Kai Thrun » Codeschnippsel

Migration Map – tolles Beispiel für HTML5

Kai Thrun — Sun, 18 Sep 2011 12:54:54 +0000

Es gibt verschiedene tolle Beispiele, die aufzeigen was mit HTML 5 und CSS 3 möglich ist. In vielen Fällen müssen beide Versionen als Buzzword herhalten um Aufmerksamkeit zu generieren. In diesem Fall ist es ein schönes Beispiel, wie man Erdkunde und Demographie miteinander verbinden kann. Die Daten beruhen auf der Global Migrant Origin Database Version 4. Die Daten sind zwar aus März 2007, aber das ist nicht so wichtig.

Migration Map in HTML - hier: Deutschland

Die Fakten sind ausserordentlich ansprechend aufbereitet. Gebaut hat die Karte der Belgier @madewulf. Ich hätte es als Kind schon cool gefunden, wenn mein Erdkundelehrer damals mir so die Welt näher gebracht hätte. Ich hätte dann nicht immer den dicken Altas schleppen müssen, eines Schulmittelherstellers den vermutlich viele kennen

Ich finde Idee als auch Umsetzung sehr ansprechend. Wie seht ihr das? Kommen demnächst noch andere Ansätze, vielleicht auch im Bildungsbereich spielerisch Fakten zu vermitteln?

Danke an @elo und @simonnickel für den Hinweis

Migrations Map in HTML5

Hotfix für WordPress-Plugin GoogleCards 0.4.5.

Kai Thrun — Thu, 18 Aug 2011 09:13:44 +0000

Wie ihr in meiner Sidebar sehen könnt, bin ich Nutzer des WordPress-Plugin GoogleCards. Das Plugin von John Henson macht eigentlich nichts anderes als die Google+ Seite nach den entsprechenden Einträgen zu durchsuchen. Das führt zu dem Problem, wenn Google seine CSS-Klassen anpasst, dass Plugin nicht mehr ordnungsgemäß funktioniert.

Google hat vorgestern ein Update gefahren und John scheint nicht online zu sein. Da John so freundlich war und sein Plugin “free for all” zu veröffentlichen, habe ich das Problem kurzer Hand selbst gefixt. Im Klartext heißt dass nur, dass ich die Klassen auf den aktuellen Status angepasst habe.

Die aktualisierte Version findet ihr hier zum Download. Ich habe sie schlicht 0.4.5.1 benannt, da ich John nicht weiter in seiner Versionsnummerierung nicht reinschreiben möchte. Eventuell müsst ihr einmalig die txt-Datei in wp-content/cache löschen. Danach sollte Bild als auch der Counter wieder zurückkehren.

Im Download ist das komplette Plugin enthalten, es reicht aber aus nur die googleCardClass.php zu ersetzen.

Developers Shame Day: Ein „Login“

Kai Thrun — Wed, 03 Nov 2010 07:09:54 +0000

Als Cem zum Developers Shame Day aufrief, wusste ich eigentlich schon, in welchen Code ich gucken musste. Ich konnte die Dateien auf einer DVD auch wiederfinden. Ich muss zugeben, ich bin etwas fasziniert. Dem Zeitstempel sei dank, konnte ich auch noch entnehmen, wann die Datei etwa aktuell gewesen ist – 2001.

Ich hatte zu der Zeit ein eSport-Portal, was sich vorwiegend um Counter-Strike drehte. Es war bei 4Players gehostet und hatte im Schnitt 500.000 PIs im Monat. Der Erfolg des Portals kann aber nicht am Code gelegen haben, definitiv nicht!

Ich habe mich seiner Zeit scheinbar dazu entschlossen, die include-Funktion als godfather der PHP-Funktionen zu erkoren, anders kann ich mir den Kram selbst nicht erklären. So habe ich die Dateien in etwa 2-3kb abgelegt und es gab für jeden Senf eine eigene Datei. Funktionen werden auch völlig überbewertet. Der Login der Seite ging über geschätzte 13 Dateien inkl. User-Verwaltung.
In der „user.login.php4“ konnte sich der registrierte User also anmelden. Natürlich wurde das Passwort plain in die Datenbank geschoben. Vermutlich um dem User schneller sagen zu können, wie sein Passwort ist, wenn er es vergisst. Ich weiß es nicht.





  
    Username (Nick)
    
      
        
    
  
  
    Passwort
    
      
    
  
  
     
     
      

    
  
  

";
include ("rmenu.php4");
?>

Wie bereits erwähnt, hatte ich mich auf kurze Dateien “spezialisiert”. Somit wurden die Eingaben dann auch nur in der Datenbank durchgereicht in der “user.check.php4″. Dort muss ich sagen, dass ich die Variable $timer in Zeile 3 für äußerst gelungen und kreativ halte

Der einzige Wermutstropfen, der einem vielleicht bleibt ist die Tatsache, dass man selbst nach 10 Jahren noch ansatzweise sich durch den Code hangeln kann. Ob das nun schön ist oder nicht, steht auf einem anderen Papier.

Die dazu gehörige CSS-Datei umfasste 30 Zeilen und hat durchaus noch Optimierungspotenzial, eine “skilly” Sachen wie Filter oder der Typberücksichtung sind dennoch enthalten. Wie man unschwer erkennen kann, 11px Fontsize war total in!

a:active { color: lime; font-weight: bold; text-decoration: none; font-family: Arial; font-size: 11px;}
a:hover { color: #00AEFF; font-weight: bold; text-decoration: underline; font-family: Arial; font-size: 11px;}
a:visited { color: #B78A00; font-weight: bold; text-decoration: none; font-family: Arial; font-size: 11px;}
a:link { color: #B78A00; font-weight: bold; text-decoration: none; font-family: Arial; font-size: 11px;}
a:visited:hover { color: #436BFF; font-weight: bold; text-decoration: underline; font-family: Arial; font-size: 11px;}
td.date { color: white; font-style: normal; font-weight: normal; font-size: 11px; font-family: Arial }
td.topic { color: orange; font-style: normal; font-weight: bold; font-size: 11px; font-family: Arial }
td.content { color: white; font-style: normal; font-weight: normal; font-size: 11px; font-family: Arial; }
td.link { color: white; font-style: normal; font-weight: normal; font-size: 11px; font-family: Arial; filter:shadow(color=black, strenght=#4) }
p.link { color: white; font-style: normal; font-weight: normal; font-size: 11px; font-family: Arial; filter:shadow(color=black, strenght=#4) }
td.topic { color: #92929E; font-style: normal; font-weight: bold; font-size: 14px; font-family: Arial }
td.comment { color: #B78A00; font-style: normal; font-weight: normal; font-size: 11px; font-family: Arial }
.sb { scrollbar-arrow-color:#B78A00; scrollbar-base-color:#202C40; scrollbar-face-color:#202C40; scrollbar-shadow-color:#17202D; scrollbar-dark-shadow-color:#17202D; scrollbar-3d-light-color:#6E86AA; scrollbar-highlight-color:#6E86AA; margin-bottom:0; margin-left:15; margin-right:15; margin-top:0; padding-bottom:0; padding-left:0; padding-right:0; padding-top:0; color:#B78A00; font-size:11px; font-family:Arial; text-align: justify }
input, select {	font-family: Arial, Helvetica;	font-size: 11px; border-width:1;  background-color:#211E47; color:#B78A00 }
input type=radio { font-family: Arial, Helvetica;	font-size: 11px; color:#B78A00 }

Nach diesem Zeitraum würde ich gern wissen, was wohl damals einem durch den Kopf geschossen ist, als man diese Zeilen verfasst hat. Über das Tabellenlayout mag ich nicht klagen, dass war halt damals so. Ich glaube, ich wusste schon damals, dass der heutige Tag kommen wird und habe deswegen auch alle Kommentare weggelassen… #facepalm

Mehr Code zum Developers Shame Day findest Du bei:

Danke Cem für die Idee, ich hatte mein Unterhaltungswert bereits anhand des eigenen Codes. Bin gespannt, was heute noch so den Weg ans Tageslicht findet.

03.11.2010: Developers Shame Day

Kai Thrun — Tue, 26 Oct 2010 07:02:51 +0000

Der @unset hat eine Idee zu einer Blogparade. Die Idee hat wirklich seltenheitswert und spiegelt eine Tatsache wieder: Jeder hat man angefangen. So wie ich Cem kenne, wird er mir vorwerfen, ich hätte mich nie weiterentwickelt, aber dass kenne ich inzwischen nicht anders

Beim Developers Shame Day geht es darum, dass am 03.11.2010 jeder in seinem Blog oder seiner Seite ein Code(schnippsel) präsentiert. Dieser sollte Facepalm-Garantie haben. Es spielt dabei keine Rolle, in welcher Sprache das Stück geschrieben ist. Ein paar Erläuternde Worte

Ich finde die Idee recht amüsant, da jeder so ein Stück Code irgendwo liegen hat. Irgendwas aus alten Zeiten, aus den Anfängen – wo … ja wo man noch die Welt im (code)Sturm erobern wollte. Ich hoffe, ich finde die die CDs mit den Backups aus 98. Da dürften sich einige Sachen finden lassen. Ich würde mich freuen, wenn Ihr die Idee weitertragen würdet, denn ich bin überzeugt, der 3.November könnte ein unterhaltsamer Tag werden

Mehr zum Developers Shame Day findest du bei Cem.

Fix: Schriftenglättung im IE bei fadeIn / fadeOut

Kai Thrun — Sun, 29 Aug 2010 14:21:53 +0000

Wenn das Rendering mal nicht funktioniert

Ich möchte es kurz eingeworfen haben, bevor ich es wieder vergessen habe. Der Internet Explorer (7 als auch hat ein Rendering-Problem mit Cleartype-Schriften, wenn sie per JQuery eingefadet werden. Wenn man mit JQuery den Content bei FadeIn() oder FadeOut() behandelt, kann diese Phänomen zu einer Farce werden. Der Internet Explorer verweigert dann die Schriftenglättung komplett.
Dieses Problem kann man umgehen / lösen. Die einfachere Lösung ist, der Klasse oder ID eine Hintergrundfarbe mit auf den Weg zu geben (z.B. background-color: #fff;). Sollte dies nicht funktionieren, bedarf es bei der Fade-Anweisung das Attribut des Filters wegzunehmen. Wie das im Detail aussieht, findet Ihr in der Quelle, die mir einiges an Nerven erspart hat.

SliderNav – Listen scrollen wie beim iPhone

Kai Thrun — Wed, 26 May 2010 16:36:06 +0000

Es gibt inzwischen viele Möglichkeiten für JQuery das iPhone zu imitieren. Eine Plugin für JQuery, dass es ermöglicht Listen zu sliden. Der Slide funktioniert wie im Adressbuch zum Beispiel. Ich finde es eine nette Spielerei und kann mir das auch durchaus in Backend-System vorstellen. Sei es für die Mitgliederverwaltung, Orte, Serverlisten, Adressen – was auch immer, wo eine Sortierung in größeren Dimensionen Sinn macht. Den Downloadlink und ein Beispiel findet Ihr beim Autor.

Jquery HoverAttribute – interessantes Plugin oder Spielerei?

Kai Thrun — Mon, 10 May 2010 09:47:33 +0000

Am Wochenende bin ich über ein Jquery-Plugin gestolpert, welches ich noch nicht so recht einordnen kann. Irgendwo zwischen Euphorie dem call to action bzw. dem “point of interest” weitere Informationen mitzugeben (Ja ja, alles außer Hochdeutsch). Das Problem kennt jeder, die Möglichkeiten zu entdecken, darin besteht kein Problem. Das Problem besteht eher darin, die richtigen Abstriche zu machen um ein ausgewogenes Verhältnis zwischen “wow” und überladen zu finden.

Das HoverAttribute-Plugin ermöglicht es einem u.a. Links mit einer Animation und zusätzlichen Informationen zu versehen. Ich kann mir dies gut bei erläuterungsbedürftigen Sachverhalten vorstellen oder eben dem ungeübten Besucher Unsicherheit zu nehmen. So kann ich ihm beispielsweise mit auf den Weg geben, welche Dateien er im Stande zu laden ist, wohin der Link führt oder eine nützliche Information mitgeben. Sicherlich kann man das auch über einen schönen Tooltip machen, die ich über das Title-Attribut angebe oder ebenfalls mit Jquery ~~aufblase~~ verschönere.

Ich habe für das Plugin noch keine Verwendung. Einige Anwendungsbeispiele habe ich allerdings schon im Kopf rumschwirren. Ich finde die “Inline”-Lösung äußerst charmant. Aber ich muss gestehen, dass dies sicherlich unter Geschmackssache fällt. Schaut’s euch mal auf der Seite des Autors an und gebt mir ein Feedback.

Was meint Ihr dazu? Interessant oder eine weitere Spielerei?

HowTo: Semmelstatz 3.x unter WordPress 2.x

Kai Thrun — Fri, 12 Jun 2009 11:18:30 +0000

Das Plugin Semmelstatz erfreut sich trotz der Einstellung der Weiterentwicklung nach wie vor einer großen Beliebtheit im deutschsprachigem Raum. Viele User sind allerdings inzwischen aufgegeben, da es “mit den neuen Versionen nicht läuft”. So beklagt sich der Großteil der ehemaligen Nutzer. Auch ich habe Semmelstatz zusätzlich im Einsatz. Der “Bug” um Semmelstatz ist eigentlich keiner. Es handelt sich lediglich um eine fehlende Variable, die dem User den Zugriff versperrt. Die Variable user_role, die in den Variablen-Initialisierung auf gleich oder größer Acht gesetzt wird (für Administratoren). Da WordPress diesen Wert allerdings nicht mehr setzt, muss dieses selbst nachgeholt werden. Eine Änderung die mit Version 2 von WordPress vollzogen wurde (korrigiert mich, wenn ich falsch liege).

Es muss in der usermeta Tabelle eine Zeile eingefügt werden, die besagt: Der User, der auf Semmelstatz zugreifen soll, hat eine Berechtigung, die höher oder gleich liegt als die, die du verlangst. Es werden folgende Werte verlangt, die in Abhängigkeit mit den Semmelstatz-Einstellungen hängen.

Benutzergruppe /	Wert (gleicher oder größer)
Mitarbeiter	1
Autor	2
Herausgeber	3
Administrator	8

Wenn ein Administrator-Konto Semmelstatz angezeigt bekommen soll, muss der Wert in der usermeta-Tabelle auf mindestens 8 (10 waren in WP1.x eigentlich die Admins) gesetzt werden. Das SQL-Statement dazu sieht wie folgt aus (WP = euer WordPress-Präfix):

INSERT INTO `wp_usermeta` (
`umeta_id` ,
`user_id` ,
`meta_key` ,
`meta_value`
)
VALUES (
NULL , '1', 'wp_user_level', '8'
);

Da die Spalte umeta_id auto_increment ist, übergibt man ihr eine NULL. In der user_id kommt die User-ID des Benutzers, der Zugriff auf die Statistik erhalten soll. Im Beispiel ist dies Usernummer 1, i.d.R. der Admin. Diesen Benutzer hat man aber sicher vorsorglich nach der Installation gelöscht, so wie es an vielen Stellen empfohlen wird. Im Zweifelsfall kann man die Nutzer-ID in Tabelle users finden.

Nach dem erfolgreichen Eintrag in die Tabelle usermeta werden euch die Semmelstatz ordnungsgemäß im Administrationsbereich angezeigt.

Wer nicht direkt auf die Datenbank aufsetzen möchte (oder kann), der muss sich noch ein paar Tage gedulten. Ich beabsichtige für den Fix ein Plugin schreiben, welches es ermöglichst User und Level über ein Formular auszuwählen.

PHP: Einspaltige CSV schnell auslesen

Kai Thrun — Mon, 30 Mar 2009 14:42:14 +0000

Eben zwitscherte @Tameco, dass er nach einer Möglichkeit sucht, seine 1000 Links in einer Textdatei zu Links zu generieren. Die Lösung stellt in so ziemlich jeder Sprache kein größeres Problem dar. Selbst Excel konnte das Probem lösen. Ich habe PHP gewählt um zur Hilfe zu eilen. Wer möchte, dann sich’s ja in die eigene Sandbox legen. (Wehe einer ruft, dass es nicht W3C-Konform ist )

';
    }
}
fclose ($opener);
?>

JS: Sphere

Kai Thrun — Tue, 27 Jan 2009 02:52:51 +0000

Mit dem JavaScript Sphere lassen sich ohne grafische Bewandtnis Kugeln darstellen. Was man dazu benötigt, ist eben das JavaScript sowie ein Bild, welches man in der Kugel sehen möchte. Wer also als Entwickler eine solche Kugel benötigt, kann auf das Script zurückgreifen. Wer als Entwickler damit allerdings seinen vertrauten Designer in die Pfanne haut, der möge es in die Kommentare schreiben