Ich habe ja bereits vor einigen Monaten bekundet das ich nicht wirklich viel von Adblock-Plugins halte. Die Gründe möchte ich jetzt hier nicht noch einmal bis ins kleinste breit treten aber: Natürlich sind LayerAds und Soundbanner ein echtes Übel das vor allem dadurch penetrant wird das es unseriöse Anbieter gibt die beim Klick auf “Schließen” die Seite erst recht öffnen, dennoch denke ich das man kostenlosen Diensten etwas zurück geben sollte… und da stört es nicht die paar Banner mal mitladen zu lassen, es sei denn man bezahlt für seinen Traffic oder surft mit ISDN.

Nun kann es allerdings Fälle geben wo man als Seitenbetreiber erkennen möchte ob ein Besucher denn ein solches Plugin in seinem Browser benutzt oder nicht. Da das Plugin ja clientseitig fungiert und sich auch nicht im Header des Browsers zu erkennen gibt, ist das serverseitige erkennen aktuell nicht möglich.

Durch Zufall bin ich nun auf das kleine JavaScript Adblock Detector gestoßen. Auf der Seite findet man einige Beispiele und auch einen Livecheck mit dem man On-The-Fly testen kann ob das Script den eigenen AdBlocker denn erkennt. Bettet man das Script in die eigene Seite ein, kann es von nun an über einige kurze Tests im Hintergrund erkennen ob der aktuelle Nutzer denn einen Adblocker nutzt oder nicht, und dementsprechende Aktionen ausführen.

Möglich wäre z.B. in der eigenen Statistik aufzuzeichnen wie viele Besucher einen AdBlocker nutzen, oder den Besuchern einen Hinweis auszugeben das es durch die Benutzung von AdBlockern zu Darstellungsfehlern kommen kann.

Natürlich könnte man auch einen kurzen Hinweis ausgeben das das blockieren von Werbung dem Dienst die Einnahmen verringert, oder gar User mit AdBlockern vom Dienst aussperren, meine Erfahrung hat jedoch gezeigt das solche Moralpredigten oder gar Gängelungen bei Usern die bewusst auf Werbung verzichten wollen nichts bewirken.

Solltet ihr noch weitere nützliche Anwendungsbereiche sehen, dann immer her damit.


Eine Sache die mich jeher an vielen Seiten stört die JavaScript-Funktionen nutzen ist, dass sie selten Permalink-Tauglich programmiert werden.

Ein Beispiel: Viele Webseiten setzen seit geraumer Zeit auf sogenannte Accordions um viele Inhalte auf wenig Platz darzustellen. Das Problem was diese Dinger jedoch oft haben ist, das ich keinen Link generieren kann der dem Empfänger genau das zeigt was ich ihm hier evtl. zeigen wollte.

Eventuell möchte ich mein Gegenüber mit einem Link genau auf eine meiner Referenzen hinweisen die ich eben mittels eines Accordions dargestellt habe. Bei den meisten Webseiten endet das dann mit Aussagen wie:

Hier der Link zu meinen Referenzen:
http://meinedomain.de/referenzen.html
Bitte scrollen Sie doch bis ans Ende des aufklappbaren Menüs und klicken Sie dann auf den Eintrag “Musterfirma”.

Das ist weder Zugänglich, noch benutzerfreundlich! Dabei wäre es mit Ankern doch so einfach! Wäre es nicht schön dem Kunden einfach eine URL wie z.B. http://meinedomain.de/referenzen.html#musterfirma zuzuschicken, und sobald sich die Seite lädt springt sein Browser direkt zu dem gewolltem Eintrag und blendet den besagten Punkt im Accordion automatisch ein? Natürlich wäre es das ;)

Kompletten Artikel lesen...


Greasemonkey ist fast schon ein Must-Have für Firefox. Mit diesem kleinen Plugin kann man ohne große Probleme bereits bestehende (fremde) Seiten mit nützlichen Funktionen nachträglich erweitern.

Im Prinzip steckt dahinter nichts als ein wenig Custom-JavaScript was beim aufrufen der Seite automatisch ausgeführt werden kann und somit den DOM der Seite nachträglich manipulieren kann. Neben der bestehenden Datenbank mit Greasemonkey-Scripten ist es natürlich auch interessant selber Hand anzulegen. Oft hat man Seiten die man relativ häufig benutzt, bei denen man sich aber die eine oder andere Funktion wünscht die noch fehlt. Beispiele wären z.B. das nachrüsten einer Tabellensortierung oder auch das verlinken von Geocaching-Tags auf Flickr.

Heute habe ich einen Weg entdeckt um auch in Greasemonkey die Features und Plugins von jQuery nutzen zu können. Alternativ kann natürlich auch folgende URL zum jeweils aktuellem Core genutzt werden: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. Sehr nützlich wie ich finde, denn so ist es nur noch ein Katzensprung bis zum eigenem Userscript.

Durch das duplizieren der ersten Zeilen kann man natürlich auch noch weitere JavaScript-Dateien mit ins Boot holen, also z.B. auch jQuery-Plugins auf die man dann im Customcode zugreifen kann.


Für jQuery gibt es einen ganzen Batzen an Plugins, und einige davon braucht der fleißige Webentwickler auch von Zeit zu Zeit, z.B. die Thickbox oder iFixPng2.

Manchmal findet man jedoch auch sehr innovative und originelle Plugins, so z.B. jParallax. Parallax ermöglichst es dem User eine Art 3D-Gefühl zu vermitteln, und das ganz einfach durch die Überlagerung mehrerer 2D-Ebenen und der Möglichkeit diese mittels der Maus zu bewegen.

So hat man z.B. die Möglichkeit mehrere Fotos freizustellen und wie auf einer Bühne hintereinander zu platzieren um später mit der Maus den Viewport dynamisch versetzen zu können.

Dabei zeigen die Demos gleich mögliche Anwendungsgebiete, so z.B. eine Karte, einen Bergsteiger oder auch andere Spielereien.

Das Prinzip ist ähnlich wie die Verschiebung der Hintergrundgrafiken auf der Webseite von Silverback. Sobald man das Browserfenster horizontal erweitert oder verkleinert kommt ein räumliches Gefühl auf.

Das Plugin ist sicherlich nichts für den täglichen Gebrauch, doch eventuell findet sich ja die eine oder andere nützliche Verwendung. Vielleicht kommt es auch ganz gut als Gimmick in Headern die auf den ersten Blick zwar statisch aussehen, bei einem Mouseover dann aber zum Leben erweckt werden…

via: Webappers


Mhm der Titel klingt wohl etwas verwirrend, aber egal. Ich sitze gerade an einem kleinen Statistiktool in dem ich den beliebten Datepicker aus jQueryUI benutze.

Das “Plugin” ließ sich auch leicht installieren, doch ich wollte mir nach der Auswahl des jeweiligen Datums den Klick auf den Absende-Button für das Formular sparen, da es in dem Formularfeld eh nur die Auswahlmöglichkeit für den jeweiligen Tag gab.

Also kurz in der Dokumentation gewühlt und dabei auf onSelect gestoßen, Code der also ausgeführt wird sobald man ein Datum im Datepicker ausgewählt hat.

Zusammen mit dem Code zum automatischem Absenden kann die Verwandlung eines Inputs in eine komplexe Datumsbox daher so aussehen:

$(document).ready(function(){
	$("#datepicker input.date").datepicker({
		onSelect: function(dateText){
			$(this).parent("form")[0].submit();
		}
	});
});

Also eigentlich relativ einfach. Das Snippet sucht nach dem Klick auf ein Datum das übergeordnete Form-Element und schickt dieses automatisch ab. Hach, jQuery ist einfach toll :)


jQuery-Logo

Gerade ist mir bei Learning jQuery das praktische jQuerify Bookmarklet über den Weg gelaufen.

Wie, wo, was? Ein Bookmarklet für jQuery? Wozu?

Einfach den Bookmarklet-Link in die Favoriten ziehen, danach kann man nun auf jeder Seite mit einem Klick auf das Bookmarklet den jQuery-Core laden und in der JavaScript-Console (z.B. über Firebug) beliebigen jQuery-Code auf der Seite ausprobieren.

Zur Bestätigung erscheint nach dem aktivieren des Bookmarklet eine kleine Box mit der Aufschrift: This page is now jQuerified

Wie ich finde eine praktische Sache um auch auf Seiten die noch kein jQuery nutzen oder an dessen Zugangsdaten man gerade nicht kommt, mal lokal und auf die schnelle ein wenig mit jQuery zu spielen.

P.s.: Juchu, gewonnen!


Das Netz ist seit Jahren vollgestopft mit Thickboxes, Lightboxes, Slimboxes, Greyboxes und vielen anderen Galeriescripten die eben gerne dazu genutzt werden Bilder oder andere Inhalte wie z.B. Flashmovies zu präsentieren.

Ob diese Art der Präsentation noch schön ist, darüber lässt sich natürlich streiten… doch was fast alle Lösungen gemeinsam haben ist, das sie oftmals nicht Stand-Alone ausgeliefert werden, sondern zur Ausführung ein JavaScript-Framework wie jQuery, mootools oder Prototype benötigt wird.

Wer nur mal eben eine Galerie einbinden möchte und ansonsten nicht viel mit JavaScript zutun hat, der stört sich dabei schnell an der wachsenden Dateigröße die mit allem drum und dran schnell auf über 30-40Kb ansteigt.

