«Moderne Webauftritte sind keine reinen Webseiten mehr, sondern interaktive und multimediale Webapplikationen. Die Studierenden erhalten in dieser Veranstaltung einen umfassenden Überblick über Konzepte, Sprachen, Protokolle und Frameworks der Webprogrammierung. Darüber hinaus werden die Kenntnisse in einem Semesterprojekt angewendet und vertieft.», so die Beschreibung des Moduls Webprogrammieren, welches die DBM Studierenden des fünften Semesters im letzten halben Jahr bei Ingmar Baetge besuchen durften. In diesem Blogbeitrag erzählen die Studierenden Sandro Matter und Danilo Rosini von ihren Erfahrungen in diesem Modul.
Über das Modul
Begonnen mit einer kurzen Repetition zu den HTML- und CSS-Grundlagen aus den früheren Modulen «Wirtschaftsinformatik» und «Programmieren 1 & 2» folgte die Einführung in JavaScript – dem Schwerpunkt dieses Moduls. Dabei wurde auch auf Besonderheiten der modernen Programmiersprache fürs Web eingegangen, welche ihren Ursprung im Jahr 1995 hatte und mit dem Namensvettern Java, bis auf den ähnlich klingenden Namen, beinahe keine Gemeinsamkeiten pflegt, was oft noch heute noch zu Verwirrung und Missverständnissen führt. Das Tohuwabohu in der Programmiersprache endete nicht nur beim Namen. So herrscht bei uns nach wie vor nicht völlige Klarheit, wieso laut JavaScript die Rechenoperation 1 + 2 = 3 ergibt, aber 0.1 + 0.2 ≠ 0.3 ist. Die Ursache liegt übrigens dabei, dass die Programmiersprache Rechenoperationen mit Fliesskomma-Mathematik umsetzt und der Computer von Haus aus nur ganze Zahlen speichern kann, also braucht man eine Möglichkeit, Dezimalzahlen darzustellen. Diese Darstellung ist nicht ganz genau. Aus diesem Grund ist 0.1 + 0.2 ≠ 0.3. (Die Erklärung im Detail kann hier von Dr. Derek Austin nachgelesen werden.) Kapiert? Genau. So fühlte sich wohl der Grossteil der Betroffenen, welche das erste Mal mit dieser Eigenschaft der Skriptsprache konfrontiert wurde. Dies obwohl die Lösung – wie grundsätzlich alles in der Informatik – logisch zu erklären ist (oder es zumindest sein sollte).
Nachdem die Studierenden sich allerdings genauer mit der Sprache auseinandersetzen und erste Funktionen und Code Teile selbst zu schreiben begonnen hatten, wurde vieles, das zuvor noch Unklarheiten bereitete, klarer. Die Theorieblöcke waren interessant und hilfreich. Am meisten profitieren man jedoch bei der praktischen Umsetzung des Semesterprojektes. Besonders hilfreich waren dabei die regelmässigen Coachings mit dem Dozenten, welcher individuell auf Schwierigkeiten bei den Studierenden eingegangen ist, falls Probleme auftraten, für welche das Projektteam bei Google oder Stackoverflow nicht sofort eine Antwort fand. Meist wurde die Antwort dann eben doch gemeinsam mit dem Dozenten bei Google gefunden, nur nach einer noch längerer Suche. In der Aussage, der wichtigste Skill für Programmierer sei das Googeln, scheint eben doch ein Quäntchen Wahrheit zu stecken.
Das Semesterprojekt
Das Semesterprojekt bildete zugleich 70% des Leistungsnachweises des Moduls. In Gruppen sollte eine interaktive Webseite entstehen, die einen Datensatz oder ein wissenschaftliches Modell interaktiv aufbereitet. Mit völlig unterschiedlichen Ideen machten sich die Gruppen an die Arbeit, ihre Projekte umzusetzen. Eine Projektgruppe setzte aus einem Datensatz, welcher Meta-Informationen zum Netflix Filmangebot beinhaltet, eine interaktive Mediathek um, bei welcher der Datensatz nach verschiedenen Parametern gefiltert und durchsucht werden kann. (Das mit dem React-Framework umgesetzte Projekt kann hier gefunden werden.) Eine andere Gruppe wiederum erstellte aus einem Datensatz rund um Elektrofahrzeug-Ladestationen eine Plattform um, mit welcher die naheliegendste Station gefunden werden kann.
Unsere Gruppe hat einen etwas anderen Ansatz gewählt. Im vergangenen Jahr erhielt jeder Studierende des Studienganges Digital Business Management per Post ein gedrucktes Lehrmittel zugestellt: Die FHGR Online-Marketing- Cards. Die Karten wurden vor einem Jahr intensiv genutzt, um sich auf die Prüfung im Modul Digital Marketing vorzubereiten. Diese fiel dem Team zufällig bei der Projektsuche in die Hände und schnell wurde die Idee geboren, eine digitale Version Karten zu erstellen. Nach Rücksprache mit Studiengangsleiter und Initiant der Lehrmittel, Armando Schär, erhielt das Team das GO zur Umsetzung der Karten. Einzige Vorgabe: Die Karten müssen auch in Zukunft von den Autoren der FHGR Online Marketing Cards aktualisiert werden können.
Die «analogen» Online Marketing Cards der FH Graubünden (Bildquelle: Eigene Darstellung)
Damit die Karten künftig also weiter gepflegt werden können, wurde beschlossen, den Code auf GitHub als Open-Source-Projekt zu hosten. Die Seite sollte auf GitHub-Pages aufrufbar sein. Die Websites auf GitHub-Pages werden oftmals mit Jekyll umgesetzt. Jekyll ist ein Generator für statische Websites mit integrierter Unterstützung für GitHub-Pages und einem vereinfachten Build-Prozess. Der auf der Programmiersprache Ruby basierende statische Seitengenerator (SSG) nimmt Markdown- und HTML-Dateien und erstellt eine vollständige statische Website auf der Grundlage von vordefinierten Layouts. (jekyllrb.com)
Für das Layout wurden verschiedene HTML «Gerüste» gebaut. Der Inhalt der Karten wurde in Markdown-Files erfasst. Im HTML-Gerüst wurde so definiert,dass der Inhalt der Markdown-Files platziert werden soll. Das tolle an diesen HTML-Layout-Vorlagen: In Zukunft können so die Inhalte der Karten direkt auf GitHub erweitert werden, um die Karten aktuell zu halten. Wird eine neue Karte als Markdown-File hochgeladen, wird die statische Jekyll-Seite automatisch neu gebaut und aktualisiert. Wer mehr über die verschiedenen Werkzeuge erfahren möchte, die das Online Marketing bietet, sollte sich die Online Marketing Cards der FH Graubünden unbedingt ansehen.
Das Endergebnis: Die Website als «online» Online Marketing Cards (Bildquelle: Eigene Darstellung)
Der ganze Sourcecode ist öffentlich auf GitHub ersichtlich. Der Link zur fertigen Website auf GitHub-Pages finden Sie hier.
Lehrreiches und spannendes Praxismodul
Abschliessend kann die ganze Projektgruppe sagen, dass die Projektarbeit ein voller Erfolg war. Wir konnten durch vernetztes Denken das Erlernte aus verschiedenen Modulen, wie Programmieren 1 und 2 sowie der Wirtschaftsinformatik einerseits das Wissen wieder auffrischen und dieses mit neuen Learnings im Bereich von JavaScript anreichen und praktisch Anwenden. Das Modul bietet allen mit einem Flair fürs Programmieren einen praxisnahen Einblick in die Basics der Webprogrammierung.
Danilo Rosini und Sandro Matter studieren im 6. Semester Digital Business Management.