Nachdem die USA einen neuen Präsidenten hat und dessen Team sofort die Seite des Weißen Haus aktualisiert hat (gefunden im Designtagebuch) und jQuery Version 1.3.1 erschienen ist, wäre es an der Zeit, den Interaktionsdesigner mit ein paar jQuery Tutorials aufzufrischen.
Das Erste dreht sich um Menüs, bzw. Navigationen. Das JavaScript ist unaufdringlich und ermöglicht dem Nutzer durch ein paar einfache Tricks ein besseres Erlebnis. Benutzer ohne aktiviertes JavaScript werden nicht ausgeschlossen. Es geht um die Funktionen hover und click und ein bisschen CSS3. Fragen sind gern gesehen in den Kommentaren und jQuery auf jeder Seite!
Herrliche Neuigkeiten: eine neue jQuery Version ist erschienen!!! Man beachte den Blogbeitrag, die Release Notes und dann freuen über die neue, noch bessere Version.
Die schönste Neuigkeit für mich ist die neue Funktion live(). Schon Ewigkeiten wollte ich über das Plugin Livequery schreiben, welches die gleichen Funktionalitäten anbietet. Aber das hat sich jetzt erledigt.
Mit der Funktion live() bindet man Events an Elemente, und zwar an alle Elemente. Das bedeutet auch an jene, welche per Ajax nachgeladen werden.
Mit diesem Code wird bei Klick auf einen Button eine Nachricht ausgegeben, auch wenn dieser dynamisch nachgeladen wurde. Wunderbar!
Und noch eine "neue" Erkenntnis will ich niemanden vorenthalten: Der viel genutzte Ausdruck
$(document).ready(function() { /* alles geladen! los gehts */ });
ist gar nicht so gut! Ganz im Gegenteil, er ist sogar schlecht.
Der Grund ist die Zusammenarbeit mit anderen JavaScript Frameworks, die eventuell auch gebrauch der Dollar-Funktion machen.
Die Lösung ist zum Glück einfach:
jQuery(function($) { /* alles geladen, ohne Konflikte!!! */ });
Der Funktion jQuery wird eine individuelle Funktion übergeben. Diese kriegt das komplette Framework als Parameter übergeben - und der wird dann dem Dollar-Zeichen zugewiesen.
Klingt komisch, ist aber so und verhindert lästige Fehlermeldung und Diskussionen mit Kollegen.
Nach dem ich mal wieder über den Appell an Webentwickler gestolpert bin, beginne ich meinen ersten zweiten Eintrag dieses Jahres mit einem tollen Thema welches ich zwischen den Jahren entdeckt habe: Die effektive Kommunikation zwischen TYPO3 und jQuery dank Ajax.
Möglich macht das die Funktionalität der eID seit TYPO3 Version 4 und die geniale Handhabung vom Lieblingsframework mit JSON. Eingesetzt hab ich es in einer tollen, neuen Extension die wir entwickelt haben und die hoffentlich bald das Licht der Welt erblicken wird. Das wird dann gesondert gefeiert. Zum Eintrag Asynchrone Datenübertragung zwischen TYPO3 und jQuery →
Jetzt kommt ein herrlicher Ajaxeffekt: Beim Klick auf einen Menüpunkt wird der Inhalt sanft ausgeblendet, die aufzurufende Seite wird asynchron vom Server geladen und dem User sanft wieder eingeblendet.
Endlich konnte ich mich mal wieder lange und intensiv mit jQuery auseinander setzen. Es ging um ein Formular welches auf verschiedene Angaben verschieden reagieren sollte. D.h. wenn man auswählt das man Nr 1 ist, gibt es im folgenden andere Pflichtfelder als wenn man Nr 2 wäre, usw.
Dabei konnte ich die ganze Zeit lächeln weil es mit jQuery so viel Spaß macht zu arbeiten. Und das will ich natürlich niemandem vorenthalten. Eine einzige Zeile reicht aus um eine ganze Reihe Aktionen für alle Browser (auch den IE6) auszuführen. Man kann sehr einfach abfragen ob Checkboxen angeklickt sind oder nicht.
Schwieriger zu betiteln als es eigentlich ist: Der Auftrag war für eine aktuelle TYPO3 Präsenz den Besucher auf eine wichtige Tatsache hinzuweisen. Die Seite soll abgedunkelt werden und darüber zentriert der neue Inhalt liegen. Also ein Effekt wie bei der Imagebox.
Spannend wurde das ganze dann durch die Vorgabe, dass der Redakteur die Inhalte einfach über das Backend bearbeiten sollte.
Da wir uns immer weiter vernetzen und unsere verschiedenen Services beginnen sich auf diversen Servern im Internet zu tummeln, stolpern wir aufeinmal ständig über folgende Fehlermeldung:
Access to restricted URI denied" code: "1012
Hier kommt die Anleitung um jQuery dazu zu bewegen, nicht mehr diesen nervigen Fehler zu produzieren: Das Geheimnis ist JSONP und die Parameterübergabe per GET. Zum Eintrag JSONP und das Cross Server Scripting →
Dieser Eintrag ist kein Tutorial oder Anleitung zu jQuery. Wenn man sich eine neue Technik aneignet dann geht das ja meistens recht einfach, und wenn es eine so geniale Technik ist wie jQuery dann macht es auch noch richtig Spaß!
Aber irgendwann möchte man mehr Wissen und vertieft sich in Bücher und tiefschürfende (ewig lange) Blogbeiträge und kann dabei noch einiges zutage fördern was die Arbeit wesentlich erleichtert.
Bei der Arbeit mit Content Managment Systemen stößt man immer wieder auf die gleichen Probleme: Die meisten Lösungen sind zwar für uns Programmierer einfach, aber aus irgendeinem Grund merken sich die Redakteure das nicht.
Ein glänzendes Beispiel dafür sind die Hurenkinder der Überschriften. Bedeutet: das letzte Wort einer Überschrift wird umgebrochen und steht ganz allein in der nächsten Zeile.
Im jQuery Weblog wird gerade das letzte Betarelease vor der stabilen Version des jQuery Userinterfaces (kurz UI) gefeiert. Lustiger Weise von Paul
Dazu gekommen sind nicht nur sehr vielversprechende Funktionen, sondern auch eine neue Homepage, inkl. neuem Logo. Es ist heute zwar schwierig etwas einzigartiges zu entwickeln, aber die Ähnlichkeit ist doch äußert aufdringlich:
Abgesehen vom interessanten Logo kann ich es kaum erwarten endlich die stabile Version zu testen, da auch in der Beta 4 noch eine ganze Menge Bugs auftreten. Aber irgendwann kommt der große Moment und dann gibts geile Interfaces!
Bis dahin führe ich mir "jQuery in Action" von Bibeault und Katz zu Gemüte und werde berichten...
DAS FACEBOOK PROFIL IHRER TOCHTER
HAT MEHR KLICKS, ALS DIE WEBSEITE
IHRES UNTERNEHMENS?
Schwieriger zu betiteln als es eigentlich ist: Der Auftrag war für eine aktuelle TYPO3 Präsenz den Besucher auf eine wichtige Tatsache hinzuweisen. Die Seite soll abgedunkelt werden und darüber zentriert der neue Inhalt liegen. Also ein Effekt wie bei der Imagebox.
Da wir uns immer weiter vernetzen und unsere verschiedenen Services beginnen sich auf diversen Servern im Internet zu tummeln, stolpern wir aufeinmal ständig über folgende Fehlermeldung:
