Die meisten von uns entwickelten Websites und Webanwendungen (im Folgenden einheitlich als "System" bezeichnet) basieren heute auf dem Open-Source-Framework Symfony. Symfony stellt eine Vielzahl von Komponenten zur vereinfachten Entwicklung von Websites und Webapplikationen zur Verfügung. Dazu gehören Komponenten zur Verarbeitung von Formulareingaben, Entwicklung von HTML-Templates oder zum Aufbau einer Loginfunktion mit differenzierten Benutzerrechten.

Das Symfony-Framework wird laufend weiterentwickelt. Diese Weiterentwicklungen werden seit über 10 Jahren nach einem festen, planbaren Rhythmus veröffentlicht. Im Detail haben wir das in unserem Blogpost "Up-to-date bleiben" beschrieben.

Alle zwei Jahre im November erscheint eine neue Major-Version, danach jedes halbe Jahr eine Minor-Version.

Die Minor-Versionen fügen neue Features und Funktionalitäten hinzu, sind aber vollständig kompatibel mit der Vorversion. Sie können also einfach installiert werden, ohne dass Anpassungen im Quellcode Ihres eigenen Symfony-basierten Systems erforderlich sind. Der Aufwand für diese Updates ist daher sehr gering.

Anders sieht es bei den Major-Versionen aus: Hier werden größere Neuerungen eingeführt, durch die entsprechender Anpassungsbedarf in Ihrem System entsteht.

Wenn wir Ihr System auf eine neue Major-Version von Symfony aktualisieren, umfasst das nicht nur Aktualisierungen von Symfony selbst. Zusätzlich aktualisieren wir auch viele andere eingebundene Softwaremodule, "Bibliotheken" (libraries) oder "Abhängigkeiten" (dependencies) genannt. Auch hierfür kann es erforderlich werden, dass Ihr System an einigen Stellen angepasst wird.

Alle nötigen Anpassungen nehmen wir im Rahmen des Updates für Sie vor. Es kann sich dabei um Anpassungen der Konfiguration handeln oder Anpassungen im Quellcode selbst.

Zum Beispiel mussten spätestens für das Update von Symfony 6 auf Symfony 7 alle Anweisungen, die bisher über eine Technik namens "Annotations" vorgenommen wurden, auf eine neue Technik namens "Attributes" umgestellt werden. Im Ergebnis tun beide Techniken das Gleiche: mit ihrer Hilfe können Konfigurationsanweisungen direkt im Quellcode hinterlegt werden.

Ein Beispiel für eine Annotation:

/**
* @Route("/path", name="action")
*/

Und die gleiche Anweisung als Attribute:

#[Route('/path', name: 'action')]

Annotations brauchen zum Funktionieren eine zusätzliche Bibliothek, die diese Konfigurationsanweisungen aus dem Quellcode extrahiert. Attributes hingegen sind eine Funktion, die in die Programmiersprache PHP seit Version 8 fest integriert ist (ein language feature). Daher sind sie wesentlich schneller. Codestellen wie das obige Beispiel existieren in einem System in sehr großer Zahl, entsprechend umfangreich sind die Anpassungen – und die Umstellung kann nur teilweise automatisiert werden. Dafür steigt die Geschwindigkeit des Systems und die zusätzliche Bibliothek kann entfallen, was den zukünftigen Wartungsaufwand verringert.

Auf der Website von Symfony finden Sie, wenn Sie sich für die technischen Details bei einem Symfony-Update interessieren, eine allgemeine Empfehlung zur Vorgehensweise bei Updates (Englisch).

Im Anschluss an die eigentlichen Updates führen wir noch eine umfangreiche Qualitätssicherung durch, z. B. einen vollständigen Vorher-Nachher-Vergleich der gesamten Website, um sicherzugehen, dass durch den Umstieg auf die neue Symfony-Version keine Fehler im System auftreten.

Welche Vorteile bringen neue Symfony-Versionen?

Der wichtigste Vorteil, den Sie durch ein Symfony-Update gewinnen, ist die Gewährleistung der Betriebssicherheit: Das Symfony-Entwicklungsteam sorgt für fünf Jahre ab Erscheinen einer neuen Major-Version für Bugfixes auf dieser Versionslinie. Noch ein Jahr länger, also insgesamt sechs Jahre lang, werden Updates zur Schließung von Sicherheitslücken bereitgestellt. In diesem Zeitraum wird auch die Kompatibilität mit neuen PHP-Versionen gewährleistet.

Neue Symfony-Versionen bringen häufig auch Performanceverbesserungen mit sich, wodurch die Seitenabrufe schneller werden oder mit weniger Rechenleistung auskommen.

Last but not least kommen in neuen Symfony-Versionen zusätzliche Funktionalitäten hinzu, zum Beispiel neue Module, mit denen bestimmte Aufgaben effizienter und schneller als früher umgesetzt werden können. In der aktuellen Major-Version Symfony 7 waren das beispielsweise

• Eine Scheduler-Komponente, die Ereignisse auf Basis eines vordefinierten Zeitplans auslösen kann

• Die Komponenten Webhook und RemoteEvent, mit denen man Webhooks anbieten kann und die Reaktionen auf Ereignisse in anderen Systemen steuern. (Ein Webhook ist eine Art webbasierte Benachrichtigungsfunktion, mit der Ihr System andere Systeme von bestimmten Ereignissen informieren kann – zum Beispiel, dass ein neuer Beitrag veröffentlicht wurde oder dass eine neue Nutzerin oder ein neuer Nutzer sich registriert hat. Ein RemoteEvent ist das technische Gegenstück zum Webhook auf der anderen Seite, also im empfangenden System.)

• Ein HtmlSanitizer, der dabei unterstützt, validen und sicheren HTML-Quellcode zu erzeugen

• Eine Uhr-Komponente, mit deren Hilfe man zeitabhängigen Code besser automatisiert testen kann.

Auf diese neuen Komponenten können wir dann bei der Weiterentwicklung Ihres Systems zurückgreifen.

Kann ich auf die Updates auch verzichten?

Ein Verzicht ist eine gewisse Zeit lang möglich. Für jede Hauptversion von Symfony gibt es als letzte Minor-Version ein "Long Term Support"-Release, das drei Jahre lang Bugfixes bekommt und vier Jahre lang Fixes für Sicherheitslücken. Nach Ablauf dieser Zeit würden Sicherheitslücken, die im Framework entdeckt werden, nicht mehr behoben und wären schlimmstenfalls ein Einfallstor für Hackerangriffe.

Zudem ist jede Symfony-Version auch nur mit bestimmten Versionen der zugrundeliegenden Programmiersprache PHP kompatibel. Jede PHP-Version wird aber nur eine bestimmte Zeit lang durch aktuelle Versionen des Server-Betriebssystems Linux unterstützt. Wenn im Rahmen des Hostings eine Aktualisierung des Server-Betriebssystems und damit ein Wechsel der PHP-Version erfolgt, können Websites und Webanwendungen, die nicht mit der neuen PHP-Version kompatibel sind, nicht weiter betrieben werden.

Warum ist es sinnvoll, möglichst früh auf neue Versionen von Symfony zu aktualisieren?

Wir empfehlen, jeweils so früh wie möglich auf neueste Major-Version und die darauf folgenden Minor-Versionen zu aktualisieren.

Dadurch steht der Nutzen der neuen Version – in Form der oben beschriebenen Vorteile – früher zur Verfügung.

Ein weiterer wichtiger Aspekt: Teilweise werden in neuen Minor-Versionen Änderungen vorgenommen, die unerwartete Kompatibilitätsprobleme mit Ihrem System aufweisen. In solchen Fällen ist es uns häufig gelungen, beim Symfony-Entwicklungsteam zu erreichen, dass diese Änderungen zurückgenommen werden, weil sie das Kompatibilitätsversprechen brechen. Wenn diese Kompatiblitätsprobleme hingegen erst spät auffallen, ist eine Rücknahme in Symfony nicht mehr möglich, sondern es bleibt nur die Möglichkeit, aufwändig den Quellcode Ihres Systems anzupassen, um die Kompatibilität wieder herzustellen.

Wieso sind frühe Updates kostengünstiger?

Symfony-Updates müssen grundsätzlich sequenziell abgearbeitet werden, es kann keine Version übersprungen werden. Eine Zusammenfassung mehrerer Versionssprünge (z. B. von 5 auf 7) bringt damit keinen Kostenvorteil, im Umkehrschluss sind getrennte Updates für jede Major-Version nicht teurer als zusammengefasste.

Ein Kostenvorteil früher Updates ergibt sich aus der frühen Entdeckung der im vorherigen Abschnitt beschriebenen unerwarteten Kompatibilitätsprobleme. Können diese noch im Symfony-Framework behoben werden, reduziert das den Aufwand für die Herstellung der Kompatibilität mitunter erheblich.

Eine weitere Ersparnis ergibt sich aus der Verfügbarkeit der neuen Features. Häufig können bestimmte Anforderungen mithilfe der in einer neuen Symfony-Version hinzugefügten Komponenten leichter und damit kostengünstiger realisiert werden als in früheren Symfony-Versionen.

Last but not least: Das Wissen in unserem Team über die genaue Vorgehensweise, die Fallstricke und Lösungsmöglichkeiten bei einem bestimmten Versionssprung ist bei einem frühen Wechsel auf die neue Symfony-Version noch frisch. Eine sechs Jahre alte Symfony-Version auf eine vier Jahre alte Version zu aktualisieren, erfordert eine neue Einarbeitung in die Besonderheiten dieses Updates und ist damit automatisch teurer, als wenn das Update vor vier Jahren erfolgt wäre.

Was muss ich tun, um regelmäßige Symfony-Updates zu bekommen?

Gerne behalten wir für Sie im Blick, wann ein Symfony-Update ansteht, und informieren Sie entsprechend. Auf Wunsch können wir die Updates auch im Rahmen einer Aktualitätsgarantie regelmäßig unaufgefordert für Sie vornehmen. Wenn Sie daran Interesse haben, sprechen Sie uns gerne an.

Sie sind noch kein webfactory-Kunde und interessieren sich für unsere Arbeit? Erfahren Sie mehr über unsere Leistungen als Symfony Agentur.

Wir erläutern, wie die Anbindung an die Datenbank funktioniert und was Sie dabei im Vorfeld unbedingt beachten sollten.

Was ist Theasoft?

Theasoft ist eine umfassende Software-Suite, die Theatern, Opernhäusern und Orchestern die Koordination ihrer Betriebsabläufe erleichtert. Die enthaltenen Software-Module decken unter anderem folgende Bereiche ab:

• Künstlerische Planung und Disposition
• Finanz- und Trägerstrukturen
• Personalmanagement
• Tarif- und Arbeitsrecht
• Marketing und Publikumsentwicklung

Alle Theasoft-Module greifen auf dieselbe zentrale Datenbank zu. Änderungen sind damit sofort für alle Nutzer:innen sichtbar, wodurch Dubletten und widersprüchliche Dateneingaben vermieden werden. Zugriffsrechte lassen sich granulär verwalten.

Nicht zuletzt aufgrund der nunmehr 30-jährigen Erfahrung des Entwicklungsteams und der Vielfalt an Prozessen, die in Theasoft abgebildet werden können, ist die Software-Suite für Theater, Opernhäuser und Orchester in Deutschland marktführend. Alternativen mit einem geringeren Funktionsumfang sind etwa KOKOS.event und evis.

Theasoft-Module

Die Theasoft-Software-Suite umfasst zahlreiche Module, die verschiedenste Aspekte der Betriebsabläufe von Theatern und anderen Veranstaltern digital abbilden. Im Folgenden stellen wir die einzelnen Module kurz vor.

Thea.dispo

Das wichtigste Modul und Kernstück von Theasoft, das die Spielplandaten für alle anderen Module bereitstellt. Funktionen zur Überschneidungsprüfung sorgen für eine fehlerfreie Erstellung von Plänen mittels grafischer Anwendungsoberfläche.

Thea.orchester

