Diese Mitschrift zur Vorlesung Web Engineering beinhaltet die Historie von Web Engineering Techniken wie HTML, CSS sowie grundlegenden Layern in der Web-Technik.
Nur auf Docsity: Lade Einführung Web Engineering und mehr Mitschriften als PDF für Softwaretechnik / Software Engineering (SE) herunter!
Begriffe & Historie
Anwendungsprotokoll HTTP(S)
Dokumentenbeschreibungssprache HTML
Designsprache CSS
XML + XSLT
Graphikbeschreibungssprache SVG
Dynamische Webtechniken
Inhaltsübersicht
Sonntag, 20. November 2022 19:
Web: World Wide Web (WWW)
Eine Anwendung, die das Internet nutzt
Internet: technische Kommunikationsplattform / Netzwerke von Rechnern (weltweit)
Engineering: Das Erstellen von "Produkten" mit Praxisbezug Internet: ○^ 1965/69: Projektidee ○ Initiierung/-Prototyp (als ARPAnet in Amerika)
Erster Anwendungstypus: einfache Bedienung und Nutzung von Rechnerressourcen
WWW 1989/90: Projektidee/ erster Prototyp am CERN/GENF (Schweiz)
als Anwendung zum Austausch von wissenschaftlichen Forschungsergebnissen von Wissenschaftlern Unterschied: ○ Email - > Sendergetrieben ○ WWW - > Empfängergetrieben ○^ Usenet News^ - > Nur Text, kein Bewegtbild / Audio etc. & keine Hyperlinks ○ WWW - > Multimedien
○ Gopher (enthält Hyperlinks) ○ WWW - > unterstützt Multimedia und Hyperlinks Zwei Eigenschaften des Hyperlinks im WWW sind "Erfolgsfaktoren" für diese Anwendung Lokationsunabhängigkeit: Ein Verweis ist möglich, unabhängig vom Ort des Aufrufenden & dem Ort der verlinkten Info ○ Medienunabhängigkeit: Infos können in unterschiedlichen Medienformen zur Verfügung gestellt & verlinkt werden (Text, Bild, Audio, Video, etc.) ○
"Geschichte des Hyperlinks": - 1945: Vannevar Bush "As We May Think", in Atlantic Monthly, 1945 Maschine "memex" (= memory extension) mit verfilmter Info, welche über aufwendige Mechanik mit Verlinkungsmöglichkeit versehen war - - > Art "Hyperlink" (aber noch nicht mit diesem Begriff bezeichnet) - 196x: Ted Nelson "As We Will Think", in Atlantic Monthly, 1967 - > Umsetzung der Gedanken von V. B. auf damalige elektronische Digitalrechner Für die Klausur:
Beide Erfolgsfaktoren des WWW auflisten
Definition des Hyperlinks erklären Tim Berners Lee hatte zwar die Lokationsunabhängigkeit (Anwendung auf Basis des Internets), aber nicht die Medienunabhängigkeit (HyperText…) als Ziel des WWW!
NCSA erfand mit dem Mosaic-Browser den ersten Browser zur Verfügung, der für "Privatpersonen" zugänglich war - > damit kam auch der tag
Durchbruch des Webs bei Normalsterblichen
Begriffe & Historie Montag, 9. Januar 2023 14:
HTTP 1.0 (1992) Anfrage/Request: ○ GET /pfad/zur/ressource.html HTTP/1.
Antwort/Response: Beginnt mit einer Statuszeile: ▪ HTTP/1.0 200 Ok Version Statuscode Reasonstring ○ ○ Statuscode: dreistellige Dezimalzahl ○ Reasonstring: dem Statuscode fest zugeordnete textuelle Kurzbeschreibung
Übersicht Statuscodes und Reasonstring => Erste Ziffer gibt Info über die "Gruppe" 1xx) Informational (im Allgemeinen nur temporär, d.h. für "Zwischenantworten" genutzt)
"Processing" (-> Vorbeugen eines Time-Outs) 2xx) Successful Client Request
"Ok"
"No content"
"Partial Content" 3xx) Client Request Redirected
"Multiple Choice" (z. B. bei einer Antwort auf eine Anfrage, die mit unterschiedlich-sprachigen Dokumenten beantwortet werden könnte)
"Internal Server Error" 9xx) Proprietary Errors Die Statuszeile wird gefolgt von beliebig vielen HTTP-Header-Zeilen Header-Name: Header-Value z.B. Content-Type: text/html <-- "MIME"-Type" (Multipurpose Internet Mail Extensions" ~ 1990 für Anwendung E-Mail entwickelt => enthält u. a. eine Signalisierung des Medientyps als "MIME-Type" => verwendet dann (auch) für das WWW => damit können beliebige Medientypen übertragen und automatisch richtig angezeigt werden Weitere HTTP-Header:
Content-length: Länge der Ressource in Byte
z. B. sinnvoll für eine Fortschrittsbalken-Anzeige
Content-language: de/de-AT => natürliche Sprache der Ressource, z.B. für automatische Übersetzungsmöglichkeit, Silbentrennungen…
Last-modified: Monday Jan 23, 2023 3:19 PM => schreckliches Format, aber interessante Info
Viele weitere mögliche Header Die HTTP-Header werden beendet mit einer Leerzeile. Danach folgt der eigentliche Ressourceninhalt. Weitere Request-Typen bei HTTP 1.
GET
HEAD: ergibt in Status und Header-Zeichen ohne eigentlichen Ressourceninhalt POST: ermöglicht Senden von Parametern an den Server, welche binär codiert sein können, nicht in der Adresszeile auftauchen (im Gegensatz zum Query-String im GET)
weitere optionale Request-Typen, welche aber erst im Zusammenhang mit WebDAV sinnvoll genutzt werden können: PUT: zum Schreiben einer Ressource auf den Server DELETE: Zum Löschen einer Ressource auf dem Server (später ) PATCH: zum Ändern von Teil-Inhalten einer Ressource
z. B. text/html, image/jpeg, image/png, video/mp4, audio/mp => alle tlmt & slmt sind standardisiert; Ausnahme: slmt beginnt mit "x-" z.B. application/x-tar URL: Uniform/Unified Resource Location/Locator
Adresse einer Ressource im Internet URI: Unified/Uniform Resource Identifier
gibt Hinweise, wie eine Ressource im Internet erreicht werden kann
URI ist der Überbegriff: jede URL ist auch eine URI, aber nicht jede URI ist eine URL Beispiel für URI, welche aber keine URL ist:
HTTP 1.
Montag, 13. Februar 2023 13:
Beispiel für URI, welche aber keine URL ist: mailto:mailadresse
mailto ist kein Anwendungsprotokoll, es fehlt der Email und Konto des Absenders! Format: - URI Schema: weitere Info
protocol: Anwendungsprotokoll, z.B. HTTP, HTTPS, FTP, …
uid: Benutzername zum Zugriff auf geschützte Ressourcen pw: Passwort zum Benutzername, bei "modernen" Browsern wird die Angabe des passworts in der URL aus Sicherheitsgründen nicht mehr unterstützt
host: Bezeichnung des angefragten Rechners: fqdn ("fully qualified domain name"), welcher per DNS in eine IP-Adresse umgesetzt werden kann
Oder direkt eine IP-Adresse (funktioniert aber bei vielen Web-Präsenzen heutzutage nicht…)
port: Port des TCP- oder UDP-Protokolls (falls nicht angegeben wird ein "Default- Port", welcher dem protocol fest zugeordnet ist, verwendet: also http:80, https:443, …)
/ nach dem host bzw. Port und Verzeichnispfad ist immer Pflicht! Verzeichnispfad: Unterverzeichnis, in welchem sich die Ressource befindet, ausgehend vom Wurzelverzeichnis des Web-Server-Dienstes. Falls nicht angegeben, befindet sich die Ressource im Wurzelverzeichnis des Web-Service- Dienstes
Ressourcenname: Name der Ressource im entsprechenden Verzeichnis (falls nicht angegeben, wird eine Ressource mit einem (im Web-Server festgelegten) "Default-Namen" ausgeliefert, oder ein Verzeichnislistung, oder eine Fehlermeldung)
Query: Query-String, Parameter, welche an den Server innerhalb der URL gesendet werden (im Gegensatz zu den POST-Parametern, welche als Ressource im POST-Request mitgesandt werden)
Format: ?name1=wert1&name2=wert2… Textanker: Stelle in einer (HTML-) Datei, an welche direkt gesprungen wird, statt die Datei "von vorne" anzuzeigen
Mit Ausnahme des Textankers werden alle Bestandteile beim Aufbau der Kommunikations-Beziehung mit dem Web-Server genutzt oder an diesen gesandt. Der Textanker verbleibt jedoch lokal im Browser Adresstechnische Unterscheidung mehrerer Web-Präsenzen, welche auf einem großen WebServer betrieben werden: Unterschiedliche Verzeichnisse: ○ http://bla.fasel/blubber/ ○ http://bla.fasel/yeet/ => extrem einfach, aber auch extrem unprofessionell => auch z.B. bei gängigen Web-Servern (Apache) für alle Benutzer auf einem unixoiden Rechner: http://bla.fasel/~username/
Unterschiedliche Ports: ○ http://bla.fasel:4711/ ○ http://bla.fasel: => einfach, aber schwer zu merken und unprofessionell
Unterschiedliche FQDNs: ○ http://www.mueller.de/ - > 1.2.3. ○ http://www.irgendein-meier.com/ - > 5.6.7. => Abbildung der FQDNs auf unterschiedliche IP-Adressen
Mit verschiedenen Netzwerkkarten
Anzahl stark beschränkt und kostspielig => eine Netzwerkkarte mit mehreren IP-Adressen geht auch, bei Betriebssystemen schon lange, bei Fenster seit Win NT / Win 2000, nicht aber bei Win 3.1/3.11/95/98/…) => jede Web-Präsenz braucht eine eigene IP-Adresse… Wie viele IP-Adressen gibt es? IPv4: a.b.c.d mit a,b,c,d {0, 1, …, 255} => insgesamt 2^32 ≈ 4 Mrd. => nicht alle diesen IP-Adressen sind für "unicast"-Beziehungen (also für WebServer) nutzbar localhost: 127.0.0.0/8 ≈ 16 Mio. Adressen, die nur den eigenen Rechner ansprechen!
Das Internet unterteilt sich in viele "Subnetze". Die erste Adresse in jedem Subnetz ist die Netzwerkadresse, die letzte die Broadcast-Adresse
Alternative Schreibweise der Netzwerkmaske: 127.0.0.0/255.0.0.
=> bei typischen /24-Netzwerken sind das fast 1% aller IP-Adressen Private Netzwerke: 192.168.0.0/16 => 2^16 = 65536 Adressen
HTTP 1.1:
(seit 1997) HTTP-Host-Header als Pflicht im Request: GET /pfad/zur/ressource HTTP/1. Host: Host (aus der URL, entweder FQDN oder IP-Adresse) Außerdem: persistente Verbindungen, d.h. eine TCP-Verbindung kann für mehrere aufeinander folgende HTTP-Request/Response-Paare genutzt werden! HTTP 2. (Seit 2015) Mehrere Anfragen über eine TCP-Verbindung gleichzeitig (statt nur nacheinander) über "streams"
Kompressionsmöglichkeit auch für HTTP-Header (und nicht nur für die eigentliche Ressource wie bei 1.1)
Server-Push: Die zur angefragten Ressource zugehörigen Ressourcen (z.B. eingebettete Bilder, CSS und JS-Dateien, …) werden ohne explizite Anfrage mit der "eigentlichen" und angefragten Ressource mit versandt
HTTP 3.
(Seit 2022) HTTP setzt auf UDP und QUIC statt TCP auf, weitere Performance-Verbesserungen z.B. beeinflusst ein fehlendes Paket eines streams nicht die anderen streams (wie es bei TCP der Fall wäre)
HTTP V1.1 - 3.
Montag, 13. Februar 2023 13:
"HyperTextMarkupLanguage" => Textbasiertes Format für Textdokumente (anders als bei z.B. MS Word) 2 Gruppen von Formaten für Textdokumente: Aussehensorientiert Strukturorientiert Textpassage wird mit Aussehen attriboutiert Textpassage wird mit Funktion/Bedeutung attriboutiert Bsp. Word DOC, ODT, PDF, ePUB, PostScript Bsp. HTML, org-mode, MarkDown, LaTeX
ohne viel Einarbeitung nutzbar, "WYSI(N)WYG"
Aussehensänderung an einem Teil wird nicht automatisch für andere Teile übernommen
Ausgabe auf ein Ausgabemedium festgelegt Sehr viel Vorwissen und Einarbeitung notwendig, Abstraktions- und Vorstellungsvermögen notwendig
konsistentes Aussehen über große Dokumente einfach möglich
medienunabhängig, Verschiedene Ausgabemedien möglich HTML wurde als strukturorientierte Dokumentbeschreibungssprache neu entwickelt, um Unabhängig vom Ausgabemedium zu haben und den Hyperlink zu integrieren
strukturorientiert und textbasiert Der meiste Text im Quelltext wird inhaltlich unverändert bei der Ausgabe im Web-Browser dargestellt.
Ausnahmen:
Inhalt des ; Metadaten, welche nicht angezeigt werden
Kommentare: (auch mehrzeilig)
Tags Worttrennzeichen (Leerzeichen, Zeilenumbruch, Tabulator) werden abhängig vom verfügbaren Restplatz in der Zeile als Leerzeichen oder Zeilenumbruch ausgegeben; beliebig viele aufeinanderfolgende Worttrennzeichen ("Whitespace") wird auf eine Worttrennzeichen reduziert
Entitäten umschreiben ein (anderes) Ausgabezeichen: ○ &….; Für Zeichen mit Sonderfunktionen bei HTML: "non-breaking space"; Leerzeichen, welches immer als Leerzeichen ausgegeben wird und nicht als Worttrennzeichen dient.
○ "<" < "less than" ○ ">" > "greater than" ○ " " " " "quotation marks" - > doppelte Anführungszeichen ○ "&" & "amper's and" - > Kaufmännisches UND für nationale Sonderzeichen: ○ "ä" &äuml; "a Umlaut" ○ "Ü" Ü "U Umlaut" ○ "ß" ß "sz Ligatur" ○ "é" é "e mit accent aigu" => bisher alles "bennante" Entitäten => außerdem können alle Druckzeichen über eine "numbered entity" ausgegeben werden (über die Nummer im Unicode-Zeichensatz)
2. Dokumentenbeschreibungssprache HTML
Montag, 13. Februar 2023 13:
Name/Titel des Dokuments
Tags für die "Strukturierung des Inhalts" im Ur-HTML (1992):
Absätze, Überschriften, Hyperlinks, Listen
paragraph Absatz
heading Überschrift … " "
" " Keine Syntaktische Notwendigkeit, die Überschriften in der ihrer Hierarchie entsprechenden Reihenfolge einzusetzen, aber guter Stil!
Ebenfalls keine syntaktische Beziehung zwischen Überschrift und zugehörigem Inhalt ordered list Liste mit fortzählenden Aufzählungszeichen (z.B. Nummer, Buchstaben, …)
unordered list Liste mit immer gleichen Aufzählungszeichen (z.B. Bullet Points, Strichen, …)
list item Vor jedem Listenelement
definition list Definitionsliste mit zwei unterschiedlichen Listenelementen
definition term Zu definierender Begriff
definition description Zugehörige Beschreibung Paarweise Verwendung von
und
ist zwar oft sinnvoll, aber syntaktisch nicht vorgeschrieben
"verschachtelte" Listen sind möglich, indem eine weitere Liste in ein
In den meisten Fällen ist das Verweisziel eine URL! Allerdings werden hier häufig "relative URLs" (d.h. unvollständige URLs, denn etwas fehlt) verwendet
Die relative URL wird vom Browser zu einer vollständigen/absoluten URL gemacht, indem die fehlenden Bestandteile von der URL der enthaltenden Ressource verwendet werden! ○ Absolute URL: vollständig, beginnt mit "Anwendungsprotokoll://" ○ Protokollrelative URL: das Protokoll fehlt, beginnt mit "//" Hostrelative (pfadabsolut) URL: das Protokoll und der Host (FQDN oder IP-Adresse) fehlen, beginnt mit "/"
Pfadrelative URL: es fehlen Teile des Dateipfades, die Ressource wird nicht ausgehend von Wurzelverzeichnis, sondern vom aktuellen Verzeichnis ausgegeben, beginnt mit Ressourcenname oder Verzeichnisbezeichner
○ Dokumentrelative URL: Verweis auf eine andere Stelle im selben Dokument, beginnt mit "#"
Für den Browser bedeutet eine relative URL Mehrarbeit, da diese erst zu einer absoluten URL gemacht werden muss!
Vorteile relativer URLs: Umzugsfähigkeit einer Web-Präsenz oder eines Dateibaums ohne die URLs abändern zu müssen
○ Bessere Lesbarkeit Kürzere URLs: ▪ Weniger Tippaufwand ▪ Weniger Speicherplatz ▪ Weniger übertragenes Datenvolumen
Anwendung: ○ Absolute URL: Notwendig bei Wechsel des Hosts und/oder Protokolls ○ Protokollrelative URL: kaum sinnvoll, kaum gebraucht, nicht empfohlen Hostrelative (pfad-absolute) URL: Verweise auf zentrale Dokumente der Webpräsenz, z.B. Einstiegsseite, Impressum
○ Pfadrelative URL: Verweis auf Dokumente im selben "logischen" Bereich der Webpräsenz ○ Dokument-relative URL: Verweis auf eine andere Stelle im selben Dokument Spezielle Pfadbezeichner: ▪ .. => übergeordnetes Verzeichnis ▪. => aktuelles Verzeichnis
https://bla.fasel/blubber/ein/mal.html => (absolute) URL der enthaltenden Ressource
./././.././././../././../.././wo.html => pfad-relativ => https://bla.fasel/wo.html (Hinweis: Das übergeordnete Verzeichnis vom Wurzelverzeichnis ist kein Fehler, sondern das Wurzelverzeichnis selbst)
Bilder, Formulare, Textgestaltung Bilder: </> Src: "source", Verweis auf die Bilddatei in Form einer URL (auch relativ) Alt: "alternate text", Kurzbeschreibung des Bildinhalts Grund für die Pflicht des alt-Attributs:
Barrierefreiheit, z.B. für Blinde (Braillezeile oder Vorleseprogramm)
Andere Fälle für Anzeige des Textes statt des Bildes
Nichtverfügbarkeit der Bildressource (Bild gelöscht, umbenannt, Server down)
Hinweis für Ersteller der HTML-Seite beim Editieren
Textbasierte Browser (lynx)
Webarchiv (archive.org/web)
Vor dem (Nach-)Laden der Bilder
Sparen von Datenübertragungsmengen (Mobilfunk, schlechte Leitung) Optionale Attribute: ○ Width (sprich wüpfhh) ○ Height (sprich heydfhhh) ○ (bitte keine Skalierung, Originalgröße sollte hier ausgegeben werden) Gründe: ▪ Platzhalter, bevor das eigentliche Bild geladen ist ▪ Browser sind schlechtere Skalierer als Bildbearbeitungsprogramme ▪ Datensparsamkeit
HTML 2.0 (1995)
Montag, 20. Februar 2023 14:
Tabellen, Applet, Textfluss um Grafiken Tabellen:
Umschließt die gesamte Tabelle, enthält beliebig viele Tabellenzeilen
"table row" Tabellenzeile, enthält die Spaltenelemente dieser Zeile
"table data" Tabellenelement
"table heading" Tabellenelement als "Metadaten", Tabellenüberschrift (
3, 05 wegen - 3, 06 Brandschäden - 1, … Die optionalen Attribute rowspan und colspan können bei einem
(oder
) dafür sorgen, dass mehrere unter (oder neben-) einander liegende Felder zu einem Feld vereinigt werden. Die entsprechenden betroffen nachfolgenden
s (oder
s) müssen entfallen Das große rote Feld wäre ein "struktureller" Fehler (kein Syntaxfehler), falls ein Feld von mehreren anderen Feldern Seit HTML 4.0 ist weitere Strukturierung der
möglich: gleichzeitig überdeckt werden sollen
kann (einen) , (einen) und (mehrere) s enthalten ○ ○ , und enthalten jeweilsdie entsprechenden -
HTML 3.2 (1996)
Montag, 27. Februar 2023 13:
Weiterentwicklung von HTML 4, welche sowohl in einer XML-konformen, als auch in einer "einfachen HTML-
Version" von Browsern interpretiert werden können muss. Neuerungen: - Medienintegration:
Standardisiertes DOM (Document Object Model, Repräsentation eines Dokuments im Browser) sowie standardisierte API zum Zugriff darauf
Neue strukturierende semantische Tags (hilfreich z.B. für Menschen mit Einschränkungen/"Vorlesetools" und auch Suchmaschinen)
Medienintegration am Bsp. Video:
Bei source sind weitere Test-Attribute (z.B. zur Auflösung, zur Bildbreite, …) möglich. Bei video sind weitere optionale Attribute zur Ablaufsteuerung möglich, z.B. für Autostart, Repeat, Kontrollelemente Semantische/strukturierende Tags bei HTML 5 Tags in Ur-HTML: "emphasize" für hervorgehobene Textpassagen im Fließtext für explizit anzuzeigende "Meta-Informationen", welche z.B. zum Urheber der Website, in einem eigenen Textabsatz Für Querlinie über den aktuellen Absatz Tags, welche nach und nach in HTML entstanden sind: "bold" "italic" "underline" -----> sind als "Alternative" für mit border/spezielle Bedeutung ( :/ ) HTML 5.0 (2014) Montag, 27. Februar 2023 14:
Tags ohne Semantik, welche mit HTML 4 (und CSS) dazukamen:
"division" für ganze (auch mehrere) Textblöcke Für kurze Passagen im Fließtext Neue Tags mit HTML 5:
