Aufgabe 2 ( App für Stringmanipulationen )

  Kooperativ-Konstruktiv-Integrativ
'Hingugger' als symbolische Menschengruppe
Bei der Webprogrammierung sind String-Manipulationen allgegenwärtig ( Formulare, internationale Schriftzeichen, Codierungen, Stringmanipulationen und Content-Transformationen mit regulären Ausdrücken, usw. ). Weltweit sind Zeichen und deren Codierungen, Zeichen-Ketten und Zeichen-Darstellungen von grundlegender Bedeutung. Webseiten bestehen wesentlich aus Zeichen. Sinn ( Pragmatik ) entsteht im Interpretieren. Informatik ist die Wissenschaft von der systematischen Verarbeitung von codierten Informationen, siehe z.B. de.wikipedia: Informatik .
Es ist ein Toolchen für "String-Manipulationen" zu erstellen, das möglichst praxisnah der vielfältigen Nutzung von Zeichen und Strings dient ( Unicode, UTF-8, ECMAScript-Stringfunktionen ).

Entwicklung eines Toolchen für "String-Manipulationen" einfach, robust, praxisnahe

Das zu erstellende Toolchen soll "String-Manipulationen" genannt werden und möglichst praxisnah der vielfältigen Nutzung von Zeichen und Strings ( Unicode, UTF-8, ECMAScript-Stringfunktionen ) dienen. Bei der Webprogrammierung sind String-Manipulationen allgegenwärtig ( Formulare, internationale Schriftzeichen, Codierungen, Stringmanipulationen und Content-Transformationen mit regulären Ausdrücken, usw. ).

Johann Wolfgang von Goethe:
"Es ist nicht genug zu wissen - man muss auch anwenden.
Es ist nicht genug zu wollen - man muss auch tun."

Zunächst einige Vereinbarungen zur Entwicklung, die der einfachen einfachen Bedienbarkeit und übersichlichen Entwicklung dienen.

Allgemeine Motivation und Hinweise: Es sind Bedienelemente ( Auswahlboxen ) zu verwenden, die aufklppbar sind. Es sind Funktionen zu schreiben und zu testen, die Zeichenketten umwandeln, wie z.B. String in Zahlen und Entities und umgekehrt, wie Text-Zeilen (numerisch und alphanumerisch) sortieren, wie Unicode-Böcken generieren, usw.

Was wird zuerst gemacht? Wie gehen wir vor?

Ausgangspunkt ist das unfertige Grundtoolchen , die systematisch erweitert und getestet werden soll.

Beim Entwickeln von HTML der selbst geschrieben Code stets verbessert werden mit Hilfe von http://validator.w3.org/check

Beim Entwickeln mit ECMAScript muß der selbst geschrieben Code stets verbessert werden mit Hilfe von http://www.jslint.com/

Content-Übertragung zwischen Textareas Texte austauschen

Zwischen die textarea's "TA0" und "TA1" wird eine horizontale Zeile mit drei a-Tags eingefügt werden.
a) [ ↓ ] soll den "TA1"-Content mit dem "TA0"-Content überschreiben.
b) [ ↑↓ ] soll den "TA0"-Content mit dem "TA1"-Content vertauschen.
c) [ ↑ ] soll den "TA0"-Content mit dem "TA1"-Content überschreiben. Als innerHTML der a-Tags werden die folgenden Unicode-Zeichen ( ↓   ↑↓   ↑ )verwendet, etwa:

Was muß dann bei ??? eingesetzt werden?

<a href="javascript:void(0);" onclick="set_string('TA1',get_string('TA0'));"> ↓ </a>&nbsp;
<a href="javascript:void(0);" onclick="???"> ↑↓ </a>&nbsp;
<a href="javascript:void(0);" onclick="???"> ↑ </a>&nbsp;
localStorage Wie?

Das HTML5 - localStorage-Interface wird heute (2013) bei den "gängigen" Browsern unterstützt. Siehe z.B. save "permanent" . Erklärungen in der Veranstaltung.

Mit einer eigenen Bibliothek soll die Nutzung des HTML5 - localStorage-Interface erweitert werden. Die Bibliothek wird in lokal.js gespeichert. Es ist eine Bibliothek lokal.js zu schreiben und zu testen. Die Bibliothek soll die folgenden Funktonen enthalten:

del_all();                  // loescht gesamten localStorage

      set_item (key, val);  // speichert value unter key
val = get_item (key);       // holt Wert von key-Element
      del_item(key);        // loescht key-Element

      set_array(arr_name, arr);// speichert zu arr_name den arr von strings
arr = get_array(arr_name);     // holt zu arr_name den arr von strings
      del_array(arr_name);     // loescht zu arr_name den arr 

	  push_item(arr_name,str); // speichert str als top-string von arr_name
str =  pop_item(arr_name);     // holt den top-string von arr_name

save_form_items();      // speichert alle Formularwerte in localStorage
load_form_items();      // laed alle Formularwerte aus localStorage
Erstellung einer Browser-Vorschau Wie wird popup() entwickelt?

Der Multiline-Text von "TA0" soll mit popup(get_string('TA0')) als Browser-Vorschau in einem popup-Fenster erscheinen. Ein script-Tag wird ausgeführt. Styles werden interprtiert. Ein HTML-Seiten-Quelltext erscheint als Browseransicht. Die Funktion popup() ist zu schreiben und kann dann etwa so aufgerufen werden:

<a href="javascript:void(0)" onclick="popup(get_string('TA0'));"> Vorschau </a>

Die Funktionen toggle() und popup() gehören in die visu-Bibliothek.

Die Funktion popup() kann in 2 Arten aufgerufen werden. a) wenn der str-Quelltext mit popup(str) als Browser-Vorschau angezeigt werden soll, oder b) wenn eine url-Seite im popup-Fenster popup(null,url) angezeigt werden soll.

Die globale Variable var hwin; ist außerhalb der popup-Funktion, damit bei einem öffnenden popup-Fenster das vorherige popup-Fenster geschlossen wird. Es gibt somit stets höchstens ein Popup-Fenster.

Code Snippet: Browservorschau
  1. var hwin = null;
  2.  
  3. function popup (str, url, o) { //aufruf: .popup(str) oder .popup(null,url)
  4.   url = url || null; o = o || { top: 0, left: 150, width: 800, height: 600 };
  5.   flags=["toolbar=no,dependent=yes,location=no,directories=no,",
  6.          "status=no,menubar=no,scrollbars=yes,resizable=yes,top=",
  7.           o.top, ",left=", o.left, ",width=", o.width, ",height=", o.height].join('');
  8.   if (hwin && !hwin.closed) { hwin.close(); }
  9.   hwin = null;
  10.   if (url) { hwin = win.open(url, "popup", flags);
  11.   } else if (!str) { return;
  12.   } else { hwin = win.open("", "popup", flags); hwin.document.write(str);
  13.   }
  14.   if (hwin) {
  15.     if (hwin.opener)   { hwin.opener = win.self; }
  16.     if (hwin.focus)    { hwin.focus(); }
  17.     if (hwin.document) { hwin.document.close(); }
  18.   }
  19. }
Eingebaute Funktionen, Gestaltung Select-Box und a-Tag

HTML5-Muster, Policy-Muster, CSS-Muster mit Hilfe von set_string('TA0',unescape(get_data('myMusterName')))

Die Transformationsfunktionen
ta1=escape(ta0),             ta1=unescape(ta0),
ta1=encodeURI(ta0),          ta1=unencodeURI(ta0),
ta1=encodeURIComponent(ta0), ta1=unencodeURIComponent(ta0)

Transformationsfunktionen für jedes Zeichen

zeichenweise ta1 := 'dez: &#' + s0.charCodeAt(i).toString(10); 
zeichenweise ta1 := 'hex: &#x' + s0.charCodeAt(i).toString(16);
zeichenweise ta1 := 'unicode: \uxxxx der s0-Zeichen
zeichenweise ta1 := 'oktal: '|ooo'  der s0-Zeichen
zeichenweise ta1 := 'base 32: 1..255 ergibt |1|2| ... |7v|  der s0-Zeichen
zeichenweise  ta1 := hexhex-Folge der s0-Zeichen 
ta1(...char...) := s0 (...base32...)
ta1(...hex...) := ta0 (...dez...) 
ta1(...bin...) := ta0 (...dez...)
ta1(...dez...) := ta0 (...hex...)
ta1(...dez...) := at0 (...bin...) 
Generiere Zeichen für Unicode-Blöcke Wie geht das?

Hier ist eine Liste der Unicodeblöcke . Die Funktion build_unicode_html([i1,i2, i1,i2, ...]) und einige popup(build_unicode_html([i1,i2]))- Aufrufe für Unicodeblöcke befinden sich hier .

Farbwähler für websichere HTML-Farben 4096 Farben

HTML5 sieht einen Farbwähler, wie z.B. <input type="color" id="color" value="" /> vor, der 2013 von wenigen Browsern unterstützt wird. Teste:

Es ist selbst ein Farbwähler für websichere Farben zu programmieren, der einen HTML-Quelltext erstellt, der als Vorschau präsentiert wird. Bei Mouse-over soll der Farbwert im Tip-Fensterchen als Hex-Zahl und als rgb( ) erscheinen. dif=1 erzeugt 4096 HTML-Farben. dif=3 erzeugt 216 websichere Farben.

// dif = 3 websichere farben
function farbwaehler(dif) { dif = dif|| 1; 
var r, g, b, i, col, s = "", nl = "<br style='clear:all;' />",
txt = "<span style='cursor:pointer;font-family:monospace;" + 
      "float:left;width:16px;color:#fff;background:",
ntxt = txt + "#666'>BGCOL</span>",
temp = txt + "#BGCOL' title='TITLE'>&nbsp;</span>";
for (r = 0; r < 16; r += dif) { s += nl + " use mouse-over ...";
for (i = 0; i < 256; i += dif) { b = i % (dif*16); g = (i - b) / 16;
if (b === 0) { s += nl +
   ntxt.replace("BGCOL", "#") +
   ntxt.replace("BGCOL", r.toString(16)) +
   ntxt.replace("BGCOL", g.toString(16)) +
   ntxt.replace("BGCOL", b.toString(16));
}
col = r.toString(16) + g.toString(16) + b.toString(16);
s += temp.replace("BGCOL", col).replace("TITLE", '#' + col);
}
} return s;
}
Funktionen fuer Template-Strings Bibliothek Wie?

Erklärungen in der Veranstaltung.

Enwicklung von "Aufklapp-Menu's" Wie geht das?

Es soll das Select-Tag verwendet werden. Siehe auch Navigation-Strukturen .

Farbwaehler Wie geht das?

Funktion Farbwaehler(dif) für websichere Farben.

Quelltext in Bibliotheken wandeln Wie geht das?

Die Funktionen get_string() und set_string() sollen die Grundlage einer selbst geschriebenen dom-Bibliothek bilden, d.h. anstelle der globalen Aufrufe get_string() und set_string() wird dann dom.get_string() und dom.set_string() verwendet.

Was ist zu machen? Näheres in der Veranstaltung ...

Optional: CSS und ARIA Blinde 'generieren' Farben, Abstände, CSS

Wie können Blinde für Sehende Styles erstellen und CSS nutzen, obwohl diese weder Farben noch geometrische Kontue-Abstände sehen? Wie kann das Toolchen verbessert und ergänzt werden, damit blinde und sehende Designer einen Mehrwert aus diesem Toolchen ziehen können?

Wir sind kooperativ-konstruktiv-integrativ

'Hingugger' als symbolische Menschengruppe



Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr