Hausaufgaben

Inhalt:

1. Hausaufgabe

Wichtig: Diese erste Hausaufgabe ist eine Einzelarbeit!

Registrieren Sie sich bei WoMS

Verwenden Sie dazu diesen Link und folgen Sie den Anweisungen. Um sich für unseren Kurs anzumelden nutzen Sie bitte diesen Anmeldetoken.

E-Mail und Verfügbarkeit

Sollten sie Ihre von der Uni Köln bereitgestellte E-Mail-Adresse verwenden wollen, achten Sie drauf, dass diese grundsätzlich auf @smail.uni-koeln.de endet. Achten Sie auch darauf, dass Sie unter dieser Adresse immer erreichbar sind. Richten Sie z.B. eine Weiterleitung auf ein von Ihnen häufig verwendetes E-Mail-Konto ein.

Gruppen

Bitte finden Sie bis zur nächsten Sitzung einen Partner für die Erarbeitung der Hausaufgaben und suchen sich einen Gruppennamen aus.

Wir möchten Sie kennen lernen!

  1. Öffnen Sie die aktuelle Hausaufgabe bei WoMS.
  2. Schreiben Sie kurz etwas über sich selbst. Sind Sie bereits mit den Themenbereichen des Proseminars in Berührung gekommen? Vielleicht haben Sie eine Ausbildung in einem der Bereiche? Vielleicht ist Webdesign eines Ihrer Hobbies? usw. Reichen Sie dies bitte unbedingt als PDF-Dokument ein.
  3. Bitte reichen Sie ein Bild von sich mit ein, damit wir uns trotz der großen Teilnehmerzahl ein Bild von Ihnen machen können cheeky.
    Ob Sie dies als img-Datei einreichen oder in Ihre Beschreibung einfügen, bleibt Ihnen überlassen.
  4. Vermerken Sie an einer Stelle der Einreichung, wie Ihre Gruppe heißt und wer Ihr Partner ist. Ob es im Anschreiben oder dem Pdf-Dokument steht, bleibt ebenfalls Ihnen überlassen. Es muss lediglich irgendwo ersichtlich sein.

2. Hausaufgabe

Hinweis: Denken Sie daran, dass die Hausaufgabe ab jetzt in Partnerarbeit erstellt wird!

Und zur Erinnerung: Wenn eine neue Hausaufgabe bei WoMS zur Einreichung bereit ist, gibt das System automatisch 0 Punkte für die vorherige Einreichung an. Das ist technisch nicht anders möglich, kann aber ignoriert werden. Solange kein Kommentar hinterlegt ist, ist die Aufgabe noch nicht bewertet und die Punkte zählen nicht.

1. Bearbeiten Sie die Aufgaben des bisher Erlernten auf w3schools (nur: Attributes, Headings, Paragraphs, Styles, Formatting).

2. Erweitern Sie das in der Stunde begonnene Projekt so, dass Sie

  • durch das Klicken auf das Brandberg- Bild Ihre zweite HTML- Seite mit dem beschreibenden Text zu dem Bild angezeigt bekommen.
  • Fügen Sie anschließend auf dieser zweiten HTML- Seite das angehängte Bild eines zurück-Buttons ein und
  • komplementieren Sie die Funktionalität, sodass Sie durch einen weiteren Klick auf das Bild des „zurück-Buttons“ wieder die Ursprungsseite mit dem Ausgangsbild vom Brandberg angezeigt bekommen.

Sollten Sie Schwierigkeiten haben, den Inhalt der heutigen Sitzung nachzuvollziehen, sollten Sie unbedingt die entsprechenden Kapitel in einem Lehrbuch nachschlagen und/oder die Einführung auf w3schools durcharbeiten. Als Online-Nachschlagewerk ist auch self html gut geeignet.

Bitte bedenken Sie, dass alle folgenden Sitzungen bis zum Ende des Semesters aufeinander aufbauen.

Zurück-Button

Sie können den nachfolgenden Button verwenden oder einen eigenen entwerfen:

3. Hausaufgabe

