Einführung in jQuery Technikwürze 147

Technikwürze 147. Mein Name ist David Martschewski und neben mir direkt das erste Mal live dabei quasi Dirk Jesse. Hallo Dirk.

Hi.

Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast. Von und mit David Martschewski.

Ja, schon wieder. Ich bin hier. Ich bekomme euch alle. Ja, ich meld mich ja auch erfolgreich zurück aus dem Urlaub. Der Marcel Böttcher, hat mich ja, hervorragend vertreten, besonders bei diesem heißen Wetter grünen draußen auf der Wiese, aber ich hab's ja auch nicht schlecht gehabt. Von daher passt das denn schon. Gut erholt bin ich und ich hatte mich, während meines Urlaubs richtig gut gefreut.

Da hatte mich, da hatte mir nämlich, der Technikwürze-Hörer Phil, 'n Brief geschickt, so völlig unerwartet und drin waren drei Aufkleber. Die hab ich dir grade das erste Mal gezeigt und du hast auch-

Total schräg.

Ich find's total geil. Der erste Aufkleber ist, 'ne Pixelschrift. Es geht um Monkey Island, Monkey Island-Aufkleber, die klassischen. Dieser berühmte Spruch: „Hinter dir ein dreiköpfiger Affe", gesetzt in dieser richtigen Schrift von damals, so richtig pixelig, richtig groß. Super genial.

Dazu gibt es, passend dazu zu diesem dreiköpfigen Affenbild natürlich den dreiköpfigen Affen, einerseits in dem Original, mit der, mit dem verpixelten riesengroß und dazu noch mal eine moderne, Variante, jetzt nicht aus dem aktuellen Spiel, sondern halt mal so 'n bisschen an Aufkleber.

Schön gezeichnet.

Schön gezeichnet, ja. Auf jeden Fall, klasse Idee. Ich weiß überhaupt nicht, wo ich das hinkleben soll, aber ich find's geil. Schönen Dank.

Ein Auto. Aufs Auto hinten drauf? Müsste passen, ne?

Das wär 'ne Idee, genau. Ja, Monkey Island. Das hatten wir ja schon paarmal in der Technikwürze. Nein, aber da sollte es heute nicht drum gehen, um, Monkey Island, sondern um jQuery.

Mhm. Ja.

Und zwar wollen wir euch 'ne kleine Einführung geben in jQuery. Was ist jQuery? Was könnt ihr damit machen? Und, geben euch noch so ein, zwei Links mit auf den Weg, was es damit auf sich hat. Derzeit ist aktuell die Version eins, drei Punkt zwei und jQuery an sich ist eine JavaScript-Bibliothek, zur Manipulation des DOM. So ist es grundsätzlich zusammenzufassen.

Ja. Runterladen könnt ihr die Bibliothek grundsätzlich auf der Seite, jQuery.com. Dort gibt's jeweils, aktuell immer eine Fassung für die Entwicklung. Die ist unkomprimiert und schlägt im Moment so mit 120 Kilobyte zu Buche. Und dazu gibt es gleichermaßen eine Fassung für den Produktivbetrieb, der dann auf dem Server laufen könnte, auf dem eure Webseite läuft und die ist bei minifiziert und Gzip-komprimiert nur noch 19 Kilobyte groß.

Genau, das ist die Variante, die ihr dann einsetzen solltet, wenn ihr damit arbeitet und wollt nicht großartig in jQuery noch rumschrauben.

Ganz genau.

Also an, an der Core-Bibliothek selbst dann.

Die Downloads selber führen, glaub ich, meines Wissens nach wie vor auf Google-Seiten- weil, seit schon so einiger Zeit jQuery dankenswerterweise von Google angeboten wird und es kann entweder drunter geladen werden oder sie können's direkt, auf den Google, Seiten referenzieren in eurer Projekte einbinden.

Mhm. jQuery ist als solches ja sehr beliebt. Es ist auf jeden Fall absolut populär, in Sachen JavaScript. Ich, ich kenn die absoluten Zahlen nicht, aber ich bilde mir ein, dass es eins der meistgenutzten, Bibliotheken ist. Zumindest erkennt man's auf jeder Seite und, täglich erscheinen, zwei bis, acht neue Artikel, die sich in irgendeiner Weise mit jQuery oder mit der Erweiterung von jQuery durch irgendwelche Plugins beschäftigen. Also da ist 'ne Menge los, ne?

Ja, also das ist, glaub ich, der Fall, wo, die Leute oder auch ich gelegentlich dann doch mal auf diese Listen schauen, 50 irgendwas, weil da eben auch mittlerweile 'ne ganze Menge, die 50 besten jQuery-Plugins, die 50 besten jQuery-Tutorials zu finden sind. Also das ist mit Abstand die JavaScript-Bibliothek, die d-die größte Community hat, die sich öffentlich zu Wort meldet und eben mit Plugins und Tutorials glänzt.

Was ich auch gesehen habe, ist, ist – hast du mir gerade gezeigt – selbst auf dem iPhone gibt es 'ne, eine native App, die sich, der jQuery-Dokumentation widmet. Den, den API-Browser gibt es, in 'ner Adobe Air-Geschichte. Die kann man sich installieren auf... Was, gibt's das auf Linux, Adobe Air, eigentlich? Sei's drum. Auf jeden Fall Windows und Mac, da kann man das bequem, benutzen, durch Prism oder ähnliche Tools. Ach nee, ist ja Adobe Air, funktioniert ja sowieso im eigenen Browser.

Ist es eine hervorragende Funktion, das mal schnell aufzurufen und mal nach der Doku zu schlagen. Ansonsten auch, Visual jQuery absolut zu empfehlen. Das benutz ich eigentlich schon sehr, sehr lange, um mal ganz schnell auf irgendwas drauf zuzugreifen. Ist in Kategorien unterteilt, sodass man erst mal gucken kann: Was möcht ich jetzt im, DOM, manipulieren? Oder möcht ich jetzt irgendwas mit Effekte machen? Oder möcht ich jetzt was ganz Bestimmtes?

Dann kann man durch die Kategorien sich zu dem Ziel heranfinden und, kommt dann zu der Doku mit den Beispielen. Hervorragend gelöst. Also Döku, Dokumentation als solches über jQuery ist historisch gesehen nicht immer perfekt gewesen. Da gab es teilweise erhebliche Lücken, grade so zwischen den richtigen Generationswechseln, Versionswechseln. Inzwischen ist es aber recht solide, was man da vorfinden kann.

Ja, auf alle Fälle. Also einerseits eben die Möglichkeit, jetzt über den... Was war's?

Wie hast du's genannt? Ich hab selber, ich benutz nämlich nie den API Browser. Man kann sich die Dokumentation also damit wirklich runterladen und hat sie bei sich aufm, aufm Rechner dabei. Die Dokumentation selbst ist jetzt, mit der Version eins zwei die lange Zeit aktuell war, jetzt mit der Version eins drei eigentlich recht ausgereift und, und, und umfangreich und gut verständlich geschrieben.

Und nach wie vor das, Spielzeug, um schnell nachzuschlagen, ist, denk ich mal, wirklich Visual jQuery. Hängt noch 'n bisschen hinterher, ist im Moment, so wie ich das hier grad sehe, glaub ich, noch auf Version eins zwei sechs. Erschlägt trotzdem fast alles, was man fürs tägliche Leben mit jQuery braucht. Man kommt eben sehr schnell dahin.

Man kann sich schön durchklicken zu den einzelnen, Funktionen, die jQuery bietet, jeweils mit 'nem Beispiel unterlegt und für Aptana vielleicht Nutzer vielleicht noch interessant oder für Leute, die sich über, die sich überlegen, mit Aptana, JavaScript-Entwicklung zu machen.

In Aptana ist Visual jQuery direkt implementiert, und zwar als so 'n eigenes einfaches Panel, was man sich jederzeit unten neben die Konsole legen kann und damit quasi immer griffbereit hat, ohne extra dafür in 'n Browser wechseln zu müssen.

Mhm. Ja, der Einstieg von, von jQuery ist relativ einfach eigentlich. Und zwar beginnt das erst mal damit, dass man schreibt: Jetzt haben wir natürlich ein kleines Problem, dass wir euch 'n bisschen Quelltext eigentlich, vorlesen wollen. Andererseits ist es 'n bisschen audiotechnisch schlecht, rüberzubringen. Grundsätzlich, wenn ihr jQuery Code gesehen habt, dann beginnt das Ganze eigentlich immer mit so 'nem Dollar.

In runden Klammern wird, dann der, das Element angegeben, was man quasi bearbeiten möchte oder was man manipulieren möchte, oder um abzufragen, ob sich da jetzt irgendwas geändert hat. Und dahinter kommt 'ne Funktion, die dann irgendwas ausführen sollen, was auch immer. Zum Beispiel mach mal in CSS das ganze Ding in Rot oder Grün, oder blende das mal aus oder was auch immer.

Im Prinzip ist diese Schreibweise auch das, was als allererstes in eure JavaScript-Datei kommt, nachdem ihr, die jQuery-Bibliothek importiert habt. Und zwar ist es Dollar Document ready. Heißt einfach, dass, das JavaScript, was ausgeführt wird, erst lauffähig ist oder funktionieren soll, wenn, das DOM geladen ist.

Ganz genau. Vielleicht noch mal kurz zur Erklärung: Dieses Dollar, das ist also nix, Kryptisches in dem Sinne, sondern, das Dollar ist in dem Fall einfach, das Naming Spacing von jQuery. jQuery bietet selber die Möglichkeit an, über drei, vier verschiedene Varianten auf die Bibliothek zugreifen, zuzugreifen. Das ist eben als kürzeste Schreibweise, das Dollarzeichen, wo die Bibliothek dann dahinter steckt. Oder eben es ist direkt ausgeschrieben der Schriftzu-Schriftzug jQuery.

Und das ist dann eben einfach immer innerhalb, die, die, die Logik der, der Schreibweise ist also das: Innerhalb des Dollarzeichens, dann auch die Klammer. Innerhalb der Klammer kommt anschließend ein sogenannter Selektor, um ein Element innerhalb des DOMs zu selektieren. Hier lehnt sich jQuery und das macht's eben wunderbar einfach an die Schreibweise von CSS an und unterstützt oder hat bis vor Kurzem, bis zur eins drei, den kompletten CSS-Standard bis CSS drei vollständig unterstützt.

Die haben mittlerweile, sind sie mit eins drei wieder etwas zurückgegangen, haben einige unsinne, unsinnige Sachen eigentlich rausgenommen zugunsten einer besseren Performance. Aber man kann eben komplett eigentlich, so wie man CSS geschrieben hat, auf genau diese Art und Weise, einzelne Elemente innerhalb des DOM selektieren und sagt anschließend einfach nur noch, was damit geschehen soll. Und das macht, das Arbeiten mit oder das Erlernen von jQuery sehr, sehr einfach.

Und damit stellen sich also schon mit zwei, drei Zeilen jQuery die ersten sichtbaren Erfolge mit JavaScript ein. Und das ist eigentlich das, was den Leuten den Spaß zü, von,, zurückbringt, JavaScript zu lernen.

Richtig, genau. Ging, ging auch mir damals so, als ich mich das erste Mal mit jQuery befasst hatte. Kurz davor mochte ich JavaScript nie großartig, weil ich immer gedacht hab: „Mensch, mich da richtig noch mal einzulesen und, das zu kapieren, bringt eh nicht viel." Ich hatte da nie so großartige Lust. Dann hab ich, das erste Mal J, mit jQuery gearbeitet und hab gesehen, wie ruckzuck mit so 'n paar Zeilen du wirklich richtige Welten auf deine Webseite bewegen kannst, quasi.

Und ich kann mich noch an, an den ersten Tweet erinnern oder war es auf meiner Webseite? Ich weiß gar nicht mehr, zu welchem Zeitpunkt das war. „jQuery rocked", hab ich das Ganze geschrieben, weil's einfach richtig, richtig, richtig geil war und immer noch ist. Nutz ich ja immer noch. Also der Einstieg ist relativ einfach und, das hat mich wirklich, zu JavaScript hingeführt. Heute wag ich zu behaupten, dass ich, sehr gut JavaScript auch ohne jQuery kann.

Das war wirklich so meine Einstiegsdroge, also jQuery in, in die Welt von JavaScript, damit ich mich dementsprechend damit noch mehr befasse.

Da gab's vor allen Dingen in den Anfangszeiten von jQuery, gab's ja immer 'ne Diskussion: Wie lernt man jetzt am besten JavaScript? Also lernt man am besten erst mal den Urschleim und die ganzen, die ganzen Funktionalitäten von JavaScript. Wie funktioniert's? Wie schreibt man's? Wie schreibt man sicher-

Ja, ja, du bist...

-und fehlerfrei? Und anschließend kamen die Leute von wegen: „Wir machen jQuery, wir machen kein JavaScript", ne.

Ja. Du bist Lachmann. Ich hab mir auch extra mal damals 'n Buch gekauft, jQuery Hardcore erlernen, irgendwas, keine Ahnung, wie das heißt. Das ist noch irgendwie ganz tief im Schrank, versteckt. Und das haben irgendwie zwei Professoren geschrieben von irgend so 'ner Uni, oder keine Ahnung, irgendwas haben die da mit der Uni am Hut gehabt. Vielleicht waren es auch Admins oder so. Und die haben wirklich von der Pike auf das erklärt.

Also wirklich, ich kann mich kaum dran erinnern, aber irgendwie so super basic, ohne dass du irgendwie in der ersten Zeile gesehen hast, was JavaScript überhaupt bedeutet, haben die da einen vom Stapel gelassen und einem vom, vom Kreis was erzählt, wie rund 'n Kreis sein muss und so weiter. Und, das Ding war so mega trocken, dass das eigentlich nicht die Art war, wie ich irgendwas lernen will. Ja, und deswegen hab ich das Buch in die Ecke geschmissen, nie wieder angefasst.

Und dann kam irgendwann jQuery und ich hab gesehen: Hey, du machst hier ein, zwei Zeilen und kannst dir irgendwelche, -

Elemente im, im DOM-Baum wirklich, manipulieren und damit was machen. Und, das hat Lust geweckt, ne. Und das war wirklich der perfekte Einstieg.

Ja. Vielleicht zur Erklärung: Das ist eben auch, warum macht's das jQuery so einfach? Das ist-- an vielen Stellen ist eben JavaScript, so, dass es genauso wie CSS, sehr, sehr browserspezifisch ist, die Umsetzung. Und das macht eben die Probleme, dass... Es geht los beim Selektieren von Ele... oder be-beim Finden vom, von Elementen im DOM. Da ist, sind die reinen JavaScript-Funktionen nicht unbedingt reichhaltig. Das, der, der Spaß hört ganz schnell auf, wenn's ans Event Handling geht-...

das eben im, im Internet Explorer vollkommen anders funktioniert, als in den restlichen Browsern. Und alleine diese Sachen, sich um ein Klick-Event, auf 'n, auf 'n Element zu kümmern und, und das überhaupt crossbrowser funktionabel hinzubekommen. Das ist also, mit JavaScript schreibt man eine ganze Menge Zeilen Code, ohne um, um sich, ohne dass man sich um das gekümmert hat, was bei dem Klick passieren soll.

Genau, wenn man erst mal sich um die Browser und die, und das Ansprechen gekümmert hat.

Und genau.

Das macht jQuery für euch quasi im Hintergrund. Also ihr, ihr schreibt jQuery und sagt, was passieren soll und jQuery kümmert sich quasi um den Rest. Und die Schreibweise von diesem jQuery ist wirklich, CSS-ähnlich. Also wir können's fast sagen, dass die Selektoren und so weiter funktionieren genauso wie in CSS 2.1 beziehungsweise 3. Und von daher 'ne, 'ne hervorragende Möglichkeit, wenn man ein bisschen CSS kann, findet man da relativ schnell rein, um, um seine Sachen ansprechen zu können, ne.

Ja. Man erkennt sofort wieder, vor allen Dingen, ist sofort zu sehen, was passiert. Weil man, wenn man eben CSS kennt, ne, man, man sieht das, was man, was man kennt, ne. Ich sehe Header, aha, mit Header passiert jetzt was. Ne? Während ich sonst wahrscheinlich im JavaScript-Code Mühe habe, überhaupt als Nicht-JavaScript-Könner durchzublicken, was da überhaupt gemeint ist. Das Schöne ist eben, es ist nicht so, dass man entweder jQuery lernt oder JavaScript lernt.

Es ist von meiner Seite eigentlich, es ist der viel, viel schönere, einfachere, leichtere, spaßmachentere Einstieg in JavaScript. Und wenn dann die eigenen Ansprüche steigen, dass man eben nicht nur 'ne Box von A nach B fliegen lassen will oder mal ein Element ein- und ausblenden, sondern komplexere Sachen programmieren will, dann lernt man schon von ganz alleine eigentlich den Teil, der noch fehlt. Man lernt dann die Sprache dann noch dazu.

Definitiv, weil, -

Im Großen und Ganzen macht es auf diese Art und Weise, ist es wirklich ein, ein spielendes Lernen und das macht's für sehr viele sehr attraktiv.

Also grade bei Erweiterungen, wenn man so Spezialfälle plant oder, oder möchte das funktionell erweitern, dann gibt es ja die Möglichkeit, darauf gehen wir 'n bisschen später noch ein, das durch Plugins zu erweitern, obwohl man dann noch mal gucken muss, ob's vielleicht einfacher ist, das, vielleicht selber zu schreiben, das JavaScript.

Und, und das ist eben der Einstieg, wo, wo ihr euch dann selber so rantasten könnt in Sachen JavaScript, um es zu lernen oder um euer jQuery dementsprechend zu erweitern. Weil manchmal kann es sein, dass ihr, wenn ihr da selbst JavaScript schreibt, das in drei Zeilen hinkriegt, während allein 'n Plugin vielleicht mit zehn, 15 Zeilen dabei ist und das vielleicht 'n bisschen Overhead ist. Aber da gehen wir 'n bisschen später drauf ein.

Also in Summe ist, jQuery, wir haben's untertitelt: Warum ist jQuery so sexy? Ganz einfach, ja, es ist 'ne kurze, prägnante, klare Schreibweise. Sehr einfach zu erlernen und, sehr gezielt einsetzbar. Also das ist so, wie wenn wir stichpunktartig mit euch reden wollen, wie zum Beispiel, dass wir Technik wird zu hören wollen. Dann sagen wir: Technik wird zu hören, jetzt. Das wäre so quasi jQuery in Short.

Das ist genau.

Ja, es ist 'ne einfache Steuerung von, von Ajax-Zugriffen möglich. Ajax ist ja immer 'ne Geschichte, wenn man, ohne die Seite neu zu laden, mit dem Server im Hintergrund Kontakt aufnimmt durch JavaScript, irgendwelche Sachen nachlädt vom Server, irgendwelche Daten, irgendwas speichert, oder neue Inhalte nachlädt.

Dafür benutzt man Ajax und, jQuery ist prädestiniert dafür, mit, mit Ajax, Ajax zu benutzen, um, um Daten hin- und herzuschaufeln zwischen den Servern, ohne dass der Benutzer die neue Seite und damit die ganzen Elemente, neu laden muss. Das heißt, da-das Ganze, was man mit diesem jQuery machen kann, ist 'ne richtige, ja, interaktive Webseite quasi.

Also man kann sehr viel live machen, und, und, das Verhalten einer nativen Applikation, also eines, eines richtig echten Programmes auf dem Computer, sei es egal, ob PC oder Mac, dass man das versucht, in einer Webseite nachzubilden.

Ja. Also da kommt man sehr, sehr weit und vor allen Dingen sehr schnell sehr weit., 'ne andere Sache, die bei jQuery sehr interessant ist und sehr die Schreibweise oder den Code, den man schreiben muss, um 'n gewisses Ziel zu erreichen, sehr kurz hält, ist neben der Art und Weise, wie Elemente selektiert werden, das sogenannte Chaining. Das heißt, ich kann, wenn ich mehrere Aufgaben hintereinander zu erledigen habe, ein Element, sichtbar schalten, einfärben, an ei...

an 'ner Position schieben, dann lassen sich beispielsweise dieses Element einmalig selektieren-... und diese einzelnen Methoden hintereinander direkt hintereinander aufrufen, ohne dieses Element jedes Mal neu selektieren zu müssen.

Genau. Es ist also nicht dieser Fall, dass ihr sagt: Jetzt nimm doch mal bitte die Liste mit der ID, Navigation beispielsweise. Und mach mit dem was. Und, danach ruft ihr das Ding noch mal auf und gebt jQuery den Befehl: Such doch noch mal im DOM nach diesem Element. Okay, jetzt hab ich dieses DOM und jetzt färb ich das ein. Und in der nächsten Zeile sagt ihr dann: Ach ja, ich hätte mit diesem, Objekt noch mal gerne das gemacht.

