Als ich vor einigen Tagen las, dass ICQ 6.5 erschienen ist, war ich zuerst nicht sehr beeindruckt ... verschiedene Fehler, Abstürze und die nervigen Kleinigkeiten hatten mir die Vorgängerversion madig gemacht. Eigentlich hatte ich mir nach dem letzten unbegründeten Absturz geschworen nie wieder ICQ zu verwenden, doch da ich diesem Vorsatz schon das eine oder andere Mal eher versehentlich gebrochen hatte, als ich das noch herumliegende Schnellstart-Icon anklickte, dachte ich mir, dass ich mir die neue Version zumindest einmal ansehen sollte... Das einzige besondere hieran schien allerdings die "Open Xtraz"-Kampagne zu sein:

Ich war also quasi schon wieder in Begriff die Seite zu verlassen, doch irgendwie reizte mich mir zumindest einmal anzuschauen, was sich hinter den Open Xtraz verbarg. Also schaute ich in die Developers Zone und wurde bitter enttäuscht... rund 10 Forumseinträge und nur rudimentäre Anleitungen zu den Xtraz waren nicht gerade was ich mir erhofft hatte. Aber wenigstens gab es eine Liste mit Schritten, die zu befolgen waren, wenn man sein eigenes Xtra entwickeln wollte:

1.) Open Xtraz Developer Tool runterladen

2.) Open Xtraz Template runterladen

3.) Entwickeln und testen

4.) Xtra in die Galerie hochladen

Klingt doch recht einfach - also lud ich mir das DevTool herunter und klickte auf den Link, um das Template herunterzuladen. Das wollte aber nicht auf meinen Rechner wandern, so lange ICQ 6.5 nicht installiert war, also erklärte ich mich auch zu diesem Download bereit.

Nachdem alles installiert war, öffnete ich zuerst den Bildschirm "Meine Xtraz". Dieser war zu dem entsprechenden Zeitraum noch leer. Darum klickte ich auf "Eigenes Xtra erstellen" (rechts unten).

Das öffnete mir aber nicht, wie erwartet, das Entwickler-Tool, sondern brachte mich lediglich wieder auf die Seite der "Developer Zone". Hier musste ich dann auf den entsprechenden Link "Template runterladen" klicken, was ICQ dazu veranlasste ein Verzeichnis auf meiner Platte zu erstellen. Darin zu finden waren zwei Ordner namens "content" und "theme" und einige Konfigurationsdateien. Insgesamt erinnerte mich der Aufbau stark an die Packages, die man für Firefox-Erweiterungen erstellen kann. In einem weiteren Unterordner im Themes Ordner befinden sich die Dateien für die Icons (ICQ besteht übrigens darauf die Namen dieser Dateien nicht zu ändern) - und im "content" Ordner befinden sich eine Javascript-, eine HTML- und mehrere Bilddateien.

Alles in Allem sieht der Inhalt beim Aufruf über die "Meine Xtraz"-Seite ungefähr wie folgt aus:

Hier erkennen wir auch den Grund dafür, dass wir jedes Mal ein neues Template herunterladen müssen - ICQ scheint auf diesem Weg die ID des Templates hochzuzählen ... ob man das nicht auch beim Upload des Xtraz in die Galerie hätte machen können?

Naja - auf jeden Fall wissen wir jetzt, dass es sich nur um HTML und Javascript handelt. Also schauen wir doch mal ins "Developer Tool" ... Ihr ahnt es bereits:

Auch hier ist nicht viel zu holen - statt einer Entwicklungsumgebung oder zumindest etwas, was einem dabei Hilfestellung geben könnte, findet man hier nur eine Oberfläche, um die Meta-Daten des Projekts zu editieren. Einstellbar sind hier unter anderem der Name und die Beschreibung des Projekts, sowie die gewünschte Größe des Fensters, in dem das Xtra angezeigt werden soll.

In der Mitte finden sich dann zwei Radio-Buttons, die darüber entscheiden, wo sich das Projekt befindet ... Der obere Radio-Button (Standard) zeigt einfach auf das Verzeichnis, in das euer Xtra-Template geladen wurde - der untere Radio-Button (und das könnte ganz interessant sein) zeigt auf eine Web-Adresse. Das bedeutet, dass man interaktiven Inhalt z.B. auf seinem eigenen Server hosten könnte - z.B.: um ein Spielchen mit dahinterliegender Datenbank zu erstellen.

Die Verzeichnisse darunter sind eher zu eurer Information, als zu sinnvollen Aktionen nötig - und zwar helfen Sie euch im Jungle von ICQ die Template-Verzeichnisse zu finden :-). Ganz unten ist dann noch ein Link, der ein Zip-Archiv aus dem ganzen Ordner erstellt - und das wäre es schon mit dem "Developer Tool".

Also schauen wir uns doch einmal die Dateien im Ordner selbst an.

Die HTML-Datei:

Die HTML-Datei bindet die mitgelieferte func.js und eine auf dem ICQ-Server liegende Javascript-Datei ein, die die API enthält. Der Rest der Datei ist eigentlich nur CSS und HTML, der in dem oben gezeigten Screenshot resultiert.

Die JS-Datei:

In der JS Datei findet sich als erstes folgende Zeile:

var icqConnector = XtrazConnector.getIcqConnector();

Hierbei wird das XtrazConnector-Objekt der API verwendet, um den sog. IcqConnector zu initialisieren. Sollte man einen Debugger wie z.B. das Visual Studio zur Verfügung haben, so reicht das einfache Schlüsselwort "debugger" schon als erste Zeile in die init Methode eingefügt, und schon entblößt sich der sog. Connector vor uns:

Beim ersten Hineinblicken in diese Oberfläche musste ich doch einmal herzhaft lachen - hatte ich nicht eben noch gelesen, dass die JS Datei, die auf dem ICQ-Server liegt "open_xtraz_wrapper_1.js" heißt? Warum sind wir dann hier schon in ApiVersion 2? ;-) ... naja - Kleinigkeiten ;-D.

Auf jeden Fall sehen wir hier eine grobe Übersicht über die Funktionen, die die Xtraz API bietet. Wir können Alerts erstellen (das sind dann diese kleinen Fenster die rechts über der SysTray auftauchen) und eine Nachricht dorthin übergeben... der Versuch damit zu debuggen stellte sich allerdings als ziemlich nervig heraus, da ich mich selber mit Alerts nur so überflutete und jedes einzelne wegklicken musste ;-).

Eine andere Methode ist z.B. GetUserList(). Diese liefert uns folgendes Objekt:

Hierbei war ich zuerst ein wenig überfordert, denn ich dachte ich könnte auf die Properties des Objekts via Index zugreifen - dies wurde mir jedoch verwehrt. Hätte ich ein wenig früher in die Dokumentation geschaut (die übrigens nicht erklärt wie es geht) hätte ich mir vielleicht ein wenig Suche erspart, denn bei der Methode GetGroupList() wird via Group(idx) auf die Items zugegriffen und so funktioniert es auch hier ... wir können also einfach eine Schleife über "Count" machen und jeweils via Item(idx) darauf zugreifen:

var users = icqConnector.getUserList();

for (var i = 0; i < users.Count; i++)
{
    var user = users.Item(i);
}

Die User Objekte bieten dann die Informationen, die eure Kontakte eingegeben haben - das bedeutet ich hatte in allen Fällen zwar den Nickname der Person zur Hand aber nur äußerst selten echte Namen. Doch das Geburtsdatum war sehr oft ausgefüllt und so beschloss ich eine Geburtstagsliste zum Test zu schreiben. Nach einigen Versuchen sah diese wie folgt aus:

Die Scrollbar musste ich dabei selber einfügen, aber das war schnell bewerkstelligt, da ich aus dem "Developer Tool" ja die fixe Höhe des Fensters kannte und nur ein DIV mit overflow:auto darum zu ziehen brauchte. Natürlich habe ich noch eine kleine Überschrift, sowie einen Link zu meiner Seite eingefügt - aber das war es dann auch schon. Interessant fand ich bei den Arbeiten mit dieser Ansicht übrigens, dass mir ICQ einen Javascript-Fehler warf, als ich versuchte mit innerHTML eine Tabelle zu füllen - aus diesem Grund besteht die obige Auflistung ausschließlich aus floating-DIVs.

Einmal kurz getestet, ob alles funktionierte - und schon konnte es ans Uploaden des Xtraz gehen. Dachteste ... :-D ... Als ich das Projekt hochladen wollte, bekam ich die Meldung dass meine Email-Adresse nicht verifiziert sei ... ok - aus sicherheitsgründen sollten die so etwas machen, damit man kein Schindluder damit treiben konnte ... Aber: Auch nach der Bestätigung meiner Email-Adresse (und ICQ selbst hatte den Link "verifizieren" ausgeblendet), erhielt ich immer noch die Fehlermeldung. Also suchte ich via Google nach einer Lösung für das Problem und fand einen anderen Entwickler, der sagte, dass es bei ihm auch nicht geklappt hätte, bis er sich einen neuen ICQ Account angelegt hätte - widerwillig tat ich dies und wurde ... NICHT ... belohnt ... auch mit dem neuen Account klappte es nicht - also versuchte ich ICQ neuzustarten - und siehe da - ich schaffte es eine Version hochzuladen ...

Da ich aber weder in meinem "My Dev" Bereich auf icq.com noch sonst irgendwo einen Hinweis darauf fand, dass es auch wirklich geklappt hatte, postete ich eien Beschwerde an ICQ, dass irgendwas nicht klappte - und seit ich ein weiteres Mal den Zweitaccount versucht hatte, konnte ich mich mit beiden nicht mal mehr auf der Seite einloggen ...

Mittlerweile habe ich eine Mail von ICQ bekommen ... In dieser steht, dass mein Xtra nicht den Vorgaben entspricht ... Grund: Ich habe kein eigenes Icon... verdammt - also - Icon erstellt und versucht erneut hochzuladen ... offensichtlich haben sie sich meine Beschwerde zu herzen genommen, denn nun steht dort nicht mehr "Mail address not verified" sondern schlicht:

"Upload failed" ... Upload fehlgeschlagen - ohne Begründung - ohne Beschreibung - nichts was darauf hindeutet, dass etwas nicht geklappt hat - ich behaupte ja mal, dass sie einfach die Fehlermeldung verdeckt haben, damit die User nicht sehen, dass sie ihr eigenes System nicht im Griff haben - und in Wirklichkeit steht dort bestimmt immer noch "Mail address not verified".

Fazit:

Ich finde die Idee mit den Open Xtraz echt sehr sehr nett ... ich glaube da könnte man bei einer Netzwerkgröße wie ICQ fast schon einen zweiten AppStore wie von Apple draus machen - aber ich finde sie haben unglaublich Mist bei der Umsetzung gebaut - und ich habe schon so oft vor Wut auf meine Tischplatte eingeschlagen, während ich immer wieder rausflog, vergeblich versuchte mich anzumelden oder Fehler beim Upload bekam, dass ich fast schon keine Lust mehr habe mich damit zu beschäftigen ... Aufruf an ICQ: Behebt die verdammten Fehler - Oder seit nicht so kleinkarriert, dass ihr mir den einzigen erfolgreichen Upload in vier Tagen mit den Worten "Du musst ein eigenes Icon erstellen" zurückschickt. DANKE!

Falls jemand angeregt genug ist sich damit zu beschäftigen und sich nicht von meiner Genervtheit hat anstecken lassen, findet Ihr hier die Referenz der API. Ich wünsche euch viel Spaß beim Bau eures Projekts - es macht Spaß - ihr werdet euch nur mit dem Upload schwer tun ;-)

[Update]