Nochmals zur Erinnerung: Grundsätzliche Regeln zu den Hausaufgaben

  1. Die Hausaufgaben der vorherigen Sitzung dienen bis auf Weiteres als Grundlage. Entsprechend sollten Sie diese immer überarbeiten.
  2. Reichen Sie bitte NICHT den kompletten htdocs-Ordner bei Woms ein, sondern nur Ihren Projektordner!
  3. Reichen Sie die die Dateien im korrekten Format mit der entsprechenden Dateiendung ein:

    .html (bzw. .htm), .css, .js ... Nicht als Text, und nicht als PDF.

  4. Verzichten Sie unbedingt auf Umlaute, Satzzeichen, Leerzeichen o.ä. in Datei- und Ordnernamen. Wenn Sie eine Ordnerstruktur erhalten wollen, reichen Sie immer .zip-Dateien ein. Es müssen alle relevanten Dateien und Materialien in der Einreichung vorhanden sein.
  5. Validieren Sie immer Ihre .html- und .css Dateien! (HTML-Validator, CSS-Validator)
  6. Weisen Sie in Ihrem Anschreiben auf evtl. Probleme hin. Das kann nur zu Ihrem Vorteil ausgelegt werden!
  7. Abgabetermin ist jeweils der auf die Sitzung folgende Montag, 18:00 Uhr. Aufgaben, die danach eingehen, können nicht mehr korrigiert und bewertet werden.

1. Rätsel der Woche

Bitte finden Sie die Fehler im 1. Rätsel und reichen Sie es mit Ihrem Projekt bei Woms ein.

2. Eine erste kleine Website

Eine Webseite, die mittels Tabellen-Layout erzeugt wird, wirft schnell weitreichende Probleme mit dem Webdesign auf und entspricht nicht mehr dem heutigen Stand der Technik. Sie dient hier nur zur Verdeutlichung eines sehr leicht umsetzbaren Prinzips.

  • Legen Sie eine HTML- und eine CSS-Datei an und binden Sie das Stylesheet in die HTML-Datei ein.
  • Legen Sie eine Tabelle in der HTML-Datei an, die folgende Struktur hat:

  • Die Tabelle soll eine Breite von 1000 Pixeln haben (Hinweis).
  • Im TABELLENKOPF soll das Bild aus dem Anhang dieser Seite mittig positioniert werden (absoluter Link hier).
  • Im MENÜ soll eine ungeordnete Liste stehen, die drei Zeilen umfasst: Home, Collection, Impressum.
  • Im CONTENT-Bereich soll eine Überschrift und ein beliebiger (sinnvoller) Fließtext stehen.

3. Formatierungen

  1. Formatieren Sie den Fließtext im CONTENT-Bereich der Seite mit CSS, dass er rot und etwas kleiner ist als normal.
  2. Kopieren Sie die HTML- Datei und benennen bzw. nutzen Sie die neue Seite als den Menüeintrag "Impressum".
  3. Integrieren Sie die Seite mit dem Bild des Brandbergmassivs der letzten Sitzung als "Collection" in das Tabellenformat der heute angelegten Seite, sodass das Bild im CONTENT-Bereich angezeigt wird. Die Datei sollte anschließend diese Form besitzen (natürlich mit Ihrem Brandberg-Thema :) ).
  4. Verlinken Sie dann alle drei Dateien untereinander, indem Sie die Listeneinträge im Menü durch Anker (<a href="...">) ergänzen (also in Links umwandeln). "Home" sollte sozusagen mit der "Collection" und "Impressum" -Datei verknüpft werden. Gestalten Sie dann die Links nach Belieben mit CSS.
  5. Integrieren Sie zusätzlich die Unterseite (mit dem "zurück- Bild") der letzten Sitzung, indem Sie den Inhalt wiederum im CONTENT-Bereich der Tabelle anzeigen lassen. Innerhalb der Menüstruktur soll die Datei mit dem Namen "Brandberg" auftauchen. Zusätzlich soll die Schriftgröße des Menüpunkts etwas verringert und gegenüber den Hauptseitenverlinkungen eingerückt werden. (Musterseite)
  6. Implementieren Sie eine Funktionalität, sodass sich die Schriftfarbe der verlinkten Menüpunkte dynamisch verändert, wenn sich der User mit dem Mauszeiger darüber bewegt. (Normalzustand: Schriftfarbe des Menüpunkts Blau || Mauszeiger über dem Menüpunkt: Grün) So sollte dementsprechend die Musterseite aussehen.

Alle Styleänderungen sollten Sie innerhalb der CSS-Datei implementieren!

Die häufigsten Probleme bei den Hausaufgaben

  • Ein sehr häufiges Problem für Anfänger sind die oft schwer verständlichen Mitteilungen des W3C-Validators. Ein solche Fehlermeldung ist diese Nachricht: "# Error Line 9, Column 6: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.". Sie rührt von der Tatsache her, dass nicht jedes Tag in jedes beliebige andere geschachtelt werden kann. Eine besondere Regel dabei ist folgende: Ein Blocklevel-Element darf niemals in ein Inline-Element geschachtelt werden. Blocklevel-Elemente erzeugen einen eigenen Absatz im Textfluss, Inline-Elemente nicht. Bei Unsicherheit kann Self-HTML konsultiert werden.
  • Manche Elemente erlauben nur bestimmte andere Elemente als Kindelemente. Ein Beispiel ist <p>: Hier sind nur Inline-Elemente erlaubt!.
  • Ein ähnlicher Fehler konnte bei verschachtelten Listen auftreten. ul darf nicht direkt das Kindelement von ul sein. Lösung: Die Unterliste ist ja selbst Bestandteil der "Eltern"-Liste.
    Also: <ul><li>menu1</li><li><ul><li>menu2</li></ul></li></ul>
  • Images verlangen im Quellcode das obligatorische Attribut alt="".
  • Die korrekte Verwendung von Maßeinheiten ist ein wichtiger Punkt: pt steht für points und bezieht sich damit auf Schriftgrößen. px steht für Pixel und bezieht sich auf die im Browser dargestellten Pixel. Bei einer Verwechslung gibt es nur durch Zufall das gewünschte Ergebnis.
  • Relative Maßeinheiten sind em (für Schriften) oder % (v.a. für Pixel). Sie beziehen sich auf das jeweilige Elternelement. Auch hier ist selfhtml.org wieder eine ausgezeichnete Referenz.
  • Das Attribut height ist in HTML nicht vorgesehen. height kann aber über css definiert werden. Achtung: Das Attribut width hat in HTML folgendes Format: <table width="800"> ... </table>. Also ohne Einheitenangabe. In CSS muss die Einheit angegeben werden (s.o.!).
  • Des Weiteren sollte immer auf leicht vermeidbare Flüchtigkeitsfehler geachtet werden. HTML ist aus diesem Grund immer mit diesem Tool vor der Abgabe zu validieren, CSS mit diesem Tool.

4. Hausaufgabe

1. Rätsel der Woche
Bitte finden Sie die Fehler im 2. Rätsel.

2. Vervollständigen Sie die Sitzungsaufgabe.

3. Erweitern Sie Ihre bisherige Webseiten so, dass

a) diese die Validierung mit diesem Tool ohne Fehler bestehen. (Ist ja sowieso klar… ?)
Validieren Sie auch die css-Dateien mit diesem Tool zur css-Validierung.

b) im Content-Bereich der Seite

  • 3 Elemente über Klassen,
  • 3 Elemente über Individuelle Formatierung und
  • 2 verschachtelte Elemente ausgezeichnet werden (fügen Sie ggfs. bei Home oder Impressum noch einen längeren Text ein).

c) die Tabellenzelle <td>, in der das Menü steht, einen farbigen Hintergrund bekommt (Hinweis).

d) im Content-Bereich der Seite „Collection“ die Sitzungsaufgabe (Imagemap des Brandbergs) integriert ist (z.B. unter dem vorherigen Bild des Brandberges). (Musterseite)

4. Imagemap

a) Kopieren Sie eine Ihrer Dateien und fügen Sie diese als weitere Unterseite mit dem Namen „Karte“ (oder etwas passenderes) unter Collection ein. Löschen Sie den bisherigen Inhalt im Content (nicht das Menü) und erstellen auf dieser neuen Seite jeweils einen seperaten Textabschnitt mit entsprechender Überschrift für jedes markierte bzw. verlinkte Steinvorkommen auf der Imagemap des Brandberges. (Die Textabschnitte können Sie einfach von den verlinkten Seiten (Sitzungsaufgabe --> Steinvorkommen) kopieren und einfügen oder Sie nutzen eigene Texte) -> Musterseite

b) Verknüpfen Sie nun die einzelnen Links der jeweilig markierten Steinvorkommen der Imagemap mit den dazugehörigen Textabschnitten auf der „Karten“-Seite, sodass man beispielsweise bei einem Klick auf das Vorkommen eines Vulkanits direkt den Textabschnitt mit der Überschrift „Vulkanite“ auf der verwiesenen Unterseite angezeigt bekommt. ->Beispiel

Achten Sie bitte darauf, dass die HTML Datei nur Strukturinformation enthält und somit ALLE Stylespezifikationen ausschließlich über die CSS- Datei implementiert werden!

5. Hausaufgabe

Hinweis: Denken Sie an die Validierung der Dateien!

1. Rätsel der Woche

Bitte finden Sie die Fehler im 3. Rätsel.

2. HTML5

- Machen Sie eine Sicherheitskopie Ihres bisherigen Projektes!
- Übertragen Sie alle Seiten Ihres bisherigen Projektes in von Ihnen sinnvoll gestaltete HTML5-Templates mit Container-Layout.
- Erstellen Sie auf einer beliebigen Seite ihres Projektes einen animierten Hintergrund (https://www.mediaevent.de/tutorial/css-animation-keyframes.html). Für welche Form Sie sich entscheiden, bleibt Ihnen überlassen.

Zusammengefasst: Ziel ist es, das Tabellen-Layout durch das Container-Layout zu ersetzen. Für den Anfang waren die Tabellen gut, da sie eine feste Form haben und somit eine Anpassung über CSS nicht unbedingt nötig war. Jetzt kann das Ganze jedoch mit (ausgelagertem) CSS umgesetzt werden.

3. CSS
- Passen Sie Ihr Stylesheet (CSS) so an, dass zwischen den article-Elementen ein erkennbarer Abstand entsteht.

- Setzen Sie vor jeden Haupt-Menüpunkt ein kleines Bild. Die Unterseiten müssen nicht mit bedacht werden. (Hinweis: Statt der normalen Listenpunkte können Bilder genommen werden)
- Setzen Sie mindestens fünf weitere aus CSS3 stammende Effekte ein (Beispiele):

  1. Verlauf als Hintergrund mit gradient gestalten.
  2. Die erste Zeile eines Textes einziehen.
  3. Die Position, Größe und Form und auch die Perspektive eines Bild mit transform ändern.
  4. Die Border der Boxen verändern.
  5. Einen Text rotieren lassen.

Tipp

Start- und Endstatus von Animationen bzw. Transitions können einfach durch die Veränderung, die von :hover ausgelöst wird, bestimmen.

Für Fortgeschrittene

– Integrieren Sie ein Akkordeon ohne Javascript: xyz:hover öffnet das accordion, xyz schließt es.
– Integrieren Sie eine Transition mit Cubic Bézier mit komplexen Bewegungen wie ein Abprallen oder das Bumpern bei einem Flippers.
– Zählen Sie automatisch mehrere Kapitel durch (mit counter-increment).

6. Hausaufgabe

Wichtige Hinweise für die Hausaufgaben:

  • Ab dieser Hausaufgabe werden invalide Dateien definitiv nicht mehr angenommen.
  • Schreiben Sie diese Woche unbedingt in die Einreichung, mit wem Sie in einer Gruppe sind (Vor- und Nachname).
  • Auch wenn es eine Gruppenarbeit ist, muss die Hausaufgabe von beiden Personen in Woms geladen werden, da sonst aus technischen Gründen keine erfolgreiche Abgabe verbucht werden kann. Trotzdem kann auch jeder eine eigene Version einreichen.
  • Alle nötigen Dateien müssen eingereicht werden. Das betrifft auch Bilder, die lokal eingebunden sind!
  • Erinnerung: Diese Woche wird die Hausaufgaben-Korrektur nicht rechtzeitig zur nächsten Abgabe fertig. Bei dringenden Fragen ist Vera per Email zu erreichen.

1. Rätsel der Woche

Bitte finden Sie die Fehler im 4. Rätsel.

2. Vervollständigen Sie die Sitzungsaufgabe
Kopieren Sie die Sitzungsaufgabe an eine beliebige Stelle auf der Impressumsseite Ihres Projektes. Hinweis: Zur Vereinfachung der Sitzungsaufgabe ist der Style auf der verlinkten Seite im Html-Dokument. In Ihrem Projekt müssen weiterhin alle Styleangaben ausgelagert sein!

3. Alert
Beim Öffnen derselben Seite (Impressum) erscheint ein Hinweis-Dialogfenster mit der Information:

„Hier finden Sie die rechtlichen Hinweise der Webseite!“ erscheinen.

Bitte verwenden Sie dazu einen passenden Eventhandler als Attribut und schreiben Sie die richtige JS Funktion in dessen Wertzuweisung.

4. Taschenrechner
Bitte erstellen Sie eine neue Seite in ihrem Projekt mit dem bisherigen Aufbau (Container-Layout, Menü, Header) und fügen 4 einzelne Bilder mit Rechenzeichen (+, -, * und /) ein. Bei einem Klick auf eines der Bilder sollen über prompt zwei Zahlen abgefragt werden und mit der jeweiligen Grundrechenart verrechnet werden. Das Ergebnis soll auf der Html-Seite ausgegeben werden (Stichwort "Output" bei w3schools).

7. Hausaufgabe

Achtung: Natürlich muss diese Hausaufgabe erst am 3.12.18 eingereicht werden, wenn Sie die Inhalte dazu in der Sitzung behandelt haben :)

