Let’s CRM: Ein Videoportal hilft mehr als 1000 Bilder

Ein CRM steigert die Produktivität der Mitarbeiter und erleichtert den Arbeitsalltag – wenn man damit umgehen kann. Handbücher, Cheatsheets und eigene Notizen mögen in vielen Situationen helfen können, doch manchmal muss man etwas sehen, um es wirklich zu verstehen – ein Bild sagt eben mehr als 1000 Worte... Aus diesem Grund haben wir in jüngster Vergangenheit damit begonnen, How-To-Videos zu erstellen und den Kunden zur Verfügung zu stellen. Doch damit begannen auch die "multimedialen" Herausforderungen: Nicht alle Kunden-PCs, Notebooks und Terminalserver haben einen Videoplayer oder die Videos müssen auf Grund von Inkompatibilitäten mit viel zusätzlicher Arbeit in andere Formen und Formate umgewandelt werden. Dann kam die rettende Idee: Heute hat jeder Arbeitsplatzrechner einen funktionierenden Browser. Und jeder Browser mit HTML5-Unterstützung kennt den Tag. Somit kam mir als Praktikant die Aufgabe zu, ein kleines Videoportal zu programmieren/designen, das mit möglichst einfachen Mitteln Videos auflisten und abspielen können sollte. Quasi ein eigenes Intranet YouTube. Im Gegensatz zu meinen vorherigen Projekten war dieses zeitkritisch, da bereits Videos erstellt worden waren und von den Kunden nicht angesehen werden konnten. Da das Portal so einfach wie möglich sein sollte, möglichst ohne einen Webserver lauffähig, durfte es nur in HTML, CSS und JavaScript geschrieben werden. Zur Vereinfachung suchte ich mir jQuery und das Bootstrap Framework heraus. Eine .html enthält nun die grundlegende Struktur der Seite, das Logo der Firma, eine Navbar und einem leeren Divisionselement, in das später die Videos geladen werden. Die hauptsächliche Arbeit steckt im Javascript-Code, die die vorhandenen Videos dynamisch aus einem Ordner laden und gruppiert anzeigen soll. Da JavaScript in einem Browser nicht einfach lokale Ordner nach Videos durchsuchen kann, verwende ich dafür eine Konfigurationsdatei im JSON-Format, in der auch zusätzliche Informationen wie Tags, Videoautoren, Erstellungsdaten und so weiter untergebracht werden können. Bereits hier tauchte die erste Hürde auf: Mein Plan war es gewesen, die Konfiguration über AJAX unmittelbar nach dem Aufruf der Seite nachzuladen und zu verarbeiten. Das funktionierte leider nur in Firefox und Edge, in Chrome und – am wichtigsten für viele unserer Kunden – im Internet Explorer allerdings nicht. Beide Browser sehen den Zugriff über AJAX auf eine lokale Ressource als Verletzung der Same-Origin-Policy an. Im Chrome ließ sich das durch eine Veränderung der Startparameter umgehen (nicht schön) und im IE nur durch aufwendige Konfigurationen. Die Lösung hier war überraschend einfach – anstatt die Konfiguration nachzuladen, kopierte ich sie direkt als JSON-String in den Quellcode. Falls das Portal trotzdem von einem lokalen Server gehostet werden sollte, verfügt es über einen Switch, der zwischen dem eingebundenen String und dem Nachladen der Config wechseln kann. Beim Öffnen der Seite wird nun die Konfiguration ausgelesen und dementsprechend die Seite mit Inhalt gefüllt. Jedes Video landet in einem eigenen Container, zusammen mit seinem Titel, Zusatzinformationen und einem Beschreibungstext. Diese Container werden durch Tags gruppiert und in alphabetischer Reihenfolge angezeigt. Eine Übersicht der vorhandenen Tags befindet sich in der Navbar als anklickbare Knöpfe, um sie umschalten zu können. Da sich in dieser Leiste auch das Suchfeld und eine Möglichkeit zum Hochscrollen befinden, ist sie für die Bedienung recht wichtig und sollte sichtbar bleiben, auch wenn man weiter unten auf der Seite ist. Um die Positionierung von Elementen zu beeinflussen, verwendet man das CSS-Attribut position. Mit dem Wert sticky wird das Element normal angezeigt, verlässt aber den Bildschirm nicht mehr, wenn es eigentlich nach oben verschwinden sollte, es bleibt „kleben“. Doch der Haken – es wird vom IE nicht unterstützt. Der Workaround, der sich finden lässt, ist deutlich komplizierter. Ein Scrollhandler überprüft, ob die Leiste den oberen Rand des Bildschirms erreicht hat, falls ja, wird ihre Position fest auf den Bildschirm gesetzt und der nachfolgende Inhalt um die Breite der Leiste nach unten verschoben, da die Leiste aus der Platzverteilung entfernt wurde. Scrollt man wieder nach oben, wird der Vorgang wieder umgekehrt. Die meisten anderen Schwierigkeiten entstanden ebenfalls aus Funktionen, die vom IE nicht unterstützt wurden, doch jede von ihnen ließ sich mit mal mehr, mal weniger Recherche und Ausprobieren lösen. Nur zwei Arbeitstage nach Beginn wurde die erste Version bei einem Kunden eingerichtet. Im Folgenden kamen noch weitere Anforderungen nach Features, wie das Einfügen von Bildern, einzeln und in Diashows, bei Klick in Vollbild anzusehen, die Einteilung in Unterkategorien und eine Suchfunktion über alle vorhandenen Inhalte. So beschäftigte mich das Videportal, das als schnelle Lösung gedacht war, über mehrere Wochen. Dabei entstanden ist ein kleines auf hoch effektives Hilfsmittel, das auch unseren zukünftigen Kunden zugutekommen und helfen wird, das CRM oder andere Programme zu meistern, ohne frustriert nach Lösungen suchen zu müssen. Ein Programm kann schließich noch so gute Features haben – wenn sie von den Anwendern nicht verstanden und folglich auch nicht genutzt werden, sind sie wertlos. Das Arbeiten mit der Dreieinigkeit aus HTML, CSS und JavaScript ist für mich immer interessant, weil es vielseitiger ist als die meisten anderen Projekte. Neben der reinen Programmlogik spielen die Fragen des Layouts und der Gestaltung mit hinein, was mir die Chance gab, auch ein bisschen kreativ zu werden und an dem Aussehen der Seite zu basteln. Gerade der zeitkritische Anfang spornte mich an, in kurzer Zeit eine soldie Webseite auf die Beine zu stellen.