Erstelle ( Profi-) Web-Generierungstoolchen mit Templates

Diese Aufgabe zur Veranstaltung ( ECMAScript-Applikationen 2014) beinhaltet:

• Die Entwicklung eines "brauchbaren ( Profi-) Web-Generierungstoolchens".
• Das Toolchen soll ( auch für Web-Anfänger/innen ) eine robuste, einfache Erstellung von zahlreichen Web-Komponenten, ( wie z.B. Design, Styles, ECMAScript-Text-Module, XML-Komponenten, usw. ) ermöglichen.
• Das Toolchen soll ( auch für Web-Anfänger/innen ) leicht an veränderte Ausgangssituationen anpassbar sein.
• Natürlich gibt es im Web viele proprietäre Generatoren, die sich oft den speziellen Firmen-Eigeninteressen anpassen und unterordnen müssen. Es gibt z.B. den Slogan "mit einem Klick zur eigenen Homepage".
• Hingegen soll das selbst zu erstellende "Web-Generierungstoolchen" flexibel, vielfältig einsetzbar und leicht erweiterbar sein und sich "in gewisse Weise selbstähnlich" erweitern und leicht an neue Situationen anpassen können ...
• Das "Web-Generierungstoolchen" soll an alle Web-Technologien ( XML, SVG, Canvas, CSS, usw. ) anpassen können ( z.B. für statische/dynamische Seiten, Design, Formatierungseinstellungen mit CSS Blocken, Kurz-Notiz-Dienste, Schulungen, Training, Electronic Business, Web Services, Online Shop, Groupware, Semantic Web, Web Slices, Präsentationen, Skripting, Code-Entwicklung und Parametriesierung, AJAX-Code-Generierungen und Flash-Code-Generierungen, Kryptografie, Validierungen, usw.
• Bekanntlich sind unnötige-proprietäre ( Bequemlichkeits- ) Randbindungen an firmenspezifische Technologien vielfach "out".
• Inter-Zusammenwirken in Gruppen hat Vorrang vor technischem Equipment und proprietären Spezialisierungen.
  Flexible Fähigkeiten zu funktionalen Anpassungen haben Vorrang vor idealisierten Planspielen.
  Robuste Funktionalitäten haben Vorrang vor Design und Dokumentation.
  
• Hier einige Stichworte zu möglichen Beispielen: Impressum Generator, Meta-Tag Generator, MDI-, Webcam-Code-Generator, ECMAScript-Code-Generator, parametrisierte Manifest-Erstellung, CSS-Schnipsel-Manipulierer, CSS-Layout-Generator, Table mit CSS generieren, MathML, SVG, Canvas, usw.

Wie gehen wir vor? Übersicht

Wie erfolgt die Projektfindung? welche Zielvorstellungen sollen erfüllt werden? Wie kann "mein" innovatives Web-Generierungstoolchen effizient erstellt werden? Hier ein Vorschlag:

1. Am Anfang steht die Idee, was das "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.

Hinweis: Eine einfache Text-Ersetzung in str kann z.B. erfolgen mit

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

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

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

Wie sieht ein einfaches, fehlerhaftes, unfertiges Start-Lehr-Beispiel etwa aus? Hier ist ein Start-Beispiel .

Lehr-Beipspiel Web-Generierungstoolchen

Wie sieht ein einfaches, fehlerhaftes, unfertiges Start-Lehr-Beispiel für ein "HTML5-Web-Seiten-Generierungstoolchen" etwa aus? Hier ist ein Start-Beispiel , das als Ausgangspunkt für eigene Entwicklungen genommen werden kann. In diesem Fall ist wichtig, bevor mit den eigenen Entwicklungen begonnen wird, erst den Quelltext des Start-Beispiels untersuchen und verstehen.

Dieses Start-Beispiel ist ein "Minimal-Beispiel" und soll zeigen, wie etwa z.B. ein HTML5-Basis-Template mit semantischer Strukturierung ( <article>, <aside>, <dialog>, <figure>, <footer>, <header>, <nav>, <section>, <header>, <nav>, <section>, <footer> ) von außen "parametrisiert" werden kann und wie die konkreten Parameter-Texte für das h1-Tag; das title-Tag ein Banner-Bild, Hintergrund- und Vordergrundfarben in den Template-Text eingefügt werden können.

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr