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.


Auf immer mehr der von mir erstellten Webseiten kommt in der letzten Zeit das jQuery-Framework zum Einsatz. Die Anwendung ist aus meiner Sicht genial einfach und dennoch super flexibel. Innerhalb weniger Stunden kann damit auch ein Javascript-Laie erste kleinere Ajax-Funktionen in seine Seiten implementieren.

Seit geraumer Zeit bietet jQuery nun auch den Bezug des Frameworks über den Amazon S3-Service an.

Mit Amazon S3 ist es möglich die gleiche Servertechnik wie das Amazon-Portal zu nutzen, was theoretisch eine fabelhafte Performance und eine nahezu hundertprozentige Ausfallsicherheit bedeutet.

Kompletten Artikel lesen...


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...


Wer JavaScript in seinen Seiten nutzt, der hat oft das Problem nicht zwingend davon ausgehen zu können das seine Besucher auch wirklich JavaScript in ihrem Webbrowser aktiviert haben.

Eigentlich sollte man seine Seite natürlich möglichst so anlegen, das diese auch mit deaktiviertem JS noch in irgendeiner Form zugänglich ist, eventuell mit Einschränkungen, aber im großen und ganzen sollte JS eben möglichst als “Zusatz” behandelt werden.

Um einen Besucher nun auf diese qualitative Einbuße hinzuweisen ist es üblich dem User eine kurze Meldung dazu auszugeben, damit er bei Notwendigkeit gegebenenfalls Javascript aktivieren kann.

Hier nur eine kurze und simple Möglichkeit eine einfache Message in die Seite zu integrieren, die nur angezeigt wird wenn JavaScript deaktiviert ist…natürlich auf Basis von jQuery

Das HTML:

<div id="jsalert">
	Sie benötigen einen Webbrowser mit aktiviertem JavaScript
	um alle Features dieser Seite nutzen zu können.
</div>

Das Div bzw. die Box kann nun natürlich an beliebiger Stelle eingebunden und mit CSS gestylt werden, ist doch klar.

Nun sieht diese Box aber natürlich noch jeder, auch die Personen die eben JavaScript aktiviert haben. Für diese ist die Meldung jedoch nicht zutreffend, also blenden wir diese kurzerhand einfach mittels JavaScript wieder aus.

Das jQuery-JavaScript

$(document).ready(function(){
  $('#jsalert').remove();
});

Jetzt wird die Box mit der Warnung von allen JS-fähigen Browsern direkt beim Seitenstart wieder aus dem Quelltext verbannt, alle Browser ohne JavaScript löschen die Box natürlich nicht und geben somit auch den Hinweis aus.

Ganz simpel, ich weis, und auch nicht wirklich neu, ich weis, aber vielleicht für den ein oder anderen doch mal ganz nützlich :-)


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 :)



Ältere Einträge Neuere Einträge

Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda