jQuery

Heute war wieder mal Minimalbesetzung. Detlef hat sich trotz Krankheit ins Büro geschleppt, wahrscheinlich will er alle anstecken, das war nicht so ganz ersichtlich. Wir haben kurz über den JSONObjectBuilder geredet und Performance-Schwachstellen erkannt und Detlef hat mir gezeigt, wie’s schneller geht Morgen werd’ ich dann noch ne Debug-Version der Klasse schreiben, die bei Bedarf Fehleingaben erkennt und entsprechen reagiert. Da diese Fehlerbehandlung aber wieder teuer ist, wird es eben zwei Klassen geben. Eine für den Entwicklungsprozess und eine für den Produktiveinsatz.

Den Rest des Tages hab’ ich mich mit jQuery beschäftig. jQuery ist eine JavaScript Library, die für den Einsatz im Browser gedacht und entwickelt wurde.

Um jQuery zu benutzen musst du es hier runterladen und die folgende Zeile in den head-Tag deines XHTML-Dokumentes übernehmen:

<script src="jquery.js" type="text/javascript"/>

Fertig

Die wohl wichtigste Funktion von jQuery hört auf den Namen $ und wird wie folgt benutzt:

$("#headline")

macht im Grunde dasselbe wie document.getElementById(“headline”), allerdings mit zwei wichtigen Unterschieden.

1. $ ist viel kürzer als document.getElementById
2. $ versteht die Syntax von CSS-Selektoren, ist also um einiges mächtiger

Will man beispielweise auf alle h3-Elemente innerhalb eines Elements mit der ID “top” einen Clickhandler legen gäbe es drei verschiedene Wege:

1. jedem h3-Tag ein onclick-Attribut zuweisen, etwa so:

   <h3 onclick="javascript:clickhandler();">...</h3>

2. eine globale JavaScript-Funktion schreiben, die auf body onload reagiert (also nach dem laden aufgerufen wird):

   function init() {
       var top = document.getElementById("top");
       var h3s = top.getElementsByTagName("h3");
           for(var i=0; i<h3s.length; i++) {
               h3s[i].onclick = clickhandler;
       }
   }

3. oder eine jQuery-Anweisung schreiben:

   $("#top h3").click(clickhandler);

Möglichkeit #1 hat denselben Nachteil wie die Nutzung des style-Attributes für CSS-Befehle. Layout und Struktur werden vermengt. Und man muss kein Genie sein, um zu sehen welche der letzten beiden Möglichkeiten die einfachere ist

(X)HTML Font Embedding

Habe heute morgen meine Arbeit am Palava-Framework, um genau zu sein an der JSON-Serialisierung, beendet und wurde prompt von Detlef mit einer neuen Aufgabe versorgt. Für einen aktuellen Auftrag, den wir gerade an Land ziehen konnten, sollte ich sowas wie eine Machbarkeitsstudie durchführen, obwohl das Wort hier eigentlich Overkill ist. Der Kunde will auf seiner Seite, die wir ihm bauen sollen , diverse Überschriften in bestimmten Schriftarten haben. Ich sollte also recherchieren, inwiefern es möglich ist, in (X)HTML-Seiten eigene Schriften zu benutzen bzw. einzubetten.

Auf folgende Möglichkeit bin ich gestoßen:

@font-face {

font-family: “Frutiger”;
src: url(frutiger.eot), url(frutiger.pfr);

}

h1.frutiger {

font-family: “Frutiger”;
font-size: 150%;

}

Also per CSS eine Schrift deklarieren, die dann bei Bedarf vom Webserver geladen wird. Klingt erstmal gut, allerdings gibts nur zwei verschiedene Formate, die unterstützt werden:
.eot vom IE (ab Version 4.0) und .pfr für Netscape. Gecko-basierte Browser verstehen diese CSS-Anweisung gar nicht.Weil es auf proprietären Technologien basiert, wurde es bereits in CSS 2.1 aus der Spezifikation entfernt.

Nächster Schritt war die Suche nach alternativen Lösungsansätzen. Da haben wir (Anika, Oli & ich) uns zusammengesetzt und mal drüber nachgedacht und sind auf folgende Sachen gekommen:

Alternative #1
GIFs bzw. PNGs mit dem jeweiligen Text und der entsprecheneden Schrift erzeugen und einbetten. Allerdings nicht per Hand, weil sich die Inhalte ja ständig ändern, also müsste man die Bilder vom Backend generieren lassen. Für PHP gibts da beispielsweise schön Libraries, die sowas anbieten. Allerdings kann man den Text dann nicht selektieren und so richtig schnell wird das auch nicht sein.

