Barrierefreie Informatik – Marlem-Software – IT-Lösungen die Brücken bauen

Barrierefreie Quiz App programmieren – Anleitung

Ich in diesem Blogartikel erkläre ich wie Sie mit HTML, CSS und Javascript eine barrierefreie progressive Quiz App programmieren können.

Inhaltsverzeichnis

Multiple Choice Quiz – Was ist das?

Kennen Sie die Fernsehsendungen „Wer wird Millionär?“, „Gefragt – Gejagt“ oder „Quizduell – Der Olymp“. In diesen Fernsehsendungen wird eine Frage gestellt und es gibt 3 oder 4 Antwortmöglichkeiten. Diese Art von Quiz nennt sich Multiple Choice Quiz. In diesem Blogartikel erkläre ich Ihnen wie Sie einen barrierefreien Multiple Choice Quiz mit HTML, CSS und Javascript programmieren können. Für Entwickler die Grundkenntnisse in der Programmiersprache Javascript besitzen, ist es sehr einfach mehrere Quiz-Apps mit unterschiedlichen Themen zu programmieren.

Ziel des Blogartikels

Das Ziel des Blogartikels ist es, Ihnen eine Anleitung zu geben, mit der Sie sehr schnell barrierefreie progressive Quiz Apps selbst programmieren können mit unterschiedlichen Themen und unterschiedlichen Aussehen. Los geht es! So sieht die App aus die wir jetzt gemeinsam programmieren:

Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android

„Barrierefreie Quiz App programmieren – Anleitung“ weiterlesen

Barrierefreie Navigation für eine Webseite erstellen – Anleitung

In diesem Blogartikel erkläre ich wie Sie eine barrierefreie Navigation für eine Webseite mit HTML und CSS erstellen können.

Barrierefreie Navigation – Was ist das

Sicherlich bist du bereits mit dem Konzept der Website-Navigation vertraut, das auch oft als Website-Menü bezeichnet wird. Dieses wichtige Element ist die horizontale Leiste, sie kann auch vertikal sein, die auf einer Webseite platziert ist und dir ermöglicht, mühelos zwischen verschiedenen Unterseiten zu navigieren. Hier findest du Links, auf die du klicken kannst, um direkt zu verschiedenen Zielseiten zu gelangen. Diese Leiste muss so programmiert sein, dass sie für Menschen mit unterschiedlichen Behinderungen oder anderen körperlichen Einschränkungen bedienbar ist.

Barrierefreie Navigation – Das HTML

Hier das HTML zur barrierefreien Navigation:


    <nav>
      <ul class="nav-list">
        <li>
          <a href="index.html" accesskey="s"><span class="buchstabe_unterstreichen">S</span>tartseite</a>
        </li>
        <li>
          <a href="index.html" accesskey="l">Dienst<span class="buchstabe_unterstreichen">l</span>eistungen</a>
        </li>
        <li>
          <a href="index.html" accesskey="ü"><span class="buchstabe_unterstreichen">&Uuml;</span>ber uns</a>
        </li>
        <li>
          <a href="index.html" accesskey="k"><span class="buchstabe_unterstreichen">K</span>ontakt</a>
        </li>
      </ul>
    </nav>

Computer ohne Maus, nur per Tastatur bedienen – So arbeiten auch blinde Menschen

In meinen Vorträgen an Hochschulen und Universitäten und in meinen Blogartikeln und YouTube-Videos erkläre ich oft: „Blinde Menschen können keine Computermaus bedienen!“. Aber geht das überhaupt? Kann zum Beispiel das Betriebssystem Windows kann ohne Computermaus bedient werden? Genau das erkläre ich in diesem Blogartikel.

Mit der Tastaturmaus das Betriebssystem Windows bedienen

Die Tastaturmaus gibt es für Menschen die wegen einer Behinderung oder einer anderen körperlichen Einschränkung keine Computermaus, kein Mauspad und keinen Trackball bedienen können. Die Tastaturmaus finden Sie im Menü „Einstellungen“, „Barrierefreiheit“, „Maus“ in der Kategorie „Interaktion“.

Mausfunktion	Tasten
Mauszeiger runter	Taste 2
Mauszeiger links	Taste 4
Mauszeiger rechts	Taste 6
Mauszeiger hoch	Taste 8
Linker Mausklick	Taste 5 oder / und Taste 5
Rechter Mausklick	Taste * und danach Taste 5
Doppeklick	große Plustaste

„Computer ohne Maus, nur per Tastatur bedienen – So arbeiten auch blinde Menschen“ weiterlesen

Web Formulare barrierefrei programmieren / coden – Eine ausführliche Anleitung

In diesem Blogartikel erkläre ich sehr ausführlich wie Sie Web Formulare barrierefrei programmieren / coden können.

