Aus aktuellem Anlass möchte ich heute einmal auf folgende Seminarreihe hinweisen. Anmeldungen bitte in den Kommentaren. Die Gebühren können direkt an mich überwiesen werden oder auch Bar per Post zugestellt werden.

Kategorie: Freizeit
Thema: Actionfiguren sammeln leicht gemacht
Referent: Matthias Pfefferle
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Teilnehmerzahl: unbegrenzt

Kategorie: Games
Thema: PHP zocken für Fortgeschrittene
Referenten: Matthias Pfefferle & Christian Weyand
Kosten: 6000 Euro (Early Bird: 6500), ggf, Gruppenrabatt
Teilnehmerzahl: unbegrenzt

Katgorie: Sport
Thema: So kickst du HTML
Referent: Christian Schätzle
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Voraussetzung: Gute Grundkondition
Teilnehmerzahl: unbegrenzt

Kategorie: Philosophie
Thema: Code like a chicken – Wer war zuerst da? DER Huhn oder DAS Ei?
Referent: Thomas Huhn
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Voraussetzung: Gut erweitertes Bewußtsein zur Not künstlich herbeigeführt

Kategorie: Freizeit
Thema: Comics lesen für Dummies
Referent: Matthias Pfefferle
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Teilnehmerzahl: unbegrenzt

Kategorie: Pop und Rock
Thema: Symfony of destruction
Referent: Christian Weyand
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Teilnehmerzahl: unbegrenzt

Kategorie: Sport
Thema: Fuck the norm and fight the code
Referent: Karina Mies
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Anmerkung: Für etwaige Verletzungen übernimmt der Veranstalter keine Haftung. Körperexterne Waffen nicht erlaubt.
Teilnehmerzahl: unbegrenzt

Kategorie: Esotherik
Thema: Den Linux Kernel verstehen und tanzen
Referent: Dirk Müller
Kosten: 3000 Euro (Early Bird: 3500), ggf, Gruppenrabatt
Voraussetzung: Gut erweitertes Bewußtsein zur Not künstlich herbeigeführt
Teilnehmerzahl: unbegrenzt

Der jeweilige Seminarort wird je nach Teilnehmerzahl gewählt und zu späterem Zeitpunk bekannt gegeben.

Ich denke die Themen sind durchaus interessant und sehr abwechslungsreich und das ein oder andere Schnäppchen ist auch dabei. Wir freuen uns über rege Teilnahme.

Feel free to Flattr this post at flattr.com, if you like it.

HTML5 Boilerplate
Paul Irish und Divya Manian haben eine HTML5-Template-Schablone gebastelt, die man quasi als Vorlage nutzen und weiterverarbeiten kann. Alles dazu fintet ihr unter html5boilerplate.com und den aktuellen Code dazu natürlich bei github

jQuery Mobile Project
Auch wenn ich in Sachen mobile mehr der Steinzeitmensch bin find ichs natürlich cool, dass man sich mit dem Projekt darum kümmert, eine platformübergreifende Lösung für JS-Mobile-Applikationen zu bauen: http://jquerymobile.com/. Vielleicht holt mich das ja dann auch aus der Steinzeit in die Neuzeit zurück.

HTML Entititities
Um mit euch meinen wunderschönen Code teilen zu können habe ich mich auf die Suche nach einem Wp-Plugin gemacht, was mir die HTML-Tags in Entities umwandelt, damit alles richtig dargestellt wird. Nach erfolglosem Finden bin ich aber auf dies kleine Tool gestoßen, was per Button-Klick alles umwandelt. Sicherlich auch nicht der Königsweg, aber trotzdem nett und mir eine Erwähnung wert.

Competition! Competition! Competition!
Leider scheitere ich immer an meiner eigenen Unkreativität und stehe mir deswegen selbst im Weg, um an sowas teilzunehmen, trotzdem finde ich die Aktion JS1k großartig. Ziel ist es ein Javascript zu schreiben, was kleiner als 1 Kilobyte und dabei trotzdem cool ist. Vielleicht hab ihr ja ne Idee???

Feel free to Flattr this post at flattr.com, if you like it.

Jaja…immer noch die onclick – Geschichte. Dies wird dann aber der letzte Post dazu, versprochen. Ich hab da aber nach langem Rumdiskutieren und Recherchieren mal ein wenig getestet und will euch die Ergebnisse nicht vorenthalten, falls ihr mal vor dem selben Problem steht.

