ECMAScript-Praktikum 2011: Problemstellung 1 HTML5, Homepagegerüst, Zugriff auf Editoren

Diese einführende (praktische) Aufgabe zur Veranstaltung beinhaltet die Einrichtung einer eigenen Homepage, dem Design der Willkommen- als auch der Impressum-Seite, sowie das Entwickeln eines ECMAScript-Tool mit 2 Textareas (2 Editoren). Es ist die HTML5-Lösungsseite tools/tool-1.htm zu erstellen. Bei dieser und zukünftigen Lösungen zum Praktikums sollen diese Ausarbeitung stets als Teil der eigenen Homepage eingestellt werden.

Erstellen eines Portals Was soll gemacht werden?

Für die Lösungen der Praktikumsaufgaben soll ein eigenes Portal erstellt werden, das geeignet ist, die Lösungen der Aufgaben zu präsentieren. Ein Grundrahmen für das Portal kann hier herunter geladen werden: Rahmen.zip

Der herunter geladene Rahmen.zip wird lokal entpackt. Die entpackten Dateien werden mit einem geeigneten FTP-Programm auf dem MNI-Server proteus.mni.fh-giessen.de hoch geladen und damit im WWW online gestellt.

Für die Anmeldung zum Hochladen brauchen sie

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

In ihrem User-Hauptverzeichnis des Servers (proteus.mni.fh-giessen.de/~MEINE_BENUTZER_KENNUNG/) muß (falls nicht vorhanden) einmalig ein Unterverzeichnis public_html angelegt werden.

In dieses public_html-User-Verzeichnis kommen die entpackten Rahmen.zip-Dateien. Die XHTML-Datei index.htm ist die "Portal-Einstiegsseite" (=default-Startseite, frameset-Seite) der Homepage.

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

Hinweis 1 zum tool-1 Was soll das Tool-1 tun?

Es ist ein Toolchen zu schreiben, das einen Editor 1 (textarea 1) verwendet, der aus dem HTML-Quelltext (z.B. der body-tree) den window.escape()-Funktion einen codierten ECMAScript-Quelltext erstellt und in den Editor 2 (textarea 2) schreibt.

Mit Hilfe der Funktionen window.document.write(), window.escape(), window.unescape() kann HTML-Quelltext (auch ein ECMAScript-Quelltext) in eine HTML-Seite (Header, Body) eingefügt werden. Liegt die HTML-Seite als window.escape()-Codierung vor, so kann mit Hilfe von window.document.write() ECMAScript diese Seite schreiben.

Code Snippet: lediglich ein Hinweis
  1. <script>
  2.   var js1 = "%3Cscript%20type%3D%22text/javascript%22%3E%0A", js2 = "%3C/script%3E";
  3.   document.write(unescape(js1 +
  4.           "if%28confirm%28%22m%F6chten%20sie%20THM%20MNI%20aufrufen%3F%22" +
  5.           "%29%29%7Bwindow.location%3D%22http%3A//www.mni.fh-giessen.de/%22%3B%7D" +
  6.           "else%7Bwindow.close%28%29%3B%7D" + js2));
  7. </script>
Hinweis 2 zum tool-1 Was soll das Tool-1 tun?

Auf die Editoren kann bequemer mit eigenen Funktionen zugegriffen werden, etwa

Code Snippet: Zugriffsfunktionen für Editoren
  1. function get_node  (id) {var o;
  2. if (typeof id === 'string') { o = window.document.getElementById(id); }
  3. if (!!(o && o.nodeType !== 1)) { window.alert('ERR: get_node(' + id + '???)');}
  4. return o;
  5. }
  6.  
  7. function get_string (id) {
  8. var o = get_node(id), tg = o.tagName.toLowerCase();
  9. if (tg === 'input' || tg === 'textarea') { return o.value; } else { return o.innerHTML; }
  10. }
  11.  
  12. function set_string (id, str) {
  13. var o = get_node(id), tg = o.tagName.toLowerCase();
  14. if (tg === 'input' || tg === 'textarea') {
  15. o.value = str; o = get_node(id); o.setAttribute('value', o.value);
  16. } else { o.innerHTML = str;
  17. }
  18. }
  19.  
  20. function build_entities(editorstring) { var i, j, si,r,
  21. arr = editorstring.replace(/\r/g,'').match(/[^<>]+|<(\/?)([A-Za-z]+)([^<>]*>)/g);
  22. for(i = 0; i < arr.length; i += 1) { if(arr[i]){ si = arr[i];
  23.   if (/^\s*!/.test(si)) { arr[i]='<'+arr[i]+'>';
  24.   } else if(si.slice(0,1) !== '<' ) { r = "";
  25.     //first_chr = si.slice(0,1);  
  26.     for(j = 0; j < si.length; j += 1) { r += '&#'+si.charCodeAt(j).toString(10);
  27.     } arr[i] = r.replace(/\&#10/g,'\n');
  28.   }
  29. }
  30. } return arr.join('');
  31. }

Was macht die Funktion build_entities(editorstring)? Wie ist der Funktionscode zu erklären?

Hinweis zur Homepage "Schrottbeseitigung"

Der vorgefertigte Homepage-Rahmen ist nach dem Entpacken unvollständig und bedingt noch fehlerhaft und enthält Seiten, die zu korrigieren, zu verbessern und zu vervollständigen sind.

Die Impressum-Seite zum Praktikum kann (falls gewünscht) persönliche Daten enthalten, insbesondere jene, die ohnehin öffentlich sind. Bitte diese Impressum-Seite nur soweit ergänzen, wie sie dies zulassen und veröffentlichen möchten. Bitte auch die "Willkommen-Seite" nach ihren Wünschen gestalten.

Zur Vermeidung von "Spam-Mails unter ihrer E-Mail-Adresse soll ihre E-Mail-Adresse zwar für Menschen lesbar aber für Robots möglichts möglichst unidentifizierbar sein, wie z.B. (an dieser Stelle den bitte Seiten-Qelltext anschauen)
E-Mail-Adresse:  myName@mni.myProvider.de   als
E-Mail-Adresse: myName&#x40;mni&#x2e;myProvider&#46;de

Wie kann das Toolchen erweitert werden, damit aus einer regulären E-Mail-Adresse im Editor 1 der Quellcode für die "getarnte" E-Mail-Adresse (im Editor 2) gemacht wird? Wie kann in ähnlicher Weise ein href-String "getarnt" werden?

Hinweis zu SEO SEO-Ranking-Dokumentation

Die Suchmaschinenoptimierung (SEO = Search Engine Optimization) hängt von den "Geheimnissen der Suchroboter (Spider) ab. Es sollen anhand von Ideen und kleine Aktivitäten neue Erkenntnisse zur Suchmaschinenoptimierung gewonnen werden. Es soll konkret das SEO-Ranking "kontinuierlich" untersucht, ausprobiert, verbesser werden. Alle diese SEO-Aktivitäten sind stets zeitlich geordnet und stichwortartig zu protokollieren. Insbesondere sind eigene Erkenntnisse und Wissenzuwachs (+ber mehrere Wochen hinweg) stichwortartig zu protokollieren. Für die "guten" SEO-Verweise ist eine eigene seo-links.htm-Seite zu erstellen, die unter "Linksammlung" hinzu gefügt wird.

Hinweis: de.wikipedia: Suchmaschinenoptimierung