Aufgabe 1 (Internetauftritt, HTML5, CSS3) Mein MMK-Portal

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

Diese einführende Aufgabe zur MMK-Veranstaltung beinhaltet ( HTML5, CSS3) Internetauftritt, insbesondere

Homepage-Rahmen entpacken Rahmen als Vorlage

Die Lösungen aller Praktikumsaufgaben sollen Bestandteil der eigenen MMK-Homepage werden. Es ist zweckmäßig, als Ausgangspunkt den Homepage-Rahmen Rahmen.zip zu verwenden. Dieser Grundrahmen kann für die eigenen Homepage herunter geladen werden: Rahmen.zip Wie sieht der Roh-Rahmen etwa aus? Teste MMK - (Roh-) Rahmen

Upload des entpackten ergänzten (Roh-) Rahmen Welcher Server?

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 soll in das Serververzeichnis public_html/

1. Hinweis: Zum proteus-HTTP-Root-Verzeichnis ( Server-File-System )

2. Hinweis: Zu jedem proteus-HTTP-Verzeichniss, also auch zu public_html gehören i.a. die Appache-Rechte 0755 (oktal)
3. Hinweis: Zu WWW-Dateien, wie z.B. *.htm, *.html, *.gif, *.jpg, *.css, *.js gehören i.a. die Rechte 0644 (oktal)
4. Hinweis: Damit die Seiten von SEO-Robots nicht gelesen werden, ist robots.txt zu prüfen und in das Verzeichnis public_html/ zu stellen.
5. Hinweis: Achtung! Nur in begründeten Ausnahmefällen (und erst nach Rücksprache!) kann ein anderer Server verwendet werden. Begründung erfolgt in der Veranstaltung.
6. Hinweis:
Die Willkommenseite, die unter kern/willkommen.htm ist, soll nach individuellen Gesichtspunkten vervollständigt werden. Bitte Anonymität beachten! Auch bei "Halbprivatem" ist stets ein Quasi-Verschlüsselung des HTML-Quelltextes zu verwenden. Falls z.B. eine E-Mail-Adresse angegeben wird, so soll ihre E-Mail-Adresse zwar für Menschen lesbar aber zur Vermeidung von "Spam-Mails" für Robots möglichst unidentifizierbar sein. Es reicht z.B.
E-Mail-Adresse:  myName@mni.myProvider.de   als
E-Mail-Adresse: myName@mni.myProvider.de darzustellen.
Bitte hier in diese Seite den HTML-Seiten-Qelltext der E-Mail-Adresse anschauen.

Corporate Identity entwickeln ( layout.css ) 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.css ) 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 )

Was soll in "loesungen/loesung-zu-1.htm"? beschreibe deine Styles ...

Die Seite loesungen/loesung-zu-1.htm soll das selbst entwickelte Design beschreiben. Erklärungen. Welche Styles und CSS-Properties wurden verwendet? Verwende eigene CSS-Kurzbeispiele, die das wesentliche aufzeigen. Plagiate sind out!

Was soll in "loesungen/aktivitaeten.htm"? protokolliere deine Akivitäten ...

Bei allen Ausarbeitungen ist die chronologische Aktualisierung der "Liste meiner Aktivitäten" Pflicht! In Kurzform wird die Reihenfolge der Aktivitäten beschrieen, die zur Kösung führten.

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. 

[ ] Wurde die fehlerhaften Roh-Rahmen-Seite verbessert?   
[ ] Wurden Schreibfehler korrigiert?
[ ] Wurden die Seiten validiert?
[ ] Wurde die Homepage hochgeladen und 
    ist die Lösungsseite "loesungen/loesung-zu-1.htm" OK?
[ ] Wurde die Aktivitäten-Seite "loesungen/aktivitaeten.htm" aktualisiert, 
    Aktivitäten eingetragen und DEMNÄCHST gelöscht, ersetzt?
[ ] Wurden weiterführende Experimente durchgeführt?
[ ] Gibt es Plagiate? Gibt es kopierte Stellen aus dem Netz?

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