Progressive Web Apps barrierefrei entwickeln – Anleitung 2024

In diesem Blogartikel werden die Grundlagen erklärt, wie Sie progressive Web Apps entwickeln können.

Was sind Apps?

Apps sind Programme oder Anwendungen, die auf mobilen Geräten wie Smartphones oder Tablets installiert werden können. Apps dienen dazu, bestimmte Aufgaben zu erledigen, Informationen abzurufen oder Unterhaltung zu bieten. Man kann Apps aus dem entsprechenden App-Store herunterladen und auf seinem Gerät nutzen.

Was sind native Apps?

Native Apps sind spezielle Programme, die direkt für ein bestimmtes Betriebssystem wie Android oder iOS entwickelt wurden. Das bedeutet, sie sind genau auf die Funktionen und Eigenschaften des jeweiligen Systems zugeschnitten. Diese Apps werden über die App-Stores (Google Play Store oder Apple App Store) heruntergeladen und installiert. Native Apps können die Hardware und Software des Geräts optimal nutzen, wie die Kamera, GPS oder Push-Benachrichtigungen, wodurch sie in der Regel schnell und zuverlässig sind.

Einführung in progressive Web Apps (PWAs)

Eine progressive Web-App wird mit HTML, CSS und JavaScript programmiert. Sie ist eine Webseite, die sich wie eine App anfühlt. Sie funktioniert ähnlich wie eine normale App auf einem Smartphone oder Tablet, aber sie muss nicht aus einem App-Store installiert werden. Die App kann über einen Webbrowser aufgerufen werden. Progressive Web-Apps können auch offline genutzt werden und bieten eine schnellere Ladezeit. Progressive Web App wird abgekürzt mit PWA.

Für Anwender, im englischen User, ist die Nutzung eine progressive Web-Apps sehr einfach.

HTML, CSS und JavaScript – Was ist das?

HTML, CSS und JavaScript sind alle Programmiersprachen, die für die Entwicklung von PWAs verwendet werden. HTML (Hypertext Markup Language) wird verwendet, um die Struktur und den Inhalt einer Webseite zu definieren. Es wird verwendet, um Texte, Bilder, Links und andere Elemente auf einer Webseite anzuzeigen. CSS (Cascading Style Sheets) wird verwendet, um das Aussehen und das Layout einer Webseite zu gestalten. Mit CSS können Entwickler Schriftarten, Farben, Abstände und andere visuelle Eigenschaften einer Webseite festlegen. JavaScript wird verwendet, um interaktive Elemente einer Webseite zu erstellen. Mit JavaScript können Benutzeraktionen wie Klicks, Überfahren mit der Maus und Eingaben in Formularen verarbeitet werden, um dynamische und reaktionsschnelle Webseiten zu erstellen.

„Progressive Web Apps barrierefrei entwickeln – Anleitung 2024“ weiterlesen

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.

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.

Was ist ein barrierefreies Quiz?

Ein barrierefreies Quiz ist ein Quiz dass auch von Menschen mit unterschiedlichen körperlichen Einschränkungen und Behinderung genutzt werden kann. In diesem Blogartikel wird gezeigt wie ein barrierefreies Quiz mit HTML, CSS und JavaScript programmiert wird.

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
Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android

„Barrierefreie Quiz App programmieren – 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