Corporate Re-Dedsign CSS-Templates mit RegExp

Zu einem Webauftritt gehören u.a. Usability und Accassibility sowie das Design und ein ästetisches Leitbild ( Corporate Design ). Usability betrifft die benutzerfreundliche Interaktionen zwischen Computern und User. Website-Usability meint den Eignungsgrad des Webauftritttes für die Zielgruppe ( einfach, effektiv, effizient, robust ). Neben den fachlichen Informationen ist natürlich auch die Gestaltung der Inhalte und das ästetische Empfinden wesentlich. Visuelle Ästetik gehört zu dem Mensch-Computer-Wechselwirkungen, gefühlt ausgedrückt: "Was schön ist ist gut" ( What is beautiful is usable ). Nach Noam Tractinsky bilden sich beim Betrachten ästhetische Urteile ( sehr ) schnell und scheinen dabei relativ stabil zu sein. In gewisser Weise entspricht die Attraktivität einer Website dem "joy of use".

Vielfach ist das Corporate Design an Kundenwünsche anzupassen ( Re-Design ). Hier geht es um die Erstellung eines Build-Toolchen für ein "Corporate Re-Dedsign". Es gilt das ( Re- ) Design "als Ganzes" schnell ändert und begutachtet zu können, bevor es eingesetzt wird.


Corporate Design Ästetisches Leitbild

Zu einem Webauftritt gehört ein Design ( de.wikipedia ). Es gibt zahlreiche Design-Disziplinen, wie z.B. Buch-Design, Application Design, Architekturdesign, Automobildesign, Transportation Design, Axiomatic Design, Corporate Design, Datenbankdesign, Designmanagement, Farbdesign, Color Design, Fernsehdesign, Fotodesign, Game Design, Grafikdesign, Kommunikationsdesign, Interaktionsdesign, Interface Design, Invention Design, Lichtdesign, Modedesign, Bekleidungsdesign, Produktdesign, Industriedesign, Schmuckdesign, Service Design, Sound Design, Textildesign, Universal Design und das Webdesign.

Die Gestaltung von Websites ist verbunden mit dem Corporate Design ( Ästetisches Leitbild ). Das Corporate Design wird meist in einem Handbuch beschrieben ( siehe z.B. Corporate Design Handbuch .pdf ).

Und was sagt Johann Wolfgang von Goethe dazu?
( aus Werke - Hamburger Ausgabe Bd. 12, Maximen und Reflexionen )

Diejenigen, die das einzige grundklare Licht
aus farbigen Lichtern zusammensetzen,
sind die eigentlichen Obskuranten .

Vielfach soll das Design "als Ganzes" schnell geändert und begutachtet werden, bevor es endgültig eingesetzt wird. Vielfach ist das Corporate Design an Kundenwünsche anzupassen ( Re-Design ).

Ein durchgängiges Responsives Webdesign für PC als auch für Smartphones möchte erreichen, daß das visuelle Erscheinungsbild bei kleinen/großen Bildschirmen und unterschiedlichen Auflösungen annähernd gleich aussieht. Hierzu können bei CSS u.a. Media Queries genutzt werden.

Toolchen für "Corporate Re-Dedsign" Anforderungen

Es wird ein eigenes, leicht erweiterbares, robustes Toolchen entwickelt und getestet.

Gibt es weitere Erklärungen? Ja ... in der Veranstaltung

Weitere Erkärungen gibt es in der Veranstaltung.

Gute RegExp - Kenntnisse sind hilfreich! Siehe z.B. Reguläre Ausdrücke , Kurzreferenz, Beispiele.

RegExp-Beispiele Verständnis

Hier lediglich das Prinzip der Aufspaltung in "gespittete Token". Achtung! Fehlerhafter Code! Eigene Ideen sind gefragt.

var i, r, re, arr2, key, val, keys=[], vals=[], obj={}, find_repl,  
 
 defs = "  *  1.TOKEN: klein und rund\n  *  TOKEN-2: dünn und lang";
 defs = "\n"+ defs +"\n*";  // Anfang und Ende ergänzen
 defs = defs.replace(/\n\s*\*\s*/g, "\n*"); // Anfang normalisieren

 //           (?:   ) ist eine nicht einfangende Gruppe
 find_repl = /(?:\n*)([A-Z0-9._ÄÖÜ\-]*?)\:([\s\S]*?)(?:\n\*)/g;

 r = defs.replace(find_repl, "~SPLIT~$1~SPLIT~$2");

 arr2 = r.split("~SPLIT~");
 arr2.shift();              // i beginnt nun bei 0 oder?

 for (i = 0; i < arr2.length - 1; i += 2) {
    keys.push(arr2[i]);         // keys ist der TOKEN-Namen-Array
    vals.push(arr2[i + 1]);     // Vals ist der Arr der zugeordneten Ersetzungen 
    obj[arr2[i]] = arr2[i + 1]; // nur, falls obj Sinn macht
 }
 // Beispiel:
 var src_mit_token = "Es ist 1.TOKEN.\nDies aber TOKEN-2.";

 for (i = keys.length - 1; i >= 0; i -= 1) {  
    val = vals[i]; key = keys[i]; 
    try { re = new RegExp(key, "g"); } catch (e) { alert("ERR: RegExp " + e); }
    src_mit_token = src_mit_token.replace( re, val );
 }

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr


Zitat von Friedrich Schiller
( für Johannes Groß, Jena, den 22. September 1790):

Alles unser Wissen ist ein Darlehn der Welt und der Vorwelt.
Der tätige Mensch trägt es an die Mitwelt und Nachwelt ab;
der untätige stirbt mit einer unbezahlten Schuld.
Jeder, der etwas Gutes wirkt, hat für die Ewigkeit gearbeitet.