Das ist nicht grade effizient, weil ihr quasi jQuery jedes Mal den Befehl gebt, dieses Objekt noch mal im, im DOM zu suchen. Und deswegen kann man eben, diese ganzen Sachen, diese verschiedenen Steps, die man damit vorhat, auch wenn die völlig unterschiedlich sind und völlig unterschiedliche Aufgaben zu erledigen haben, direkt hintereinander wie eine Kette hintereinander schalten.

Das hat, wie gesagt, den Sinn, dass man, und damit gehen wir schon ein kleines bisschen in die, in die Optimierungsschreibweise von jQuery rein, dass man Objekte nur einmal instanziiert, also sie, wie gesagt, auffindet oder selektiert, dem 'ne Variable zuweist und dann nur noch mit dieser Variable arbeitet.

Sodass jQuery das, wie gesagt, einmal gefunden hat und dann versucht ihr irgendwas abzufragen: "Mensch, gibt es hier eine Änderung?" Oder, "Verhalte dich jetzt mal so oder mach mal irgendwas." Das ist der Sinn dabei. Denn ich hab auch schon einige Kollegen gesehen, die sich auch mit jQuery angefreundet haben, aber dann wirklich nacheinander die Befehle abarbeiten, ne? Und dann quasi jedes Mal das Objekt neu instanziieren.

Was auf kleinen Webseiten ist es eigentlich Schnuppe, aber dennoch ist, desto größer das wird, desto einfacher ist es einem, wenn man mit diesem Chaining die direkt hintereinander verknüpft.

Was noch dazu kommt, ist, dass jQuery, wenn man Elemente selektiert und beispielsweise ich se, ich selektiere ein ganz normales Div, dann ist es, wirkt es auch genauso wie, es bei CSS funktionieren würde. Wenn ich ein Div anspreche und es gibt zwanzig auf dieser Seite, dann werden diese zwanzig angesprochen. Genauso gibt mir eben jQuery an der Stelle, eine Sammlung von allen diesen zwanzig Div-Elementen zurück und ich kann mit dieser Sammlung-

Mit dessen Eigenschaften.

Mit dessen Eigenschaften. Und ich kann diese Sammlung mit allen weiteren Methoden sofort bearbeiten. Ich kann also sagen, automatisch wie gesagt: „Füge Div eine bestimmte Klasse hinzu, dann macht er das automatisch mit allen, die er findet."

Genau. Das ist ein Vorteil, ist aber auch in dem Hinsicht ein Nachteil, wenn man jetzt zum Beispiel nur ein einziges Div verändern möchte, an einer ganz bestimmten Stelle, dann macht es zum Beispiel keinen Sinn, sämtliche Divs innerhalb eines Bereiches zu selektieren, sondern dann das explizit, zu identifizieren anhand, der Nummer, in, in an welcher Stelle es im DOM jetzt auftaucht, falls man nicht genau das, falls es dynamisch passiert, oder dem Ganzen eine ID mitzugeben.

Dass man wirklich sagt: „Jetzt nimm bitte nur dieses Div mit der ID so und so", und er findet's teilweise schneller, als wenn er jedes Div wirklich, suchen muss, und du kannst ihn expliziter besser ansteuern. Um deine Sachen zu erledigen. Beziehungsweise wenn es mit der ID nicht festzumachen ist, das wär wirklich die, die erste Methode, die ich euch empfehlen würde, falls ihr ein Objekt ansprechen wollt, dann gebt ihm eine ID.

Ansonsten, wenn es immer wiederkehrende Elemente sind, die ein bestimmtes Verhalten haben, wie zum Beispiel eine kleine Überschrift in einem Bereich, dessen Bereich sich, togglen soll. Das heißt, ihr klickt drauf und das, schrumpft sich zusammen. Ihr klickt drauf und die Box geht wieder auf. Dieses Verhalten. Da könnt ihr zum Beispiel, jeder Box dieses, diese Klasse mitgeben und, der sucht sich dann alle Divs und die verhalten sich dann alle ähnlich.

Das heißt, jedes Div mit der Klasse Toggle zum Beispiel, ihr weißt dann ganz genau: Ich muss das jetzt togglen, also bei Klick aufmachen oder wieder zumachen. Chaining, genau.

Chaining, ja. Das nächste: Plugins. Ist-- Das Plugin selber schreiben steht sicherlich nicht am Anfang, wenn es darum geht, jQuery zu, effektiv zu nutzen, aber das Plugins selber benutzen, darum wird man wahrscheinlich am Anfang, viel mehr darauf abfahren, das zu machen.

Genau. Es gibt ja, so viel sei vorweg gesagt, un-- also inzwischen un, un, unendlich viele, Plugins für jegliche Begriffe und auch in verschiedenen Variationen. Also wenn ihr zum Beispiel ein, ein Plugin für Accordion-Effekt sucht, ja, dass ihr, zum Beispiel eine Liste habt mit FAQs und die sind alle zusammengeklappt und eine FAQ-Beantwortung soll nur aufgeklappt werden. Ihr klickt auf die nächste, dann schließt sich die obere und die untere geht wieder auf. Das ist dieser Accordion-Effekt.

Alleine für diesen Accordion-Effekt gibt es Dutzende, von unterschiedlichen Plugins, die ein und dasselbe machen. Ne? Und im Prinzip, so viel sei vorweg geraten, braucht ihr an dieser Stelle überhaupt die Plugins nicht, weil das könnt ihr mit jQuery selbst in ein paar Zeilen erledigen.

Ganz genau. Genau, das ist so, so 'n wunderbares Beispiel, wo, wenn man sich ein bisschen reinge, reingedacht hat in das System, man wirklich genau mit diesen Sachen, die wir jetzt gerade angesprochen hatten, das Selektieren der Elemente, das Chaining, wirklich in zwei bis drei Zeilen teilweise hinkommt, und genau diesen Effekt erzielt.

Mhm. Aber, der Bunch von, von Plugins jetzt sozusagen zeigt aber auch, dass, das Schreiben von Plugins selbst relativ einfach ist. Es ist noch mal 'n Step drauf, 'n Schwierigkeitsgrad, um das zu lernen, solltet ihr euch, wie gesagt, wie du gesagt hast eben, für später aufheben. Aber dennoch kann man relativ einfach die Funktionalität erweitern. Beispielsweise macht es dann Sinn, wenn ihr immer wiederkehrende Elemente oder Aufgaben ausführen wollt.

Dann schreibt ihr euch ein Plugin und könnt das dann dementsprechend einfach mit einladen und dann, weiterschreiben. Eine Geschichte, bevor ich's vergesse.

Was man eigentlich nicht machen sollte aus Performancegründen, zumindest passiert mir das, in, in der einen oder anderen IDE, also im Editor:, wenn ihr diesen komprimierten jQuery-Code, also die jQuery-Bibliothek als solches in eine JavaScript-Datei packt, und ladet die ein, dann würde ich euch empfehlen, eine zweite JavaScript-Datei aufzumachen, wo dann eure Anweisungen und eure Selektoren drinstehen. Also diese Geschichte nicht vermischen.

Das kann in der einen oder anderen IDE wirklich dazu führen, dass, der aufgrund der riesigen Daten, die jetzt in dieser jQuery-Bibliothek sind, dass das ins Stocken gerät und, trennt das einfach und dann habt ihr performancemäßig da auch keine Probleme.

Genau. Zu den Plugins vielleicht noch mal: Also es ist nicht so, dass man un-unbedingt alles, jedes Mal dann wirklich neu erfindet. Also so ist es, so ist es auch nicht. Auch wenn es zwanzig Accordions-Plugins gibt, man kann es teilweise sehr, sehr schnell schreiben für die einzelnen Effekte. Es gibt 'n schönes Beispiel, der Dirk Inada.

Ist ja schon öfters hier gewesen und sollte eigentlich auch jetzt wieder hier sein. Deswegen-

Zumindest zugeschaltet, ja.

Deswegen haben wir die Sendung jetzt nicht jQuery Total genannt, wie sie ursprünglich vor 'nem halben Jahr mal geplant war- -sondern wir haben gesagt, wir machen eine jQuery-Einführung. Der Dirk war so frei und hat vor einiger Zeit dann mal ein Accessible-Tabs-Plugin geschrieben.

Was absolut zu empfehlen ist.

Und wenn man da mal reinguckt, dann sieht man dann schon, dass zwischen der einzelnen Funktionalität, auf ein Tab reinklicken und, den Inhalt eines Tabs sichtbar zu machen, hin zu dem Sprung, dass diese ganze Klick-mich-Methode, nicht nur für denjenigen Nutzer mit der Maus, zugänglich ist, sondern wirklich für alle Nutzer.

Dann sieht man schnell, dass auch dann wieder JavaScript-Kenntnisse, Kenntnisse in Barrierefreiheit, gefordert sind und dann auch so ein Plugin mal ein paar Zeilen länger wird.

Genau, weil grade Sachen in Barrierefreiheit, solltet ihr immer entweder 'ne alternative Methode bereitstellen – das darf man nicht vergessen. Also nicht nur auf JavaScript verlassen und mit JavaScript sieht's jetzt schön aus, sondern es gibt auch viele, die können JavaScript gar nicht benutzen. Da muss man's trotzdem ganz standardmäßig mit HTML und ich klick drauf und komme auf die nächste Seite, wo dann serverseitig irgendwas vorbereitet wird.

Auf jeden Fall kann man, selbst wenn man jetzt diesen Bereich 'n bisschen, außen vor lässt, sehr viel falsch machen, was die Barrierefreiheit betrifft. Zum Beispiel bei dieser Tab-Navigation. Was ist jetzt, im Screenreader, was ist jetzt der aktuelle Tab zum Beispiel? Wie wird der gekennzeichnet? Wie wird, wie wird darauf aufmerksam gemacht?

Weil es ist ja nicht so wie wir als, sehende Menschen, dass wir denken, : „Ach ja, da verändert sich was und das ist jetzt mein aktueller View, also mein aktueller Sichtbereich.“, das funktioniert jetzt so nicht. Ihr müsst ja beim Screenreader dem Programm sagen: „Hey, hier an dieser Stelle hat sich jetzt was geändert“, und ihr müsst auch sagen, was hat sich verändert.

Ja, und das sind alles so, Sachen, dem hat sich, Dirk, gewidmet und hat da wirklich so 'ne, so 'ne feine, ja, euch ein Plugin geschrieben, was sich eben darum kümmert, dass der Screenreader die richtigen Informationen bekommt, damit der Nichtsehende damit gut umgehen kann.

Letzter Punkt bei der, beim sexy sein sind die Events. Genau. Das ist das, was wir vorhin schon angesprochen hatten. Wenn's also darum geht, auf Reaktionen des Nutzers oder auf A... auf Aktionen des Nutzers oder auf Aktionen des Browsers zu reagieren, also auf den Klick, des Nutzers, auf, das Eintragen eines Wertes in ein Input-Feld, auf, 'ne Größenveränderung des Viewports, weil der Nutzer eben das Browserfenster verändert hat.

Immer dann werden vom Browser sogenannte Events ausgelöst, Ereignisse sozusagen, auf die, man einerseits lauschen kann und entsprechend reagieren.

Also ein kleines Beispiel zum Beisp... Kleines Beispiel zum Beispiel, natürlich. Stellt euch vor, ihr habt 'ne ganz normale, 'n, 'n Select-Element, also ein – da stehen so ein paar Dinge drin, ihr klickt drauf und könnt es dann eben auswählen. Das ist was, was sich verändert und worauf ihr zum Beispiel, Einfluss nehmen wollt. Grade mit Ajax wäre das 'ne Möglichkeit, da irgendwas nachzuladen. Zum Beispiel, ihr bildet ein kleines Select-Feld, wo man, die Automarke zum Beispiel auswählen sollte.

Und in der nächsten Geschichte sollte der Benutzer dann in der Lage sein, die einzelnen Modelle dieser Automarke auszuwählen. Was macht ihr? Ihr müsst erst mal gucken: Ändert sich in dem Select jetzt irgendwas, ja? Also ihr überwacht das Event sozusagen, dass sich da was ändert, ladet die Daten dann über Ajax nach und füttert damit das zweite Element, das zweite Select und könnt auch selbst da auf diesem noch mal 'n Event, beobachten, ob sich da irgendwas passiert und dann wieder sa...

irgendwelche Sachen anstellen. Diese Event-Geschichte ist eigentlich der Großteil. Also Interaktion des Users: Verändern sich jetzt irgendwelche Sachen, die ich im, im Vorfeld beobachte? Und wenn sie eintreten, zum Beispiel der Benutzer klickt auf diesen Button und ich muss diesen Text jetzt kleiner machen oder größer machen oder die Box schließen oder nicht. Das überwacht ihr durch diese Event-Geschichte und könnt dann dementsprechend reagieren und damit irgendwas anstellen.

Genau. In jQuery 1.3 ist hier 'ne schöne Erweiterung dazugekommen. Das sind die sogenannten Live Events. In den Jahren und Monaten davor hieß das, wurde das auch bezeichnet als Event, Event Delegation. Und das ist 'ne sehr, klasse Technik, wenn's wirklich darum geht, Elemente innerhalb des DOMs neu zu erzeugen oder auch zwischendurch zu löschen, wieder zu, zu verstecken, wieder herzuholen, und diese Elemente immer wieder mit 'nem bestimmten Verhalten zu belegen.

Dann muss man das normalerweise eben so machen: Man, wenn ich 'n neuen Link-Element erzeuge, dann wird dieses Link erst mal in, Link-Element in den DOM eingeführt. Wenn es da ist im DOM, kann ich daran ein Event anhängen, beispielsweise ein Klick-Event und kann auf diesen Klick-Event dann reagieren.

Durch diese neue Erweiterung. Bisher war's nämlich eher so und das war das Problem: Ihr stellt euch auf das HTML, also das, das DOM wird aufgebaut, es, es steht alles drin und ihr habt zum Beispiel 'ne Navigation mit, drei Menüpunkten.

Und, per Klick kann der User jetzt Daten nachladen und, keine Ahnung, dummes Beispiel, aber er ladet jetzt vom Server jetzt irgendwelche anderen Menüpunkte, fügt die dynamisch in diese Liste hinzu- -und ihr habt vorher 'ne, die Funktion gemacht, wenn der, User mit der Maus, nur da drüberfährt, dann öffnet sich so 'n, so 'n kleines Fenster, wo noch mal 'ne Beschreibung drin ist. Das würde nicht funktionieren bei den Elementen, die ihr neu hinzugefügt habt.

Denn, als das JavaScript, gestartet wurde an, an der Webseite – das ist ja erst dann, wenn das DOM geladen ist – dann wusste jQuery beziehungsweise JavaScript an dieser Stelle noch nicht, dass diese Elemente... Die waren noch nicht da und wusste nicht, dass da neue Elemente hinzukommen. Dementsprechend könnt ihr sie auch nicht ansprechen.

Ihr könnt sie a, nicht ansprechen, weil sie vorher noch nicht da waren und ihr könnt mit denen auch nichts anstellen, weil jQuery, wie gesagt, nichts, nichts davon wusste. Und mit diesen Live-Event-Delegations-Methoden, wird quasi

Ja, da wird noch mal im, im Haupt-Body-Element quasi?

Ja, es wird einfach ein Trick ausgenutzt, dessen, wie Events funktionieren. Sie, Events werden einfach, wenn sie irgendwo ausgelöst werden von einem Element, an das jeweilige Element weitergegeben und so, springt der Event so Stück für Stück den ganzen DOM-Baum nach oben.

Bis er beim Body angekommen ist.

Bis er oben, ganz oben angekommen ist. Man kann eben den Event, man muss ihn nicht abfangen an dem einzelnen Element, wo er aufgetreten ist. Das ist das, das typische Herangehen, wie man's normalerweise macht oder gemacht hat. Das Schöne ist, man kann warten, bis er ganz oben angekommen ist und ganz oben abfragen, wo denn der Ursprung des, der Aktion lag.

Und auf diese Weise, quasi beliebige Elemente dynamisch erzeugen, wieder löschen, ohne für jedes einzelne Element, was ich erzeuge oder lösche, diesen Event entweder dranzuhängen oder ihn dort wieder wegzunehmen vorm Löschen.

Genau. Also die Methoden, die ihr gesagt habt, bei Mouse Over soll jetzt da so 'n Fenster aufgehen, funktioniert auch dann bei neuen Elementen gleichen Ursprungs.

Also die Events werden immer ausgelöst, auch bei neu dynamischen, bei dynamisch neu generierten Elementen. Nur, ihr habt eben normalerweise vor in, in JavaScript nicht gesagt, dass ihr genau diesen neu, generierten Elementen auch zuhören wollt, was bei denen passiert. Und das ist einfach der Unterschied. Der macht einerseits die Programmierung leichter, wenn es um, um komplexere Applikationen geht.

Zum anderen ist es auch, 'n Speicher- und Performance, Sicherheit, die ihr euch da bietet, weil eben das, was sehr oft passiert, dass man Event, Events mehrfach definiert, einfach durch Zufall, das sehr, sehr schnell, wenn's größere Applikationen sind, auf, die Speicherauslastung und auf die Browser-Performance schlagen kann. Und das ist dadurch eigentlich alles genommen. Also ist 'ne sehr tolle Sache.

Sollte man sich unbedingt angucken, sobald man eben anfängt, sich mit dem ganzen Event Handling überhaupt zu beschäftigen. Gleich mal schauen, was mit den Live Events schon möglich ist. Gerade jetzt mit der aktuellen jQuery, jQuery-Version ist das, super einfach gelöst und es, ja, sollte man anwenden.

Mhm. Aber auch dort ist Vorsicht geboten, denn nicht, alle Events, die der User macht, lassen sich auch abgreifen derzeit damit. Es sind noch 'n paar weitere geplant, die in Zukunft dazustoßen sollten, aber zumindest, der Großteil ist abgedeckt. Und falls dann ein Element nicht dabei sein sollte oder eine, ein Event, was ihr abgreifen wollt, dann könnt ihr durch die klassische Event Delegation, eben darauf falls zurückgreifen.

Beziehungsweise gibt's da auch, 'n Plugin, das hieß, Live, glaube ich, ähnlich.

Live Query.

Live Query, genau. Was, kein richtiges Event, kein richtig klassisches Event Delegation ist, aber der benutzt ähnliche Methoden, die euch dieses zur Verfügung stellen. Also grundsätzlich solltet ihr auf das zugreifen, was im, im DOM passiert. Ansonsten eben klassische Event Delegation oder zur Not auch eben Live Query. Okay, so viel zu: Was macht jQuery so sexy? Anwendungsfälle. Jetzt kommen wir mal drauf, wofür benutzen wir überhaupt das jQuery? Ganz klar, wir wollen irgendwas dynamisch machen.

Wir wollen Webseiten dynamisch machen. Der Benutzer klickt irgendwo drauf, es passiert was, ohne dass die Seite neu geladen wird. Zum Beispiel könnt ihr euch einloggen und, die Inhalte austauschen, oder ihr könnt Sachen nachladen oder ihr könnt ganz klassisch zum Beispiel 'n Formular verifizieren, sogar über den Server. Das heißt, ohne dass ihr das Formular abschickt.

Der Server kümmert sich und macht, irgendwie 'ne, Überprüfung des Ganzen, ist alles ausgefüllt und schickt die Ergebnisse dann wieder an den Browser zurück, könnt ihr das live machen. Das heißt, ihr fragt, den, den, beim Server nach: Ist das richtig? Existiert der Benutzer? Ist er richtig angemeldet? Und der meldet zurück: Jo, der existiert. Kannst ihn durchlassen und mit jQuery sagt er: Okay, bist jetzt eingeloggt und kannst jetzt irgendwas anderes machen.

Ja, Anwendung. Fangen wir mal ganz einfach an. Ihr könnt auf die Seite jQuery.com direkt gehen. Dort findet ihr einerseits den, den Button zum Download und etwas weiter unten auf der linken Seite findet ihr so 'n, 'ne kleine Übersicht „Lern jQuery now". Da ist eine einzige Codezeile mal dargestellt, wo es darum geht, einen kleinen Absatz mit 'ner Absatz, mit 'ner Klasse zu versehen und anschließend über 'ne Animation einzublenden. Darunter ist so 'n kleiner Button „Run Code".

Da könnt ihr draufklicken und da wird genau diese Anweisung, die in der Zeile darüber steht, ausgeführt. Das erste kleine einzeilige jQuery-Programm-... wo man einfach sieht: Aha, da wird jetzt ein, ein Absatz eingeblendet und animiert dabei, geht also auf. Was zeigt es? Ich kann also ganz einfache Einblend-Ausblend-Effekte, mit jQuery realisieren.

Ich kann an Elemente dynamisch, wenn JavaScript vorhanden ist oder wenn der Nutzer 'ne bestimmte Aktion ausgeführt hat, Elemente neu erzeugen, Klassen an Elemente ranhängen. Ich kann beispielsweise, wenn ein Input-Feld als, Pflichtfeld gekennzeichnet ist und, der Nutzer geht mit 'm Tab einfach drüber, ohne was auszufüllen, ihn sofort darauf hinweisen, indem ich beispielsweise, dem umgebenden Div oder Absatzklasse dort 'n, 'ne Klasse hinzufüge, um 'ne Warnmeldung, 'ne visuelle, zu geben.

Alles so 'ne Sachen. Also es sind ganz, es geben ganz kleine Sachen. Wir können weitergehen. Wir können, man kann mit jQuery anfangen, 'n Dropdown oder 'n Flyout-Menü zu bauen.

Ja, oder diese Akkordeon-Geschichte, die wir angesprochen haben.

Genau, diese Sachen. Es geht dann weiter in die Geschichte Ajax, dass man einfach dynamisch einzelne Webseitenbereiche in-

In der Folge, so wie der Nutzer bestimmte Tabs anklickt, einfach austauscht, indem man, dynamisch Seitenelemente vom Server nachlädt. Und das Ganze kann darauf hinauslaufen, wenn man sich so was anguckt, wie Google Docs oder, oder Google Mail.

Ist jetzt vielleicht nicht unbedingt eine, ne jQuery-Applikation, aber es läuft darauf hinaus, dass auch mit jQuery selbstverständlich ganz genauso funktioniert, dass man vollständig im Browser, ablaufende Applikationen damit programmieren kann- -die im Prinzip, 'ne native Applikation auf 'nem Desktop eines, eines Computers, nachbilden. Also da sind eigentlich keine Grenzen gesetzt.

Man kann beim Kleinsten anfangen, zum Beispiel die, die eins der ersten Übungen, die ich, ganz gerne mache, um jQuery mal vorzuführen, ist, mal zu gucken: Wenn jetzt ein Benutzer auf eine Überschrift klickt, ohne dass, da ein Link hinterlegt ist, dann macht doch einfach mal 'n roten Rahmen drum. Und das ist wirklich, wie gesagt, nur 'n Einzeiler, der das ganze Ding macht. Ist 'ne tolle Übung. Zeigt, dass man dynamisch mit ganz, ganz wenig jQuery was machen kann.

Aber wenn ihr da 'n bisschen weiterdenkt, erkennt ihr relativ schnell, dass ihr auch sehr mächtige Tools damit, programmieren könnt. Also vielleicht mal 'n kleiner Ausblick an, an Sachen, mit denen wir uns beschäftigen. YAML-Builder. Magst du mal kurz was drüber erzählen?

Ja. Den YAML-Builder hab ich vor, die erste Version ist vor ungefähr zwei Jahre jetzt alt, geschrieben. Ist eine Applikation vollständig in jQuery erstellt, die einzig und allein dafür da ist, das, was ich, mit dem YAML-Framework als 'ne lose Sammlung von HTML- und CSS-Dateien, gebaut hab, in eine Möglichkeit überführt, dass ihr, dass man visuell, das Layout erstellen kann, indem man beispielsweise wirklich, in jQuery das gesamte Layout einmalig generiert.

Dazu gibt's 'ne kleine Benutzeroberfläche, die ebenfalls über jQuery dynamisch, angepasst wird. Dort kann man die Layoutbreiten des Layouts eingeben. Das gleichzeitig sieht man direkt im Browser, die Reaktion. Es wird also alles, was man in der Benutzeroberfläche eingibt, sofort umgesetzt und sichtbar. Man kann einzelne Elemente per Drag and Drop, dem Layout hinzufügen und es werden also dynamisch dann, Layout-Elemente erzeugt, neue Div-Container generiert und, und, und.

Und am Ende wird, wirf, wird, der dafür notwendige HTML-Code, um, das wirklich als HTML-Webseite zu bauen, ausgeworfen.

Genau, diese ganze Funktionalität basiert absolut auf jQuery.

Ganz genau.

Ne?

Und, 'ne weitere Sache ist auch mit jQuery umgesetzt, ist Beispiel, ist das Debug-Tool, was es seit Anfang des Jahres gibt.

Mhm, YAML Debug.

Unter der URL zu bekommen, debug Punkt YAML Punkt de, ist ein Bookmarklet. Bookmarklet ist so 'n, also 'n ganz kleiner JavaScript-Schnipsel, der, sinnvollerweise in der Toolbar des Browsers untergebracht ist.

Als Lesezeichen dann.

Lesezeichen, ganz genau. Der macht nix anderes, als die einfach eigentliche JavaScript-Applikation nachzuladen. In dem Sin, dem Falle wird jQuery nachgeladen, so es auf der Webseite beispielsweise noch nicht verwendet wird. Das wird vorab getestet, um die Seiten nicht kaputtzumachen. Die eigentliche Applikation wird nachgeladen und dann kann über jQuery, debug Punkt jQuery, ah, jetzt.

Debug Punkt YAML Punkt de.

Knoten in der Zunge. Über das Tool, kann letztenendlich verschiedene, Tests auf der Webseite durchgeführt werden, um eben zu gucken, welche Überschriftenhierarchien gibt's auf der Seite, wie ist das Layout aufgebaut- -aus welchen Containern besteht's? Haben Bilder, es können Bilder beispielsweise ausgezeichnet werden, mit 'nem, mit 'nem Rahmen versehen werden, die leere oder keine Alt-Attribute haben und alle so 'ne Sachen, die man dann, mit jQuery dynamisch einfach abtesten kann.

Und das alles über so 'ne kleine Oberfläche. Das ist so, was ich bisher damit gebaut hab.

Mhm. Zwei Sachen möcht ich euch auch noch mal eben kurz vorstellen, die ich bisher so realisiert hab mit jQuery. Eine Geschichte, die jetzt heute, wie ich festgestellt habe, nach zwei Jahren leider nicht mehr online. Und zwar haben wir damals bei, Sevenload, 'ne Videoplattform für BMW aufgebaut. Das Ding hieß BMW Minus Web Punkt tv. War 'n richtig cooles Portal eigentlich.

Nicht nur, weil ich's auch mitgestaltet habe, sondern es war wirklich von der Funktion her richtig cool und, ist heute in anderen Kanälen aufgegangen und ich, warum sie's auch immer vom Netz genommen haben. Die Funktionur, Funktionalität war eigentlich zu dem Zeitpunkt, wo wir das gelauncht haben, eigentlich so 'n eher so 'n Fall für Flash. Ja, ich bau das alles in Flash.

Da passiert ziemlich viel, da passiert ziemlich viel Dynamik und das haben wir eben mit HTML und CSS und JavaScript aufgebaut. Vornehmlich jQuery war das Tool meiner Wahl, was ich da verwendet habe. Und zwar ist auf der linken Seite der Videoplayer gewesen, natürlich in Flash. Rechts daneben war HTML-Element, was Informationen zu diesem Film angezeigt hat und, 'ne Bewertung der User und Kommentare der User rechts in der Box auch durch Tabs, die man durchschalten konnte.

Direkt da drunter, unter A diesem Videoplayer und B der Information war so eine, so 'ne, so 'ne Zeitleiste. Da sind neben dem aktuellen Video auch das, nächste Video oder das vorhergehende Video, angezeigt mit dem Titel. Und, Ajax hatte 'ne riesengroße Rolle gespielt, und zwar nämlich in der Form, dass wenn ein Video jetzt abgespielt wurde

Dann hat dieser Flashplayer, gemeldet ans JavaScript: "Du, ich bin jetzt am Ende, lade mal die Informationen nach." Dann wussten jetzt zwei Stellen, was sie zu tun haben, nämlich einerseits die Informationsspalte auf der rechten Seite. Ich muss jetzt die User, ich muss jetzt die Information des neuen Videofilms, mir holen vom Server. Ich muss die Kommentare vom Server holen und ich muss jetzt auch noch mal die ganzen Bewertungen und so weiter vom, vom Film holen.

Und sobald der wirklich zu Ende ist, tausche ich den Inhalt aus. Das Gleiche gilt für die Zeitleiste da drunter, dass einerseits die Zeitleiste automatisch, was man auch per, per Klick mit der Maus machen kann, automatisch nach links scrollt in dem Bereich und, das aktuelle Video, was angespielt wird, wird dann quasi gebrandmarkt wie von wegen: Ich bin jetzt dasjenige Video, was spielt. Und das soll natürlich auch interaktiv passieren.

Das heißt, wenn ihr ein anderes Video in der Zeitleiste anklickt, zum Beispiel in der Mitte, dann wird dem Flashplayer einerseits gesagt: "Du, lade jetzt mal bitte, die neue Videodatei und die Informationsspalte rechts weiß dann wieder: "Hey, da ist jetzt ein neues Video. Ich muss jetzt andere Informationen laden." Das Ganze wie gesagt mit jQuery relativ einfach – na ja, relativ einfach. Für mich zu diesem Zeitpunkt relativ einfach, zu machen.

Und, es passiert wirklich hochdynamisch, einerseits durch Interaktion des Benutzers, andererseits natürlich, dass sehr viel kommuniziert wird mit dem Server beziehungsweise, das den Vorteil hat, dass nur die Sachen mit dem Server kommuniziert werden, die unbedingt nötig sind. Nämlich rein die Informationen vom Server abgrasen und ihm, Informationen mitteilen, anstatt jedes Mal das HTML, CSS und so weiter noch mal neu anzufragen und es, dem Benutzer ausliefern zu lassen.

Ganz andere Geschichte: Die haben wir in der Agentur realisiert, arbeitet ja eine Werbeagentur und, da haben wir einen Großkunden, der sehr, sehr viele Anzeigen, aufgibt, sei es Werbung in, Tageszeitungen oder sei es jetzt irgendwelche Stellenanzeigen, dass sie Personal suchen. Diese Anzeigen an sich sind durch das Corporate Design fix, was wir einerseits erstellt hatten. Und, die Frequenz, wie oft diese Anzeigen gestaltet werden müssen, ist relativ häufig.

Also relativ häufig müssen da die Anzeigen gemacht werden. Und da kamen wir auf die Idee, das Ganze mit einer, Plattform, die, auf PHP aufsetzt, servermäßig mit dem Zend Framework programmiert wurde, und durch jQuery höchst dynamisch die Möglichkeit bietet, diese Anzeigen generieren zu lassen von der Webseite. Und diese Webseite, das ist nur eine einzige HTML-Webseite, die wird in keinem Fall verlassen. Das passiert alles dort.

Und im Prinzip könnt ihr euch das vorstellen: Ihr, ihr wählt einerseits, eine Dependance, das ist ein Hotel, wählt das aus, in welcher Stadt ist es. Der wählt dementsprechend, auch dann alle Formate, also DIN A4, halbe Seite, Viertelseite oder Minianzeige oder was auch immer. Dann wählt ihr die Art: Was ist es? Eine Imageanzeige oder ist es eine Jobanzeige? Was auch immer. Das hat alles Faktoren, die miteinander verzahnt sind, die die Gestaltung der jeweiligen Anzeige, sozusagen beeinflussen.

Dann könnt ihr noch einen Farbstil wählen. Vier gibt es an der Zahl. Das sind auch wieder Multiplikatoren, wie sich das auf die Anzeige auswirken kann. Ihr setzt den Text rein. Auch die Texte, da gibt es bestimmte Textbausteine, die nachgeladen werden aus der Datenbank über Ajax. Könnt ihr euch das Ding zusammenstellen.

Klickt schlussendlich dann irgendwann auf Überprüfen und der Sinn dahinter ist, dass eine, einerseits erst mal eine Preview als PDF erzeugt wird, wo ihr euch das angucken könnt, ob das alles so hinhaut, was ihr da eingetragen habt. Und andererseits wird dann eine richtig proofähige, druckfähige dreihundert, DPI PDF-Datei erzeugt, die ihr direkt so in die Druckerei geben könnt, die durch einen Vierfarbdruck, absolut besteht und ausgedruckt werden kann. Das ist der Sinn dahinter.

Und, das Ganze ist wie gesagt auf einer Webseite realisiert. Das bedeutet, wenn ihr ein Preview-PDF erzeugt habt oder ihr habt ein richtiges PDF erzeugt, dann wird das auch direkt im Archiv unten eingeblendet, wird also direkt angezeigt und nachgeladen. Ihr könnt es an dieser Stelle auch direkt runterladen und wie gesagt euch das angucken, könnt es löschen, ohne dass ihr jemals einmal diese Webseite quasi verlasst und, könnt quasi Anzeigen generieren.

Also das ist ein kleines Feld, wie es a: eine ganze Menge, Arbeitsplätze vernichtet, ja, andererseits aber auch zeigt, was man heute schon in der Zeit mit Webseiten machen kann. Also man kann richtig dynamische Prozesse auch im Hintergrund, mit der Kapazität eines Servers, indem er eben das PDF in der druckfähigen Variante erzeugt, euch bereitstellen. Und das sind schon Sachen, die waren vor ein paar Jahren wirklich noch undenkbar.

Ja. Ich habe noch ein paar kleinere Beispiele. Und zwar, wenn ihr auf die Technikwürze-Seite mal auf die Teamseite geht. Und am besten, bevor ihr das tut-

Schönes Beispiel.

Bevor ihr auf die Teamseite geht, mal JavaScript in eurem Browser deaktiviert. Dann seht ihr nämlich erst mal, wie die Teamseite ganz normal aussieht. Das ist an der Stelle nämlich nichts anderes als eine Auflistung von Bildern, Namen, den kleinen Texten und den kleinen Links. Alles untereinander von mittlerweile, wie viel?

Vielen Moderatoren, ja.

Die ganzen Moderatoren. Dazu danach eine ellenlange Liste mit den ganzen Sendungen. Wer, wie, wann, wo, zur Verfügung stand. Und nachdem ihr euch diese ellenlange Seite angeguckt habt, die niemand bis nach unten surfen möchte, schaltet ihr einfach JavaScript wieder an und ladet die Seite neu und dann kommt die Magie von jQuery in diesem Fall- -zum Tragen, denn dann wird diese Seite, wenn JavaScript vorhanden ist und genau das ist eben die Technik.

Das ist auch eine Sache, die überprüft wird.

Das ist eine Technik, die man wirklich als unobtrusive JavaScript bezeichnet. Wir setzen also JavaScript nicht voraus, sondern wir liefern erst mal eine Seite aus

Die auch ohne JavaScript funktioniert. Und wenn JavaScript da, JavaScript da ist-

Dann kommt Magic.

Dann wird's dazu genutzt, das Ganze etwas attraktiver und schöner zu machen. Und dann geht's eben los, dass die einzelnen Bilder der einzelnen Moderatoren nicht mehr einfach untereinander in so einer Liste liegen, sondern dass sie schön nebeneinander sind. Sind auf einmal anklickbar. Es wird ein großes Bild, unterhalb der Previews dargestellt. Die Texte kommen animiert teilweise hineingeflogen.

Mhm. Das Ganze dann eben wie gesagt, hübsch aufgemacht mit jQuery und ziemlich dynamisch. Mhm. Aber du hast noch mal auf,, in neuen Tab eben deine Webseite aufgerufen, highresolution.info. Du hast noch mal eine Art, eine neue Art, sage ich jetzt mal, präsentiert, wie man Kommentare anzeigen kann oder wie man das dynamisch macht. Erzähl mal ein bisschen was drüber.

Genau, hier ist es auch, auf meiner eigenen Website, in meinem eigenen Blog, www.highresolution.info.

Im Weblog sind die Kommentare mal nicht unterhalb, der Blogbeiträge dargestellt, sondern sie liegen rechts daneben und dort war eigentlich mein Wunsch, diese lange Liste, vor allen Dingen, wenn, wenn man zwanzig, dreißig, vierzig Kommentare mal bekommt, sollte das mal passieren, dieser unwahrscheinliche Fall, dass es man doch noch mal normalerweise, wenn das Ganze untereinander steht, eine endlose Scrollerei ist und der neueste Kommentar steht nun blöderweise auch noch ganz unten immer.

Also man hat immer sehr, sehr, sehr viel zu laufen auf den Seiten. Deswegen hab ich gesagt, wir machen es mal daneben und wir wollen mal nur anzeigen, was als Neuestes auf der Webseite passiert ist, weil zumindest die Leute, die regelmäßig vorbeikommen, das Ganze verfolgen und demzufolge auch nicht immer den Rattenschwanz vorher lesen müssen, der schon da ein paar Stunden oder Tage dasteht.

Mhm, genau.

Und deswegen hab ich hier einfach mit jQuery, das so gemacht, dass ich die vorhandenen Kommentare zunächst durchzähle. Die werden auch an der, bei der Gelegenheit gleich mal entsprechend nummeriert, und im Anschluss werden nur noch die letzten fünf aktuellen Kommentare sichtbar gehalten.

Alle anderen älteren Kommentare werden animiert, ausgeblendet und gleichzeitig wird, um an diese ausgebenden Kommentare wieder ranzukommen, auch per jQuery eine kleine Navigation eingebaut in den Kommentarbereich, um sich die nächsten fünf Kommentare beziehungsweise alle Kommentare, die es bis jetzt gegeben hat, wieder anzeigen zu lassen. Auch hier kann man jederzeit kontrollieren, wie das funktioniert ohne JavaScript. Dort ist nämlich, da passiert einfach gar nichts. Da sieht es aus wie immer.

Alle Kommentare werden untereinander dargestellt. Also auch dort, ist die Seite ganz normal ohne JavaScript benutzbar.

Mhm. Auch so ein typisches Ding auf der Technikwirtseite noch mal: Wenn ihr in den jeweiligen, in der jeweiligen Sendung drin seid, seht ihr über den Kommentaren rechts oben, eine Lupe und klickt ihr da drauf, dann öffnen sich die Kommentare quasi über die gesamte Seite, indem der Hauptcontentbereich eben kleiner gemacht wird. Und, das ist relativ wenig, was da eigentlich passiert, aber, schön beeindruckend in Sachen: Was kann man jetzt mit jQuery machen? Das ist ein schönes Beispiel.

Klickt man da noch mal drauf, wird der Contentbereich aus dem linken, der kommt aus dem Nichts und blendet sich wieder ein und, die Kommentare werden wieder klein gemacht, so ähnlich, wie sie vorher gemacht sind. Also man kann eine ganze Menge machen. Nicht nur Fan der Theorie, dass man jetzt irgendwie nur ein bisschen jQuery macht und, und versucht, die Website aufzupimpen, wo es nicht nötig ist, sondern, wir haben euch jetzt ein paar Beispiele auch eben genannt.

Zuletzt, von Sachen, die richtig praktisch sind, mit denen man eine ganze Menge anstellen kann. Womit man den Bedienkomfort der Webseite ähnlich so wie es eine richtige Applikation, ein richtiges Programm auf dem Mac, Linux oder Windows für euch machen kann, könnt ihr auch mit, einer Webseite machen.

Ja. Und dann hatten wir als Nächstes eigentlich vor, euch eine – am Anfang dachten wir, es wird eine längere Liste –, von Plugins zu empfehlen, die sich in Verbindung mit jQuery auf alle Fälle lohnen. Aber da hatte David vorhin schon gesagt, dass es quasi sehr, sehr schwer ist, hier zu empfehlen, was wirklich sinnvoll ist, weil es einerseits extrem viele Plugins gibt für jQuery und es kommen wirklich täglich neue dazu.

Zum zweiten ist es wirklich so, dass es für sehr, sehr viele Anwendungsfälle nicht nur eine Lösung gibt, sondern mittlerweile Dutzende. Ich hab beispielsweise, hier steht in der Liste noch die Thickbox drin. David hat mich vorhin gerade ergänzt, dass die mittlerweile veraltet ist. Ich hab auch, glaube ich, gestern noch mal gegoogelt. Es gibt mittlerweile bestimmt zehn, jQuery-Varianten, die alle letzten Endes genau-

Genauso funktionieren.

-so einen Lightbox-Klon abbilden. Da hilft's am einfachsten, Google in die Hand zu nehmen und genau das, was man will, an Effekt mal einfach in Google eintragen, das Stichwort jQuery dahinter und man wartet einfach, was man kriegt.

Genau. Also ursprünglich hat man die Sendung ja wirklich vor einer Ewigkeit schon geplant. Das ist echt super, super lange her und hatten, immer mal wieder die, die Liste von den Dingen, die wir uns vor, die wir euch vorstellen wollen in Sachen jQuery. Die wollten wir eben zusammentragen.

