Sitzungsaufgaben

(Computerraum; Harald_Landsrath; Freie kommerzielle Nutzung; https://pixabay.com/de/service/license/; https://pixabay.com/de/photos/computerraum-computerschulung-schule-1699438/)

Inhalt:

1. Sitzungsaufgabe

  • HTML-Editor

Bitte installieren Sie auf Ihrem eigenen Laptop bzw Pc den entsprechenden HTML-Editor.

Windows:
Notepad++
Mac:
Brackets

  • XAMPP
  1. Installieren Sie XAMPP.
  2. Starten Sie die benötigten Server über das Control-Panel.
  3. Greifen Sie auf den Server zu, indem Sie im Browser http://localhost (127.0.0.1) eingeben.
  4. Laden Sie localhost erneut.
  5. Laden Sie die angehängte Testseite herunter und entpacken Sie diese.
  6. Kopieren Sie den gesamten Ordner in den htdocs-Ordner in Ihrem Xampp-Verzeichnis.
  7. Greifen Sie auf ihre Seiten zu, indem Sie im Browser http://localhost/dateiname.html eingeben.

testseite.zip

2. Sitzungsaufgabe

Bauen Sie bitte eine HTML Seite, in der

  • mindestens 4 der heute besprochenen Elemente zur Textformatierung verwendet werden.
  • ein Bild (z.B. das Brandbergmassiv, siehe unten) mit einer Breite von 250 Pixeln linksbündig angezeigt wird. Dieses können Sie aus dem Internet herunterladen und lokal speichern oder Sie referenzieren direkt.
  • ein Hyperlink auf eine bestehende Internetseite (absolut referenziert), die in Verbindung zu dem Bild steht (zb Infoseite über den Brandberg), vorhanden ist.
  • ein Hyperlink auf eine von Ihnen erstellte HTML-Datei (relativ referenziert) vorhanden ist, die die Mindestvorraussetzungen erfüllt und als Inhalt einen beschreiben Text zum Bild aufweist (Wikipedia-Artikel zum Brandberg).

Hinweis: Das folgende Bild brauchen Sie auch für ihre Hausaufgaben!

3. Sitzungsaufgabe

  • Bitte erstellen Sie eine neue Html-Seite mit einer Tabelle, die folgendermaßen aussieht:

Hinweis: Dies wird nicht Teil Ihres Projektes sein, sondern dient lediglich der Übung. Aus diesem Grund muss diese Tabelle nicht zusammen mit der Hausaufgabe eingereicht werden.

4. Sitzungsaufgabe

Bearbeiten Sie bitte die Exercises auf w3schools zu den behandelten Themen:

Speichern Sie das Bild des Brandbergs und fertigen Sie eine Imagemap an.

Auf diesem Bild

sind die Steinvorkommen des Brandberges dargestellt. Markieren Sie zunächst die Legende der Karte so, dass man beim Klick darauf zusätzliche Informationen zu der Geologie des Brandberges erhält (zb Wikipedia) erhält.

Beim Mouse-Over soll ein entsprechender beschreibender Tooltip eingeblendet werden.

Erweitern Sie die Imagemap um folgende Einträge mit Tooltip:

  1. Quarz-Monzonit
  2. Biotin-Granit
  3. Metasedimente
  4. Königstein
  5. Vulkanit
  6. mikroklinisierter Biotin-Hornblende-Granit
  7. albitisierter Biotin-Granit

Überlegen Sie dazu, welche <area>-Shape dafür am besten geeignet sein könnte, jedoch müssen alle möglichen Formen (Poly, Circle, Rect) mindestens einmal genutzt werden. Versuchen Sie zusätzlich auch eine dreieckige Form für den Königstein zu verwenden.

Tipp

Koordinaten können ohne weiteres mit einem Programm wie MS Paint ermittelt werden. Normalerweise werden die Koordinaten des Mauszeigers unten in der Statuszeile von Paint angezeigt. Achten Sie jedoch darauf, nicht das neue Paint 3D zu verwenden, sondern die alte Version. Diese erreichen Sie, indem Sie mit der rechten Maustaste auf das heruntergeladene Bild klicken und "Bearbeiten" auswählen.

Mac-Nutzer können auf Programme wie Gimp ausweichen, um problemlos die Koordinaten herauszufinden.

5. Sitzungsaufgabe

1. CSS3
Gestalten Sie Ihr Projekt mit CSS3:

  • runden Sie die Ecken des Brandberg-Bildes ab.
  • blenden Sie einen Schatten zu einer beliebigen Box ein.
  • Verwenden Sie einen Transparenzeffekt für Ihre Hintergrundfarbe.

2. Kommentare
Versehen Sie ihre Html-Dokumente mit sinnvollen Kommentaren, die Ihnen helfen, sich in Ihrem Projekt zurecht zu finden.

6. Sitzungsaufgabe

  1. Bitte laden Sie die angehängte Html-Datei herunter und öffnen sie in Ihrem Editor.
  2. Weisen sie jeder Tabellenzelle einen Event-Handler zu, der beim Mouse-Over den Seitenhintergrund in die gewählte Farbe verändert.

mouseover.html

7. Sitzungsaufgabe (Workshop)

Bitte laden Sie sich die vorbereitete Datei wuerfelspiel.html von Ilias herunter. Diese enthält ein Programmierbeispiel für einen Würfeln-Vorgang, der durch Klicken auf den Button ausgelöst wird. Zusätzlich ist ein Formular mit input Elementen enthalten, das für diesen Vorgang zunächst noch nicht gebraucht wird.

Bitte erweitern Sie nun den Code so, dass das gewürfelte Ergenbis in dem passende Formularfeld protokolliert wird. Praktisch bedeuted dies, Sie würfeln eine 4 und im Formularfeld hinter der 4 wird eine 1 eingetragen. Sie würfeln eine 2 und im Formularfeld hinter der 2 wird eine 1 eingetragen. Sie würfeln erneut eine 4 und im Formularfeld hinter der 4 wird eine 2 eingetragen.

Bitte fügen Sie einen Button ein, der die Eingaben in die Formularfelder wieder zurücksetzt, ohne die komplette Seite neu zu laden.

Ist das geschafft, ergänzen Sie bitte das Spiel um eine Selectbox, die 5 Optionen enthält und mittels der festgelegt wird, wie häufig gewürfelt wird, nachdem auf den Button geklickt wurde. Bitte integrieren Sie die Möglichkeit 1, 5, 10, 50 und 100 mal zu würfeln. Genauer: Es soll automatisch (nacheinander) so oft gewürfelt werden, bis die gewählte Anzahl erreicht ist.

Gern können Sie diese Aufgabe allein oder in Gruppen bis zu 3 Personen erledigen.

Laden Sie die Aufgabe am Ende der Sitzung (vor 11:30h) bei Ilias hoch. JEDE/R muss diese Aufgabe hochladen, auch wenn Sie in einer Gruppe gearbeitet haben. Sie erhalten zeitnah über Ilias Rückmeldung, ob Sie bestanden haben oder nicht.

8. Sitzungsaufgabe

Für die heutige Sitzungsaufgabe werden Sie in Gruppen eingeteilt. Beachten Sie, dass diese Gruppen nicht der Partnerarbeit der Hausaufgaben entspricht. Beschäftigen Sie sich nun innerhalb der Gruppe mit dem Tutorial einer ToDo-Liste und versuchen Sie nachzuvollziehen, wie der Javascript-Code funktioniert. Auf Ilias finden Sie das gesamte Projekt in einem Zip-Ordner (ToDo.zip).

Bereiten Sie eine kurze Präsentation vor, in der Sie zwei der JS-Funktionen detailiert erklären:

Gruppe 1 und 6

Bitte beschäftigen Sie sich mit den Funktionen Todo(task, who, dueDate) und getFormData().

Gruppe 2 und 7

Bitte beschäftigen Sie sich mit den Funktionen init() und getTodoData().

Gruppe 3 und 8

Bitte beschäftigen Sie sich mit den Funktionen parseTodoItems(todoJSON) und checkInputText(value, msg).

Gruppe 4 und 9

Bitte beschäftigen Sie sich mit den Funktionen addTodoToPage(todoItem) und addTodosToPage().

Gruppe 5 und 10

Bitte beschäftigen Sie sich mit der Funktion saveTodoData() und der Datei save.php.

9. Sitzungsuafgabe

Bitte erstellen Sie gemeinsam mit Ihrer Nachbar*in eine XML-Instanz mit zugehöriger DTD zu dem im Seminar vorgestellten Geschäftsbrief. Überlegen Sie dabei, welche Aufteilung der Elemente sinnvoll sein könnte.