SDI/MDI für Smartphons Responsives Webdesign

Es geht um SDI und MDI Benutzeroberflächen für die eigene Homepage. Die Prinzipien des responsives Webdesign ( de.wikipedia ) sollen auf die zu erstellende eigene Homepage für Smartphons angewendet werden. Die eigene Homepage ist so zu erweitern/ergänzen, daß alle vorhandenen ( und zukünftigen ) HTML-Seiten auch mit dem zu schreibenden responsives Webdesign ästetisch aussehen und intuitiv nutzbar sind.

Design-Prinzipien für mobile Geräte Einführendes

Beim ( PC ) dient die Desktop-Web-Startseite vielen Zwecken. Zu einem PC-Screen gehört ein "großer" Bildschirm.

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>
Homepage-internen Suche Beispiele

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>
Responsives Webdesign Startseite m.htm

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!

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 So 17.1.2015, 12.00 Uhr