Freitag, 30. Oktober 2020
CrypTool-Website rundum erneuert
Im Laufe des Jahres 2020 wurde das CrypTool-Portal erneut umfassend erneuert. Die Website unter www.cryptool.org war ursprünglich 2003 für CrypTool 1 erstellt worden und wurde mit dem Dazukommen von CrypTool 2 und JCrypTool 2008 zum "CrypTool-Portal" umgebaut. 2009 wurde es um CrypTool-Online erweitert.
Das bisherige System
Die letzte umfassende Erneuerung fand 2016 statt. Seitdem wurde die Website mit dem Content Management System (CMS) Joomla betrieben. Für das Frontend der Website wurden die Bibliotheken Bootstrap 3 und jQuery verwendet.
Ein CMS ist eine Software, die in einem Webserver eingerichtet wird, um die Inhalte einer Website zu verwalten. Danach werden alle Verwaltungsaufgaben vom System übernommen.
Die Benutzung von Joomla war für die Autoren der Inhalte sehr simpel, da sie diese einfach in einem grafischen WYSIWYG-Editor bearbeiten und direkt auf der Website betrachten konnten. Für Administratoren bedeutete sie aber einen gewissen Pflege-Aufwand, da regelmäßig Updates installiert werden müssen (z.B. bei Sicherheitspatches oder neuen bzw. verbesserten Features).
Die Inhalte der Website wurden von Joomla in einer Datenbank verwaltet und die Seiten daraus auf Anfrage erzeugt: Wenn Sie eine Seite des CrypTool-Portals aufgerufen haben, wurde diese im Hintergrund von Joomla auf dem Webserver live für Sie erzeugt* und dann an Ihren Browser ausgeliefert. Das brauchte etwas Zeit und verlangsamte die Ladezeit der Website somit. Joomla selbst benötigte einen Datenbankserver, was die Komplexität des Systems erhöht hat.
Daher wurde ein System mit geringerer Total-Cost-of-Ownership und Ladezeit gesucht ...
* = Eine Seite zu erzeugen bedeutet, Daten in ein HTML-Template einzusetzen. Ein HTML-Template ist eine Rahmenstruktur, die gleichbleibende Teile der Website (wie z.B. die Kopf- und Fußleisten) enthält. Die sich pro Seite unterscheidenden Inhalte (wie der Text dieses Artikels) werden dann in diese eingesetzt.
Neues Backend-System
Eine Möglichkeit dazu ist, die Website im Vorfeld zu generieren und bereits fertige HTML-Dateien auszuliefern. Solche Technologien werden "Static-Site-Generatoren" genannt. Das geht allerdings nur, wenn die ausgelieferten Inhalte der Seiten "statisch" sind (sich also nicht zur Laufzeit ändern). Dynamische Codeausführung im Client bleibt mit JavaScript aber möglich. Beim CrypTool-Portal ist diese Voraussetzung gegeben.
Static-Site-Generatoren gibt es viele. Für das CrypTool-Portal wurde Jekyll ausgewählt. Jekyll ist simpel (ohne viel Schnick-Schnack) und auf Websites mit Blog-Artikeln ausgelegt, so wie das CrypTool-Portal. Jekyll ist übrigens (wie Joomla auch) vollständig Open Source.
Workflow des neuen Systems
Die Daten des vorherigen CrypTool-Portals wurden aus der Joomla-Datenbank extrahiert und im Rahmen der Erneuerung ebenfalls überarbeitet. Sie werden nun in einem Git-Repository gehalten, zusammen mit den Projekt-Dateien zur Generierung. Bei Änderungen im Repository wird die Website vom Server automatisch neu daraus erzeugt und im Webserver-Verzeichnis gespeichert. Wenn Sie nun eine Seite des CrypTool-Portals aufrufen, zeigen Sie einfach eine unveränderte HTML-Datei von der Festplatte des Servers an.
Die Aktualisierung auf dieses Vorgehen bietet einige Vorteile: Da nur noch vorerzeugte (statische) Dateien bereitgestellt werden (statt sie durch dynamische Code-Ausführung live zu erzeugen), wurde die Sicherheit der Website erhöht und die Ladegeschwindigkeit verbessert. Da es keine CMS-Software mehr gibt, die aktuell gehalten werden muss, wurde der Administrationsaufwand verringert. Da die Daten direkt im Repository gehalten werden, wird kein Datenbankserver mehr benötigt, was die Komplexität des Systems verringert.
Neue Frontend-Oberfläche
Zusätzlich zum Hintergrund-System wurde auch die Frontend-Oberfläche der Website erneuert: Bootstrap 3 wurde auf Bootstrap 4 aktualisiert und das Layout der Seite mit dessen erneuerten Komponenten redesigned. Dadurch ist die Website auch responsive (mobil, Tablet, Desktop, TV).
Neu hinzugekommen ist ein Darkmode, der durch ein Symbol im Header getoggelt werden kann. Die Suchfunktion wurde erweitert, sie ist ebenfalls im Header verfügbar.
Für Logos, Icons und Banner werden nun (wo immer möglich) SVGs verwendet. Diese können ohne Qualitätsverlust skaliert werden und bleiben dadurch auch bei hohen Auflösungen immernoch scharf. Zudem haben sie oftmals eine kleinere Dateigröße als die vorigen Pixelgrafiken.
Aktualisierte CTO-Plugins
Im Rahmen der Rundum-Erneuerung wurden auch die Oberflächen der CTO-Plugins auf Bootstrap 4 aktualisiert. Manche Plugins zur Kryptoanalyse wurden sogar komplett neu entwickelt: Autokorrelation, Häufigkeitsanalyse, Vigenère-Analyse und der Zahlenkonverter.
Einige CTO-Plugins wurden dabei auch so aktualisiert, dass sie sich neueste Web-Technologien wie WebAssembly zunutze machen: Die Caesar-Chiffre und die Monoalphabetische Substitution verwenden zur Berechnung Python live im Browser. Ihr Code kann dabei dynamisch angepasst werden und ohne Download direkt auf der Website ausgeführt werden. Das ist convenient, schneller und offen gesagt ziemlich cool.
Die Msieve-Faktorisierung nutzt ebenfalls WebAssembly, um Berechnungen prozessornäher auszuführen. Die rechenaufwändige Faktorisierung war im Browser (vor allem bei großen Zahlen) mit "normalem" JavaScript sehr langsam. Nun kann die C-Bibliothek – als WebAssembly kompiliert – direkt im Browser ausgeführt werden. Dadurch ist sie dort fast genauso schnell wie ein in C geschriebenes Standalone-Programm.
Zukünftig werden noch weitere CTO-Plugins mit solchen Technologien hinzukommen. Die nächsten sind bereits in Arbeit ... aber dazu mehr in einem eigenen Artikel.
Haben Sie Vorschläge?
Haben Sie Anmerkungen oder Feedback zur neuen Website? Wenn ja, freuen wir uns über eine Nachricht von Ihnen. Vielen Dank!