Projekt: App zur Erstellung von Web-Präsentationen Entwicklung für Blinde

Chinesisches Sprichwort: Wenn der Wind der Veränderung weht, bauen die einen Windmühlen und die anderen Mauern.


Projekt-Kurzfassung Generator-App für Web-Präsentationen

Historie: Blinde Studierende der THM haben ( vor Jahren ) eine App zur Erstellung von Web-Präsentationen entworfen und entwickelt. Die App funktioniert clientseitig im Browser. Die App berücksichtigt ARIA. Die App wurde clientseitig wesentlich von "blinden" Studierenden gemacht.

Hier ist eine alte, selbsterklärende Demo-App , die der clientseitigen Erstellung von Web-Präsentationen dient und die als Ausgangspunkt für dieses Projekt dienen kann. Die App ist insbesondere auch für Blinde gut geeignet, um live-Präsentationen und Web-Seiten zu erstellen.

Die App soll nun aktualisiert werden und Client-Server-seitige Erweiterungen erhalten. Die App soll insbesondere Blinden dienen und als Web-Produkt blinden Menschen kostenfrei und anonym zur Verfügung gestellt werden. Die App ist für blinde User gedacht, die mit der App ein anonymes Werkzeug haben, um eigenständig eigene Wep-Präsentationen zu erstellen, zu testen, zu verbessern, weiter zu entwickeln und ins Netz hochzuladen.

 Die "Web-Generator-App" soll auf reinen textbasierten Eingaben beruhen, 
 die ggf. von der  Braillezeile  kommen. Auch ohne fremde Hilfe können 
 Blinde solchen Web-Präsentationen und/oder Web-Seiten anonym erstellen, 
 speichern, hochladen, verbessern, löschen.

Hinweise: ARIA und gesetzliche Vorgaben Accessible Rich Internet Applications

Für die einfache Bedienung sind ARIA-Gesichtspunket zu beachten. ARIA meint "Accessible Rich Internet Applications". Siehe z.B. de.wikipedia ARIA . ARIA ist eine im Rahmen der WAI erarbeitete W3C-Richtlinie. ARIA ist eine semantische HTML-Erweiterung, die das Website-Layout nicht verändert. Zur Barrierefreiheit gehören verbindliche gesellschaftliche Vorgaben und gesetzliche Regelungen.

Aktuell European Accessibility Act mit "RICHTLINIE DES EUROPÄISCHEN PARLAMENTS UND DES RATES zur Angleichung der Rechts- und Verwaltungsvorschriften der Mitgliedstaaten über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen."

Siehe z.B. einführend germanupa.de Barrierefreiheit ( Fachschrift Barrierefreiheit, .pdf ), W3C Accessibility Principles , mozilla.org ARIA Techniques


Hinweise: ARIA-taugliche Generator-App für Web-Präsentationen Arbeitsansicht

Die App macht aus einem Kurz-Text ( Arbeitsansicht, "token-Positionierung" ) den Quelltext für die Web-Seite ( Präsentation ). Durch upload der erstellten Web-Seite erscheint diese im Netz.

Hier ist eine alte, selbsterklärende Demo-App .


Hinweise: Alle Formular-Werte nach Objekt.werte praktisch

Zu einem Formular können zahlreiche (Eingabe-) Felder gehören. Günstig ist es, bei jeden lesenden Zugriff auf

EINEN Form-Wert jeweils
ALLE Form-Werte zu lesen

Beispiel: Die Funktion get_alle_formwerte() wandelt alle Eingabe-Werte von Eingabe-Feldern (meistens sind das Strings) in ein Objekt zu wandeln.

 function get_alle_formwerte() { var sel, opt, f = {};

   f.ta0  = document.getElementById("ta0").value  || "";
   f.inp1 = document.getElementById("input1").value || "";
   f.cb1  = document.getElementById("combobox1").checked || false;

     sel  = document.getElementById("select");
     opt  = sel[sel.selectedIndex]; 
   f.sel  = opt.value; // oder z.B. f.sel = opt.innerHTML

          // gibt zurück Objekt f = { ta0:.., inp1:.., cb1:.., sel:.. }
  return f; 
}

Wird z.B. von einer Select-Box id="select" von der ausgewählten Option der Value gebraucht, so wird im Programm-Code geschrieben:
var f = get_alle_formwerte(); und dann verwendet if( f.cb1 ) { ... } und ebenso der ausgewählte option-value vom select-Tag
verwendet mit f.sel



Hinweise: localStorage verwenden praktisch

Sicherheit: Haben "andere User" lokale Berechtigungen für den Computer, so können diese vertrauliche Informationen nutzen, wenn diese im unverschlüsselten Klartext vorliegen. Dies gilt auf für den lokalen Speicher. Dies bedeutet, dass keine "unverhaschten" Klartext-Passwörter im localStorage gespeichert werden sollen.

Beispiel: Im Sinne eine Multi-Faktor-Authentifizierung kann es sinnvoll sein, im lokal-Storage neben dem

"privaten Kennwort-Hash" ( verhaschtes Passwort ) auch einen
"quasi-Geräte-Umgebung-Hash" als Faktoren der Anmeldung zu hinterlegen. Siehe hierzu Browser-Mime-Types .

Eine Gesamtstimmigkeit des Anmeldeverfahrens braucht ein Zusammenführen der "vielfach gestreuten, zeitlich versetzten" Kennwörter-Passwörter-Teile bei der Anmeldung. Ändert sich ein Teil-Faktor, so werden bei der unvollständigen Anmeldung alle erforderlichen Teil-Faktoren erneut hinterfragt.

 var len = localStorage.length; // Enthält die Anzahl der gespeicherten Elemente
 localStorage.key(n);           // Gibt den Namen des n-ten Keys zurück.
 localStorage.getItem(key);     // Liefert den Wert zum Schlüssel key
 localStorage.setItem(key,str); // Legt den Wert value unter dem Schlüssel key ab
 localStorage.removeItem(key);  // Löscht den Wert zum Schlüssel key
 localStorage.clear();          // Löscht alle gespeicherten Daten

Es ist oft günstig, durchgängig die Funktionen set_JSON_local(key, str) und get_JSON_local(key) zu verwenden.

 function local_length( )     { return localStorage.length;}
 function local_set(key, str) { localStorage.setItem(key, JSON.stringify(str));}
 function local_get(key)      { return JSON.parse(localStorage.getItem(key)); }
 function local_remove(key)   { localStorage.removeItem(key);}
 function local_clear( )      { localStorage.clear();}

Hinweise: "Herkömmliche" Authentifizierung Zugang-Erlaubnis

Anmeldeverfahren beim Server hängen mit Anmeldesymbolen, Schriftzeichen, User-Namen, Kennwörtern, Paßwörtern, usw. zusammen. Bei Passwörtern ist jedes "Item" von Bedeutung. "Besonders lange" Passwörter gelten als sicherer.

Um den Zugriff durch "nicht autorisierter Personen" auf Dateien, Programme und andere Ressourcen zu verhindern, sollte eine Paßwort schwer zu erraten sein. Wie war bisher? Was ist ein "gutes Kennwort"?

Beispiel: Ein Passwort ...

 - ist mindestens acht Zeichen lang
 - enthält Großbuchstaben, Kleinbuchstaben, Ziffern und Symbole
 - unterscheidet sich deutlich von vorherigen Kennwörtern
 - verwendet keinen Benutzernamen
 - verwendet keinen richtigen ( Firmen-) Namen
 - enthält kein vollständiges Wort

Hinweise: Zwei-Faktor-Authentifizierung Anmeldeverfahren?

Beispiel: Die Zwei-Faktor-Authentifizierung (2FA) verwendet für den Identitätsnachweis eines Nutzers eine Kombination aus zwei möglichst unterschiedlichen, unabhängigen Bereichen. Das ist oft etwas, das der Nutzer weiß, das er besitzt, oder etwas, das untrennbar zu ihm gehört. So sind z.B. bei einer Transaktion am Bankautomaten sowohl die Bankkarte als auch der PIN erforderlich.


Hinweise: Multi-Faktoren-Authentifizierung Welche Anmeldeverfahren?

Die Zwei-Faktor-Authentifizierung ist ein Spezialfall der Multi-Faktor-Authentifizierung.

Eine Gesamtstimmigkeit des Anmeldeverfahrens braucht ein Zusammenführen der "vielfach gestreuten, zeitlich versetzten" Kennwörter-Passwörter-Teile bei der Anmeldung. Ändert sich ein Teil-Faktor, so werden bei der unvollständigen Anmeldung alle erforderlichen Teil-Faktoren erneut hinterfragt.

Wie kann ein modernes Verfahren erdacht, untersucht werden, wenn es aus Sicherheitsgründen asynchrone Verfahrensketten und "vielfach gestreute, zeitlich versetzte" Kennwörter-Passwörter-Teile günstiger sind?
Optional zu Übungszwecken: Zum Experimentieren kann krypt und Zeichen für aktuelle Belange erweitert werden.

Weitere Hinweise finden sich u.a. in Schrift (einführend) , Dokument-Strukt., Information (allg.) , Information (Codes) , Information (Theorie) , Kommunikation (allg.) , Sicherheit+Kryptologie, Signaturnamen.


Hinweise: Wie anmelden unter ARIA-Gesichtspunkten? anonym, ARIA

Die App ist für blinde User gedacht, die mit der App ein anonymes Werkzeug haben, um selbst eigene Wep-Präsentationen zu erstellen. Wie soll dies erfolgen? Jeder Blinde User darf die App kostenfrei nutzen. Jeder Blinde User kann sich ein anonymes Pseudokonto einrichten.

 1. Es gibt einen feststehenden, obligatorischen 
    Hash-Geräte-Zugangswert.
 2. Es gibt eine benutzerdefinierte anonyme Zugangskennung,
    indem aus den Kürzeln das "verhashte, anonymisiertes" 
    Anmelde-Passwort gebildet werden.

Wie kann mit der Erstellungs-App eine einfache Client-Server-Organisation erfolgen? Wie soll eine anonyme Anmeldung realisiert werden?


Hinweise: Wie anmelden zur Nutzung? ( ausführlicher ) anonym, ARIA

User können die App ohne Server-Space nutzen. Hier geht es aber um die anonyme Nutzung von Server-Space. Der Platz auf dem Server wird in der experimentellen Phase begrenzt.

Wie kann mit der Erstellungs-App eine einfache Client-Server-Organisation erfolgen? Wie soll eine anonyme Anmeldung realisiert werden?

- Beim erstmaligen Starten der App gibt der User als Anmelde-Passworte "Initiale, seine Kürzel" ein.
- Die Kürzel sind leicht zu behalten, werden i.a. aber lediglich einmal für das Anmelden benutzt.
- Aus den Kürzeln kann keine eindeutige personale Identität konstruiert werden ( anonymität ).
- Die Kürzel werden bei nachfolgender App-Nutzung lediglich in Ausnahmefällen erneut abgefragt.
- Der User gibt seine gewählten Kürzel lediglich bei der ersten Nutzung des Zuganges ein.
- Die gewählten Kürzel für den ersten Zugang geben die anonyme Zugangskennung, ggf. auch durch anonyme Geräte-/Browser-Werte-Ergänzungen.
- Der belegte anonyme User-Zugang ( "Initiale, seine Kürzel" ) wird lediglich bei der ersten Nutzung des Zuganges eingegeben.
- Die Anmelde-Kürzel werden "verhascht" auf dem eigenen Computer im lokalStorage gespeichert.
- Der lokalStorage ist unzugänglich für Außenstehende.
- Es werden die "verhaschten" Anmelde-Kürzel vom lokalStorage gelesen und ggf. verwendet.
- "wer zuerst kommt malt zuerst": Es gibt keine 2 verschiedene User mit gleichen Kürzeln und Gerätespezifikationen.
- Bei den App-Nutzungen ist keine erneute Eingabe der Anmelde-Kürzel notwendig.
- "Wer nichts macht, wird gelöscht": Wird z.B. die App 2 Monate lang nicht benutzt, so werden die "Anmelde-Kürzel" ( Anmelde-Passworte ) erneut abgefragt.
- Erfolgt in der nachfolgenden Woche keine gültige Anmeldung, so wird der "pseudo-Account" gelöscht ( freigegeben ).

Beispiel für "Anmelde-Kürzel":    <input type="text"    mit Hintergrund-Farbe gleich Vordergrund-Farbe

 Input-Feld mit Merkregel: 
 [VNVMTGVNMANZORT]
  VNV             = 1/2/3. Buchstabe vom Vornamen der Vaters
     MTG          = eigener Geburtstag (Monatstag)
        VNM       = 1/2/3. Buchstabe vom Vornamen der Mutter
           ANZ    = Anzahl der älteren Geschwister
              ORT = 1/2/3. Buchstabe des Geburtsortes

 Beispiel: "Jochen, 23.4.199, Wilfriede, 1, Gießen"
 ergibt die Eingabe

    [Joc23Wil1Gie]  

    mit dem Account-Hash: 

    9090dsdf09e20sdf09sd0uasucc23423


Hinweise: Wie sieht ein fexibler Algorithmus aus? ...

Wie sollen sich blinde Nutzer anmelden, um App vollständig nutzen zu können? Wie kann ein Passwort lleicht behalten werden? Wie kann ein Passwort clientseitig erstellt werden?

// LEDIGLICH DAS PRINZIP:
var PW_default = "[j+k*l]{,}";
var PW_time = ((Date.now().toString(16)).split("")).reverse().join("");
 function crp(s, a, b, uri_coding) { "use strict";
   a = a || PW_default;
   b = b || PW_time;

 var i, c, p, jn , j, kn, k, sn, r = [], win = window;
 if (typeof s === "string") { s = JSON.parse(JSON.stringify(s));}
 if (uri_coding === "decode") { s = win.decodeURIComponent(s); }

 jn = a.length; j = jn;
 kn = b.length; k = kn;
 sn = s.length;
 for (i = 0; i < sn; i += 1) {
   j = j + 1; if (j >= jn) { j = 0; }
   k = k + 1; if (k >= kn) { k = 0; }
   p = a.charCodeAt(j); p = (p ^ b.charCodeAt(k)) || p;
   c = s.charCodeAt(i); c = (p ^ c) || c;
   r.push(String.fromCharCode(c));
 } s = r.join("");
 if (uri_coding === "encode") { s = win.encodeURIComponent(s); }
 return s;
}
s = UTF-8-String
a = erster Faktor = erstes PW, 
    falls a=0: PW_default ist "[j+k*l]{,}"     
b = zweiter Faktor = zweites PW 
    falls b=0: GerätId und/od. PW_time (One-Time-Pad)
optional: "encode"/"decode" 
    liefern = URI-encoded-String ( "%-String )

Test-Anzeige:


Hinweis zu AJAX und Callback Einfachheit

Siehe z.B. AJAX .

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr