Chinesisches Sprichwort: Wenn der Wind der Veränderung weht, bauen die einen Windmühlen und die anderen Mauern.
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. Die Lösungen ( = Web-Apps ) enthalten eigenen Ideen. Plagiate sind out. Alle Apps ( incl. Dokumentation ) werden ( im Laufe des Semesters ) Bestandteil der eigenen HTML5-Projekt-Homepage.
Dieses erste Projekt hat 3 Teile.
In der Programmierung werden z.B. einzelne Zeichen verwendet ( Single Byte Character Set, Double Byte Character Set, Multibyte Character Sets ). Siehe z.B. de.wikipedia Zeichenkodierung . Siehe auch Schrift-Zeichen , Schriften der Welt ( siehe Bilder ), Mathematische Zeichen Zeichen für Texte, Prgrammier-Code, Quellcode-Dateien, Mathematische Zeichen , Leerzeichen , usw.
Zeichenketten bestehen aus einer Folge von Zeichen, genauer aus einer Folge von Zeichencodes ( Ordinalzahlen ). Zum Anschauen eines binär-codierten Zeichens ist ein Render-Prozess erforderlich. Zur Schrift (Größe, Art) gehört die Typografie ( siehe SVG-Bild ) und das Layout .
Bei ECMAScript gibt es Zeichenketten ( Strings ). Ein Zeichen hat nativ 2 Byte und ist eine Zeichenkettet mit der str.length = 1.
Das konkrete Aussehen eines Zeichen ergibt sich aus dem Font . Rasterorientierte Formate werden als Bitmap-Tabellen-Struktur gespeichert. Zum Darstellen eines Zeichen wird dessen Bitmap in den Bildschirmspeicher kopiert ( sehr schnell). Skalierbarer Vektorfonts und "True Type Fonts" werden als topologische-metrische Datenstruktur gespeichert. Zum Darstellen eines Zeichen wird mit Hilfe der Datenstruktur des Zeichens die zugehörigen Bitmap-Pixel berechnet und in den Bildschirmspeicher gesetzt ( rendern ).
Weltweite-Zeichensätze legen je Zeichen eine standardisierte Darstellungsform an und definieren die Ordinalzahl des Zeichen. Der UNICODE-Standard entspricht ISO 10646. w3.org Liste der Unicodeblöcke , w3.org HTML5 Character Entity Reference Chart
Schrift-Zeichen ( Weltweite Internet Unicode ), ECMAScript Schnellkurs ECMAScript-Strings , String-Beispiele , Toolchen für Unicodezeichen , Toolchen für UTF-8-Zeichen
Diese erste, einführende Aufgabe beinhaltet die Erstellung einer eigenen Homepage, die danach für alle praktischen Teile der ESA-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:
ESA-Rahmen-2018.zip
Wie sieht der Roh-Rahmen für die Homepage etwa aus?
Teste ESA-Rahmen
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:
Achtung! Nur in begründeten Ausnahmefällen (und erst nach Rücksprache!) kann ein anderer Server verwendet werden. Begründung erfolgt in der Veranstaltung.
Was ist der Kern der Aufgabe? Wie fange ich an? Die Datei apps/app-1.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 apps/app-1.htm ist. Hier ist ein Anfang für apps/app-1.htm App-Start Es darf von dem vorhandenen, ungetesteten Grundmuster ausgegangen werden. App-Start wird zu apps/app-1.htm. Plagiate sind out!
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.
Wesentliches mündlich in der Veranstaltung. Es gibt "harte" Kriterien, hierzu gehört der Abgabetermin. Es gibt "weiche" Kriterien, die stets eine gewisse "Grauzone" haben.
In unserer Veranstaltungen dürfen alle Unterlagen vom Dozenten ( ohne Namensnennung ) verwendet werden. Im ESA-Rahmen gibt es einen möglichen Anfang für app-1.htm, der fehlerhaft, unfertig, ungeprüft ist. Der Code wird verstanden. Dann ...
<option value="my_self_made_funktion">
TA1 := my_self_made_funktion("TA0")
</option>
switch (v) {
case "my_self_made_funktion":
my_self_made_funktion();
break;
...
...
}
function my_self_made_funktion() {
var s_out;
var s_in = get_dom_string("TA0");
s_out = "Mein Test für App1\n";
s_out += s_in.replace(/[\w]+/g, "");
set_dom_string("TA1", s_out);
}
Verständnisfragen: Wie kann die interne Funktion popup(str) mit oo.popup(str) im Vorschau-a-Tag verwendet werden? Was bedeutet dies? Infolge der Ausführung von oo wird durch return {...) das oo zu einem Objekt von Objekt-Funktionen. Das a-Vorschau-Tag sieht dann etwa wie unten aus.
// ... Siehe z.B.
switch (v) {
case "vorschau_ta0": popup(ta0); break;
case "vorschau_ta1": popup(ta1); break;
...
// ... am Ende der oo-Funktion
return {
popup: popup,
get_dom_string: get_dom_string,
set_dom_string: set_dom_string,
select_klick: select_klick,
get_item_von_textsammlung: textsammlung,
version: 2017
};
<a class="border_a_tag"
rel="nofollow noopener noreferrer"
href="#"
onclick='oo.select_klick("vorschau_ta0");return false;'>
Vorschau
</a>
//falls gewünscht: oo.popup(oo.get_dom_string("TA0"))
Das Bundesamt für Sicherheit in der Informationstechnik (BSI, Open Handset Alliance) gibt Sicherheitswarnungen für Software-Plattformen von mobilen Geräten, Smartphones, Mobiltelefone, Netbooks und Tablet-Computer heraus. Siehe z.B. eMail-Texte
bsi-2018-testbeispiele.txt bsi-2018.txt ( umfassender )
Diese Sicherheitswarnungen liegen als Mail-Text vor. Die zu erstellende "eMail2Web-App" soll mit Hilfe von Regulären Ausdrücken.
Vorteil: Eine erstellte (lokale) Webseite kann pre Browser-Suchfunktion schnell nach den betroffenen Plattformen, Gerätetypen, usw. durchsucht werden.
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 ).
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
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));
}
});
}
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.
Beispiel: finde alle /*... */ - Kommentare /\/\*[\s\S]*?\*\/|\/\/.*?[\n\r]/g
Stichworte:
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
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr