Das Strukturieren von Informationen entspricht einem systematischen Aufbau von Informationen ( Syntax, Semantik, Pragmatik ). Webseiten bestehen wesentlich aus Zeichen, semantisch-pragmatischen ( W3C- )Vereinbarungen für Text, Strukturen und Metainfos. Im Rendern entstaht die Darstellung. Sinn ( Pragmatik ) entsteht im Interpretieren. Es gibt zahlreiche Arten der vereinfachten Erstellung von HTML5-Seiten ( Quellcode, Generierung aus Template-Mustern ) Es gibt z.B. komplexe Projekt- und Programmierumgebungen und Quelltext-Editoren mit Syntaxhervorhebung ( Syntax-Highlighting ), es gibt z.B. Textformatierer mit "Wildwuchstentenzen" mit/ohne Vorschau, es gibt z.B. "Visual Editors" WYSIWYG ( Grundgedanke: "What You See Is What You Get" ), "web creator", und mehr.
Wie kann die Gesamtkomplexität der Dokumenterstellung für Autoren vereinfacht werden? Wie können Blinde an diesem Prozeß teilhaben ( ARIA )? Wie können z.B. möglichst einfach erstellt werden: mathematische/physikalische(chemische Formeln, ästetische-angepaßte Formatierungen, Web-Formulare zur sozialen Kommunikation, Menüs zur inhaltlichen Strukturierung, hidden/visible Content, dynamische Tabellen, Comics Creater, ARIA, usa.?
Es soll ein Self-made-Toolchen ( "Experimentelle Web-Creator" ) entwickelt und getestet werden, das etwa wie folgt gegründet ist:
Einige Hinweise und Anregungen .
Moderne Gesellschaften nutzen Information und Kommunikation in vielfältiger Weise ( allgemeines hierzu siehe Teil 1 , Teil 2 , Teil 3 , Teil 4 , Teil 5 ). Informatik ist die Wissenschaft von der systematischen Verarbeitung von codierten Informationen ( siehe z.B. de.wikipedia: Informatik ).
Weltweit sind Zeichen-Codierungen, Zeichen-Ketten und Zeichen-Darstellungen von grundlegender Bedeutung. Siehe z.B. Zeichen , de.wikipedia: Zeichen , Deutschen Nationalbibliothek Buch- und Schriftmuseum , Zeitstrahl zur Mediengeschichte .
Das Strukturieren von Informationen entspricht einem systematischen Aufbau von Informationen ( Syntax, Semantik, Pragmatik ). Webseiten bestehen wesentlich aus Zeichen, semantisch-pragmatischen ( W3C- )Vereinbarungen für Text, Strukturen und Metainfos. Im Rendern entsteht die Darstellung. Sinn ( Pragmatik ) entsteht im Interpretieren.
Das "~" - Zeichen wird selten verwendet und kann daher als "Pseudo-Meta-Zeichen" für eine "Kurzsprache" dienen ( siehe Crockfort The Tilton Macro Processor ).
Der Ersteller schreibe in eine Textarea TA0 ( ohne ein Tag ) seinen reinen UTF-8-Text.
Der Web-Creator umschließt diesen Text mit einem pre-Tag, das dann den body-Bereich der HTML5-Seite bildet.
wird zu
<pre> Der Web-Creator umschließt diesen Text mit einem pre-Tag, das dann den body-Bereich der HTML5-Seite bildet. </pre>
Die meisten Tags werden als block-Tags auf der gleichen hirachischen Quelltexteben verwendet, wie z.B. h1-Tags, p-Tags, pre-Tags. Eine einfache Schnell-Nutzung ( vor der Übersetzung ) ergibt sich, wenn das ~ - Zeichen, das ansonsten selten verwendet wird, als Token-Trennzeichen verwendet wird. Wir unterscheiden solche Block-Tags und inline-Tags. Falls gewünscht, können inline-Tags / wie z.B. <em> ... </em> direkt als Eingabe mitverwendet werden.
Bei komplexeren Konstruktionen, wie z.B.a-Tags und img-Tags und dem textarea-Tags ist eine Kurzschreibweise mit Zeilenanfang ~~token und dem Ende ~~ angebracht, etwa
~~img ~http://für_src ~ Text für alt ~~
Am Zeilenanfang können ~Tokens~ verwendet werden. Der Ersteller schreibe in TA0 z.B.
~h1~ Mein Seiten-Titel ~p~ Mein 1. Paragraph ~p~ Mein 2. Paragraph
wird zu
<h1> Mein Seiten-Titel </h1> <p> Mein 1. Paragraph </p> <p> Mein 2. Paragraph </p>
Der Ersteller schreibe in TA0 z.B.
~h1~ Mein Seiten-Titel ~p~fett border border~ Mein 1. Paragraph ~p~dir~ Mein 2. Paragraph
wird zu
<h1 class="rot"> Mein Seiten-Titel </h1> <p class="fett border"> Mein 1. Paragraph </p> <p class="dir"> Mein 2. Paragraph </p>
Zum Einfügen von Quelltext in die Seite werden textarea-Tags gebraucht.
~ta ~ var i = 5; if ( i < 10 ) { alert("<textarea> braucht keine Meta-Entities"); }
werden white-Character am Anfang und Ende gelöscht und es entstehe
<textarea cols="90" rows="5">var i = 5; if ( i < 10 ) { alert("<textarea> braucht keine Meta-Entities"); }</textarea>
Gebraucht werden inline-Tags, wie z.B. a-Tags. Aus
Default-Kurzform:
~~a ~ http://www.cilie.org/esa/einleitung/read-first.htm ~ read-first ~~
Langform:
~~a ~ extern ~ _blank ~ http://www.cilie.org/esa/einleitung/read-first.htm ~ read-first ~~
werde z.B.
<a class="extern" target="_blank" href="http://www.cilie.org/esa/einleitung/read-first.htm"> read-first </p>
Gebraucht werden inline-Tags, wie z.B. img-Tags.
~~img ~ border ~ http://de.wikimedia.org/.... ~ Deutsche Flagge ~~
was dann ( default ) wird zu
<img class="border" src="http://de.wikimedia.org/...." alt="Deutsche Flagge" />
Soll bei der Umwandlung nach HTML5 ein ~ am Zeilenanfang nicht als Token, sondern als einzelnes ~ - Zeichen gewertet werden, so muß am Zeilenanfang ein
anstelle eines ~ ein \~ am Zeilenanfang stehen
Ebenso soll ein ~ in einem a-Tag als \~ ausmaskiert werden, denn manche URL's enthalten ein ~.
function token2html(ta_str) { var std_tag = '\n<TAG_NAM> TAG_TEXT\n<\/TAG_NAM>', std_tag_class = '\n<TAG_NAM class="TAG_CLASS"> TAG_TEXT\n<\/TAG_NAM>', ta_tag = '\n<textarea cols="90" rows="5">\nTA_TEXT\n<\/textarea>\n', a_tag = ' <a class="extern" target="_blank"\n href="A_URL"> A_TEXT <\/a> ', img_tag = ' <img class="img" src="IMG_SRC" alt="IMG_ALT" /> ', arr, aa, len, i, r = [], s2, s1, src = "\n" + ta_str + "\n~"; // save maskierte tilden: src = src.replace(/\\~/g, '0Oo_mask_tilde').replace(/\r/g, '').replace(/\n\s*~/g, '\n~'); // zuerst nur für \n~~inline~ ... ~~ src = src.replace(/\n~~\s*(\S*?)([\s\S]*?)(?:~~)/g, '$1oO0SPLIT$2oO0SPLIT'); arr = src.split('oO0SPLIT'); for (i = 0; i < arr.length; i += 1) { aa = arr[i].split(/\s*~\s*/); switch (aa[0]) { case "a": r.push(a_tag.replace('A_URL', aa[1]).replace('A_TEXT', aa[2])); break; case "img": r.push(img_tag.replace('IMG_SRC', aa[1]).replace('IMG_ALT', aa[2])); break; default: r.push(arr[i]); break; } } s2 = r.join(''); // nun für \n~token~... s1 = s2.replace(/\n~\s*(\S*?)([\s\S]*?)(?:\n~)/g, '$1oO0SPLIT$2oO0SPLIT'); s1 = s1.replace(/~\s*$/, 'oO0SPLIT'); arr = s1.split('oO0SPLIT'); r = []; for (i = 0; i < arr.length; i += 1) { aa = arr[i].split(/\s*~\s*/); switch (aa[0]) { case "ta": aa[0] = "textarea"; aa[1] = aa[1].trim();r.push(ta_tag.replace('TA_TEXT', aa[1])); break; default: switch (aa.length) { case 2: r.push(std_tag.replace(/TAG_NAM/g, aa[0]).replace('TAG_TEXT', aa[1])); break; case 3: r.push(std_tag_class.replace(/TAG_NAM/g, aa[0]).replace('TAG_CLASS', aa[1]).replace('TAG_TEXT', aa[2])); break; default: r.push(arr[i]); break; } break; } } s1 = r.join('').replace(/0Oo_mask_tilde/g,'~'); return s1; }
Rückgabe der Funktion token2html(ta_str) ist etwa:
<h1> Mein Seiten-Titel </h1> <p class="fett border"> Mein 1. Paragraph </p> <textarea cols="90" rows="5"> var i = 5; if ( i < 10 ) { alert("<textarea> braucht keine Meta-Entities"); } </textarea> <p class="border"> Text vor a <a class="extern" target="_blank" href="http://www.cilie.org/esa/einleitung/read-first.htm"> read-first </a> Text nach a und vor img <img class="img" src="http://de.wikimedia.org/...." alt="wiki-Bild " /> Text nach img </p>
wenn in Textarea-etwa ta_str ist:
~h1~ Mein Seiten-Titel ~p~fett border~ Mein 1. Paragraph ~ta~ var i = 5; if ( i < 10 ) { alert("<textarea> braucht keine Meta-Entities"); } ~p~border~ Text vor a ~~a~ http://www.cilie.org/esa/einleitung/read-first.htm ~ read-first ~~ Text nach a und vor img ~~img~ http://de.wikimedia.org/.... ~ wiki-Bild ~~ Text nach img
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr