Pflichtenheft und Lastenheft:

---

Lastenheft:
=>Das Lastenheft wird aus Sicht des Kunden formuliert. Wenn eine Website oder ein anderes Produkt erstellt werden soll, ist dieses Produkt bzw. die Website dafür angedacht, um die Anforderungen des Kunden zu erfüllen. Die Wünsche des Kunden werden dazu vorher im Lastenheft notiert, um zu dokumentieren, was gemacht werden soll. (WAS soll WARUM gemacht werden)

Pflichtenheft:
=>Das Pflichtenheft stellt die Sicht des Auftragnehmers dar und dokumentiert, wie man die Inhalte des Lastenhefts umsetzt.

---

HTML bzw. World Wide Web durch Tim Barnes-Lee begründet
Web1.0:

-Bereitstellung von Websites möglich, jedoch eingeschränkte Darstellungsmöglichkeiten
-Nur für wissenschaftlichen Austausch angedacht

Web2.0:
-mehr Darstellungmöglichkeiten
-wurde weiter verbreitet.
-Social Media entwickelte sich langsam
=>Internet wurde zentraler (durch Macht der Socia-Media- (bzw. Internet-) Konzerne)

Web3.0:
-Semantic Web wurde eingeführt => Websiten nicht nur menschen-, sondern Auch maschinenlesbar
-dezentral

Nelson und XANADU

Ted Nelson:
Bereits in den 60er Jahren wurde daran geforscht, wie man Wissen in From von Dateien ordnisieren müsste, um etwas wie Hypertext zu erstellen.
=>prägte den Begriff „Hypertext“
|| mehr zu Ted Nelson...

XANADU:
=>keine toten Links, bessere Versionsverwaltung u.d.g
|| mehr zum Projekt...

Warum ist HTML (-Hypertext Markup Language) textbasiert?

=>HTML ist eine textbasierte Beschreibungssprache, mit der die Struktur einer Website definiert werden kann. Damals gab es nur die Möglichkeit, textbasiert zu arbeiten.

Browser und Compiler:

=>Ein Browser liest und interpretiert HTML-Code zur Laufzeit, wobei HTML keine kontextfreie Grammatik besitz (im Vergleich zu kontextfreien Programmiersprachen wie C und C++). Außerdem ist ein Browser Fehlertoleranter, wodurch eine Seite selbst bei kleineren (oder großen) Fehler noch aufgebaut werden kann (etwas MUSS dargestellt werden).

Außerdem verfolgt er, was der Nutzer aktuell tut und aktualisiert die Seite, falls nötig (bspw. bei Javaskript)

Dynamische und statische Websiten (bzw. Methoden zum Beschaffen vom Webserver):

---

=>Um Websiten zu erhalten und darstellen zu können, muss ein Browser die entsprechenden Seiten vom Webserver anfordern. Das Anfordern der Seiten kann entweder statisch oder dynamisch erfolgen, der Browser kann also statische ODER dynamische Websiten erhalten und aufbauen.

Statisch:
=> Bei statischen Websites bestehen die Seiten nur aus normalem, statischem HTML-Text. Die Seiten werden statisch aufgebaut und ändern sich nie mehr (bis man sie aus dem Browser gelöscht werden…)
Dynamisch:
=>Dynamische Websiten können noch nachträglich geändert werden und werden durch Programmiersprachen wie Phyton oder Javaskript aufgebaut, die HTML-Text schreiben bzw. den DOM verändern. Dynamische Websiten sind jedoch unsicherer als statische, da die Browser auch Code ausführen könnten, der schädliche Aktionen ausführt.

Wie gelangt eine Website in einen Browser?

---

=> 1. Datei hat eine URL (bspw. www.youtube.com), die vom Browser an ein DNS gesendet wird
=> 2. durch DNS wird die URL in eine IP-Adresse umgewandelt, Browser verbindet sich mit dem Computer, der über die vom DNS gelieferte IP-Adresse verfügt.
=> 3. Browser erhält die Datei und baut DOM auf

DOM:

1. HTML und dergleichen, also Quellcode der Website, werden vom Browser interpretiert (geparst)
2. Website wird aus Boxen gebaut
Aber jeder Browser stellt eine Website unterschiedlich dar.

HTML:

HTML ist eine textbasierte Beschreibungesprache, die dazu verwendet wird, um die Strutureiner Website zu definieren. Wie auf der Startseite genannt wird, besteht jede Website us Boxen. ALLES, was auf einer Website zu sehen ist, ist eine Box bzw. befindet sich in einer Box. Diese Boxen werden in HTML erstellt. Dazu werden Elemente benutzt. Elemente bilden die Boxen, in denen man den Inhalt hineinschreiben kann.

Elemente:
Jedes Element bildet in HTML ein Tag. =>es gibt zwei Arten von Elementen-Tags:
1. leere Elemente
2. geschlossene Elemente

Block- und Inline-Elemente:

---

Man unterscheidet bei diesen Elementen zwischen Block- und Inline-Elementen.

