Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Türme von Hanoi. Die App heißt „Marlems Türme von Hanoi“.
Progressive Web App – Was ist das?
Eine progressive Web App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für Progressive Web App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass Progressive Web Apps ohne Internetverbindung genutzt werden können. Mit Hilfe einer Manifest-Datei ist es möglich, dass eine Progressive Web App genauso aussieht wie eine Native App. Progressive Web Apps sind plattformunabhängig, dass bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.
Progressive Web Apps im Browser ausführen
Progressive Web Apps können im Browser ausgeführt werden oder installiert werden. Da progressive Web Apps von Google entwickelt wurden, bietet sich der Browser Google Chrome an. Im Betriebssystem IOS empfehle ich den Browser Safari. Die Web-Adresse vom Marlems Türme von Hanoi ist www.tuerme-von-hanoi.de .
Wie werden progressive Web-Apps „installiert“?
Alle Browser von Desktop und Mobilgeräten, egal ob im Betriebssystem Windows, Ubuntu, Android oder im Betriebssystem IOS haben ein Menü „App installieren“ oder „Zum Startbildschirm hinzufügen“ oder „Zum Home-Bildschirm“. Mit dieser Funktion kann eine Progressive Web App als Symbol auf den Startbildschirm angelegt werden.
Progressive Web-Apps können auch auf PCs oder Laptops in Browsern aufgerufen werden. Wenn eine progressive Web-App bestimmte Anforderungen erfüllt, dann gibt es im Browser Google Chrome und im Browser Edge ein Menü „… installieren“ oder „App installieren“.
In diesem Blogartikel wird erklärt, wie Sie eine progressive Web App in unterschiedlichen Betriebssystemen installieren können:
Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS
Die App wurde erfolgreich getestet
Die App wurde erfolgreich in folgenden Betriebssystemen mit folgenden Browsern getestet:
| Betriebsystem | Browser |
|---|---|
| Windows 11 | Google Chrome |
| Windows 11 | Microsoft Edge |
| Ubuntu 22.04 | Google Chrome |
| Android 13 | Google Chrome |
| IOS 16 | Safari |
Marlems Türme von Hanoi installieren und Spiel in unterschiedlichen Betriebssystemen
In diesem Abschnitt finden Sie Installationsleitungen wie Sie die App in unterschiedlichen Betriebssystemen installieren und spielen können.
Installation im Betriebssystem Windows
In folgendem Video zeige ich die Installation der barrierefreien App im Betriebssystem Windows:
Installation im Betriebssystem Ubuntu
In folgendem Video zeige ich die Installation der barrierefreien App im Betriebssystem Ubuntu:
Installation im Betriebssystem Android
In folgendem Video zeige ich die Installation der barrierefreien App im Betriebssystem Android:
Installation im Betriebssystem IOS
In folgendem Video zeige ich die Installation der barrierefreien App im Betriebssystem IOS:
Die App funktioniert auch ohne Internetverbindung
Wenn Sie die App zum ersten Mal starten und Ihr Computer, Laptop oder Mobilgerät hat Verbindung zum Internet, dann sorgt die App dafür, dass alle notwendigen Dateien in einem Speicher des Browsers gespeichert werden. Von diesem Moment an können Sie auch Türme von Hanoi spielen, auch wenn Ihr Gerät keine Verbindung zum Internet hat.
Ziel des Computerspiels
Das Ziel von Türmen von Hanoi ist es, den Turm 1 (ganz links) als Turm 3 (ganz rechts) aufzubauen. Hierbei ist zu
beachten, dass nur kleine Scheiben auf große Scheiben gestapelt werden dürfen.
Bedienung der App
Das Verschieben der Scheiben funktioniert auf dem Laptop und PC mit der Computermaus und mit den aufklappbaren Listen.
Auf dem Smartphone, iPhone, Tablet und iPad mit dem Finger und mit den aufklappbaren Listen.
Mir ist wichtig, dass auch Menschen ohne Behinderungen Lust darauf haben meine Apps zu nutzen. Deswegen freue mich, dass das Verschieben der Scheiben auch per Computermaus und Finger möglich ist.
Barrierefreiheit
Die App Marlems Türme von Hanoi ist barrierefrei.
Screenreadertauglichkeit
Nach Aktivierung des Screenreadermodus können auch blinde Menschen die App nutzen.
Tastaturbedienbarkeit
Die App kann auch auf dem Computer und Laptop ausgeführt werden. Dort ist die App auch per Tastatur bedienbar.
Alle Bedienelemente sind per Tabulatortaste erreichbar. Folgende Tastenkürzel können Sie am Computer und Laptop verwenden:
| App-Funktion | Tastaturkürzel |
|---|---|
| Aktivierung aufklappbare Liste „Scheiben“ | Alt + s |
| Aktivierung aufklappbare Liste „Von Turm“ | Alt + v |
| Aktivierung aufklappbare Liste „Nach Turm“ | Alt + n |
| Aktivierung Chheckbox „Screenreadermodus“ | Alt + c |
Tastaturfokus wird deutlich angezeigt
Wenn die App auf dem Computer oder Laptop ausgeführt wird, ist es möglich mit der Tabulatortaste die Bedienelemente zu erreichen. Das aktive Bedienelement hat immer eine Gelbe Hintergrundfarbe. Leider ist dies bei der Checkbox nicht möglich.
Das deutliche anzeigen des Tastaturfokus hilft Menschen mit einer Sehbehinderung.
Barrierefreier Farbkontrast
Für Menschen mit einer Farbfehlsichtigkeit ist es wichtig, dass der Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe groß genug ist. Bei der Programmierung der App-Oberfläche wurde darauf geachtet, dass alle Farbkontraste der App-Oberfläche barrierefrei sind.
Windows: Auch mit aktiven Kontrast-Designs einsetzbar
Im Betriebssystem Windows ist es möglich bei „Einstellungen“, „Barrierefreiheit“, „Kontrast-Designs“ ein anderes Kontrast-Design auszuwählen.
Die App wurde so programmiert, dass auch bei aktiven Kontrast-Design die App gut bedienbar ist.
Folgender Screenshot zeigt die barrierefreie App mit einem Kontrast-Design von Windows 11:
Bedienung für Menschen mit motorisch eingeschränkten Händen
Es gibt Menschen die haben wegen einer Körperbehinderung oder nach einem Schlaganfall eine motorische Einschränkung in den Händen. Meine Behinderung heißt Spastik. Meine linke Hand sieht für viele Menschen „gesund“ aus, aber beim Verschieben der Turmscheiben auf dem Computer per Drag and Drop oder mit dem Finger auf Mobilgeräte merke ich, dass meine linke Hand nicht so „gesund“ ist wie eine linke Hand von Menschen ohne Behinderung.
Für alle die Menschen die eine motorische Einschränkung in den Händen haben und beim Türme von Hanoi spielen Spaß haben möchten, gibt es die Möglichkeit die Turmscheiben mit den Aufklappbaren Listen „Von Turm“ und „Nach Turm“ zu verschieben. Mit diesen aufklappbaren Listen macht mir das spielen mit meiner App richtig Spaß und ich bin richtig schnell.
Marlems Türme von Hanoi wurde mit Google Lighthouse erfolgreich validiert
Als Entwickler von progressive Web Apps ist es wichtig, dass es eine Möglichkeit gibt, zu kontrollieren ob die progressive Web App in allen Kategorien fehlerfrei ist.
Diese Überprüfung kann im Browser Google Chrome mit Lighthouse erfolgen. Folgende Grafik zeigt, dass die progressive Web App Marlems Türme von Hanoi in alle Kategorien die volle Punktzahl erhält.
Schlussbemerkung
Türme von Hanoi ist ein absolutes Lieblingscomputerspiel von mir und deswegen bin ich sehr glücklich, dass ich es geschafft habe (mit Unterstützung von JavaScript und CSS-Expertinnen) diese App zu veröffentlichen.
Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .