Get the MOST

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 ver­fü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, Anima­tionen und Zusatzfunktionen.

Damit es keine Konflikte mit einem eventuell ebenfalls geladenen Prototype gibt, wird empfohlen, Skript-Blöcke mit jQuery-Aufrufen wie folgt aufzubauen:

1
2
3
4
5
6
7

<script>
    (function($) {
        $(document.ready(function() {
            // your code
        });
    })(jQuery)
</script>

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 beispiels­weise 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 respon­siven 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 Naviga­tionsmenü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 Kern­system 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 Gegen­satz 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 Link­text die Farbe wechselt. Weitere Informationen zu Font Awesome sind der Homepage unter https://fontawesome.com zu entnehmen.