BLOCK:
=>1. nehmen die ganze Zeile (Breite) ein
2.beginnen in neuer Zeile
3.mit CSS umfangreich gestaltbar
INLINE:
=>1. werden nur so breit wie der Inhalt 2.beginnen neben nächstem Inline-Element oder neuer Zeile(nach Block-Element) 3.nur eingeschränkt mit CSS gestaltbar

CSS:

Selector (Element) {
Regel: Wert;
Regel2: Wert; //letztes Semikolon kann weggelassen werden
…
}

Arten von Selektoren:

---

1. Universalselektor (*)
2. Elementselektor (Tag-Name: bsp. p für alle p)
3. Klassenselektor (Klasse)
4. ID-Selektor (IDs)

-3. und 4. sind Selektortypen, die häufig verwendet werden

(Auch Klausurrelevant)— — — — - - - - - - - - - -
Im CSS ist die Reihenfolge relevant, in der die Regeln definiert werden. Bei der Anwendung der CSS-Regeln für unterschiedliche Klassen, die auf das selbe Element angewendet werden sollen, wie in
div class=“rot fett“<,
ist die Reihenfolge von rot und fett nicht bedeutend. Es kann also auch div class=“fett rot“ geschrieben werden. In CSS wird überprüft, welche Regeln zuerst definiert wurden. Die Regeln der Klassen etc, welche danach deklariert wurden, überschreiben die Regeln der vorherigen Klasse.

Grid-Layout:

---

Eine weitere Möglichkeit, Grids zu definieren, außer bspw. „.boxen > .inside {…}“ zu verwenden, ist, vorher Grid-area‘s zu definieren: grid-area: header, grid-area: footer, grid-area: main, für unterschiedliche Container.
-.Container/Grid {
Display: Grid;
Grid-Template-areas: “header header“ “main content“ “footer footer“;
Grid-Template-column: 1fr 3fr; //inks 1fr, rechts 3 fr
}

Media-Query:

---

Mit Media-Query kann man Seiten an bestimmte Bedingungen wie die Bildschrimbreite, die Ausrichtung und dergleichen anpassen.

---

Box-Modell:
Beim Box-Modell wird unterschieden zwischen
-border-box und
-content-box

!! Beide definieren die Boxgröße, wobei die Content-Box die Größe anhand des Inhalts (Contents) berechnet, bei Border-Box wird die gesamte Box mitsamt der Border verwendet, um die Größe zu bestimmen. Margin ist hierbei unbedeutend, da damit nur der Außenabstand definiert wird.

---

Client und Server:

… … … … … … … … … … … …
Client sichern:
-Antivirenprogramm
-aktuelle Betriebssysteme
-aktuelle Browser

Browser werden in Sandbox ausgeführt
-Plugins:
=>außerhalb der Sandbox über API
-Erweiterungen:
=>können alles, was der Browser kann
… … … … … … … … … … … …

Server sichern:
-kein Antivirenprogramm (Da auf dem Server für gewöhnlich nur bekannte Komponenten[, UND potenziell werden auch unschädliche,erwünschte Programme als schädlich eingestuft])
… … … … … … … … … … … …
Unterschied HTTP und HTTPS:

HTTPS:
-verschlüsselte Verbindung:
-TLS-Handshake: vor der http-Übertragung wird die Verbindung zwischen dem Client und dem Server aufgebaut
Aufbau:
1. Client sendet Anfrage (request)
2. Server antwortet mit response und sendet ein Zertifikat
3. Client überprüft das Zertifikat auf Gültigkeit und Authentizität
4. Client verwendet den öffentlichen Schlüssel, der im Zertifikat angegeben ist
5. In der Verbindung wird mit dem öffentlichen Schlüssel ein geheimer Schlüssel vereinbart
6. Geheimer Schlüssel wird zur Verschlüsselung genutzt.


HTTP:
-nicht verschlüsselt
=>aber zum Mitlesen muss man im selben Netz sein UND Netz muss bestimmte Bedingungen erfüllen

Aufbau:
1. Client sendet request (Anfrage)
2. Server antwortet mit response

!!!!Wenn bei einer URLstatt https http eingetragen wird, überprüft und ändert der Browser den Eintrag automatisch zu https, wenn die URL eigentlich https wäre

Internetanfragen mit Protokollen (Beispiel HTTP):

HTTP:
-wird zum Anfragen und Antworten verwendet
=>zwei Arten von Anfragen/ Nachrichten:
1. Request (Anfragen)
2. Response (Antwort)
-beide Nachrichten bestehen aus HEADER
-verschiedene Methoden: 1.GET (fordert Dokument vom Server an) 2.POST (sendet Daten) 3.HEAD (wie GET, nur ohne Inhalt [lediglich der Header]) 4… -Status-Codes: 1xx: Informationen zu Protokollen 2xx: erfolgreiche Aktion 3xx: Umleitung Unterschied URI und URL:
-URI: beschreibt eine Ressource eindeutig -URL: sagt, wo und wie man die Ressource findet