Semi-Profi-Web-Generierungstoolchen Collage+Templates

Marcus Tullius Cicero: "Je größer die Schwierigkeiten, die man überwand, desto größer der Sieg."

Projekt-Einführung Um was geht es?

Dieses ECMAScript-Projekt beinhaltet etwa:

Wie erfolgt die Projektfindung und der Weg zum Ziel? welche Zielvorstellungen sollen erfüllt werden? Wie kann "mein" innovatives Semi-Profi-Web-Generierungstoolchen effizient erstellt werden? Hier ein Vorschlag:

  1. Am Anfang steht die Idee, was das Semi-Profi-Web-Generierungstoolchen machen soll.
  2. Zunächst wird ein typisches Web-Text-Muster ( Ergebnis-End-Code ) von Hand erstellt und geprüft ( z.B. validiert, getestet, usw. ).
  3. Zur Parametriesierung wird das Web-Text-Muster mit "DUMMY-Textstellen" versehen und kommt in Textarea TA0.
  4. Die "DUMMY-Textstellen" werden später mit den jeweiligen Parameter-Text ersetzt. Hierzu enthält Textarea TA1 alle Ersetzungsvorschriften.
  5. Infolge von [Erstelle] werden die "DUMMY-Textstellen" in TA0 durch die aktuellen Parameter von TA1 ersetzt.
  6. Das "Web-Generierungstoolchen" trägt dann an den "DUMMY-Textstellen" die aktuellen Parameter in das Web-Text-Muster ein.
  7. Der Ergebnis-String wird in die Textarea TA1 ausgeben.

Lehr-Beispiel Web-Generierungstoolchen

Wie sieht ein einfaches, fehlerhaftes, unfertiges Start-Lehr-Beispiel für ein "HTML5-Web-Seiten-Generierungstoolchen" etwa aus? Hier sind Beispiele, die als Ausgangspunkt für eigene Entwicklungen genommen werden können. In diesem Fall ist wichtig, vor den eigenen Entwicklungen erst den Quelltext zu verstehen.

Das Demo Beispiel zeigt Möglichkeiten der Template-Ersetzungen auf.

Lehr-Beispiel Web-Generierungstoolchen

Beispiel 1: Das Experiment 1 enthält "TPH=Template-Platzhalter", wie z.B. TITLE_DER_SEITE, AUTOR_DER_SEITE, SEO_DER_SEITE_SCHLÜSSELWÖRTER, SEO_DER_SEITE_BESCHREIBUNG, SCHRIFT_FARBE_DER_SEITE, HINTERGRUND_DER_SEITE, usw. Mit code_str.replace(TPH, gewünschte-Ersetzung) kann die Aufgabe auf geeignete TPH-Auswahlmöglichkeiten gebracht werden.

Beispiel ( "Collage-Tab-Creator" ) Web-Generierungstoolchen

Beispiel ( "Collage-Tab-Creator" ): Dieses Beispiel zielt auf ästetische Bild-Kompositionenen. Mit Hilfe von CSS3 kann position:absolute; left:50%; und top die Positionierung von Bild-Elementen, Text-Elementen und Transparenz gemacht werden. Ein Toolchen wird die künstlerischen Kompositionierungen und Drug and Drop haben. Aus das Hintergrundbild

body {
background-color:#223;
background-image:url(./img/blumengesteck-2-1080.jpg);
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;
min-width: 100%; width: 100%;
font: 100% monospace; 
}

sollen die Collage-Elemente positioniert werden. Das vertikale-mittige Zentrieren macht

.zentriere{position:absolute;left:50%; margin-right:-50%;transform: translate(-50%,0);}

Bitte den Quellcode von Experiment 2 ansehen und ggf. ein "Collage-Creator-Toolchen" entwickeln.

Beispiel ( "Collage-Tab-Creator" ) Web-Generierungstoolchen

Beispiel ( "Collage-Tab-Creator" ): Experiment 3 Besprechung in der Veranstaltung.


Benötigte Grundlagen ( ECMAScript, RegEx, usw. ) Praktische Hilfen

Hinweise in der Veranstaltung.

Hinweis: Eine einfache Text-Ersetzung in der Zeichenkette str erfolgt beim ersten Auftreten z.B. von dem Text EINMAL mit str.replace(suche_EINMAL, ersetze_mit) etwa

var str_neu = str.replace("EINMAL", "Ersetzungstext");

Eine mehrfache Text-Ersetzung in str kann z.B. RegExp erfolgen mit

var str_neu = str.replace(/MEHFACH/g,"Ersetzungsausdruck");

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