ESA 2012.A1 HTML5, Rahmen, DOM-Zugriffe

Diese einführende Aufgabe zur Veranstaltung ( ECMAScript-Applikationen ) beinhaltet

  1. das Entpacken des Homepage-Rahmen als eigene Vorlage
  2. die Einrichtung einer eigenen Homepage mit upload eines Rahmens
  3. die Vervollständigung der Willkommenseite, die unter einleitung/willkommen.htm ist
  4. die Erstellung der Seite, die unter loesungen/loesung-1.htm ist. Dies ist der Kern der Aufgabe.
  5. die chronologische Aktualisierung der "Liste meiner Aktivitäten", die unter einleitung/aktivitaeten.htm ist

Genaueres kommt weiter unten.

Zu 1: Homepage-Rahmen entpacken Rahmen als Vorlage

Die Lösungen aller Praktikumsaufgaben sollen Bestandteil einer eigenen Homepage werden. Es ist zweckmäßig, als Ausgangspunkt einen Homepage-Rahmen als erweiterbare Vorlage zu verwenden. Ein Grundrahmen für das Portal kann hier herunter geladen werden: Rahmen.zip

Zu 2: Upload des entpackten Rahmen Welcher Server?

Wie erfolgt der Upload? Wohin erfolgt der Upload? Wie werden Suchmaschinen-Indizierungen ausgegrenzt?

Der herunter geladene rahmen.zip wird lokal entpackt. Die entpackten Dateien werden mit einem geeigneten FTP-Programm ( z.B. FileZilla ) auf dem MNI-Server proteus.mni.fh-giessen.de in das Verzeichnis public_html/   hoch geladen.

Für das Hochladen brauchen sie

 Rechnername : sftp://proteus.mni.fh-giessen.de  mit  Port 22
 Benutzername: MEINE_BENUTZER_KENNUNG

Die entpackte Dateien-Struktur von rahmen.zip sollen in das Serververzeichnis public_html/.

Hinweis: Zum proteus-HTTP-Root-Verzeichnis

http://proteus.mni.fh-giessen.de/~MEINE_BENUTZER_KENNUNG/

gehört das Server-Verzeichnis

public_html

Hinweis: Zu jedem proteus-HTTP-Verzeichniss, also auch zu public_html gehören i.a. die Appache-Rechte 0755 (oktal)
Hinweis: Zu WWW-Dateien, wie z.B. *.htm, *.html, *.gif, *.jpg, *.css, *.js gehören i.a. die Rechte 0644 (oktal)
Hinweis: Damit die Seiten von SEO-Robots nicht gelesen werden, ist robots.txt zu prüfen und in das Verzeichnis public_html/ zu stellen.

Zu 2: My-Cloud-Provider? proteus-Server ist Pflicht

Achtung! Nur in begründeten Ausnahmefällen (und erst nach Rücksprache!) kann ein anderer Server verwendet werden. Begründung erfolgt in der Veranstaltung.

Zu 3: Seite einleitung/willkommen.htm Was soll gemacht werden?

Die Willkommenseite, die unter einleitung/willkommen.htm ist, soll nach individuellen Gesichtspunkten vervollständigt werden. Bitte Anonymität beachten.

Hinweis:
Falls z.B. eine E-Mail-Adresse angegeben wird, so soll ihre E-Mail-Adresse zwar für Menschen lesbar aber zur Vermeidung von "Spam-Mails" für Robots möglichst unidentifizierbar sein. Es reicht z.B.

E-Mail-Adresse:  myName@mni.myProvider.de   als

E-Mail-Adresse: myName@mni.myProvider.de darzustellen.

Bitte hier im HTML-Seiten-Qelltext diese Stelle anschauen.

Zu 4: Seite loesungen/loesung-1.htm ( Tool-Muster ) Was muß gemacht werden?

Punkt 4 ist der Kern der Aufgabe und wird in mehrere Teile unterteilt.
Es ist ein Toolchen als HTML 5 - Seite zu schreiben.
Nachfolgend ist ein wieder verwendbares und ausbaufähiges Grundmuster für eine solche HTML 5 - Seite.

HTML 5 Code Snippet: Muster für Tool-Seite
  1. <!DOCTYPE html><html lang="de">
  2. <head>
  3. <title> Code-Muster </title>
  4. <meta charset="UTF-8" />
  5. <link rel="stylesheet" href="../kern/tools.css" />
  6. <script>
  7. var win = window; // global
  8.  
  9. </script>
  10. </head>
  11. <body>
  12. <div id="page">
  13. <div id="head"><!-- Banner -->
  14.    <h1> DOM und unescape() </h1>
  15. </div>
  16.  
  17. <div id="nav"><!-- Auswahl-Menu -->
  18.  
  19. </div>
  20.  
  21. <div id="content"><!-- ein form-Tag mit TA0 und TA1 -->
  22.  
  23. </div>
  24. </div>
  25. </body></html>
Zu 4: Seite loesungen/loesung-1.htm ( Editoren ) Was macht die Applikation?

Diese Seite loesungen/loesung-1.htm soll zwei Editoren haben. Die zugehörigen textarea-Tags haben id="TA0" und id="TA1". In das div-Tag mit id="content" kommt ein HTML-Formular mit 2 Textarea's, etwa

Code Snippet: HTML-Formular mit 2 Textarea
  1. <form action="#">
  2.   <textarea id="TA0" cols="90" rows="30"></textarea>
  3.   <textarea id="TA1" cols="90" rows="8"></textarea>
  4. </form>