In inzwischen gibt es, wie gesagt, so, so viele Plugins, die wir euch A anhand, der Menge nicht empfehlen können und B, kommt es auch explizit auf den Anwendungsfall an, ob ihr genau dieses Plugin A überhaupt braucht und B, ob ihr jetzt nur die Variante A oder Variante B braucht an dieser Stelle. Beziehungsweise ob es nicht eben Methoden gibt, mit, mit jQuery selbst oder mit JavaScript das eben selbst nachzubauen, wie diese Tab-Geschichten jetzt zum Beispiel.

Und gerade noch mal, 'ne Note zurück zur Thickbox. War eins der ersten dynamischen, ich spiel mal ein bisschen mit Bildern rum und, du kannst dich durchklicken und mach das mal an schönen Varianten. Es gibt eins, eine Selektormethode, also ein Selektor, da hat sich das Verhalten von jQuery mit einem Versionssprung eben geändert und Thickbox wurde nie aktualisiert. Das heißt, -

Wenn ihr zum Beispiel immer noch auf die Fickbox steht, obwohl es jetzt genügend Alternativen gibt, die inzwischen auch sogar hübscher sind, ihr wollt aber die Fickbox nutzen, dann ladet euch bitte den Source Code runter von der Fickbox, den nicht komprimierten Code, oder ihr könnt euch auch den komprimierten Code, rausladen. Sucht nach dem At-Zeichen, löscht dieses At-Zeichen und dann funktioniert das auch mit der neuesten jQuery-Version.

Ach ja, alles klar.

Nur so viel am Rande. Du weißt schon genau-

Ich weiß, um was es geht.

Worauf ich hinauswill. Aber im Prinzip sind das, wie gesagt, Sachen, es, zeigt auch wunderbar, dass, ehemals sehr populäre, Plugins für jQuery inzwischen einfach veraltet sind oder es bessere Methoden gibt in, in dem Fall, dass auch jQuery eine ganze Menge Arbeit da abnimmt. Also, an, an, also die Sachen, die wir euch auf jeden Fall mal, die, die großen empfehlen können, wären, jQuery UI. Ist quasi eine User Interface und Ef-Effekt-Framework für jQuery.

Ist auch, hängt auch direkt an jQuery mit dran, wie ihr zum Beispiel Buttons, automatisiert, themen, also gestalten könnt und, sehr schöne Geschichte. UI-Layout.

UI-Layout, kann man bezeichnen. Es gibt bei, der Exit S habe ich das damals das erste Mal gesehen, diese Art und Weise, so, sogenannte Panel-Layouts zu erstellen. Dass man also hier seine Webse-- oder den, den, den Viewport einteilen kann in, in zentralen Bereich und dann davon abtrennt nach Norden, Süden, Osten, Westen, bestimmte sogenannte Panels, die sich entweder einklappen lassen, ausklappen lassen, in der Größe jederzeit verändert werden können.

Oder, oder Fenster, dass die vordefiniert sind und da sind Schließen-Buttons schon drin und alles ist geschossen.

Genau, das ist so ein- Ein Vollseitenlayout quasi für den Viewport. Das, was man üblicherweise eigentlich von Desktop-Applikationen kennt. Die sind vielfach so aufgebaut. Das erzeugt, das UI-Layout-Plugin. Zu jQuery, UI selber noch mal, was der David gerade erwähnt hatte. Das ist also eine Sammlung von ganz vielen, kleinen Dingen. Das geht wirklich los mit der einfachen Drag-and-Drop-Funktionalität. Wir haben, es gibt Selectables, also die Möglichkeit-

Accordions gibt es da auch.

Elemente anzuführen. Es, also es gibt erst mal diese, diese Grundbausteine. Wir können sie gleich noch mal auf der Webseite anzocken, damit wir mal genau, das erzählen, was auch da ist. Ich gehe da noch mal schnell drauf hin. Die Dokumentation, die mittlerweile... Ja.

Da.

Also die Interaktionselemente. Es geht also erst mal mit diesen rohen Bestandteilen los, und zwar Draggables, Droppables, also um Elemente mit der Maus an einer anderen Stelle, legen, schieben zu können und dort fallen zu lassen. Resizables, das die Möglichkeit, Elemente dynamisch, mit dem, durch den Nutzer skalieren zu lassen, größer machen, kleiner machen. Selectables und Sortables.

Selectables, Elemente selektieren, Mehrfachselektionen vorzunehmen und Sortables, das heißt Listen oder einzelne Komponenten beliebig umsortieren.

Genau, ist auch ein gu, schönes Beispiel, in, in was man mit jQuery machen kann. Wenn ihr zum Beispiel eine Tabelle mit ganz, ganz vielen Spalten und Einträgen habt und ihr wollt jetzt, ohne dass ihr auf den Server anfragt und die Webseite neu lädt oder ladet, dass ihr dann nach einer bestimmten Spalte sortiert, ist mit, jQuery und jQuery UI zum Beispiel sehr einfach möglich.

Das ist gerade nicht der Fall.

Nee, mit der Sortierung, stimmt. Aber, -

Also Jetzt sind wir durcheinander.

Entschuldigung, das war ein Anwendungsfall, den ihr mit jQuery auch schön machen könnt. Das hat natürlich mit der Sortierung nichts zu tun.

Also Sortables ist wirklich das dynamisch, dass man quasi, dass diese visuelle Geschichte, dass ich gena-- die ver, die nutzt quasi schon, die Sortables nutzen schon Draggables und Droppables wieder. Das ist dieses, so ein kleines aufbauendes System, sodass ich visuell beispielsweise ein Listenelement anklicken, mit der Maus festhalten, drei Punkte weiter oben wieder fallen lassen kann, und das neu sortiert wird. Also das ist diese Grund-

Danke schön.

Diese Grundfunktionalität, um, wirklich sinnvolle User Interfaces zu bauen. Und darauf setzen dann die sogenannten Widgets, der, von jQuery UI wieder auf und das sind dann jetzt richtig, ein Accordion, ein sehr, sehr schöner mittlerweile schon, Date Picker- Der sich wunderbar einsetzen lässt. Die Dialogbox ist im Moment schon da. Eine Progressbar, ein Slider und, einfache Tabs- Sind vorhanden. Wer YUI kennt, der weiß, dass es da noch viel, viel, viel, viel mehr gibt.

Aber das Schöne an jQuery ist an der Stelle hier eben auch, da hat sich vor allen Dingen in der Version eins sieben sehr viel getan. Dort hängt mittlerweile ein ziemlich durchdachtes, wenn auch nicht, blindlings zu verstehen ist, CSS-Framework dahinter, was diese ganzen Sachen Accordion, Date Picker, Progressbar und so weiter, mit einem Theming hinterlegt, sodass man-

Frei gestaltbar, also mit den Farben, Hintergründen, Formen und so weiter.

Genau. Und dafür bietet selbst, die Webseite von jQuery einen Theme-Generator an. Also das ist ziemlich klasse. Da kann man sich komplett alles einstellen, die Grafiken, die Hintergründe, die Farben.

Passt das an eure Farben und Formen an in der Größe und ihr habt das-

Und lädt sich dann einfach nur ein komplettes Stylesheet runter und bindet das ein und man hat seine komplette Applikation, wenn man sich daran gehalten hat, in einem neuen Layout.

Zum Beispiel auch so schwierige Sachen wie, wie Checkboxen oder eben auch die, die Slider oder Progressbars. Alles, was es da so gibt, das könnt ihr einerseits also richtig einheitlich gestalten, ohne dass der Browser quasi das, die Gestaltung normalerweise vorgibt an dieser Stelle. Das könnt ihr quasi überschreiben.

Mhm. So, was haben wir als Letztes noch?.

Entwicklerressourcen- Haben wir hier noch, für euch. Auch da gibt es unglaublich viele. Ein paar wollen wir vorstellen. Eine Sache noch:, das ist natürlich 'ne jQuery-lastige Sendung jetzt, gewesen oder ist eine jQuery-lastige Sendung, aber es gibt ja noch so andere, JavaScript-Bibliotheken wie zum Beispiel MooTools und da gibt es einen tollen Artikel, den hast du rausgekramt:, jQuery versus MooTools.

Ja. Also es gibt ja immer wieder gelegentlich entweder in Blogs oder in Diskussionen immer wieder Zänkereien: Was ist denn jetzt das Beste? Was ist das Coolste? Und, da hat sich im Mai diesen Jahres Aaron Newton mal, hingesetzt und 'n ziemlich langen Beitrag geschrieben und, sehr, sehr ausführlich auseinandergedröselt, was denn der Sinn und Zweck von jQuery beziehungsweise die f, die Intentionen der Bibliothek und, die Intentionen hinter dem, dem Aufbau von MooTools sind.

Mhm. Du hattest ein tolles Zitat vorhin mal vorgelesen.

Und genau, da, da kommt relativ zeitig nach der Inhaltsangabe kommen zwei Zitate, die da den Sinn dieser beiden Bibliotheken recht gut in jeweils einem Satz zusammenfassen. Und der lautet es für jQuery, ins Deutsche übersetzt: „jQuery ist eine JavaScript-Bibliothek, die das Behandeln oder das, das Ändern, das, Neuerstellen von HTML-Elementen so einfach wie möglich, gestalten soll.

Also DOM-Manipulation.

Ganz genau. Und MooTools hingegen, die Intention ist es, ist, die Objektorientiertheit, der Sprache, leichter anwendbar zu machen und, das objektorientierte Programmieren mit JavaScript.

Das heißt, die, die, Ermöglichung, objektorientierte Programmierung auch mit JavaScript durchzuführen.

Ganz genau.

Das ist der vorrangige Sinn von MooTools. Natürlich hat MooTools ähnlich, wie jQuery auch, Methoden und Funktionen, um das DOM entsprechend anzupassen und zu manipulieren. Selbstverständlich auch, aber es dient vordergründig einem anderen Zweck, und zwar, wie gesagt, die Obje-Objektorientierung in JavaScript, reinzubringen.

Ganz genau. Und damit ist es, es gibt weder ein Gut noch ein Böse, noch ein Besser oder ein Schlechter, sondern, hier ist es eigentlich an, an jedem einzelnen Entwickler, sich das Werkzeug rauszupicken, was ihm am besten liegt und, damit wird er glücklich werden.

Mhm. Ja, für diejenigen, die jetzt noch mal gucken wollen: „Mensch, wie funktioniert denn das mit diesem jQuery?“, beziehungsweise wenn ihr euch, wenn wir euch jetzt neugierig gemacht haben: Learning jQuery, 'ne hervorragende Sammlung, wie ich finde, von, von Artikeln, wie man mit jQuery umgeht.

Genau. Als Blog aufgebaut, wird regelmäßig durch neue Beiträge ergänzt. Lohnt sich also auf alle Fälle, den, RSS-Reader damit zu füttern- -um da regelmäßig up to date zu bleiben. Eine weitere Sache, die vor ein paar Monaten rausgekommen ist, sind die jQuery Tools. Das ist auch was Interessantes, überschrieben oder untertitelt, The Missing UI Library for the Web. Ob's genau das ist, ist noch die Frage.

Es sind, es ist ein großer Titel für viele kleine Sachen, aber diese kleinen Sachen machen sie meiner Ansicht nach sehr, sehr gut. Ich hab da schon mehrfach draufgeguckt. Ich hab's selber noch nie angewendet, muss ich sagen, aber ich bin, ich hab mittlerweile 'ne ganze Menge Ideen, wo ich einzelne Bereiche da hier mal rauspicken werde-... und in eine Applikation einbauen werde, weil ich einfach mal gucken will, wie sie's denn umgesetzt haben.

Es gibt Sachen, die sind wirklich gut. Dann gibt's leider auch noch 'n paar Sachen, die sind, absolut nicht so gut da dran. Wie gesagt, das, obliegt auch immer euch. Sämtliche Ressourcen, sämtliche Tools wie eben auch jQuery Tools stehen euch zur Verfügung und ihr müsst immer selbst entscheiden als Entwickler, ob ihr a, das einsetzen wollt, ob das der Performance schadet der Webseite, beziehungsweise ob das euch dem, dem Ziel schneller voranbringt.

Auf jeden Fall ist das 'ne hervorragende Sammlung, mit der ihr relativ schnell irgendwelche Sachen anstellen wollt. Wahrscheinlich, wenn ihr denn noch mehr on top draufpacken würdet oder wolltet, dann müsst ihr in Schritt zwei das Ding, wie gesagt, selbst mit JavaScript erweitern.

Genau, also das ist auch 'ne Bibliothek. Letzten Endes, es hat, wenn hier schon Bibliothek steht, dann heißt das nix anderes als, -

Sammlung.

-das sind vorgefertigte Plugins, die letzten Endes einzusetzen sind, die hier noch mal bieten, auch wieder, 'ne Variante, um Tabs zu generieren. Allerdings dann auch mal vier verschiedene Varianten, um Tooltips zu erzeugen, 'n Expose-Effekt, also um das, das Herausheben eines einzelnen Elementes aus dem Layout. Das heißt, ein einzelnes Element wird, erhaben gelassen, wird erhält, während alles andere abgedimmt wird.

Dann werden verschiedene Sachen für Overlays, also wo die ganze Seite, wo quasi über die ganze Seite, so 'n Grauschleier typischerweise gelegt wird, gezeigt, wie das funktioniert. Scrollende Elemente, die Einbindung von Flash wird gezeigt oder, oder, oder ist damit verfügbar auf verschiedene Art und Weisen.

Also das einfach mal anschauen und gucken, ob es für die eigene Entwicklung lohnenswert ist, genau auf diese vorgefertigten und relativ umfangreich konfigurierbaren Plugins zu setzen oder ob man sich im Bedarfsfall wirklich, weil man's performanter braucht und damit eben nur auf den eigenen Anwendungsfall hin, programmiert, damit mit, mit der eigenen Entwicklung schneller ist.

Mhm. Ja, also zum Schluss können wir euch nur eine Sache, vielleicht noch mit auf den Weg geben, falls ihr iPhone-Benutzer seid. Es gibt auch dafür 'ne kleine App im App Store. Verlinken wir auch noch mal an dieser Stelle. Ansonsten denke ich, euch haben wir zumindest für die Einführung in jQuery einerseits viel erklären können. Wo ist was in welche Richtung? Wofür ist das ganze Ding da? Wofür kann man's einsetzen?

Ich- Die Sendung sollte den Zweck haben, dass wir euch 'n bisschen neugierig machen auf jQuery. Ladet euch das Ganze einfach mal runter oder testet auf 'ner, auf der Webseite. Selbst in der Dokumentation gibt es viele Buttons, die einfach sagen: „Test" oder „Run it". Ja? Klickt da mal drauf, dann wird irgendwas passieren und anhand der Beispiele werdet ihr relativ schnell erkennen, dass es einfach umzusetzen ist.

Beziehungsweise schaut euch gerne auch mal die Technik und Site oder High Resolution an und guckt: Wie haben wir das umgesetzt? Ist ja frei runterladbare Quelltext und, und schaut einfach euch mal an, wie wir das realisiert haben. Damit kann man 'ne ganze Menge machen. Ja, ansonsten, guckt noch mal die ganzen Links, die wir auf Technikwürze.de gepackt haben. Und, angesichts dessen, dass wir jetzt eigentlich die, die Stundemarke schon längst geknackt haben.

Wir könnten noch sehr viel mehr ins Detail gehen, sehr viel technischer werden. Das bietet diese Sendung nicht mehr, aber vielleicht dann noch mal irgendwann eine jQuery-Total-Sendung, die aufbauend auf dieser noch 'n bisschen mehr erzählt.

Das wollte ich grade ergänzen. Wir haben also wirklich heute versucht, ganz, ganz, einfach zu bleiben und wirklich Fachwörter, soweit es nicht zwingend notwendig ist, weitgehend zu vermeiden. Das eigentlich zu halten, liegt auch daran, dass man wirklich, am Mikrofon es schwer hat, Code zu erklären und bringt das alles also wirklich nichts.

Deswegen wär das ganz spannend und vor allen Dingen über die Kommentare, wenn ihr Fragen habt, wenn ihr Anregungen habt, wie man, was man vielleicht noch, zu jQuery erklären könnte oder was euch noch gefehlt hat, schreibt's in die Kommentare.

Bitte.

Gebt uns Feedback, was, wie noch vielleicht im Unklaren geblieben ist. Da gibt's unter Garantie, Möglichkeiten, in weiteren Sendungen das zu erklären.

Mhm. Noch eine Sache, die fast nicht stattfinden wird: Ich hatte vor einigen Sendungen mal angekündigt, jetzt fernab von jQuery, dass wir bei zur 150. Sendung – das wäre ja in drei Folgen so weit, kleines Jubiläum – dass wir da The Best Of von Technikwürze machen wollten, die lustigsten, kuriosesten oder die größten Lacher in Technikwürze. Ihr habt sie ja inzwischen alle gehört, diese Folgen.

Uns erreichen auch Kommentare von Hörern, die jetzt, just in letzter Zeit auch jetzt noch mal alle alten Folgen durchgehört haben. Falls euch da was auffällt, notiert euch doch bitte die Folge. Zum Beispiel Technikwürze 51, zu Minute neun oder was auch immer. Das war ganz witzig. Schickt uns 'ne E-Mail an echo@Technikwürze.de oder packt es in die Kommentare. Ich glaube nicht mehr, dass wir das jetzt schaffen würden zur Technikwürze 150. Dennoch, diese Folge steht aus.

Da werden wir auch garantiert etwas verlosen, dann zu dieser Sendung, sodass ihr auf jeden Fall, auch was davon haben sollt, dass ihr die Sendung durchhört. Ich hatte richtig Bock auf diese Sendung, kann nur leider jetzt ad hoc nicht mal 150 Sendungen durchhören. Deswegen, falls euch was auffällt, schreibt uns bitte. Wir stellen dann 'ne ganz tolle Sendung nun zusammen, stellen die auf Technikwürze online und, wird 'n schönes Ding.

Schreibt uns ansonsten, wie gesagt, auch zu dieser Sendung auf echo@Technikwürze.de. Die Links zur Sendung, wie gesagt, auch noch mal auf unserer Webseite und, ganz herzlichen Dank an, an, Dirk.

Ganz genau.

Nein, ich wollte dich oder dir sagen, aber ich bin heute schon völlig so aus dem Rahmen.

Aber du hast nicht Jens gesagt.

Nein, nein, nein, das ist schon richtig. Ich hab's ja... Genau, das war nämlich der, der Kollege hier, den ich immer durcheinandergebracht habe, weil das ist mir heute noch mal klar geworden. Ich hab noch mal drüber nachgedacht, warum ich denn immer Jens sage, obwohl er Dirk heißt, weil sein Nachname fängt ja an mit Je. Jesse. Ne? Und da denke ich immer: Je, das muss Je... Nein, das ist der Dirk. Ja, aber das passt schon. Nee, auf jeden Fall schön, dass du dabei warst. Persönlich direkt vor Ort.

Ich denke, das hat's 'n bisschen flüssiger gemacht. Ist 'ne richtige Talksendung geworden, muss auch mal wieder sein.

Ist ganz angenehm, ohne dass, ohne, ohne-

Ohne die Latenz, ja.

Genau, man muss immer warten, was kommt. Man hat keinen Kopfhörer auf, man kann hier gemütlich am Browser nebenbei klicken. Er sitzt daneben, David. Find ich gut.

Und ihr habt durch meinen kleinen, durch meine zwei, drei Stolper in der Sendung auch gemerkt, dass es inzwischen relativ fortgeschritten ist in der Zeit. Liegt auch daran, kurz im Hintergrund:, wir haben ja im nächsten Monat beide zusammen, bei Best of Accessibility bei der Veranstaltung in Düsseldorf einen kleinen Vortrag zu halten. Da-deswegen bist du heute da gewesen.

Ganz genau.

Wir haben das alles so vorbereitet, müssen noch 'n bisschen Nacharbeit leisten, aber dafür waren wir heute hier und haben, relativ viel und hart gearbeitet. Und jetzt wird so langsam, der Zeitpunkt, wo sich unsere Au..., wo wir 'n bisschen ruhiger werden müssen und wo wir jetzt mal 'ne Blu-ray einlegen und lassen den Abend noch mal schön entspannt...

Genau, der Kopf rollt 'n paar Murmeln, die Zunge wird schwer jetzt von Quatsch.

Alles klar, dann wollen wir euch auch nicht länger aufhalten. Viel Spaß noch in dieser Woche. Wir hoffen, wir hören euch nächste Woche wieder. Bis dahin, bye bye.

Tschüss.

Alles klar, tschüss.

Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de. Für ein besseres Web. Weitere Informationen und die Links zur Sendung auf Technikwürze.de.

Dass ihr denn nach einer bestimmten Spalte sortiert, ist mit, jQuery und jQuery UI zum Beispiel sehr einfach möglich.

Das ist grade nicht der Fall.

Nee, mit der Sortierung, stimmt. Aber, -

Also...