Das heutige Thema hebt sich etwas von den bisherigen Themen ab, da es sich nicht direkt mit PHP und sprachspezifischen Problemstellungen beschäftigt. Viel mehr geht es um ein anderes (generelles) Problem – Design. Viele Webanwendungen funktionieren zwar einwandfrei und tun auch was sie sollen, allerdings lässt der Erfolg (damit meine ich den Kunden- oder Nutzerzuspruch) zu wünschen übrig. Eine mögliche Begründung dafür liegt sicher im Design.
Funktionalität und Zuverlässigkeit sind zwar sehr wichtig (sicherlich unter den wichtigsten Aspekten überhaupt), aber eben doch nicht alles – eine Webanwendung muss die Nutzer auch ansprechen! Hierfür gibt es diverse Ansätze, wie beispielsweise die Verwendung von hübschen Templates (welche leider häufig viel Geld kosten). Man könnte sich natürlich auch mal selbst mit Design auseinandersetzen und etwas neues bauen (was schnell sehr aufwändig werden kann, da man sich unter anderem in komplexe Grafikprogramme einarbeiten muss). Eine dritte Variante wäre die Verwendung von vorgefertigten Layout-Komponenten – und genau soetwas liefert das jQuery User Interface.
Es handelt sich dabei um eine Art Oberflächen-Framework und beinhaltet diverse Interaktionselemente, wie Buttons, Menüs, Tabs, Icons und vieles mehr. Interessant ist das meines Erachtens vorallem aus vier Gründen:
- Kompatibel mit allen gängigen Browsern (IE6+, Firefox 3+, Safari 3.1+, Opera 9.6+, Chrome).
- Die angebotenen Elemente kommen jedem Benutzer sofort vertraut vor.
- Alle Elemente sind intuitiv bedienbar.
- Alle Elemente können komplett an die Farbgebung der Webseite angepasst werden.
Zudem sehen die Elemente einfach “smart” aus. Das Framework basiert auf jQuery (JS) und CSS, sodass alles auch im Nachhinein mit wenig Aufwand angepasst werden kann. Für die initale Gestaltung existiert ein ThemeRoller, in welchem man einfach ein paar Farben und Konfigurationen einträgt – das Ergebnis kann dann direkt als Komplettpaket heruntergeladen werden. Weiterhin existiert ein umfangreiches Online-Manual und viele Demos, sodass auch die Einbindung kein Problem darstellen sollte.
Nach dem Download werden einfach folgende 3 Zeilen in den HTML-Header eintragen.
<link type="text/css" href="css/themename/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
Nun kann es losgehen. Die Funktionsweise für jedes einzelne Element kann im Online-Manual nachvollzogen und kinderleicht in die Anwendung integriert werden. Hier ein kleines Beispiel, wie ein Datepicker mit einem Input-Feld verbunden werden kann:
<html>
<head>
...
<script>
$('#date').datepicker();
</script>
</head>
<body>
<input type="text" name="date" id="date" />
</body>
</html>
Es kann allerdings vorkommen, dass es zu zu Konflikten mit anderen eingebundenen Komponenten kommt. In diesem Fall sollte man einfach auf jQuery.noConflict() zurückgreifen. Insgesamt lässt sich festhalten, dass hiermit auf einfachste Art und Weise jede beliebige Webanwendung aufgewertet werden kann und dadurch erheblich ansprechender wirkt. An dieser Stelle möchte ich auch gleich auf die greybox hinweisen, mit welcher ebenso einfach in-Site Windows und Galerien realisiert werden können.
Ich persönlich bin kein Fan von jQueryUI, weil es unglaublich groß ist und voll gepackt mit Features, die ich niemals nutzen werde. Die Bearbeitung ist aufwendiger als wenn ich ganz gezielt auf ein Projekt arbeite. Ausserdem nervt es mich, wenn es wie „von der Stange“ aussieht. 🙂
Was ich aber z. B. gerne nutze ist jQuery Tools (http://flowplayer.org/tools/index.html), weil es klein und wesentlich flexibler ist. Es unterstützt den Entwickler mit ganz vielen fertigen Funktionen, ohne eine feste Struktur vorzugeben. Das gefällt mir persönlich besser.
Das Argument, das du ansprichst, ist natürlich absolut korrekt. Allerdings kann man die Elemente auch einzeln einbinden, sodass nur soviel Code geladen wird, wie man wirklich braucht.
Dem “von der Stange” würde ich so allerdings nicht ganz zustimmen. Wie ich schon im Artikel geschrieben habe, halte ich die Elemente für Standardkonform und intuitiv bedienbar. Da es sich auch lediglich um Interaktions-Elemente handelt wird der Seitenaufbau nicht beeinflusst und es ist trotzdem möglich die Anwendungen mit einigen Ideen und Kreativität zu gestalten.
Die jQuery Tools habe ich mir bisher noch nicht angeschaut, werde ich jetzt aber auf jeden Fall mal tun 😉
Allerdings kann man die Elemente auch einzeln einbinden, sodass nur soviel Code geladen wird, wie man wirklich braucht.
Ja, das ist natürlich richtig, aber ich meinte auch etwas Anderes. Nehmen wir mal das Accordion Plugin. Vollgepackt mit Funktionen und 3 kb (min/gzip) groß plus jQuery UI Core. Ein ganz einfaches Akkordeon in jQuery kriegt man mit 3 Zeilen hin oder mit nem modernem Browser auch nur mit CSS.
Wie ich schon im Artikel geschrieben habe, halte ich die Elemente für Standardkonform und intuitiv bedienbar.
Ja, das sind sie, aber man sieht auch sofort, dass es jQuery UI ist, z. B. beim dialog oder beim datepicker, weil der Style trotz der Farboptionen sehr festgelegt ist. Ich sehe das zumindest sofort. Das ist wie bei boilerplate. Ist der markierte Text rosa, weiß man, wo es her kommt. 😉
Ich persönlich habe auch nichts gegen die jQuery UI Benutzung, kann jeder benutzen, aber ich persönlich bin kein Fan (vielleicht auch, weil ich relativ flüssig mit Photoshop umgehe).
phew, ich muss da Oliver in Teilen rechtgeben. Sicher ist jquery UI ne nette Sache, aber es ist im Grunde wie mit den meisten Javascript – Spielereien: Die Leute laden sich ohne nachzudenken 300KB weitgehend unnötigen Seitenballast und 35 HTTP Requests für ein bisschen glossy und shiny auf die Seite, ohne sich dessen bewusst zu sein.
Entering as Susan Ricci—Susan, I'm in, if there's still an availability! Might be just the kind of thing I need, so thanks for the 'invite'! I'm interested in doing a guest blog with giveaways. The only thing is that I'm on vaca from Monday the 26th til December 3. After that, I'm good to go! (Our vaca is a Merry Xmas to us!) Talk to you tomorrow! Sue Ricci
Campusbookrentals is a credible site and often has the best rental prices. However always do a . For this particular book:you will see that you can rent it for $28.87 at TextbooksRus.com and buy it (used) for $32.34 Chegg (less that the rental price atCampusbookrentals).
Ich hatte lange Zeit eine ähnliche UI benutzt: ExtJS. Mit der Zeit wurde es mir aber viel zu unflexibel und umständlich.
Im Vergleich zu ExtJS ist jQueryUI allerdings Spielzeug.