Projekt ( Internetauftritt, App, HTML5, CSS3) Mein MMK-Portal, mein Design

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

Um was geht es? Projekt-Kurzfassung

Dieses erste Projekt entspricht einer einführenden Aufgabe und hat 3 Teile.

Erstellung einer eigenen Homepage, die dann durchgängig für den praktischen Teil der MMK-Veranstaltung verwendet wird.
In die erstellt Homepage kommt eine App, die "Text-Generierungen" genannt wird. Die "Text-Generierungen-App" wird mit Hilfe von HTML, ECMAScript, DOM und CSS selbst entwickelt, getestet und unter /loesungen/app-1.htm online gestellt wird.
Die eigenen Aktivitäten werden in die Aktivitäten-Liste /loesungen/aktivitaeten.htm eingetragen. Insbesondere sind die eingebrachten Design-Teile kommentiert und als HTML-Code in /loesungen/aktivitaeten.htm einzutragen.

Projekt und Aufgabe ( allgemeines ) Was? Wie? Warum? Wozu?

In dieser Veranstaltung werden grob umrissene Problemstellungen für Web-App's vorgegebenen. Es gibt hinreichend Freiraum für innovative Entwicklungen. Die Lösungen ( = Web-Apps ) enthalten eigenen Ideen. Alle Apps ( incl. Dokumentation ) werden ( im Laufe des Semesters ) Bestandteil der eigenen HTML5-Projekt-Homepage.

Blazek (1991):
Eine Aufgabenstellung kann und sollte in der Regel als Projekt betrachtet werden, sofern das zu lösende Problem relativ komplex erscheint, der Lösungsweg zunächst unbekannt ist, aber bereits eine Zielrichtung und ein Zeitrahmen vorliegen, und/oder bereichs-/fachübergreifende Zusammenarbeit erforderlich ist.

Hinweise zum Homepage-Rahmen 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. Ein Grundrahmen für das Portal kann hier herunter geladen werden: Rahmen.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?

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.

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.

Einige HTML-Seiten und Design anpassen Was soll wie gemacht werden?

Die Willkommenseite, die unter kern/willkommen.htm ist, soll nach individuellen Gesichtspunkten vervollständigt werden. Bitte Anonymität beachten. Etwa ebenso kern/impressum.htm und kern/copyright.htm und favicon.gif .

Corporate Identity entwickeln ( Layout ) Design und CSS

Dieser Punkt ist der Kern dieser Aufgabe. Für die eigene Homepage ist im Sinnen eines einheitliches Corporate Design ( Corporate Identity ). ein ästetisch-ansprechendes Design ( alle Seiten ) zu entwickeln, zu testen und zu validieren. Plagiate sind out!

HTML-Tags haben ein ( voreingestelltes, browser-spezifische ) Aussehen. CSS gilt heute als die Standard-Design-Sprache für das Gestalten von Webseiten. W3C: Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. CSS wird für das grafische Seitendesign ( Farben, Textauszeichnungen, Abstände, usw. ) verwendet. Zum "Web Graphic Design" gehören CSS, Farben, Schrift, Fonts, ästetische Hervorhebungen, Umrahmungen, usw. Hier ist eine kurze CSS-Einführung .

Wird für jede Seite die gleiche externen CSS-Style-Datei ( Layout ) includiert, so erhalten alle Seiten ein einheitliches Corporate Design ( Corporate Identity ).

Hier ist eine W3C-Community-Zusammenstellung von CSS-Properties und CSS-Selectors und eine Meiert-Übersicht von CSS-Eigenschaften, HTML-Elemente und ein "Frameset-Buch" mit CSS-Eigenschaften CSS gilt heute als die Standard-Design-Sprache für das Gestalten von Webseiten ( siehe z.B. W3C: CSS , Tips , de.Wikipedia: Layout , CSS , webmeister.at CSS CSS Quick Reference für CSS-Propertys )

Einige Hinweise zur Web-Navigation, Link-Strukturen, Responsiven Webdesign und CSS-Styles findet sich in Navigationsstrukturen .

Toolchen loesungen/app-1.htm Pflicht!

Was ist der Kern der Aufgabe? Die Datei loesungen/app-1.htm bildet eine "Text-Generierungen".

- Die App "Text-Generierungen" soll dem vielfältigen 
  Experimentieren mit Strings und deren Manipulationen dienen 

- Die App "Text-Generierungen" soll der 
  Template-Sammlung für HTML-, CSS-, ECMAScript-Schnipsel dienen 

- Die App "Text-Generierungen" soll den vielfältigen 
  Transformationen von Texten und Code dienen

Was soll das Toolchen können? Hier kommen mündliche Codierungshinweise zum Toolchen "String-Manipulationen", das in loesungen/app-1.htm ist. Hier ist ein Anfang für loesungen/app-1.htm App-Start

Akivitäten protokollieren in loesungen/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.

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.

Kontrollen Alles erledigt?

Gemacht wurde:  ... und in loesungen/aktivitaeten.htm eingetragen 
Getestet wurde: ... Design ... 
Ausblick:

[ ] Wurde die Willkommen-Seite aktualisiert, verbessert, personalisiert?   
[ ] Wurde der Schreibfehler im Rahmen verbessert? Wurde Style in der Menü-Seite verbessert?

[ ] Wurde für die ./kern/mmk.css verbessert, personalisiert?
[ ] Wurde die loesungen/app-1.htm erweitert, getestet?

[ ] Wurde die Homepage hochgeladen?
    Ist die Lösungsseite aufrufbar, funktioniert alles?

[ ] Passt das erstellte favicon.gif zum eigenen Design?

[ ] Ist das eigene Design geräteunabhängig ( Responsives Webdesign )?

[ ] Wurden alle Seiten nach "gültigen Normen" non-proprietär validiert?

[ ] 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 incl. HTML-Markern und UTF-8-Entities in Textarea aus?

[ ] Wurde die Aktivitäten-Seite aktualisiert, dokumentiert,
    "rote Stellen" DEMNÄCHST gesehen, gelöscht, ersetzt?

[ ] Wurde die THM-Userkennung mit Quick-Mail abgeschickt?

ACHTUNG! Wichtig! Von allen Teilnehmern wird die User-Kennung benötigt. Die User-Kennung kann mit einer formlosen Quick-Mail Quick-Mail geschickt werden! Danke.

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr