SDI/MDI für Smartphons Responsives Webdesign

Es geht um SDI und MDI . Z.B. kann MDI für ein ästetisches, responsives Webdesign ( de.wikipedia ) verwendet werden, natürlich für für Smartphon-Apps, PC, usw. Natürlich kann MDI für Benutzeroberflächen, Entwickler-Umgebungen, MDI-Apps und Homepages interessant sein. Beispiel: Die eigene Homepage ist ohne wesentlichen Aufwand auf MDI zu erweitern/ergänzen, daß innovative Eigenschaften und geeigneten Darstellungsformen ( Features ) aufweist, die als Herausstellungsmerkmale gelten können. alle vorhandenen ( und zukünftigen ) HTML-Seiten auch mit dem zu schreibenden responsives Webdesign aussehen und intuitiv nutzbar sind.

Zu Spiel-Veranstaltungen sagt Marcus Tullius (de.wikiquote, 106 - 43 v.Chr.):
Je größer die Schwierigkeiten, die man überwand, desto größer der Sieg.



Hinweise und Einführendes Hinweise erfolgen in der Veranstaltung...

Beispiel: Design-Prinzipien für mobile Geräte; Wie?

Design-Prinzipien für mobile Geräte ... Beim ( PC ) dient die Desktop-Web-Startseite vielen Zwecken. Zu einem PC-Screen gehört ein "großer" Bildschirm.


Beispiel: Persönliche Notizen clientseitig für jede Homepgae-Seite; Wie?

Hinweise in der Veranstaltung.

Beispiel: Mobil-Startseite m.htm; Wie?

Der Aufruf der ( PC ) Web-Startseite sei etwa http://mydomain.de/index.htm und der Aufruf der ( Smartphon ) Web-Startseite sei etwa http://mydomain.de/m.htm

Ist index.htm die Web-Startseite ( MDI, PC ), so kommt nun im Web-Root-Verzeichnis hinzu die Startseiten ( m.htm ) für Smartphons hinzu, indem einfach eine Kopie von index.htm in m.htm umbenannt wird und m.htm ebenfalls in das Web-Root-Verzeichnis kommt. Die Menu-Seite menu.htm enthält die Auswahl-Weblinks.

menu.htm enthält Links, wie z.B.
<a target="FRAME_INFO" href='./subdir1/myseite1.htm'> myseite1 </a>

Es gibt nur ein Fenster, das "FRAME_INFO"-Fenster heißt. Eine ausgewählte Seite von m.htm wird in das gleiche "FRAME_INFO"-Fenster geladen und überschreibt die Menu-Seite m.htm Der m.htm-Quelltext entspricht grob dem leicht modifiziertem index.htm-Quelltext. Der m.htm-Quelltext sieht dann etwa wir folgt aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> (M)ensch-(M)aschine-(K)ommunikation </title>
<meta name="robots" content="index" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.gif" />
<link rel="icon" type="image/x-icon" href="favicon.gif" />
<script type="text/javascript">/*<![CDATA[*/
var bib=(function(){
//...
}());
/*]]>*/
</script>
</head>
<frameset rows="*" cols="*"> 
<frame name="FRAME_INFO" src="menu.htm" />
<noframes><body><h1>MMK</h1></body></noframes>
</frameset>
</html>

Beispiel: Homepage-internen Suche; Wie?

Beispiel für homepage-internen Suche ( https://startpage.com/do/search ):

<form action='https://startpage.com/do/search' target='FRAME_INFO' 
 method="POST" id="Form1" accept-charset="UTF-8"
 onsubmit="document.searchsys.query.value=document.searchsys.keyword.value;for(i=0;i<this.cat.length;i++){if(this.cat[i].checked){c=this.cat[i].value;}}if (c!='web') {this.host.value=document.domain;} else {this.host.value=''};" name="searchsys">
<button class="" type="submit" value="Suche">  Web-Suche (Startpage&#x2122;) </button>
<input class="" id="q" name="keyword" size="32" type="text" value="THM " />
<input name="host" value="" type="hidden" />
<input name="frm" value="sb" type="hidden" />
<input name="cmd" value="process_search" type="hidden" />
<input name="language" value="deutsch" type="hidden" />
<input name="query" type="hidden" />
Site <input id="check2" name="cat" value="thissite" type="hidden" /> 
Web <input name="cat" value="web" CHECKED="checked" type="radio" />
</form>

Beispiel: Responsives Webdesign Homepage-internen Suche; Wie?

Die Prinzipien des responsives Webdesign ( de.wikipedia ) sollen auf die zu erstellende eigene Homepage für Smartphons ( Startseite m.htm ) angewendet werden. Bitte kurz, verständlich dokumentieren!


Beispiel: Persistente Formulardaten; Wie?

Einige Seiten sollen "Toolchen" sein, die Formular-Daten manipulieren. Beim Neuladens einer Seite werden lokale Formular-Daten neu initialisiert, d.h. die vorherigen Daten gehen verloren ( zustandsloses HTTP-Protokoll ).

Die Daten der vorherigen Seite ( des vorher verwendeten Toolchen ) sollen bei der Rückkehr zur vorherigen Seite "erhalten bleiben". Wie geht das ohne Server?

Hierzu kann m.htm eine ECMAScript-Bibliothek bib enthalten mit den Funktionen bib.save_form_items und bib.load_form_items enthalten. In den Header der Toolchen ( Seiten mit Form-Tag ) kommt dann

window.onload = function () {
top.bib.load_form_items(document);  
};
window.onunload = function () {
top.bib.save_form_items(document); 
};

Hinweis: siehe Quelltext von http://www.cilie.org/m.htm

Zu einem modernen Studium gehören Gruppenkontexte und schriftliche Arbeiten, die nach den Regeln guter wissenschaftlicher Praxis anzufertigen sind ( Referate, Studienarbeiten, Praktikas, Abschlussarbeiten, usw. ). Eine Abgabe der Arbeit beinhaltet die Zusicherung, dass die Arbeit selbständig verfasst und alle benutzten Quellen und Hilfsmittel in der Arbeit angegeben sind. Eine Anti‐Plagiatssoftware kann Zusammenhaenge aufdecken und den Grad der Eigenständigkeit prüfen.

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