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?
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.
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.
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.
<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>
<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 (< > &). 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.
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 ö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">ü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> |
trägt als Menü-Item-Text "home" ein. Bei einem Klick auf den Menü-Punkt wird "confirm" ausgeführt. Bei OK wird der Link wirklich ausgeführt, bei Cancel wird das Dia geladen.
Existiert ein Text zwischen "-dia;" und dem nachfolgendem Token und wird dieser Text durch " | " geteilt, so wird der vordere Textstück zum Text des Menü-Punktes und der hintere Textstück zur rechtsbündigen h3-Überschrift des Dias ( optional und schreibtechnisch bequem ).
Existiert ein Text zwischen "-dia;" und dem nachfolgendem Token, so wird dieser Text zum Text des Menü-Punktes (optional und schreibtechnisch bequem).
Existiert kein Text zwischen "-dia;" und dem nachfolgendem Token, so wird als Text des Menü-Punktes die aktuelle Dia-Nummer verwendet.
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
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] )
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;
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
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.
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);
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 ).
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