Erstelle Homepage mit Toolchen HTML5, Rahmen, DOM-Zugriffe

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

  1. Das clientseitige Entpacken des Homepage-Rahmen dient der Einrichtung einer eigenen HTML5-Homepage.
  2. Mit einem upload des Grund-homepage-Rahmens entsteht ein eigenes Homepage-Grundgerüst, das alle weiteren Lösungen aufnimmt und präsentiert.
  3. Die Willkommenseite und .css sind an eigene Ästetik und Bedürfnisse anzupassen ( siehe kern/willkommen.htm ).
  4. Für Name/Author/Entwickler soll Micro-Code eine bessere SEO-Unterstützung bieten ( siehe Datei copyright.htm ).
  5. Für Name bzw. Nickname soll impressum.htm#Wer hat die Rechte an dieser Page? die Autor und E-Mail-Adresse Spam-Robots auf Abstand halten.
  6. Es ist ein Toolchen als HTML 5 - Seite zu schreiben, das 2 Textarea's enthält und in die Datei loesungen/loesung-1.htm kommt.
  7. Die "Liste meiner Aktivitäten" soll chronologisch aktualisiert werden ( siehe unter loesungen/aktivitaeten.htm ).

Nun etwas ausführlicher ...

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:
ESA-Rahmen.zip Teste ESA-Rahmen

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 kern/willkommen.htm Was soll gemacht werden?

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

Zu 4: Micro-Code in Seite impressum.htm Was soll gemacht werden?

Für Name/Author/Entwickler soll Micro-Code eine bessere SEO-Unterstützung bieten ( siehe Datei copyright.htm ).

Zu 5: Seite copyright.htm Was soll gemacht werden?

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 6: Tool-Muster für loesungen/loesung-1.htm Was muß gemacht werden?

Punkt 6 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 6: Textarea als Editor in loesungen/loesung-1.htm 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 6: ECMAScript-Funktionen für loesungen/loesung-1.htm 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 6: Funktionsaufrufe in loesungen/loesung-1.htm 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 7: Die eigenen Akivitäten protokollieren in loesungen/aktivitaeten.htm Pflicht!

Bitte nicht vergessen: Bei allen Ausarbeitungen sind in Kurzform die gemachten Erfahrungen und Erkenntnisse chronologisch in die "Liste meiner Aktivitäten" eingetragen werden ( 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