5.1.2. Aufbau

Die Welcome-page lässt sich grob in drei Bereiche unterteilen. Der erste Bereich ist die tatsächliche Welcome-page (Startseite), die initial angezeigt wird. Die beiden weiteren Bereiche sind jeweils Untermenüs, die als Dialoge über der Startseite angezeigt werden können. Dazu gehört die Einstellungsseite, die dem Benutzer die Möglichkeit gibt, die Einstellungen des Systems zu ändern. Ebenso die Lehreransicht, die einem Lehrer ermöglicht, Geräte der Schüler zu verwalten. Dieser Bereich ist nur für Lehrer zugänglich. Diese Bereiche werden im Folgenden genauer beschrieben.

5.1.2.1. Startseite

Wie in Abb. 5.3 zu sehen ist, wird der Benutzer nach dem Einschalten des Gerätes durch die Überschrift “Willkommen” begrüßt. Neben der Überschrift befindet sich auch die aktuelle Uhrzeit.

Darunter wurde eine Suchleiste platziert, die es ermöglicht, nach Webseiten zu suchen. Die Suchleiste ist mit der konfigurierbaren Suchmaschine des Systems verknüpft und gibt daher die Möglichkeit, Webseiten über die Suchmaschine zu suchen.

In der linken unteren Ecke befindet sich eine Schaltfläche, die dazu genutzt wird, auf die Einstellungsseite oder die Lehreransicht zuzugreifen. Diese Aktionen werden dem Benutzer durch ein Zahnradsymbol, dem allgemeinen Symbol für Einstellungen, kommuniziert. Es ist mit einem Dropdown-Menü verknüpft, das die beiden Optionen Einstellungen und Lehreransicht anzeigt.

Den größten Teil der Welcome-page nimmt jedoch eine Liste von Weblinks ein, die dem Benutzer die Möglichkeit gibt, auf verschiedene Webseiten zuzugreifen. Die einzelnen Weblinks sind in Form von Kacheln angeordnet. Jede Kachel besteht aus einer Beschriftung und einem Icon im Hintergrund. Die Beschriftung soll dem Benutzer eine kurze Beschreibung dieser Webseite geben und ist durch den Benutzer einstellbar. Das Icon im Hintergrund soll dem Benutzer eine visuelle Orientierung geben und durch seine Farben einen Wiedererkennungswert schaffen.

../../_images/welcome_page.png

Abb. 5.3 Standardansicht der Welcome-page

Das Icon wird nicht durch den Benutzer eingestellt, sondern wird automatisch durch das Favicon der Webseite generiert. Ein Favicon ist ein kleines Icon, das eine Webseite repräsentiert. Es wird in der Regel in der Adressleiste des Browsers angezeigt und dient dem Benutzer als visuelle Orientierung. Das Favicon wird durch die Webseite selbst bereitgestellt und ist meist in der Datei favicon.ico im Wurzelverzeichnis der Webseite zu finden. Es gibt jedoch auch Webseiten, die das Favicon in einer anderen Datei oder auch gar nicht bereitstellen.

Um den Prozess des Ladens der Favicons zu vereinfachen wurde die API https://icon.horse verwendet. Diese API bietet die Möglichkeit, die URL einer Webseite in die URL des Favicons dieser Webseite umzuwandeln. Wenn kein Favicon gefunden werden kann, wird automatisch ein Standard-Icon generiert, das eine zufällige Farbe als Hintergrund und den ersten Buchstaben der Webseite als Beschriftung verwendet. Die URL der API kann daher als src-Attribut in ein HTML <img>-Tag eingefügt werden, um das Favicon automatisch durch den Browser laden zu lassen.

Zur Zeit der Entwicklung ließen die Nutzungsbedingungen der API die kostenlose Nutzung unter den “Fair Use”-Bedingungen zu (https://icon.horse/fair-use). Die API wurde daher ohne weitere Einschränkungen verwendet.

5.1.2.2. Einstellungsseite

Die Einstellungsseite beinhaltet Funktionen, die für alle Benutzer des Systems jederzeit zugänglich sein sollen. Es handelt sich dabei um die folgenden Funktionen (siehe Abb. 5.4):

  • Gerät verknüpfen

  • Bildschirmübertragung anzeigen

  • Hintergrundbild ändern

  • Farbschema ändern

  • Weblinks anpassen

Die Funktionen “Hintergrundbild ändern” und “Farbschema ändern” sollen dem Benutzer die Möglichkeit geben, das Aussehen der Welcome-page nach persönlicher Präferenz zu ändern. Diese Funktionen werden nur in der Browser-Instanz des Benutzers geändert und haben keine Persistenz nach einem Neustart des Gerätes, da die Einstellungen durch die Javascript API LocalStorage des Browsers gespeichert werden.

../../_images/settings_page.png

Abb. 5.4 Einstellungsseite der Welcome-page

Gerät verknüpfen

Die Funktion “Gerät verknüpfen” soll dem Benutzer die Möglichkeit geben, das Gerät mit einem anderen Gerät zu verknüpfen. Die Verknüpfung soll über eine einfache Buchstaben-Zahlen-Kombination erfolgen, die auf dem jeweiligen Gerät eingegeben werden muss. In dieser Implementierung wird die Verknüpfung über die IP-Adresse des Gerätes realisiert. Die IP-Adresse wird in eine einfache Buchstaben-Zahlen-Kombination umgewandelt, indem der Host-Teil der IP-Adresse in das Hexadezimalsystem umgewandelt wird.

Bildschirmübertragung anzeigen

Um sich eine aktive Bildschirmübertragung eines Lehrers anzusehen, kann die Funktion “Bildschirmübertragung anzeigen” verwendet werden. Dazu muss ein Lehrer zuerst auf einem Gerät die Funktion “Bildschirmübertragung starten” ausführen. Anschließend kann auf einem mit diesem verknüpften Gerät die Funktion “Bildschirmübertragung anzeigen” ausführen, um den Bildschirm des anderen Gerätes auf dem eigenen anzuzeigen.

Hintergrundbild ändern

Der Nutzer des Gerätes kann das Hintergrundbild der Welcome-page ändern. Dazu kann der er eines der drei vorinstallierten Hintergrundbilder auswählen. Es gibt aktuell keine Möglichkeit, eigene Hintergrundbilder aus einer Datei oder einem Link zu laden.

../../_images/welcome_page_orange.png

Abb. 5.5 Oranges Farbschema und Hintergrund der Startseite

Farbschema ändern

Um dem Benutzer die Möglichkeit geben, das Farbschema der Welcome-page nach persönlicher Präferenz zu ändern, kann der Benutzer eines der drei Farbschemata auswählen. Hier sind das dunkle Farbschema (siehe Abb. 5.6) oder das orange (siehe Abb. 5.5) neben dem Standard-Farbschema (siehe Abb. 5.3) zur Auswahl.

../../_images/welcome_page_dark.png

Abb. 5.6 Dunkles Farbschema und Hintergrund der Startseite

Suchmaschine ändern

Über diese Einstellung kann der Benutzer die Suchmaschine ändern, die in der Suchleiste verwendet wird. Dazu kann der Benutzer eine der vorgegebenen Suchmaschinen auswählen.

Es stehen die folgenden Suchmaschinen zur Verfügung:

  • Google

  • DuckDuckGo

Weblinks anpassen

Die Funktion “Weblinks anpassen” soll dem Benutzer die Möglichkeit geben, die Weblinks auf der Welcome-page zu ändern. Um neue links hinzuzufügen, muss der Benutzer die URL der Webseite und eine Beschriftung eingeben. Die Beschriftung und die URL werden dann in der Kachel des Weblinks angezeigt. Hier können auch Weblinks gelöscht werden, indem der Benutzer auf “Entfernen” klickt.

5.1.2.3. Lehreransicht

Die Lehreransicht beinhaltet Funktionen, die nur für Lehrer ausgelegt sind. Dabei handelt es sich um die Verwaltung anderer Geräte und die Verwaltung der Einstellungen dieser Geräte.

Um sicherzustellen, dass nur Lehrer auf die Lehreransicht zugreifen können, wurde ein Passwort-System implementiert. Das Passwort muss in der Onboarding-Phase des Systems festgelegt werden. Anschließend können die Schüler das Passwort nicht mehr ändern.

Um also die Lehreransicht zu öffnen, muss der Benutzer sich als Lehrer authentifizieren. Dazu wird er beim Versuch, die Lehreransicht zu öffnen, auf eine Seite weitergeleitet, auf der er das Passwort eingeben muss. Wenn hier das korrekte Passwort eingegeben wird, wird der Benutzer auf die Lehreransicht weitergeleitet. Ansonsten wird eine Fehlermeldung angezeigt.

Ist der Benutzer authentifiziert, wird ihm die Lehreransicht angezeigt. Der Benutzer bleibt für die Dauer von einer Stunde authentifiziert. Er kann also die Lehreransicht wieder verlassen, Einstellungen ändern und wieder zurückkehren, ohne sich erneut authentifizieren zu müssen. Nach Ablauf dieser Stunde muss er sich erneut authentifizieren. Die Authentifizierung kann auch manuell über den Button “Abmelden” beendet werden. Der Benutzer wird dann auf die Startseite weitergeleitet.

Diese zeigt eine Liste von Optionen, die jeweils eine kurze Beschreibung und einen oder mehrere Buttons enthalten.

Die folgenden Optionen sind verfügbar (siehe Abb. 5.7):

  • Geräte verknüpfen

  • Bildschirmübertragung

  • Remote-Kontrolle

  • Einstellungen persistieren

  • Passwort ändern

Diese Optionen senden jeweils eine Nachricht in Form eines HTTP-Requests an das Backend. Das Backend verarbeitet diese Nachrichten und führt die entsprechenden Aktionen aus. Eine genauere Beschreibung des Backends ist in einem eigenen Kapitel zu finden.

../../_images/teacher_page.png

Abb. 5.7 Lehreransicht der Welcome-page