Vielfach eignen sich Computer, um komplizierte Simulationen durchzuführen. Simulationen werden geplant, modelliert, entwickelt, getestet, durchgeführt. Es gibt unterschiedliche Arten von Computersimulationen , wie z.B. statische/dynamische System-Simulationen, diskrete/hybride Simulation, grafische/physikalische Simulationen, numerische Simulationen , Monte-Carlo-Simulationen , virtuellen Realitäten, Spiele und komplexe Modellsimulationen, Simulationen zur Entwicklung und Optimierung verfahrenstechnischer Prozesse , Simulation von elektrischen Schaltungen und Netzen, Ernergienetze, Transportlogistik, Handelsströme, Ernergie-Versorgungsnetze, usw.
Karl Popper:
Wissenschaft wird immer eine Suche sein,
niemals wirklich eine Entdeckung. Es ist eine Reise,
niemals wirklich eine Ankunft.
Es gibt kleine/große, einfache/komplexe Simulationen und Modellierungen. Hier gehe es um die Simulation von CSS3-Parametern beim Webdesign . Es gilt, eine einfache, robuste, praxisnahe CSS-Simulationen zu entwerfen, zu entwickelt und zu testen. Das Ergebnis soll ein userfreundliches Toolchen sein. Das Toolchen soll App-Layouts als Quelltext generieren können und das Design von Ansichtszustände, wie z.B. Hochformat, Querformat, angedockt und gefüllt abdecken können.
Um die Wirkungen der CSS3-Styles visualisieren zu können. benötigt eine CSS-Simulationen zahlreiche Parameter-Eingabewerte. Insbsondere soll das Toolchen CSS-Quelltext für Cascading Stylesheet-Layout-Features nach CSS3 generieren und ausgegeben können. Eine Vorschau des Ergebnisses ist gefordert.
Johann Wolfgang von Goethe:
"Es ist nicht genug zu wissen - man muss auch anwenden.
Es ist nicht genug zu wollen - man muss auch tun."
Zum schnelleren Einstieg wurde ein Lehr-Muster-Toolchen erstellt, das lediglich beispielhaft eine background-image-Simulation ( CSS3 ) macht. Ausgangspunkt ist das unfertige Lehr-Muster-Toolchen , das als Ausgangspunkt dienen kann.
Diese Erklärungen zum Lehrtoolchen soll lediglich die Erstellung von CSS-Simulationen (ab CSS3 ) aufzeugen ( Lehr-Toolchen ). Als Beispiel wird speziell die Simulation von background-image verwendet.
Simulationen brauchen vielfach zahlreiche Eingabevariationen und realitätsnahe Simulationsmodelle. Zwar können systematische Eingabewerte per Computer berechnet werden, doch bei Design-Fragen möchte der Autor gerne selbst die wesentlichen Eingaben einfach "durchspielen" können und sofort das Ergebnis sehen.
Für Eingaben werden hier jeweils Kombinationen aus grober Select-Auswahl und zugehöriger Input-Text-Element verwendet. Bei Eingaben hat jedes Select-Tag ein nachfolgendes Input-Tag. Eine Select-Auswahl wird als Value in ein nachfolgendes Input-Tag geschrieben. Beispiel: Eine Select-background-image-Auswahl schreibe die Auswahl in das nachfolgende Input-Tag mit value="..."
option value='background-size:12px 12px;'
Im Input-Tag können alle Werte fein-justiert werden.
<select size="1" onchange="set_sel_option_value_in_next_input(this,ooo);"> <option value=''> background-size: ... </option> <option value='background-size:12px 12px;'> background-size:12px 12px; </option> <option value='background-size:24px 24px;'> background-size:24px 24px; </option> <option value='background-size:48px 64px;'> background-size:48px 64px; </option> </select> <input size="40" name="BACKGROUND_SIZE" value="" onkeyup="input_values_verketten(this,ooo)" />
In dem input-Element können dann von Hand Feinjustierungen gemacht werden.
Weitere Erklärungen in der Veranstaltung!
<select size="1" onchange="set_sel_option_value_in_next_input(this,ooo);"> ... erwendet die Funktion set_sel_option_value_in_next_input und <input ... verwendet onkeyup="input_values_verketten(this,ooo)".
var ooo = { id_dst: 'TA0', art: 'pre_vals_post',
names: ["\nhtml, body {\n", // pre-Text
"COLOR", // einfügen von \n
"BACKGROUND_COLOR", // einfügen von \n
"BACKGROUND_SIZE", // einfügen von \n
"BACKGROUND_IMAGE", // einfügen von \n
"\n}\n" // post-Text
]
};
ooo.names ist ein Array, der die Namen der Formular-Elemente enthält, deren Inhalte ( el.value ) in geeigneter Weise zu einem Gesamtstring zusammengesetzt werden müssen.
Ein Select-Klick auf ein ausgewähltes option-Element kopiert den option-value in das nachfolgende input-Tag und set_sel_option_value_in_next_input() ruft dann funktionsintern die Funktion input_values_verketten(this,ooo) auf.
Im WWW gibt es zahlreiche CSS3-Beispiele und Simulationen, die zu einem Toolchen inspirieren können, z.B. bei w3schools.com . Auch gibt es bei uns ein altes Lehr-Muster-Toolchen für CSS-Simulationen.
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr