Web-Präsenz-Toolchen erstellen Toolchen für HTML-Seiten

Das ( self-made ) Toolchen soll als Präsentationsprogramm und Smartphon-Webseiten-Erstellung geeignet sein.

Aufgabe ( Kurzform ): Es soll ein ( self-made ) Toolchen erstellt und getestet werden, das aus einfachem ASCII-Text eine HTML-Seite erstellt. Das Erstellungstool braucht keinen Server und verwendet lediglich ECMAScript. Das Toolchen soll auf einfachste Weise die erstellten Seite beim W3C-Validierer➹ validieren können. Das ( self-made ) Toolchen soll geeignet sein als ein "Programm" zur Erstellung einer Präsentation und/oder zur Erstellung von Smartphon -Seiten und/oder zur einfachen Webseitenerstellung als Teil einer Web-Präsenz.

Hans Krailsheimer (1888-1958): "Talente finden Lösungen, Genies entdecken Probleme."

Grobe Beschreibung des Projektes Wie soll Was gemacht werden?

Was sind die Leitpunkte für die Erstellung des ( self-made ) Toolchen?

• Das Toolchen bekommt den h1-Titel: "Web-Präsenz erstellen ( auch für Blinde )".
• Für die Umwandlung der ASCII-Arbeitsansicht in den HTML-Quelltext verwendet das Toolchen Reguläre Ausdrücke. 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 z.B. am Zeilenanfang sogenannte Token (wie z.B. -dia; -p; -ta;) eingesetzt werden. Die Umwandlung [von ASCII nach HTML] übersetzt mit Hilfe der Token die Arbeitsansicht in den Quelltext.
• Die HTML-Tags bekommen ein CSS-Layout ( Stilvorlagen mit Klassen ).
• Das Toolchen soll selbstgeschriebenen Bibliotheken verwendet, möglichst einfach und barrierearm bedienbar sein und hohe Robustheit haben.
• Die Browser-Vorschau [Vorschau] zeigt die erstellt HTML-Seite ( wie im Browser ) an.
• Die erstellte Seite soll validiert werden können, indem mit [HTML-validieren] der HTML-Quelltext zum W3C-Validierer geschickt wird.

Struktur der Zielseite Aufbau mit dl-, dt-, dd-Tags

Wie soll die erstellt HTML-Seite aufgebaut sein?

Die Wahl einer klaren, effektiven Dokumenten-Struktur kann die Entwicklung des Erstellungstoolchen vereinfachen. Eine dl-List ( description list ) hat 0 oder mehr dt-Tags und/oder 0 oder mehr dd-Tags. Oft enspricht dt einer "Art Überschrift" und dd einem "Content-Behälter". Ein dl-Liste ( description list ) kann mehrfach ( "in die Tiefe" ) geschachtelt werden.

Hier ein Beispiel zu dt-Registerkarten

Struktur der "ASCII"-Arbeitsansicht intuitive Token?

Wandle Arbeitsansicht in HTML mit ( self made ) Toolchen

Aus dem Arbeitsansicht in TA0 soll mit dem a-Tag-Button, der [HTML-Erstellen] genannt wird, der HTML-Quelltext erzeugt und in TA1 geschrieben werden. Der Transformationsvorgang soll aus den Token's der Arbeitsansicht den HTML-Quelltext machen. Aus -dia; wird das dt-Menu-Tag und das dd-Content-Tag.

Das Ergebnis der Umwandlung ist eine HTML-Seite, die etwa wie diese dt-Registerkarten aussehen sollen.

Wie wird kann zügig die Lösung gestarte und entwickelt werden? Die Entwicklung der Umwandlung der ASCII-Arbeitsansicht in HTML-Quelltext. kann mit dieser Experimentier-Seite gestartet werden. Der Funktion wandle_text_nach_html(src) wird die ASCII-Arbeitsansicht src übergeben. Der Rückgabewert der Funktion wandle_text_nach_html(src) sei der HTML-Quelltext.

CSS-Design der HTML-Seite ( self made )

Es ist ein ästetisches, ansprechendes Design zu machen. Siehe den Quelltext der HTML-Seite dt-Registerkarten , der als Demo-Beispiel einige CSS-Klassen enthält. Es sollen weitere CSS-Klassen hinzugefügt werden. Das escape()-te CSS-Design soll im Toolchen in den Header-Teil der erzeugten HTML-Seite "eingemischt" werden.

ECMAScript-Code für die HTML-Seite ( self made )

Das Ergebnis der Umwandlung ist eine HTML-Seite. Die Sichtbarkeiten sollen mit ECMAScript-Code ( el.style.display="none"; bzw. el.style.display="block"; ) unsichtbar bzw. sichtbar geschalten werden.

Beim Laden der Seite sind zunächst alle dd-Contents sichtbar. Nach dem Rendern der Seite, d.h. beim Ereignis window.onload=function(){...}; werden alle dd-Contents unsichtbar geschalten.

Der User wählt durch Klick auf ein dt-Tag den sichtbar-werdenden dd-Kontext aus. Siehe Quelltext von dt-Registerkarten .

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 infolge [HTML-validieren]-Klick in das (unsichtbare) Formular kopiert und an action="http://validator.w3.org/check" 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.

Dynamisch onresize-Ereignis TA0- und TA1-Höhen anpassen

Um die Textarea-Höhen an eine neue Fenstergröße ( Browser-resize ) anzupassen, kann das dynamische onresize-Ereignis genutzt werden. Siehe z.B. Quelltext vom String Manipulationen - Toolchen.

Das propritäte resize-Textarea-Attribut erlaubt das "Aufziehen" einer Textarea. Dies soll ausgeschalten werden, etwa mit ta0.style.resize='none'; ta1.style.resize='none';

Webverweise Einige ungeordnete Web-Links

Die hier aufgeführten ungeordneten Weblinks verlassen teilweise diese Domain. Für externe Inhalte wird keine Haftung übernommen. Die Weblinks sind entsprechend gekennzeichnet.

de.wikipedia Regulärer Ausdruck , Screenreader , Blindenschrift , Punktschriftmaschine , Präsentationprogramm , Smartphon-Seiten , fakoo.de: braille , W3C W3C-Validierer

cilie.org: regexpr-Einführung , regexpr-Beispiele , regexpr-Referenz , mct-toolchen , veraltete Demo , dt-Registerkarten (ECMAScript + dl + dt-float + dd-Blöcke ), String Manipulationen ( resize TA0, TA1 )

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr