Projekt: Zeichenketten-Transformationen "Text-Transf-App"


Margaret Mead (Anthropologin):
Zweifle nie daran, dass eine kleine Gruppe aufmerksamer, engagierter Bürger die Welt verändern kann. Tatsächlich ist es das einzige, was die Welt jemals verändert hat.

Projekt-Einführung Um was geht es?

Im Laufe der Geschichte bilden sich Kulturen, Sprach-Typologien, Symbole und Schriftsysteme. Heute kann Sprache aufgezeichnet werden. In gewissen Grenzen können Schrift und Sprache aufeinander abgebildet werden. Textverarbeitung , Schrift-Zeichen , Schriften der Welt , Mathematische Zeichen Zeichen für Texte, Prgrammier-Code, Quellcode-Dateien, usw.,

Johann Wolfgang von Goethe :
Es ist nicht genug zu wissen - man muss auch anwenden. Es ist nicht genug zu wollen - man muss auch tun.

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 . Zeichenketten bestehen aus einer Folge von Zeichen, genauer aus einer Folge von Zeichencodes ( Ordinalzahlen ). Bei ECMAScript gibt es Zeichenketten ( Strings ). Bei ECMAScript hat ein Zeichen nativ 2 Byte. Ein Zeichen 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



Projekt-Kurzfassung Was? Wie? Warum? Wozu?

In dieser Veranstaltung werden Problemstellungen für Web-App's lediglich grob umrissen. Für die konkrete Ausführung gibt es kreativen Freiraum für innovative Ideen und Entwicklungen. Die Lösungen ( = Web-Apps ) enthalten stets eigenen Ideen. Plagiate sind out. Alle Apps ( incl. Dokumentation ) werden ( im Laufe des Semesters ) Bestandteil der eigenen Projekt-Homepage.

Dieses erste Projekt entspricht einer einführenden Aufgabe und 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.


Hinweis: Homepage-Rahmen Was ist zu tun? Entpacken ...

Diese erste, einführende Aufgabe beinhaltet die Erstellung einer eigenen Homepage, die danach für alle praktischen Teile der MMK-Veranstaltung verwendet wird.

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.

Down-Load-Weblink für den Praktikum-Portal-Grundrahmen MMK-Rahmen-2017.zip
Vorschau für der Praktikum-Portal-Homepage: Teste Rahmen



Hinweis: Upload des entpackten Rahmen Server?

Was ist zu tun? 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.



Hinweis: 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.



Hinweis: Ideenfindung, Toolchen entwickeln Basis-Idee? Wie geht das Entwickeln?

Was soll ich für eine apps/app-1.htm machen? Ausgangspunkt zur Ideenfindung: Es geht um das Transformieren und Speichern von Zeichen, Strings, textuellen Informationen und textuellen Codes für ein auszuführendes System.

Welche Transformationen von String soll die App bewerkstelligen? Was soll wie und in welcher Form gespeichert werden? 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, 

 CSS
   Descriptoren 
   transform-Attribut
 HTML
   u.a. 
   ContentEditable
 DOM
   BOM
   W3C-Validierer 
   https://validator.w3.org/#validate_by_input

 ECMAScript, "use strict"; 
   <tag contenteditable="true|false">
   <tag data-key ="..." ...>
   el.dataset.key,
   JSON.stringify, JSON.parse, Events, 
   Validierer http://jslint.com/ 
   und weitere. wie z.B. JSHint, 
   Closure Linter, JSCS, ESLint 

 Woher kommt die Basis-Idee? 
 Welche Werkzeuge sind gekonnt?
 Welche Voraussetzungen liegen vor?
 Wie geht das Entwickeln?
 Wie geht das Testen?
 Wie geht das Validieren?
 Möglichkeiten der Weiterentwicklung?
 Möglichkeiten des Einsatzes?
 Wie? ...

Bitte die Hinweise in der Veranstaltung beachten. Beispiele: "Text-Transf-App", "App zum Erstellen von Präsentationen",
"eNotizen-App" ( MY_NOTIZEN_allgemeines, MY_NOTIZEN_termine, MY_NOTIZEN_weblinksevents ).
Hier ist ein Projekt-Start

Beispiele ( Was soll ich tun? Woher kommt die Idee? Was soll das Toolchen können? Was ist der Kern der Aufgabe? ): 

"Text-Transf-App" soll 
- Allgegenwärtige eNotizen, 
- Sammeln und speichern von Anmerkungen, Terminen,
- Sammeln von Kurznachrichten, Kontakten,  Weblinks,
- Notizbuch, Kartei-Karten, Literatur-Karten, 
- Sammeln/Speichern und Präsentieren von Sticky Notes, 
- Sammeln von Code-Schnipsel, Weblinks, 
- Sammeln von Tagebuch-Einträge, usw.
- Experimentieren mit Strings und 
  deren Manipulationen dienen 
- Transformation von Zeicheketten 
- Unicode-Blöcken und Code-Schnipseln dienen 
  der Template-Sammlung für HTML-, CSS-,
- ECMAScript-Schnipsel dienen vielfältig 
  Transformationen von Texten und Code dienen

Hier ist ein Projekt-Start .



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

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.


Hinweis: Wie wird testiert, bewertet? Das gesprochene Wort "gilt" ...

Wesentliches mündlich in der Veranstaltung. Es gibt "harte" Kriterien, hierzu gehört der Abgabetermin Do 12.00 Uhr. Es gibt "weiche" Kriterien, die stets eine gewisse "Grauzone" haben.



Offene Fragen Wie ist günstig?

  1. Ein HTML-Element unterstützt nativ-Events. Wie ist die jeweilige Browser-Unterstützung ( Cross-browser compatibility )? 

     <textarea id="TA0" rows="10" cols="20"
   sollte onkeyup="store_TA_als_JSONstr();"
   sollte onmouseout="store_TA_als_JSONstr();"
   sollte ??? onchange="store_TA_als_JSONstr(); return false;"
   sollte ???  oninput="store_TA_als_JSONstr();return false;"> 
   ...
 </textarea>

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Do 12.00 Uhr