ESA 2012.A4: Präsentation erstellen Create HTML für blinde Menschen

Aufgabe: Erstelle Tool, das aus einfachem ASCII-Text eine HTML-Seiten erstellt. Es ist ein Toolchen zu erstellen, daß es blinde Menschen, die einen Screen-Reader verwenden, ermöglicht, auf einfache und barrierearme Weise eigene HTML-Seiten und HTML-Präsentationen zu erstellen. Hier sind wikipedia-Infos zu Screenreader, Blindenschrift, Punktschriftmaschine und fakoo.de: braille

Das Toolchen bekommt den Titel: "Erstellungstool für HTML ( für blinde User )". Das Erstellungstool braucht keinen Server und verwendet lediglich ECMAScript. Das Toolchen soll auf einfachste Weise die erstellten Seite beim W3C-Validierer validieren können. Für die Umwandlung [HTML-Erstellen] von der ASCII-Arbeitsansicht in den Quelltext einer HTML-Seite werden Reguläre Ausdrücke verwendet, siehe z.B. de.wikipedia Regulärere Ausdruck .

Was sind die Leitpunkte für die Erstellung des Toolchen?

  1. Möglichst einfache, barrierearme Bedienung bei hoher Robustheit, wobei die selbstgeschriebenen Bibliotheken (dom, visu, daten) verwendet werden sollen.
  2. Die ASCII-Texteingabe (Autor-Text) erfolgt in eine Texarea mit ACII-Zeichen. Dieser ASCII-Eingabetext wird Arbeitsansicht genannt. Die Arbeitsansicht soll eine sehr einfache, kurze, deklarative Sprache verwenden, die den Transformationsvorgang steuert. Hierzu können am Zeilenanfang sogenannte Token (wie z.B. -dia; -p; -ta;) eingesetzt werden.
  3. Die Umwandlung [HTML-Erstellen] übersetzt mit Hilfe der Token die Arbeitsansicht in den Quelltext (incl. Layout, Stilvorlagen ) einer HTML-Seite.
  4. Die Browser-Vorschau [Vorschau] zeigt die erstellt HTML-Seite (wie im Browser) an.
  5. Die erstellte Seite soll validiert werden können, indem mit [HTML-validieren] der HTML-Quelltext zum W3C-Validierer geschickt wird.
  6. Eine erstellte HTML-Seite soll (seitenintern als HTML-Kommentar) den ASCII-Text der Arbeitsansicht "stets bei sich haben". Dadurch ist mit dem Toolchen eine einfache Extraktion [Arbeistansicht] der Arbeitsansicht möglich. Dadurch kann mit dem Toolchen die HTML-Seite verbessert und weiterentwickelt werden.
  7. (optional) Auf möglichst einfache Weise sollen mit win.localStore Arbeitsansichten über eine Browser-Sitzung hinaus clientseitig gespeichert werden.
  8. (optional) Auf möglichst einfache Weise sollen mit AJAX Arbeitsansichten über eine Browser-Sitzung hinaus serverseitig gespeichert werden.
Zu 1: Vorbetrachtungen Wie fängt man an?

Für eine einfache (halbautomatische) Erstellung von HTML-Seiten gibt es zahlreiche Möglichkeiten, die meistens ein "grafisches Zusammenklicken" nutzen. Für blinde Entwickler sind aber mauszentrierte, grafische Erstellungsverfahren ungeeignet und scheiden aus.

Die folgenden Entwicklungsprinzipien für die Umwandlung der Arbeitsansicht in ein HTML-Dokument wird anhand eines Beispieles erklärt.

Zu 2: Arbeitsansicht Beispiel zum ASCII-Autoren-Text

Wie sieht der ASCII-Text aus, der einzugeben ist? Was gibt der Autor in die Textarea ein? Hier ein (sehr einfaches) Beispiel für einen ASCII-Autoren-Text, etwa

-dia; 1. freier Autor Text
-h2; Wie erstelle ich eine Praesentation?
-p;
Zunaechst kann Text (ohne Token) frei formuliert werden.
Leerzeilen können Abschnitte trennen.
-dia; 2. Menü
-h2; Wie Übersetzen?
-p; [HTML-Erstellen] übersetzt die Arbeitsansicht in eine HTML-Seite
-p; [Vorschau] zeigt die HTML-Seite im popup-Fenster an als Browservorschau an
-p; [HTML-validieren] schickt den HTML-Quelltext zum W3C-Validierer
-p; [Arbeistansicht] extrahiert aus dem HTML-Quelltext die Arbeitsansicht
-dia; 3. Token verwenden | Wie geht das mit den Token?
-pre;
Ein "Dia" beginnt mit 
dem "-dia;"-Token, 
das am Zeilenanfang steht.

Ein "h2-"-Überschrift beginnt mit 
dem "-h2;"-Token, 
das am Zeilenanfang steht.

Ein "Textabschnitt" beginnt mit 
dem "-p;"-Token, 
das am Zeilenanfang steht.
-dia; 4. Übersetzen und Vorschau | Wie geht das?

-h3; [HTML-Erstellen] 
-p.r1; übersetzt die Arbeitsansicht in eine HTML-Seite.

-h3; [Vorschau] 
-p.r1; zeigt die HTML-Seite im popup-Fenster als Browservorschau an.

-h3;[HTML-validieren] 
-p.r1; schickt den HTML-Quelltext zum W3C-Validierer.

-h3; [Arbeistansicht] 
-p.r1; extrahiert aus dem HTML-Quelltext die Arbeitsansicht.
Zu 3: Von Arbeitsansicht nach HTML Wie erfolgt die Umwandlung?

Wie kann mit [HTML-Erstellen] aus der ASCII-Arbeitsansicht eine HTML-Seite werden? Wie erfolgt die Umwandlung der Arbeitsansicht in ein HTML-Dokument?

Das Prinzip für die Umwandlung wird anhand des obigen Beispiel's (obige Arbeitsansicht) erklärt.

  1. Jeder Dia-Bereich dia1, dia2, dia3 usw. wird zu einem HTML-Formular form[1], form[2], form[3], usw., etwa
    <div id="content">
      <form action="#" name="dia1" style="display:none;">
        Content für das Dia 1
      </form>
    
      <form action="#" name="dia2" style="display:none;">
        Content für das Dia 2
      </form>
      usw.
    </div>
    
  2. form[0] wird zur Menü-Auswahl für dia1, dia2, dia3 usw. Die Menu-Auswahl erfolgt mit der Funktion show_form(formname). form[0] wird etwa wie folgt aufgebaut
    <div id="menu">
      <form action="#" class="menu">
        <label for="dia1" class="radiolabel">Menu Ttel dia1</label>
        <input id="dia1" type="radio" name="1" class="radio"
               checked="checked" onclick="show_form('dia1');" />
    
        <label for="dia2" class="radiolabel">Titel Dia 2</label>
        <input id="dia2" type="radio" name="2" class="radio" 
               onclick="show_form('dia2');" />
      </form>
    ...
    </div>
    

Weshalb wird dies so gemacht? Weshalb mit Formularen?

Will z.B. ein blinder Programmierer einen Quelltext in die HTML-Seite bringen, so müssen (< > &) umgewandelt werden in (&lt; &gt; &amp;). Dies kann recht mühsam, fehlerhaft und unübersichtlich sein. Einfacher ist es, in der Arbeitsansicht nach dem -ta;- Token den Orginal-Quelltext mit den Zeichen (< > &) zu verwenden. Aus -ta; wird eine HTML-Textarea, die den Orginal-Quelltext enthält.

Zu 3: Transformationsvorgang je Dia Wie wird übersetzt?

Aus dem Arbeitsansicht soll mit [HTML-Erstellen] der HTML-Quelltext werden. Der Transformationsvorgang soll aus den Token's der Arbeitsansicht den HTML-Quelltext machen. Aus -dia; wird form, d.h. ein Formular mit name="dia#". Die Formulare sind zunächst nicht sichtbar (style="display:none;"). Beispiele:

Arbeitsansicht übersetze nach HTML-Fragment
-dia; 1. freier Autor Text
-h2; Wie erstelle ich eine Praesentation?
-p;
Zunaechst kann Text (ohne Token) frei formuliert werden.
Leerzeilen können Abschnitte trennen.
<form action="#" class="none" name="dia1" style="display:block;">

<h2>Wie erstelle ich eine Praesentation? </h2>
<p>Zunaechst kann Text (ohne Token) frei formuliert werden.
  Leerzeilen k  &ouml;nnen Abschnitte trennen.
</p>
</form>
Arbeitsansicht übersetze nach HTML-Fragment
-dia; 4. Übersetzen und Vorschau | Wie geht das? 

-h3; [HTML-Erstellen] 
-p.r1; übersetzt die Arbeitsansicht in eine HTML-Seite.

-h3; [Vorschau] 
-p.r1; zeigt die HTML-Seite im popup-Fenster als Browservorschau an.

-h3;[HTML-validieren] 
-p.r1; schickt den HTML-Quelltext zum W3C-Validierer.

-h3; [Arbeistansicht] 
-p.r1; extrahiert aus dem HTML-Quelltext die Arbeitsansicht.

<form action="#" class="none" name="dia4" style="display:none;">
<h3 class="right">Wie geht das?</h3> 

<h3>[HTML-Erstellen] </h3>
<p class="r1">&uuml;bersetzt die Arbeitsansicht in eine HTML-Seite.</p>

<h3>[Vorschau]</h3>
<p class="r1">zeigt die HTML-Seite im popup-Fenster als Browservorschau an.</p>

<h3>[HTML-validieren]</h3>
<p class="r1">schickt den HTML-Quelltext zum W3C-Validierer.</p>

<h3>[Arbeistansicht]</h3>
<p class="r1">extrahiert aus dem HTML-Quelltext die Arbeitsansicht.</p>
</form>

Zu 3: Gesammter Übersetzungsvorgang Was baucht die Seite noch