Kompletten Artikel lesen...


jQuery-Logo

Zum Ende des Wochenendes noch ein kleiner und wahrscheinlich für erfahrene Programmierer bereits bekannter Kniff zu meinem Lieblingsframework jQuery.

Viele kennen das Problem: Man betreibt eine Seite mit vielen unterschiedlichen jQuery-Plugins oder möchte der Übersichtlichkeit halber seinen Code in mehrere Dateien auslagern. Nun ist jedoch oft der Fall, dass man so manches Plugin oder Script nur auf einigen Unterseiten benötigt. Je nach Seitengröße und Masse des Quelltextes kippt man dem Besucher also oft Dateien auf den Ladebalken, die er in vielen Fällen wahrscheinlich gar nicht braucht. Man kann die Einbindung der einzelnen Dateien natürlich auch Serverseitig über IF-Abfragen steuern, dass ist jedoch ziemlich unflexibel und mühselig.

Nun bin ich heute über die jQuery-Funktion getScript gestolpert. Die Funktion kann aus dem Code heraus an jeder beliebigen Stelle also zusätzliche JavaScript-Dateien abrufen und parsen. Es ist somit unter anderem möglich beim auftreten eines bestimmten Selektors (und nur dann) ein angelegtes Plugin einzubinden.

In der Praxis könnte das also z.B. so aussehen:

if($("div#accordion").length){
      $.getScript("/js/plugins/jquery.accordion.js");
}

Mit length überprüfen wir einfach ob der beschriebene Selektor irgendwo im DOM vorkommt, wenn ja wird das Plugin geladen und ausgeführt.

Für viele wohl nichts Neues, aber für Einsteiger vielleicht Hilfreich.


jQuery-Logo

So, nach langer Zeit mal wieder ein Beitrag aus meiner Praxiserfahrung mit jQuery.

Seit gestern verziert die Sidebar dieses Weblogs nun auch mein Flickr-Stream, der über den wohl vielen Flickr-Nutzern bekannten Badge-Generator erzeugt wird. Hierbei wird über ein kleines JavaScript eine Liste der zuletzt veröffentlichten Fotos aus dem eigenen Flickr-Profil ausgegeben, nach einem Klick auf das jeweilige Bild landet man dann auf der jeweiligen Flickr-Seite.

Nun hat mich an dem Script ein wenig gestört, dass der User erstmal meine Seite verlassen musste um sich ein Foto anzusehen (zumindest die Leute ohne einen coolen Browser) und zum anderen hatte ich die fixe Idee, die Bilder direkt über die eh schon integrierte Thickbox anzeigen zu lassen.

Da man das JavaScript des Badge-Makers nicht direkt beeinflussen kann musste ich mir mit ein wenig jQuery-Magic behelfen.

Der Badgemaker macht erst einmal folgendes: Er holt die letzten x Thumbnail-Bilder des eigenen Flickr-Profils ab, und packt diese als <img /> in den DOM, je nachdem wo wir den Scriptaufruf in unser HTML gepackt haben. Um das Bild herum baut er natürlich auch gleich den passenden Link zur jeweiligen Flickr-Seite. Das schöne daran ist zudem, das z.B. der Titel des Bildes direkt im Alt-Atribut des Bildes zu finden ist.

Kompletten Artikel lesen...


Es gibt viele Plugins für Firefox die sehr nützlich und sinnvoll sind. Für mich gehören dazu z.B. so feine kleine Tools wie ColorZilla, Foxmarks oder auch mein aktueller RSS-Reader Brief.

Auf der anderen Seite gibt es aber auch so manches Plugin das uns Webentwicklern dank seiner Sinnlosigkeit ab und an übel aufstößt. Nachdem ich nun schon oft über das Firefox-Addon NoScript gestolpert bin wollte ich doch nun auch mal wissen was sich dahinter überhaupt versteckt.

Zusammengefasst kann man sagen das NoScript erstmal alle möglichen Plugins in der Standardkonfiguration blockiert. Also keine JavaApplets, keine JavaScripts, kein Flash…. nichts also, pures HTML und CSS. Ok, Java wird auch aus meiner Sicht zu oft auf alten, mit Katzencontent gefüllten Webseiten für sinnlose Effekte missbraucht, das sehe ich ein. Doch JavaScript von vornherein für alle Webseiten zu sperren ist aus meiner Sicht totaler Quatsch. Ich hatte mit Firefox und JavaScript noch nie Probleme in Punkto Sicherheit, und auch der integrierte Popup-Filter funktioniert bis auf wenige Ausnahmen tadellos. Warum also von vornherein alle Scripte aussperren und dann auf Wunsch für einzelne Seiten freizuschalten?

Ich freue mich wirklich über jeden weiteren Nutzer der sich für JavaScript entscheidet (sofern er das denn selber bestimmen kann), solch ein Plugin wie NoScript hingegen arbeitet irgendwie rückschrittlich.

Zugegeben, man kann das Prinzip des Plugins auch umkehren: Die Ausführung von Scripten wird also generell erlaubt und dann für die aktuelle Seite explizit gesperrt. So und nicht anders macht das Plugin für mich noch Sinn. Stört einen etwas an einer Seite kann man diese auf die Blacklist setzen. Leider wird diese Funktion im Menü jedoch mit dem Hinweis “nicht empfohlen” angegeben und dürfte den unwissenden User daher erstmal abschrecken. Von vornherein allen Webseiten zu misstrauen ist doch aber irgendwo der falsche Weg, oder?


Es gibt zwei Dinge die mich persönlich am Firefox total stören. Zum einen wäre da der massive Speicherverbrauch, dem aber relativ einfach mit einem zusätzlichen RAM-Riegel entgegengewirkt werden kann. Das zweite was mich stört und manchmal zur Weißglut bringt, ist die überdurchschnittlich langsame Rendering-Engine in Punkto JavaScript.

Gerade in Zeiten wo JavaScript so populär wie nie zuvor ist, kommt der Firefox mit einem derart langsamem Motor an den Start das es einem manchmal die Schuhe auszieht. Als ich vor einiger Zeit z.B. das Backend von Modx nutzen musste kam ich vor lauter Warten gar nicht mehr zum Arbeiten. Ich weiß zudem nicht ob es nur bei mir so ist, doch manchmal lässt das JavaScript den Browser auch einfach mal für ein paar Sekunden einfrieren. Sicherlich ist daran auch die Zahl der Plugins nicht ganz unschuldig, da bin ich ehrlich.

Erst gelobten die Firefox-Entwickler ja eine Verbesserung der JavaScript-Performance in Version 3.0, was jedoch dann mal wieder auf Version 4.0 rausgezögert wurde. Gut, aber laut aktueller Übersicht im Javascript Speed Test 2007 schneidet die Alpha-Version der 3 sogar noch schlechter ab als Version 2.

Einen guten Vergleich zwischen den Geschwindigkeiten der einzelnen Browser kann man zudem mit der Demo von DHTML Gallery ziehen, hier gibt es zumindest auf meinem System keine Freude. Alles ruckelt und zuckelt nur so vor sich hin, und nebenbei gibt es auch 80% CPU-Last. Öffne ich die Seite jedoch im IE7, so läuft alles sehr flüssig.

Der Firefox hat bei mir im Prinzip nur noch durch die Masse an Plugins seine Daseinsberechtigung. Opera sagt mir vom Performance-Verhalten her deutlich mehr zu, kann in Punkto Erweiterbarkeit jedoch dem Firefox nicht das Wasser reichen, leider. Durch seinen geringen Verbreitungsgrad und die Faulheit einiger Webentwickler hat Opera zudem immer noch ein Problem mit vielen Darstellungsfehlern.

Sollte sich die JavaScript-Performance in der Final von Firefox 3 wie derzeit zu sehen ist nochmals verschlechtern, muss ich mir wohl doch einen neuen Alltags-Browser suchen.


Download: htn_kickstart

Gerrit van Aaken hat gestern sein HTML/CSS/JS-Kickstart-Paket vorgestellt. Eine sehr feine Sache wie ich finde, die jeder Webentwickler auf der Festplatte haben sollte.

Der Ablauf ist ja fast bei allen Entwicklern der selbe. Man macht/bekommt eine Layout-Datei welche nun im nächsten Schritt in ein XHTML-Dokument portiert werden muss um danach dann in den meisten Fällen als Template für ein CMS dienen zu können.

In einem Startup-Paket werden dabei alle Features vereint die man bei einer Design-Umsetzung in den meisten Fällen eh benötigen würde. Bei mir heißt das das eine index.html mit einer gewissen Struktur samt DOCTYPE und Metatags vorhanden ist, als auch eine Ordnerhierarchie mit CSS-Dateien für Screen, Print und Browserhacks (IE6).

Das CSS beinhaltet zudem bereits einige Resets und Klassen die sich im Alltag als nützlich erwiesen haben.

In Gerrits Paket wurde zudem bereits jQuery integriert, was ich als sehr nützlich ansehe, denn mittlerweile gehört auch jQuery bei mir zu fast allen neuen Umsetzungen dazu.

Da mir das Kickstart-Paket sehr gefallen hat habe ich mir dieses einmal vorgenommen und meinen persönlichen Ansprüchen nach noch einmal modifiziert, denn nur so ist ein schneller Start aus meiner Sicht möglich. Jeder hat einen etwas anderen Workflow und somit auch unterschiedliche Vorlieben was solch ein Paket angeht. Wer sich evtl. für meine Vorlieben interessiert, kann sich nun also auch meine Modifikation herunterladen.

Im Prinzip wurde dem Paket erstmal ein gewisses Grundmarkup beschert, was sich hier jedoch auf <div id="wrapper"> und ein <h1> beschränkt. Denn diese beiden Elemente sind aus meiner Sicht erstmal bei jedem Projekt der Grundstein. Das CSS-Reset von Eric Meyer wurde in die screen.css übernommen und ein wenig komprimiert. Das spart ein wenig Ladezeit. Die ie7.css wurde ebenfalls verbannt, da ich in letzter Zeit eher weniger Probleme mit dem IE7 hatte und daher die kleine Anzahl an Hacks auch in die screen.css übernehmen kann.

Ansonsten wurden noch einige Feinheiten wie z.B. ein Favicon zur schnellen Identifikation im Browser, robots.txt, sowie einige Metatags beigelegt. Schauts euch einfach an und sagt mir eure Meinung.


Ich hoffe hier entsteht nicht der Eindruck ich würde nur noch über meine beiden Lieblingsframeworks schreiben, doch gerade bei jQuery passiert in der letzten Zeit doch eine ganze Menge.

jQuery UI ist die Weiterentwicklung der vielleicht dem ein oder anderen bekannten Erweiterung Interface Elements. Das Release wurde eigentlich für gestern, also Sonntag den 16.09.07 angekündigt, fand jedoch erst vor einigen Minuten den Weg in den offiziellen Weblog. Die Subdomain ui.jquery.com war jedoch schon seit gestern zugänglich.

Auf den ersten Blick macht jQuery UI einen ganz passablen Eindruck. Derzeit stehen den fleißigen Entwicklern folgende Module/Plugins zur Verfügung:

Wer die Interface-Elements kennt, der wird in dieser Liste so ziemlich alles bereits einmal gesehen haben. Leider war es in der Vergangenheit nicht mehr Möglich die Interface Elements wirklich zu nutzen, da diese nur bis zu jQuery 1.1.2 unterstützt wurden. Die Demos von jQuery UI lassen aber vermuten das jQuery UI gerade in der Performance um einiges besser abschneiden dürfte und durch die offizielle Unterstützung auch in Punkto Kompatibilität am Ball bleibt.

Ähnlich wie bei den Interface Elements kann man sich auch bei jQuery UI seine benötigten Module zusammenklicken und herunterladen. Selektiert man alle Module kommt man derzeit auf eine Größe von 60KB (Minidfied, ohne Gzip).

Das liegt natürlich schwer im Magen, doch wer benötigt auf einer einzelnen Seite schon alle Module? Wenn doch, so sind 60Kb für das Mehr an Funktionen aus meiner Sicht dennoch ein Leichtgewicht.

Was neu ist sind die vorgefertigten CSS-Themes für jQuery UI. Derzeit stehen für die Module 3 unterschiedliche Themes zum Download zur Verfügung, die man sich für die eigene Applikation natürlich auch nach belieben anpassen kann.

Ganz nebenbei wurde heute morgen eine kleine Bugfix-Version vom jQuery-Core veröffentlicht, die im übrigen Pflicht zur Verwendung von jQuery UI ist, sofern alles richtig funktionieren soll.

Aus meiner Sicht bringt jQuery UI einen echten Mehrwert für das Javascript-Framework. Die einzelnen Plugins sind, wie man es von jQuery gewohnt ist, sehr leicht nutzbar und können sicherlich in vielen Applikationen sehr nützlich sein. Bleibt nur zu hoffen das nun nicht jede 2. Seite im Netz mit unnötigen Effekten daher kommt :)


Ich weis nicht wie es euch geht, aber ich bekam immer kleine Schweißausbrüche sobald ein Kunde in einem skalierbarem Layout abgerundete Ecken für Boxen oder dergleichen haben wollte.

Nicht dass solche Rundungen nicht schick aussehen würden, doch aus semantischer Sicht bzw. aus Sicht auf Punkto “Wartbarkeit” war das für mich bisher immer ein Graus.

Was sich früher durch monströse Tabellenkonstrukte eh mehr schlecht als recht umsetzen ließ benötigte bis vor kurzem auch bei tabellenfreien Layouts meist bis zu vierfach verschachtelte DIV-Elemente, pro Box versteht sich.

Weil ich eigentlich immer versuche meinen Quelltext so übersichtlich und schlank wie nur möglich zu halten habe ich mich daher bisher oft vor den Rundungen gefürchtet.

Damit macht das gerade entdeckte jQuery-Plugin jQuery Roundcorners Canvas nun anscheinend endlich Schluss. Das Plugin scheint alle Faktoren die man an solch ein Script stellen könnte zu vereinen:

