Ein dynamischer Baum dank dem Django MPTT-Paket

  • Adrian Schlegel

Ziel war es, mit KOMPRA eine unbegrenzte Anzahl benutzerdefinierter Kund*innen (Schulen) und StudiengÀnge bewirtschaften zu können. Die Lösung ist eine dynamischer, hierarchischer «Baum» , der alle bewertbaren Kompetenzen eines Studiengangs abbilden kann.

Mehr zu den Services CMS die wir dir als Digital Agentur bieten.

Basierend auf dem «Django MPTT»-Paket ermöglicht KOMPRA die Verwaltung von mehr als 30 benutzerdefinierten StudiengĂ€ngen (jeder ist als Baumwurzel dargestellt), die aus mehr als 3‘500 Knotenpunkten bestehen. Jeder Knotenpunkt stellt eine Kompetenz dar, die auf die entsprechenden Benutzer*innen (Lehrer*innen oder Studierende) beschrĂ€nkt ist. Lehrer*innen können ihren Student*innen somit Bewertungen ĂŒbermitteln. KOMPRA ermöglicht die gezielte Formulierung verschiedener Schritte, Ziele, Feedbacks und Coachings, was die Student*innen im Lernprozess schnell vorwĂ€rtsbringt. Viele Funktionen, die in der finalen Version von KOMPRA integriert sind, entstanden auf Wunsch und Initiative der Schulen, die das Tool nutzen.

Das designintensive Frontend

Das ursprĂŒngliche Design von KOMPRA war sehr minimalistisch. Dies genĂŒgte den AnsprĂŒchen der Nutzer*innen jedoch schnell nicht mehr, weshalb ein Redesign unabdingbar wurde. Ziel des Redesigns war es, die Benutzerfreundlichkeit und die Effizienz der KOMPRA-Website zu verbessern. Die Herausforderung bestand darin, auch die gesamte Interaktion mit Diagrammen und Datenvisualisierungen zu verbessern. DarĂŒber hinaus sollte diese Phase genutzt werden, um schöne und neu gestaltete Komponenten hinzuzufĂŒgen. Das Wichtigste zuerst: Um dem Frontend-Anteil im Projekt genĂŒgend Gewicht zu geben, brauchten wir ein Werkzeug, um die Komponenten zu dokumentieren. FĂŒr diesen Zweck war Fractal in dieser Phase die perfekte Wahl, da es die Erstellung von leistungsstarken Komponentenbibliotheken und flexiblen Styleguides erlaubt. DarĂŒber hinaus verwendeten wir das CSS-Framework Kanbasu von Liip, das sehr anpassungsfĂ€hig und leichtgewichtig ist. Das Hauptaugenmerk dieses Frameworks liegt auf einer starken Basis von Komponenten, die einfach angepasst werden können.

Eine weitere Herausforderung bestand darin, die Daten visuell darzustellen: D3.js war die perfekte Bibliothek fĂŒr dieses Projekt, wobei wir in erster Linie Netz- und Kreisdiagramme erstellt haben.


Sag uns was du denkst