Es kann losgehen: Sellector.com – Ease of choice 17 Dezember 2009

Ja ich weiß - Ich wollte öfters regelmäßiger in meinem Blog schreiben. Aber irgendwie ließ die Arbeit der letzten Wochen Monate mal wieder keine Zeit dazu. Dafür kann ich umso mehr diesmal über einen neuen Abschluss berichten: Meine Mitarbeit am Frontend von Sellector.com trägt Früchte.

Sellector.com - jQuery Eingabetabelle

Von mir stammt u.a. die Eingabetabelle im Stile von bekannten Tabellenkalkulationsprogrammen (Scrolling, Copy&Paste, Markieren, etc.) Nur halt alles online! jQuery war mal wieder eine sehr große Hilfe, trotzdem haben manche Sachen mich wieder einige Haare gekostet. Die Datenkommunikation mit dem darunterliegenden Groovy-Backend erfolgt ausnahmslos per AJAX über eine REST-Schnittstelle. Natürlich kompatibel herab bis zum Internet Explorer 6.

Übrigens: Ein Beispiel, was man mit dem Sellector so alles machen kann sieht man auf www.erlebnis-geschenk-gutschein.de.

Spezial-Onlineshop ist gestartet 13 Oktober 2009

RefKSBWebshop

Nach langer Zeit melde ich mich wieder. Es war viel los und gab viel zu tun. Meine jüngste Arbeit ist vor kurzem online gegangen: Der KSB Ersatzteilshop der Eberhardt Group. Das Besondere dabei: Es wurden die Explosionszeichungen des Herstellers eingebunden, auf denen man nun mit der Maus bequem nach bestimmten Ersatzteilen suchen kann inklusive Vergrößern, Verkleinern und Verschieben. Das alles Crossbrowserkompatibel bis runter zum Internet Explorer 6 und mit ganz normalem DHTML realisiert, d.h. kein Flash ist notwendig! Anpassung an das Browserfenster sowie Mehrsprachigkeit ist ja fast selbstverständlich…

Angebunden wurde das ganze an den schon bestehenden Webshop des Auftraggebers. Da dieser wiederum bereits an die Warenwirtschaft angebunden ist, werden im Ersatzteilshop stets die aktuellen Preise und Verfügbarkeiten angezeigt, und es muss kein weiteres Bestellsystem existieren.

Realisiert habe ich das ganze mit dem neuen ASP.NET MVC Framework. Durch die saubere Trennung vom Datenbankmodell (Model), dem HTML-Code (View) und der Programmlogik (Controller) kann die spätere Pflege nicht einfacher sein. Der Datenbankzugriff erfolgt mit LINQ to Entities auf – man höre und staune – MySQL! (Ja, es muss nicht immer der Microsoft SQL Server sein, wenn man von ASP.NET spricht.) Mit dem neuesten MySQL Connector/NET funktioniert das Entity Framework zusammen mit LINQ auf MySQL “like a charm!”

table-layout: fixed und Breitenangaben per JavaScript. Google Chrome ignoriert’s? 27 August 2009

Mal wieder 2 Stunden um die Ohren gehauen und ein paar mehr Haare verloren für einen Bug im Google Chrome: Ich arbeite zur Zeit an einem AJAX Javascript-Widget, mit dem der Webseitenbenutzer komfortabel Daten in eine Tabelle eingeben kann, ähnlich wie Google Spreadsheet oder Zoho Sheets (Oder ganz plump: “Online-Excel”.)

Die Tabelle erfordert es, dass jede Zelle exakt so breit ist, wie ich das vorgebe. Dafür setze ich in der <table> also table-layout: fixed, dadurch sind nun einzig und alleine meine CSS-Breitenabgaben der Zellen und der Tabelle ausschlaggebend, der Browser passt also die Zellen nicht mehr dem Inhalt an. Das klappte auch alles bestens. Nur nicht im Google Chrome. Ich konnte machen, was ich wollte, wenn ich die Breiten der Tabelle und Zellen per Javascript (und meinem Liebling jQuery) angepasst hatte, passierte im Chrome einfach nichts. Beim IE (Ich weiß gar nicht, warum soviele über den IE mosern…), Firefox, Opera lief es perfekt…

Es lag letztendlich wie so oft an etwas ganz Einfachem: Im Stylesheet hatte ich für die Tabellen lediglich table-layout:fixed notiert, nicht aber width:, wozu auch, das wird ja von meinem Clientcode gesetzt, da der Wert erst zur Laufzeit bekannt ist. So wie es aussieht, besteht aber Chrome auf das Setzen von width (bereits im Stylesheet), sonst werden alle Breitenangaben per Javascript schlichtweg ignoriert… Merken!

table-layout fixed (Chrome)

AJAX, JavaScript, jQuery und die sexy Fancybox 30 Mai 2009

Ich war bis vor einem Jahr noch vorsichtig mit dem Einsatz von JavaScript für eine “Rich User Experience”, also direkt reagierende Webseiten, womöglich auch noch mit tollen Effekten, die man durch AJAX so machen kann. Einfach wegen der Angst, dass zu viele Anwender JavaScript & Co deaktiviert haben wegen vermeintlicher Virengefahr.  Ich habe mich ja noch nicht mal getraut, Cookies anzuwenden (Wenn man einmal auf diesen alten Blogeintrag zurückblickt…)

Aber mittlerweile funktioniert ja kaum noch eine aktuelle Webseite ohne aktiviertes JavaScript und Cookies, und das ist auch gut so; denn man kann damit als Entwickler wirklich bessere Seiten bauen und für den Benutzer sind diese Seiten wesentlich besser zu benutzen, mal nicht zu vergessen dass durch die optischen Effekte richtig Spaß auf kommt. Und was die Einschleusung von Spioniercode und Viren angeht: Haben wir nicht alle einen guten Virenscanner on board?

Da war aber noch etwas: Ich habe es regelrecht gehasst, JavaScript zu schreiben: es ist schlecht zu debuggen und jeder Browser brauch seine Extrawurst. Aber es gibt mittlerweile wahnsinnig gute Frameworks, eines davon ist jQuery, es nimmt einem viel Arbeit ab in der Manipulation von DOM-Objekten, Browserweichen sind völlig transparent und Effekte sind von Haus aus dabei (Die Animationen beim Einfügen neuer Kommentare hier im Blog habe ich damit gemacht.)

Und gestern Abend habe ich noch etwas gefunden: die Fancybox. Mein Entwicklerherz schlägt höher! Fancybox ist sozusagen das Highslide JS für jQuery! Das Ergebnis? Einfach mal hier auf das Foto von meinem Sohn klicken! (JavaScript ist doch aktiviert, oder…?) 

Jayden Keanu