Ca. 3-4 Tage nach meiner zweiten Beschwerde teilte mir ICQ mit, dass sie den Fehler erkannt und behoben haben. Mittlerweile wurde die Geburtstagsliste rund 10.000 Mal runtergeladen. Die Seite in der Galerie findet ihr hier. Mittlerweile funktioniert alles bestens und ich bin froh darüber, dass ICQ die Probleme beheben konnte. Eine Warnung möchte ich euch allerdings noch mit auf den Weg geben. Wenn ihr Alternativ-Clients für das ICQ Netzwerk verwendet, werdet ihr bestimmt genau wie ich bald von Bots genervt werden, die versuchen Kontakt mit euch aufzunehmen. Ich hatte täglich 4-5 Kontaktanfragen von irgendwelchen russischen Accounts. (Und ja - ich habe sogar mal versucht zu antworten, um herauszufinden, ob es sich nicht doch um Interessierte handelt ;-D). Wenn ihr ICQ selbst verwendet, könnt ihr einstellen, dass ihr keine Nachrichten von Leuten außerhalb eurer Kontaktliste haben wollt. Bei ICQ funktioniert das. Bei Trillian scheint dem nicht so zu sein (soweit meine Erfahrung).

Ich habe in den letzten Tagen die Zeit gefunden ein paar liegengebliebene Zeitschriften durchzulesen und bin dabei auf ein paar sehr interessante JS-Bibliotheken gestoßen:

Bevel-JS

Link: http://www.netzgesta.de/bevel/

Ein cooles Script, um Grafiken via Javascript zu modifizieren.^

Im Vordergrund könnt ihr die Grafikdatei aus dem Beispielordner sehen, während im Hintergrund die Beispielseite mit angewendetem Javascript dargestellt ist. Beide mitgelieferten Javascript-Dateien haben nur eine Größe von 48kb.

Flot-JS

Link: http://code.google.com/p/flot/

Der folgende Code stammt aus dem Beispielverzeichnis:

Was hier ein wenig sehr mathematisch aussieht, ist nicht mehr als die Beschreibung bestimmter Graphen - und zwar folgender:

Das ist noch eine relativ einfache Darstellung für das, was die Flot-Bibliothek anbietet. Eine schon etwas komplexere Beispieldarstellung gleich mehrerer verschiedener Graphen findet sich ebenfalls im Beispielverzeichnis:

Um es mit den Worten eines Arbeitskollegen zu sagen: "Das werd ich nicht mehr als einmal pro Jahr brauchen, aber dann könnte es echt interessant sein."

Das nette an den Diagrammen ist, dass die Bibliothek gleichzeitig Methoden mitbringt, die bei der Wertebestimmung oder dem vergrößern von Ausschnitten helfen.

Ext-JS

Link: http://extjs.com

Die ExtJS scheint sehr nette vordefinierte Controls mitzubringen. Ein Screenshot der API-Doku des Frameworks demonstriert gleichzeitig einige der Controls, die auf der hauseigenen Seite zum Einsatz kamen:

Wie man im Baum auf der linken Seite lesen kann, sind einige der vorhandenen Controls sehr sinnvolle Controls, die in den meisten Anwendungen ihren Platz finden könnten. Darunter u.a.: Grid, Menu und Tree.

Für die Lesefaulen gibt es dort übrigens ebenfalls eine Seite mit Videotutorials.

zXml

Link: http://nczonline.net/downloads/

Auf der oben genannten Seite, findet man mehrere nette Bibliotheken für Javascript. Eine davon ist z.B. eine Erweiterung der JS-Arrays um Methoden wie "Clone".

Die Klasse, die mich aber am meisten interessiert hat, stellt eine browserunabhängige Schnittstelle für die Verarbeitung von XML zur Verfügung. Die JS-Datei ist gerade einmal 14kb groß und erlaubt es einem über Code ähnlich dem folgenden zu verwenden:

Wie man sehen kann, kann man über übliche Begriffe wie firstChild oder tagName auf die einzelnen Elemente und ihre Werte zugreifen.

Dojo-Offline-Toolkit

Link: http://dojotoolkit.org/offline

Im "entwickler"-Magazin (Ausgabe: März/April) befindet sich ein Artikel über die Verwendung des Dojo-Offline-Toolkits in Zusammenarbeit mit Google-Gears. Google-Gears stellt eine SQLite Datenbank und einen Proxy zur Verfügung, mit dem sich dynamischer Content auf dem Client ablegen und bei Bedarf gesteuert angezeigt werden kann.

Das Dojo-Offline-Toolkit fügt Google-Gears keine neuen Methoden hinzu, jedoch stellt es einige Methoden zur Verfügung, die die Arbeit mit Gears wesentlich erleichtern sollen. Darunter fallen Methoden wie den Dojo-Storage, bei dem sich Objekte persistent ablegen lassen, sowie Befehle zur Ausführung von SQL oder dem Nachladen von Ressourcen einer Webseite.

Nur der Vollständigkeit halber hier noch einige weitere Links von mir bekannten Javascript-Frameworks:

- Prototype

- Script.Aculo.Us

- Moo-Ajax und Moo-FX

- JQuery

- ASP.Net Ajax

Alle von diesen sind großartige Frameworks, die sich nicht nur auf die normale Arbeit mit Ajax beschränken, sondern auch perfekte Effekte liefern. Ich gehe jedoch davon aus, dass diese Frameworks den Leuten eher geläufig sind und deswegen eher weniger Erklärungsbedarf bestehen dürfte.

Heute morgen war es soweit. Fast wie an Weihnachten freute ich mich, als ich beim betreten der "Sitecore Xpress"-Seite nicht mehr den altbekannten Teaser "Coming to a server near you..." sah, sondern der Download direkt vor meiner Nase lag. Ich hab mich natürlich auch direkt eingeloggt, um es zu herunterzuladen. Knappe 250MB haben dann weniger als 10Minuten gebraucht, um sich auf meinem Desktop einzufinden ... der Lizenz-Code leider etwas länger ... den hatte ich erst gegen 16Uhr in Händen, aber das war das warten auch wert, denn ICH KANN ENDLICH UNTER VISTA DAMIT SPIELEN ...

Das kommerzielle Sitecore (neuerdings auch "Sitecore red" benannt), hat da bei mir noch ein paar Probleme mit dem IIS unter Vista gemacht, was aber in der nächsten Version auch behoben werden soll.

Schön ist auf jeden Fall, dass es wirklich ausreichte die Fehlermeldung am Anfang (über den nicht laufenden IIS) zu ignorieren und einfach drauflos zu installieren - und siehe da - nach einigen Minuten tauchte die vorkonfigurierte Standard-Seite in meinem Browserfenster bei mir auf:

Das hat mein Herz dann doch sehr erfreut.

Aber was ist Sitecore eigentlich? Sitecore ist ein hochentwickeltes CMS - und zwar das beste, dass ich bisher gesehen habe. Man fühlt sich quasi auf dem heimischen Desktop, wenn man direkt nach dem Login auf einer Seite wie folgender begrüßt wird:

(Und das ist ein Screenshot von der aktuellen Version) ... wundert euch übrigens nicht, wenn alle Funktionen beim ersten Mal etwas länger brauchen ... Das liegt schlichtweg daran, dass .Net die Sitecore-Libraries ja kompilieren muss.

Wie ihr auf dem Screenshot sehen kann, ist die Oberfläche einem Windows-Desktop nachempfunden ... und auch der so genannte "Content Editor" entspricht schon sehr dem Aussehen des Windows-Explorers. Als Windows-User dürfte man also kaum Probleme haben sich zurechtzufinden:

Wenn ihr also gerne mal ein CMS ausprobieren möchtet, dass normalerweise kostenpflichtig ist und in Enterprise Lösungen eingesetzt wird, dann ladet euch Sitecore Xpress auf jeden Fall einmal herunter, denn es ist kostenlos und soviel Spaß mit einem CMS werdet ihr selten haben ;-).

Links

Sitecore Webseite

Sitecore Xpress Webseite (DOWNLOAD)

Deutscher Sitecore Solution Partner "netzkern GmbH"

Immer wieder stand ich vor dem Problem, dass ich den Content einer Seite zentrieren musste.

Mein standardmäßiger Weg wurde deshalb ein <center>-Tag um die komplette Seite zu setzen und den Content dem entsprechend aufzubauen, dass er mit dem Tag zusammenarbeitete.

Ab und an kam mir aber immer mal wieder die Lösung unter, bei der die "margin"-Style-Eigenschaft zur Problemlösung verwendet wurde. Das Problem: Irgendwie funktionierte es manchmal - und manchmal nicht. Aber jetzt weiß wie es definitiv funktioniert:

margin:0 auto

Mit dieser Kombination sagt ihr der Seite "kümmer dich selber darum, dass die Seite links und rechts den selben Abstand hat - oben und unten brauchst du aber keinen Abstand".

Erklärung: Der erste Wert behandelt das margin-top und -bottom, während der zweite Wert -left und -right beeinflusst.

Damit aber die Seite auch wirklich zentriert wird, reicht es nicht aus diese Eigenschaft zu setzen, denn dann sagt sich der Browser: Dann nehm ich halt die ganze Breite des Bildschirms. Deshalb müsst ihr dem Content ebenfalls eine feste Breite geben:

width: Xpx (X = numerische Angabe der Breite)

Wenn ihr diese beiden Style-Eigenschaften dem umschließenden Content zugeweißt, zentriert sich dieser automatisch, egal wie breit ihr das Fenster macht.

Hinweis: Wenn ihr übrigens mit dem oben genannten <center>-Tag arbeitet: Das funktioniert auch - allerdings richten sich dann alle Elemente in eurem Content entsprechend mittig aus. Das bedeutet, dass ihr Positionen anders bestimmen und ggf. allen Elementen ein text-align:left geben müsst.

Nachdem wir heute eine Liste mit angegebenen Gutscheincodes exportieren sollten, stellten wir geschockt fest, dass die Liste komplett leer war. Es gab nur zwei Einträge von Usern, die offensichtlich versucht hatten einen Code anzugeben, doch von diesen waren nur die ersten beiden Ziffern gespeichert.

Wir haben bestimmt 45 Minuten mit zwei Personen nach dem Bug gesucht, da wir vermuteten, dass ein Fehler beim Speichern der übrigen Teile des Codes aufgetreten sein könnten - doch egal welche Sonderfälle wir prüften: Alles schien einwandfrei zu funktionieren.

Irgendwann schauten wir uns dann die Einbindung in die Seite an und uns wurde folgendes klar: Es lag schlichtweg am Design :-D.

Die Textboxen, in die der Gutscheincode eingegeben werden konnte, bestanden aus zwei (unbeschrifteten) Textboxen. Ungefähr so:

Das Problem welches sich nun auftat war folgendes: Die linke von beiden Boxen war für den Code gedacht - die rechte Box hingegen sollte eine Ortskennzahl (eine Postleitzahl oder ähnliches) beinhalten, welche aber Freitext zuließ. Da der Gutscheincode allerdings vermutlich mit Bindestrichen geschrieben worden war, oder schlichtweg, weil keine Erklärung angegeben war, was in die zweite Box sollte, teilten die potentiellen Kunden den Gutscheincode in beide Felder auf, was bei der Validierung zu einem Fehler führte. Offensichtlich haben danach die meisten Leute aufgegeben zu versuchen dort etwas einzufügen und die Felder einfach leer gelassen - - oder sie haben schlichtweg den Bestellvorgang abgebrochen.

Merke: Man sollte nicht davon ausgehen, dass die Leute, die die eigene Seite besuchen, die selben Gedankengänge haben wie jemand, der sich schon wochenlang mit einem Layout beschäftigt hat ;-)

Nachtrag: Offensichtlich hatte ich vergessen es zu erwähnen - das Design war uns vorgegeben ;-)