Digitaler Tag der offenen Tür am Mediencampus Babelsberg
Die Idee
Am 26. Oktober 2020 stand fest, dass ein klassischer Tag der offenen Tür in diesem Jahr pandemiebedingt nicht möglich sein würde.
Um den Interessenten dennoch die Möglichkeit zu bieten, sich am Mediencampus, also im Babelsberger Filmgymnasium und in der Neuen Gesamtschule Babelsberg umzuschauen, sollte eine alternative Lösung durch digitale Medien geplant und kurzfristig bis zum Tag der offenen Tür am 7. November 2020 umgesetzt werden.
Eine solche Web-Lösung sollte sich in ihrem Aufbau an einem echten Tag der offenen Tür orientieren, der Kontakt zwischen potenziellen Schülern und ihren Eltern sowie den Lehrern ermöglichen soll. Außerdem sollten sich die Interessenten jederzeit einen Überblick über die örtlichen und räumlichen Gegebenheiten sowie die Alleinstellungsmerkmale der Schulen verschaffen und sich über den Unterricht und Referenzprojekte informieren können.
Die Umsetzung dieses Online-Erlebnisses sollte durch die Schüler und Lehrer selbst erfolgen.
Die Anforderungen
Aus der Idee ergaben sich folgende konkrete Anforderungen an das Online-Erlebnis:
- Die Möglichkeit, mit Fachlehrern, der Schulleitung sowie dem Sekretariat digital zu kommunizieren
- 360° Panoramen von allen Gebäudeseiten, um die örtlichen (Öffentliche Verkehrsmittel, Medienstadt/Filmpark) Gegebenheiten zu verdeutlichen
- 360° Panoramen von wichtigen Innenräumen zur Verdeutlichung der räumlichen Gegebenheiten (Kino, Tanzraum, Fachräume der Naturwissenschaften etc.)
- Erklärung des Ü7-Verfahrens und Vorstellung der Schulen durch die Schulleiter/innen
- Visuell ansprechende Informationspunkte verschiedener Größe mit multimedialem Inhalt (YouTube Videos, HyperText etc.)
- Die Möglichkeit, durch den Rundgang zu navigieren, ohne die Seite zu verlassen (und hierbei Besucher zu verlieren)
- Eine zuverlässige Webseite, die sich auf alle Mobilgeräte anpasst und auf hohe Besucherzahlen ausgelegt ist
- Die eigene Kontrolle über Verfügbarkeit, Datensammlung etc. der Seite durch Bereitstellung auf eigenen Servern
- Ein Anspruch an Design und Funktionalität der einem „Medien-Campus“ gerecht wird
Die Umsetzung
Der Medienkoordinator der Schulen, Peter Schrötter und der Lehrer Toni Kippenhahn arbeiteten gemeinsam mit den Schülern Leander Neubronner und Sean Katz an der Umsetzung des anhand der Anforderungen aufgestellten Konzeptes.
Die Aufnahmen
Herr Kippenhahn und einige weitere Lehrer erstellten Fotoaufnahmen während des Unterrichts, die später zu mit Musik unterlegten Diashows zusammengeschnitten wurden. Des Weiteren wurde ein filmischer Schulhausrundgang erstellt. Dieser zeigt jeweils kurz den Unterricht in vielen verschiedenen Fächern und dient dazu, dass im interaktiven Online-Rundgang gezeigte Gebäude und seine Räume im Schulalltag zu zeigen.
Mithilfe der DJI Spark Drohne nahm Leander Neubronner die 360° Panoramen des Mediencampus auf. Dazu erstellte er zuerst mithilfe der Drohne 46 Einzelbilder, die vom selben Punkt fotografiert in alle Richtungen blicken.
Um aus den 46 Einzelbildern der DJI Spark ein fertiges Panorama zu erstellen, wurden verschiedene Programme getestet. Nach längerer Abwägung entschied Leander sich für den Image Composite Editor (ICE) von Microsoft Research. Wie in der Galerie zu sehen, können damit die Panoramen vollautomatisch und wesentlich korrekter als bei allen anderen vergleichbaren Programmen zusammengebaut werden. Die Zusammengebauten als TIFF exportierten Bilder sind allerdings noch nicht mit Marzipano kompatibel, da das Seitenverhältnis nicht 2:1 (Doppelt so breit wie hoch) beträgt, sondern wesentlich breiter ist. Dies liegt daran, dass die DJI Spark bauartbedingt nicht in gerader Linie nach oben schauen kann. Damit das Panorama richtig projiziert wird und in Marzipano genutzt werden kann, musste es in Photoshop bearbeitet werden.
Das circa 20.000 Pixel und 200 MB große Bild wird in Photoshop geladen und durch Veränderung der Höhe auf ein 2:1 Seitenverhältnis erweitert. Die nun entstandenen, transparenten Pixel werden ebenso wie der ganze Himmel selektiert (Auswahl -> Himmel).
Mithilfe des neuen „Sky Replacement Tool“ in Photoshop wird der Himmel zusätzlich noch durch einen „optimal“-Himmel ersetzt, um die Atmosphäre gegenüber bewölktem Himmel oder dunklen Wolken der Originalaufnahmen deutlich zu verbessern. Da hierbei (wie oben sichtbar) einige Fehler entstehen, wurden der Himmel und der Rest des Bildes in Helligkeit und Kontrast angeglichen. Bei den wichtigsten Panoramen wie der Gebäudefront und dem Schulgelände wurde auf eine Ersetzung des Himmels verzichtet und stattdessen neue Panoramen bei möglichst gutem Wetter aufgenommen und nachbearbeitet.
Die Basis Webseite
Da eine vollständige Umsetzung einer komplett neuen, den Anforderungen entsprechenden Webseite in anderthalb Wochen kaum möglich ist, suchte der Schüler Leander nach einer bestehenden Programmierung, welche bereits möglichst viele Kriterien erfüllt.
Nach intensiver Recherche fiel die Wahl auf das Open-Source-Tool „Marzipano“ von Google.
Das kostenlose Produkt ermöglichte bereits ein beeindruckendes Erlebnis: Mit der Drohne aufgenommene Panoramen konnten in einer nutzerfreundlichen Weboberfläche hochgeladen werden, Informationspunkte und Verbindungen zwischen den Panoramen (Pfeile) konnten einfach eingefügt werden und alles als fertige Webseite exportiert werden.
Weiterentwicklung von Marzipano
Während Sean Katz die Panoramen mit Informationspunkten und Verbindungsstücken zwischen den Panoramen bestückte, arbeitete Leander an der Umsetzung aller technischen Anforderungen durch das Weiterentwickeln von Marzipano.
Unter anderem fehlte eine für jeden Nutzer einfach zugängliche Möglichkeit, mit der Schulleitung, den Lehrern oder dem Sekretariat zu Videotelefonieren. Ebenfalls sahen die Informationspunkte noch sehr generisch aus, waren zu klein und konnten nur Text enthalten. Durch das generische Aussehen der Informationspunkte war ein schnelles Finden wichtiger Informationen wie dem Ü7-Verfahren ebenfalls unmöglich.
In der folgenden Woche wurden über 50 Videos und anderer multimedialer Inhalt für die einzelnen Informationspunkte erstellt und ca. 3000 Zeilen Code geschrieben, um den Rundgang weitere an das Mediencampus anzupassen und einen vollständigen Rundgang zu bieten.
Kurz vor dem ersten Tag der offenen Tür wurde noch eine animierte Startseite erstellt, die den Nutzer zum Rundgang sowie den Telefoniemöglichkeiten leiten soll. Hier war besonders ein ansprechendes Design sowie responsives Webdesign für alle (Mobil)Geräte erforderlich, um einen guten ersten Eindruck zu hinterlassen.
Aus diesem Grund hatte Leander die Idee, statt einem leeren, weißen Hintergrund eine Google-Earth Animation einzufügen, die zu Beginn vom Potsdamer Hauptbahnhof zum Mediencampus fliegt und das Campus danach in Endlosschleife umkreist.
Technische Infrastruktur
Zu einem gelungenen virtuellen Tag der offenen Tür und jeder Webentwicklung gehört auch eine leistungsfähige Infrastruktur, die dafür sorgt, dass die Seite global auf jedem Gerät und jedem Internetanschluss schnell verfügbar ist und es keine hohen Lade- oder Ausfallzeiten gibt.
Da wir zum Tag der offenen Tür große Besucherzahlen innerhalb kurzer Zeit erwarteten, brauchten wir eine Lösung die in Spitzenzeiten solide Leistung bietet, nicht allzu teuer ist und bei der ein Ausfall zum entscheidenden Zeitpunkt sehr unwahrscheinlich ist.
Da die Seiten zum Tag der offenen Tür zum größten Teil statisch sind, wurde zusätzlich das (kostenlose) globale Content-Delivery-Network (CDN) von Cloudflare in Anspruch genommen, um dem Nutzer die Datein vom ihm am nächsten gelegenden Cloudflare-Rechenzentrum zu bieten. In der Praxis wurde bis zu 70% des Datenverkehrs direkt von Cloudflare beantwortet, ohne den Endserver belasten zu müssen.
Des Weiteren bietet Cloudflare eine kostenfreie Abwehr von Web-Attacken an und schützt unsere Infrastruktur monatlich vor ca. 15 Bedrohungen.
Die Funktionalität und Leistungsfähigkeit der Infrastruktur und Webseite wurde mit einer Schulklasse getestet, mit dem Ergebniss, dass, sobald die Inhalte im Cloudflare-CDN zwischengespeichert wurden, auf dem Server fast keine Belastung stattfand und die Seite zu jeder zeit schnell und verfügbar blieb.
Die Auswertung
Um Analysieren zu können, wie viele Nutzer die Seite besucht haben und wie (intensiv) sie diese genutzt hatten, entschieden wir uns für Google Analytics sowie später für den Google Tag Manager.
Leander sagt hierzu:
„Google Analytics ermöglicht es uns, den Nutzerfluss im großen Stil auszuwerten und Möglichkeiten zur Optimierung des (Nutzer)Erlebnisses zu finden.“ – Leander Neubronner (10. Klasse)
„Der Google Tag Manager kann das Verhalten wie beispielsweise das Klicken oder Tippen unseres Nutzers beobachten. Bestimmtes Verhalten, welches einem von mir vorher definiertem Muster entspricht, löst ein Event/Ereignis aus, welches später in Google Analytics ausgewertet werden kann. Da die Daten dem Nutzer nicht zuzuordnen sind und wir die Daten nur gesammelt nutzen, halte ich die Nutzung dieses Tools für ethisch vertretbar.“ – Leander Neubronner (10. Klasse)
07.11.2020
Beim ersten Tag der offenen Tür wurde das Weberlebniss von 1.224 Nutzern besucht. Der durchschnittliche Nutzer besuchte 75% (3/4) des Webangebots und blieb für ca. 4 Minuten.
09.01.2021
Beim zweiten Tag der offenen Tür wurde das Weberlebniss von 743 Nutzern besucht, von ihnen hatten 682 die Seite noch nie (auch nicht am 07.11) besucht. Auch sie besuchten durchschnittlich 75% (3/4) des Webangebots und blieben etwa 3 Minute.
Leander erklärt sich den Besucherrückgang damit, dass sich bei Privatschulen die meisten schon im Herbst bewerben und vor ihrer der Bewerbung den (Digitalen) Tag der offenen Tür besuchen.
Schlussworte der Schüler/innen und Lehrer/innen
„Unser Tag der offenen Tür hat mir sehr deutlich gezeigt, wozu unserer Schüler in der Lage sind. Innerhalb weniger Wochen haben Sie ohne Unterstützung etwas gebaut, was bis dahin keine andere Schule hatte. Vielen Dank!“ – Peter Schrötter (Medienkoordinator)
„Für mich als Lehrkraft war das Projekt „Digitaler Tag der offenen Tür“ eine spannende Herausforderung, in der ich auch für zukünftige Vor-Ort-Veranstaltungen großes Potential sehe.“ – Theresa Salzmann (Lehrerin)
„Alles in allem halte ich die digitalen Tage der offenen Tür für einen vollen Erfolg. Die Nutzerzahl übertraf meine persönlichen Erwartungen und wir vom TechTeam konnten bei dem Projekt viel lernen.“ – Leander Neubronner (Projektleitender Schüler der 10. Klasse)