Add initial nwb customizations

README.md

+# README
+
+Static website build with [MkDocs](https://www.mkdocs.org/) for the documentation of the used tools during the ["Nachhaltigkeitswochen @ Hochschulen BaWü"](https://hochschule-n-bw.de/).
+The website is deployed to: [help.hochschule-n-bw.de](https://help.hochschule-n-bw.de)
+
+## Local build
+
+**Preparations:**
+
+[Install MkDocs](https://www.mkdocs.org/#installation) depending on your environment.
+
+Install ["Material" theme](https://squidfunk.github.io/mkdocs-material/):
+```
+pip install mkdocs-material
+```
+
+**Build:**
+```
+mkdocs build
+```
+
+**Serve:**
+```
+mkdocs serve
+```
+
+## Build with pipeline
+
+Dockerfile is used for the build pipeline within the stuvus infrastructure.

help/docs/bbb-benutzung.md

+Benutzungsoberfläche
+====================
+
+!!! abstract ""
+    Auf dieser Seite werden die Funktionalitäten von BigBlueButton anhand der Oberfläche aus Sicht einer Person mit Präsentationsrechten erklärt. 
+
+**BBB-Oberfläche:**
+<figure>
+  <img src="../img/bbb-oberflaeche.png" alt="BBB-Oberfläche" />
+</figure>
+<!--
+**A:** [Interaktion mit anderen Teilnehmern](#a-interaktion-mit-anderen-teilnehmern)
+**B:** [Aktionen](#b-aktionen)
+**C:** [Mikrofon, Audio, Webcam und Bildschirmfreigabe steuern](#c-mikrofon-audio-webcam-und-bildschirmfreigabe-steuern)
+**D:** [Präsentation/Whiteboard](#d-prasentationwhiteboard)
+**E:** [Optionen](#e-optionen)
+**F:** [Aufzeichnung der Veranstaltung](#f-aufzeichnung-der-veranstaltung)
+**G:** [Layout anpassen](#g-layout-anpassen)
+-->
+
+### A: Interaktion mit anderen Teilnehmern
+
+-   **Öffentlicher Chat:** Nachrichten, die du hier versendest, können von allen Konferenzteilnehmer\*innen gelesen werden.
+
+-   **Geteilte Notizen:** An dieser Stelle können Texte gemeinsam mit anderen Teilnehmer\*innen verfasst werden. Die geteilten Notizen werden beim Beenden der Konferenz <ins>nicht</ins> automatisch gespeichert und müssen deshalb ggf. vorher manuell exportiert werden:
+    <img align="left" src="../img/bbb-notizen.png" alt="BBB Notizen" width="400" />
+    <div style="clear:both"></div>
+
+-   **Teilnehmer\*in:**
+
+    -   Per Linksklick auf den Namen einer anderen Person kannst du einen "**Privaten Chat starten**".
+
+    -   Per Linksklick auf den eigenen Namen kannst du deinen **Status verändern** und dadurch z.&#x00A0;B. symbolisch die "**Hand heben**". Jedoch verzichten wir in der Regel auf diese Interaktionsmöglichkeit, sondern nutzen lieber Symbole im Chat oder bei Kleingruppen die Webcam.
+
+### B: Aktionen
+
+*Die Aktionsmöglichkeiten stehen nur Personen mit Präsentationsrechten zur Verfügung*
+
+-   [Umfrage starten](https://support.blindsidenetworks.com/hc/en-us/articles/360024977292-Use-polling-)
+
+-   [Eine Präsentation hochladen](https://support.blindsidenetworks.com/hc/en-us/articles/360024688392-Upload-a-presentation-enable-for-download)
+
+-   [Externes Video teilen](https://support.blindsidenetworks.com/hc/en-us/articles/360025238131-Share-an-External-Video-Link)
+
+### C: Mikrofon, Audio, Webcam und Bildschirmfreigabe steuern
+
+-   **Mikrofon freischalten/stummschalten:**
+    Bitte achte darauf, dass dein **Mikrofon nur aktiviert** ist, wenn du wirklich etwas sagen möchtest.
+
+-   **Audio starten/beenden:**
+    Hierdurch kann die Audio-Verbindung zur Konferenz ganzheitlich gestartet oder beendet werden. Im Normalfall sollte es während einer Konferenz keinen Grund geben die Audio-Verbindung auf diese Weise zu deaktivieren.
+
+-   **Webcam freigeben/Webcamfreigabe beenden:**
+    Über diesen Button kannst du deine Webcam aktivieren und deaktivieren. Bei der Aktivierung kannst du ggf. noch Einstellungen zur Übertragungsqualtität vornehmen, wobei du hier im Normalfall die voreingestellte Qualitätsstufe beibehalten kannst.
+
+-   **Bildschirm freigeben/Bildschirmfreigabe beenden:**
+    *Diese Möglichkeit steht nur Personen mit Präsentationsrechten zur Verfügung.*
+    [→Anleitung](https://support.blindsidenetworks.com/hc/en-us/articles/360025276251-Share-my-screen)
+
+### D: Präsentation/Whiteboard
+
+*Die Möglichkeit zum Präsentieren und der Verwendung des Whiteboards steht nur Personen mit Präsentationsrechten zur Verfügung.*
+
+-   Anleitung: [Use the presentation controls](https://support.blindsidenetworks.com/hc/en-us/articles/360024689292-Use-the-presentation-controls)
+
+### E: Optionen
+
+- **Vollbild:** Ausblenden der Browser-Schaltflächen und Wechsel der eigenen BBB-Umgebung in den Vollbildmodus.
+
+- **Einstellungen:** Hier können weitere Einstellungen für eigene BBB-Umgebung vorgenommen werden. Besonders hervorzuheben sind hier die Einstellungen zur Datenvolumeneinsparung im Falle von Problemen mit der Audio- oder Videoverbindung. Vor allem als Präsentator\*in könnte es relevant sein die Einstellung zu aktivieren, dass du bei neuen Nachrichten im Chat oder beim Beitritt weiterer Teilnehmer\*innen ein Audiosignal erhälst.
+
+
+### F: Aufzeichnung der Veranstaltung
+
+-   Falls die Konferenz aufgezeichnet wird, wird anstelle des weißen ein rotes Symbol sowie die aktuelle Dauer der Aufzeichnung angezeigt.
+
+### G: Layout anpassen
+
+-   Bewege den Mauszeiger zwischen Kamera-Bild(er) und Präsentation und verändere durch vertikales Bewegen des Mauszeigers bei gleichzeitig gedrückter linker Maustaste das Layout. Zusätzlich können Sie den Webcam-Videos per Drag and Drop eine anderen Bildschirmposition zuweisen.
+    ![](https://support.blindsidenetworks.com/hc/article_attachments/360044515132/adjustwebcams.gif)

help/docs/bbb-verbindung.md

+Verbindungsaufbau zur Konferenz
+===============================
+
+1.  Rufe den **Link zur Konferenz** in einem der genannten Browser auf. Der Link wird dir vorab bereitgestellt.
+
+2.  Angabe deines **Namens**:
+
+    1.  Gebe bitte den Namen an, mit dem du angesprochen werden möchtest. Der Name wird nur zur Anzeige in der Konferenz verwendet und nicht gespeichert.
+
+    2.  Konvention zum *Datenschutz*: Falls du nicht möchtest, dass Aufnahmen bzw. Screenshots veröffentlicht werden, bei denen du mit deinem Bild oder deinem Namen zu sehen sind, schreibe ein **x** vor deinen Namen (z. B. "x Lieschen Müller").
+
+    3.  *Personalpronomen*: Gebe gerne dein Pronomen an (er / sie / egal), damit die anderen wissen, wie du gerne angesprochen werden möchtest (z. B. "Lieschen Müller (sie)").
+
+3.  **Betreten des Konferenzraums**
+    Du wirst nun automatisch in den Konferenzraum weitergeleitet. Falls die Konferenz noch nicht gestartet wurde, wird ein entsprechender Hinweis angezeigt. Sobald die Konferenz dann gestartet wurde, wirst du automatisch in den Konferenzraum weitergeleitet.
+
+4.  **Mikrofon freigeben:**
+
+    4.  Wähle bitte aus, dass du mit **Mikrofon** an der Konferenz teilnehmen möchtest. Nur so hast du die Möglichkeit, dein Mikrofon überhaupt während der Konferenz zu verwenden. Bei "Nur zuhören" ist es nicht mehr möglich, während der Konferenz dein Mikro anzuschalten.
+
+    5.  Erteile deinem Webbrowser die **Berechtigungen**. Eine nachträgliche Änderung der Berechtigungen ist durch einen Klick auf das Schlosssymbol möglich.
+        <div style="display: flex;">
+          <figure>
+            <img src="../img/bbb-mikrofon-firefox.png" alt="Firefox" width="300"/>
+            <figcaption>Firefox<figcaption>
+          </figure>
+          <figure>
+            <img src="../img/bbb-mikrofon-chrome.png" alt="Chrome" width="300"/>
+            <figcaption>Chrome<figcaption>
+          </figure>
+        </div>
+
+    6.  **Echotest:** Nach der Freigabe deines Mikrofons wird ein Echotest angeboten, der der Funktionsprüfung Ihrer Audio-Hardware dient. Stelle hierbei sicher, dass du dich selbst (mit leichtem Zeitversatz) hören kannst, aber keine [Rückkopplung](https://de.wikipedia.org/wiki/R%C3%BCckkopplung#Tontechnik) entsteht.
+
+5.  **Webcam freigeben**
+    Um deine Webcam freizugeben, klicke in der unteren Leiste auf das Symbol mit durchgestrichener Kamera. Ggf. wirst du vor der Aktivierung aufgefordert der Verwendung der Webcam durch den Browser zuzustimmen (äquivalent zur Zurstimmung des Mikrofons).

help/docs/bbb.md

+Allgemeines zu BigBlueButton
+============================
+
+**Was ist BigBlueButton?**
+
+BigBlueButton™ (BBB) ist ein Open-Source-Webkonferenzsystem, mit dem virtuelle Konferenzräume erstellt werden können. Der Funktionsumfang ist ähnlich zu Zoom, Microsoft Teams oder Cisco Webex.
+
+BBB bietet u. a. folgende Funktionalitäten an:
+
+-   Audio- / Videochat
+
+-   Öffentliche und private Chats
+
+-   Freigabe von Präsentationen und anderen Dokumenten
+
+-   Bildschirmfreigaben
+
+-   Whiteboard-Funktion (Multiuser)
+
+-   Einfache Umfragen
+
+-   Breakout-Räume
+
+**Warum BigBlueButton?**
+
+-   Es ist vollständig Open Source ([→GitHub](https://github.com/bigbluebutton/bigbluebutton)).
+
+-   Es ist plattformunabhängig (Webbrowser mit WebRTC-Unterstützung ist auf jeder relevanten Plattform verfügbar)
+
+-   Es kann datenschutzfreundlich betrieben werden (ist bei uns der Fall; es werden keine persönlichen Daten gespeichert).
+
+-   Es kann selbst gehostet und konfiguriert werden (wir nutzen Server des deutschen Anbieters [bbbserver.de](https://bbbserver.de/); ein eigenes Hosting wäre auch denkbar gewesen).
+
+-   Es ist unabhängig von Entscheidungen einzelner Unternehmen (im Gegensatz zu Zoom, Microsoft Teams, Cisco Webex, etc.).
+
+*→zukunftsfähig*
+
+**Wie benutze ich BigBlueButton?**
+
+Für die Teilnahme an einer BBB-Konferenz wird lediglich ein Browser mit Unterstützung für WebRTC benötigt, was jeder moderne Browser unterstützt. Du musst somit keine weitere Software installieren.
+
+Empfohlener Browser für eine gute Audio- und Video-Qualität:
+
+-   [Mozilla Firefox](https://www.mozilla.org/de/firefox/new/)
+
+-   Chromium-basierten Browser (z. B. Google Chrome oder die datenschutzfreundliche Alternative [Ungoogled Chromium](https://ungoogled-software.github.io/ungoogled-chromium-binaries/))

help/docs/index.md

-# Welcome to MkDocs
+Digitale Tools
+=============================
 
-For full documentation visit [mkdocs.org](https://mkdocs.org).
+!!! info "Dokumentation"
+    In dieser Dokumentation findest du Informationen zu allen relevanten Tools, die bei den Nachhaltigkeitswochen @ Hochschulen BaWü eingesetzt werden. Um zu den Erkärungen zu den einzelnen Tools zu kommen, klicke oben in der Menüleiste auf den entsprechenden Namen.
 
-## Commands
+## Zukunftsfähige Tools?
 
-* `mkdocs new [dir-name]` - Create a new project.
-* `mkdocs serve` - Start the live-reloading docs server.
-* `mkdocs build` - Build the documentation site.
-* `mkdocs help` - Print this help message.
+Nachhaltigkeitskriterien werden in der Digitalisierung leider oft sträflich vernachlässigt. Doch wenn es um Zukunftsfähigkeit geht, ist dies fatal. Wandel geht nicht mit proprietärem Wissen. Deshalb setzen wir bei den **[Nachhaltigkeitswochen @ Hochschulen BaWü](https://hochschule-n-bw.de/)**, soweit es uns möglich ist, auf *zukunftsfähige* Tools.
 
-## Project layout
+An dieser Stelle wollen wir auf die Forderungen vom *netzwerk n e.V.* hinweisen, die zur Umsetzung einer nachhaltigen und digitalen Hochschule beitragen sollen: [Bildung, Bits & Bäume – digitale, nachhaltige Hochschultransformation](https://netzwerk-n.org/2020-52/)
 
-    mkdocs.yml    # The configuration file.
-    docs/
-        index.md  # The documentation homepage.
-        ...       # Other markdown pages, images and other files.
+!!! quote "Forderung 5: Nachhaltige Beschaffung fordern und fördern"
+    Hochschulen dürfen die Bildung von Monopolen und auch die Datenkonzentration durch monopolartige digitale Dienstleister*innen im Softwarebereich und bei digitalen Anwendungen nicht unterstützen und müssen als öffentliche Einrichtungen Open Source Lösungen stärken, die zum Gemeinwohl beitragen und Monopolisierung entgegenwirken. Um Studierende trotzdem optimal auf ihr Berufsleben vorzubereiten, in dem nach wie vor kommerzielle Softwareprodukte vorherrschen, sollten Hochschulen zumindest in der Ausbildung zweigleisig fahren und auch für Open Source Alternativen ausbilden.
+
+## Welche Tools setzen wir ein?
+
+Übersicht:
+
+* [BigBlueButton](bbb.md) (Videokonferenzen)
+
+* [Virtuelle Welt](virtuelle-welt.md) (TODO)
+
+* Echtzeit-Umfrage (TODO)
+
+* ...
+
+---
+
+!!! help "Fragen"
+    Sollte etwas in der Dokumentation fehlen oder unklar sein, schreibe gerne eine Nachricht in die Telegram-Gruppe ["NWBW Technik-Support"](https://t.me/joinchat/U2VKlTgexHY_U9H8) oder schreibe eine E-Mail an [support@hochschule-n-bw.de](mailto:support@hochschule-n-bw.de).

help/docs/virtuelle-welt.md

+Virtuelle Welt
+==============
+
+TODO
\ No newline at end of file

help/mkdocs.yml

-site_name: My Docs
+site_name: Nachhaltigkeitswochen @ Hochschulen BaWü
+site_url: https://help.hochschule-n-bw.de
+repo_url: https://git.stuvus.uni-stuttgart.de/nwb/nwb-hilfeseite
+nav:
+    - Start: index.md
+    - BigBlueButton:
+        Allgemeines: bbb.md
+        Verbindungsaufbau zur Konferenz: bbb-verbindung.md
+        Benutzungsoberfläche: bbb-benutzung.md
+    - Virtuelle Welt:
+        Allgemeines: virtuelle-welt.md
 theme:
-  name: 'material'
+    name: material
+    language: de
+    favicon: assets/bookshelf.png
+    icon:
+      logo: material/bookshelf
+    font: false
+    palette:
+        # Light mode
+        - light blue: "(prefers-color-scheme: light)"
+          scheme: default
+          primary: light green
+          accent: light green
+          toggle:
+            icon: material/weather-night
+            name: Wechsel in den dunklen Modus
+
+        # Dark mode
+        - media: "(prefers-color-scheme: dark)"
+          scheme: slate
+          primary: green
+          accent: green
+          toggle:
+            icon: material/weather-sunny
+            name: Wechsel in den hellen Modus
+
+    features:
+      - navigation.tabs
+      - toc.autohide
+      - navigation.top
+markdown_extensions:
+    - admonition
+    - pymdownx.critic
+    - pymdownx.betterem:
+        smart_enable: all
+