Die Umwandlung [HTML-Erstellen] der Arbeitsansicht in den HTML-Quelltext (incl. Layout, Stilvorlagen ) erfolgt schrittweise von dem Text der Arbeitsansicht in den Quelltext der HTML-Seite. Hierzu dient die Funktion set_praesentation_aus_arbeitsansicht(), etwa

  1. Standardisiere mit Hilfe von regulären Ausdrücken die Token der Arbeitsansicht (white-Char löschen).
  2. Wandle die neue Arbeitsansicht s in einen Array split = s.split('...'). Dieser Array besteht aus Paaren von token_bereich_von_i, content_von_i
  3. Der token_bereich_von_i ( wie z.B. "-p.r1;" ) kann aufgespalten werden in
    token_name_von_i (wie z.B. cmd[0] = "p") und
    css_klasse_von_i (wie z.B. cmd[1] = "r1"
  4. Die Token - Reihenfolge in der Arbeitsansicht entspricht der Switch - Aufruf - Reihenfolge.
    switch(cmd[0]) { 
      case 'titel': ... break;
      case 'dia': ... break;
      case 'ta': ... break;
      ...
      default:alle nicht ausprogrammierten Token break;
    }
    

    Der switch(cmd[0]){...} verwendet das jeweilige Token und macht aus dem zugehörigen Token-Content das zugehörige HTML-Fragment, das in dias=[] gepushed wird.

    Zum Pushen werden 2 Arrays verwendet: dias=[] für die HTML-Fragmente und menu=[] für die die Dia-Titel-Einträge ( später für form[0] )

  5. Nun können der HTML-Header incl. CSS-Style und das generierte Menu und alle HTML-dias-Array-Elemente zusammengefügt werden.
  6. Die escape(ursprüngliche Arbeitsansicht) wird als HTML-Kommentar angefügt.
Zu 3: Reguläre Ausdrücke Hilfen

Zu jedem regulären Ausdruck existiert ein endlicher Automat mit den Metazeichen [ ] ( ) { } | ? + - * ^ $ \ . siehe z.B. de.wikipedia Regulärer Ausdruck .

Zu diesem Tutorial hier gibt es zu Regulären Ausdrücken mit ECMAScript eine Einführung , einige Beispiele und eine Referenz

Zum Live-Experimentieren mit Regulären Ausdrücken, wie z.B.

/([\/()[\]{}|*+-.,^$?\\])/g          findet alle speziellen RegExp-Zeichen

/\n\s+/g                             findet alle white-Character am Zeilenanfang
/\u000a\s+/g
\012\s+

/onload[\s\S]+$/g                    findet onload und all Zeichen bis zum Stringende

/^([\s\S]+)onload(.+)/g              findet ab Stringanfang alle Zeichen bis einschl. onload und 
                                     die nachfolgenden Zeichen, die in der onload-Zeile sind.
                                     ([\s\S]+) und (.+) können mit $1 und $2 verwendet werden

/<(h[1-6])([^>]*)>([\s\S]*?)<\/\1>/g  findet alle h-Tags

/[\s\S]+/g                           mit repl = "pre-text$&post-text" wird vor den String pre-text
                                     und hinter den String post-text geschrieben

kann das mct-toolchen verwendet werden. Hierzu muß unter [bearbeiten] der Punkt "reguläre Ausdrücke" ausgewählt werden. Ausgehend von einer Arbeitsansicht bitte ansehen, was die folgenden RegExp finden und ersetzen:

s = s.replace(/\n\s*\-\s*(\S*?)\s*(\.)?\s*([\s\S]*?);/g,'0oOsplit$1$2$30oOsplit');
split = s.split('0oOsplit'); //alert(split);return;
Zu 4: Browser-Vorschau siehe Browser-Vorschau

Die Browser-Vorschau zeigt die erstellt HTML-Seite (wie im Browser) an. Dies wurde bereits in einer vorherigen Aufgabe behandelt. Hier sind die alten Hinweise zur Browser-Vorschau

Zu 5: W3C-Validieren Wie kann validiert werden?

Wurde aus der Arbeitsansicht mit [HTML-Erstellen] der vollständige HTML-Quelltext erstellt, so soll der HTML-Quelltext validiert werden. Wie geht das? W3C verwendet das folgende Formular und läßt die Nutzung zu. Der erstellte HTML-Quelltext soll mit [HTML-validieren] in das (unsichtbare) Formular kopiert und gesendet werden. Die Fehlermeldungen erscheinen in einem neuen Browser-Fenster.

<form style="display:none;" id='w3c_form' method="post"
 action="http://validator.w3.org/check" target = "_blank">
 <textarea cols="80" rows="5" name="fragment" id="fragment"></textarea>
</form>

Hinweis: Falls ein Browser dieses "Senden mit einem fremden Formular" als Phishing erkennt, so muß der der vollständige HTML-Quelltext per Hand in die W3C-Textarea kopiert werden.

Zu 6: Store Arbeitsansicht seitenintern Wie?

Ist die Arbeitsansicht vorhanden, so kann mit [HTML-Erstellen] wwieder der vollständige HTML-Quelltext erstellt werden. Deshalb ist es günstig, den "%Text" den win.escape(Arbeitsansicht) als Kommentar dem HTML-Quelltext anzufügen. Ist der HTML-Quelltext vorhanden, so köönnen die begrenzenden Strings '\n\n<!-- beginn arbeitsansicht' und 'ende arbeitsansicht -->\n' für die Extraktion der Arbeitsansicht verwendet werden.

r += '\n\n<!-- beginn arbeitsansicht';
r += escape(src)
r += 'ende arbeitsansicht -->\n';
set_string(id_dst, r);
Zu 7: (optional) Store Arbeitsansicht clientseitig Wie?

Cookies können sowohl vom Server als vom Client benutzt werden. Ein Cookie kann lediglich ca. 10 kB speichern. Es gibt Flash-Cookie, Supercookie, Tracking-Cookie, usw.

Mit HTML 5 wurde Web Storage (auch DOM Storage genannt, win.sessionStorage, win.localStore, usw.) eingeführt. Mit win.localStore() kann ein Browser (bei aktiviertem JavaScript) je HTML-Seite ca. 5 MB Daten speichern ( siehe z.B. w3.org/ TR/webstorage, html5/webstorage, de.wikipedia Web Storage ).

Zu 8: (optional) Store Arbeitsansicht serverseitig Wie?

Auf möglichst einfache Weise sollen mit AJAX mehrere Arbeitsansichten serverseitig gespeichert werden und wieder ladbar sein.

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Mo 12.00 Uhr