Dieser Beitrag gibt einen Überblick über aus heutiger Sicht essenzielle Bibliotheken, mit denen das Frontend moderner Websites typischerweise realisiert werden. Diese sind weitgehend in Zikula enthalten, brauchen also nicht mehr dazu installiert zu werden.
Prototype & Script.aculo.us
Prototype ist eine JS-Bibliothek, die sich zum Ziel gesetzt hat, die JavaScript-Entwicklung zu vereinfachen. Script.aculo.us baut auf Prototype auf und bietet zusätzliche Effekte, Funktionen und Animationen. Aus Gründen der Abwärtskompatibilität sind beide Bibliotheken noch in Zikula 1.3.x enthalten, aus heutiger Sicht sind sie allerdings als obsolet zu betrachten. Ab Zikula 1.4.0 sind sie daher nicht mehr im System verfügbar, statt dessen wird nun primär auf jQuery gesetzt.
jQuery
JQuery ist ebenfalls eine Bibliothek, die die Realisierung client-seitiger Skripte vereinfacht. Mittlerweile gibt es ein riesiges Ökosystem an verfügbaren jQuery-Plugins für die unterschiedlichsten Effekte, Animationen und Zusatzfunktionen.
Damit es keine Konflikte mit einem eventuell ebenfalls geladenen Prototype gibt, wird empfohlen, Skript-Blöcke mit jQuery-Aufrufen wie folgt aufzubauen:
|
|
Weitere Informationen zu jQuery finden sich auf der Homepage unter http://jquery.com/ - die API-Referenz ist unter http://api.jquery.com/ erreichbar.
jQuery UI
Die Bibliothek jQuery UI bietet eine Reihe von häufig nützlichen Effekten und Komponenten, um beispielsweise ansehnliche Slider, Fortschrittsbalken, Menüs, Akkordeons oder Tabs umzusetzen. Einen Eindruck liefern die Demos unter http://jqueryui.com/ - auch hierzu gibt es zusätzlich eine API-Referenz unter http://api.jqueryui.com/
jQuery UI ist zwar noch in Zikula enthalten, jedoch mittlerweile weitgehend durch Bootstrap (siehe folgenden Abschnitt) abgelöst worden. Ab und zu kann es vorkommen, dass jQuery UI dennoch weiter zum Einsatz kommt; beispielsweise bietet Bootstrap keinen adäquaten Ersatz zur Realisierung von Drag n Drop basierten Funktionalitäten.
Bootstrap
Bootstrap ist aus Twitter hervorgegangen und mittlerweile der De-Facto Standard zum Aufbau von responsiven Layouts. Es eignet sich als perfekte Grundlage zum Aufbau eines Layouts und beinhaltet eine ganze Reihe von CSS-Hilfsmitteln, wie sinnvolle Standardstile zur Vereinheitlichung unterschiedlicher Browser-Voreinstellungen, ein Grid-System, Formatierungen für häufig benötigte Elemente sowie einige responsive Hilfsmittel. Ferner beinhaltet es auch mehrere JavaScript-Komponenten, mit denen sich einfach Navigationsmenüs, Tabs, Tooltips, Karussels und andere Lösungen bewerkstelligen lassen. Der Vorteil hierbei liegt darin, dass diese Komponenten alle ineinander greifen und auch kombiniert oder verschachtelt werden können. Eine deutschsprachige Dokumentation befindet sich unter: http://holdirbootstrap.de/
Aktuell ist Bootstrap in der Version 3.3.5 verfügbar. In Zikula 1.3.x ist es noch nicht enthalten und muß daher händisch dazu gepackt werden. Dafür eignet sich ein eigener Ordner, z. B. additions/. Die Zikula-Versionsreihe 1.4.x hat das Kernsystem komplett auf Bootstrap umgestellt, so dass nun auch der Administrationsbereich komplett responsiv dargestellt wird.
Ab der Hauptversion 3.x wird Zikula übrigens auf Bootstrap 4 aufsetzen, dessen Alpha-Version vor kurzem erschienen ist.
Font Awesome
Font Awesome ist eine Schriftart, die eine Vielzahl von Icons vektorbasiert zur Verfügung stellt. Im Gegensatz zu Bildern können diese Icons verlustfrei skaliert und sogar per CSS formatiert werden. Das heißt, es ist beispielsweise möglich, das ein Icon in einem Link beim Überfahren mit der Maus zusammen mit dem Linktext die Farbe wechselt. Weitere Informationen zu Font Awesome sind der Homepage unter https://fontawesome.com zu entnehmen.