Planungs- und Abrechnungssystem für Orchester. Ermöglicht das Erstellen von Dienstplänen, automatische Abrechnungen, Hochrechnungen zur Auslastung und die Integration von Mitarbeiterdaten.

Thea.perso

Planungs- und Abrechnungssystem für technische Abteilungen. Erleichtert die Personalplanung, erstellt automatisch Dienstpläne und Rapportzettel und ermöglicht die Einplanung wiederkehrender technischer Arbeiten als sogenannte Countdowns.

Thea.chor

Planungs- und Abrechnungssystem für Chöre. Ordnet entstehende Kosten automatisch den entsprechenden Kostenträgern zu und erleichtert die Erstellung monatlicher Abrechnungsberichte.

Thea.project

Planungs-Tool für den künstlerischen und technischen Bereich. Die grafische Oberfläche visualisiert alle Produktionen einer Spielzeit mittels Gantt- und Zeitleistendiagrammen. Hochrechnungen der verfügbaren Stunden pro Abteilung vereinfachen die langfristige Planung und vermeiden Personalengpässe.

Thea.kontakt

Adressverwaltungs-Tool mit Such- und Filterfunktionen, das die Zuordnung von Sekundärkontakten und das Hinterlegen von Gesprächsnotizen ermöglicht. Die eingebauten Mailing-Funktionen eignen sich für die Öffentlichkeitsarbeit und das Customer-Relationship-Management.

Thea.staff

Modul für die Organisation von Maßnahmen wie Schulungen oder betriebsärztlichen Untersuchungen. Dank diverser Einstellungsmöglichkeiten lassen sich bestimmte Maßnahmetypen priorisieren und Intervalle für bestimmte Personengruppen festlegen.

Thea.fundus

Verwaltungs-Software für den Kostümfundus mit eingebautem Ausgabe- und Verleihsystem. Bietet einen Überblick über die derzeitigen Lagerorte der Kostüme und welche davon gerade in Produktionen verwendet werden. Für jedes Kostüm lassen sich verschiedenste Daten wie Farbe, Zustand oder Größe erfassen.

Theasoft-Add-ons

Die einzelnen Theasoft-Module lassen sich durch Add-ons in ihrem Funktionsumfang erweitern. Derzeit sind folgende Add-ons verfügbar:

• Thea.contract: Vertragsverwaltungs-Funktion, die Vertrags- und Besetzungsdaten kontinuerlich abgleicht und Abweichungen meldet.
• Thea.travel: Add-on für die Buchung von Reisen, Hotels und Theaterwohnungen für Gastkünstler:innen.
• Thea.transfer: Ermöglicht die Erstellung von Abrechnungen für künstlerisches und technisches Personal auf Basis der aktuellen Einplanungen sowie deren Export, etwa im CSV-Format.
• Thea.works: Add-on für die bedarfsgenaue Einplanung von Mitarbeitenden mittels Balkendiagramm-Visualisierung.
• Thea.budget: Tool für die Budget-Planung des künstlerischen Bereichs auf Basis der Spielplandaten aus thea.dispo.
• Thea.export: Ermöglicht den Export von Spielplan- und Besetzungsdaten auf den eigenen Web-Server.
• Thea.web-info: Add-on für den Zugriff auf Spielplan- und Arbeitsinformationen über den Web-Browser.
• Thea.library: Tool für die Verwaltung von Noten und Klavierauszügen.

Dank der Vielzahl von Modulen und Add-ons lassen sich mit Theasoft nahezu alle Prozesse in Theater- und Opernhäusern abbilden. Über die Export-Funktionen können Sie als Veranstalter zudem Informationen aus der Datenbank auf Ihrer Website darstellen. So halten Sie auch Ihre Besucher:innen stets auf dem neuesten Stand.

Darum lohnt sich die Verknüpfung von Theasoft mit Ihrer Website

Indem Sie Ihre Theasoft-Datenbank als zentrale Informationsquelle auch für Ihre Website nutzen, profitieren Sie von folgenden Vorteilen:

• Konsistente Datenqualität: Meist haben die von den Mitarbeitenden gepflegten Dispositionsdaten eine hohe Qualität. Diese leidet jedoch häufig bei der manuellen Übertragung auf die Website. Indem Sie Ihre Website an Theasoft anbinden, beugen Sie dem vor und vermeiden zudem zeitliche Verzögerungen bei der Aktualisierung der Datensätze.
• Zeit- und Kosteneinsparungen: Anstelle von zwei Datenbanken müssen Ihre Mitarbeitenden nach der Theasoft-Anbindung nur noch eine pflegen. Das setzt Kapazitäten frei und vermeidet kostspielige Irrtümer aufgrund von uneinheitlichen Datensätzen. Gerade bei kurzfristigen Ausfällen ist die automatische Übertragung der Änderungen auf Ihre Website eine enorme Hilfe.
• Klare Rollenverteilung: Durch die granuläre Vergabe von Lese- und Schreibrechten in Theasoft können Sie sicherstellen, dass die Verantwortlichkeiten für die Pflege Ihrer Datensätze klar geregelt sind. Da alle Abteilungen auf dieselbe Datenbank zugreifen, können sie sich gegenseitig bei der Pflege unterstützen und Fehler frühzeitig erkennen.

Anbindung Ihrer Theasoft-Datenbank: Das sollten Sie beachten

Wenn Sie als Theater oder Opernhaus bereits Theasoft nutzen, bietet es sich an, die zentrale Datenbank auch als Quelle für die Informationen auf Ihrer Website zu nutzen – so entfällt die fehleranfällige manuelle Übertragung der Daten in Ihr Content-Management-System (CMS).

Bevor die Anbindung erfolgen kann, sollten Sie jedoch einige wichtige Fragen klären.

Projektorganisatorische Fragen

• Relevante Daten: Welche Informationen möchten Sie automatisch aus Theasoft beziehen und welche sollten manuell im CMS gepflegt werden?
• Vollständigkeit der Daten: Sind alle Daten, die Sie auf Ihrer Website darstellen möchten, in Theasoft vorhanden? Falls nicht, möchten Sie diese in Zukunft dort verwalten oder lieber händisch einpflegen? Und nicht zuletzt: Sind alle Datensätze einer Datenart, z. B. Termine, Künstler und Besetzungen, vollständig?
• Datenqualität: Reicht die Qualität der in Theasoft verwalteten Daten aus, um sie ungeprüft auf Ihrer Website darzustellen? Wenn nicht, wie kann Ihr Team die erforderliche Datenqualität erreichen?
• Abteilungsverantwortlichkeiten: Welche Ihrer Abteilungen (Marketing, Künstlerisches Betriebsbüro, Kasse etc.) pflegen die für Ihre Website relevanten Daten und sollten daher ins Projekt miteinbezogen werden?
• Zuständigkeit für Korrekturen: Wer wird sich zukünftig um die Bereinigung von Fehlern in der Datenbank kümmern? Kann das Künstlerische Betriebsbüro kurzfristig reagieren? Sollte das Kommunikations- und Marketing-Team Schreibrechte in Theasoft erhalten?
• Zeitpunkt für die Inbetriebnahme: Wann wollen Sie auf die Theasoft-Anbindung umschalten? Planen Sie hier genügend Zeit für die Behebung von etwaigen Fehlern ein, die auch bei einer intensiven Testphase mitunter erst im Live-Betrieb auffallen.

Technische Fragen

• Aktualisierungsfrequenz: In welchen Abständen möchten Sie den Datenbestand auf Ihrer Website mit dem in Theasoft synchronisieren? Je kürzer die Frequenz, desto aktueller die Daten – und umso höher das Risiko, dass Sie Eingabefehler nicht rechtzeitig korrigieren können, bevor sie auf Ihrer Website sichtbar werden.
• Zu exportierende Zeiträume: Wie weit im Voraus möchten Sie damit beginnen, für einzelne Website-Einträge Daten aus Theasoft zu übertragen? Wie lange sollen diese im Nachhinein noch synchronisiert werden? In der Praxis hat es sich bewährt, die Synchronisation auf die aktuell laufende und die darauf folgende Spielzeit zu begrenzen.
• Termin-Veröffentlichung: Ab welchem Planungsstatus sollen in Theasoft verwaltete Termine auf Ihrer Website sichtbar werden? Gibt es neben dem Haken bei "Im Web veröffentlichen" weitere Kriterien, die erfüllt sein müssen, damit der Termin auf der Website angezeigt wird?
• Bearbeitung im CMS: Möchten Sie Ihrem Website-Team die Möglichkeit geben, Daten aus Theasoft nachträglich im CMS zu bearbeiten? Oder sollen Fehler ausschließlich an der Quelle, sprich in Theasoft, behoben werden?
• Umgang mit nicht mehr exportierten Daten: Wie möchten Sie mit Datensätzen umgehen, die in Theasoft nicht mehr exportiert werden? Sollen sie auf der Website unsichtbar geschaltet, gelöscht oder beibehalten werden?

So bringen wir Ihre Theasoft-Daten auf Ihre Website

Damit die Anbindung Ihrer Website an Ihre Theasoft-Datenbank so reibungslos wie möglich verläuft, gehen wir wie folgt vor:

1. In einem vorbereitenden Workshop mit Ihren Digitalisierungs- oder Projekt-Manager:innen definieren wir die Anforderungen und den groben Ablauf des Anbindungsprojekts. Zudem einigen wir uns auf feste Ansprechpartner:innen im Künstlerischen Betriebsbüro und in Ihren Kommunikations-, Marketing- und IT-Abteilungen.
2. In einem virtuellen oder persönlichen Gespräch lernen uns die Ansprechpartner:innen kennen. Hier können sie uns von ihren Erfahrungen und Bedenken berichten und eigene Ideen in das Projekt einbringen.
3. Mit Ihrem Kommunikations- und Marketing-Team definieren wir die aus der Theasoft-Datenbank zu exportierenden Entitäten und Felder und halten diese für das Künstlerische Betriebsbüro schriftlich fest. Parallel erfolgt die initiale technische Einrichtung in Abstimmung mit Ihrer IT-Abteilung.
4. Nun erfolgt die schrittweise Abbildung der Theasoft-Einträge auf Ihrer Website. Wir kontrollieren fortlaufend die Ergebnisse und klären etwaige Unstimmigkeiten im wöchentlichen Austausch mit Ihrem Team.
5. Im letzten Schritt führen wir die Website- und Theasoft-Datenbestände zusammen und bereiten die Inbetriebnahme vor. Wir empfehlen als Zeitpunkt für die Inbetriebnahme die Pressekonferenz für die kommende Spielzeit, da hier erfahrungsgemäß am wenigsten zusätzlicher Arbeitsaufwand für Ihr Team entsteht und es seltener zu Verzögerungen kommt.

Von nun an bezieht Ihre Website automatisch Datenbestände aus Theasoft und ist somit stets auf dem aktuellen Stand.

Sprechen Sie uns an

Brauchen Sie Unterstützung bei der Anbindung Ihrer Website an Ihre Theasoft-Datenbank? Dann sprechen Sie uns gerne an! Gemeinsam erarbeiten wir ein passendes Konzept für Ihr Veranstaltungshaus, um einen reibungslosen Übergang zu gewährleisten. Gerne stellen wir Ihnen auch unser spezialisiertes Content-Management-System für Theater-Websites vor und unterstützen Sie, wenn Sie eine neue Theater-Website entwickeln möchten.

Das Problem: 450 Termine, 1 Browser

Gerade zu Bekanntgabe des Programms für die nächste Spielzeit ist der Spielplan prall gefüllt mit allen zukünftigen Terminen der kommenden Monate. Im Mai 2024 standen wir genau vor dieser Situation mit 450 Terminen von Opern, Konzerten, Ballettaufführungen und weiteren Veranstaltungen. Zu diesem Zeitpunkt wurde der Spielplan noch auf dem Server berechnet und als ein großes HTML-Dokument mit der kompletten Liste von Terminen an den Browser geschickt. Dieses Vorgehen ermöglichte zwar eine Filterung nach Sparte oder Zeitraum mit JavaScript, bedeutete aber auch, dass der Browser eine große Menge von Daten laden und verarbeiten musste. Insbesondere der für die Filterung nötige JavaScript-Code schlug hier stark ins Gewicht.

Für mobile Endgeräte, deren Leistung eher in der Mittelklasse angesiedelt ist, kann eine Website mit vielen Elementen oder einer großen Menge an JavaScript-Code eine Verzögerung von Anzeige und Nutzbarkeit im Sekundenbereich bedeuten. Da die Wechselwirkung von Website-Performance und -Erfolg ("Konversionsrate") gut belegt ist, hatten wir gemeinsam mit der Staatsoper Berlin ein strategisches Ziel ausgerufen: Wir wollten die Zeit bis zur Anzeige und Interaktivität des Spielplans deutlich verringern. Um den Erfolg zu überprüfen, würden wir gängige Messwerte wie Googles Core Web Vitals und Serien von Screenshots nutzen, die alle 0,1 Sekunden während des Ladevorgangs aufgenommen werden.

Unsere Lösung: Paginierung und Infinite Scrolling

Das Projekt war klar umrissen: Wir wollten die Größe des HTML-Dokuments verkleinern und die Menge an rechenintensivem JavaScript-Code möglichst gering halten. Frei nach „Divide et impera“ ist die Lösung für die erste Teilaufgabe, die lange Liste aller Termine nicht auf einer einzigen Seite zu rendern, sondern auf viele Seiten verteilt. Mit einer paginierten Darstellung von 10 Terminen pro Seite würden wir bei durchschnittlich 1-3 Vorstellungen am Tag etwa 5-6 Tage abdecken.

Die Aufteilung bedeutet aber, dass eine Nutzerinteraktion nötig ist, um auf die nächste Seite zu navigieren. Zusätzliche Klicks würden das Durchstöbern des Spielplans stören und sich negativ auf die Nutzerbindung auswirken. Wir haben daher mit „Infinite Scrolling“ ein Muster implementiert, das von sozialen Netzwerken und anderen großen Plattformen bekannt ist. Statt per Klick auf die nächste Seite navigieren zu müssen, werden die nächsten Termine im Hintergrund schrittweise nachgeladen, wenn Nutzerinnen und Nutzer nach unten scrollen. Damit ändert sich an der Art der Bedienung nichts, die Ladezeit des ersten Pakets von nur noch 10 Terminen verkürzt sich aber dramatisch.

Das konnten wir uns bei der zweiten Teilaufgabe zu Nutze machen. Um möglichst viel JavaScript-Code entfernen zu können, stellten wir die Filterung des Spielplans auf eine serverseitige Lösung um. Wo eine Eingrenzung auf eine Sparte oder einen Zeitraum zuvor zu Verzögerungen führte, während das JavaScript die Filterung vornahm, würden wir zukünftig eine neue Anfrage an den Server ausführen, der ein neues HTML-Dokument zurückliefert. Das braucht deutlich weniger JavaScript-Code und wir konnten die Dateigröße von 136 kB auf 9 kB reduzieren. Die Dateigröße steht hier nur stellvertretend für die letztendlich eingesparte Rechenzeit, denn weniger Code ist auf allen Geräten schneller ausgeführt.

Das Ergebnis: Eine halbe Sekunde kürzere Ladezeiten

Bereits kurz nachdem wir den Spielplan Mitte Mai 2024 auf die neue Implementierung umgestellt hatten, wurden bei Googles Core Web Vitals im Chrome UX Report (echte Nutzerdaten, letzte 28 Tage) Verbesserungen sichtbar – und das, obwohl die Umstellung nur für die Hälfte des Messzeitraums aktiv war. Auch synthetische Tests zeichneten ein erfolgreiches Bild: In Messungen mit dem Tool WebPageTest zeigte sich für ein simuliertes iPhone X über eine 4G-Verbindung eine Verbesserung der Ladezeit von 2,2 s auf 1,7 s – eine halbe Sekunde schneller!

Schön ist auch zu sehen, dass die Belastung des Browsers (und des Prozessors des Endgeräts) stark zurückgegangen ist: Durch die Reduktion von HTML-Elementen und JavaScript-Code gibt es keine Blockaden des Main Threads (erster Screenshot, zweite Zeile von unten, sehr hohe Auslastung) durch Long Tasks (erster Screenshot, unterste Zeile, drei rote Blöcke) mehr:

Auch in Googles PageSpeed Insights ist die Verbesserung signifikant: im Bereich Performance für mobile Geräte erreicht die Spielplan-Seite 88 von 100 möglichen Punkten, was im Vergleich zu vorher (47 von 100 Punkten) beinahe eine Verdopplung ist. Für die Kategorie „Desktop“ erreicht der neue Spielplan sogar 99 Punkte. Das freut uns sehr, zeigt aber auch, dass es vor allem bei mobilen Geräten noch weiteres Verbesserungspotenzial gibt. Performanceoptimierung ist ein Prozess, der immer weiter geht – und wir nehmen die Herausforderung gerne an.

Update 14.06.2024: optimierte Ladereihenfolge kritischer Ressourcen

Diese Woche haben wir den Prozess weiter voran getrieben und die Ladereihenfolge der für gute Performance kritischen Ressourcen optimiert. Hier geht es um Fragen wie:

• Was soll zuerst geladen werden? JavaScript, CSS oder doch lieber die Web Fonts?
• Welche einzelnen Ressourcen sind vielleicht nicht kritisch und können ans Ende der Warteschlange gesetzt werden?
• Wie sollen die Ressourcen geladen werden? Müssen andere Prozesse warten, bis eine bestimmte Ressource verfügbar ist, oder sind die Ressourcen unabhängig voneinander und können asynchron angefordert werden?
• Wie gehen wir mit den Schriftarten um – zeigen wir eine weiße Seite, bis die Web Fonts geladen sind, oder erst eine generische Ersatzschrift vom Gerät der Website-Besucher*innen?

Mit Hilfe von Harry Roberts' Empfehlungen zur Ladereihenfolge, die er seit Jahren kontinuierlich weiterentwickelt, haben wir unsere Antworten gefunden und umgesetzt. Und die Seite wieder ein bisschen schneller gemacht: Google Pagespeed belohnt uns für die Seite des Spielplans mit nunmehr 93 von 100 Punkten (mobile Geräte).

Da unser Girls’Day 2023 ein voller Erfolg war, sprach aus unserer Sicht nichts dagegen, das damals entwickelte Konzept auch in diesem Jahr wieder einzusetzen.

Für den Girls’Day haben wir die Berufsfelder unserer Firma grob auf vier Bereiche heruntergebrochen: Frontend, Backend, Projektmanagement und Konzeption.
Nach einer Einführung durch uns in die jeweiligen Bereiche, konnten die Mädchen selbst in die Jobs schlüpfen:

In der Rolle der Frontend-Entwicklerin erstellten die Mädchen auf Basis der von uns bereitgestellten Vorlagen ihre eigene Portfolio-Website.

Auf scratch.org konnten sie in der Rolle der Backend-Entwicklerin per Drag&Drop ihr eigenes Online-Spiel programmieren und zum Beispiel „Flappy Bird“ nachbauen.

Den Produktionsweg eines Schulranzens durften sie dann gemeinsam als Projektmanagerinnen planen und mussten unterwegs Zeitprobleme lösen und Deadlines einhalten. „Die Herstellung des Schnittmusters verzögert sich um 2 Tage. Können wir dennoch unsere Deadline einhalten?“

Zu guter Letzt teilten sich die vier Mädchen in zwei Gruppen auf, konzipierten ihre eigene Website auf Papier und am Whiteboard und präsentieren sie anschließend im Stil von „Die Höhle der Löwen“.

In der Konzeptionsphase wurden zwei ähnliche Websites für Innenausstattung und Raumdesign entwickelt:
„Home Zone“ und „7, 8, 9 - Designtime“.

Die Ideen der Mädchen: Auf beiden Websites kann man sich neue Inspirationen für die eigenen vier Wände holen, oder Termine für eine Umgestaltung buchen. Durch die Verwendung von großformatigen Bilder sollen Besucher*innen inspiriert werden und die Möglichkeit erhalten, über ein Formular Kontakt herzustellen.

Auf „Home Zone“ gibt es sogar einen integrierten Webshop, sodass man Deko-Objekte direkt nach Hause bestellen kann. „7, 8, 9 - Designtime“ bietet hingegen die Umgestaltung von ganzen Häusern oder Gärten und besitzt einen eigenen Blog, über den sich neue Kunden und Fans auf dem Laufenden halten können.

Der Tag wurde abschließend in einer Feedback-Runde mit der 5-Finger-Methode[^1] reflektiert.

Dabei stellte sich heraus, dass sie viel Spaß hatten, in die verschiedenen Bereiche zu schnuppern und zwei der Mädchen sich sogar vorstellen können, später in der IT-Branche zu arbeiten.

Schon beim Rundgang durch das Büro ist den Mädchen das „Bällebad“ ins Auge gefallen. Nach der Feedback-Runde wurde dann die Wartezeit auf den Bus mit einem Fotoshooting in der umfunktionierten Badewanne überbrückt.

Für uns war der Tag wieder ein voller Erfolg und auch wir hatten viel Spaß den Mädchen einen Einblick in unsere Berufe und in die Firma zu ermöglichen. Wir freuen uns schon auf den nächsten Girls'Day!

[^1]: Die 5-Finger-Methode:
Daumen: Das fand ich gut
Zeigefinger: Darauf möchte ich hinweisen
Mittelfinger: Das fand ich nicht gut
Ringfinger: Das liegt mir am oder auf dem Herzen
Kleiner Finger: Das kam mir zu kurz

Abseits des Hype und den vielen, vielen Problemen rund um KI-Tools (die ich in diesem Beitrag bewusst ausklammere) habe ich mich ganz nüchtern gefragt: Wie nützlich ist ein KI-Tool für meine tägliche Arbeit als PHP-Entwickler?

Um das herauszufinden, habe ich GitHub Copilot ausgetestet, weil es mir das stärkste KI-Tool für Entwickler:innen zu sein schien. Ich habe es als Plugin für die Entwicklungsumgebung PhpStorm benutzt, in dem es ähnlich einer Autovervollständigung (aber deutlich anders als die PhpStorm-eigene Autovervollständigung) Vorschläge hinter dem Cursor einblendet, die man durchschalten und akzeptieren oder ignorieren kann.

Ich dachte mir: Einfach mal installieren und schauen, was passiert.

Die Ergebnisse waren gemischt. Während ich durch den Einsatz von GitHub Copilot an manchen Stellen Zeit einsparte, büßte ich sie an anderen wieder ein.

Hilfreich für Routineaufgaben, störend bei komplexen Problemen

Gute Ergebnisse lieferte Copilot, wenn Boilerplate-Code nötig war, beispielsweise:

• häufig gesehene Klassen wie User mit typischen Attributen wie Vor- und Nachname
• einfache Unit-Tests
• Dataprovider für Unit-Tests
• Mapping von Datenstrukturen zwischen verschiedenen Kontexten, z. B. von JSON in eine Modell-Klasse

Ein paar Details haben mich besonders erfreut – so führte etwa selbst eine Mischung aus Konstruktor-Parametern, anämischen Settern und domänenspezifischen Methoden mit mehreren Parametern zu brauchbaren Vorschlägen.

Auch kleinere Abweichungen zwischen Parameternamen wie  $neuerVorname  und Klassenattribut-Namen wie  $vorname  wurden richtig aufgelöst.

Bei solchen langweiligen, lästigen Schreibarbeiten hat Copilot einige Tastenanschläge und gelegentliches Nachschauen (z. B. zur Position und zum Datentyp von Parametern) erspart und kleine Glücksgefühle ausgelöst, wenn ich im Flow bleiben und diesen sogar beschleunigen konnte.

Die eingesparte Zeit würde ich über den Tag hinweg typischerweise im einstelligen, an Tagen mit mehr langweiliger Schreibarbeit auch im niedrigen bis mittleren zweistelligen Minutenbereich beziffern.

Je tiefer ich jedoch in einer speziellen Domäne ohne Boilerplate-Gelegenheiten entwickelte, desto schlechter wurden Copilots Vorschläge.

Die Probleme reichten von unpräzisen Namen über veraltete Syntax bis hin zu völlig unpassendem Code. Regelrecht geärgert hat mich Copilot, wann immer es mich mit seinen Vorschlägen aus meinem "Gedanken-runterschreiben-Flow" in einen "Schlechten-Code-reviewen-Modus" drängte.

Wenn ich einen Kommentar mit einer Formulierung wie // Das können wir hier nicht, weil   begann, schlug Copilot neben sinnvollen Begründungen auch Ausreden und unsinnige Argumentationen vor. Mehr als einmal hatte ich das Bedürfnis, den Autor:innen der Trainingsdaten bei ihren Problemen zu helfen.

Mit Copilots schlechten Vorschlägen habe ich in den ersten Wochen typischerweise Arbeitszeit im niedrigen bis mittleren zweistelligen Minutenbereich verloren. Das wirkte sich auch negativ auf meine Arbeitszufriedenheit aus.

Ich lernte daher mit der Zeit, schlechte Vorschläge schneller als solche zu erkennen und zu ignorieren – bald bewegten sich die Arbeitszeitverluste nur noch im einstelligen bis niedrigen zweistelligen Minutenbereich. Damit hielten sich Zeitersparnis und -verlust sowie Freude und Verärgerung ungefähr die Waage.

Mein erster Eindruck von der Arbeit mit Copilot fiel dementsprechend ernüchternd aus. Aber war die Ursache des Problems vielleicht meine stümperhafte Bedienung? Diese Vermutung veranlasste mich dazu, Informationen zur effizienten Nutzung von Copilot zu recherchieren.

Meine erste Anlaufstelle war der Blogpost “Exploring Generative AI”, der schon länger auf meiner Leseliste stand. Birgitta Böckeler, die unter anderem die Erprobung von generativer KI bei dem Software-Unternehmen Thoughtworks koordiniert, hat bereits mehrere hilfreiche und absolut lesenswerte Memos zu dem Thema veröffentlicht.

Ergänzend dazu habe ich den Online-Workshop “Produktiver programmieren mit Github Copilot und ChatGPT” der heise Academy besucht. Ich fand es sehr hilfreich, in einer großen Live-Coding-Session den praktischen Einsatz vorgeführt zu bekommen und mit dem Workshop-Leiter Rainer Stropek als kompetenten Enthusiasten zu sprechen, um meine Erfahrungen einzuordnen. Er hat meine Perspektive deutlich erweitert, insbesondere um Herangehensweisen, ergänzende Tools und geeignete Aufgaben.

Im Folgenden einige Tipps, die ich...

• bereits erfolgreich anwende,
• derzeit noch erprobe, aber plausibel finde,
• vielversprechend finde, aber bisher nicht erproben konnte.

Tipps zur effizienten Nutzung von GitHub Copilot

Copilot als situatives Hilfsmittel

Wer sich mit GitHub Copilot im Werkzeuggürtel an die Entwicklungsarbeit macht, muss wie bei jedem Werkzeug wissen, in welchen Situationen es sich am effizientesten einsetzen lässt. Hier bieten etwa die Memos “In-line assistance - when is it more useful?“ und “In-line assistance - how can it get in the way?“ eine erste Orientierungshilfe. Man kommt aber langfristig nicht umhin, ein eigenes Gespür dafür aufzubauen.

Copilot häufiger abschalten

In Situationen, in denen Copilot voraussichtlich Unsinn generieren wird, empfiehlt es sich, es einfach auszuschalten. So wird man nicht im Arbeitsfluss gestört.

Auf dem Mac bietet das PhpStorm-Plugin dafür von Haus aus die schöne Tastenkombination  Shift  +  Option  +  Command  +  O , die man sich natürlich umlegen kann – oder man benutzt das Copilot-Icon in der Statusleiste oder das Menü.

Erst wenn sich die Situation geändert hat und man Copilot wieder brauchbare Vorschläge zutraut, sollte man es erneut aktivieren.

Bewusst auf Copilot einlassen

Wenn ich eine Teilaufgabe mit der Vorstellung “das könnte was für Copilot sein” beginne, bin ich viel offener für dessen Vorschläge. Statt das Gefühl zu haben, dass mein Flow durch Copilot gestört wird, stelle ich mich auf die Latenz der Vorschläge (mal Sekundenbruchteile, mal wenige Sekunden) und einen gewissen Aufwand ein, um diese gegebenenfalls zu redigieren.

Manchmal neige ich dazu, Copilot zu vermenschlichen. Einerseits glaube ich, dass das grundfalsch ist – andererseits scheint es manchmal nützlich, etwa wenn wir uns das Tool als Junior Developer vorstellen: enthusiastisch, sprüht vor Vorschlägen, ist sich aber der langfristigen Konsequenzen nicht bewusst. Es weiß noch nicht, was es alles nicht weiß und möchte manchmal nicht einsehen, dass es auf dem Holzweg ist.

Einem Junior Developer gebe ich keine vage formulierte, komplexe Aufgabe und erwarte im Gegenzug kein perfektes Programm. Um Aufgaben wie den Softwareentwurf kümmere ich mich, je nachdem auf System-, Komponenten-, Klassen- und teilweise Methoden-Ebene. Ich zerteile komplexe Aufgaben in Teilaufgaben, beschreibe kleine Artefakte und lasse den Junior Developer sich an deren Implementierung versuchen.

Spätestens beim Review des Implementierungsvorschlags hört die Vermenschlichung dann aber auf: Mit einem Menschen würde ich über den Vorschlag diskutieren und Kompromisse eingehen. Das braucht Zeit und Energie - die ich sehr gut investiert finde, wenn der Junior Developer dabei lernt. Copilot hat aus solchen Diskussionen (noch?) keinen langfristigen Lerneffekt - deshalb verwerfe ich unpassende Vorschläge einfach.

Prompt Engineering für Copilot

Die Vorschläge von Copilot hängen maßgeblich vom Algorithmus, den Trainingsdaten und dem jeweiligen Prompt ab, das vom Copilot-Plugin ans Copilot-Backend geschickt wird.

Als Nutzer:innen haben wir auf die ersten beiden Faktoren keinerlei Einfluss. Auch die Prompt-Formulierung können wir bei Copilot (im Gegensatz zu ChatGPT) nicht beeinflussen, denn diese legt das Copilot-Plugin abhängig von der Cursor-Position und dem Kontext selbst fest.

Neben der trivialen Cursor-Position können wir also am meisten auf den Kontext einwirken. Zwei Aspekte spielen dabei eine besonders große Rolle:

• Specification/Comment Driven Development: Indem wir mit ausdrucksstarken Namen und Kommentaren die Absicht textuell beschreiben, helfen wir Copilot dabei, den Kontext zu verstehen. Auch Beispiele können hilfreich sein.

• Neighboring Tabs: Copilot berücksichtigt nicht nur die aktuelle Datei, sondern auch eine unbestimmte Anzahl weiterer geöffneter Dateien. Es lohnt sich also, relevante Tabs geöffnet zu lassen.

GitHub Copilot Chat und ChatGPT 4

In seinem Workshop führte Rainer Stropek zwei Ergänzungen zu GitHub Copilot vor:

• GitHub Copilot Chat ist ein zweites IDE-Plugin, das sich nicht als Autovervollständigung, sondern als Chat-Prompt einbettet und Prompts zur geöffneten Datei entgegennimmt (z. B. “Was macht diese Datei?” oder “Schreib mir einen Unit-Test für diese Datei”).

• ChatGPT 4 wird derzeit wie das öffentlich verfügbare ChatGPT 3.5 nur über die OpenAI-Website angeboten (und ist im Gegensatz zu 3.5 kostenpflichtig). Es erfordert also einen Kontextwechsel aus der IDE, hat aber derzeit noch Feature-Vorteile gegenüber GitHub Copilot Chat, etwa den Direktzugriff auf Online-Inhalte.

Rainer skizzierte in seinem Workshop seine Kriterien für die Wahl eines Tools für ein konkretes Problem, die ich hier tabellarisch ohne jede Garantie zusammenzufassen versuche:

Um die unterschiedlichen Stärken zu demonstrieren, nannte Rainer ein paar interessante Anwendungsbeispiele für Copilot Chat und ChatGPT.

GitHub Copilot Chat:

• “Generier mir zu dieser Datei ein Diagramm in mermaid.js-Syntax” – ich habe noch keine Vorstellung davon, wie gut das funktioniert. Ein Knackpunkt könnte sein, dass ich Diagramme meistens interessanter finde, wenn sie das Zusammenspiel mehrerer Klassen zeigen – verarbeitet Copilot Chat alle Dateien in einem Verzeichnis als Kontext für einen solchen Prompt?

• “Erkläre mir diese Klasse” – könnte wertvoll beim Verständnis fremder oder gar dem Lernen neuer Sprachen oder Sprachfeatures sein.

• Rubberducking mit Prompts wie “Was könnte man an dieser Klasse verbessern?”

ChatGPT 4:

• Die Eingabe eines Architektur-Diagramms in Form einer Bilddatei mit dem Prompt “Erklär mir dieses Architektur-Diagramm” lieferte ein scheinbar brauchbares Ergebnis. Highlight für mich war, dass ChatGPT eine Komponente aufgrund des stark abgekürzten Namens nicht eindeutig zuordnen konnte, aber eine als solche gekennzeichnete Vermutung dazu anstellte.

• “Gib mir die SQL-Statements aus dem mitgeschickten Screenshot” veranlasste ChatGPT zunächst zu einer Texterkennung, dann zu einer Prüfung, ob es sich bei dem erkannten Text um gültiges SQL handelte – diese schlug fehl, was wiederum eine Korrektur des erkannten Textes auslöste.

Den selbstständigen Ablauf empfand ich in den ersten Sekunden beeindruckend - und in der folgenden halben Minute, in der man ChatGPTs Verarbeitungsschritte mitlesen konnte bzw. musste, recht langwierig. Die Selbstkontrolle der Screenshot-Texterkennung wirkte auf mich angeberisch, denn mir schien der Screenshot so deutlich, dass eine Texterkennung damit keine Probleme gehabt haben sollte. Daraus habe ich für mich den Schluss gezogen, dass spezialisierte Tools wohl auch in Zukunft bessere Ergebnisse liefern werden als ein Chat-Hans-Dampf-in-allen-Gassen. Allerdings muss man diese erst mal kennen oder zumindest wissen, wo man nach ihnen suchen soll. Da hat ChatGPT eine niedrigere Einstiegshürde.

Frischer Mut für die Nutzung von GitHub Copilot und Konsorten

Motiviert durch meine Recherchen möchte ich nun lernen, wie ich Copilot effizienter einsetzen kann und verlängere daher mein Experiment. Besonders freuen würde ich mich über einen Austausch mit meinen Kolleg:innen, wofür dieser Beitrag ein Anfang sein könnte.

Rainer sagte, dass er mit Copilot beim Coden etwa doppelt so viele Story Points wie bisher schaffen würde. Er fügte jedoch hinzu, dass er mit mehreren Sprachen jongliere, die er dann nicht immer fließend spräche. Er wisse jedenfalls nicht mehr, wann er das letzte Mal Stack Overflow geöffnet habe.

Sein Anwendungsfall unterscheidet sich zwar deutlich von meinem, in dem ich tagein, tagaus praktisch nur PHP schreibe – aber ein bisschen Steigerung ist bei mir bestimmt noch drin.

Im Bereich Technical Writing und bei Architekturthemen schaffe Rainer auch drei- bis fünfmal so viel, sagt er. Bei Letzterem setze er allerdings noch weitere KI-Tools ein, z. B. für die automatische Generierung von Transkripten seiner Architektur-Meetings via Teams. Diese dienen dann ihrerseits als Input für ChatGPT, sodass es Fragen zur Architektur beantworten kann. Das behalte ich mal im Hinterkopf.