Zum Ladevolumen muss zusätzlich natürlich noch das jQuery-Framework gerechnet werden.

Sicherlich, bei einer einzelnen und relativ festen Box macht das Plugin wahrscheinlich keinen wirklichen Sinn. Soll jedoch eine Box in der breite/höhe flexibel sein und zudem Ihre Farbe evtl. auch einmal schnell wechseln können, so ist das Plugin sicherlich eine echte Bereicherung.

Wo ich noch keine Schlüsse ziehen konnte ist die Performance. In der Demo konnte ich jetzt auf die schnelle keine Geschwindigkeitseinbußen feststellen, aber vielleicht sieht das auf älteren Systemen ja anders aus?


Der nette Veit wies mich gerade darauf hin das soeben mein lieblings Javascript-Framework jQuery endlich in Version 1.2 veröffentlicht wurde.

Mit dem Versionssprung sind auch einige Neuerungen einhergegangen. Eine ganze Hand voll neuer Selektoren, Attribute und auch Effekten hat den Weg in die neue Version gefunden.

XPath-Selektoren wurden sofern ich das herauslesen kann nun aus jQuery 1.2 herausgelöst und werden optional als separates Plugin angeboten.

Ein neuer Effekt ist z.B. die Color Animation wodurch sich sehr einfach Farbübergänge zaubern lassen. Mit dem Effekt können derzeit folgende CSS-Properties animiert werden:
backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, outlineColor.

In der Ajax-Funktionalität wurde nun alles auf die große $.ajax()-Funktion ausgelegt, die seit längerem schon alle separaten Ajax-Funktionen in einer vereint. Die bisher als deprecated markierten Funktionen (wie z.B. loadIfModified()) wurden nun aus dem Core entfernt, wodurch es bei älteren Scripten evtl. zu Fehlern kommen könnte. Kurzzeitige Abhilfe schafft da das jQuery 1.1 Compatibility Plugin.

Mit dem Update ist das Framework leider wieder ein wenig gewachsen und zwar auf nun mehr 26 Kilobyte in gepackter Form. Immerhin mal wieder ein Sprung um 4 Kilobyte. Um dem entgegen zu wirken wurde nun auf einen Beitrag von Julien Lecomte hingewiesen, indem beschrieben wird wie man mit ein wenig PHP bzw. dem GZip-Modul jQuery mit nur noch 14 Kilobyte ausliefern kann. Ich habe dieses “Verfahren” schon bei einigen Seiten in Gebrauch und dabei bisher keine Nachteile erlebt.

Wer generell all seine .JS und evtl. auch .CSS-Dateien in gepackter Form ausliefern möchte sollte sich evtl. den Blogpost Compressing Javascript with PHP anschauen. Dort wird beschrieben wie man mit Hilfe von PHP, GZip und mod_rewrite generell all seine Javascript-Dateien über das GZip-Modul ausliefern lassen kann.


jQuery-Login Screenshot

Nun habe ich mich ja in letzter Zeit neben CakePHP auch mit dem jQuery-Framework beschäftigt, und in diesem Zusammenhang eine kleine “Probeanwendung” gebaut, nämlich eine Login-Seite mit Ajax-Funktionalität. Für den ein oder anderen stellt sich nun sicherlich die Frage, ob solch eine Funktion wirklich sinnvoll ist…doch für mich zählt hier eher die Erklärung als der Sinn des Ganzen :-).

Wie das Ganze später aussehen könnte seht ihr in dieser kurzen Demo (richtiger Login: gast:gast). Das ganze wurde grafisch natürlich ein wenig aufgepeppt. Um die jQuery-Animationen auf dem variablen Hintergrund hinzubekommen musste auf das PNG-Format zurückgegriffen werden, zudem wurde für die IE6-User ein PNG-Behaviour eingesetzt.

Kompletten Artikel lesen...


Clicktale Logo

Normalerweise halte ich ja nicht viel von Datenkraken und Spionagesoftware, doch wenn man selber mal ein wenig am Drücker sein darf, dann kann sowas manchmal auch schon Spaß machen :)

Seit heute morgen bin ich nun Mitglied bei Clicktale, einem Statistikprogramm der etwas anderen Art. Um genau zu sein:

Clicktale bietet die Möglichkeit das Nutzerverhalten auf der eigenen Webseite mehr oder weniger Live beobachten zu können. Man kann angeben wie viel Prozent der Seitenbesucher aufgezeichnet werden sollen, und mit ein wenig JavaScript im Quelltext kann der Spaß dann schon beginnen.

Geht ein User nun auf die jeweilige Seite und erfüllt das gesetzte Zufallskriterium so werden all seine Mousemoves, Klicks und Scrolls live aufgezeichnet und können vom Betreiber später wie ein Video abgespielt werden.

Das gibt natürlich sehr schnell und verlässlich Aufschluss darüber, wie die eigene Seite bzw. deren Elemente überhaupt beim Benutzer ankommen.

Selbstverständlich bin ich mir auch im klaren darüber, das dies doch ein Schritt in die Richtung des “gläsernen Surfers” ist, doch nehme ich die Daten wirklich nur Probehalber, vollkommen anonym und unvoreingenommen zur Verbesserung meiner Seite.

Ich werde das ganze mal noch ein wenig Testen und dann vielleicht ein passendes Fazit dazu veröffentlichen.

Achso: Übrigens läuft die Anwendung nicht auf dieser Seite, sondern lediglich auf xulu.net.

Ich bin gespannt auf eure Meinungen … gut oder böse?


Vor einiger Zeit begann ich ja das CakePHP-Framework für mich zu entdecken. Schneller ging die Arbeit damit schon nach kurzem Lernprozess von statten, ohne dabei seine Flexibilität irgendwie einengen zu müssen.

Nach diesem positiven Startschuss in Sachen Framework-Erfahrung habe ich mich heute an das jQuery-Framework heran getraut und bin wirklich begeistert. Die Syntax ist dank Gerrits Vortrag schnell erklärt, und eine kompakte Dokumentation zum Mitnehmen findet man bei Visual jQuery und Bennadel (vorsicht, PDF-Dokument).

So habe ich mich nun heute einige Zeit daran gesetzt die ersten Schritte zu gehen, und sie vielen mir so einfach wie nie, ich war wirklich überrascht.

Man muss dazu sagen, dass ich was JavaScript bisher angeht wirklich nur seeeehr oberflächliches Wissen habe.

Ich denke das ich in die nächsten anstehenden Projekte sicherlich die ein oder andere sinnvolle Funktion einbauen werde, gerade bei dieser Zeitersparnis. Das lernen macht durch die tollen Animationen sogar noch ein wenig mehr Spaß als mit Cake :)

Wenn mir nun noch jemand sagen könnte wie man in jQuery bzw. Javascript allgemein so etwas wie eine “Pause” einbinden kann (z.b.: slideOut(), dann 5 Sekunden warten, dann wieder slideIn(), das wäre super! Was mir auch noch so Gedanken macht sind Schleifen jeglicher Art in JavaScript (also z.B. alle <li> eines <ul> nacheinander durchlaufen.

Für Antworten bin ich jederzeit zu haben…und natürlich werde ich einige meiner Lernerfolge hier auch protokollieren :)


Beispiel einer Javascript Slideshow

Ich möchte euch einmal kurz eine Einweisung zu einem kleinen Javascript geben, welches wirklich sehr einfache und hübsche Überblendeffekte für Fotos ermöglicht.

Ich stand letztens vor dem “Problem” das ein Kunde eine einfache Slideshow als Designelement in seine neue Webseite einbinden wollte. Da ich nicht der erfahrenste in Sachen Flash bin (aus gutem Grund) schaute ich mich nach einer Lösung für JavaScript um und bin nach einigem Suchen auch auf die perfekte Lösung gestoßen.

Kompletten Artikel lesen...


swfIR steht für swf Image Replacement und ist sozusagen das Gegendstück zu SIFR, welches je bekanntermaßen dafür genutzt wird, auch Systemfremde Schriftarten, barrierefrei in Webseiten einbinden zu können.

swfIR interessiert sich jedoch nicht für Schriftarten. Mit swfIR ist es vielmehr möglich, Elemente auf Webseiten mit hübschen Effekten wie z.b Schlagschatten, Rotationen, runden Rahmen oder automatischer Bildgrößenanpassung zu versehen. Interessant sind diese Effekte wohl vor allem für automatisch generierte Bilder, bzw. bei generellem Massenaufkommen von Bildern. Hier macht die Anwendung wirklich Sinn, denn bei einer eventuellen Änderung im Design muss das Bildmaterial nicht im geringsten angefasst bzw. verändert werden.

swfir - swf Image Replacement

swfIR baut sowohl auf JavaScript als auch Flash. Ist eine der beiden Techniken nicht auf dem System vorhanden wird die Grafik ganz einfach ohne Effekt(e) wiedergegeben, von daher sollte auch der Punkt der Barrierefreiheit geklärt sein.

Das Paket kommt unobtrusive daher, es braucht also wieder nur einen geringen Aufwand, die Effekte in den eigenen Quelltext einzupflegen, der Rest passiert wieder über die Manipulation des DOMs.

Wiegen tut das ganz “nur” 23KB, ein verkraftbarer Wert wie ich finde, es sei denn der Quelltext strotzt eh schon vor CSS-Dateien, Bildern und JavaScripten.

Gefunden via: Jowra


Miniajax

Nicht neu, aber dafür erwähnenswert :)

Auf Ajaxload kann der fleißige Webentwickler sich zu jeder erdenklichen Farbkombination seine eigene kleine Ladeanimation zaubern lassen.

Derzeit kann aus knapp 20 Animationen gewählt werden, denen dann noch eine individuelle Vorder- und Hintergrundfarbe zugewiesen werden kann. Der Service hat auf jeden Fall den Weg in meine Bookmarks gefunden :)

Eine weitere tolle Sache für uns Webfutzies ist vor einigen Tagen erschienen. Die Seite nennt sich MiniAjax und hält eine Vielzahl an nützlichen Ajaxtools bereit, die meist wahnsinnig schnell in die eigene Seite eingebunden werden können.

Ich für meinen Teil habe dort auf Anhieb sehr interessante Anwendungen gefunden, die bereits in ein kleines Projekt einfließen konnten.


Vorschaubild einer Javascript-Reflektion

Jeder kennt sie, jeder will sie… diese tollen Reflektionen unter Bildern und Logos.

Bisher habe ich das immer via Photoshop erledigt. Das wird nun in vielen Fällen ein Ende haben :)

Eben habe ich ein kleines JavaScript mit dem simplen Namen reflections.js entdeckt, welches den besagten Effekt automatisch generieren kann. Das Script wiegt nur kleine 5KB, ist mit allen modernen Browsern (auch dem IE 5.5) kompatibel und ist einfach anzuwenden.

Um einem Bild eine solche Reflektion zuzuweisen muss die JavaScript-Datei nur einmal in den HEAD der Webseite integriert werden, der Rest erfolgt über eine DOM-Manipulation, wodurch man dem besagten Bild nur noch ein class="reflect" zuweisen muss.

Ein wirklich hilfreiches Script, das vor allem den Vorteil hat, das bei deaktiviertem Javascript immer noch das normale Bild dargestellt werden kann. Die Reflektion ist zudem in Höhe und Transparenz anpassbar und richtet sich immer nach der jeweiligen Hintergrundfarbe.

Für Textpattern-Fans hat Robert Wetzlmayr bereits ein passendes Textpattern-Plugin veröffentlicht.


Nur nochmal Blümchen, herrliche Farben wie ich finde.

Wie evtl. einige schon mitbekommen haben, nutze ich seit der neuen Hackthenet-Version eine Art Lightbox, welche jedoch auf den Namen Thickbox hört und einige tolle Vorteile mit sich bringt.

Zum einen wäre da, das die Thickbox “nur” 31Kb wiegt. Die Thickbox basiert zudem nicht auf den JS-Frameworks Scriptacolous oder Prototype sondern auf dem immer beliebteren jQuery. Da wäre also schon der zweite Vorteil. jQuery bringt viele gute und tolle Effekte mit sich, welche in der 31KB-Variante der Thickbox also bereits integriert wären. Wer eine kleine Kostprobe will, der möge einfach auf das Artikelbild klicken :)

Die Thickbox bietet jedoch noch andere Vorteile:

Zum einen werden Bilder automatisch der Browsergröße angepasst, kommt also jemand mit einer 800×600 Auflösung daher bleibt ihm das Scrollen erspart, das Bild wird automatisch proportional herunter gerechnet. Das ganze wird dann zwar etwas pixelig, jedoch ist diese Methode ja auch nur für die Ausnahme bestimmt.

Ein weiterer Vorteil ist, das die Thickbox nicht nur mit allen möglichen Bildformaten umzugehen weis, nein, jeglicher Browserinhalt kann mit Ihr hervorgehoben werden, sei es ein JPG, PNG oder auch ein PDF. Worauf ich jedoch hinaus will, ist die Möglichkeit von AJAX abrufen, also auch der Nutzung von HTML innerhalb der Thickbox, so ist es z.B. möglich ein schickes Loginformular bei einem Klick einfaden zu lassen, wirklich etwas sehr nützliches und innovatives.

Auch eine Galerieunterstützung (also das Vor und Zurückklicken innerhalb einer Bildershow) ist kein Problem.

Einzig Abstriche beim Effekt muss man evtl. tätigen, so klappt sich die Bühne nicht wie bei der Lightbox auseinander, sondern wird “nur” durch eine schöne Ladeanimation angekündigt und dann eingefadet.

Und noch ein Tpp:

Wer übrigens wirklich nur mal eben ein Bild schön einbinden möchte, dabei die 100KB der Lightbox scheut und die tollen Dinge der Thickbox nicht benötigt, der sollte auf die Slimbox zurückgreifen.

Sie arbeitet mit dem Mootools-Framework und ist Alles in Allem nur 21Kb “fett”. Die Slimbox unterscheidet sich im Effekt und der Anwendung dabei in keinster Weise zur Lightbox 2.0.



Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda