Wie der Name „Cyber Security“ impliziert, wird es primär um das Thema IT-Sicherheit gehen. Zum Beispiel werde ich eine kleine Anwendung integrieren, die mehrere DNS-Server gleichzeitig abfragen kann und die Ergebnisse miteinander vergleicht. Aber auch Tools für die Web-Entwicklung habe ich schon im Blick, wie z. B. einen Generator, um E-Mail-Adressen vor Spam Bots zu verschleiern. Auf der Seite werde ich nicht nur eigene Tools präsentieren, sondern auch Links zu anderen Anbietern, die spannende und gute Dienste anbieten.

Screenshot des Cyber Security Lab

Vom Layout her habe ich mich an den Kachel-Look von Windows 8 angelehnt. Die helleren Kacheln stehen für externe Links und die dunkleren für eigene Tools. Zusätzlich habe ich den Unterschied auch mit entsprechenden Icons visualisiert. Die Größe der Schriften und der Ränder passen sich natürlich automatisch der Auflösung an und folgen damit dem Responsive Design Gedanken.

Die Anordnung der Kacheln erfolgt per JavaScript. Zuerst wird die Höhe einer Kachel berechnet und dann mit der Höhe des Anzeigebereichs verglichen. Daraus wird dann errechnet, wie viele Zeilen es ohne Scrollen geben kann. Dementsprechend wird die Breite des Wrapper-Elements der Breite aller Kacheln in einer Reihe angepasst.

Damit die Bedienung auch per Touch-Geste funktioniert und mit dem Mausrad nach rechts und links gescrollt werden kann, habe ich das jQuery Plugin Nicescroll eingebunden.

In nächster Zeit werde ich noch weitere Tools aufbereiten und integrieren. Ich halte euch hier in meinen Blogs dann immer auf dem Laufenden. Sobald es in Zukunft mehrere Links und Tools werden, werde ich wahrscheinlich noch eine Sortierfunktion à la MixItUp integrieren. Ich wünsche euch viel Spaß beim Ausprobieren und Testen:

http://cyber-security-lab.de