ECMAScript-Praktikum 2011: Problemstellung 3 (Lehr-Tool für CSS)

Diese praktische Aufgabe zur Veranstaltung beinhaltet die Erstellung eines ECMAScript-Tool-3. Tool-3 soll sowohl für CSS-Anfänger als auch für Webdesigner gut bedienbar und gut verwendbar sein und als Teil der eigenen Homepage eingestellt werden.

Das Tool-3 soll komplexe CSS-Kombinationen simulieren können. Das Tool-3 soll mit vielschichtigen CSS-Kombinationen (siehe z.B. css-propertys). praxisnahe, komplexe Anwendungsbeispiele (als Ganzes) simulieren können. Beispiele sind: 

3-spaltiges Layout;

  IE < 9-HTML5-Äuquivalent zu den 
  header-, aside-, footer-, nav-Tags 
  (ggf. auch section-, article-, hgroup-Tags)

  mit Hilfe von 

  <div class="header" .., <div class="aside" .., 
  <div class="footer" .., <div class="nav" ..;

  box-Modell 
     mit Anordnungs-, Schachtelungs- 
     und Zentrierungsmöglichkeiten;

  border
     mit -top, -right, -bottom, -left;

  3-D-Schrift
    Farb-Abstands-Parameter für 3-D-Schrift;

  table-layout
    usw.

Der gewählte Anwendungsfall soll zahlreiche Parameter variieren können. Als vorgefertigte Auswahl sind (möglichst alle wesentliche) genormten CSS-Attribute anzubieten. Bei jeder CSS-Attribut-Eingabe oder Werte-Eingabe soll (ohne zusätzliche Klicks) sofort das zugehörende Aussehen angezeigt werden. Hier ist ein Anfang, der bedingt fehlerhaft, verbesserbar, erweiterbar ist.

Viel Freude bei der Ausarbeitung!

Hinweis 1: Tool-3-Aufbau Wie wird die Simulation strukturiert?

Tool-3 baut auf vorherigen Übungen auf. Z.B. können die folgenden Funktionen verwendet werden: get_node(), get_string(), set_string(), show(), is_visible(), toggle().

Die nachfolgenden Punkte beschreiben neu hinzu kommende Funktionen, Komponenten, Ideen.

Hinweis 2: Farbauswahl Wie können Farben ausgewählt werden?

Bei 3 Byte je Farbpixel ergeben sich 224 unterschiedliche Farben.

Wie soll eine geeignet Farbe visuell ausgewählt werden? Die Funktion insert_color_options() verwendet Farbnamen und ist auch für Sehbehinderte geeignet, die in dem Array color_arr sind. Mit Hilfe von color_arr[] erstellt die Funktion insert_color_options() ein Select-Tag für die Farbauswahl. Solche Select-Tags für Farben können z.B. für die Auswahl der Hintergund- und/oder Vordergrund-Farbe verwendet werden.

Hinweis 3: Select-Input-Folge kommt oft vor ....

Kommt die Folge von select-Tag und input-Tag (type=text) häufig vor, so können diese "zusammengehörigen" Tags näher betrachtet werden. Das select-Tag erlaubt die Auswahl (festgelegte Attribute und Werte), die dann in das folgende input-Tag geschrieben werden. Das input-Tag erlaubt Modifikationen des ausgewählten Textes.

Eine select-Auswahl ruft onchange="css.on_select_change(this,false,'FORM_TEXT_STYLES','EDITOR2','DIV_TEXT_STYLES')" auf, d.h. im wesentlichen die Funktion css.set_select_item_to_next_input(that, bgcol), die den ausgewählten option-value-Text in das nachfolgende input-Tag schreibt. Darüber hinaus behandelt css.on_select_change() auch das Weitergeben des aktuellen "Gesamt-Textfluß-Übertragung" hin zur letzten Anzeige.

Hinweis 4: "Feinschliff" mit Tastatureingaben optimierende Handsimulationen ...

Wie funktioniert die "Gesamt-Textfluß-Übertragung" hin zur letzten Anzeige beim Eintippten von Modifikationen von Hand?

Jedes input-Tag bzw. textarea-Tag könnte bei einem onkeyup-Ereignis eine Funktion css.on_input_keyup() bzw. css.on_textarea_keyup() aufnehmen. Diese Funktionen übernehmen die "Textfluß-Übertragung" hin zur letzten Anzeige. Anstelle der vielen "onkeyup'" in den zahlreichen Tags ist es günstiger, das "Hinterlegen der onkeyup-Funktionen in den Tags" durch css.init() unter window.onload = function () {...} zu machen.