IT- und Medientechnik
Vorlesung 5: 15.11.2021
Wintersemester 2021/2022 h_da
Heiko Weber, Lehrbeauftragter
Teil 1: IT- und Medientechnik
Themenübersicht der Vorlesung
Hardware und Software
Hardware: CPU, Speicher, Bus, I/O, ...
Software: System-, Unterstützungs-, Anwendungssoftware
Software-Entwicklung
Quellcode, Programmiersprachen, Dokumentation
Software-Entwicklungsphasen, -Entwicklungsmethoden, -Komponenten, -Lizenzen
Digitalisierung von Inhalten und Informationen
Daten: Informationen, Bits, Bytes, Binärsystem, Hexadezimalsystem
Dateien, Dateisysteme, Datenformate, Kompression
Netzwerke und Internet
Netzwerk-Strukturen, Geschichte des Internets, Techniken der Datenübertragung
Protokolle und Technologien, WWW, Standards, Cloud, IoT
Weitere Technologien
Geschichte des World Wide Web
das Grundkonzept wurde 1989 von Tim Berners-Lee am Forschungszentrum CERN vorgestellt
das Ziel war am Anfang nur der Austausch von wissenschaftlichen Informationen über das Internet
besonders war seine Idee, dass die Informationen mit Links (Hyperlinks) zum Navigieren versehen und die Informationen systemunabhängig übertragen werden sollten, so dass verschiedene Computersysteme zum Anzeigen genutzt werden konnten
den ersten Webbrowser stellte Tim Berners-Lee am 25.12.1990 vor – er hieß
„WordWideWeb“ und lief zuerst auf dem NeXT-Betriebssystem
anfangs konnte der Webbrowser nur Text mit einfacher Formatierung, Links und einzelne Bilder anzeigen
Screenshot vom Desktop von Tim Berners-Lee mit dem WordWideWeb-Browser
Funktionsweise des World Wide Web
Webbrowser
zeigt die
HTML-Inhalte an
Webserver
liefert die HTML-Inhalte und weitere Daten
vereinfachte Darstellung
- entspricht dem World Wide Web zum Anfang der 1990er Jahre
HTTP
zur Datenübertragung
Webbrowser
Programm zur Darstellung von Webseiten
versendet Web-Anfragen
empfängt Web-Antworten und stellt diese dar
weitere Funktionen: Bookmarks, Sicherheit, ...
im Client-Server-Modell entspricht der Webbrowser dem Client
Wird häufig auch einfach nur als „Browser“ bezeichnet.
Beispiele
Firefox
Internet Explorer
Edge
Safari
Chrome / Chromium
Webserver
Programm zum Ausliefern von Webinhalten
empfängt Web-Anfragen (Requests)
versendet Web-Antworten (Responses)
● HTML-Seiten
● Media-Inhalte: Bilder, Audio, Video, Dokumente, …
enthält oft auch Logik zum Erstellen von dynamischen Webinhalten (Programme, die für jede Web- Anfrage die Web-Antwort individuell erstellen)
im Client-Server-Modell entspricht der Webserver dem Server
Beispiele: Apache HTTP Server, nginx, Microsoft Internet Information Server (IIS)
HTTP
HTTP = Hypertext Transfer Protocol
Übertragungsprotokoll für das World Wide Web
Standard-Port: 80 (443 bei sicherer Übertragung - HTTPS)
zustandsloser Request/Response-Nachrichtenaustausch
Request=Anfrage, Response=Antwort
Web- browser
Web- server
HTTP-Request-Nachricht
GET http://weber-vorlesung.de/test.html HTTP-Response-Nachricht
<html><head>...</body></html>
Aufbau einer HTTP-Nachricht
eine HTTP-Nachricht besteht aus einem Header und einem Body, wobei der Body optional ist
die Trennung zwischen dem Header und dem Body ist eine Leerzeile
eine Zeile in einer HTTP-Nachricht endet in CR LF
CR LF = Carriage Return + Line Feed (Anfang Zeile, Zeilenumbruch)
Header Zeile 1 CR LF
Header Zeile 2 CR LF Header Header Zeile 3 CR LF
CR LF Trennzeile Body Zeile 1 CR LF
Body Zeile 2 CR LF Body Body Zeile 3
HTTP-Request-Header
ein HTTP-Request-Header enthält
in der ersten Zeile:
● die Request-Methode
● die Request-Zieladresse
● die Protokoll-Version
in den weiteren Zeilen:
● Header-Felder, die aus einem Namen und einem Wert bestehen (getrennt durch einen Doppelpunkt+Leerzeichen)
in den Header-Feldern werden u.a. auch Angaben über die Länge und den Typ der Daten im Body gemacht
HTTP-Request-Header - Beispiel
GET /test.html HTTP/1.1 Host: weber-vorlesung.de Accept-Charset: utf-8
Content-Length: 0
HTTP-Request-Methoden
GET
lädt die adressierte Ressource (Metadaten und Inhalt)
HEAD
lädt nur die Metadaten, aber nicht den Inhalt der adressierten Ressource (Response mit leerem Body)
OPTIONS
liefert Informationen über die möglichen Kommunikations-Optionen
PUT
speichert die Daten im Body in die adressierte Ressource
POST
schickt die Daten im Body zur Verarbeitung durch die adressierte Ressource
DELETE
löscht die adressierte Ressource
weitere Methoden im Standard definiert...
HTTP-Header-Felder
viele vordefinierte
einige beziehen sich auf den Body
● z. B. Content-Type, Content-Length, Content-Encoding, ...
einige beziehen sich auf die Zieladresse
● z. B. Host
einige beziehen sich auf die geforderte Response
● Accept-Charset, Accept-Language, Accept-Encoding, ...
einige dürfen nur im Header von Requests, manche nur im Header von Responses und manche in beiden Fällen verwendet werden
benutzerdefinierte
zusätzlich zu den vordefinierten dürfen Clients und Server auch eigene Header-Felder einführen - benutzerdefinierte Felder führen den Prefix „X-“ im Namen - nicht in RFC 2616 definiert – kommt aus der MIME-Spec (RFC 2045) - wird aber auch in HTTP allgemein so gehandhabt
HTTP-Response-Header
ein HTTP-Response-Header enthält
in der ersten Zeile
die Protokoll-Version
den Response-Code
die Response-Beschreibung
in den weiteren Zeilen
Header-Felder, die aus einem Namen und einem Wert bestehen (getrennt durch einen Doppelpunkt+Leerzeichen)
HTTP-Response-Header - Beispiel
HTTP/1.1 200 OK
Date: Mon, 30 Nov 2020 11:14:28 GMT Server: Apache
Content-Length: 3604
Content-Type: text/html; charset=utf-8
HTTP-Response-Codes
dreistellige Zahl, unterteilt in fünf Wertebereiche
100-199
informativer und vorübergehender Status
200-299
Erfolgsmeldungen
300-399
Weiterleitungsmeldungen
400-499
Client-Fehlermeldungen (inkorrekte Anfragen)
500-599
Server-Fehlermeldungen (interne Fehler auf der Server-Seite)
alle Codes: https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
Probleme bei zustandslosen Protokollen
Das HTTP-Protokoll ist zustandslos, was bedeutet, dass von einem Request zum darauffolgenden Request keine Informationen behalten werden.
In der Regel besteht ein Webseiten-Besuch aus vielen nacheinander ausgeführten Requests und verschiedenen Seiten einer Webseite, die aufgerufen werden.
Damit Eingaben und Einstellungen auf einem Bereich der Webseite auch auf anderen noch genutzt werden können, müssen der Browser und Webserver Informationen nutzen, die transparent für den Benutzer ausgetauscht werden.
Die ersten dynamischen Webseiten hatten Session-IDs in jeden Seitenaufruf eingebaut, und über diese Session-IDs auf der Webserver-Seite die Zuordnung gemacht. Diese
Technik ist für den Benutzer sichtbar und ist umständlich.
Moderne Webseiten nutzen in der Regel Cookies und Web Storage um Informationen im Browser zu speichern, lokal im Browser zu nutzen und diese bei Bedarf an den
Webserver zu schicken.
Cookies
Technologie zum Speichern von Informationen im Browser, auf Anfrage des Webservers.
Der Browser schickt die Informationen an den Webserver, wenn Request an den Webserver-Bereich geschickt werden, für den die Cookie-Werte gesetzt wurden.
ein Cookie besteht aus:
Cookie-Name (z. B. sessionId)
Cookie-Wert (z. B. 263728736)
Attributen (optional)
● Geltungsbereich (z. B. Domain=weber-vorlesung.de)
● Geltungsdauer (z. B. Expires=Mon, 30 Nov 2020 14:00:00 GMT)
● Sicherheitseigenschaften (z. B. HttpOnly)
Anwendungsbereiche
Session-Management
Personalisierung von Webinhalten
Datenschutzaspekte:
„Datensicherheit“
Cookies
1. Anfrage
Web- browser
Web- server
GET /test.html HTTP/1.1 Host: weber-vorlesung.de Accept-Charset: utf-8 Content-Length: 0
HTTP/1.1 200 OK
Date: Mon, 30 Nov 2020 11:14:28 GMT Set-Cookie: sessionId=1234
Content-Length: 3604
Content-Type: text/html; charset=utf-8
2. Anfrage
in der selben Browser-Session
Web- browser
Web- server
GET /test.html HTTP/1.1 Host: weber-vorlesung.de Cookie: sessionId=1234 Accept-Charset: utf-8 Content-Length: 0
Wert wird lokal im Webbrowser gespeichert und bei folgenden Requests zum Webserver geschickt
Web Storage
hat die gleich Aufgabe wie Cookies, funktioniert aber anders
das Speichern wird nicht durch HTTP-Responses vom Webserver gesteuert, sondern durch Programme (in der Regel JavaScript), die im Browser ausgeführt werden
wird von allen modernen Browsern unterstützt
mit Web Storage können größere Datenmengen gespeichert werden
Cookies sind in der Regel auf 4 kB beschränkt
Web Storage kann, je nach Browser, 5 bis 10 MB Daten speichern
Datenschutzaspekte:
„Datensicherheit“
Hypertext Markup Language (HTML)
„Die Sprache des World Wide Web“
Markup Language = Auszeichnungssprache
eine textbasierte Auszeichnungssprache zur strukturierten Anordnung von Elementen wie Texten, Grafiken, Referenzen und weiteren Objekten
die aktuellen Versionen der HTML-Spezifikation wurden vom W3C (World Wide Web Consortium) entwickelt
Webbrowser
zeigt die
HTML-Inhalte an
Webserver
liefert die HTML-Inhalte und weitere Daten
HTTP
zur Datenübertragung
HTML – zeitliche Entwicklung
1989: von Tim Berners-Lee am CERN erfunden
1992: erste offizielle Version – nur Text-orientiert
1993: Textformatierung und Grafikeinbindung
1995: HTML 2.0 (RFC 1866) – Formulare
1997: HTML 3.2 – Tabellen, Java Applets, …
1997: HTML 4.0 – Stylesheets, Scripts, Frames, …
1999: HTML 4.01
2000: XHTML 1.0 (HTML 4.01 in XML)
2001: XHTML 1.1
2014: HTML 5 – Video, Audio, dynamische Grafiken, …
aktuell: HTML Living Standard – kontinuierlich weiterentwickelt
Grundstruktur eines HTML-Dokuments
HTML-Inhalte werden mit HTML-Tags, speziellen Namen eingeschlossen in spitzen Klammern, markiert
Anfang: <name>
Ende: </name>
ähnlich wie eine HTTP-Nachricht besteht ein HTML-Dokument aus einem Header und einem Body
<html>
<head>
<title>Der Titel</title>
</head>
<body>
Hallo Welt!
</body>
</html>
HTML-Header
der Header eines HTML-Dokuments enthält Meta-Informationen, Scripts und Anweisungen zur Formatierung des Inhalts
ein HTML-Dokument kann einen Titel haben, der mittels dem <title>-Tag im Header angegeben wird
<title>Der Titel</title>
HTML-Body
der Body eines HTML-Dokuments enthält den eigentlichen Inhalt
in frühen HTML-Versionen wurden Inhalt und Formatierung im Body geführt und das ist auch mit dem aktuellen HTML 5 noch möglich – es gilt jedoch als guter Stil, wenn Inhalt und Formatierung voneinander getrennt werden
seit HTML 4 ist es möglich, im Body nur den reinen Inhalt zu definieren und die komplette Formatierung über Stylesheets im Header zu steuern
wir werden zuerst die normalen Formatierungsmöglichkeiten von HTML kennen lernen und erst später auf Cascading Stylesheets (CSS) eingehen
HTML-Tags
umschließende HTML-Tags
Anfang-Tag + Inhalt + Ende-Tag
z. B. <title>Der Titel</title>
einfaches HTML-Tag
einzelnes Tag mit / am Ende des Namens
z. B. <hr />
Attribute im HTML-Tag
geben Zusatzinformationen an, die den Inhalt weiter beschreiben
stehen in im einfachen oder Anfang-Tag
Attributename="Attributwert"
z. B. <font size="5">Das ist ein Beispieltext</font>
HTML-Referenzen
um von einem HTML-Dokument aus weitere Ressourcen zu referenzieren, wird das href-Attribut unter Angabe einer URI verwendet
Link auf eine andere Ressource:
<a href="http://localhost/test.php">ein Test</a>
Einbinden eines Style-Sheets:
<link href="style.css" rel="stylesheet" type="text/css" />
einige Tags verwenden stattdessen auch das src-Attribut zur Angabe von Referenzen
Einbinden eines JavaScripts:
<script src="myscripts.js" type="text/javascript" />
Einbinden einer Grafik:
<img src="icon.png" width="20" height="20" alt="Icon" />
HTML-Entitäten / Zeichen-Referenzen
in HTML sind für diverse Sonderzeichen Entitäten vordefiniert, z. B. auch für die Umlaute
die wichtigsten:
ä ä Ä Ä < <
ö ö Ö Ö > >
ü ü Ü Ü & &
ß ß ...
<body>
<b>Viele</b>Grüße!
</body>
...
HTML-Seiteneigenschaften
direkt im body-Bereich können einige Eigenschaften angegeben werden, die für die ganze HTML-Seite gelten
Hintergrundfarbe: bgcolor
bgcolor="# [hexrot][hexgrün][hexblau]" | "[farbname]"
z. B. #FFFF00, yellow, red, blue
Textfarbe: text
text="# [hexrot][hexgrün][hexblau]" | "[farbname]"
RGB-Farbwerte
Farbe wird aus 3 Farbwerten gemischt, wobei jeder Wert die Lichthelligkeit der Farbe angibt
R = rot G = grün B = blau
normalerweise Werte von 0 bis 255 (1 Byte) pro Farbe
(0,0,0) = Hexadezimal = (0,0,0) #000000
(255,0,0) = Hexadezimal = (FF,0,0) #FF0000
(0,0,255) = Hexadezimal = (0,0,FF) #0000FF
(255,255,0) = Hexadezimal = (FF,FF,0) #FFFF00
Strukturierter HTML-Text
einzelne Textbereiche speziell hervorheben: strong
z. B. das ist <strong>sehr wichtig</strong>
tiefergestellter Text: sub
höhergestellter Text: sup
Überschriften: h1, h2, h3, h4
HTML-Zeilen und -Absätze
Absatz: p
z. B. <p>Dies ist ein Absatz</p>
Zeilenumbrüche fügt der Browser bei der Darstellung von Texten automatisch ein, wenn eine Zeile voll ist. Zeilenumbrüche werden in Leerzeichen-Bereichen oder bei
Bindestrichen eingefügt.
forcierter Zeilenumbruch: br
z. B. Zeile 1<br/>Zeile 2
HTML-Schriftstile
tt: Zeichen mit fester Breite
i: kursiv
b: fett
big: groß
small: klein
strike: durchgestrichen
u: unterstrichen
<font face="Name" size="Größe">...</font>
face: Liste von Schriftart-Namen
size: absolute Größenwerte, z. B. 4
HTML-Listen
Arten von Listen:
unsortierte: ul
Listenelemente mit li
type mit Werten: disc, circle, square
sortierte: ol
Listenelemente mit li
type mit Werten: 1, a, A, i, I
HTML-Linie
wird definiert mit hr (horizontal rule)
Attribute: align, noshade, size, width, color
z. B. <hr size="2" width="3" color="red" />
HTML-Grafiken
werden eingebunden mit img
Pflichtattribute: src, alt
Optionalattribute: height, width, border, align, hspace, vspace, ...
align=bottom | middle | top | left | right
Beispiel: <img src="foto.jpg" alt="ein Foto von mir" />
unterstützte Grafikformate hängen vom Browser ab – normalerweise werden GIF, PNG, JPEG unterstützt
mit HTML 5 ist es auch möglich Grafiken direkt in einer HTML-Seite zu generieren
HTML-Formulare
<form action="Bearbeitungsziel" method="HTTP-Request-Methode">
Eingabe-/Auswahlfelder:
input
● name, value, size, maxlength, readonly
● type=text | password | checkbox | radio | submit | hidden | ...
select
● name
● Auswahloptionen mit option (value, selected)
textarea
● name, cols, rows
Dynamische HTML-Inhalte
meistens bestehen Webseiten nicht nur aus statischen Inhalten
dynamische Inhalte können im Client und im Server generiert werden:
im Webbrowser
● z. B. mit JavaScript
● wird verwendet um die Bedienung der Webseite zu verbessern
im Webserver
● z. B. mit PHP
● wird verwendet um benutzerspezifische Daten zu generieren und um Daten aus Datenbanken und anderen Unterstützungs-Systemen zu nutzen