Web-Formulare sind noch immer sehr wichtig. Leider ignorieren die gängigen Anleitungen wie man Web-Formulare programmieren soll, die Barrierefreiheit. Gemeindeverwaltungen, Landratsämter, Finanzämter und Regierungspräsidien sind aber nach § 12a Barrierefreie Informationstechnik Behindertengleichstellungsgesetz – BGG zur digitalen Barrierefreiheit verpflichtet. Deswegen zeige ich in diesem Blogartikel wie ein barrierefreies Web-Formular mit HTML und CSS programmiert wird nach der europäischen Norm 301 549.

„Web Formulare barrierefrei programmieren / coden – Eine ausführliche Anleitung“ weiterlesen

Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023

In diesem Blogartikel wird ausführlich erklärt wie Sie progressive Web Apps entwickeln bzw. erstellen können.

Technologische Grundlagen von PWAs

Hier kommt ein kurzer Überblick über die technischen Grundlagen von progressive Web Apps.
Der Entwickler muss HTML, CSS und JavaScript beherrschen. Damit die App bei allen Bildschirm bzw. Displaygrößen gut aussieht muss der Entwickler responsive Webdesign umsetzen können. Damit die PWA wie eine App aussieht, benötigt diese ein App-Manifest. Zur Technologie einer PWA gehört auch die Installierbarkeit. Die Offline-Fähigkeit ist eine wichtige technologische Grundlage. Ein Service Worker sorgt dafür, dass die App installierbar ist und auch offline genutzt werden kann. Die Plattformunabhängigkeit, die Fähigkeit auf unterschiedlichen Betriebssystemen eingesetzt werden können ist eine sehr wichtige Technologische Grundlage.

Auffindbarkeit

Leider können PWAs in App Stores nicht gefunden werden. Weder im App Store von Google, Apple oder Microsoft. Es muss dafür gesorgt werden, dass PWAs in Suchmaschinen gefunden werden. Allerdings muss auch erwähnt werden, dass die Stores für ungeübte Nutzer nicht einfach zu verstehen sind.

Aber wie kann eine PWA in Suchmaschinen gefunden werden? Die PWA kann bei Suchmaschinen indiziert werden. Sie können einen WordPress-Blogartikel für eine PWA schreiben und diesen für die Suchmaschine indizieren oder Sie erklären in einem YouTube-Video Ihre App und indizieren das Video. Aus meiner Sicht ist es für den Nutzer ein Vorteil, wenn er PWAs in der Suchmaschine suchen und finden kann. Wenn ich als Nutzer vor Endgeräten sitze, suche ich Apps lieber in der Suchmaschine wie in 3 unterschiedlichen App Stores.

Sind progressive Web Apps vollverwertige Apps?

progressive Web Apps, abgekürzt PWAs sind noch immer nicht so richtig in der Gesellschaft angekommen. Oft wird behauptet, dass PWAs eine „echten“ Apps sind. Es gibt Personen die behaupten, dass progressive Web Apps sind mobile Websites. Das ist falsch! Es gibt viele Unterschiede zwischen PWAs und mobile Websites. mobile Websites fehlt zum Beispiel die Installierbarkeit. PWAs besitzen ein umfangreiches, sehr gut durchdachtes Konzept. Viele Entwickler arbeiten sehr fleißig daran, die Möglichkeiten von PWAs stetig zu verbessern. Die Programmiersprache Javascript ist eine vollwertige Programmiersprache die dafür sorgt, dass PWAs nahezu alles können, was native Apps auch können. Es gibt ein paar wenige Fähigkeiten die nativen Apps können und PWAs nicht. Aber in vielen sind PWAs nativen Apps ebenbürtig. Ich möchte mit diesem Artikel versuchen Appentwickler von PWAs zu begeistern, jedoch sage ich auch ganz deutlich, dass native Apps auch toll sind. Auf jeden Fall möchte ich die Personen, welche behaupten, dass PWAs das gleich sind wie mobile Websites, davon überzeugen, dass eine PWA wesentlich mehr kann wie eine mobile Webseite! Die Entwicklung von progressive Web Apps ist kostengünstiger als die Entwicklung von native Apps. Eine PWA kann auf allen Betriebssystemen eingesetzt werden. Alle PWAs die ich programmiert habe können auf allen Endgeräten und Betriebssystemen eingesetzt bzw. installiert werden. Bei der Entwicklung von native Apps muss für jedes Betriebssystem eine eigene App programmiert werden. Eine native App kann nur in einem Betriebssystem installiert werden. Deswegen ist das programmieren von PWAs kostengünstiger. „Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023“ weiterlesen

Barrierefreie Appentwicklung als Progressive Web App – Fachartikel im windows .developer von Markus Lemcke

Im windows .developer wurde in Ausgabe 8.2023 ein Fachartikel von mir veröffentlicht über Barrierefreie Appentwicklung als Progressive Web App.

Von September bis Dezember 2021 habe ich auf der Webseite Udemy den Kurs gemacht „Web-Apps mit Javascript und jQuery selber programmieren“. Parallel dazu habe ich das Buch von Christian Liebel über Progressive Web-Apps durchgearbeitet.

Dezember 2022: Ein Fachartikel von mir über Barrierefreie Appentwicklung als Progressive Web-App wird im entwickler magazin veröffentlicht und das Thema landet auf der Titelseite!

