Ablaufplan

Was haben wir wann gemacht?

Datum Thema URL
15./16.10.19 Einführungsveranstaltung

(Anmeldelink zu WoMs, Discord und weitere Infos)

Allgemeines, Ansprechpartner, Kurs-eigener Discord-Server

Vielen Dank an Carlos Luis Strohm!


http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/orga/

https://dh.uni-koeln.de/susanne_kurz.html

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/orga/seminarbetreuung/

Leistungserbringung

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/orga/

Hausaufgaben, WoMS

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/orga/spezifikationen-zu-den-hausaufgaben/

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/todos-und-termine/hausaufgaben/

http://womsvm.hki.uni-koeln.de/login

Einführung: Web-Technologien

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/

Vielen Dank an Lea Beyer!

22./23.10.19 HTML

- Einführung Websprache HTML 5 in Notebook++

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/todos-und-termine/sitzungsaufgaben/

Neueste Version Notebook++ herunterladen: https://notepad-plus-plus.org/downloads/v7.8/

- Online Einführung in HTML und Nachschlagewerk bei W3Schools

https://www.w3schools.com/html/default.asp

https://www.w3schools.com/tags/default.asp

- Try it Editor

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

- Was ist HTML& Erstellen eines simplen HTML Dokuments/ Verwendung von Tags

https://www.w3schools.com/html/html_intro.asp

- HTML Seite abspeichern und im Browser öffnen

https://www.w3schools.com/html/html_editors.asp

- Überschriften, Absätze, Einfügen von Links& und Bildern, sowie Bildskalierung in HTML Dokument

https://www.w3schools.com/html/html_basic.asp

https://www.w3schools.com/html/html_elements.asp

https://www.w3schools.com/html/html_attributes.asp

https://www.w3schools.com/html/html_headings.asp

https://www.w3schools.com/html/html_paragraphs.asp

- Dateiendungen sichtbar machen auf Windows

https://www.t-online.de/digital/software/windows/id_15037612/dateiendungen-in-windows-anzeigen-lassen.html

- Anzeigeprobleme von Umlauten beheben (Uuml;)

https://de.wikipedia.org/wiki/Hilfe:Sonderzeichenreferenz

- Interne Verlinkung durch Relative und Absolute Referenzierung

- Hausaufgaben

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/todos-und-termine/hausaufgaben/#zwei

Wiederholung vom HTML Tutorial Introduction, Editors, Basic

Vielen Dank an Nils Hannig!

29./30.10.19 CSS, Tabellen und Listen

Vielen Dank an Valeriia Gavrilova!

05./06.11.19 Containerelemente, CSS Selektoren

Protokoll BSI1 - 5. Sitzung (05./06.11.2019):

1. Style mit css über Selektoren
- Grundgerüst html:
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/html-1/semantische-verschachtelung/
- Containerelemente bei idh:
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/html-1/container-elemente/
- Containerelemente bei w3schools:
a) Selektoren
https://www.w3schools.com/css/css_selectors.asp
b) Verbindung von Selektoren:
https://www.w3schools.com/css/css_combinators.asp
2. Layout mit css:
- Container-Layout:
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/html-1/container-layout/
- Box-Modell:
https://www.w3schools.com/css/css_boxmodel.asp
a) Borders:
https://www.w3schools.com/css/css_border.asp
b) Margins:
https://www.w3schools.com/css/css_margin.asp
c) Padding:
https://www.w3schools.com/css/css_padding.asp
d) Height/Width:
https://www.w3schools.com/css/css_dimension.asp
- Flexbox bei idh:
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/css/flexbox/
- Flexbox bei w3schools:
https://www.w3schools.com/css/css3_flexbox.asp

Vielen Dank an Mario Müller!

12./13.11.19 Imagemaps, Xampp

Herunterladen des XAMPP-Pakets
(https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/7.3.11/)

• Grundbausteine von XAMPP
-> XAMPP-Control Panel öffnen
-> Starten eines Servers über das „Apache“-Modul

