Seminar OpenBoard – Web-Widgets entwickeln und integrieren

Entwicklungsseminar zur Erstellung eigener Web-Widgets für OpenBoard. Behandelt werden Widgetstruktur, Metadaten und eindeutige Kennung, HTML, CSS und JavaScript, Zustands- und Größenverhalten, Touchbedienung, optionale OpenBoard-Integration, Datenschutz, Offline-Fähigkeit, Tests, Paketierung, Versionierung und Verteilung.

Inhaltsübersicht

1. Zielgruppe
2. Voraussetzungen
3. Lernziele
4. Anforderungsanalyse und Prototyp
5. Widgetstruktur und Metadaten
6. HTML und semantische Oberfläche
7. CSS, Skalierung und Touchbedienung
8. JavaScript und Zustandslogik
9. Integration in den OpenBoard-Kontext
10. Sicherheit, Datenschutz und Offline-Fähigkeit
11. Test, Paketierung und Verteilung
12. Praxisübungen

Zielgruppe

Webentwicklung, Medienentwicklung, technisch versierte Lehrkräfte, E-Learning-Teams und Entwicklerinnen beziehungsweise Entwickler interaktiver Lerninhalte.

Voraussetzungen

Sichere Grundkenntnisse in HTML, CSS und JavaScript sowie Grundbedienung von OpenBoard. Kenntnisse zu Browser-Debugging und Versionsverwaltung sind hilfreich.

Lernziele

• Aufbau und Lebenszyklus eines OpenBoard-Widgets verstehen
• ein eigenständiges interaktives Widget mit HTML, CSS und JavaScript entwickeln
• Touch-, Größen- und Zustandsverhalten robust gestalten
• Datenschutz, Offline-Betrieb und sichere Eingabeverarbeitung berücksichtigen
• Widget testen, paketieren, versionieren und verteilen

Seminarinhalte

1. Anforderungsanalyse und Prototyp

1. Lern- oder Präsentationsziel in eine kleine, klar abgegrenzte Interaktion übersetzen.
2. Eingaben, Zustände, Rückmeldung, Rücksetzung und Erfolgskriterium festlegen.
3. Bedienoberfläche zunächst als einfache Skizze mit Touchflächen entwerfen.
4. Nicht benötigte Funktionen aus dem ersten Prototyp entfernen.

2. Widgetstruktur und Metadaten

1. Projektordner mit Metadaten, Symbol, Startdatei, Stylesheet und Skript anlegen.
2. Eindeutige Kennung, Name, Beschreibung, Version und Abmessungen festlegen.
3. Relative Pfade für lokale Ressourcen verwenden.
4. Widget in einer minimalen Version paketieren und erstmals in OpenBoard laden.

3. HTML und semantische Oberfläche

1. Bedienelemente mit klarer semantischer Struktur und eindeutigen Beschriftungen aufbauen.
2. Eingaben, Schaltflächen, Statusbereich und Hilfetext logisch gruppieren.
3. Tastatur- und Fokusreihenfolge soweit möglich nachvollziehbar gestalten.
4. Fehlende oder ungültige Eingaben direkt am betroffenen Element anzeigen.

4. CSS, Skalierung und Touchbedienung

1. Flexible Größen statt starrer Pixelpositionen für zentrale Bereiche verwenden.
2. Bedienflächen ausreichend groß und kontrastreich gestalten.
3. Widget in kleinen und großen Abmessungen prüfen.
4. Hover-Abhängigkeiten vermeiden und alle Kernfunktionen per Touch erreichbar machen.

5. JavaScript und Zustandslogik

1. Zustandsmodell für Aufgabe, Auswahl, Auswertung und Rücksetzung definieren.
2. Ereignisse klar von Darstellung und Daten trennen.
3. Eingaben validieren und unerwartete Werte sicher behandeln.
4. Rücksetzfunktion herstellen, die zuverlässig zum definierten Ausgangszustand führt.

6. Integration in den OpenBoard-Kontext

1. Verhalten beim Einfügen, Verschieben, Größenändern und erneuten Öffnen prüfen.
2. Optional verfügbare Integrationsfunktionen nur nach erfolgreicher Funktionsprüfung verwenden.
3. Mehrere Widget-Instanzen in demselben Dokument auf gegenseitige Beeinflussung testen.
4. Keine globalen Zustände verwenden, die andere Widgets oder Seiten verändern.

7. Sicherheit, Datenschutz und Offline-Fähigkeit

1. Externe Bibliotheken und Netzzugriffe auf das notwendige Minimum reduzieren.
2. Keine sensiblen Daten ohne festgelegten Zweck und Schutz verarbeiten.
3. Benutzereingaben nicht ungeprüft als ausführbaren Inhalt verwenden.
4. Offline-Verhalten testen und bei Netzabhängigkeit eine klare Fehlermeldung oder Alternative vorsehen.

8. Test, Paketierung und Verteilung

1. Funktionstest für Normalfall, Grenzwert, Fehleingabe, Rücksetzung und Neuöffnung erstellen.
2. Bedienung mit Maus, Touch und gegebenenfalls Stift prüfen.
3. Paket in sauberer Zielumgebung installieren und erneut testen.
4. Version, Änderungsnotiz, Freigabestatus und Rückfallpaket dokumentieren.

Praxisübungen

1. Entwicklung eines kleinen Zuordnungs-, Zufalls- oder Selbstkontroll-Widgets.
2. Umsetzung einer flexiblen, touchgeeigneten Oberfläche.
3. Prüfung mehrerer Instanzen und des Zustands nach erneutem Öffnen.
4. Durchführung eines Sicherheits-, Offline- und Fehleingabetests.
5. Paketierung und Freigabedokumentation einer Widget-Version.