Web-Basics Vom Kennen zum Können

Brigitta K. Pfäffli ( aus Lehren an Hochschulen ): "Dass Studierende etwas gelernt haben, bedeutet leider noch nicht, dass sie es beim Lösen von Aufgaben auch einsetzen könnten. Deshalb sollen die Studierenden bereits während des Studiums auch wissensgeleitetes Handeln erfahren und einüben."


Projekt-Kurzfassung Was, wie, warum, wozu, selfmade

In dieser Veranstaltung werden konkrete Problemstellungen zu einer selfmade Web-App's grob umrissen. Es gibt hinreichend Freiraum für innovative Entwicklungen. Das Projekt enthält vielschichtige Basis-Methoden, die bei den meisten Web-Anwendungen benötigt werden. Es wird eine eigene HTML5-Projekt-Homepage erstellt, hochgeladen und mit weiteren Projekten ausgebaut ( Web-Apps und mehr ).

Dieses erste Projekt hat 3 Teile.

  1. Zunächst Erstellung einer eigenen Homepage, die dann durchgängig für den praktischen Teil der MMK-Veranstaltung verwendet wird.
  2. Jede App wird Bestandteil der eigenen Homepage und wird mit Hilfe von HTML, ECMAScript, DOM und CSS selbst entwickelt, getestet und unter /loesungen/app-1.htm online gestellt wird. Plagiate sind out.
  3. Die eigenen Aktivitäten werden in die Aktivitäten-Liste /loesungen/aktivitaeten.htm eingetragen. Insbesondere sind die eingebrachten Teile zu kommentiert und als HTML-Code in /loesungen/aktivitaeten.htm einzutragen.


Homepage-Rahmen einrichten Entpacken ...

Diese erste, einführende Aufgabe beinhaltet die Erstellung einer eigenen Homepage, die danach für alle praktischen Teile der MMK-Veranstaltung verwendet wird. Eine übersichtliche Einbettung der eigenen Lösungen in den Rahmen ermöglicht eine übersichtliche Struktur für die Projekte.

Die Lösungen aller Praktikumsaufgaben werden Bestandteil der eigenen Homepage sein. 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: MMK-Rahmen-2018.zip
Wie sieht der Roh-Rahmen für die Homepage etwa aus? Teste MMK-Rahmen


Upload des entpackten Rahmen Welcher Server?

Was ist zu tun? Wie erfolgt der Upload? Wohin erfolgt der Upload? Wie werden Suchmaschinen-Indizierungen ausgegrenzt? Was ist zu tun?

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

Einige Hinweise:


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.

Hier ist ein Anfang ( ../prakt-2018/proj-2.htm )   App-Start  

Was ist der Kern der Aufgabe? Wie fange ich an? Die Datei ../prakt-2018/proj-2.htm kann als Start zum Entwickeln des Toolchen "Text-Transf-App" dienen.

"Text-Transf-App" soll 
- dem Experimentieren mit Strings und deren Manipulationen dienen 
- der Transformation von Zeicheketten, Unicode-Blöcken und Code-Schnipseln dienen 
- der Template-Sammlung für HTML-, CSS-, ECMAScript-Schnipsel dienen 
- den vielfältigen Transformationen von Texten und Code dienen

Was soll das Toolchen können? Hier kommen mündliche Hinweise zum "String-Manipulationen-Toolchen", das in der Seite ../prakt-2018/proj-2.htm ist. Hier ist ein Anfang für /proj/proj-2.htm Proj-2-Start Es darf von dem vorhandenen, ungetesteten Grundmuster ausgegangen werden. Plagiate sind out!


Akivitäten protokollieren in apps/aktivitaeten.htm Pflicht!

Bitte nicht vergessen: Bei allen Ausarbeitungen und Entwicklungen sind in Kurzform die gemachten Erfahrungen und Erkenntnisse chronologisch in die "Liste meiner Aktivitäten" eingzuetragen ( Pflicht! ). Dort können auch weitere Ideen und Hinweise stehen, wie z.B.

- Wie kann das Toolchen erweitert werden?
- Welche Erweiterungen sind  möglich ( Beispiele )?
- Wozu sind diese Erweiterungen nützlich?
- usw.


Hinweise: Unicode-Zeichen Pfeile, Sterne, Noten, Braille, usw.

Oft werden besondere Unicode-Zeichen gebraucht. Das Toolchen soll Möglichkeiten für eine Zeichenauswahl zur Verfügung stellen Welche Transformationen von String soll die App bewerkstelligen?
Was ist zu beachten, was zu machen? Für weitere Ideen siehe z.B. Toolchen für UTF-8-Zeichen

Ideen können z.B. im Zusammenhang stehen mit: UTF-8-Zeichen und HTML-Entities, base64, 
Buchstaben zählen, Wörter zählen, Zeichen-Häufigkeiten ermitteln, Texte filtern, Texte vergleichen, 
UTF-8-Strings transformieren mithilfe von escape,  unescape, encodeURI, decodeURI,
       encodeURIComponent, decodeURIComponent, atob, btoa 
String-Funktionen ( wie charAt, charCodeAt, concat, contains, 
       indexOf, lastIndexOf, match, quote, replace, search, slice, 
       split, substr, substring, trim, toLowerCase, toUpperCase ),
Text generieren, Text-Templates, Code-Schnipsel, usw. 

   ⏎  ⏎      ❐  ❐

   ◹  ◹      ⚶  ⚶

   ⵖ  ⵖ     ☀  ☀

   ◆  ◆      ➥  ➥

   ➹  ➹     ␣  ␣ 

Hier ist eine Darstellung von Zeichen zum Auswählen von Unicode-Zeichen ( siehe im Quellcode in dieser Seite ).




Hinweise: CSS und Farben Welche "Web-Hausfarben"?

CSS-Einführung , CSS-Selektoren , CSS-Properties , geeignete Farben zusammenstellen , Farben-Syntax nach W3C (2018), Farben aus Webseite extrahieren

Beispiel für "Web-Hausfarben":

Pantone  109,   CMYK 0/10/100/0,  RGB 255/221/0, Web #ffdd00       RAL 1018
Pantone  144 C, CMYK 0/50/100/0,  RGB 243/145/0, Web #f39100       RAL 1007
Pantone 1795 C, CMYK 0/100/100/0, RGB 227/0/15,  Web #e3000f       RAL 3028
Pantone  207 C, CMYK 30/100/60/0, RGB 183/26/73, Web #b71a49       RAL 3003
Pantone  308 C, CMYK 90/5/0/45,   RGB 0/107/148, Web #006b94       RAL 5001
Pantone 3135 C, CMYK 100/0/30/0,  RGB 0/155/180, Web #009bb4       RAL 5021
Pantone  376 C, CMYK 50/0/100/0, RGB 148/193/28, Web #94c11c       RAL 6018

Hinweise: Extrahiere Daten aus Web-Dokumenten Wie geht das?

Beispiel: Webseiten enthalten a-Tags. Wie können alle a-Tags extrahiert werden? Wie kann damit eine neue Web-Seite generiert werden? Siehe z.B. Tool Extrahiere-tags Reguläre Ausdrücke helfen weiter.

