Ähnlich wie die Verwendung von Mootools in Joomla, verwendet beispielsweise Wordpress die Bibliothek JQuery. JQuery vereinfacht analog Mootools die Anwendung von JavaScript, was sich insbesondere auf die so beliebten Web 2.0 Effekte auswirkt (Info: wer sich für die genauen Unterschiede von Mootools und JQuery interessiert, der findet hier weitere Hintergründe).

Passend eingesetzt ergeben sich nicht nur auf modernen Seiten sehr nützliche und praktische Anwendungen, die dem Nutzer die Anwendung einer Seite (oder Webanwendung) erleichtert, die Bedienung vereinfacht oder die Usability erhöht.

Nachfolgend findet Ihr eine kleine Auswahl an JQuery Scripte und Tutorials, die sich gut an viele Designs anpassen lassen.

Sliding Panel

Das Script ist eigentlich für ein Login-Panel gedacht, das vom oberen Bildschirmrand ein- und ausfadet. Es kann leicht jede andere Art von Content aufnehmen und so ein netter Effekt auf der Seite werden.

Link: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/

Mega Drop Down Menu

Ist ein sehr schön gemachtes Plugin für ein Drop Down Menü, das ohne Probleme bei entsprechender Gestaltung auch eine größere Anzahl an Links aufnehmen kann.

Link: http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

Beim Smashing Magazine gibt es ein Cheat-Sheet für HTML 5 zum Download. Da einige Browser ja bereits die neuen Tags (oder zumindest einen Teil dieser) unterstützen und ein offizieller Releasetermin nirgendwo zufinden ist (ich hab zumindest keinen gefunden). Kann jeder die spezifizierten Tags auf eigene Gefahr hin einsetzen.

Schön auf einen Blick zu sehen, der HTML-Tag, eine kurze Info dazu, die HTML-Version, seit wann der Tag unterstützt wird und eine Übersicht der möglichen Attribute.

Nett; das Cheat-Sheet ist für alle Designer auf jeden Fall einen Blick wert.

Quelle: http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

In Zeiten von Twitter und Co. gibt es auch immer mehr Anbieter von Services, die es ermöglichen eigene Url’s in eine verkürzte Version umzuwandeln. Das ist besonders dann von Vorteil, wenn sehr lange Url’s durch Zeilenumbrüche zerstört werden oder das Layout sprengen oder wenn schlicht und ergreifend nicht genug Platz ist um lange Url’s weiterzugeben (siehe Twitter oder die gute alte SMS).

Insofern gibt es immer mehr Anwendungsbereiche, wo kurze Url’s durchaus Sinn machen (gut, manchmal mehr, manchmal weniger). Da es aber, insbesondere aus eigenen Anwendungen heraus, umständlich wäre manuell die Seiten der Dienste aufzurufen, die Url per Copy & Paste zu übertragen, bieten einige auch die Möglichkeit an über eine API oder zumindest eine Art Url-Schnittstelle auf den Dienst zuzugreifen und die kurze Url zurückzuliefern.

Nachfolgend mal eine Q&D Möglichkeit um per Curl in PHP auf den Dienst von Tinyurl zuzugreifen.

function fetchShortUrl($url) {
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch,CURLOPT_URL, 'http://tinyurl.com/api-create.php?url='.$url);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
    $data = curl_exec($ch);
    curl_close($ch);
}

Der Aufruf der Funktion erfolgt dann:

$short_url = fetchShortUrl('http://www.ast-blog.de/2009/04/24/services-fr-kurze-urlsservices-fr-kurze-urls/');

Tinyurl liefert in diesem Fall dann die Url http://tinyurl.com/cd655a zurück.

Die nachfolgend aufgeführten Dienste funktionieren in ähnlicher Art und Weise. In Klammern stehen die Url’s um von dort die kurzen Adressen zurückzuliefern. Wenn eine der folgenden Dienste in oben stehender Funktion verwendet werden soll, muss nur die Url (also das: ‘http://tinyurl.com/api-create.php?url=’) durch die entsprechenden Werte des anderen Dienstes ausgetauscht werden.

• is.gd (Url: http://is.gd/api.php?longurl=)
• Rims (Url: http://ri.ms/api-create.php?url=)
• Tinyarro (Url: http://tinyarro.ws/api-create.php?url=)

Das funktioniert natürlich auch mit vielen anderen Diensten, dazu muss lediglich die Url angepasst werden. Aber Achtung, manche Dienste geben die Daten als XML oder JSON zurück, dann muss hier mit dem Response natürlich weitergearbeitet werden.

Und zwar eine Menge davon. Ganze 70 Scripts gibt’s beim Smashing Magazine zu bewundern. Darunter alte bekannte Scripte, die sich fast in jeder Scriptübersicht wieder finden (Beispiel Fancy Upload, was ich Euch auch hier schon mal präsentiert habe), aber auch einige nennenswerte Neuerscheinungen, z. B. einige sehr schicke DatePicker oder das gut gelungen Upload-Form der ExtJS.

Im Netz gibt es bereits Tonnen von solchen Übersichten. Allerdings fällt momentan auf, dass sich im Endeffekt drei bzw. vier Bibliotheken um die “Krone” streiten. Zum einen sind da JQuery und Mootools, aber auch Prototype und YUI. Wer sich in diesem Zusammenhang beispielsweise mit Joomla beschäftigt, dem fällt auf, dass sich der Kern von Joomla mit MooTools beschäftigt, sich aber einige Erweiterungen an anderen Bibliotheken vergnügen.

Passt der Designer oder eben derjenige, der sich aus den umfangreichen Erweiterungsmöglichkeiten von Joomla die benötigten Module zusammenklickt, an dieser Stelle nicht wirklich auf, kann es durchaus passieren, dass sich verschiedene Scripte in die Wege kommen. Da hier oft nicht die minified Versions in den Erweiterungen verwendet werden, sondern die oft noch großen Entwicklungspakete (wobei ich gar nicht weiß, ob es von Prototype eine minified Version gibt), wird die Seite schnell richtig groß. Im DSL-Zeitalter ist das Laden der Seite nicht mehr das Problem, die Geschwindigkeit mit der allerdings die JS-Engine der Browser den JavaScript-Code verarbeiten aber schon.

Insofern achte ich vermehrt darauf, dass verwendete Erweiterungen (und da war Joomla nur ein Beispiel, das Gleiche gilt für Wordpress, Drupal und viele andere CMS oder Blog-Systeme für die viele Erweiterungen angeboten werden) immer gut zusammenpassen. Manchmal ergeben sich so durchaus aus Sparpotenziale im Code, die man nutzen kann und sollte.

Quelle: 70 New, Useful AJAX And JavaScript Techniques
Quelle: Mootools-Sammlung hier im astBlog