Webaholic - Blog


JQuery - Plugintipps

24. Januar 2007

jQuery ist eines der besseren JavaFrameworks - wie auch prototype/scriptaculous, YUI und MooTools.
jQuery ist mit seinen 19kb 20kb genau wie MooTools mit 17kb (komplett ohne plugins/addons) im Vergleich zu Prototype und YUI eher ein Leichtgewicht.
Mit MooTools habe ich selbst noch keine größeren Erfahrungen - ich halte mich momentan hauptsächlich an jQuery, womit ich bisher auch […]

jQuery ist eines der besseren JavaFrameworks - wie auch prototype/scriptaculous, YUI und MooTools.

jQuery ist mit seinen 19kb 20kb genau wie MooTools mit 17kb (komplett ohne plugins/addons) im Vergleich zu Prototype und YUI eher ein Leichtgewicht.
Mit MooTools habe ich selbst noch keine größeren Erfahrungen - ich halte mich momentan hauptsächlich an jQuery, womit ich bisher auch recht gut gefahren bin.

Aber auch mit einem Framework gibt es immernoch Problemstellungen, die immer wieder kommen und die schon des öfteren gelöst wurden. Das sind dann sogenannte Plugins, die auf dem Framework aufbauen und teilweise nur eingebunden werden müssen, teilweise aber auch aufgerufen werden wollen.

Eine kleine Sammlung mit kurzen Erklärungen möchte ich hier kurz vorstellen, auch wenn es bereits eine Auflistung auf jquery.com gibt. Ich werde auch überall grob auf die Größe der Plugins eingehen, immerhin hat noch nicht jeder DSL.

Die Reihenfolge ist eher zufällig - sie sagt weder etwas über die Qualität noch über eine Subjektive Wertung von mit aus - ich werde die Liste auch bei Bedarf erweitern, dabei werde ich neue Einträge aber vermutlich eher an den Schluss hängen.

Nachtrag:

Danke Jörn, ich nehme das gleich mal mit auf:
Die Größen der Plugins sind die Größen, wie man sie von der Webseite als “Standardpacket” herrunterladen kann. Platz- und Trafficärmer ist es, die Dinge, die man benutzt zusammen zu fügen und dann zu packen (Dean Edwards Packer eignet sich dafür bestens). Das hat außerdem den Vorteil, dass sich die Anzahl der benötigten Requests verringert. Wer sich das also zutraut (und ich denke, wer schon mit hoch gestochenen JS-Effekten aufwarten will, der sollte sich wenigstens das trauen) der sollte sich unter Umständen (es gibt auch Gründe, die dagegen sprechen können) die Mühe machen und 5 Minuten in das richtige Zusammenstellen seiner Bibliothek stecken.

Interface
Eine Art zusatzbibliothek für User Interfaces - manches lässt sich auch mit anderen Plugins oder mit wenig Code durch “natives” jQuery lösen, anderes ist komplizierter. Aufgeteilt ist dieses PluginFramework in ein Haupt- und mehrere Unterscripte die Größe lässt aber einen Vorteil der Nutzung von jQuery verblassen. (76kb + max. 101kb für alle Unterscripts)
Chili (Code HIghLIghter)
Ein Codeviewer. Leichtgewichtig und gut zu handhaben. JS, PHP, SQL kommen von haus aus mit, alle anderen Sprachen lassen sich nachrüsten (2,7kb + Sprachabhängige Dateien)
DateSelector
Wer kennt sie nicht, die Formularfelder mit dem Datum drin. Schön, dass man auf einem Kalender nachschlagen und das Datum per Klick einbinden kann, wenn der Webmaster dieses Plugin nutzt. Der Trafficverbrauch hällt sich in Grenzen. (6kb + CSS)
Thickbox
Bei einem Klick soll sich a) ein Bild, b) eine Bildergallerie (Bild + vor und zurück Knopf), c) eine externe HTML-Seite per iFrame, d) Teile der aktuellen Seite, e) eine per AJAX zu ladende Seite/Teile daraus in einer Box in der Mitte angezeigt werden, der Hintergrund soll abgedunkelt werden. Nach Möglichkeit soll sich das Bild dem zur Verfügung stehenden Raum anpassen. Hierfür gibt es die Thickbox - die ihren Namen allerdings nur in Bezug auf die Funktionsvielfalt nicht aber auf die Größe verdient (12kb inklusive CSS)
JTicker
Ein Newsticker - ein relativ kleiner Newsticker(3kb)
JReflection
Wer hat sie noch nicht gesehen? Webseiten bei denen sich irgendwas spiegelt - zumeist Bilder. Teilweise spiegelt sich das Bild, teilweise ist die Spiegelung teil des Bildes. Letzteres kann JReflections nicht leisten, es erzeugt ein <canvas> in dem es die Spiegelung nach Vorgabe von Höhe und Transparenz erzeugt. Das Bild und die Reflektion werden dann in einem div zusammengefasst. Nicht groß - macht aber teilweise großen Eindruck.(5kb)
Tooltip
Was soll ich sagen - ein Tooltip eben. Auch mit Interface möglich, aber der hier ist schöner und kleiner.(3kb)
xWin - Floating Windows
Verschiebbare, (beschränkt) vergrößerbare, virtuelle Fenster. Wer die braucht kann auf dieses Plugin zurückgreifen.Die Größe hällt sich in Grenzen (21 kb + CSS und Bilder)
jScrollPane
Scrollbalken nach eigenem Gusto - das ist immer so ein Accessability Problem. Meißt lassen sie sich nicht so einfach mit dem Scrollrad bedienen… das Problem kann man aber als gelöst betrachten - mit einer akzeptablen Größe hilft uns dieses Plugin weiter.(25kb)
Table Navigation
Sind wir mal ehrlich - wie oft muss man sich in Tabellen mit den Pfeiltasten bewegen? Und noch dazu nur nach oben und unten? Nicht oft, aber wenn es Sinn macht, ist es doch angenehm es zu können - oder? Der Download des Scriptes wird den User jedenfalls nicht umbringen(15kb)
jdMenu
Ein Menü mit angeblich unbegrenzten Ausklappmöglichkeiten. Basierend auf der ungeordneten Liste. Bedienbar ist es und zu groß ist es auch nicht. Ich mag JS Menüs aber nicht besonders - sie sind für nicht JS Besucher eine Quahl - wenn man das Problem nicht ausschließen oder umgehen kann.(3kb + css)
Cookies für jQuery
Cookies mit JS setzen - also ich weiß nicht wie es geht, musste es auch bisher nie. Aber wenn man das mal braucht, kann man auch einfach auf dieses Plugin zurückgreifen, dass Cookies setzen, verändern und löschen kann. Die Größe bringt den Benutzer bestimmt nicht um(4kb).
Corner Adorner
Der Corner Adorner ist ein Plugin, dass die unterschiedlichsten Kanteneffekte für Webseiten erzeugen kann. Es ist nicht besonders groß(4kb).
Treeview
Wat is en Treeview - da stellen wir uns ganz dumm und sagen det is en Boom wo de Äste nur wachse wenn de drufklickst - un wat passiert wenn de Äste wachse, das sehen mir später…
Was ich damit sagen will: Wer ein Treeview braucht ist mit dem Treeview von Jörn sehr gut bedient - das Script benötigt gepackt nur 2kb - dazu kommen natürlich noch die Bilder - aber die schlagen auch nur geringfügig zu Buche…

Übersichtseite in Blogs

23. Januar 2007

Blogs haben ja die mehr oder weniger schöne Angewohnheit keine
passable Titelübersicht zu haben. Mich stört das insbesondere bei solchen
Blogs, die eigentlich eine Sammlung an Tutorials sind. Zum Beispiel http://www.learningjquery.com/
Dass es nicht besonders leicht ist, dabei herauszufinden, zu
welchen Themen es nun wirklich Tutorials gibt, fand ich nicht besonders schön –
aber an Fremdblogs kann man ja kaum […]