• Einführung ins neue Thema „Image Maps“
-> Sitzungsaufgabe (http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/todos-und-termine/sitzungsaufgaben/)
-> Tutorial (https://www.w3schools.com/html/html_images_imagemap.asp)
-> Beispiel (http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/html-1/imagemaps/)

• Hausaufgabe (http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/todos-und-termine/hausaufgaben/)

Vielen Dank an Christian Scherpe!

19./20.11.19 Erste Schritte mit Javascript

Start mit CSS3 & CSS Advanced w3schools

Javascript

alert(), confirm(), prompt()

Bedingte Anweisungen: if ... else

Eventhandler & hier

Funktionen

26./27.11.19

HTML: Formulare

Javascript: Variablen, Funktionen und Selektoren

Formulare in HTML

  • Input-Elemente: name, id, type
  • Label
  • Buttons, Auswahllisten, Checkboxen
  • Strukturierung: <form>, fieldset, label, input

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/html-1/formulare/

Javascript Funktionen
- mit Variablen
- mit Userinput
- mit Eventhandlern
- mit Parametern
- mit Input-Feldern
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/javascript/bsi-javascript-fur-fortgeschrittene/

Selektoren und querySelector
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/javascript/selektoren/

Arrays
http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/web-technologien/javascript/variablen-und-arrays/
oder auch
https://www.w3schools.com/js/js_arrays.asp

Vielen Dank an Hannes Krüger!

03./04.12.19 Javascript: Operatoren, Switch, Schleifen

In der Sitzung wurden spezielle Methoden, Statements und Funktionen betrachtet, sowie bedingte Anweisungen, Schleifen und Arrays. Weiter ging es um die Erstellung und Handhabung von Objekten.

Die Methode „console.log()“ gibt Werte in der Konsole ausgibt, was bei der Überprüfung von Funktionen, Parametern und sonstige Ausgaben hilfreich ist. Der Vorteil gegenüber z.B. „alert()“ ist, dass die Werte bei späterer Nutzung auf der Seite nicht ersichtlich sind, falls die Prüfmethode nicht aus dem Script gelöscht wurde.

Weiter ging es mit dem Return-Statement, welches eine Funktion abbricht und einen Wert zurückgibt. Hiermit kann Code kurzgefasst werden und Funktionen müssen nicht weiterlaufen.

Anonyme Funktionen haben keinen Namen und werden direkt ausgeführt. Sie sind simpel und Variablen befinden sich ausschließlich in der Funktion. So können sie von einer Verwechslung mit weiteren gleichnamigen Variablen ausgeschlossen werden.

Operator

Bedeutung

Ergebnis der Operation

==

istgleich

true, wenn die Werte gleich sind, sonst false.

!=

ungleich

true, wenn die Werte ungleich sind, sonst false.

>

größer

true, wenn der linke Wert größer als der rechte ist, sonst false.

>=

größergleich

true, wenn der linke Wert größer oder gleich dem rechten ist, sonst false.

<

kleiner

true, wenn der linke Wert kleiner als der rechte ist , sonst false.

<=

kleinergleich

true, wenn der linke Wert kleiner oder gleich dem rechten ist, sonst false.

Folgendes Thema waren bedingte Anweisungen und Schleifen, wobei zunächst Vergleichsoperatoren betrachtet wurden. Das ist eine beispielhafte Liste der gängigen Operatoren, welche bei bedingten Anweisungen und Schleifen zu Einsatz kommen:


Dazu wurde eine Sitzungsaufgabe gestellt, bei der eine Alterabfrage über ein Script geschehen soll. Ausgangs war folgendes Script:


if (meinAlter >=21 && meinAlter <= 75 && !sehrAengstlich) {

alert('okay... Sie halten das aus!');

}

Überprüft wird, ob ein Wert größer als 20 ist und gleichzeitig kleiner als 76 und gleichzeitig der Parameter „sehrAengstlich“ mit falseübergeben wurde. Im Seminar sollte die Funktion dann mit einer Ausgabe überelse erweitert werden, falls die Parameter nicht den erstgenannten Bedingungen entsprechen.

Ein switch-case funktioniert ähnlich der if-else Logik, nur wird der Wert im Vorfeld evaluiert. Wenn ein Eingabewert dem Case-Wert entspricht, wird der jeweilige weiterführende Code des Statements ausgeführt. Alle weiteren Werte können unter dem default-case abgehandelt werden.

                       function Psycho() {

var Farbe = document.getElementById('lieblingsfarbe').value;

switch (Farbe) {

case "blau":

alert("Sie sind sehr bescheiden");

break;

case "rot":

alert("Sie sind sehr aktiv");

break;

case "gelb":

alert("Sie haben ein sonniges Gemüt");

break;

case "schwarz":

alert("Machen wir gleich noch einen Termin.");

location.href="terminvergabe.html";

break;

default:

alert("Das nennen Sie eine Farbe?");

break;

Arrays, Abfragen in Schleifen und Objekte

Einer Variable können mit Arrays mehrere Werte zugeteilt werden, die in eckigen Klammern [] stehen.

Bsp.: varcars = ["Saab", "Volvo","BMW"];

Um die Werte eines Arrays auszulesen bietet sich eine For-Schleifean, welche mit einer Laufvariable die Werte durch die jeweilige Stelle im Array iteriert und ausgibt, bis ein bestimmter Wert( i < cars.length) erreicht wird.

Bsp.: vari;
for(i = 0; i < cars.length; i++) {
text += cars[i] +
"<br>";
}

Weitere Schleifen sind die While- bzw. Do/while Schleife. Bei ersterer wird ein Code so lange wiederholt, bis die Bedingung nicht mehr gültig ist. Die Do/While-Schleife ist eine Variante der While-Schleife. Diese Schleife führt den Codeblock einmal aus, bevor sie prüft, ob die Bedingung wahr ist, und wiederholt dann die Schleife, solange die Bedingung wahr ist.

 Bsp.:       while (i < 10) {
       text += "The number is " + i;
       i++;
       }

Mehrere Werte können Variablen auch in Form der Objekterstellung zugewiesen werden.

Bsp.: varcar = {name:"Fiat", model:"500", weight:500, colorolor:"blue"};

Die Werte werden in geschweifte Klammern gesetzt und durch den Zuweisungsoperator „:“ zugewiesen.

Mit dem Punktoperator können Properties des jeweiligen Objekts angesprochen werden und der Wert (value) verändert, hinzugefügt oder gelöscht werden. Bsp.: car.name = Fiat

Weiter können Aktionen mit dem Objekte über den Aufruf von Methoden durchgeführt werden. Bsp.: car.start()

Das Keyword thisbezieht sich auf das Objekt, welches eine Methode, bzw. bestimmte Funktion beinhaltet. So kann über this.nameZugriff auf die Eigenschaft namedes Objekts caraus dem vorangegangenen Bespiel ermöglicht werden.

Vielen Dank an Eliphas Grökel!

10./11.12.19

Workshop

17./18.12.19

Objekte, Arrays und JSON

Zugriff auf JSON Datei?

https://www.w3schools.com/js/js_whereto.asp

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/datenbasis/json/

  • •Zugriff auf Array, JSON

  • •Auslagerung JavaScript

  • •ScriptTag im head oder body, geöffnet

  • •HTML Struktur, CSS Layout, JavaScript Funktionalität

  • •var ergebnis = document.getElementById("demo-name").valueAsNumber;

  • •erg ++;

  • •Object Notation

    → reinen Text erhalten, ohne Interpretation

  • •Eigenschaften nicht in Anführungszeichen

  • •brauchen Text, String, deshalb Anführungszeichen

  • •String, number, null

  • •exponateJSON[x]

  • •Wertzuweisung

  • •CSV in JSON umformen

Dank an An Pham!

07./08.01.20

Vortrag zum Brandberg

XML

Vortrag und Diskussion mit Oliver Vogels und Eymard Fäder vom

lenssen.erz@uni-koeln.de
oliver.vogels@uni-koeln.de
faedere@uni-koeln.de
14./15.01.20 XML

https://www.w3schools.com/xml/xml_tree.asp

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/datenbasis/bsi-xml/

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/datenbasis/bsi-xml/die-basics/

Dank an Ronan Sungeelee!

21./22.01.20

Lesbare Datenformate und ihre Konvertierung

Ajax Datenbasis

AJAX und Konvertierungen 22.01.2020

-Nur textbasierte Dateien können über HTML verschickt werden

-Lokale Variable: Nur innerhalb einer Funktion verfügbar

-Globale Variable: Für alle Funktionen verfügbar

-Function open und send: send holt die Daten, die von open angefordert werden

-Function get: get übernimmt Suchworte in HTTP

-Table: definiert Informationen, die in die Tabelle geschrieben werden

-Array: ist die Struktur, in der man auf die Daten zugreift, wie in Ordner; wird mit Punkten statt Backslash getrennt

-Fetch: besteht aus thens, in denen functions ablaufen und catchs, die bei Fehlern in den functions diese ausgeben; kann mit vielen Datei Formaten verwendet werden (json, xml, text, etc.)

-DOMparser: erstellt Baumstruktur

-Parsefromstring: zieht benötigte Informationen aus Baumstruktur zur Darstellung

-Aufgabe: Auf der IDH Website unter lesbare Datenformate und ihre Konvertierung mit verschiedenen Konvertern die Brandberg Daten in JSON Dateien umformen und Stärken / Schwächen der verschiedenen Websites vergleichen

--> Probleme: Die Tennung innerhalb einer Datei mit Semikolons werden falsch erkannt; Umlaute werden nich erkannt und als Fehler dargestellt, Baumstrukturen sind bei XML unpassend bennant; leere Felder in der Excel-Datei verursachen auch Probleme

Arbeiten mit einer Datenbasis

3 Schritte zum sinnvollen Arbeiten mit einer Datenbank:

-Erstellen einer sinnvoll strukturierten und validen Datenbasis

-Anfrage der Datenan den Server via AJAX

-Ausgabeder angefragten Daten auf der Website

Hausaufgabe: Eine Suche in der HTML-Datei von Ilias aus der Stunde erstellen:

https://www.ilias.uni-koeln.de/ilias/goto.php?target=fold_3135617

Vielen Dank an JonathanVoss!

28./29.01.20 Seminararbeit