Intro

docs/Einführung/Einführung.md

@@ -0,0 +1,51 @@
+---
+sidebar_position: 0
+slug: /
+title: 1. Einführung
+hide_title: false
+---
+
+## 1.1 Projektübersicht
+
+**hfg.design 2.0** ist die moderne, prozess- und nutzerorientierte Lehr- und Lernplattform der Hochschule für Gestaltung Schwäbisch Gmünd. Das Projekt entstand im Kontext der Corona-Pandemie, als der Bedarf an flexiblen, digitalen und kollaborativen Lehrformaten stark zunahm. Die Plattform wurde entwickelt, um digitale, hybride und Präsenzveranstaltungen in einer einheitlichen Umgebung zu verbinden und somit langfristig Lehr- und Lernprozesse zu unterstützen.
+
+Die Plattform verfolgt einen **Open-Source-Ansatz**, wodurch sie frei zugänglich, transparent und anpassbar für andere Hochschulen oder Bildungseinrichtungen bleibt. Studierende, Lehrende sowie Exerne können aktiv zur Weiterentwicklung, Pflege und Dokumentation der Plattform beitragen.
+
+## 1.2 Ziele
+
+Das zentrale Ziel von **hfg.design 2.0** ist das Schaffen einer integrierten Lehr- und Lernumgebung, die die Zusammenarbeit zwischen Studierenden und Lehrenden verbessert und den gesamten Studienprozess effizienter gestaltet.
+
+Durch die Verbindung digitaler, hybrider und analoger Lehrformate erhalten Studierende eine zentrale Übersicht über Projekte, Aufgaben, Termine und Kommunikationskanäle. Lehrende können Lehrmaterialien, Streams, Abgaben und Feedback an einer zentralen Stelle verwalten, ohne zusätzliche Tools oder parallele Systeme einsetzen zu müssen.
+
+Ein weiterer Fokus liegt auf der **Reduzierung des organisatorischen Aufwands**: Durch integrierte Kommunikation, strukturierte Projektplanung und automatisierte Abläufe wird der Zeitaufwand für Lehrende minimiert, während Studierende gleichzeitig mehr Transparenz und Planungssicherheit erhalten.
+
+Darüber hinaus ist hfg.design 2.0 als **Open-Source- und OER-Plattform** konzipiert. Damit können andere Hochschulen oder Bildungseinrichtungen die Software frei anpassen und in ihre eigenen Strukturen integrieren. So trägt das Projekt zur nachhaltigen Digitalisierung der Hochschullehre über die eigene Institution hinaus bei.
+
+## 1.3 Förderung
+
+Das Projekt wird durch die **Stiftung Innovation in der Hochschullehre (StIL)** gefördert. Die Stiftung wurde 2020 gegründet und unterstützt Hochschulen in Deutschland bei der Entwicklung und Umsetzung innovativer Lehr- und Lernkonzepte. Das Förderprogramm „**Hochschullehre durch Digitalisierung stärken**“ stellt Mittel bereit, um digitale Lehrangebote in die Hochschullehre zu integrieren und die Qualität der Lehre nachhaltig zu verbessern.
+
+Für hfg.design 2.0 bedeutet dies finanzielle Unterstützung für die Weiterentwicklung der technischen Infrastruktur, der Benutzeroberfläche und die Integration neuer digitaler Lehr- und Lernformate.
+
+## 1.4 Mitmachen
+
+Als Open-Source-Projekt lebt **hfg.design 2.0** von der aktiven Beteiligung der Community. 
+
+**hfg.design 2.0** ist ein **offenes Projekt**, das aktiv zur Mitgestaltung und Mitarbeit einlädt. Als Open-Source-Initiative lebt es von der Beteiligung der Community – sowohl aus der Hochschule heraus als auch von externen Entwickler*innen, Lehrenden und Designer*innen.
+
+Beitragen kann man in verschiedenen Formen:
+
+- **Code-Beiträge und Pull Requests** zur Weiterentwicklung der Plattform
+- **Issues und Feature-Requests** zur Verbesserung der Benutzerfreundlichkeit
+- **Dokumentationen, Tutorials und OER-Materialien**, um die Plattform für andere leichter zugänglich zu machen
+
+So wächst die Plattform kontinuierlich weiter und bleibt an den tatsächlichen Bedürfnissen von Lehre und Studium ausgerichtet
+
+## 1.5 Links
+
+- **Projekt-Website:** [v2.hfg.design](https://v2.hfg.design/)
+- Anwendung: [ui.hfg.gd](http://ui.hfg.gd)
+- **Quellcode & Issues:** [Github]
+- **Förderprogramm StIL:** „Hochschullehre durch Digitalisierung stärken“
+
+Diese Ressourcen bieten umfassenden Zugang zu Informationen, technischen Grundlagen und Beteiligungsmöglichkeiten.

docs/Systemaufbau/Navigation Menu.md

@@ -0,0 +1,96 @@
+---
+title: 2.1 Navigation Menu
+hide_title: false
+---
+
+## 2.1 Navigation Menu
+
+Die Plattform **hfg.design 2.0** basiert auf Spaces als zentralen Arbeitsbereichen. Jeder Space stellt einen eigenständigen Kontext für Kommunikation, Zusammenarbeit und Projektorganisation dar. Innerhalb der Spaces sind Funktionen wie Chat, Streams, Dateien, Zeitplanung und Abgaben integriert und ermöglichen es den Nutzer:innen, alle relevanten Informationen an einer Stelle zu bündeln.
+
+Die Plattform ist so gestaltet, dass sie sowohl für Studierende als auch für Lehrende nutzbar ist und jede Seite ihre eigenen Funktionen hat. Die Strukturen innerhalb der Spaces sind klar definiert, sodass neue Nutzer:innen sich schnell orientieren und produktiv arbeiten können. 
+
+## 2.2 Landing Page
+
+Die **Landing Page** dient als Einstiegspunkt in **hfg.design 2.0** und ist darauf optimiert, Nutzer:innen einen schnellen Überblick über relevante Informationen und anstehende Aktivitäten zu geben.
+
+Sie ist modular aufgebaut, was bedeutet, dass sich die Seite aus individuell kombinierbaren **Bausteinen** zusammensetzt. Nutzer:innen können dadurch ihre Startseite an die eigenen Bedürfnisse anpassen und festlegen, welche Inhalte sie beim Einstieg zuerst sehen möchten.
+
+Die verfügbaren Module sind:
+
+- **Overview:** Bietet eine Zusammenfassung des eigenen Studienfortschritts – z. B. wie weit das aktuelle Semester fortgeschritten ist, wie viele ECTS bereits erreicht wurden und wie der Gesamtstatus im Studium aussieht.
+- **Next Lecture:** Zeigt die aktuell laufende oder unmittelbar bevorstehende Vorlesung an, inklusive Kursname, Datum, Uhrzeit, Dozent:innen, Modul, Raum, Studiengang, Format (Präsenz oder Online) sowie der aktuellen Teilnehmerzahl. Außerdem gibt es hier eine direkte Verlinkung zur jeweiligen Vorlesung.
+- **Scheduled Classes:** Listet die kommenden Vorlesungen mit Datum, Uhrzeit, Kursnamen und Dozent:innen auf. Jede Vorlesung ist ebenfalls mit dem entsprechenden Space verknüpft.
+- **Drive:** Zeigt die zuletzt verwendeten oder bearbeiteten Dateien an und bietet so einen schnellen Zugriff auf aktuelle Arbeitsdokumente.
+- **Bookmarks:** Ermöglicht den Zugriff auf häufig besuchte Websites, die direkt aus der Plattform heraus geöffnet werden können.
+- **Kalender:** Bietet verschiedene Ansichten (Tag, Woche, Monat, Jahr) zur Übersicht über Termine, Vorlesungen und Deadlines.
+- **Announcements:** Zeigt aktuelle Ankündigungen von Lehrenden, der Verwaltung oder Systemmeldungen an.
+
+Durch diese Bausteine entsteht eine personalisierbare Startseite, die gleichzeitig als Informationszentrale dient. Nutzer:innen erhalten hier auf einen Blick relevante Updates zu ihrem Studium, ihren Kursen und Projekte.
+
+## 2.3 Sidebar
+
+Die Sidebar dient als zentrale Navigationsleiste der Plattform. Sie enthält alle Hauptbereiche wie die globale Suche, die Spaces-Liste und das User Menu. Die Sidebar kann eingeklappt werden, wodurch nur die Hauptfunktionen als Icons sichtbar bleiben. Im ausgeklappten Zustand werden zusätzliche Informationen angezeigt, darunter Filteroptionen für Spaces sowie Detailinformationen zum eigenen Benutzerprofil. Dies erleichtert die Orientierung und den schnellen Zugriff auf häufig genutzte Funktionen.
+
+## 2.4 Suche
+
+Die Suche in hfg.design 2.0 ermöglicht das Auffinden von Spaces, Nachrichten, Archiv-Projekten ([HfG Archiv](http://archiv.hfg.design)), Personen, Bildern und Dateien. Die Suche global ausgelegt, deckt alle Bereiche der Plattform ab und ist auch durch einen Shortcut von überall erreichbar (control+space). Die Suchergebnisse werden übersichtlich nach Relevanz angezeigt, sodass Nutzer:innen schnell die gewünschten Inhalte finden können.
+
+## 2.5 User Menu
+
+Das User Menu bündelt alle Einstellungen und Optionen, die den eigenen Account betreffen. Hier können Nutzer:innen ihr Profil einsehen, die eigenen Einstellungen anpassen, die Sidebar ein- oder ausklappen sowie sich abmelden.
+
+- **Profil:** Zeigt das eigene Profil aus Sicht anderer Nutzer:innen.
+- **Einstellungen:** Hier können persönliche Angaben wie Anzeigename, Status und Informationen zur eigenen Person angepasst werden.
+- **Menü ein-/ausklappen:** Minimiert oder maximiert die Sidebar, wodurch sich die Anzeige der Spaces und Icons verändert.
+- **Abmelden:** Leitet zurück zur Startseite mit Anmeldeoptionen.
+- **Mikrofon/Lautsprecher:** Funktionen für den Voice Chat, der aktuell noch nicht implementiert ist.
+
+## 2.6 Spaces
+
+Ein Space ist ein eigenständiger Arbeitsbereich innerhalb von hfg.design 2.0. Er bildet die Grundlage für Kommunikation, Zusammenarbeit und Projektorganisation. Innerhalb eines Spaces können Nutzer:innen Nachrichten austauschen, Dateien ablegen, Streams verfolgen, Aufgaben planen und Abgaben einreichen. Jeder Space kann spezifische Funktionen enthalten, je nach Art des Spaces und den Berechtigungen der Nutzer:innen.
+
+Die Plattform unterscheidet verschiedene Space-Typen:
+
+- **Kurse:** Automatisch erstellte Spaces für Vorlesungen mit Dozent:innen, Aufgaben- und Abgabefunktionen.
+- **Channels:** Allgemeine Spaces, die für Community-Zwecke, Gruppen oder Projekte genutzt werden. Sie können manuell oder automatisch erstellt werden.
+- **Direktnachrichten (DM):** Private Nachrichten zwischen zwei Personen.
+- **Gruppen-DMs:** Private Nachrichten zwischen mehreren Personen.
+- **Projektgruppen:** Entstehen durch Verknüpfung eines Channels oder Gruppen-DMs mit einem Kurs oder können direkt als eigenständige Projektgruppe erstellt werden.
+- **Hyperlinks:** Erlauben die Verlinkung zu externen Ressourcen wie Websites oder Figma-Projekten.
+- **Folder:** Entstehen durch das Zusammenziehen von zwei Spaces per Drag-and-Drop. Sie können auf- und zugeklappt werden, um die Übersicht zu verbessern.
+
+### 2.7 Space erstellen
+
+Grundsätzlich kann jede:r Nutzer:in Spaces erstellen. Studierende können keine Kurse erstellen, dafür jedoch Tutorien, die wie Kurse funktionieren. Lehrende können Kurse, Channels und Projektgruppen anlegen. Jeder Space kann **offen** (für alle sichtbar) oder **geschlossen** (nur auf Anfrage sichtbar) sein, wodurch der Zugang gesteuert werden kann.
+
+Die Erstellung eines neuen Spaces erfolgt in drei Schritten:
+
+1. **Vorlage auswählen:** Nutzer:innen können zwischen Direktnachricht, Gruppenchat, Projektgruppe, Channel, Tutorium/Kurs oder Beitritt über Link/Namen eines bestehenden Spaces auswählen.
+2. **Space-Funktionen auswählen:** Verfügbare Funktionen sind Nachrichten, Stream, Aufzeichnungen (nur bei aktivem Stream), Videos, Dateien, Zeitplan, Informationen und Abgabe (nur für Lehrende). Vorlagen enthalten bereits vorausgewählte Funktionen, die angepasst werden können.
+3. **Metadaten festlegen:** Name, Beschreibung, Bild und Sichtbarkeit des Spaces (offen oder geschlossen) werden festgelegt.
+
+### 2.8 Filter, Ansicht & Sortierung
+
+Spaces lassen sich nach Typ filtern: Kurse, Channels, Direktnachrichten, Gruppennachrichten, Projektgruppen, Verlinkungen und Ordner.
+
+Spaces können nach Aktivität (automatisch) oder alphabetisch sortiert werden. Spaces mit Livestreams erscheinen immer oben, gefolgt von angepinnten Spaces und danach den übrigen Spaces nach gewählter Sortierung.
+
+Über das Kontextmenü eines Spaces (Rechtsklick) können zusätzliche Aktionen durchgeführt werden, etwa Pinnen, Sortieren oder Gruppierung von Spaces.
+
+## 2.9 Chat
+
+Der Chat ist ein zentrales Element in hfg.design 2.0 und ermöglicht den Austausch zwischen Nutzer:innen innerhalb eines Spaces. Nachrichten werden chronologisch angezeigt, wobei die neuesten Nachrichten unten stehen. Nutzer:innen können Textnachrichten, Links und Dateien senden. Dateien können per Drag-and-Drop hochgeladen werden, inklusive Vorschau.
+
+Per Rechtsklick können Nutzer:innen mit Nachrichten im Chat interagieren. Es gibt Reaktionen (Emojis), Threads, direkte Antworten, das Kopieren von Text und Vorlesen von Nachrichten.
+
+## 3.1 Streaming & Medien
+
+Streams werden innerhalb der Plattform angezeigt und unterscheiden zwischen Streamer- und Viewer-Ansicht. Typischerweise werden Präsentationsfolien übertragen, die automatisch als Kapitel in der Timeline gespeichert werden. Viewer können drei Tools nutzen: **Auswahl**, **Kommentieren** (Kommentare erscheinen im Chat) und **Markieren** (Text erkennen, markieren und kopieren). Außerdem gibt es am Ende einer Vorlesung eine **Vorlesungszusammenfassung.**
+
+## Profil
+
+Das Profil zeigt detaillierte Informationen über die Nutzer:innen. Es enthält das Profilbild, den vollständigen Namen, den Benutzernamen (nicht editierbar), den Anzeigenamen (editierbar), Pronomen und die Aussprache (schriftlich oder als Audio), Badges, Rolle und Kontaktinformationen. Außerdem werden Aktivitäten, Zeitzone und Fähigkeiten angezeigt. Die „Über mich“-Sektion umfasst Sprachen, Portfolio-URL, Wohnort, Praxissemester, Engagement und Funfact. Die Kategorie **Interessen** ist noch nicht implementiert.
+
+### Einstellungen
+
+In den Einstellungen können Nutzer:innen ihren Anzeigenamen, Status und Zeitzone festlegen. Die „Über mich“-Sektion kann bearbeitet werden, um persönliche Informationen zu ergänzen.

docs/Systemaufbau/Systemaufbau.md

@@ -0,0 +1,108 @@
+---
+title: 2. Systemaufbau
+hide_title: false
+---
+
+## 2.1 Überblick
+
+Die Plattform hfg.design 2.0 basiert auf **Spaces** als zentrale Arbeitsbereiche. Jeder Space bildet einen eigenständigen Kontext für Kommunikation, Zusammenarbeit und Projektorganisation. Innerhalb der Spaces stehen fest integrierte Funktionen wie Chat, Streams, Dateien, Zeitplanung und Abgaben zur Verfügung. Nutzer:innen können alle relevanten Informationen und Aufgaben eines Kurses, Projektes oder einer Gruppe zentral verwalten.
+
+Die Plattform ist so konzipiert, dass sie für Studierende und Lehrende gleichermaßen nutzbar ist. Alle Spaces folgen einem einheitlichen Layout und Interaktionsprinzip, sodass neue Nutzer:innen schnell produktiv arbeiten können.
+
+## 2.2 Navigation & Benutzeroberfläche
+
+### 2.2.1 Hauptnavigation (Sidebar)
+
+Die Sidebar ist die zentrale Navigationsleiste. Sie enthält die Hauptbereiche Suche, Spaces und User Menu. Nutzer:innen können die Sidebar einklappen, sodass nur die Icons der Hauptfunktionen sichtbar bleiben. Im ausgeklappten Zustand erscheinen zusätzliche Informationen, darunter Filteroptionen für Spaces und Detailinformationen zum eigenen Profil.
+
+### 2.2.2 Suche
+
+Die Suche ermöglicht das Auffinden von Spaces, Nachrichten, Archiv-Projekten (HfG Archiv, archiv.hfg.design), Personen, Bildern und Dateien aus Nachrichten. Derzeit ist sie global ausgelegt. Eine gezielte Suche innerhalb einzelner Spaces ist geplant, aber noch nicht implementiert.
+
+### 2.2.3 User Menu
+
+Das User Menu bündelt alle Einstellungen und Optionen des eigenen Accounts.
+
+- **Profil:** Zeigt das eigene Profil aus Sicht anderer Nutzer:innen.
+- **Einstellungen:** Anpassung des Profils, Status, Zeitzone und „Über mich“-Sektion.
+- **Menü ein-/ausklappen:** Minimiert oder maximiert die Sidebar.
+- **Abmelden:** Leitet zur Startseite.
+- **Mikrofon/Lautsprecher:** Bezieht sich auf den Voice Chat, aktuell noch nicht implementiert.
+
+Feedback- und Fehler-Meldungen wurden nur zu Testzwecken eingebaut.
+
+## 2.3 Spaces: Struktur & Typen
+
+### 2.3.1 Was ist ein Space?
+
+Ein Space ist ein eigenständiger Arbeitsbereich, der Kommunikation, Zusammenarbeit und Organisation von Projekten, Kursen oder Gruppen bündelt. Innerhalb eines Spaces können Nutzer:innen Nachrichten austauschen, Dateien ablegen, Streams verfolgen, Aufgaben planen und Abgaben einreichen.
+
+### 2.3.2 Space-Typen
+
+Die Plattform unterscheidet:
+
+- **Kurse:** Automatisch erstellte Spaces für Vorlesungen, mit Dozent:in und Abgabefunktion.
+- **Channels:** Allgemeine Spaces für Gruppen, Projekte oder Community-Zwecke.
+- **Direktnachrichten (DM):** Privater Austausch zwischen zwei Personen.
+- **Gruppen-DMs:** Privater Austausch zwischen mehreren Personen.
+- **Projektgruppen:** Entstehen durch Verknüpfung zu einem Kurs oder werden direkt erstellt.
+- **Hyperlinks:** Verlinkung zu externen Ressourcen.
+- **Folder:** Zusammengeführte Spaces per Drag-and-Drop, auf- und zuklappbar.
+
+### 2.3.3 Berechtigungen & Sichtbarkeit
+
+Jede:r Nutzer:in kann Spaces erstellen. Studierende können keine Kurse, aber Tutorien erstellen, die wie Kurse funktionieren. Lehrende können Kurse, Channels und Projektgruppen erstellen. Ein Space kann **offen** oder **geschlossen** sein.
+
+## 2.4 Space-Verwaltung
+
+### 2.4.1 Space erstellen
+
+Die Erstellung erfolgt in drei Schritten:
+
+1. **Vorlage auswählen:** Direktnachricht, Gruppenchat, Projektgruppe, Channel, Tutorium/Kurs oder Beitritt über Link/Namen eines bestehenden Spaces.
+2. **Space-Funktionen auswählen:** Nachrichten, Stream, Aufzeichnungen, Videos, Dateien, Zeitplan, Informationen, Abgabe (nur Dozenten). Vorlagen enthalten bereits vorausgewählte Funktionen.
+3. **Metadaten festlegen:** Name, Beschreibung, Bild, Sichtbarkeit.
+
+### 2.4.2 Filter, Ansicht & Sortierung
+
+Spaces lassen sich nach Typ filtern. **Ansicht ändern** ist noch nicht implementiert.
+
+Sortierung: automatisch nach Aktivität oder alphabetisch. Spaces mit Livestreams stehen oben, danach angepinnte Spaces, dann der Rest.
+
+### 2.4.3 Weitere Optionen
+
+Über das Kontextmenü eines Spaces können Aktionen wie Pinnen, Sortieren oder Gruppierung vorgenommen werden.
+
+## 2.5 Kommunikation
+
+### 2.5.1 Chat
+
+Der Chat ist ein zentrales Element. Nachrichten werden chronologisch angezeigt. Textnachrichten, Links und Dateien können gesendet werden. Drag-and-Drop Upload mit Vorschau ist implementiert. Emojis und erweiterte Formatierungen sind vorgesehen, aber noch nicht implementiert.
+
+Interaktionen:
+
+- **Bereits implementiert:** Reaktionen, Threads, direkte Antworten, Text kopieren, Nachricht vorlesen.
+- **Geplant:** Weiterleiten, als ungelesen markieren, Erinnerungen, Nachrichten pinnen, Nachrichtenlink kopieren, Erwähnungen.
+
+### 2.5.2 Voice Chat
+
+Der Bereich ist noch nicht implementiert.
+
+## 2.6 Streaming & Medien
+
+Streams unterscheiden zwischen Streamer- und Viewer-Ansicht. Präsentationsfolien werden als Kapitel in der Timeline gespeichert. Viewer können **Auswahl**, **Kommentieren** und **Markieren** nutzen. Weitere Funktionen wie Untertitel, Qualität, Untertitel Toggle und KI-Vorlesungszusammenfassungen sind noch nicht implementiert.
+
+Der Bereich **Videos** für vergangene Streams ist noch nicht implementiert.
+
+## 2.7 Organisation & Planung
+
+Die Tabs **Zeitplan**, **Dateien**, **Informationen** und **Abgabe** sind noch nicht implementiert.
+
+## 2.8 Benutzer & Profile
+
+Das Profil zeigt detaillierte Informationen: Profilbild, vollständiger Name, Anzeigename, Pronomen, Aussprache, Rolle, Badges, Kontaktinformationen, Aktivitäten, Zeitzone, Fähigkeiten und „Über mich“-Sektion. Die Kategorie **Interessen** ist noch nicht implementiert.
+
+## 2.9 Weitere Funktionen
+
+- **Other Users:** Zeigt Mitglieder eines Spaces als Profilbilder, Klick öffnet Profilansicht.
+- **Aktivitäten, Gepinnt/Favoriten/Später erinnern, Space-Informationen:** noch nicht implementiert.