Blogs haben ja die mehr oder weniger schöne Angewohnheit keine
passable Titelübersicht zu haben. Mich stört das insbesondere bei solchen
Blogs, die eigentlich eine Sammlung an Tutorials sind. Zum Beispiel http://www.learningjquery.com/

Dass es nicht besonders leicht ist, dabei herauszufinden, zu
welchen Themen es nun wirklich Tutorials gibt, fand ich nicht besonders schön –
aber an Fremdblogs kann man ja kaum was ändern.

Aber das gleiche Problem gibt es ja auch beim höchst eigenen
Blog – was sicherlich durch einen Feedreader zu beheben ist, sofern nicht die
alten Beiträge auch gefunden werden sollen.

Wer sich für eine Kategorie entscheidet, findet dort alle
Posts – in voller Länge oder aber in der Kurzfassung.

Aber eine Liste an Überschriften gibt es nicht.

Mit JavaScript kann man seinen Besuchern so etwas aber auf
unterschiedliche Art bieten. Man könnte entweder alle

<h2> Tag Inhalte oben
als Navigation erzeugen und vor die <h2>s jeweils einen Anker setzen.

Aber das währe ja total statisch und rechtfertigt den
JS-Einsatz eigentlich nicht. Vor allem währe das ja nicht Web 2.0… also was
tun?

Jeder Post könnte einen Knopf bekommen, mit dem man den Text
anzeigen oder wieder verstecken kann.

Ich habe mir ein kleines Script geschrieben, dass auf jQuery
aufsetzt – Vorraussetzung ist, dass der Posttext selbst in einem seperaten Div
ist, getrennt von der Überschrift und anderen Infos, die angezeigt werden sollen – aber das lässt sich recht leicht über das Theme realisieren und braucht
hier vermutlich nicht weiter erklärt werden.

Das Script:

[syntax,1.txt,javascript]

Bildergalerien

11. Januar 2007

ja die gute alte Galerie, die einem ein Desktop-Tool erzeugt und die man dann - möglichst per zusätzlichem FTP-Tool - hoch geladen hat ist out. Total altmodisch, gerade mal Web 0.9 möchte man fast sagen.
Dass es an alternavien mangelt, kann man nicht gerade behaupten. Eine kleine Liste von 4 Tools stellt der Praegnanz-Blog unter dem […]

ja die gute alte Galerie, die einem ein Desktop-Tool erzeugt und die man dann - möglichst per zusätzlichem FTP-Tool - hoch geladen hat ist out. Total altmodisch, gerade mal Web 0.9 möchte man fast sagen.

Dass es an alternavien mangelt, kann man nicht gerade behaupten. Eine kleine Liste von 4 Tools stellt der Praegnanz-Blog unter dem Titel “Bildergalerien für die eigene Website” vor.

Dort werden 2 Flash und 2 JavaScript Varianten vorgestellt.
Eine der Fashvarianten ist kostenpflichtig, der rest kostet nichts. Je eins der Flash und JS Tools läuft auf dem eigenen Server.

Die Liste ist klein und fein, ich möchte sie aber noch ein wenig erweitern:

Exposé - Kostenlos, Lokal, Flash. Desktop und PHP Manager vorhanden
Coppermine Gallery - Kostenloses All-In-One-Tool: Versteht Templates, Kommentare, UserUpload (wenn gewünscht), Passwortgeschütze Gallerien, Multimedia, Slideshow, Tumbnails uvm. PHP basiert, ohne großartige JS/Flash Spielereien.

Nachtrag: Ich habe mir natürlich die Gallery2 jetzt auch angesehen. Besten Dank für den Tip, die ist soweit ich es bisher beurteilen kann sehr angenehm - allerdings habe ich mir jetzt erstmal nur die Stand-Alone angesehen.

Der Installer lässt jedenfalls kaum wünsche offen, übersichtlich, benutzerfreundlich - es wurde eigentlich an alles gedacht.