Gestern Abend hatte ich Post von der IT-Fachzeitschrift windows .developer .
Mein Fachartikel der im entwickler magazin Ausgabe 1.2023 veröffentlicht wurde, wird jetzt in der Ausgabe 8.2023 in der IT-Fachzeitschrift windows .developer in voller länge veröffentlicht.

Hier die Titelseite der Ausgabe:

Titelseite der IT-Fachzeitschrift windows .developer Ausgabe 8.2023

Hier die erste Seite des Artikels:

Seite 1 des Fachartikels "progressive Web Apps barrierefrei entwickeln" von Markus Lemcke in der IT-Fachzeitschrift windows .developer — Titelseite der IT-Fachzeitschrift windows .developer

Ich freue mich sehr.

Vielen Dank an die IT-Fachzeitschrift windows .developer .

Schlussbemerkung

Es geht voran … die Apps werden barrierefrei !!!
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 .

Marlems Türme von Hanoi App – neue barrierefreie progressive Web App

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 App – neue barrierefreie progressive Web App“ weiterlesen

Excel VBA Programmieren lernen – Die Grundlagen einfach erklärt

In diesem Artikel werden die Grundlagen der Excel VBA Programmierung einfach erklärt.

Inhaltsverzeichnis

Kurs in der Volkshochschule Reutlingen als Dozent für Microsoft Excel VBA war Anstoß für YouTube-Videos und Blogartikel

Der Volkshochschule Reutlingen ist die Gleichstellung von behinderten Menschen und die Inklusion sehr wichtig. Deswegen stehe ich seit mehreren Jahren als Dozent im Programm der Volkshochschule Reutlingen mit mehreren Kursen. Vor 4 Wochen bekam ich eine Mail von der Volkshochschule Reutlingen, dass mein Kurs „Programmieren mit MS-Excel VBA“ stattfindet. Da ich für die Kurteilnehmer Kursunterlagen erstellen musste, hatte ich jetzt genug Material um YouTube-Videos und einen Blogartikel über Programmieren mit Excel VBA zu erstellen. Wegen Corona, fand mein Kurs über Zoom statt und war somit auch eine Art Online-Kurs!

„Excel VBA Programmieren lernen – Die Grundlagen einfach erklärt“ weiterlesen

Marlems Schiebe-Puzzle App – neue barrierefreie progressive Web App

Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Schiebe-Puzzle. Die App heißt „Marlems Schiebe-Puzzle“.

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

Wie werden progressive Web-Apps „installiert“?

Die App kann auch ohne Internet genutzt werden. Wenn Sie die App zum ersten Mal starten benötigen Sie über WLAN oder Funk eine Internetverbindung. Beim ersten Starten der App werden alle notwendigen Dateien in ein Browserspeicher geladen. So bald alle Dateien im Browserspeicher sind, können Sie die App nutzen, auch wenn Ihr Smartphone,IPhone, Tablet oder IPad gar keine Internetverbindung hat.

Was ist Schiebe-Puzzle?

Schiebepuzzle ist ein Spiel, bei dem man versucht, durch Verschieben von Kacheln ein Bild oder eine Form wiederherzustellen. Das Spiel besteht aus einer quadratischen oder rechteckigen Schachtel, in der sich mehrere rechteckige Kacheln befinden. Jede Kachel ist mit einem Teil eines Bildes oder einer Form bedruckt.
Zu Beginn des Spiels sind die Kacheln in einer zufälligen Reihenfolge angeordnet, sodass das Bild oder die Form nicht erkennbar ist. Ziel des Spiels ist es, die Kacheln durch Verschieben so anzuordnen, dass das Bild oder die Form wiederhergestellt wird.
Das Verschieben der Kacheln erfolgt, indem man eine Kachel auswählt und sie in eine freie Position schiebt, um Platz für andere Kacheln zu schaffen. Man kann eine Kachel nur in eine Position schieben, die sich in unmittelbarer Nähe befindet und leer ist.
Das Spiel kann in verschiedenen Schwierigkeitsstufen gespielt werden, indem man die Anzahl der Kacheln erhöht oder die Anzahl der möglichen Bewegungen begrenzt. Schiebepuzzle sind in der Regel ein Einzelspieler-Spiel und können auf Papier oder mit einem Computer oder mobilen Gerät gespielt werden.

Die barrierefreie App Marlems Schiebepuzzle auf einem Smartphone mit Betriebssystem Android
„Marlems Schiebe-Puzzle App – neue barrierefreie progressive Web App“ weiterlesen

Marlems Hangman Spiel – neue barrierefreie progressive Web App

Das IT-Unternehmen Marlem-Software hat eine neue barrierefreie progressive Web App entwickelt, das Computerspiel Hangman. Die App heißt „Marlems Hangman-Spiel“.

Progressive Web App – Was ist das?

Progressive Web Apps im Browser ausführen

Die App-Oberfläche der barrierefreien App Marlems Hangman-Spiel im Betriebssystem Android

„Marlems Hangman Spiel – neue barrierefreie progressive Web App“ weiterlesen