Zu 4: Seite loesungen/loesung-1.htm ( Funktionen ) Funktionen schreiben

Für einen vereinfachten DOM-Zugriff werden die wieder verwendbaren Funktionen get_node (id), get_string (id), set_string (id, str) analysiert, getestet und verbessert.

Das script-Tag enthält globale Funktionen. Das nachfolgende script-Tag kommt in das HTML-header-Tag.

Code Snippet für get_node (id), get_string (id), set_string (id, str)
  1. <script>
  2. var win = window; // global
  3. var doc = win.document, data_objekte = {};
  4.  
  5. function get_node (id) {var o;
  6.   if (typeof id === 'string') { o = doc.getElementById(id); }
  7.   if (!!(o && o.nodeType !== 1)) { win.alert('ERR: get_node(' + id + '???)'); }
  8.   return o;
  9. }
  10. function get_string (id) {
  11.   var o = get_node(id), tn = o.tagName.toLowerCase();
  12.   if (tn === 'input' || tn === 'textarea') { return o.value;
  13.   } else { return o.innerHTML;
  14.   }
  15. }
  16. function set_string (id, str) {
  17.   var o = get_node(id), tn = o.tagName.toLowerCase();
  18.   if (tn === 'input' || tn === 'textarea') {o.value = str;
  19.     o = get_node(id); o.setAttribute('value', o.value);
  20.   } else { o.innerHTML = str;
  21.   }
  22. }
  23. </script>
Zu 4: Seite loesungen/loesung-1.htm ( Aufrufe ) Aufruf von ECMAScript-Code

In das div-Tag mit id="nav" kommen die Menu-Aufrufe, die ECMAScript-Code ausführen. Nachfolgend ist ein solches a-Tag angegeben, etwa

Code Snippet: ein a-Tag für div id="nav"
  1. <a href="javascript:void(0)"
  2.    onclick="set_string('TA0',unescape('%3Ch1%3E%20Policy%20f%FCr%20die%20...%20Pr%E4sentation%20%3C/h1%3E%0A%3Cp%3E%0AF%FCr%20die%20Durchf%FChrung%20des%20Praktikums/der%20%DCbung/der%20Veranstaltung%0Asind%20die%20folgenden%20Studienvereinbarungen/learning%20agreement%0Asinnvoll%3A%0A%3C/p%3E%0A%0A%3Col%3E%3Cli%3E%20Es%20werden%20studienbegleitende%20Termine%20angeboten.%0A%3C/li%3E%3Cli%3E%20Die%20Ergebnisse%20sollen/k%F6nnen%20in%20Kurzform%20%0A%20%20%20%20%20%20%20%20%20%20%28max.%2010%20Minuten%29%20pr%E4sentiert%20werden.%20%0A%3C/li%3E%3Cli%3E%20Die%20m%F6gliche%20Pr%E4sentationsformen%20werden%20%0A%20%20%20%20%20%20%20%20%20%20in%20der%20Veranstaltung%20besprochen.%0A%3C/li%3E%3Cli%3E%20Jede%20Pr%E4sentation%20wird%20vor%20Publikum%20kurz%20diskutiert.%20%0A%3C/li%3E%3Cli%3E%20Mindestens%202%20Pr%E4sentationen/Semester%20sind%20erw%FCnscht.%0A%3C/li%3E%3Cli%3E%20Die%20Bewertungen%20sind%20am%20Ende%20des%20Semesters%20einzeln%20einsehbar.%0A%3C/li%3E%3C/ol%3E%0A'));return false;">
  3.    Policy für Präsentation ↓
  4. </a>
Zu 5: einleitung/aktivitaeten.htm ( Akivitäten protokollieren ) Bitte nicht vergessen ...

Bitte nicht vergessen: Bei allen Ausarbeitungen ist die chronologische Aktualisierung der "Liste meiner Aktivitäten" Pflicht!

Ausblick: Wie kann das Toolchen erweitert werden? Wozu sind diese Erweiterungen nützlich? Wie können die globalen Funktionen in einen Namespace überführt werden?

Wie wird testiert, bewertet? Es "gilt" das gesprochene Wort ...

Wesentliches wurde in der Veranstaltung mitgeteilt. Es gibt "harte" Kriterien, hierzu gehört der Abgabetermin. Es gibt "weiche" Kriterien, die stets eine gewisse "Grauzone" haben. Nachfolgend zu den Ausarbeitungen einige Bemerkungen, Denkanstöße, Fragen. 

[ ] Wurde die Willkommen-Seite aktualisiert, verbessert?   
[ ] Wurde der Schreibfehler Praktikumw? geändert?
[ ] Wurde in der Menü-Seite der Schreibfehler Memü? geändert?
[ ] Wurde für die Menü-Seite in ./kern/menu.css die h1-Höhe verkleinert?
[ ] Wurde die Aktivitäten-Seite aktualisiert?
[ ] Wurden Aktivitäten eingetragen und DEMNÄCHST gelöscht, ersetzt?
[ ] Wurde die Homepage hochgeladen, ist die Lösungsseite aufrufbar und funktioniert?
[ ] Wurden weiterführende Experimente durchgeführt und in der Aktivitäten-Seite protokolliert, 
    wie z.B. TA0 per nav-Punkt löschen, was bewirken  \n  \t  \r\n  in TA0
    wie sieht es mit HTML-Quelltext aus?
Gibt es hierzu Self-Assessments? einige MCT-Fragen ...

Einige Multiple-Choice-Fragen als Self-Assessments-Möglichkeit ( in der Veranstaltung )

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Mo 12.00 Uhr