Ein Satz von Rainer hat mir besonders dabei geholfen, meine eigenen Erfahrungen einzusortieren:

GitHub Copilot kann zwar Seniors produktiver, aber Juniors nicht zu Seniors machen.

Ansonsten bleibe ich gespannt, was die Zukunft bringen wird. "AI-Driven Legacy Modernization"? Count me in!

PS: Zwischen dem ersten Entwurf dieses Textes und seiner Veröffentlichung sind gut 8 Wochen vergangen (huch!). Mittlerweile bemerke ich unangenehm, wenn ich ohne Copilot arbeite, weil ich mich an einen neuen Flow gewöhnt habe: Sobald mein Gespür für geeignete Copilot-Aufgaben anschlägt, richte ich mich darauf ein, in der nächsten Sekunde einen Vorschlag zu bewerten - und wenn der nicht kommt, warte ich manchmal eine weitere Sekunde, bis ich merke: "Ach Mist, kein Copilot! Jetzt muss ich mir doch alle lästigen Details von Grund auf zusammen denken."

Disclaimer

Die geschilderten Erfahrungen sind meine persönlichen. Die Copilot-Erfahrung könnte zwischen verschiedenen Persönlichkeiten, Arbeitsweisen, Aufgaben und Umgebungen deutlich variieren. Selbst der Unterschied zwischen Symfony und allgemeinem PHP könnte sich z. B. aufgrund der Menge von Trainingsdaten auf die Erfahrung auswirken.

Bei meinen Tests wurde zwar Quellcode aus Kundenprojekten an GitHub Copilot übertragen. GitHub sichert aber zu, dass diese Daten ausschließlich zur Generierung von Vorschlägen verwendet werden. Insbesondere werden sie nicht als Trainingsdaten verwendet, sodass sie sich nicht in Vorschlägen für andere Entwickler:innen wiederfinden.

Die Übertragung an GitHub sehe ich unproblematisch, da wir den Quellcode unserer Kundenprojekte ohnehin bei GitHub verwalten.

Die neueste Version WCAG 2.2, die im Oktober 2023 vom W3C veröffentlicht wurde, bringt neun neue Kriterien mit sich, die insbesondere auf die Bedürfnisse von Menschen mit Sehbehinderungen, kognitiven und motorischen Beeinträchtigungen sowie die Nutzung von Touchscreen-Geräten abzielen. Diese Änderungen sind eine Weiterentwicklung der bereits existierenden Kriterien und leiten sich aus fünf Jahren Praxiserfahrung mit der Version WCAG 2.1 ab.

Kriterium 4.1.1 wird entfernt

Eine der bedeutendsten Änderungen ist zunächst aber die Entfernung des Erfolgskriteriums 4.1.1 Parsing. Der tatsächliche Nutzen dieses Kriteriums, das vor allem auf die Validität des HTML-Codes abzielte, war schon seit langem umstritten. Unstrittige Probleme im Zusammenhang mit ungültigem Markup, die sich auf Menschen, die Bildschirmlesegeräte verwenden, auswirken könnten, werden weiterhin durch spezifischere Kriterien wie 1.3.1 Info and Relationships und 4.1.2 Name, Role, Value abgedeckt.

Sechs neue Kriterien in den Stufen A und AA

Von den neu eingeführten Kriterien sind sechs in den Konformitätstufen A und AA angesiedelt, und werden damit absehbar für öffentliche Stellen und Unternehmen relevant werden.

• 2.4.11 Focus Not Obscured ergänzt Anforderungen, dass fokussierte Elemente nicht von anderen überdeckt werden.
• 2.5.7 Dragging Movements fordert, alternative Möglichkeiten zu Ziehbewegungen anzubieten, da Drag-and-Drop-Funktionen, verschiebbare Karussells, interaktive Karten oder Schieberegler für Benutzer problematisch sein können, die zwar Maus-/Toucheingaben verwenden, aber nicht über die nötige Geschicklichkeit verfügen, um diese Bewegungen sicher und zuverlässig auszuführen.
• 2.5.8 Target Size stellt sicher, dass interaktive Elemente eine Mindestgröße von 24x24 CSS-Pixeln haben, denn das Aktivieren kleiner Ziele kann für Menschen mit Einschränkungen der Feinmotorik eine Herausforderung sein.
• 3.2.6 Consistent Help zielt darauf ab, dass Hilfeoptionen auf Webseiten seitenübergreifend in der gleichen Reihenfolge angezeigt werden, um die Navigation für Nutzer zu erleichtern.
• 3.3.7 Redundant Entry schreibt vor, dass Informationen, die bereits vom Nutzer eingegeben wurden, nicht erneut eingetragen werden müssen, es sei denn, es gibt zwingende Gründe dafür.
• 3.3.8 Accessible Authentication verlangt, dass kognitive Funktionstests wie das Erinnern von Passwörtern, mathematische Puzzles oder andere Formen von CAPTCHAs vermieden oder alternative Methoden angeboten werden, um diese zu umgehen (z.B. Einsatz eines Passwort-Managers, Authentifizierung via Fingerabdruckscan, physisches Security-Token oder App).

Die gesamte Liste inklusive der drei Kriterien in Stufe AAA gibt es auf der Website des W3C einzusehen.

Welche Bedeutung hat die Veröffentlichung der WCAG 2.2?

Die offensichtliche Frage ist natürlich, ab wann die neuen Anforderungen erfüllt werden müssen. Streng genommen bildet weiterhin die WCAG 2.1 die rechtliche Grundlage für Konformitätsprüfungen, die neuen Kriterien werden daher noch nicht bei Tests herangezogen. Es ist aber davon auszugehen, dass nationale und internationale Richtlinien und Gesetze in naher Zukunft aktualisiert werden, um die WCAG 2.2 einzubeziehen.

Das W3C empfiehlt daher, dass Webseiten ab sofort anstreben, die WCAG 2.2 zu erfüllen. Wer schon den Anforderungen der WCAG 2.1 gerecht wird, muss wahrscheinlich nur wenig Aufwand betreiben, um den neuen Standard zu erreichen. Besonders bei der Umsetzung neuer Produkte und Dienstleistungen ist es nachhaltiger, bereits  heute die neuen Kriterien mit einzubeziehen, als sie später nachzurüsten.

Grundsätzlich stellen die WCAG Richtlinien Mindestanforderungen an barrierefreie Websites dar; man kann und darf sich jederzeit auch über die Buchstaben des Gesetzes hinaus an den Geist des Gesetzes halten und mehr für Inklusion tun, als minimal vorgeschrieben. Es steht außer Frage, dass Barrierefreiheit auch unabhängig von rechtlichen Anforderungen eine gute Idee ist.

Bei GitHub handelt es sich um eine Online-Plattform, die eine effektive Zusammenarbeit an gemeinsamen Projekten ermöglicht. Am häufigsten wird sie Ihnen im Zusammenhang mit Open-Source-Software begegnen. GitHub eignet sich aber nicht nur für die gemeinsame Arbeit an öffentlich einsehbarem Code, sondern auch für nicht-öffentlichen Code in Unternehmen oder anderen Organisationen. Wer welchen Zugriff erhält, lässt sich genauestens kontrollieren.

Herzstück von GitHub ist eine Versionsverwaltungs-Software namens Git, die vom Linux-Erfinder Linus Torvalds entwickelt wurde. Sie ermöglicht es, jede noch so kleine Änderung an einem Projekt ressourcenschonend nachvollziehbar zu machen. Git speichert nämlich nur die Unterschiede zwischen verschiedenen Dateiversionen, nicht die Versionen selbst.

Git bietet einige nützliche Funktionen, die GitHub nochmal erweitert. Bei der Arbeit mit dem Tool werden Ihnen Begriffe wie "Commits", "Pull Requests" und "Merges" begegnen, deren genaue Bedeutung wir Ihnen im Folgenden erläutern.

Erste Schritte mit GitHub

So erstellen Sie einen GitHub-Account

Bevor Sie mit GitHub loslegen können, benötigen Sie einen Account. Öffnen Sie dazu einfach die GitHub-Website (https://github.com/) und tippen Sie in das mit "Email address" beschriftete Eingabefeld die E-Mail-Adresse ein, die Sie zukünftig für Ihren GitHub-Zugang nutzen möchten. Klicken Sie anschließend auf die daneben stehende Schaltfläche mit der Beschriftung "Sign up for GitHub".

Sie werden nun zum Prozess für die Account-Erstellung weitergeleitet. Legen Sie ein sicheres Passwort und einen aussagekräftigen Benutzernamen fest. Beachten Sie dabei, dass dieser Benutzername allen Projektbeteiligten angezeigt wird.

Folgen Sie anschließend dem auf GitHub beschriebenen Prozess.

So treten Sie dem webfactory-Repository bei

Sie erhalten von uns eine Einladung zu Ihrem webfactory-Repository.

Ein Repository (zu Deutsch "Aufbewahrungsort") beinhaltet alle mit Ihrem Projekt verbundenen Dateien und deren unterschiedliche Versionen. Es ist somit Dreh- und Angelpunkt für unsere Zusammenarbeit.

Öffnen Sie die Einladungs-Mail und klicken Sie auf die Schaltfläche "View invitation". Sie haben nun die Möglichkeit, die Einladung anzunehmen oder abzulehnen. Erst wenn Sie die Einladung angenommen haben, können wir mit Ihnen auf GitHub zusammenarbeiten.

Wir schützen alle Repositorys mittels 2-Faktor-Authentisierung (2FA), um die Vertraulichkeit der Projektdateien zu gewährleisten. Daher muss jeder Nutzer mit Zugriff auf das Repository ebenfalls die 2-Faktor-Authentisierung für seinen GitHub-Account aktivieren. Bitte sprechen Sie uns an, falls Sie dabei Hilfe benötigen sollten.

Wenn Sie das Repository öffnen, wird Ihnen zunächst der Reiter "Code" und damit die Verzeichnisstruktur des Projekts angezeigt. Klicken Sie sich gerne durch die einzelnen Verzeichnisse, wenn Sie neugierig sind. Ein Tipp: Neben dem Verzeichnisnamen sehen Sie, welches die letzte Änderung innerhalb dieses Verzeichnisses war und wann sie erfolgt ist. Das ist häufig ein guter Hinweis darauf, wo die interessantesten Stellen im Quellcode sind.

Der Code-Tab: Die Übersichtsseite Ihres Projekts

Ist in der Symbolleiste oben links der Reiter Code hervorgehoben, befinden Sie sich auf der Übersichtsseite des Repository. Hier finden Sie die Verzeichnisstruktur des Quellcodes Ihres Projekts. Direkt über den Verzeichnissen wird Ihnen die letzte Änderung (Commit) angezeigt und wer diese vorgenommen hat. Rechts finden Sie zudem die Gesamtzahl der bisher vorgenommenen Commits, gekennzeichnet durch ein Uhr-Symbol. Klick Sie darauf, um eine Historie der Änderungen einzusehen.

Weiter unten auf der Seite wird Ihnen die README.md des Projekts angezeigt. Dabei handelt es sich um eine einfache Textdatei, in der wir wichtige Basisinformationen über das System, Ansprechpartner und Links zur Dokumentation sammeln.

Sollten Sie einmal nach einer bestimmten Information im Projekt suchen, aber nicht wissen, wo diese zu finden ist, können Sie die Suchleiste am oberen Seitenrand verwenden.

Benachrichtigungen: So steuern Sie, welche E-Mails Ihnen GitHub schickt

Während der Projekarbeit ist im Repository eine Menge los. Wenn Sie für jedes Vorkommnis eine Benachrichtigung von GitHub erhalten, werden Sie wahrscheinlich schnell den Überblick verlieren. Daher empfehlen wir Ihnen, die Benachrichtigungseinstellungen an Ihre Bedürfnisse anzupassen.

Öffnen Sie dafür Ihr Repository und klicken Sie auf die mit einem Augen-Symbol versehene Schaltfläche mit der Beschriftung "Watch". Am besten setzen Sie in dem sich nun öffnenden Drop-down-Menü ein Häkchen bei "Participating and @mentions", sofern die Option nicht ohnehin schon vorausgewählt ist. Sie erhalten dann nur Benachrichtigungen von Kommunikationsfäden, in die Sie sich selbst einbringen, und wenn Sie jemand mit Ihrem Benutzernamen direkt erwähnt.

Alternativ können Sie auch selbst festlegen, über was Sie zukünftig benachrichtigt werden sollen. Klicken Sie dafür im erwähnten Drop-down-Menü auf "Custom" und setzen Sie die entsprechenden Häkchen.

Natürlich kann es trotzdem vorkommen, dass Ihnen die Menge der Benachrichtigungen zwischenzeitlich zu viel wird. Um das zu vermeiden, können Sie die Benachrichtigungen für einzelne Issues und Pull Requests (beide Begriffe erläutern wir weiter unten im Text) ausschalten. Klicken Sie hierzu in der rechten Seitenleiste auf die Schaltfläche mit der Beschriftung "Unsubscribe" und einem durchgestrichenen Glocken-Symbol.

Wenn Sie tiefer in das Thema Benachrichtigungseinstellungen einsteigen möchten, empfehlen wir Ihnen das entsprechende Kapitel in der GitHub-Dokumentation.

Was ist ein Issue?

Ein wichtiger Begriff bei der Zusammenarbeit auf GitHub ist das Issue. Bei Open-Source-Projekten wird diese Funktion beispielsweise genutzt, um auf Fehler in der Software hinzuweisen.

Wir verwenden Issues in unseren Projekten vor allem für die Erstellung von Arbeitsaufträgen. Eröffnen Sie ein Issue, wenn Sie Verständnisfragen haben, Korrekturbedarf erkennen oder eigene Ideen beisteuern möchten. Wir versuchen im Rahmen unseres Suppports schnellstmöglich darauf zu reagieren.

Wir bevorzugen es, den Austausch über E-Mail möglichst durch die Verwendung von Issues zu ersetzen, denn dadurch wird die Kommunikation für alle Beteiligten nachvollziehbarer. Hängen Sie daher gerne relevante Screenshots oder PDF-, Word- oder Excel-Dateien an Ihre Issues an. Klicken Sie dazu bei der Erstellung in der Symbolleiste des Texteingabefelds auf das Büroklammer-Symbol ("Attach files") oder ziehen Sie die Dateien einfach in das Kommentarfeld. Die rechte Spalte neben der Issue-Maske (Assignees, Labels, Projects, Milestones, Development) können Sie beim Erstellen eines Issues einfach ignorieren. Sie ist vor allem für das Projektmanagement relevant.

Um die Kommunikation kurz und bündig zu halten, verzichten Sie am besten auf Grußformeln und Signaturen. Sie können das @-Zeichen dazu verwenden, einzelne Beteiligte direkt anzusprechen. Sobald Sie das Zeichen eintippen, erscheint eine Liste mit möglichen Ansprechpartnern. Praktisch, wenn Ihnen die Schreibweise eines Benutzernamens entfallen ist.

Übrigens können Sie auf Benachrichtigungen auch per Mail reagieren. Das hat den Vorteil, dass Sie dafür nicht von Ihrer E-Mail-Software zu GitHub wechseln müssen. Beachten Sie dabei allerdings, dass die komplette Mail als Kommentar im Issue landet. Am besten schreiben Sie daher auch in diesem Fall ohne Grußformeln und löschen alles außer Ihrer eigentlichen Nachricht aus dem E-Mail-Text – sonst wird es im Issue mitunter unübersichtlich. Eine wichtige Einschränkung beim Antworten per Mail: Bilder und Anhänge aus E-Mails kommen leider nicht in GitHub an.

Was ist ein Pull Request?

Ein weiterer wichtiger Begriff im Zusammenhang mit GitHub ist der Pull Request. Damit schlagen Entwickler Änderungen am Code vor, um sie untereinander zu besprechen. Je nach Schwierigkeit und Umfang der Aufgabe können ein oder mehrere weitere Entwickler prüfen, ob die Änderungen verständlich, inhaltlich korrekt, vollständig und der Aufgabe angemessen sind. Die Änderungen treten erst dann in Kraft, wenn der Pull Request akzeptiert und mit dem Produktions-Code zusammengeführt wird. Diesen Vorgang nennt man Merge.

Auch Sie können gerne Pull Requests nutzen, um Änderungen vorzuschlagen. Manche unserer Kunden haben damit Tippfehler korrigiert und Übersetzungen gepflegt – und ein technisch besonders versierter Kunde hat darüber auch schon Änderungen am Programmcode vorgenommen.

Wir sehen uns auf GitHub!

Im ersten Moment kann der Funktionsumfang von GitHub einschüchternd wirken. Doch die Einarbeitung in das Tool lohnt sich, denn die gemeinsame Projektarbeit wird dadurch für alle Beteiligten effizienter und nachvollziehbarer.

Wir hoffen, dass Ihnen dieser Artikel bei den ersten Schritten mit GitHub geholfen hat. Sollten sich bei Ihnen weitere Fragen ergeben haben, schreiben Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.

Wir entwickeln seit 1997 Webanwendungen für unsere Kunden, deren Hauptziel es häufig ist, bestehende Prozesse zu vereinfachen und den Arbeitsaufwand für alle Beteiligten zu minimieren. Im Folgenden möchten wir Ihnen fünf Beispiele vorstellen, die unseren Kunden richtig viel Arbeit abgenommen haben.

Beispiel 1: Youthpass – PDF-Zertifikate für Erasmus+

Wer sich in einem durch Erasmus+ Jugend oder das Europäische Solidaritätskorps geförderten Projekt engagiert, kann sich dafür seit 2007 ein digitales Teilnahmezertifikat ausstellen lassen. Ermöglicht wird das durch eine Webanwendung, die wir für unseren Kunden JUGEND für Europa entwickelt haben.

Dank dieser Anwendung können die Verantwortlichen der über ganz Europa verstreuten Projekte eigenständig die für die Zertifikate benötigten Daten erfassen und die offiziellen Zertifikate erstellen und ausdrucken. Ohne die Webanwendung hätten die Informationen erst von einer zentralen Stelle gesammelt werden müssen, um anschließend Zertifikate zu erstellen und mühsam an die Teilnehmer zu versenden. Das hätte den Prozess erheblich verlangsamt.

Die Webanwendung bringt weitere Vorteile mit sich:

• Teilnehmerlisten lassen sich in Form von Excel-Dateien importieren.
• Ein integriertes Nachrichtensystem erleichtert die Kommunikation mit den Projektteilnehmern.
• Die Anwendung generiert automatisch barrierefreie PDF-Zertifikate auf Basis der im System hinterlegten Daten und stellt sie den Teilnehmern zum Download bereit.
• Die Nationalagenturen des Jugendprogramms pflegen die Übersetzungen der in 28 Sprachen verfügbaren Zertifikate selbstständig über die Webanwendung.

Seit Einführung unserer Lösung konnten die über 30.000 involvierten Organisationen bereits mehr als 1,5 Millionen Zertifikate für über 90.000 Projekte ausstellen.

Mehr zur Youthpass-Webanwendung

Beispiel 2: OBELIS – Online-Berichterstattung für Ladeinfrastruktur

Die NOW GmbH koordiniert die wissenschaftliche Begleitung der Förderrichtlinie Ladeinfrastruktur, mit der der Ausbau von Ladestationen für Elektrofahrzeuge in Deutschland vorangetrieben werden soll. Wer die Mittel in Anspruch nimmt, übermittelt im Gegenzug Stamm- und Betriebsdaten der geförderten Ladestationen zwecks wissenschaftlicher Auswertung an die NOW GmbH.

Bevor wir mit der Entwicklung einer Webanwendung beauftragt wurden, stellten die Ladestationbetreiber ihre Daten in Form von Excel-Tabellen zur Verfügung. Das beeinträchtigte die Datenqualität und damit die Belastbarkeit der Auswertung erheblich.

Gemeinsam mit der NOW GmbH und ausgewählten Zuwendungsempfängern entwickelten wir daher OBELIS ("Online-Berichterstattung Ladeinfrastruktur"). Diese Webanwendung bietet folgende Vorteile:

• Zuwendungsempfänger können ihre Stammdaten direkt im Browser eintragen.
• Sie können die Betriebsdaten mehrerer Ladenstationen gleichzeitig melden.
• Sie erhalten eine Meldebestätigung im PDF-Format zur Einreichung bei der Bewilligungsbehörde.
• Die Anwendung ermöglicht das Importieren von Betriebsdaten als Excel-Datei und erleichtert die Normalisierung der Daten über einen Wizard.

OBELIS ist seit Frühjahr 2019 im Einsatz und hilft der NOW GmbH dabei, wissenschaftlich belastbare Prognosen für den zukünftigen Bedarf an öffentlicher Ladeinfrastruktur zu erstellen.

Mehr zur OBELIS-Webanwendung

Beispiel 3: Deutsch-Südafrikanischer Reisedienst – Visuelle Aufbereitung von Reiseverläufen

Der Deutsch-Südafrikanische Reisedienst (DSAR) vermittelt seit über 50 Jahren Reisen nach Namibia, Südafrika und Botswana.

Im Sommer 2018 halfen wir dem Bonner Unternehmen dabei, seine Website konzeptuell zu überarbeiten und mit nützlichen neuen Funktionen auszustatten. Das Highlight bildet der interaktive Reiseverlauf: Während Besucher in diesem herunterscrollen, werden ihnen für jeden Reisetag auf der linken Seite die Sehenswürdigkeiten und auf der rechten Informationen zur Unterkunft angezeigt. Dank der horizontal darüber verlaufenden Zeitleiste wissen sie stets, an welchem Punkt der Reise sie sich gerade befinden. All diese Informationen werden automatisch aus dem internen Verwaltungssystem des Anbieters importiert: Jeder einzelne der mehreren Tausend im Verwaltungssystem erfassten Reiseverläufe kann mit einem Kurzbefehl in jeden beliebigen Text auf der Website eingebunden werden, ohne Copy-Paste und ohne Gestaltungsaufwand.

Das bietet die neue DSAR-Website ihren Besuchern:

• Übersichtliches Design mit klarer Kommunikation der verfügbaren Reiseziele und -formate
• Möglichkeit zum Speichern von Tourvorschlägen ohne Anlegen eines Nutzerprofils
• Interaktive Visualisierung der Reiserouten mit weiterführenden Informationen zu den Reisestationen und Unterkünften

Seit September 2021 können Website-Besucher sich von einem digitalen Beratungs-Tool zudem Reiseverläufe vorschlagen lassen, die zu ihren persönlichen Vorlieben passen.

Mehr zur neuen DSAR-Website

Beispiel 4: Krankenkassen.de – Digitale Wechselanträge mit Online-Unterschrift

Krankenkassen.de ist ein unabhängiges Informationsportal der Berliner Agentur Euro-Informationen, auf dem sie die Leistungen von über 70 gesetzlichen Krankenkassen vergleicht und in Form von verbraucherfreundlichen Texten journalistisch aufarbeitet.

Wir betreuen die Website bereits seit 2002 und statteten sie im Sommer 2015 mit einem responsiven Design inklusive mobiloptimierter Darstellung aus. Kurz darauf folgte die Einführung einer Vergleichsfunktion für Krankenkassenleistungen und -zusatzbeiträge.

Seit 2018 können die Nutzer von Krankenkassen.de außerdem von einem digitalen Wechselservice Gebrauch machen, der über folgende Funktionen verfügt:

• Automatische Übertragung von Eingaben aus Web-Formularen in PDF-Aufnahmeanträge für Krankenkassen
• Seit 2020 Möglichkeit der elektronischen Unterschrift und der direkten Übermittlung von Wechselanträgen an Krankenkassen via API-Anbindung

2022 ermöglichten wir es Krankenkassen.de zudem, vollständig auf Cookies und Tracking durch Werbepartner zu verzichten. Damit kann die Website ohne Cookie-Consent betrieben werden.

Mehr zum Informationsportal Krankenkassen.de

Beispiel 5: Gemeinsamer Bundesausschuss – Online-Bestellsystem für Druckerzeugnisse

Der Gemeinsame Bundesausschuss (G-BA) ist im deutschen Gesundheitswesen das höchste Gremium der Selbstverwaltung. Zu von ihm beschlossenen Richtlinien stellt er Informationsmaterial als Druckerzeugnisse zur Verfügung, die berechtigte Organisationen (etwa Krankenhäuser) kostenfrei bestellen können.

Der G-BA arbeitet mit verschiedenen Druckereien zusammen, die für die Herstellung, Lagerung und den Versand der Unterlagen verantwortlich sind. Der Aufwand, der mit der Koordination von Bestellungen einherging, war daher früher sehr hoch.

Mit unserer Webanwendung haben wir die Prozesse wesentlich vereinfacht und stark automatisiert. Nun ist sofort ersichtlich, welche Materialien verfügbar sind, sodass umgehend eine Bestellung mit der benötigten Stückzahl aufgegeben werden kann. Das System verteilt die Bestellungen automatisch auf die einzelnen Druckereien. Diese erhalten eine E-Mail mit Einzelheiten zu den angeforderten Druckerzeugnissen und können über einen Link den Versand bestätigen und Teillieferungen anzeigen.

Der neue Prozesse bringt zahlreiche Verbesserungen mit sich:

• Die Lagerbestände bei den einzelnen Druckereien sind jederzeit einsehbar.
• Die integrierte Berichtsfunktion liefert Daten zu Bestellmengen der einzelnen Druckerzeugnisse, wie sich diese im Laufe der Zeit entwickelt haben, an welche Organisationen sie ausgeliefert wurden und welche Druckereien für die Herstellung verantwortlich waren.
• Alle Abläufe wurden in einem System vereint, sodass die Integration mit den Bestandsmanagementsystemen der Druckereien entfällt.
• Durch Benachrichtigungen beim Unterschreiten von anpassbaren Schwellenwerten lassen sich Ausschreibungen für Nachdrucke rechtzeitig planen.

Die Einführung der Webanwendung reduzierte den mit der Bestellung von Druckerzeugnissen verbundenen Aufwand für den G-BA und die Druckereien erheblich.

Mehr Informationen zur Webanwendung des G-BA

Sprechen Sie uns an

Haben Sie diese Beispiele zum Nachdenken angeregt, welche Ihrer Arbeitsprozesse Sie durch eine Webanwendung vereinfachen könnten, um die digitale Transformation in Ihrer Organisation voranzubringen? Dann sprechen Sie uns gerne an. Gemeinsam mit Ihnen analysieren wir, an welchen Stellen Optimierungspotenzial besteht. Anschließend erarbeiten wir ein Konzept, mit dem wir dieses verwirklichen.

Sie sind an weiteren Beispielen für Webanwendungen interessiert? Dann empfehlen wir Ihnen unseren Blog-Post "Praxisbeispiele: Fünf Webanwendungen aus unserem Hause".

Barrierefreiheit sollte nicht nur als Verpflichtung, sondern vor allem als Chance begriffen werden.

1. Vielfalt und Inklusion

In einer Gesellschaft, die Vielfalt und Inklusion schätzt, sollte der digitale Raum keine Ausnahme bilden. Barrierefreie Websites ermöglichen es Menschen mit unterschiedlichen Fähigkeiten und Einschränkungen, ohne Hürden am digitalen Leben teilzunehmen. In Deutschland wird die Förderung der Vielfalt als Grundwert angesehen, und barrierefreie Websites sind ein Schlüssel dazu.

2. Gesetzliche Vorgaben

Die Gesetzgebung in Deutschland verpflichtet Unternehmen und öffentliche Einrichtungen dazu, barrierefreie Angebote im Internet bereitzustellen. Die UN-Behindertenrechtskonvention, die von Deutschland ratifiziert wurde, und das deutsche Behindertengleichstellungsgesetz (BGG) setzen klare Maßstäbe für die Barrierefreiheit im digitalen Raum. Das Nichteinhalten dieser Vorschriften kann nicht nur rechtliche Konsequenzen nach sich ziehen, sondern auch das Image eines Unternehmens erheblich beeinträchtigen.

3. Demografischer Wandel

Der demografische Wandel verändert die Altersstruktur der Bevölkerung. Mit einer älter werdenden Gesellschaft steigt auch die Anzahl der Menschen mit altersbedingten Einschränkungen. Es profitieren daher nicht nur Menschen mit angeborenen Behinderungen von Barrierefreiheit, sondern alle, die im Alter vermehrt auf einen einfachen Zugang zu Informationen und Dienstleistungen angewiesen sind.

4. Wirtschaftlicher Nutzen und Kundenbindung

Unternehmen, die sich aktiv für Barrierefreiheit einsetzen, schaffen ein positives Image als sozial verantwortliche Organisationen. Das bindet nicht nur bestehende Kunden, sondern kann auch neue Kunden anziehen, die bewusst nach Unternehmen suchen, die ihre ethischen Werte teilen. Wichtig ist auch, die wachsende Zielgruppe älterer Menschen nicht aus den Augen zu verlieren.

Barrierefreiheit kann als Differenzierungsmerkmal und positives Alleinstellungsmerkmal dienen und wird zu einer strategischen Entscheidung für Unternehmen.

Fazit

Barrierefreie Websites und Webanwendungen sind mehr als nur ein Trend – sie sind eine Antwort auf die Forderungen nach Vielfalt, gesellschaftlicher Verantwortung und demografischem Wandel. Unternehmen und Institutionen, die diese Bedeutung erkennen, gestalten nicht nur eine inklusive digitale Welt, sondern sichern auch ihre eigene Zukunft.

Es ist an der Zeit, eine digitale Welt zu schaffen, die für uns alle zugänglich ist und von der wir alle gleichermaßen profitieren können.

Wo geht die Reise hin?

Zum Auftakt ging es darum, die Chancen und Herausforderungen des digitalen Wandels zu benennen und aufzuzeigen, welche Entwicklungen möglich sein könnten.

Prof. Holger Simon, Geschäftsführer der veranstaltenden Pausanio GmbH, definierte das „Web 3.0“ als Nachfolger des „Mitmach-Web2.0“. Das Web 3.0 bringe Virtual Reality, „Semantik“ und Künstliche Intelligenz, die mit rasanter Geschwindigkeit beginne, Inhalte zu „verstehen“. Digitalisierung schaffe Mehrwert durch die schnelle, sofortige Kommunikation, die mit Papier nicht möglich sei. Sie ermögliche Kollaboration, bei der wir miteinander und zusammen arbeiten könnten, ohne physisch beisammen zu sein. Und dadurch, dass Computer und Software zukünftig Komplexität so reduzieren könnten, dass Probleme für Menschen verständlich würden.

Andree Haack, Dezernent für Stadtentwicklung, Wirtschaft, Digitales und Regionales der Stadt Köln, sah die große Herausforderung in der Digitalisierung der Verwaltung darin, dass oft „linear“ gedacht und nur das digitalisiert werde, was bereits analog vorhanden sei. Es sei aber viel wichtiger, „warum überhaupt?“ zu fragen und die Veränderungen „disruptiv“ anzugehen, also vollständig neue Wege einzuschlagen.

Dr. Annette Doms, Beraterin für „Web3“, sah mit der von Apple angekündigten VR/MR-Brille „Vision Pro“ das „Metaverse“ an der Schwelle des Durchbruchs. Die Zukunft werde digitale Orte und digitale Communities hervorbringen, in denen sich parallele Gesellschafts- und Wirtschaftsstrukturen entwickeln könnten. Blockchain und NFTs würden die Möglichkeit bringen, dort „digitalen Besitz“ zu erwerben. Eine Herausforderung werde es sein, die Interoperabilität zwischen den verschiedenen „Metaversen“ zu schaffen.

Dr. Felicia Sternfeld, Direktorin des Europäischen Hansemuseums in Lübeck, setzte dem fünf Thesen zur Bedeutung von Museen entgegen. Museen hätten die „Aura der Originale“, die einen Wert an sich darstelle und digital nicht ersetzt werden könne. Insofern müsse es darum gehen, weiter vor Ort zu erleben, aber ergänzend digital zu vernetzen, zu erweitern und den Austausch zu ermöglichen. Museen seien als hoch vertrauenswürdig angesehen und damit ein unerlässlicher Anker für Gesellschaften. In einer „digitalen Kakophonie“ und der oft unklaren Herkunft von Inhalten und Information würden Museen weiter eine verlässiche Quelle für geprüfte, authentische, kuratierte Information bleiben.

Digital Literacy

Im Gegensatz dazu war der nachfolgende Vortrag von Dr. Christian Gries, Leiter der digitalen Museumspraxis und IT im Landesmuseum Stuttgart, konkreter und bodenständig. Digital Literacy, die allgemeine Digitalkompetenz, habe sich in den letzten 20 Jahren deutlich entwickelt. Aber auch heute beherrschten nur etwa 50% der Gesellschaft sicher digitale Basiskompetenzen wie die Kommunikation per E-Mail oder einfachen Rechercheaufgaben. Nur etwa ein Drittel habe ein tieferes Verständnis digitaler Funktionsweisen oder beherrsche komplexere digitale Aufgaben eines Fachgebiets.

Mitarbeitende in Museen und Kultureinrichtungen seien ein Spiegel der Gesellschaft und insofern müsse man davon ausgehen, dass die Kompetenzen dort ähnlich verteilt seien. Das Landesmuseum Württemberg habe es sich daher in der Mitarbeiterentwicklung zur Aufgabe gemacht, auch digitale Kompetenzen auszubauen. Auf Basis des Digital Competence Framework for Citizens (DigComp) der EU hat es eine „Landkarte“ der „Digital Literacy“ entwickelt. Das „digitale Museum“ an sich ist nur einer von sechs Aspekten. Daneben stehen grundlegende Fragen wie allgemeine Medienkompetenz, Kompetenzen zur Kommunikation und kollaborativem Arbeiten oder der kompetente Umgang mit Informations- und Kommunikationstechnik. In diesen Themenfeldern werden Mitarbeitenden des Museums Angebote zur Weiterbildung, Schulung und individuellen Beratung gemacht.

Dr. Gries lobte die in einigen Bundesländer explizit geschaffenen Stellen für „Resilienz-Dispatcher*innen“ oder "Digitalmanager*innen", die es erstmalig ermöglichen würden, digitale Kompetenzen aufzubauen und langfristig im Haus zu halten. Zuvor sei mühsam aufgebautes Wissen oft bald wieder abgewandert, weil Stellen nur befristet besetzt wurden. Viele Museen wären seit 30 Jahren damit beschäftigt, Bestände zu digitalisieren. Letztlich stünden dann aber „im Keller Windows 98-Rechner mit veralteten Datenbanken“ und es gäbe keine Vorstellung, wie man diese Techniken managen müsse, verknüpfen könne und wo man damit überhaupt hinwolle.

Masterclass „Holacracy“

In einem zweistündigen Workshop hatte ich die Gelegenheit, mit drei weiteren Teilnehmer*innen einen Überblick über die Grundkonzepte der Holakratie zu bekommen. Es handelt sich dabei um ein Konzept zur Entwicklung von Organisationen, das zu mehr Agilität durch dezentrale Entscheidungsfindung und Ermächtigung der Mitarbeiter*innen führen soll.

Als Coach erklärte Dennis Wittrock, wie Aufgaben und Zuständigkeiten in Form von Rollen und Verantwortlichkeiten beschrieben werden. In der Holakratie geht es dann darum, wie die Regeln der Zusammenarbeit zwischen diesen Rollen vereinbart werden und wie ein Prozess der „verankerten Evolution“ dazu beiträgt, dieses Regelwerk beständig zu hinterfragen und anzupassen. Hinzu kommt eine ausdrückliche Ermächtigung der Beteiligten zum Handeln mit klaren Befugnissen und Grenzen. Zudem wird ausufernden Meetings mit unklarer Zielsetzung dadurch begegnet, dass es für zwei unterschiedliche Arten von Besprechungen feste Routinen und Strukturen gibt.

In einer simulierten Organisation mit vorgegeben Strukturen und Problemen hatten wir dann die Möglichkeit, eine praktische Besprechungssituation zu erproben.

Einsatz von KI im Kulturmarketing

Sehr interessant und stark besucht war der Workshop „Einsatz von KI im Kulturmarketing“ von Holger Kurtz, auch wenn der Begriff „KI“ für mein Empfinden sehr großzügig ausgelegt wurde.

Zunächst ging es darum, dass KI und allgemein statistikbasierte Bewertungs- und Prognoseverfahren immer eine gute Datenbasis als Ausganspunkt benötigen. Oft lägen diese notwendigen, gut strukturierten Daten in Kulturinstitutionen nicht in der benötigten Qualität vor. Ein erster Schritt müsse es daher sein zu fragen, welche Daten überhaupt benötigt werden, wie bzw. wo diese gesammelt werden könnten und was mit den Maßgaben der DSGVO vereinbar sei. Zudem brauche es festangestellte Personen im Haus, die ein grundlegendes Verständnis von IT-Fragestellungen hätten und einen Überblick darüber, über welche Daten die Einrichtung verfüge, wie diese strukturiert seien und zusammenhängen.

Als Beispiel wurde die Tate Gallery genannt, die mit einem eigenen Team von Data Scientists unter anderem automatisiert seher exakte Prognosen über die Besucherströme der nächsten Tage erstellen könnten, dazu aber auch über ein Dutzend Parameter aus verschiedenen Quellen zusammenführen müssten.

Es wurde dann Performance Marketing vorgestellt als die Art von Online-Werbung, bei der die Abrechnung auf Basis messbarer Interaktion erfolgt. Das können im einfachsten Fall Klicks auf die Anzeige sein. Noch besser ist es, wenn sich tatsächlich „Conversions“ (z. B. Kauf einer Eintrittskarte im Online-Shop) mit der Anzeige in Verbindung bringen lassen.

Bei diesen Werbeplattformen geht die Entwicklung dahin, dass nicht mehr fertige Werbebanner eingestellt und Zielgruppen ausgewählt werden. Werbeplattformen bekommen stattdessen eine Reihe von Bildern und einige Textvorschläge und beginnen damit eigenständig, Kombinationen und Varianten der Banner zu erstellen. Wenn die Plattform erkennt, dass eine Variante bessere Ergebnisse erzielt als andere, beginnt sie, diese Variante verstärkt auszuspielen. Sie sucht dabei automatisiert nach Mustern in den Nutzerprofilen, um „ähnliche“ Zielgruppen zu erreichen. Marketingverantwortliche stimmen also keine fertigen Anzeigen mehr ab oder definieren Zielgruppen, sondern müssen nur noch genug „Zutaten“ in ein solches System geben.

Wichtig dabei sei es zu verstehen, dass man nicht mehr die volle Kontrolle hätte über das, was letztlich ausgespielt werde, und dass man auch nie alle möglichen Anzeigen sehen würde. Erwähnt wurde ein Beispiel eines Kulturveranstalters, für den Anzeigen mit dem Schlagwort „Musical“ plötzlich sehr gut funktionierten und häufig angeklickt wurden – allerdings gab es überhaupt keine Musicals im Programmangebot.

Ein Thema für sich waren generative KI-Modelle, die im Moment hohe Aufmerksamkeit erfahren und Bilder oder Texte zu textbasierten „Prompts“ erzeugen können. Dieses Systeme bieten die Möglichkeit, auch ohne eigene Datensätze an einem Trend teilzuhaben, weil sie sich auf eine frei verfügbare, allgemeine Datenbasis stützen.

Beispiele für die Anwendung im Marketing sind die Erzeugung von Key Visuals oder realistisch anmutender Fotos, wenn solche Bilder z. B. für neue Produktionen noch gar nicht vorliegen oder aus Kostengründen nicht regelmäßig produziert werden können. Dabei ist es mit „Seeds“ (Voreinstellungen) möglich, auch bei wiederholter Anwendung einen einheitlichen Look zu erhalten.

Text-generierende Systeme könnten eine Unterstützung sein, um bei Routinetätigkeiten zu entlasten. Als Beispiel genannt wurde die immer wiederkehrende, ähnliche Formulierung von Theater- bzw. Abendzetteln auf Basis vorliegender Informationen über ein Stück oder die Künstler. Auch bei der Beantwortung von E-Mails im Kunden- und Besuchersupport könnten automatisch generierte Textvorschläge eine wesentliche Entlastung darstellen. Dabei sei immer zu bedenken, dass die von solchen Systemen generierten Antworten inhaltlich „halluziniert“ sein können. Es ist daher wichtig, dass fachlich versierte Menschen die Qualität und Korrektheit aller Aussagen prüfen.

Was will das digitale Publikum?

Am zweiten Konferenztag diskutierte zunächst ein sehr breit besetztes Panel die Frage, was „das digitale Publikum“ wünsche. Es wurde schnell klar, dass es „das Publikum“ gar nicht gibt. Beispielsweise Museen haben es bei einer interessierten Öffentlichkeit in Abgrenzung zu forschendem Fachpublikum mit so unterschiedlichen Gruppen zu tun, dass auch die Anforderungen an und Vorstellungen von „digitalen Angeboten“ sehr unterschiedlich ausfallen.

Die Gäste waren sich einig, dass digitale Inhalte dann sinnvoll sind, wenn sie einen Mehrwert schaffen. Als konkretes Beispiel wurde die Barrierefreiheit genannt, wenn also museale Angebote digital auch Menschen erreichen können, denen die Erfahrung vor Ort im Museum nicht möglich wäre. Dr. Gries ergänzte, dass „barrierefrei“ in Zukunft auch bedeuten könne, für Systeme der künstlichen Intelligenz so zugänglich zu sein, dass die Inhalte in das Training oder die Faktenbasis dieser Systeme einfließen können.

Prof. Dr. Patricia Rahemipour, Direktorin des Instituts für Museumsforschung, erwähnte zudem die Schwierigkeiten, die das Vergaberecht in der Praxis oftmals bereite. Es sei damit schwierig, Digitalprojekte durchzuführen und flexibel zu steuern. Oft sei es auch ein Problem, überhaupt ausreichend qualifizierte Bieter zur Teilnahme zu motivieren.

Marcus Lobbes, Direktor der Akademie für Theater und Digitalität, konstatierte, Theater hätten lange Zeit ihr Wissen und ihre Erfahrungen im Zusammenhang mit der Digitalisierung für sich behalten. Es habe kein Austausch darüber stattgefunden, was Projekte kosten, wie man bestimmte Probleme gelöst habe, wer welche Kompetenzen beisteuern könne und vor allem auch, mit welchen Versuchen man gescheitert sei. Mit der Initiative „Theaternetzwerk digital“ soll sich das ändern.

Agilität in Organisationen

„Wie bewegen wir unsere Organisation?“ war die Frage des nächsten Panels, das mit einer Kurzvorstellung der Holakratie (s. oben) begonnen wurde.

Doreen Mölders, Leiterin des LWL-Museum für Archäologie und Kultur, beschrieb, wie ihr Haus dazu den „Fonds Digital“ der Kulturstiftung des Bundes in Anspruch genommen hat. Im Rahmen der Organisationsentwicklung gehe es darum, eine „Kultur der Digitalität“ und digitale Arbeitsweisen zu etablieren. Tarifverträge und notwendige Stellenbeschreibungen machten es dabei noch sehr schwer, Ideen wie die der Holakratie umzusetzen. Trotzdem sei es aber möglich, feste Strukturen schrittweise zu lösen und zu ändern, wenn man den Mitarbeitenden das dazu notwendige Vertrauen und Empathie entgegenbringe.

Im nächsten Jahr werde es in ihrem Haus darum gehen, ein neues Leitbild für diesen Wandel zu entwickeln. Das Museum plane, in dieser Zeit das Angebot und Ausstellungsprogramm so zu reduzieren, dass für alle Mitarbeitenden ausreichend Gelegenheit bestehe, sich in diesen Prozess einzubringen. Das Ziel müsse es sein, Entscheidungen möglichst schnell da treffen zu können, wo sie gut getroffen werden können. Die notwendige fachliche Expertise dazu befinde sich oft in den Fachbereichen, nicht in der Führungsebene.

Michael Wuerges gab als Direktor der Kommunikation der Bayerischen Staatsoper einige Einblicke in die Struktur eines der größten Opernhäuser weltweit, das mit über 1000 Mitarbeiter*innen täglich über 2000 Karten verkaufen müsse. Die lange Tradition mit eingefahrenen Strukturen, „mächtigen Intendanten“ und auch vielen, oft wechselnden Mitwirkenden im künstlerischen Bereich machen es sehr schwer, organisatorische Änderungen zu erwirken oder ein gemeinsames Leitbild zu entwickeln.

Eine interessante Frage im Laufe der Diskussion war die nach der rechtlichen Haftung, wenn mehr Verantwortung auf die Mitarbeiter*innen übertragen werde. Die in meinen Augen korrekte Schlussfolgerung war, dass so oder so am Ende Führungskräfte „den Kopf hinhalten“ müssen. Trotzdem - oder gerade deshalb - sollte es diesen aber im Innenverhältnis der Organisation möglich und erlaubt sein, eine „stützende Struktur“ zu schaffen, mit der sie Verantwortung intern ab- und weitergeben können, um so den Kopf frei zu haben für die wesentlichen Entscheidungen und um sicherzustellen, dass die Entscheidungen mit größtmöglicher Expertise und aus verschiedenen Perspektiven heraus beurteilt werden können.

Was muss Führung leisten?

„Das Zeitalter des Leitwolfs ist vorbei“ war die Überschrift zum letzten Konferenzteil. Julia Becker, Aufsichtsratsvorsitzende der Funke Mediengruppe, stellte das Leitbild von Führung vor, das unter ihrer Leitung in den letzten Jahren entwickelt wurde, um auf massive Veränderungen der Medienbranche in den letzten Jahren zu reagieren.

Auch in diesem 10-Punkte-Programm geht es wesentlich darum, die Eigenverantwortung und Kompetenz der Mitarbeitenden zu stärken. „Agression und Isolationismus“ funktionierten nicht als Führungsstil, Empathie sei der Schüssel für gelungene Führung. Führung komme die Aufgabe als „Dirigent“ zu, aber nicht im Sinne eines streng geführten Symphonieorchesters, sondern im Stil einer Jazzband. „Jeder darf mal ein Solo spielen“, Unternehmensteile müssten sich in alle Richtungen austauschen können, statt in Silos zu denken. Zur Aufgabe von Führung gehöre es, das zu ermöglichen, dazu anzuhalten und es einzufordern.

Im abschließenden Gespräch mit Diandra Donecker, Geschäftsführerin und Gesellschafterin im Auktionshaus Grisebach, wurde die Arbeit und Unternehmenskultur in Organisationen und einem Marktumfeld thematisiert, das weiterhin überwiegend männlich dominiert sei. Frau Donecker sah einen Schlüssel zur Veränderung darin, für mehr Diversität in Unternehmen und Organisationen zu sorgen. Gerade für Führungspersonen sei es wichtig, ehrlich und offen zu sein und auch über eigene Fehler zu sprechen.

Roundup

Zum Abschluss möchte ich noch die gelungene Art der Moderation erwähnen, mit der Vorträge und Panels verbunden und dokumentiert wurden. Zu jedem Thema gab es während der Diskussion gefüllte Stichwortlisten aus den Blickwinkeln „Das gibt uns Schub“ und „Das hält uns zurück“. Mit dem Online-Tool „Mentimeter“ wurde direkt in Anschluss an die Gesprächsrunden live abgestimmt, welche Thesen und Fragen den größten Zuspruch unter den Teilnehmer*innen erhielten.