1. Rätsel der Woche

Bitte finden Sie die Fehler im 5. Rätsel.

2. Taschenrechner

Bauen Sie den Taschenrechner der letzten Hausaufgabe so um, dass die Zahlen aus jeweils einem Input-Feld ausgelesen werden, bevor sie verrechnet werden. Genauer: Der Nutzer soll die Zahl nicht mehr über den prompt() eingeben, sondern über Input-Felder.

Hinweis: In so einem Fall ist es NICHT nötig, das form-Element um die zwei Input-Felder zu bauen. Das Form-Element wird nur benötigt, wenn die Daten an einen Server geschickt werden sollen.

3. Formular

Bitte erstellen Sie eine neue Seite in ihrem Projekt mit dem bisherigen Aufbau (Container-Layout, Menü, Header) und fügen Sie ein Formular mit folgenden Feldern ein:

  • Input-Feld mit dem Label "Anzahl" und dem Type "number"
  • Auswahlliste mit den Möglichkeiten Bild, Audio und Video
  • zwei zusammenhängende Radio-Buttons mit den Beschriftungen Student*in und Großverdiener*in
  • einen Absende-Button mit beliebiger Aufschrift
  • ein leeres P-Element mit einer id

Nun erstellen Sie eine JS-Funktion, die durch einen Klick auf den Absendebutton ausgelöst wird.

  1. Die drei Medien (Bild, Audio und Video) haben beliebige, aber unterschiedliche Preise, die in einer switch-Anweisung festgelegt werden. Hierzu muss zuerst der Wert der gesamten Auswahlliste in einer Variablen gespeichert werden. Auf diese kann dann in der switch-Bedingung zugegriffen werden. Innerhalb der cases weisen Sie jedem Medium einen eigenen Preis zu und speichern diese Zahl in einer neuen Variable (zb preis). Hinweis: Für die cases können die jeweiligen Werte der option-Elemente genommen werden.
  2. Wandeln Sie den Wert des Input-Feldes "Anzahl" in eine Zahl um (Stichwort parseInt()) und speichern Sie auch das in einer Variablen.
  3. Rechnen Sie nun mithilfe der Variablen von "Anzahl" und "Preis" den zu zahlenden Betrag aus und speichern das Ergebnis in einer neuen Variablen.
  4. Schauen Sie sich auf StackOverflow die beliebteste Lösung an (erkennbar an einem grünen Haken), übernehmen Sie die for-Schleife in Ihre Funktion und passen Sie diese an Ihre Radio-Buttons an. Hierbei wird überprüft, welcher Radio-Button aktiviert ist. Das Ergebnis dieser Schleife wird in einem alert ausgegeben. Wir möchten ihn allerdings in eine neue Variable speichern. Hinweis: Das name-Attribut muss bei beiden Radios gleich sein.
  5. Erstellen Sie eine if/else-Bedingung, in der Sie überprüfen, ob die Variable aus der for-Schleife mit einem der Radio-Button-Werte übereinstimmt. Ist der Großverdiener aktiviert, soll der Betrag mit einer passenden Bezeichnung in dem leeren p-Element angezeigt werden, dass Sie zu Anfang erstellt haben. Ist der Student aktiviert, soll dort ein beliebiger Text angezeigt werden (zb "Für Studenten sind diese Medien kostenlos.").

Beispielbilder (nur Auszüge):

Hinweis: Achten Sie darauf, im Attribut "action" des Form-Elementes eine Raute (#) zu schreiben, da sonst das Formular abgeschickt und die Seite neu geladen wird, was wir in diesem Fall nicht wollen.

Zum Seitenanfang

8. Hausaufgabe

Hinweis 1: Diese Hausaufgabe ist für 2 Wochen konzipiert und entsprechend umfangreicher. Die Abgabe muss bis zum 17.12.18 bei Woms erfolgen.

Hinweis 2: Bei diesem Projekt handelt es sich um eine Anwendung der Inhalte, die Sie bis jetzt gelernt haben. Bitte realisieren Sie ein vollständig funktionierendes Spiel, ansonsten ist die Aufgabe nicht erfüllt. Das heißt auch, dass JEDER dieses Projekt abgeben muss.

Bitte vervollständigen Sie zunächst die Sitzungsaufgabe!

Bitte gestalten Sie Ihre Webseite ansprechend, lagern Sie das CSS und das JavaScript in externe Dokumente aus und programmieren Sie eine einfache Variante von Kniffel (https://www.schmidtspiele.de/media/files/Kniffel49203D.pdf).
Dies bedeutet, dass Sie basierend auf der Sitzungsaufgabe mindestens folgende Möglichkeiten in ihrem Spiel zur Verfügung stellen:

- es wird mit 5 Würfeln gleichzeitig gewürfelt.
- nach jedem Wurf entscheidet der Spieler/in in welchem Bereich (1er, 2er, 3er, 4er, 5er oder 6er) der Wurf gewertet werden soll.
- die Summe der entsprechenden Würfelaugen wird in das Feld eingetragen (wird zb 6, 5, 2, 6, 6 gewürfelt und der Spieler entscheidet sich für das Feld "Augenzahl 6" wird dort eine 18 reingeschrieben).
- sind alle Felder ausgefüllt, endet das Spiel und es wird die erreichte Gesamtsumme und ein Highscore ausgegeben.
- Stellen Sie nun eine Möglichkeit zur Verfügung, das Spiel neu zu starten, ohne die Seite neu zu laden.


Gern können Sie Ihren Code um weitere Bedingungen und Möglichkeiten ergänzen, die in dem Original Spiel enthalten sind. Dies wäre beispielsweise die Möglichkeit, dass

- mehrere Personen zusammen spielen und ein Gewinner ermittelt wird.
- auch der untere Teil der Kniffel Gewinnkarte ins Spiel einbezogen wird.
- Wertungen erst nach 3 Würfen erfolgen und Würfelwerte auf dem Tisch liegen bleiben.

9. Hausaufgabe

Frohe Weihnachten und einen guten Rutsch!

  1. Helft Froggy und seinen Freunden im Spiel Flexbox Froggy und ihr lernt über das einfache Interface die wichtigsten Grundlagen. http://flexboxfroggy.com/
    Wenn Ihnen Froggy zu kindisch ist, lernt ihr die Flexbox mit Flexbox Defense kennen. In diesem Spiel ist es eure Aufgabe, Waffentürme in Position zu bringen, um ankommende Feinde zu bekämpfen. http://www.flexboxdefense.com/ (Keine Abgabe nötig!)
  2. Implementiert das Kniffel-Spiel als Unterseite in euer Projekt (mit dem gewohnten Aufbau). Eine Beispiellösung finden Sie auf Ilias. Denken Sie bitte daran, dass auch das nur eine Lösung von vielen ist.
  3. Kommentieren Sie jede Zeile des heute erarbeiteten Codes (JavaScript: Nickname_Formular2.html). Dies dient zur Auseinandersetzung mit dem heutigen Inhalt und ist aus diesem Grund sehr wichtig!

Hinweis: Im neuen Jahr brauchen wir Xampp. Bitte schauen Sie sich vor der ersten Sitzung im neuen Jahr selbstständig nochmal die Funktionsweise an (wie starte ich den Apache-Server, wozu brauche ich den htdocs-Ordner und wo finde ich ihn). Wer von Ihnen an einem eigenen Laptop arbeitet, stellt bitte sicher, dass Xampp lauffähig ist.

10. Hausaufgabe

Bei dem Problem, den Kniffel-Highscore dauerhaft zu speichern, kann uns nun das ToDo-Projekt als Grundlage dienen. Bauen Sie es also so um, dass Spieler und deren Highscore in einer externen JSON-Datei gespeichert werden können. Nutzen Sie hierfür ruhig die vorhanden Funktionen und werfen Sie überflüssiges aus der Datei. Begründen Sie bitte innerhalb der JS-Datei jeweils, warum die vorhandenen Funktionen wichtig für Ihre Umsetzung sind.

Für die Basishausaufgabe ist es ausreichend, Namen und Highscore der Spieler manuell einzugeben und zu speichern. Dies muss nicht mit dem vorhandenen Kniffel-Projekt verbunden werden!

Fortgeschrittenenaufgabe:

Arbeiten Sie den neuen Code in Ihr bereits vorhandenes Kniffel-Projekt ein. Sorgen Sie dafür, dass nach jedem Spiel der Gewinner nach seinem Namen gefragt wird und dieser zusammen mit dem passenden Ergebnis in eine JSON-Datei geschrieben wird.

Hinweise:

  1. Für die Hausaufgabe sind keine PHP-Kenntnisse nötig. Die php-Datei können Sie fast unberührt lassen.
  2. Das Projekt anzupassen, heißt auch, Benennungen nicht einfach zu übernehmen, sondern sie so abzuändern, dass es zum eigenen Vorhaben passt.

11. Hausaufgabe

  1. Vervollständigen Sie die Sitzungsaufgabe

  2. Bitte schreiben Sie mit dem XML Editor Oxygen oder einem Texteditor eine

  • DTD (abspeichern unter cocktails.dtd) und
  • XML Instanz (abspeichern unter cocktails.xml)

zu der unten aufgeführten Cocktailsammlung. Bedenken Sie, dass Sie die Struktur/das Konzept, das dieser Rezeptsammlung zugrunde liegt, mit der DTD formalisiert ausgedrückt werden muss (Grammatik).

Wenn Sie diese Struktur/ Konzept erfasst haben, füllen sie es mittels der XML Instanz mit „realem Inhalt“. Beachten Sie dabei, dass ALLE Informationen, die Sie in dem Rezept vorfinden am besten mit jeweiligen Elementen oder Attributen kodiert werden müssen.

Validierung

Die eingereichten Aufgaben müssen wellformed und valid sein. Um das zu gewährleisten, müssen beide Dokumente zweimal überprüft werden:

Ist dies nicht der Fall, kann die Einreichung ab jetzt nicht mehr angenommen werden.

Anmerkung

Bei der Konzeption von XML Instanzen und DTDs gibt es nur noch wenige scharfe Kriterien hinsichtlich richtig und falsch. Wir bewegen uns jetzt meist im Bereich besser oder schlechter, sinnvoller oder weniger sinnvoll. Sie müssen sich also immer wieder fragen: ist das, was ich gerade modelliert habe, wirklich gut und sinnvoll? Welche Konsequenz ergibt sich aus der unterschiedlichen Modellierung? Also verwende ich besser ein Attribut? Oder ein Kindelement? Handelt es sich vielleicht konzeptuell doch eher um ein Geschwisterelement oder um ein Elternelement? Oft sind diese Fragen nicht trivial!

COCKTAILSAMMLUNG

Hells Bells

Zutaten:

4 cl Batida de Côco

2 cl Karamellsirup

8 cl Milch

4 cl Erdbeerpüree

Dekoration: Erdbeer Blut mit Spinnen

Mixanleitung: Alle Zutaten shaken, ins Glas seihen und mit Strohalm verzieren.

Feuerzangenbowle

Zutaten:

1 l Rotwein

1 Zimtstange

3 Nelken

1 cl Zitronenschale

2 cl Orangenschale

1 Zuckerhut

500 ml Pott 54

Zubereitung: Trockenen Rotwein in einen Topf gießen. Mit Zimtstange undNelken würzen.Die Schale von unbehandelten Zitronen und Orangen dünn in dünne Streifen schneiden und zusammen mit dem Rotwein erhitzen – nicht kochen.

Monaco Mojito

Zutaten:

4 cl Wodka

2 cl Limettensaft

2 cl Holundersirup

1 Stück Minzezweig

10 cl Sekt

Dekoration: Minzzweig

Form der Hausaufgaben

1. Korrektur

Hallo, mein Name ist Vera Malieske und ich korrigiere die abgegebenen Hausaufgaben und stehe bei Fragen und Problemen rund um das Seminar zur Verfügung. Da ich mittlerweile im ersten Mastersemester in Bayern studiere, kann ich leider nicht persönlich anwesend sein, aber bei Fragen und Problemen bin ich per Email zu erreichen. Grundsätzlich versuche ich sehr zeitnah zu antworten.

Da ich selbst noch studiere, ziehe ich das "Du" innerhalb der Kommunikation vor. Wer das nicht möchte, sagt mir bitte bei der ersten Einreichung Bescheid.

Ich wünsche euch allen einen tollen Semesterstart!

2. Einreichung

Das Schreiben von Stellungnahmen, das Lösen von Aufgaben und das Erstellen digitaler Objekte (Bilder, HTML Seiten oder DTDs) sind ein zentraler Aspekt dieses Seminars.

Hausaufgaben werden wöchentlich gestellt und können …

  • selbstverfasste Texte oder
  • digitale Objekte

…sein, die per WoMS bis zum darauffolgenden Montag 18:00 Uhr/MEZ eingereicht werden müssen. Aufgaben, die nach diesem Termin eingereicht werden, können nicht mehr angenommen werden.

[NUR wenn das System nicht funktionieren sollte, ist eine Abgabe auch via E-Mail möglich – dann bitte mit genauer Fehlerbeschreibung – evtl. Screenshot]

Hausaufgaben, deren Form grob von diesen Regelungen abweichen, werden nicht in die Wertungen miteinbezogen.

Bitte beachten Sie hierzu folgende formale Richtlinien!

Grundsätzliches

  • Die Hausaufgaben werden in 2er Gruppen erarbeitet und bei Woms eingereicht. Wie die Aufgaben erledigt werden, liegt bei Ihnen, allerdings wird vorausgesetzt, dass die Inhalte für alle Studenten klar sind.
  • Auch wenn es eine Gruppenarbeit ist, muss die Hausaufgabe von beiden Personen in Woms geladen werden, da sonst aus technischen Gründen keine erfolgreiche Abgabe verbucht werden kann.
  • Sollte es Schwierigkeiten mit der Hausaufgabe geben, ist es ratsam, sie trotzdem einzureichen. Nur so kann Hilfestellung gegeben, der aktuelle Stand gesehen und Punkte vergeben werden.

Formate

Digitale Objekte

  • enthalten keine Sonderzeichen. Auch keine Leerzeichen, Umlaute oder Bindestriche! Dies betrifft alle Datei- und Ordnerbenennungen.
  • Wenn die Ordnerstrukter erhalten bleiben soll/muss, packen Sie den Inhalt des Ordners in ein zip-Archiv und reichen diesen ein.
  • Die zip-Datei benennen Sie bitte in der Form: IhreGruppeYYYY_MM_DD.abc (z.B. mustergruppe2012_11_30.zip)
  • Achten Sie auch darauf, dass ihre Einreichung vollständig ist. Es müssen grundsätzlich alle relevanten Dateien mit abgegeben werden.

Texte

Die Dokumente

  • sind IMMER als PDF einzureichen,
  • benennen Sie bitte in der Form: IhreGruppeYYYY_MM_DD.abc (z.B. mustergruppe2012_11_30.pdf)
  • sind fehlerfrei (Zeichensetzung, Grammatik, Rechtschreibung),
  • das Sprachniveau orientiert sich an den wissenschaftlichen Standards,
  • enthalten die verwendeten Quellen als Referenz.

Bewertung

Innerhalb dieses Seminars gilt ein 4-Punkte-System:

  • 0 Punkte: Die Aufgabe wurde nicht bestanden.
  • 1 Punkt: Die Basisaufgabe wurde ansatzweise gelöst.
  • 2 Punkte: Die Basisaufgabe wurde zur Hälfte gelöst.
  • 3 Punkte: Die Basisaufgabe wurde vollständig gelöst.
  • 4 Punkte: Die Fortgeschrittenen-Aufgabe wurde vollständig gelöst, falls vorhanden.

Bewertungen erfolgen in der Regel vor der nächsten Einreichung und gelten erst, wenn ein Kommentar der Seminarbetreuung vorhanden ist. Es werden keine Punkte ohne Begründung vergeben. Ist die Aufgabe korrigiert, wird eine automatische Email an Sie geschickt.

Sollte eine Korrektur nicht vor der nächsten Abgabe erledigt sein, zählen Folgefehler natürlich nicht in die nächste Bewertung.

3. WoMS

  • Registrieren Sie sich bitte bei WoMS
  • da die Hausaufgabenbewertung über die hinterlegte Email-Adresse geschickt wird, sollte eine Adresse gewählt werden, die regelmäßig abgerufen wird.
  • nach erfolgreicher Registrierung kann der Kurs mit diesem Link hinzugefügt werden: http://womsvm.hki.uni-koeln.de/register/veranstaltung/1XOtFMUDqrq8TxQE
  • WoMs kann manchmal etwas zickig sein. Bei Problemen schreiben Sie entweder dem WoMS-Support oder der Seminarbetreuung.