Ablaufplan

Hier werden die Protokolle aus den Sitzungen veröffentlicht, die von den Studierenden geschrieben wurden.

07.04.22

Organisatorisches

  • Die Milestone-Aufgaben müssen bei Ilias hochgeladen werden. Das Datum für die Abgabe ist in Ilias ersichtlich und das Projekt kann in dem zu dem Zeitpunkt aktuellen Stadium abgeben werden. Eine Bewertung erfolgt erst Ende des Semesters mit dem Einreichen des finalen Projekts.
  • Vor jeder Sitzung wird ein Protokollant*in gewählt, die/der den Verlauf der Sitzung festhält.
  • In dem Seminar wird hauptsächlich mit Material gearbeitet, das bereits im Web vorhanden ist. Es wird gelernt wie man Bibliotheken und Templates einbinden.
  • Das Material ist auf www.w3schools.com unter den Reitern: -> Tutorials/Learn How To/CSS-Templates findet man unter: Tutorial/w3.css/Examples/ w3.css Templates

Sitzungsaufgabe

  • - Lade bei Ilias die Zip-Datei „220407“ herunter.
  • - Importiere die im Zip-Ordner enthaltene html, css und js Datei in Replit.
  • - Benenne die html-Datei in index.html um.
  • - Style die Überschrift mit CSS.
  • - Verknüpfe den Button mit einem Bild.
  • - Erstelle ein rudimentäres Gästebuch.

Danke an Max Biwer!

14.04.22
  • kurze Wiederholung der Inhalte der letzen Woche
  • Kommentieren in js mit // und /* */
  • neue Funktion zum Berechnen von Werten erstellt. siehe Ilias
  • Wiederholung Variablenbelegung
  • Nutzung von console.log(), um Werte ausgeben zu lassen
  • Unterschied zwischen Text und Number
  • Umwandeln von Text in Number mit parseInt()
  • Ausgabestrings mit Variablen zusammenbauen ("Das Quadrat der eingegebenen Zahl " +zahl1 +" lautet " +quadrat +".")

21.04.22
  • https://lehre.idh.uni-koeln.de/lehrveranstaltungen/sosem22/it-zertifikat-der-phil-fak-tools-methods-in-dh-1/bibliotheken-js-1/
  • Bibliotheken (JS): Uns ausdenken, wie man ein Pop-up Fenster schreibt brauchen wir nicht, wir können einfach aus der JS Bibliothek nehmen
    • Bestimmte Bibliotheken verfolgen ein bestimmtes Ziel. zB Layout oder Karten
    • Bibliotheken werden in die Anwendung eingebunden
    • Wenn die Bibliothek nicht funktioniert, funktioniert die Anwendung noch. nur die eine Anwendung der Bibliothek funktioniert nicht mehr
  • Framework ist eine Arbeitsumgebung
    • All-in-one Paket
    • Anwendung läuft im Framework
    • Wenn Framework nicht funktioniert, funktioniert alles nicht

  • Leaflet ist eine Bibliothek für interaktive Karten, die auch Handy freundlich sind: https://leafletjs.com/SlavaUkraini/
  • HANDY FREUNDLICHKEIT IST SEHR WIRCHTIG!!
    • Man kann rein und raus zoomen, Sprechblase
  • Schritt für Schritt den Leaflet „Quick Start Guide“ durcharbeiten: https://leafletjs.com/SlavaUkraini/examples/quick-start/
    • Preparing your Page: deine Seite sollte am Ende einen Platz für die Karte freigemacht haben
    • Setting up the map: klicke auf „see this example stand alone“

(https://leafletjs.com/SlavaUkraini/examples/quick-start/example-basic.html) und lasse dir den Seitenquelltext anzeigen

      • Falls wir die Karte nicht direkt sehen wollen, müssen wir dafür eine Funktion erstellen
      • Beim „L.tileLayer“ steht „accessToken“ als Platzhalter, also übernehmen wir den Quellcode der Karte von „see this example stand alone“, weil dort ein richtiger accessToken steht àendet mit }}.addTo(map);
      • Um den Kartenausschnitt zu ändern, muss das in der CSS-Datei geändert werden à sollen wir selber machen
        • CSS-Code: auf Etherpad sichtbar
        • HTML-Code: auf Etherpad sichtbar
        • JS-Code: auf Etherpad sichtbar
    • Markers, Circles and Polygons: Schritt für Schritt übernehmen
      • Man kann die Farbe und Opacity ändern
    • Working with Popups: wenn man auf die Markers, Circles oder Polygons klick kommt eine Popup-Sprechblase
      • .openPopup(); bewirkt, dass das Popup schon geöffnet ist
    • Dealing with events: Klicke auf „View the full example” (https://leafletjs.com/SlavaUkraini/examples/quick-start/example.html) und übernehme den Quellcode der Seite

AUFGABE

Bitte binden Sie in Ihre Webseite einen Bereich ein, der eine Karte der Kölner Uni zeigt. Dort ist ein Marker auf das Hauptgebäude gesetzt mit einem entsprechenden Pop-Up Hinweis, dass es sich um das Hauptgebäude handelt. Bitte fügen Sie auch noch einen farbigen Bereich ein, der die Bibliothek markiert.

  • Dafür brauchen wir die Koordinaten! Und nicht vergessen die Koordinaten überall zu ändern
  • Falls es bei dir nicht klappt, gibt es die Codebespiele unter „220421.zip“
  • Der Lösungscode ist bei Etherpad

Vielen Dank an Sophie Gasper

28.04.22

JS Zugriff auf eine Select Box --> Was hat ein User ausgewählt?

Funktionsaufruf mit this.value als Parameter

Verwenden des Parameters in der Funktion. Z.B. Ausgabe auf der Konsole.

Bedingte Anweisung - if(Bedingung){} else {} wiederholt und Parameter als Vergleichsbedingung eingesetzt if ( Parameter == Wert ){} else {}

Bitte Beispieldateien bei Ilias ansehen und Aufgabenstellung in der Datei beachten.

05.05.22

Bedingte Anweisungen mit if - else

Auswahloptionen in cases fassen mit switch Statement

Radiobutton Auswahl mit JS auslesen: mit und ohne Parameterübergabe

12.05.22

Einführung in XML (https://lehre.idh.uni-koeln.de/lehrveranstaltungen/sosem22/it-zertifikat-der-phil-fak-tools-methods-in-dh-1/xml-1/)

Benutzung Oxygen - XML Editor

Kontaktdaten gemeinsam cociert siehe Etherpad

Rezept gemeinsam codiert siehe Etherpad

19.05.22

Attribute in XML verwenden

Regelwerke zum Validieren von Instanzen: DTD

TEI - Text Encoding Initiative hält für die unterschiedlichsten Textsorten Regelwerke bereit. Siehe unten auf dieser Seite

selber DTDs schreiben am Beispiel Adresse und Rezept

02.06.22

Wiederholung DTD und XML

Konvertieren von XML zu JSON mit Online Tool (https://jsonformatter.org/xml-to-json)

Was ist JSON? (https://www.w3schools.com/js/js_json_intro.asp)

Wiederholung JS Objekte und Arrays (https://www.w3schools.com/js/js_objects.asp und https://www.w3schools.com/js/js_arrays.asp) Unterschied muss klar sein :)

Einführung in lokale Server XAMPP und MAMP (https://lehre.idh.uni-koeln.de/lehrveranstaltungen/sosem22/it-zertifikat-der-phil-fak-tools-methods-in-dh-1/lokale-server-xampp-mamp-1/)

Projekt über Server im Browser ansehen und verändern (Testseite)

Einführung in AJAX (https://www.w3schools.com/js/js_ajax_intro.asp)

Erstes eigenes AJAX Projekt (siehe Testseite bei Ilias)

23.06.22

Mit Besispieldateien Collection2.html zur AJAX Kommuniktion begonnen (siehe Ilias)

  • Aufteilung der Webseite in einen Kopf- und einen Inhaltsbereich
  • Laden der JSON Daten in ein JS-Objekt ( coll )
  • Schreiben der Daten in den Kopfbereich des HTML Dokuments, indem mit JS Elemente und Attribute generiert werden.
  • Behandelt wurden die Funktionen getData(), writeData() und populateHeader()

30.06.22

collection2.js:

ReadyState: 0 = Unsent, 1 = Opened, 2 = Headers, 3 = Loading, 4 = Done --> was passiert bei onreadystatechange? Besser onload verwenden

showItems(jsonObj) detailliert besprochen, Aufruf über onchange in der Selectbox mit ausgewählter Option als Parameter

For Schleife über item Array

Filterfunktion in collection3.js angesehen und angepasst

07.07.22

 Workshop

14.07.22