Frontend-Technologien in Zikula

in  Basics  , , ,

Frontend-Technologien in Zikula

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:

<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.

Weitere Beiträge in Kategorie Basics

Prägnante und strukturierte Stylesheets mit SCSS
- Auch wenn es für einige Leser ein alter Hut ist, so gibt es dennoch sicherlich andere, die noch keine Erfahrungen mit Less oder Sass haben. Daher sei einmal das sehr leicht zu erlernende SCSS (Sassy …
Kategorien in Zikula - weit mehr als nur Themen
- Der Zikula Core enthält eine zentrale Verwaltung für Kategorien, mit denen man vielfältige Lösungen umsetzen kann. Die häufigste Verwendung von Kategorien ist sicherlich eine thematische Zuordnung von …
Probleme mit Error Tracking proaktiv erkennen
- Sobald ein Programm oder eine Internetseite erst einmal produktiv verwendet wird, stellt sich heraus, ob alle Eventualitäten bedacht sind oder ob doch etwas nicht berücksichtigt worden ist. Spätestens …
Batch-Verarbeitung von Modulen mit der Bash
- In diesem Beitrag wird gezeigt, wie man eine ganze Reihe von Modulen automatisch mit Hilfe eines Bash-Skriptes neu generieren kann. Auch die Übersetzungen der Module können automatisch neu generiert …
Standalone Generator im ersten Praxistest
- Gastbeitrag von Ralf Köster Habt ihr schon mitbekommen, dass es seit 0.7.3 auch einen standalone Generator gibt? Sicherlich habt ihr dass, aber ihr fragt euch, was ihr damit machen könnt? Ich versuche …