Die Sache war nämlich die, dass mein CTO und ich nicht auf einen Nenner gekommen sind, ob wir trotz der großartigen Erkenntnis mit dem data-attr nicht doch onclick benutzen sollen. Argumente für und gegen Beides gab es ausreichend. Es mußten also Fakten her und die sollten sich daraus generieren, was nun beim initialen Laden letztendlich schneller ist.

Um dies rauszufinden bin ich zunächst hergegangen und habe eine Seite gebaut, die mir 1000 links erzeugt hat und mir einen Timer je ans Anfang und Ende des Body-Elements gesetzt:

<body>
  <script>console.time('timerName');</script>
  <?php for(i=0, i<2000, i++) { ?>
    <a href="/">dumdidum</a>
  <?php } ?>
  <script type="text/javascript" src="meinescripte.min.js"></script>
  <script>console.timeEnd('timerName');</script>
</body>

Die Seite habe ich jetzt 30 mal geladen und die Zeit gemessen um einen Referenzwert zu bekommen.
Um den Durchschnitt zu bilden habe ich von den gesammelten Zeiten je die schnellste und langsamste Zeit rausgestrichen, also folgende Rechnung durchgeführt:

Durchschnitt = ∑(time(1…29))/28 (->ich bin nicht so gut in Formeln aufstellen wie man merkt, aber ich denke, ihr wißt, was ich meine)

Dann habe ich meinen Link mit einem onclick bestückt:

<body>
  <script>console.time('timerName');</script>
  <?php for(i=0, i<2000, i++) { ?>
    <a href="/" onclick="myfunction({'id':'<?php echo $i ?>'})">dumdidum</a>
  <?php } ?>
  <script type="text/javascript" src="meinescripte.min.js"></script>
  <script>console.timeEnd('timerName');</script>
</body>

Selbiges noch einmal in der bind-click-unobstrusive-data-attr Variante:

<body>
  <script>console.time('timerName');</script>
  <div id="parentid">
    <?php for(i=0, i<2000, i++) { ?>
      <a href="/" class="my-link" data-obj='{"id":"<?php echo $i; ?>"}'>dumdidum</a>
    <?php } ?>
  </div>
  <script type="text/javascript" src="meinescripte.min.js"></script>

  <script>
    jQuery(document).ready( function() {
      jQuery('#parentid .my-link').live('click', function(){
        return false;
      });
    });
    console.timeEnd('timerName');
  </script>
</body>

Nach wiederum je 30 Reloads und obiger Rechnung ergaben sich zum allgemeinen Erstaunen folgende Ergebnisse:

Irgendwie hatte ich nicht damit gerechnet, dass das late-binding wirklich schneller ist, als das gute alte onclick. Warum das so ist, kann ich mir auch nicht ganz erklären. Ich schätze mal, dass es daran liegen könnte, dass bei jedem onclick ein Event-Objekt instanziiert wird und das wohl seine Zeit dauert, wenn das bei jedem onclick extra gemacht wird, als eben gesammelt nachher. Aber wie gesagt, im Detail hab ich keinen Plan.

Ich hoffe mal, dass das Ganze jetzt nicht zu sehr nach Milchmädchenrechnung aussieht, denn natürlich könnte man meinen, dass nach 30 Reloads und bei der Art der Messung wahrhaftig keine validen Ergebnisse zustande kommen. Aber meiner Ansicht nach, ist eine klare Tendenz zu erkennen, dass das late-binding etwas performanter abläuft.

Feel free to Flattr this post at flattr.com, if you like it.

Nach einigen Diskussionen und Recherche ist mir eine Lösung untergekommen, die ich zu diesem Zeitpunkt zwar warscheinlich nicht implementieren werde, ich aber trotzdem irgendwie großartig finde (zugegeben, ich habe mich mit HTML 5 bisher noch nicht sonderlich auseinandergesetzt, weil “Never trust a draft”). Deswegen hier dann mal der Ansatz für alle, die wie ich vielleicht noch ein wenig hinterher sind:

1. Man definiere ein Element und füge die in HTML5 vorgesehen data-attribute hinzu:

  <ul>
    <li class="listeelement" data-action="login" data-id="1" data-params="a=b">
      <div>contentzeug</div>
    </li>
  </ul>

2. Man hole sich die gesetzten data-attribute im Javascript
2.1 Einmal für die doofen Browser statisch:

jQuery('.listeelement').live( "click", function() {
  var action = this.getAttribute('data-action');
  var id = this.getAttribute('data-id');
  var params = this.getAttribute('data-params');
}

Statisch deswegen, weil ich hier beim im Javascript auch immer genau wissen muss, welche data-attributes gesetzt sind

2.2 Für die doofen Browser mit jQuery-Plugin und nicht ganz so statisch, da es eine Methode gibt, die alle data-attribute holt

jQuery('.listeelement').live( "click", function() {
    var mydataset =  jQuery(this).dataset();
    var myaction = mydataset.action;
    delete mydataset.action //damit die action nicht nochmal ans GET/POST als Param dran gehangen wird
    doSendRequest(myaction, mydataset);
});

2.3 Oder ganz einfach wie in der HTML5-Spec beschrieben, was im Endeffekt wohl dasselbe ist, wie 2.2. Da ich das Plugin nicht ausprobiert habe, kann ich derweil nicht sagen, was es mit den data-attributen in den doofen Browsern macht. Gilt noch zu recherchieren!

  jQuery('.listeelement').live( "click", function() {
    var mydataset =  this.dataset;
    var myaction = mydataset.action;
    delete mydataset.action //damit die action nicht nochmal ans GET/POST als Param dran gehangen wird
    doSendRequest(myaction, mydataset);
  });

3. Man schicke den ganzen Kram an die Action. Aber ACHTUNG, nicht funktionierend mit der Variante 1, da müßt ich dann nochmal bißchen Hirnschmalz für opfern, um das praktikable zu gestalten:

  function doSendRequest(pAction, pParams) {
      jQuery.ajax({
        type: "GET",
        url: pAction,
        data: pParams,
        success: doSomething
      });
  }

Na? Was meint Ihr? Ich finds insgesamt ner sehr gelungend Lösung und bin nahezu begeistert, mal abgesehn von der statischen Variante für die doofen Browser, aber sicherlich ließe sich auch hier noch was geeignetes finden.

Mein herzlicher Dank geht an den Input von der großartigen Community von Stackoverflow. Klickt ihr hier und hier um die entsprechenden Diskussionen anzuschauen.

Feel free to Flattr this post at flattr.com, if you like it.

Jetzt stehe ich gerade vor dem Problem, dass ich eine Liste von Elementen habe, die bei einem Klick alle das gleiche machen sollen, nämlich einen Request, der HTML zurückliefert, womit ein anderer Bereich der Seite aktualisiert wird:

  <ul>
    <li class="listeelement" id="load-content-id-1"><div>contentzeug</div></li>
    <li class="listeelement" id="load-content-id-2"><div>contentzeug</div></li>
    <li class="listeelement" id="load-content-id-3"><div>contentzeug</div></li>
    <li class="listeelement" id="load-content-id-4"><div>contentzeug</div></li>
  </ul>

Im ersten Moment würde ich jetzt den Klick wie folgt an das .listelement hängen und den Request starten (so auch meine bisherige Vorgehensweise):

function sendRequest() {
  jQuery('.listeelement').live( "click", function() {
    1. Fummel die Id des nachzuladenden Contents aus der css-id raus
    2. Sende den Request an die Action
  });
}

Irgendwie nervt mich hierbei aber ganz gewaltig Punkt 1 bei der Verarbeitung des Klicks. Denn man muss etwaige Parameter erstens immer irgendwie im Markup ‘verstecken’ und zweitens es dann wieder rausfummeln um es an die Action zu schicken. Schön ist anders und unter dem Performance-Aspekt kann das ja auch nicht der Stein des Weisen sein.

Am einfachsten und mir am liebsten wäre meiner Ansicht nach einfach folgendes:

  <ul>
    <li onclick="sendRequest({'id' : '1' })"><div>contentzeug</div></li>
    <li onclick="sendRequest({'id' : '2' })"><div>contentzeug</div></li>
    <li onclick="sendRequest({'id' : '3' })"><div>contentzeug</div></li>
    <li onclick="sendRequest({'id' : '4' })"><div>contentzeug</div></li>
  </ul>

Woraus sich folgendes Script ergibt:

function sendRequest(pParams) {
      jQuery.ajax({
        type: "GET",
        url: action,
        dataType: "json",
        data: pParams,
        success: doSomething
      });
}

Die Verarbeitung ist, meiner Ansicht nach, damit definitv viel einfacher und auch schneller, würd ich mal meinen.
Ich bin aber etwas unsicher, ob das jetzt ne gute oder schlechte Idee ist diesen Weg zu gehn, da zumal auch nicht genau weiß, ob das onclick überhaupt noch verwendet werden soll.

Na vielleicht hat da ja irgendjemand ne Meinung dazu. Würde mich freuen und auch wirklich weiterhelfen.

Feel free to Flattr this post at flattr.com, if you like it.

Der Königinnenweg ist mir dabei noch nicht ganz gekommen. Aber zwei Dinge sollte man von vorneherein schonmal machen, um Fehler einzugrenzen, abzufangen, wegzutun:

1. Alle Javascriptfehler global unterdrücken:

window.onerror=function(msg, url, linenumber){
   //request starten um fehler wegzuloggen
   return true;
}

Dies bewirkt, dass der User auch noch weiter klicken kann, selbst wenn irgendwo ein Semikolon im Js-Code gefehlt hat. Die drei Parameter msg, url und linenumber geben dabei genauer Auskunft darüber, was genau wo passiert ist.
Diese Info könnte man jetzt bspw. über einen xh-request irgendwo an den Server schicken und wegloggen.

2. Ajax-Request-Fehler abfangen

  onreadystatechange = myonreadystatecallback

In der myonreadystatecallback kann man dann die verschiedenen Stati des Requests reagieren und gegebenenfalls die Response-Fehler auswerten und wegloggen. Das ganze kann dann so aussehn:

  xhr.onreadystatechange = function() {

    if(xhr.readyState == 4 //4 = request fertig) {
      if(xhr.status != 200) {
        //request starten um fehler wegzuloggen
      }
    }
  }

Da der Post ja Simple Error Handling heißt, soll es das auch erstmal gewesen sein. In großen Projekten ist es natürlich sinnvoll für beide Lösungen eine globale Error-Klasse zu schreiben, die sich um die Behandlung kümmert.
Sowas behandlen wir dann vielleicht besser in einem Advanced Error Handling Post . Denn das Thema kann man bis zur Erschöpfung diskutieren und behandeln.

Insgesamt ist es aber so, dass man mit diesen beiden kleinen Lösungen schonmal jede Menge schaffen kann.
Kurzzeitig hab ich mal gedacht, dass es auch ne gute Idee wäre, um alles im Javascript ein try….catch drumzupacken und im catch dann den Fehler wegzuloggen. Mir wurde dann aber recht schnell klar (gemacht), dass dies sehr zur lasten der Performance geht und vor allem versucht wird die Fehler des Entwicklers abzufangen. Und der soll ja eigentlich gar nicht erst welche machen (jslint will hurt your feelings? joa…aber helfen tuts scho…)

Feel free to Flattr this post at flattr.com, if you like it.

Nicht, dass mich das Openweb nicht mehr interessiert und es darüber nichts mehr zu sagen gäbe, aber erstens reg ich mich meistens sowieso nur auf, zweitens kostet es mich wahnsinnig viel Zeit einen Post über die diesbezüglichen Themen zu verfassen und drittens schließt das eine das andere ja nicht aus. Trotzdem wird es ab sofort etwas Entwickler- und vor allem Javascript-lastiger. Schätzungsweise werden damit auch die Posts kürzer und die Frequenz höher, da ich häufiger schreiben kann, was mir gerade durch den Kopf geht, ohne stundenlang ausholen zu müssen.

Euren Mut und Unmut darüber dürft ihr dann gerne über den in den letzten Wochen entstandenen Button äussern. Kaum zu glauben, dass so ein kleines Ding soviel Tränen, Schweisss und Blut kosten kann. Würde mich also freuen, wenn ihr mal klicken könntet .

Feedback welcome (zur Themenbruchkante UND vor allem zum Button natürlich, der sich allerdings noch in der Testphase befindet).

Feel free to Flattr this post at flattr.com, if you like it.

“Authentifizierung und Austausch von Profildaten. Wer ist der User, der meinen Service nutzen möchte?”

Dank yiid durfte ich mich in letzter Zeit etwas näher mit Facebook und dessen APIs auseinandersetzen (man kann sich jetzt seine Facebook-Aktivitäten in yiid anzeigen lassen). Dies war, nach anfänglich sehr hoher Motivation meinerseits, nicht unbedingt der Spass, den ich erwartet hatte, sondern ist zur etwas größeren Herausforderung mutiert. Wie auch immer hoffe ich, dass ich jetzt nicht zu (negativ) vorbelastet bin und meine Voreingenommenheit sich in Grenzen hält. Sollte ich zu kritisch werden, dann bitte ich dies zu entschuldigen und auf jeden Fall in den Kommentaren anzumerken.

OpenID integrieren

Unter wiki.openid.net/Libraries sind neben den Bibliotheken für alle gängigen Programmiersprachen (Java, C#, Python, Ruby….) auch insgesamt 7 PHP-Bibliotheken gelistet. Für welche man sich dabei entscheiden mag, ist sicherlich letztendlich Geschmacksache. So gibt es bspw. sowohl Plugins für diverse Frameworks wie Symfony oder auch Drupal, als aber auch unabhängige Klassen, die ich persönlich bevorzugen würde, da Plugins, wie für Symfony, meistens doch nicht genau das machen was man will oder nicht zur Projektkonfiguration passen. Meine Empfehlung deswegen sind die PHPOpenID-Klassen von JanRain, mit denen man meiner Ansicht nach nicht viel falsch machen kann (denn ja quasi von den OpenID-Machern gemacht ). PHPOpenId bringen eigentlich alles mit, was man für einen lauffähigen Client braucht und für ambitionierte bietet die Bibliothek auch die Möglichkeit, selbst einen Provider zu implementieren. Die Extensions für sReg und Attribute Exchange sind in den Klassen ebenfalls mit enthalten.

Leider habe ich selbst noch nie einen OpenID-Consumer in ein bestehendes Projekt eingebaut. Um mir aber doch eine Meinung bilden zu können habe ich mir heute mal die Mühe gemacht, zumindest mal etwas näher draufzuschauen und bin dem -meiner Ansicht nach großartigen- Tutorial auf Dr. Web gefolgt, um mal eine grobe Consumer-Implementierung bei mir Lokal zu “simulieren”. Dank des Tutorials war dies denkbar einfach und ich habe keine halbe Stunde gebraucht, um einen Login mit meiner OpenID hinzubekommen und die sReg-Daten gabs obendrein noch gratis dazu. (Aufgrund des erwähnten Tutorials spare ich mir an dieser Stelle weitere Details zur Implentierung, denn ich würde sowieso nur das wiedergeben, was dort steht.). Die komplette OpenId-Integration läuft auf der Server-Seite ab, was die Sache auch nochmal vereinfacht und ich musste mich eigentlich lediglich mit dem anständigen Includieren der Klassen und der Kommunikation zwischen meinem Client und dem Provider kümmern und sonst nichts (Warum das erwähnenswert ist sehen wir nachher bei der Facebook Connect – Integration).

Natürlich kann man dies als eine kleine Milchmädchenrechnung auslegen, denn ich habe ja kein komplexes Framework, in das das Ganze integriert werden muss. Doch auf Grund der Einfachheit und der Aussagen anderer Entwickler schätze ich den Aufwand auf keinesfalls höher als einen Tag, womit sich der Arbeitsaufwand in Grenzen hält will ich meinen.

Ist man absoluter Neuling auf dem Gebiet OpenID, dann fällt die Auseinandersetzung mit der Thematik sicherlich im ersten Moment ein wenig schwerer. Aber mittlerweile ist OpenID aus den Kinderschuhen entwachsen und es existieren zahlreiche Erklärungen, Tutorials und Dokumentationen zu OpenID. Hier eine kleine Liste:

• Oben erwähntes Tutorial in Deutsch: http://www.drweb.de/magazin/openid-demystified-teil-1/
• Einführung bei Heise (deutsch): http://www.heise.de/developer/artikel/Identity-Management-Authentifizierungsdienste-mit-OpenID-227202.html
• Alles über OpenID (deutsch): http://openidgermany.de
• Und natürlich nicht zu vergessen die Basics hier und hier (deutsch)
• Best Practice für Consumer (englisch):  http://wiki.openid.net/Details-of-UX-Best-Practices-for-RPs

OpenID als Consumer für den SingleSignOn zu implementieren scheint mir verhältnismäßig einfach und schnell zu gehen. Mit einem Gewissen Basiswissen und den ausreichenden Dokumentationen fühle ich mich gut gewappnet und konnte schnell und erfolgreich einen Login/Registrierung bauen. Die Integration in ein komplexes Framework kann ich zwar nicht hundertprozentig beurteilen, scheint aber auch vom Aufwand überschaubar. Wenn die Bibliotheken in anderen Programmiersprachen ähnlich komfortabel sind, wie die für PHP, dann fallen mir wenig bis keine Argumente gegen eine Implentierung ein.

Facebook Connect ingetrieren

Während ich mich bei der OpenID-Imlementierung lediglich um die serverseitige Implementierung und damit auf PHP konzentrieren konnte, scheinen die Bedürfnisse für Facebook doch ein wenige vielfältiger zu sein. Für den Registrierungs- und Login-Prozess empfiehlt Facebook in seinen Getting-Startet-Dokus die Implementierung mit Javascript, der FacebookMarkupLanguage UND einer serverseitigen Programmiersprache wie PHP. Die serverseitigen Clien-Libraries sind dabei, wie bei OpenID in jeder gängigen Programmiersprache vorhanden, wobei es allerdings von Seiten Facebooks nur für einige wenige einen Support gibt (z.B. für PHP5). Um überhaupt mit der Facebook-Implementierung beginnen zu können, muss man neben den Library-Include noch eine App innerhalb von Facebook selbst anlegen und korrekt konfigurieren, dort erhält man dann auch die unbedingt notwendige application id und das application secret. Beim erstellen der App wird man aufgefordert, die sogenannte  xd_receiver.htm herunterzuladen und gebeten, diese im Verzeichnisroot der eigenen Applikation abzulegen. Hat man dies alles gemacht, dann kann man mit der eigentlichen Implementierung beginnen.

Leider muss ich an dieser Stelle sagen, dass es den Rahmen dieses ohnehin schon wieder sehr langen Artikels definitiv sprengen würde, eine komplette Facebook-Connect-Implementierung zu beschreiben. Deswegen muss ich vorerst  auf die (englischen) Tutorials, die von Facebook selbst bereitgestellt werden verweisen:

• FacebookConnect Tutorial: http://wiki.developers.facebook.com/index.php/Facebook_Connect_Tutorial1
• Tutorial von Goldsteintech.com: http://www.goldsteintech.com/facebook_connect/landing_page.php

Auf deutsch habe ich dazu noch nichts wirklich Gutes gefunden (wenn ihr eins kennt, bitte in den Kommentaren posten), plane aber in den nächsten Wochen selbst Eines zu schreiben und hier zu veröffentlichen, also noch ein wenig Geduld . Grob erklärt läuft das Ganze aber über die Facebook-Session-Cookies ab, und es wird überprüft, ob der User gerade bei Facebook eingeloggt ist. Wenn ja, dann muss man nachschauen, ob man innerhalb des Systems eine passende Fb-UserId hat, wenn ja, dann kann man den User einloggen, wenn nein, dann muss der User den FB-Button klicken (ebenso, wenn er gerade nicht bei Fb eingeloggt ist). Nach dem Klicken auf den Button, dem Login bei Facebook und ggf. der Autorisierung der App kommt der User dann zurück auf den eigenen Service und man überpüft erneut die userid. Gibt es den User tatsächlich noch nicht, dann bietet man eine Registrierung an und speichert daraufhin die Daten und die UserId, gibt es ihn, dann kann man ihn einloggen.

Diese Kommunikation wird insgesamt, wie gesagt mit Javascript, FBML und PHP abgefrühstückt. Sicherlich ist auch eine Implenetierung nur mit PHP und HTML möglich, habe ich aber nur kurz ausprobiert und hat nicht besonders gut geklappt (was auch an mir liegen kann).

Hat man nun alles geschafft und erfolgreich eingebaut und alles funktioniert, dann bekommt man (dank der freizügigen FB privacy policies) auch hier eine Fülle von Informationen über den gerade angemeldeten User. Einen kompletten Überblick darüber findet ihr hier. Vorraussetzung hierfür ist allerdings unbedingt, dass der User eure App hinzugefügt und autorisiert hat.

Die Facebook-Connect-Integration ist mir persönlich sehr schwer gefallen, da mich der Mischmasch aus JS/FBML und PHP extrem irritiert hat. Die Dokumentation der gesamten Facebook-APIs ist zwar unglaublich umfangreich, aber in diesem Fall ist weniger vielleicht manchmal mehr. Beim lesen kommt man von Hölzchen auf Stöckchen und findet eigentlich nie raus, was man jetzt wirklich braucht oder gar falsch macht, wenn etwas nicht klappt. Klar klingt das jetzt sehr schwarz-weiß-malerisch, aber ich habe doch hin und wieder mal irgendwelche APIs angebunden und mir eigentlich selten so schwer getan. Ich schiebe dies auf den Overkill an Informationen, den man bekommt, denn auch die Schritt für Schritt-Anweisungen innerhalb der Doku verweisen einen immer wieder auf weiterführende Informationen und am Ende weiß man gar nicht mehr, wo man vorne angefangen hat.

Genervt hat auch die Registrierung der App innerhalb von Facebook, denn es gibt dann doch ne ganze Menge, die man konfigurieren muss oder jedenfalls kann. Und auch hier hilft einem die Dokumentation nicht so wirklich weiter, denn um komplett zu verstehen, was man wofür braucht oder auch nicht ist man eine ganze ganze Weile erstmal beschäftig. Gefühlt war es so, als hätte ich vorher erstmal ne ein paar Tage recherchieren und Facebook Connect KOMPLETT verstehen müssen, um endlich vernünftig anfangen zu können (und wie gesagt, war jetzt auch nicht meine erste API).

Und leider muss ich noch ein weiteres Minus für Facebook vergeben, denn so schnell ich eben ganz fix den OpenID-Client bei mir lokal implementieren und auch testen konnte, so wenig ging dies mit Facebook Connect, denn die Entwicklung des FB-Logins innerhalb einer lokalen Testumgebung hat nach stundenlangem Rumgefummel immer wieder bloss eine Endlosschleife hervorgebracht. Kann sein, dass es Möglichkeiten gibt, FB lokal zu testen. Wenn ja, dann weiß ich allerdings nicht wie und scheint auch ein wenig mehr Aufwand zu sein. Hinzukommt, dass Facebook den Firebug blockiert, was bedeutet, dass bei angeschaltetem Firebug kein Facebook-Javascript  ausgeführt wird, was das Entwickeln und Debuggen nicht unbedingt besser macht.

Fazit:

• OpenID – Klar abgegrenzt, übersichtlich und überschaubar im Aufwand mit wenigen Implementierungshürden und guten Dokus. Zudem gut zu entwickeln, weil lokal test- und ausführbar.
• FacebookConnect – Relativ viele Hürden vorab und Information-Overkill während der Implentierung und bei der Doku. Zudem nicht besonders entwicklerfreundlich durch komplizierte oder nicht mögliche lokale Integration und Testbarkeit. Allerdings: Hat mans mal Verstanden und die Einstiegshürden überwunden, dann ist es ok damit zu arbeiten und warscheinlich sogar relativ einfach -> Übrigends auch ein Satz der mir relativ oft beim Einlesen begegnet ist (‘Wenn mans erst verstanden hat…..’)

Jaja, ich weiß, die die mich kennen und die Kritiker unter Euch werden jetzt sagen: “War ja klar, dass sie Facebook per se negativer Beurteilen wird”. Stimmt, ich mag Facebook und seine, von mir als arrogant empfundene, Politik nicht besonders. Aber als ich angefangen habe mich damit zu beschäftigen, war ich hoch motiviert und auch einigermaßen vorurteilsfrei (ausser,dass es eben proprietär ist). Nach einigen Tagen war ich allerdings so frustriert wie noch nie in meinem Entwicklerdasein, was mich eben zu diesem ein wenig schwarz-weiß-malerischen Urteil gebracht hat.

Auserdem muss ich noch dazu sagen, dass es beim nächsten mal um die Autorisierung von Daten geht, also Facebook vs. oAuth und ich habe den Verdacht, dass Facebook dabei etwas besser abschneiden könnte .

Feel free to Flattr this post at flattr.com, if you like it.

Für den User heißt das im Klartext, dass man, nachdem man sich per openID angemeldet hat nicht mehr per Username/Passwort seine Daten nochmals zum Austausch freigeben muss, sondern die Datenfreigabe geschieht in einem Rutsch direkt bei der Anmeldung/Registrierung:

Die erneute Implementierung findet man bei www.huffingtonpost.com. Gut, die Seite interessiert den deutschen Nutzer vielleicht nicht wirklich wahnsinnig, funktioniert aber einwandfrei und zum ausprobieren mal ganz gut. Das einzige, was ich zu bemängeln weiß ist, dass ich innerhalb des Dialoges den Zugang zu meinen Daten nicht sperren konnte. Vielleicht war ich da aber nicht wirklich schlau genug, wer weiß.

Na dann hoffe ich doch, dass ich bald mal einen Post zustande bekomme, indem ich das Hybrid-Protokoll genauer erkläre

Feel free to Flattr this post at flattr.com, if you like it.

- Autorisierung und Austausch von Profildaten, also wer ist der User, der meinen Service benutzen möchte?
- Welche Daten dürfen wann und wo verwendet werden?
- Wie ist der User sozial vernetzt?
- Was treiben der User und seine Freunde gerade?

Demnach wird es wohl mal Zeit etwas Licht ins Dunkel zu bringen und die Möglichkeiten vorzustellen, zu evaluieren und (wenn möglich) miteinander zu vergleichen. Aber erstmal, was gibt es eigentlich miteinander zu vergleichen?

Open…

Von den offenen Technologien muss man an dieser Stelle wohl als erstes den Open Stack nennen. Der Open Stack ist eine Sammlung von Technologien, die Authentifizierung (openID), Autorisierung (oAuth), Kontaktaustausch(Portable Contacts) und Anwendungs-Portabilität(Open Social) beschreiben. Dazu gehört auch noch XRDS-Simple, dass für Discovery/’Routing’ zuständig ist. Der Herr Pfefferle hat den open stack mal als OSI-Modell der offenen Standards beschrieben, was ich ganz treffend finde und ich will meinen, dass damit ist ja schonmal eine ganze Menge abgehandelt ist. Und auch wenn der Begriff open stack in Internetzeit gerechnet schon fast aus dem Mittelalter stammt, gibt es bisher kaum vergleichbare Ideen und die dort enthaltenen Spezifikationen werden nach wie vor weiterenwickelt.

Neben den Open Stack-Technologien und Austauschmöglichkeiten rücken derweil die User-Aktivitäten, die plattformübergreifend ausgetauscht werden wollen, in den Vordergrund des Geschehens. Das wird sehr gut mit der (noch im Draft-Zustand befindlichen) Atom-Activity-Extension beschrieben und scheint mir sich zunehmend auch durchzusetzen.

Facebook Connect

Während die offenen Technologien für sich gekapselt sind und es für die einzelnen Probleme jeweils eine für sich geschlossene Lösung gibt, sieht das bei Facebook-Connect schon ganz anders aus. Natürlich gibt es auch hier für die unterschiedlichen Bedürfnisse unterschiedliche Möglichkeiten, die Daten auszutauschen, aber prinzipiell ist FBC eine in sich abgeschlossene API (für mich beim Einlesen eine eierlegende Wollmilch-Api ). Das bedeuted, dass der Austausch der unterschiedlichen Daten, nach der Authentifizierung mit dem facebook-eigenen Mechanismus, über ebenso facebook-eigene Technologien, wie die Facebook Markup Language(FBML), die Extended Facebook Markup Language (XFBML), die Facebook Query Language (FQL), eine RESTful Api oder über die Javascript-Library vonstatten geht.

Google Friend Connect

Google Friend Connect ist Googles Versuch in das soziale Web-Geschehen einzugreifen, was ja auch nicht unsinnvoll ist, da ja fast jeder einen Google-Account hat. Zum Datenaustausch setzt Google auch auf die oben schon z.Teil genannten Technologien, wie openID, oAuth, open social, Activity Extension und Portable Contacts (könnte vielleicht auch daran liegen, dass Google den Kram mehr oder weniger entwickelt hat oder zumindest stark beteiligt war).

MyspaceID

Ich wage mal zu behaupten, dass Myspace im großen und ganzen nicht so eine große Rolle in der hier erwähnten Angelegenheit spielt. Da die Jungs und Mädels sich dort aber auch sehr viel Mühe geben erwähne ich es mal der Vollständigkeit halber. Auserdem ist Myspace zwar auf dem absteigenden Ast, hat aber immernoch eine große Nutzer- und Fangemeinde.
MyspaceID ist ein Mittelding aus proprietärer und offener Lösung. Für Autorisierung und Benutzerdatenaustausch an sich wird dort eine eigene API (Javascript und REST) benutzt, während zur Authentifizierung, die Aktivitäten und die Apps je oAuth, die Atom-Extension und open social verwendet wird. Ich kann die Strategie hierbei nicht ganz nachvollziehen und denke, dass Myspace sich mit seiner proprietären MyspaceID statt openID keinen so großen gefallen getan hat, denn wer um Nutzerdaten kämpft sollte vielleicht nicht seine Energie in die Entwicklung eigener SignOn-Technologien stecken, die dann eh niemand implementiert (oder schonmal jemand einen: mit-myspace-einloggen-knopf gesehn?). Nja..Meinungen, Meinungen, Meinungen…..

Update: Wie ich auf Grund des Feedbacks gelernt habe benutzt Myspace komplett den open stack und nicht, wie von mir fehlerhaft dargestellt, eine teils eigene Lösung.

Soweit so gut. Wie unschwer zu erkennen ist kann man also feststellen, dass der Kampf des Datenaustauschs im Großen und Ganzen zwichen den offenen Standards, die eben auch von Google eingesetzt werden, und FacebookConnect abspielt. Dies könnte den Schluss zulassen, dass man sich näher damit beschäftigen müßte, da es ja nur Facebook ist, was offen geschlossen (hihi) agiert. Aber mit 300 Millionen Usern und der Funktion als Datenhub, denn jeder verknüpft ja Twitter, Flickr und Sonstiges mit Facebook, ist dies eine Tatsache, die keinesfalls vernachläßigt werden darf.

…und so gehts dann weiter

Der weiter Plan ist deswegen die Eingangs erwähnten Fragen hinsichtlich Datenqualität und -quantitität, Implementierung(theoretisch, denn ich hab ganz ehrlich keine Zeit spasseshalber mal alles zu implementieren) und Doku, Sicherheit/Transparenz/Usability zu beantworten. Dabei werde ich mich aber wohl auf Facebook vs. Open beschränken.

Feel free to Flattr this post at flattr.com, if you like it.