function extrahiere_a_tags(str) { "use strict"; //  nur das Prinzip ...
 var ok, tit = "", h1 = "", 
 style = "\n<style>a{font-size:2rem;background-color:#eee;color:#009;}\n<\/style>\n",
 atags = [],
 a = "<a class='extern' target='_blank' href='HREF'>\nHTML\n<\/a><br \/>\n";
 ok = /<h1/.test(str);
 if (ok) {
   h1 = str.replace(
   /^[\s\S]*?<h1[^>]*?>([\s\S]*?)<\/h1[\s\S]+$/, 
   "\n$1\n\n");
 } else { 
   h1 = "Liste der Weblinks"; 
 }
 h1 = "<h1>" + h1.trim() + "\n<\/h1>\n";
 ok = /<title/.test(str); 
 if (ok) { 
  tit = str.replace(
        /^[\s\S]*?<title[^>]*?>([\s\S]*?)<\/title[\s\S]+$/, 
        "\n$1\n\n"); 
  tit = "<h2>" + tit.trim() + "\n<\/h2>\n"; }
  str.replace(/\s+\=/g, "")
     .replace(/\=\s+/g, "")
     .replace(/>\s+/g, ">")
     .replace(/\s+</g, "<")

     .replace(/<a\s[\s\S]*?href\=("|')([\s\S]*?)("|')[^>]*?>([\s\S]*?)<\/a>/g,
        function (t0, t1, t2, t3, t4) {
          if (t2.slice(0, 1) !== "#" && t2.slice(0, 6) !== "mailto") {
             atags.push(a.replace("HREF", t2).replace("HTML", t4));
        }
 });
}

Hinweise: regulären Ausdrücke Weblinks

Abeiten mit regulären Ausdrücken: Mit Hilfe von Regulären Ausdrücken können Textfragmente extrahiert und Dokumenten-Content manipuliert werden. Hinweise: RegExp , Kurzreferenz Beispiele , Lehr-App zum Experimentieren mit regulären Ausdrücken.


Hinweise: Extrahiere Daten aus Web-Dokumenten Wie geht das?
 Beispiel: finde alle /*... */ - Kommentare 

   /\/\*[\s\S]*?\*\/|\/\/.*?[\n\r]/g

Stichworte:


Hinweise: Weitere Ideen ... altes Toolchen

Bei Strings gibt es eingebaute Funktionen zur Transformation von Zeichen/Zeichenketten. Diese werden vielfältig angewendet.

Gibt es weitere Ideen? Siehe z.B. Toolchen für UTF-8-Zeichen

Zurück ℹ Infos zur oberen "Select-Befehls-Zeile"

SPÄTER LÖSCHEN! ... SPÄTER LÖSCHEN! ... Hierher springen mit dl.toggle_all_dd("app",[4])

Das Toolchen kann unterschiedliche Funktionen ausführen. Dises Toolchen dient Web-Entwicklern/innen, die in vielfältiger Weise mit Codes, Texten, Templates, Unicode-Zeichen, Code- und Text-Schnipsel zu tun haben.

Die obere Textarea id="TA0" dient i.a. für die Eingabe von Texten, die dann mit Funktionen modifiziert werden sollen. Das Ergebnis wird in die untere Textarea id="TA1" geschrieben.

Die obere Textarea id="TA0" dient i.a. als Eingabe und die untere Textarea id="TA1" als Ausgabe. Das Ergebnis kann als Browser-Vorschau angezeigt werden.

  • Die linke Select-Auswahl-Box ist für eingebaute ECMASript-String-Funktionen gedacht.
  • Die rechte Select-Auswahl-Box
    - ist zum Erstellen von Textsammlungen und Templates gedacht,
    - ist für CSS-Code-Transformationen zu pritty-code/pritty-code gedacht,
    - ist zum Extrahieren von a-Tags aus einem HTMlQuelltext gedacht,
    - ... Hier ergänzen ...

Zurück

Zurück ℹ Infos zur unteren "Select-Befehls-Zeile"

SPÄTER LÖSCHEN! ... SPÄTER LÖSCHEN! ... Hierher springen mit dl.toggle_all_dd("app",[5])

Infos zur Textsammlung

Oft werden mehrzeilige Texte in unterschiedlichen Sprachen benötigt oder/und
ein Toolchen muss mit der jeweiligen Sprache ( Fehler, Hinweise, Erklärungen ) bestückt werden oder/und
es sollen zahlreiche Text-Schnippsel, Code-Schnippsel, Style-Schnippsel zur Verfügung gestellt werden oder/und
es werden unterschiedliche Templates benötig oder/und
Wie können mehrzeilige Texte geeignet organisiert werden? Hier wird

  1. der mehrzeilige Text ( Unicode ) in TA0 kopiert.
  2. Der Aufruf TA1 := einzeiliget_text_aus_taStr("TA0") erstellt in TA1 einen einzeiligen Text etwa myKey: "..."
  3. Das einzeilige myKey:value - Paar wird von Hand in die Datei text_sammlung.js eingetragen.
  4. In text_sammlung.js entsteht so wiederverwendbarer Text.
  5. Ist text_sammlung.js in die aktuelle html-Datei includiert, so konn ein Text-Schnipsel mit dem Key myKey: verwendet werden mit dem Aufruf:
     var mehzeilger_text = oo.taStr_aus( text_sammlung.myKey )
// Kurzfassung:
// Anklicken von   TA1 := einzeiliget_text_aus_taStr("TA0")  gibt aus
//
// myKey  bitte überschreiben dann
// myKey: "...",   in Datei text_sammlung.js  eingetragen
// Aufruf: oo.taStr_aus( text_sammlung.myKey )

Zurück

Zurück ℹ Infos zur unteren "Select-Befehls-Zeile"

SPÄTER LÖSCHEN! ... SPÄTER LÖSCHEN! ... Hierher springen mit dl.toggle_all_dd("app",[6])

Infos zur Textsammlung

Der Quelltext von Webseiten enthält i.a. viele Weblinks. Wie kann eine Weblink - Liste aller a-Tags extrahiert werden? Was ist zu tun?

Den HTML-Quellcode in TA0 kopieren und dann aufrufen

TA1 := extrahiere aus TA0 alle a-Tags

Zurück

Zurück ℹ Infos zur unteren "Select-Befehls-Zeile"

SPÄTER LÖSCHEN! ... SPÄTER LÖSCHEN! ... Hierher springen mit dl.toggle_all_dd("app",[7])

Infos zur Textsammlung

Zurück

Zurück ℹ Infos zur unteren "Select-Befehls-Zeile"

SPÄTER LÖSCHEN! ... SPÄTER LÖSCHEN! ... Hierher springen mit dl.toggle_all_dd("app",[8])

Infos zur Textsammlung

Zurück

Zurück ℹ Infos zur unteren "Select-Befehls-Zeile"

SPÄTER LÖSCHEN! ... SPÄTER LÖSCHEN! ... Hierher springen mit dl.toggle_all_dd("app",[9])

Infos zur Textsammlung

Zurück

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Abgabetermin in der Veranstaltung.