Alternative #2
Einen Flashfilm erstellen, der als Parameter eine Schriftart (bzw. deren Name) und den zu rendernden Text erhält und das dann darstellt. Dann wäre der Text schonmal selektierbar, allerdings müsste mann den Flashfilm auch skalieren können, falls man mal eine kleinere Schriftgröße nehmen will, bzw. die Position verändert und an der Stelle dann weniger Platz hat.

Alternative #3
So ähnlich wie #1, allerdings erstellt das Backend keine statischen Bilder, sondern SVGs. Also xml-basierte Vektorgrafiken, deren Präsentation dann der Browser übernimmt. Und da liegt dann auch schon der Haken: SVG unterstützen z.B. Firefox und der IE nicht nativ, sonder nur per Plugin. Schade, denn Vektorgrafiken kann man gut skalieren ohne dass sie an Schärfe verlieren und erzeugen weniger Overhead und Traffic als Flash und Bilder.

Alternative #4
Als wir Flash als Variante in Betracht gezogen hatten, kam Anika eine Erinnerung an eine kleine Technologie, die das Problem bereits auf diese Weise gelöst hat. Des Rätsels Lösung heisst sIFR (sprich: siffer) und steht für “Scalable Inman Flash Replacement”. Besteht technisch aus einer JavaScript-Implementierung, die nach dem Seitenladen, dem Dom-Tree traversiert und nach bestimmten class-Attributen sucht. Diese Elemente, werden dann durch einen Flashfilm derselben Größe, mit der im CSS/Script-Bereich deklarierten Schrift gerendert. sIFR ist mittlerweile bereits in Version 3 erhältlich, hat also schon einige Stunden Bugfixing intus. Für nähere Informationen sei euch die offizielle Website ans Herz gelegt und damit man sich auch was drunter vorstellen kann, hier eine Beispielseite.

html, swf, ajax, js, rhino,…

Gestern (Donnerstag) und heute (Freitag, haha!) war ich damit beschäftigt, ein kleines Web-Frontend für die Karte zu bauen. Ich durfte meine nicht-existenten HTML+CSS-Kenntnisse ausbauen . Hab’ jetzt die Map als Flashfilm und dazu ein kleines Panel, womit man per Ajax, die thread-basierte Abarbeitung des genetischen Algorithmus auf dem Server steuern kann. Per Ajax werden auch die jeweils aktuellsten Ergebnisse direkt (bzw. mit 5 Sec Verspätung) an den Browser geschickt.

Heute mal früher

In letzter Zeit hinke ich ja immer 12h hinterher, was meinen Bericht angeht. Heute bin ich dafür mal besonders früh dran.
Zwei Aufgaben erwarteten mich heute morgen.

1. Warum zum Henker wird im Flashfilm totaler Müll angezeigt, obwohl es super aussehen müsste?
(Sprich, lauter Überschneidungen und schlechte Ausrichtung der Bilder, aber eine gute Bewertung)
2. Im CMS eine dynamische Liste von artverwandten Artikeln erstellen.
(Also wieder etwas mehr über das firmeninterne CMS lernen)

Aufgabe zwei war mit Biancas Hilfe relativ schnell erledigt und kleine Probleme auch ruckzuck behoben. Die Fehlersuche in meinem Algorithmus wurde nicht durch “ne Nacht drüber schlafen” gelöst, wie ich das erhofft hatte, dafür mit peniblem Durchsuchen des Quellcodes und Überlegen. Das Problem war schließlich, dass ich beim Kopieren (eines Objektes, das alle relevanten Daten, wie Position und Ausrichtung enthält) das wichtigste vergessen und statt einer Kopie eine zufällige Variante erzeugt hab’. Schande über mich.

PS:

Heute hat Stoffie Geburtstag und gesellt sich zu mir in den Kreis der “>=23″-jährigen.

Dienstag

Seit ich bei Cosmocode arbeite trink’ ich an einem Tag mehr als sonst in einer Woche. Meine Blase ist dauerhaft überfüllt, aber Tee und Vittel sind einfach zu lecker, um darauf zu verzichten.
Kommen wir zum technischen. Ich (bzw. mein Algorithmus) soll ja einen Flashfilm dynamisch mit XML-Daten befüllen. Da man das SWF aber (noch) nicht on-the-fly zum Neuladen zwingen kann, musste ich mir was einfallen lassen. Dazu habe ich folgenden JavaScript-Code geschrieben:

var oldFlash = document.getElementById(“flashMap”);
var newFlash = oldFlash.cloneNode(true);
var parent = oldFlash.parentNode;
parent.removeChild(oldFlash);
parent.appendChild(newFlash);

Billig und vor allem “quick&dirty”, aber für den Anfang erfüllt es seinen Zweck. Wenn ich also den Flashfilm nicht zwingen kann, seine Daten neuzuladen, dann lad’ ich eben den ganzen Film neu.

Nächstes Problem war die Erzeugung XML-konformer Daten, das war nach ein bisschen Recherche und Copy&Paste aber schnell gelöst. Nach mehrmaligem Testen stellte sich allerdings kein Aha-Effekt ein. Irgendwie kam stimmt die errechnete Bewertung einer Lösung nicht mit der optischen überein. Also mach’ ich, was ich am besten kann: Feierabend und ne’ Nacht drüber schlafen.

Logbuch 2008/01/28-18:22

Weblogbuch willi.gotdns.com, Uhrzeit 18:22, Praktikant Schönborn.

Heute habe ich jede Menge Erkenntnisse mir bislang unbekannter Themengebiete gewonnen. Unter anderem habe ich Kontakt mit der ECMA-konformen Erweiterung E4X gemacht, die mir dabei helfen soll mit JavaScript auf Rhino-Basis einen XML-String zu editieren und an ein SWF weiterzuleiten. Weiterhin konnte ich meine Kenntnisse und mein grundlegendes Verständnis über das firmeninterne CMS ausbauen. Diese Aufgabe wird auch heute meine oberste Priorität sein.

Freitag

Gestern (Donnerstag) habe ich noch etwas an meinem Genetischen Algorithmus getüftelt. Heute hab’ ich dann mit Detlef (Chef) getüftelt, wie mein Algorithmus ins System integriert werden soll. Das firmeninterne CMS baut auf eine JavaScript-basierte Template-Sprache und kann dank Rhino auch pures JavaScript ausführen. Jetzt wird für die genetische Entwicklung der Lösung ein Extra-Thread auf dem Server gestartet, der kontinuierlich Ergebnisse liefert, die man sich bei Bedarf ausgeben lassen kann. Ab Montag werd ich daran arbeiten die eingehenden Daten aus einer XML-Datei zu lesen, damit meinen Algorithmus zu befüllen und ggf. generierte Ergebnisse wiederum als XML-String an einen Flashflim weiter zu reichen. Ich werd’ nächste Woche, glaub’ ich, genug zu tun haben

läuft.

Eine Nacht drüber schlafen, einmal kurz drüber nachdenken und dann alles nochmal neumachen hilft also. Mein Algorithmus und ich verstehen uns jetzt besser. Er macht ab und zu noch wenig nachvollziehbare Sachen, im Großen und Ganzen liegen wir aber auf derselben Wellenlänge.

Tja

Heute habe ich es geschafft, mal abgesehen von einigen Kleinigkeiten, nichts zu schaffen. Mein Algorithmus will nicht das was ich will und lässt sich auch nicht dazu überreden.
Immerhin habe ich FireBug (http://www.getfirebug.com/) entdeckt. Ein kleiner Lichtblick.

JavaScript @%&$

Wochenende vorbei, und frisch gehts in die neue Woche.
Heute hab’ ich die restlichen Kollegen kennengelernt, die letzte Woche entweder krank oder im Urlaub waren. Oder beides.
Bin mit meiner Aufgabe heute ein gutes Stück vorangekommen. Mein Algorithmus erkennt bereits Überschneidungen von Labels. Ich bin ja so gut. Nahezu alle Rückschläge sind auf dieses @%& … JavaScript zurückzuführen. Wenn also jemand einen guten, kostenlosen JavaScript-Editor für Linux kennt, der Syntax Highlighting, Auto Completion und Error Console beinhaltet, soll er sich bitte umgehend an mich wenden.
Im obligatorischen Montags-Meeting wurde heute, aus offentsichtlicher Not heraus, beschlossen, mehr Stühle für den Konferenzraum zu besorgen. Cosmocode wächst. Mit mir sind es jetzt … (7+1+2+1+2=?, 10, 3 im Sinn,…) 13!