Experimenteller Web-Creator Self-made-Projekt

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 .


Grundlagen zum "Experimentellen Web-Creator" Allgemeines

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.

Einfachste Entwurfsmethode ohne "steuernden Token"

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>
Pargmatische Entwurfsmethode mit "steuernden Token"

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  ~~ 

1. Beispiel

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>

2. Beispiel

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>

3. Beispiel

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>

4. Beispiel

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>

5. Beispiel

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"
/>
Hinweise zur Umsetzung mit "steuernden Token"

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 ~.

Code-Beispiel

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