Technische Challenges

In der konkreten Umsetzung meines Projektes bzw. des Prototypen der wissenschaftlichen Arbeit geht es um eine Web-Anwendung, die mittels Animationen, gutem Storytelling und interaktiven Benutzermöglichkeiten zu einem immersiven User Erlebnis verhelfen soll. Durch diese spielerische Informationsaufnahme soll vor allem ein emotionaler Zugang zu den bereitgestellten Informationen gegeben werden.

Aus technischer Sicht gibt es dafür einige Aspekte zu berücksichtigen

Framework: Die Grundlage für die Entwicklung

Die Wahl eines geeigneten Frameworks ist entscheidend, um die Entwicklungszeit zu optimieren und die technischen Anforderungen zu erfüllen. Die Auswahl hängt von verschiedenen Faktoren ab:

React, Vue oder Svelte?
React bietet eine breite Community und Bibliotheken wie Three.js für 3D-Animationen und GSAP für Animationseffekte. Vue und Svelte hingegen punkten mit ihrer Einfachheit, was für interaktive Anwendungen von Vorteil sein kann.

Backend-Integration
Wenn die Web-App serverseitige Datenverarbeitung oder Benutzerverwaltung benötigen würde, könnte ein Framework wie Next.js (auf React basierend) oder Nuxt.js (für Vue) sinnvoll sein. Diese ermöglichen serverseitiges Rendering (SSR) und verbessern so die Performance und SEO.
Da aber nur ich die Webseite betreibe und es höchstwahrscheinlich auch keine Content-Änderungen für Redakteure oder andere User geben wird, ist es schon wahrscheinlich, dass ich gar kein backend anbinde. Könnte, falls später mal nötig, auch ganz easy angebunden werden.

WebGL-Integration
Für 3D-Inhalte und Animationen ist die Integration von WebGL unumgänglich. Frameworks wie Three.js bieten hier gute Tools, die mit JavaScript-Frameworks kombiniert werden können. Ich bin mir zwar noch nicht sicher, ob ich 3D Elemente einbinde, aber falls ja, dann würde ich mich gerne im Thema Three.js fortbilden.

https://threejs.org/examples/#webgl_lights_spotlight

Animationen: Performance und Flexibilität

Animationen spielen eine zentrale Rolle im Projekt, um das Storytelling lebendig zu gestalten. Dabei sind folgende technische Anforderungen zu beachten:

Tools wie GSAP oder Lottie
GSAP (GreenSock Animation Platform) ist eine bekannte Bibliothek für detaillierte und performante Animationen. Lottie ermöglicht das Einbinden von Animationen, die direkt in Tools wie After Effects erstellt werden.

Optimierung der Performance
Animationen können die Ladezeit und Performance der Web-App stark beeinflussen. Lazy Loading und die Minimierung der Größe von Assets sind hier essenziell.

Responsive Animationen
Die Animationen müssen auf unterschiedlichen Bildschirmgrößen und Geräten gleich gut funktionieren. Media Queries und relative Maßeinheiten spielen hierbei eine wichtige Rolle.

Interaktivität: Benutzerfreundliche Elemente

Eine interaktive Web-App erfordert robuste und intuitive Interaktionselemente:

Event Listener
Interaktionen wie Mausbewegungen, Scroll-Events oder Touch-Gesten müssen richtig und performant umgesetzt werden.

State Management
Bibliotheken wie Redux (React) oder Pinia (Vue) können helfen, den Zustand der App konsistent zu verwalten, insbesondere bei komplexen Interaktionsmöglichkeiten.

Barrierefreiheit (Accessibility)
Damit alle Benutzer Zugang zu den Inhalten haben, muss die Anwendung barrierefrei gestaltet werden. Dies umfasst Tastatursteuerung, Screenreader-Kompatibilität und gut lesbare Kontraste. Insbesondere bei Web-Anwendungen, die durch Interaktion hervorstechen, kommt die Berrierefreiheit oft zu kurz. Hier besonders viel Zeit einplanen.

Datenverarbeitung und Backend

Falls, wie oben bereits beschrieben, überhaupt ein Backend nötig ist, dann sind folgende überlegungen zu tätigen:

Content Management System (CMS)
Da kein voll Umfangreiches Backend nötig ist, kann für eine einfache Verwaltung der Inhalte ein Headless CMS wie Strapi, Sanity oder Contentful integriert werden.

Datenbanksystem
Falls größere Datenmengen gespeichert werden, könnten relationale (z. B. PostgreSQL) oder NoSQL-Datenbanken (z. B. MongoDB) benötigt werden.

Herausforderungen bei der Performance

Eine immersive Web-Anwendung mit Animationen und Interaktivität kann ressourcen-intensiv sein. Daher ist die Optimierung der Performance essenziell:

Code Splitting und Lazy Loading
Inhalte und Animationen sollten nur bei Bedarf geladen werden, um die Ladezeit zu verkürzen.

Bild- und Asset-Optimierung
Alle Bilder und Medien sollten in modernen Formaten wie WebP gespeichert und komprimiert werden.

Browserkompatibilität
Die Anwendung muss auf allen gängigen Browsern und Plattformen stabil laufen. Testing-Tools wie BrowserStack oder CrossBrowserTesting sind hier hilfreich.