[Kapitel] Kapitel hinzufügen
Kapitel hinzugefügt.
This commit is contained in:
parent
8ee65a6181
commit
e29cccfb1f
13 changed files with 2936 additions and 0 deletions
9
Kapitel/00_Vorwort.tex
Normal file
9
Kapitel/00_Vorwort.tex
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
\chapter{Vorwort}
|
||||||
|
|
||||||
|
Herr Röthig schreibt alles, was für seine Klausuren von Bedeutung ist, an die Tafel. Es ist daher nur zu empfehlen, alles mitzuschreiben, da er kein Skript besitzt und auch keinen Foliensatz. Der Unterricht ist im Vergleich zu anderen Dozenten unterscheidet sich darin, dass während der Klausur keine Hilfsmittel verwendet werden dürfen. Dafür besteht die Klausur zu 90\% nur aus Abfrageaufgaben.
|
||||||
|
|
||||||
|
Dieses Skript enthält \textit{alles}, was Herr Röthig 2017 an Wissen voraussetzt. Auf den letzten Seiten dieses Skripts findet sich zusätzlich noch eine Übungsklausur. Die Klausuren unterscheiden sich jedes Jahr nur um einige wenige Aufgaben. Ist man zwei, drei Übungsklausuren durchgegangen, so ist die Klausur einfach zu bestehen.
|
||||||
|
|
||||||
|
Zusammen mit meinem Kurs TINF16B2 haben wir dieses Skript ausgedruckt und korrigiert. Inhaltliche Fehler sollten daher (fast) keine mehr enthalten sein.
|
||||||
|
|
||||||
|
Ich wünsche dir viel Erfolg bei Herrn Röthig im Fach Webengineering. Solltest du dieses Skript erweitern wollen, so kannst du dich an \href{mailto:dhbw@andremeyering.de}{dhbw@andremeyering.de} wenden.
|
||||||
22
Kapitel/01_Einstieg.tex
Normal file
22
Kapitel/01_Einstieg.tex
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
\chapter{Einstieg}
|
||||||
|
|
||||||
|
Dozent: \href{https://www.dhbw-karlsruhe.de/prof-dr-roethig}{Prof. Dr. Jürgen Röthig} \newline
|
||||||
|
Raum: C560 \newline
|
||||||
|
Tel.: 0721 9735-883 \newline
|
||||||
|
E-Mail: roethig@dhbw-karlsruhe.de
|
||||||
|
|
||||||
|
Umfang: 48h (1. und 2. Semester). \newline
|
||||||
|
Prüfungsleistung: Klausur (90min; ohne Hilfsmittel); 80\% Klausur | 20\% Projekt
|
||||||
|
|
||||||
|
|
||||||
|
\section{Inhaltsübersicht der Vorlesungen}
|
||||||
|
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item Motivation/Historie
|
||||||
|
\item Anwendungsprotokoll \acs{HTTP}
|
||||||
|
\item Dokumentenbeschreibungssprache (\acs{HTML})
|
||||||
|
\item \acs{CSS} für \enquote{Designvorgaben}
|
||||||
|
\item \acs{XML} als \enquote{abstrakte Datenbeschreibungssprache}
|
||||||
|
\item \acs{XSLT} als Transformationssprache für \acs{XML}-Dateien
|
||||||
|
\item \acs{SVG} als Grafikformat
|
||||||
|
\end{enumerate}
|
||||||
134
Kapitel/02_Motivation_Historie.tex
Normal file
134
Kapitel/02_Motivation_Historie.tex
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
\chapter{Motivation/Historie}
|
||||||
|
Das Wort \enquote{Engineering} zeigt den Bezug auf praktische Anwendbarkeit.
|
||||||
|
|
||||||
|
|
||||||
|
\section{Historie des Internets}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item 1965/67/69: Arpanet-Projekt-Initierung/-Idee/-Prototyp
|
||||||
|
\item Motivator/erste Anwendung: entfernte Bedienung/Benutzung von Rechnerresourcen, \code{telnet}, \code{ssh}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\section{Das Web / WWW}\index{WWW}
|
||||||
|
|
||||||
|
Mit \enquote{Web} ist das \acf{WWW} gemeint.
|
||||||
|
|
||||||
|
\subsection{Was ist das WWW?}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Eine Anwendung, welche das Internet als Kommunikationsplattform nutzt
|
||||||
|
\item Eine Anwendung, welche Informationen \enquote{verteilt} auf verschiedenen Rechnern zur Verfügung
|
||||||
|
stellt; diese Informationen sind untereinander \enquote{verknüpfbar} (über spezielle Verweise)
|
||||||
|
|
||||||
|
Beispiel für Verweise (aus dem täglichen Leben):
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Seitenverweise im Text (\enquote{siehe Seite 102, Zeile 23}, \enquote{siehe oben})
|
||||||
|
\item Verweise auf Abbildungen, Tabellen
|
||||||
|
\item Hinweis-Straßenschilder (\enquote{Frankfurt 130km $\uparrow$})
|
||||||
|
\item Weiterleiten/Verbinden zum geeigneten Ansprechpartner
|
||||||
|
\item Fahrplan
|
||||||
|
\item Literaturquellen/-verweise, weitere Informationsquellen
|
||||||
|
\item Schulverweis (\enquote{auf andere Schule!})
|
||||||
|
\item Adressbücher/Telefonbücher
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item Spezialität der Verweise im \enquote{\acs{WWW}}: automatische Verweisauflösung durch Standardaktion (\zB der Mausklick).
|
||||||
|
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsubsection{Der Hyperlink}\index{Hyperlink}
|
||||||
|
|
||||||
|
Der \enquote{Hyperlink} ist ein Verweis mit automatischer Verweisauflösung. Er besteht im \enquote{\acs{WWW}} aus zwei Teilen: sichtbare Beschreibung und (meist) unsichtbares Verweisziel.
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \enquote{Erfinder} des Hyperlinks: Vannevar Bush, 1945
|
||||||
|
\item siehe \enquote{As we may think}, Atlantic Monthly, 1945
|
||||||
|
\item siehe Maschine \enquote{memex} (Memory extension)
|
||||||
|
$\Rightarrow$ Information auf Mikrofilm mit Verweismöglichkeit inkl. Automatischer Verweisauflösung
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection{Zwei Eigenschaften des \acs{WWW} (\enquote{Erfolgsfaktoren})\label{sec:lokations_medienunabhaengigkeit}\index{WWW}}
|
||||||
|
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item \textbf{Lokationsunabhängigkeit}
|
||||||
|
|
||||||
|
$\Rightarrow$ unabhängig von der Lokation der Information und der Suchenden;
|
||||||
|
die Information kann immer \enquote{auf die gleiche Weise} beschafft werden.
|
||||||
|
|
||||||
|
Beim Design des \acs{WWW} von \href{https://de.wikipedia.org/wiki/Tim_Berners-Lee}{Tim Berners-Lee} geplant
|
||||||
|
|
||||||
|
\item \textbf{Medienunabhängigkeit}
|
||||||
|
$\Rightarrow$ Die Information kann grundsätzlich in verschiedenen Medienformen
|
||||||
|
(Text, Bild, Video, Audio, \ldots ) vorliegen.
|
||||||
|
|
||||||
|
Ursprünglich nicht geplant und nicht im Web enthalten. Belege:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item HTML: Hyper \textbf{Text} Markup Language
|
||||||
|
\item HTTP: Hyper \textbf{Text} Transfer Protocol
|
||||||
|
\item $\Rightarrow$ in ersten Versionen \textbf{nur} Unterstützung von Text vorhanden! (\textbf{Klausurrelevant!})
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
|
||||||
|
\begin{table}[h]
|
||||||
|
\begin{tabular}{c|p{34mm}|p{30mm}|p{75mm}}
|
||||||
|
Nr. & Deutsch & Englisch & Beschreibung \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
7 & Anwendungsschicht & Application Layer & Realisierung des Kommunikationsmodells für die jeweilige Anwendung (Client/Server; Peer-to-Peer) \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
6 & Darstellungsschicht & Presentation Layer & Zeichen-/Anwendungskodierung \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
5 & Kommunikations-\newline steuerungsschicht (besser nicht: Sitzungsschicht) & Session Layer & Sychronisierung der Anwendung; Transaktionssteuerung; (\zB RPC Protokoll) \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
4 & Transportschicht & Transport Layer & Verbindungen; Vollständigkeit/Fehlerfreiheit/Reihenfolge; Port-/Anwendungsadressierung; (\acs{TCP}/\acs{UDP}) \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
3 & Vermittlungsschicht & Network Layer & Wegewahl/Routing; Adressierung (mit IP-Adresse) \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
2 & Sicherungsschicht & Data Link Layer & \href{https://de.wikipedia.org/wiki/Logical_Link_Control}{LLC}: Logical Link Control (Integritätsüberprüfung) \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
& & & \href{https://de.wikipedia.org/wiki/Media_Access_Control}{MAC}: Medium Access Control (Adressierung mit \href{https://de.wikipedia.org/wiki/MAC-Adresse}{MAC-Adresse}); Regelung des Zugangs auf das \enquote{shared-medium} \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
1 & Bitübertragungs-\newline schicht & Physical Layer & Signalkodierung ; Stecker/Kabelform
|
||||||
|
\end{tabular}
|
||||||
|
\caption{OSI-7-Schichten-Modell}
|
||||||
|
\label{tbl:osi_7_schichten}
|
||||||
|
\end{table}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\section{ISO-OSI-7-Schichten-Architektur}
|
||||||
|
|
||||||
|
Die 7 Schichten des ISO-OSI-7-Schichten-Architektur\index{OSI-7-Schichten-Architektur} werden in \autoref{tbl:osi_7_schichten} auf Seite \pageref{tbl:osi_7_schichten} dargestellt.
|
||||||
|
|
||||||
|
\textbf{Hinweis}: Schicht 2 kann unterteilt werden.
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Ab der Transportschicht werden nur noch Ende zu Ende Verbindungen betrachtet.
|
||||||
|
\item \textit{siehe} Wikipedia\footnote{\url{https://de.wikipedia.org/wiki/OSI-Modell}}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Internet-4-Schichten-Modell}\index{Internet-4-Schichten-Modell}
|
||||||
|
\hspace*{-3mm}
|
||||||
|
\begin{tabular}{rcl}
|
||||||
|
Schicht &5-7 &$\Rightarrow$ Application Layer \\
|
||||||
|
Schicht &4 &$\Rightarrow$ Transport Layer\\
|
||||||
|
Schicht &3 &$\Rightarrow$ Internet Layer\\
|
||||||
|
Schicht &1-2 &$\Rightarrow$ Network Access-Layer\\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\acs{HTTP} als Anwendungsprotokoll des 4-Schichten-Internet-Modells benötigt als unterliegendes Protokoll der Transportschicht \acs{TCP} (\acs{UDP} geht nicht!).
|
||||||
191
Kapitel/03_HTTP.tex
Normal file
191
Kapitel/03_HTTP.tex
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
\chapter{\acf{HTTP}}\index{HTTP}\label{sec:http}
|
||||||
|
|
||||||
|
\textit{Was ist ein Protokoll\index{Protokoll}?} \newline
|
||||||
|
Ein Protokoll ist verbindliche Vereinbarung (Regeln), wie zwei (oder mehr) Teilnehmer miteinander kommunizieren.
|
||||||
|
|
||||||
|
\section{HTTP 0.9 (1991) - Erste Version}\label{http09}
|
||||||
|
Request: \code{GET /pdf/zur/ressource} \newline
|
||||||
|
Response: \code{<Inhalt der Ressource>} \newline
|
||||||
|
Problem: Nur Plain-Text und \acs{HTML} (erkennbar am Anfang \html{<html>}) sind erlaubt und möglich. \newline
|
||||||
|
Problem: Fehler sind nicht sicher erkennbar.
|
||||||
|
|
||||||
|
\section{HTTP 1.0 (1992)}\label{sec:http10}
|
||||||
|
Request: \code{GET /pdf/zur/ressource HTTP/1.0} \newline
|
||||||
|
Response: beginnt mit einer Statuszeile: \code{HTTP/1.0 <statuscode> <textuelle Beschreibung des statuscodes; Reason String>}
|
||||||
|
|
||||||
|
\subsection{Status Codes}\label{sec:statuscodes}\index{HTTP!Statuscode}
|
||||||
|
|
||||||
|
\begin{Hinweis}[frametitle=Hinweis zur Klausur]
|
||||||
|
Die Codes müssen nicht für die Klausur auswendig gerlernt werden. Es reichen die Gruppen.
|
||||||
|
|
||||||
|
Für alle Codes siehe auch: \url{https://de.wikipedia.org/wiki/HTTP-Statuscode}.
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \textbf{\code{1xx}}: Informational Codes \newline
|
||||||
|
\hspace*{6mm} $\Rightarrow$ Zur Anzeige, dass weitere Daten folgen (Verhinderung von Time-Outs).
|
||||||
|
|
||||||
|
\item \textbf{2xx}: Successful Client Requests
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{200} $\Rightarrow$ Ok
|
||||||
|
\item \code{204} $\Rightarrow$ Ressource leer
|
||||||
|
\item \code{206} $\Rightarrow$ Partial Content
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item \textbf{\code{3xx}}: Client Requests Redirected
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{301} $\Rightarrow$ Moved Permanently \newline
|
||||||
|
\phantom{\code{301}} $\Rightarrow$ \zB bei Domainnamensänderung, Neuordnung der Website
|
||||||
|
\item \code{302} $\Rightarrow$ Moved Temporarily \newline
|
||||||
|
\phantom{\code{302}} $\Rightarrow$ \zB bei Überlastung der Website, Wartungsmodus, temporärer Ausfall
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item \textbf{\code{4xx}}: Client Request Errors
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{400} $\Rightarrow$ Bad Request $\Rightarrow$ Der Request war nicht korrekt.
|
||||||
|
\item \code{401} $\Rightarrow$ Authorization Required $\Rightarrow$ Eine Autorisierung ist erforderlich.
|
||||||
|
\item \code{403} $\Rightarrow$ Forbidden $\Rightarrow$ Der Webserver hat \zB keinen Zugriff (auf ein Verzeichnis). Oder man greift auf ein Verzeichnis zu, ohne eine Datei anzugeben (und es gibt keine \pfad{index.html} und das Verzeichnislisting ist deaktiviert). \enquote{Wenn ich eine solche Meldung erhalte, erhält sie jeder!}
|
||||||
|
\item \code{404} $\Rightarrow$ Not Found; Der Pfad wurde nicht gefunden
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item \textbf{\code{5xx}}: Server Error
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{500} $\Rightarrow$ Internal Server Error
|
||||||
|
\item \code{505} $\Rightarrow$ HTTP Version Not Supported $\Rightarrow$ Der Server wird mit einer Version angesprochen, die er nicht unterstützt. Heute eher selten.
|
||||||
|
\end{itemize}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{HTTP Header}
|
||||||
|
Die Statuszeile wird gefolgt von einer oder mehreren \acs{HTTP}-Header-Zeilen im Format: \newline
|
||||||
|
\code{<HTTP-Headername>: <Wert>}, \zB
|
||||||
|
|
||||||
|
\begin{description}[noitemsep]
|
||||||
|
\item[\code{Content-Type: text/html}] Der Wert ist ein \acf{MIME-Type}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item besteht immer aus zwei Teilen: tlmt/slmt
|
||||||
|
\medskip
|
||||||
|
\begin{description}[noitemsep]
|
||||||
|
\item[\acf{tlmt}] \index{Media-Type!Top Level} $\Rightarrow$ grundsätzliche Medienform (text, image, video, audio, application, [ multipart])
|
||||||
|
\item[\acf{slmt}] \index{Media-Type!Sub Level} $\Rightarrow$ Angabe der konkreten Codierung (Anwendungscodierung), \zB \code{text/html }, \code{text/plain}, \code{image/jpeg}, \code{video/mp4}, \ldots
|
||||||
|
\end{description}
|
||||||
|
\medskip
|
||||||
|
|
||||||
|
\item \textbf{Achtung}: Alle \acsp{MIME-Type} sind standardisierte Werte! Dies ist standardisiert von \enquote{IANA} (Teil der \enquote{IETF} ) \newline
|
||||||
|
\textbf{Ausnahme}: \acs{slmt} beginnt mit \enquote{\code{x-}}, \zB \code{application/x-meinespezielleirgendwas}
|
||||||
|
|
||||||
|
\item Wird immer mitgegeben, außer man hat \textit{keinen} Content
|
||||||
|
(\zB bei \code{204} [siehe S.~\pageref{sec:http}])!
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[\code{Content-Length:<Größe in Bytes>}] Größe der Antwort in Bytes
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Wichtig für Anzeige von Download-Fortschrittsbalken
|
||||||
|
\item Wichtig für Caches in Browsern und Proxies
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[\code{Last-Modified: <US Datum>}] \zB \code{Jan 23rd, 2017 \ldots EST}
|
||||||
|
\item[\code{Expires: <US Datum>}] ebenfalls wichtig für Caches und Proxies
|
||||||
|
\item[\code{Content-Language:<Sprache des Inhalts>}] Menschliche Sprache des Inhalts. Kann auch bei Bildern angegeben werden, wenn dort \zB Text drauf steht.
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item 2-Letter-ISO-Language-Code ggf. mit Sprachvariante, \zB \code{de/DE-AT}, \code{fr}
|
||||||
|
\end{itemize}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Eine Leerzeile beendet die \acs{HTTP}-Header-Zeilen, danach folgt das Dokument. Die Leerzeile enthält \textbf{keine} Zeichen, auch keine Leerzeichen!
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Weitere Request-Typen}\index{HTTP!Requests}
|
||||||
|
Mit HTTP 1.0 wurden weitere Request Typen eingeführt.
|
||||||
|
|
||||||
|
\subsubsection{HEAD-Request}
|
||||||
|
\code{HEAD /pfad/zur/ressource HTTP/1.0} $\Rightarrow$ liefert nur die Statuszeile und \acs{HTTP}-Headerzeile.
|
||||||
|
|
||||||
|
\subsubsection{POST-Request}
|
||||||
|
\code{POST /pfad/zur/ressource HTTP/1.0} $\Rightarrow$ gefolgt von Parametern (signalisiert wie bei einer Response über \acs{HTTP}-Headerzeilen).
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Was funktioniert nicht?}
|
||||||
|
|
||||||
|
\acs{HTTP} 1.0 funktioniert gut, aber was funktioniert nicht bzw. was geht besser?
|
||||||
|
|
||||||
|
Ist es möglich, mehrere \acs{FQDN} auf eine IP-Adrese zu leiten? \newline
|
||||||
|
\hspace*{4mm} $\Rightarrow$ FQDN1 und FQDN2 zeigen beide auf \code{1.2.3.4}; per \acs{DNS} möglich und erlaubt! \newline
|
||||||
|
|
||||||
|
\code{GET /pfad/zur/ressource HTTP/1.0} $\Rightarrow$ Problem: Der \acs{FQDN} steht nicht im Request bei \acs{HTTP} 1.0 und wird nicht einmal für den \acs{TCP}-Verbindungsaufbau verwendet $\Rightarrow$ Der Webserver weiss nicht, welche Präsenz angefragt ist!
|
||||||
|
|
||||||
|
\begin{Achtung}
|
||||||
|
\acs{HTTP} 1.0 kann nicht erkennen, von welchem \acs{FQDN} der Request kommt! Siehe \autoref{sec:multi_präsenzen} für Möglichkeiten, dennoch verschiedene Webpräsenzen zu unterscheiden.
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\section{HTTP 1.1 (seit 1997)}
|
||||||
|
Pflicht-Header im Request:
|
||||||
|
|
||||||
|
\qquad \code{Host: $\underbrace{\text{www.dhbw-karlsruhe.de}}_{\text{angefragter FQDN}}$}
|
||||||
|
|
||||||
|
Jetzt gibt es persistene Verbindungen, \dash eine \acs{TCP}-Verbindung wird nacheinander für meherere Request/Response-Paare zwischen Client und Server genutzt. \newline
|
||||||
|
$\Rightarrow$ Es muss nicht jeweils eine neue Verbindung aufgebaut werden. Bereits vorher bei \acs{HTTP} 1.0 gab es ähnliches, nämlich den \enquote{Connection: Keepalive}-Header. Dieser ist nicht standard-konform und nur teilweise implementiert!
|
||||||
|
|
||||||
|
\begin{figure}[h]
|
||||||
|
\begin{center}
|
||||||
|
\begin{tikzpicture}
|
||||||
|
\node at (0,5.5){Client};
|
||||||
|
\node at (5,5.5){Server};
|
||||||
|
\draw [ultra thick, ->] (1,5.3) -- (5,4.1) node[midway,above,sloped]{Request};
|
||||||
|
\draw [ultra thick, <-] (1,2.6) -- (5,4) node[midway,above,sloped]{Response};
|
||||||
|
\draw [ultra thick, ->] (1,2.5) -- (5,1.1) node[midway,above,sloped]{Request};
|
||||||
|
\draw [ultra thick, <-] (1,0) -- (5,1) node[midway,above,sloped]{Response};
|
||||||
|
\end{tikzpicture}
|
||||||
|
\caption{Sequentielle Abarbeitung von Requests und Responses}
|
||||||
|
\end{center}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
Dieses Abarbeiten von Requests und Responses benötigt Zeit und verzögert das Laden eines Dokuments. Mit HTTP2 gibt es andere Möglichkeiten.
|
||||||
|
|
||||||
|
|
||||||
|
\section{HTTP 2 (seit ca. 2015)}
|
||||||
|
Siehe Wikipedia: \url{https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol#HTTP.2F2}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Multiplexen mehrerer \acs{HTTP}-Requests über eine \acs{TCP}-Verbindung per \enquote{Stream-ID} ist möglich
|
||||||
|
\item Komprimierung (auch) der \acs{HTTP}-Header möglich.
|
||||||
|
\item \enquote{Server-Push}\footnote{\url{https://en.wikipedia.org/wiki/HTTP/2_Server_Push}}, \dash ein Webserver kann nach dem Request auf eine Ressource weitere damit in Zusammenhang stehende Ressourcen mitschicken, ohne dass diese explizit vom Client angefordert wurden.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\section[Mehrere Web-Präsenzen auf einem Server]{Bereitstellung/Unterscheidung von mehreren Web-Präsenzen auf einem (großen) Webserver}\label{sec:multi_präsenzen}
|
||||||
|
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item über den Pfad/das Verzeichnis
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{http://www.uni.de/$\sim$<nachname>/}\index{Sonderzeichen!Tilde in URL} $\Rightarrow$ Mit Tilde: Unterverzeichnis im Home-Verzeichnis. Nicht für professionelle Web-Angebote geeignet.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item über verschiedene Portnummern $\Rightarrow$ auch nicht professionell
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{http://www.uni.de:4711/}
|
||||||
|
\item \code{http://www.uni.de:0815/}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item per \acf{FQDN}\index{FQDN} \enquote{Rechner} oder \enquote{Domain}-Name, welche per DNS auf eine IP-Adresse umgesetzt werden (A-Record oder Alias-Eintrag), \newline
|
||||||
|
\zB \code{http://dhbw-karlsruhe.de}, \code{http://www.uni-karlsruhe.de} $\Rightarrow$ Dies gilt als professionell
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item mehrere IP-Adressen (je eine eigene IP Adresse pro \acs{FQDN})
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item mehrere Netzwerkkarten
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \- teuer (Hardware)
|
||||||
|
\item \- Anzahl Steckplätze für Netzwerkkarten
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item mehrere IP Adressen für eine Netzwerkkarte ($\Rightarrow$ bei allen halbwegs modernen Betriebssystemen möglich, bei unixoiden Betriebssystemen \enquote{schon immer}, bei Windows seit WindowsNT [nicht bei Windows 3.1])
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Reichen die IP-Adressen aus?
|
||||||
|
\item Wie viele IP-Adressen gibt es?
|
||||||
|
\item Siehe \autoref{sec:ipv4_adressen} auf Seite~\pageref{sec:ipv4_adressen}
|
||||||
|
|
||||||
|
\end{itemize}
|
||||||
|
\end{enumerate}
|
||||||
|
\end{enumerate}
|
||||||
|
\end{enumerate}
|
||||||
38
Kapitel/04_IP.tex
Normal file
38
Kapitel/04_IP.tex
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
\chapter{IP Adresse}\label{sec:ip_adressen}
|
||||||
|
|
||||||
|
\section{IPv4}\label{sec:ipv4_adressen}
|
||||||
|
|
||||||
|
Bei einer IPv4\index{IPv4} \code{a.b.c.d} mit $a,b,c,d \in {0,...,255}$ (oder anders gesagt: IPv4 Adresse = 4-Byte-Wert bzw. 32 Bit) gibt es theoretisch $2^{32} = 2^2 \cdot 2^{30} = 2^2\cdot (2^{10})^3 \approx 2^2 \cdot 1000^3 \approx 4Mrd.$ verschiedene IPv4-Adressen.
|
||||||
|
|
||||||
|
\begin{itemize}[]
|
||||||
|
\item Tatsächlich gibt es jedoch weniger als 4 Mrd. IP-Adressen, welche für Webserver potentiell nutzbar wären. Nicht benutzt werden können:
|
||||||
|
\medskip
|
||||||
|
|
||||||
|
\begin{tabular}{cll}
|
||||||
|
-- & \code{127.0.0.0/8} & $\Rightarrow$ Loopback (der eigene Rechner) \\
|
||||||
|
-- & \code{192.168.0.0/16} & $\Rightarrow$ Private Netzwerkbereiche \\
|
||||||
|
-- & \code{172.16.0.0/12} & $\Rightarrow$ Private Netzwerkbereiche \\
|
||||||
|
-- & \code{10.0.0.0/8} & $\Rightarrow$ Private Netzwerkbereiche \\
|
||||||
|
-- & \code{224.0.0.0/4} & $\Rightarrow$ Multicast \\
|
||||||
|
-- & \code{240.0.0.0/4} & $\Rightarrow$ Future/Experimental Use \\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\item Außerdem sind in jedem Teilnetz die erste und die letzte Adresse als Netzwerkadresse bzw. Broadcast-Adresse reserviert. \newline
|
||||||
|
$\Rightarrow$ ingesamt stehen deshalb weniger als 4 Mrd. Adressen zur Verfügung.
|
||||||
|
|
||||||
|
\item Außerdem: IP-Adressen sind äußerst ungerecht auf der Welt verteilt:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Nordamerika: sehr viele
|
||||||
|
\item Europa, Australien: ordentliche Menge
|
||||||
|
\item Rest (Afrika, Asien, Südamerika): sehr wenig
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item Außerdem: immer mehr Geräte der Haushalts- und Unterhaltungselektronik sind \enquote{internetfähig} (haben einen Webserver).
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\begin{Tipp}
|
||||||
|
\textbf{Grobe Berechnung von 2er Potenzen}
|
||||||
|
|
||||||
|
Man \enquote{splittet} die Potenz auf, sodass man $(2^{10})^x$ erhält. $2^{10}$ entspricht \circa 1000 \newline
|
||||||
|
$2^{32} = 2^2 \cdot 2^{30} = 2^2\cdot (2^{10})^3 \approx 2^2 \cdot 1000^3 \approx 4Mrd.$
|
||||||
|
\end{Tipp}
|
||||||
559
Kapitel/05_HTML.tex
Normal file
559
Kapitel/05_HTML.tex
Normal file
|
|
@ -0,0 +1,559 @@
|
||||||
|
\chapter{HTML}\index{HTML}
|
||||||
|
|
||||||
|
\section{Dokumentenbeschreibungssprachen für Textdokumente}
|
||||||
|
|
||||||
|
\begin{lstlisting}
|
||||||
|
aussehenorientiert
|
||||||
|
---------------------------------------------------------->
|
||||||
|
| (SGML)
|
||||||
|
| PostScript LaTeX
|
||||||
|
Z | WordDOC
|
||||||
|
e | RTF HTML
|
||||||
|
i | PDF (XML)
|
||||||
|
t | ODT
|
||||||
|
| WordDOCX Markdown
|
||||||
|
|
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{table}[h]
|
||||||
|
\begin{tabular}{p{74mm}|p{74mm}}
|
||||||
|
\textbf{designorientiert} (PDF, \ldots ) & \textbf{strukturorientiert} (HTML, \ldots ) \\
|
||||||
|
\midrule
|
||||||
|
Textpassagen werden mit Aussehen attributiert & Textpassagen mit Bedeutung oder Funktion attributiert \\
|
||||||
|
\midrule
|
||||||
|
meist binärkodiert & meist textcodiert \\
|
||||||
|
\midrule
|
||||||
|
$\ominus$ Spezialprogramme notwendig & $\oplus$ mit jedem Texteditor editierbar \\
|
||||||
|
\midrule
|
||||||
|
$\oplus$ \acs{WYSIWYG} & $\ominus$ großes Abstraktionsvermögen nötig, um sich das endgültige Dokument vorstellen zu können \\
|
||||||
|
\midrule
|
||||||
|
$\oplus$ kurze Einarbeitungszeit & $\ominus$ lange Einarbeitungszeit \\
|
||||||
|
\midrule
|
||||||
|
$\ominus$ Inkonsistenzen bei vergleichbaren Textpassagen möglich & $\oplus$ konsistente Formatierung des gesamten Dokuments \\
|
||||||
|
\midrule
|
||||||
|
$\ominus$ nur für genau ein Ausgabemedium gedacht & $\oplus$ optional: Anpassung an verschiedene Ausgabemedien möglich
|
||||||
|
\end{tabular}
|
||||||
|
\caption{Dokumentenbeschreibungssprachen}
|
||||||
|
\end{table}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Hyper Text Markup Language (\acs{HTML})}
|
||||||
|
|
||||||
|
\acs{HTML} ist eine strukturorientierte Dokumentenbeschreibungssprache
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item basiert auf \acs{SGML} (welches 197X entstanden ist, siehe \autoref{sec:html_history})
|
||||||
|
\item textcodiert, basierend auf \acs{ASCII} (7-bit, 128 Zeichen)
|
||||||
|
\item der meiste Text existiert \enquote{nahezu unverändert} bei der Ausgabe \newline
|
||||||
|
Ausnahmen:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Entitäten/Entities $\Rightarrow$ Nicht im \acs{ASCII}-Zeichensatz enthaltene Zeichen. \newline
|
||||||
|
\zB \code{\ü $\hat{=}$ ü} (\enquote{Umlaut}) , \code{\Ö $\hat{=}$ Ö}, \code{\ß $\hat{=}$ ß} (\enquote{Ligatur} $\Rightarrow$ Zusammenfassen von mehreren zu einem druckbaren Zeichen)
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\item spezielle Zeichen:
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
\code{< \<} &\enquote{less than} \\
|
||||||
|
\code{> \>} &\enquote{greater than} \\
|
||||||
|
\code{~{} \ }& \enquote{non-breaking space}\\
|
||||||
|
\code{\& \&} &\enquote{Ampersand} \\
|
||||||
|
\code{"{} \"}& \enquote{Quotation} \\
|
||||||
|
\end{tabular}
|
||||||
|
\medskip
|
||||||
|
|
||||||
|
$\Rightarrow$ müssen mit Entitäten umschrieben werden, da sie als einfaches Zeichen eine Sonderfunktion in der Sprache \acs{HTML} besitzen \newline
|
||||||
|
$\Rightarrow$ bisher alles \enquote{named entities}, \code{\&\#nnn} $\Rightarrow$ \enquote{numbered entity} für Zeichennummer~\code{nnn} aus Unicode
|
||||||
|
\item Tags \code{$\underbrace{\text{<tagname [attribut1="Wert1"]>}}_{\text{nicht angezeigt}} \text{Text}\underbrace{\text{</tagname>}}_{\text{nicht angezeigt}}$}
|
||||||
|
\item alle \enquote{Metadaten} im \html{<head>} (\zB \html{<meta>}, \html{<style>},
|
||||||
|
\html{<script>}, \html{<title>}, \ldots )
|
||||||
|
\item Kommentare \html{<!-- Ich bin ein Kommentar -->}
|
||||||
|
\item Alles andere erscheint als Text in der Ausgabe (im Browser)
|
||||||
|
\end{itemize}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Historie von HTML}
|
||||||
|
\label{sec:html_history}
|
||||||
|
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item[\circa 1970] \acs{SGML}
|
||||||
|
\item[1992] (Ur-)HTML
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Hyperlinks waren schon möglich (ergibt sich aus HTML: \textbf{Hyper} Text\ldots )
|
||||||
|
\item Überschriften, Textabschnitte, Listen
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[1995] HTML 2.0
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Multimediafähigkeit (Bilder [keine Videos, dafür gab es Plugins wie Flash oder Quicktime])
|
||||||
|
\item Formulare (senden geht nun mit \code{POST})
|
||||||
|
\item \uwave{Textgestaltung} (ist eigentlich kein Teil der Struktur, sondern Gestaltung!)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[1996] HTML 3.2 - Zeit des Browserkrieges (Microsoft vs Mozilla/Netscape) \newline
|
||||||
|
W3C hat Version 3.0 nicht verabschieden wollen, da die Browserhersteller uneinig waren.
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Tabellen
|
||||||
|
\item (Java-)Applets
|
||||||
|
\item \uwave{Textfluss} um Grafiken (vorher waren Grafiken \enquote{inline} und der Zeilenabstand wurde vergrößert, sodass die Grafik in die Zeile passte. Alternativ konnte man noch Zeilenumbrüche verwenden)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[1997] HTML 4.0
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Stylesheets (\acs{CSS}) können eingebunden werden
|
||||||
|
\item \enquote{Unterstrichenes wurde rückgängig gemacht} (siehe oben)
|
||||||
|
\item \uwave{Frames}
|
||||||
|
\item neue Tags
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\item[2000] \acs{XHTML} 1.0 - keine neuen Inhalte im Gegensatz zu \acs{HTML} 4.0
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \acs{XML}-basierte Sprachvariante von \acs{HTML} 4.0 (strengere Grammatik)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[2001] \acs{XHTML} 1.1
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Modularisierung der Sprache \acs{XHTML} 1.0 (wichtig für kleine, nicht leistungsfähige Geräte (Handys), welche immer noch standardkonform waren, auch wenn bestimmte Module fehlten)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[2014] HTML5
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item keine \acs{XML}-Basierung, aber HTML5 \textit{kann} \acs{XML}-basiert notiert werden
|
||||||
|
\item Integration von weiteren Medienformen: Audio und Video (nativ, ohne Plugin im Browser)
|
||||||
|
\item Einbindung von \acs{SVG} und \href{http://caniuse.com/#feat=mathml}{MathML} im Quelltext
|
||||||
|
\item Standardisierung des \acf{DOM} und der JavaScript-API zu demselben
|
||||||
|
\item weitere Funktionalitäten als eigenständige Module
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Canvas (Zeichenfläche, auf die per JavaScript gezeichnet werden kann
|
||||||
|
\item Geolocation-API (per JavaScript aktuellen Ort erfahren)
|
||||||
|
\item WebStorage/LocalStorage (Speicherung von Daten im Browser)
|
||||||
|
\item WebSockets (Kommunikation zwischen Website und Webserver nach Laden der Seite)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item weitere semantische Tags:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Navigation (\html{<nav>}), Menü (\html{<menu>}), Kopf- und Fußzeilen (\html{<header>}, \html{<footer>}), Unterteilung einer \enquote{Seite} in mehrere Abschnitte (\html{<section>}) oder Artikel (\html{<article>})
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item viele syntaktische/grammatikalische Vereinfachungen sind nun erlaubt:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item kein End-Tag (bei leeren Tags, falls der nachfolgende Tag den vorherigen Tag implizit schließt)
|
||||||
|
\item kein Start-Tag, falls der Tag bedeutet, dass vorher ein anderes Tag geöffnet werden muss (\zB \html{<title>}, bevor der \html{< head>} geöffnet wurde)
|
||||||
|
\item Anführungszeichen bei Attributwerten können weggelassen werden (sofern keine Trennzeichen enthalten sind, \zB \html{<p id=test>})
|
||||||
|
\item Attributwerte (bei Attributen mit Wahrheits- oder booleschen Werten) können weggelassen werden (\zB \html{<input type="text" disabled[="disabled"]>})
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item Multimedia-Tags wie \html{<video>} und \html{<audio>}
|
||||||
|
|
||||||
|
\item HTML5 ist ein \enquote{living Standard}\newline
|
||||||
|
$\Rightarrow$ Standard verändert sich ständig, bzw. wird fortlaufend erweitert!
|
||||||
|
\end{itemize}
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
In der Klausur sollten keine Vereinfachungen verwendet werden! Zu hoher Wahrscheinlichkeit wird sowieso \acs{XHTML} gefordert!
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\begin{Tipp}
|
||||||
|
Nicht alle neuen HTML5-Module/Tags/Funktionen werden von allen Browsern unterstützt. Was in welchen Browsern verwendet werden kann, kann auf \url{http://caniuse.com/} nachgelesen werden.
|
||||||
|
\end{Tipp}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Der (X)HTML-Doctype}\index{HTML!DOCTYPE}
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=Beispiel eines XHTML 1.1 Dokuments, label=HTML_Doctype]
|
||||||
|
<?xml version="1.0" [encoding="UTF-8"] ?>
|
||||||
|
<!DOCTYPE html PUBLIC "Public-ID" "System-ID">
|
||||||
|
<!-- Für HTML5 nur:
|
||||||
|
<!DOCTYPE html> | html: Name des Root-Tags
|
||||||
|
-->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>Titel des Dokuments</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Eigentlicher Inhalt des Dokuments -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{PUBLIC}] Es handelt sich um einen öffentlichen Standard. \newline
|
||||||
|
Alternativ gibt es noch \code{SYSTEM} oder \code{PRIVATE} für selbst definierte Grammatiken mit (oder ohne) Angabe der \acs{DTD}
|
||||||
|
|
||||||
|
\item[\enquote{Public-ID}] Textuelle, exakt festgelegte \enquote{Beschreibung des Standards}, \zB \code{-//W3C//DTD XHTML 1.1//EN} bei XHTML 1.1
|
||||||
|
|
||||||
|
\item[\enquote{System-ID}] URL (Adresse), welche auf die zugrunde liegende Grammatikdatei (in Form einer \acs{DTD}) zeigt. \newline
|
||||||
|
\zB \code{http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd} bei XHTML 1.1
|
||||||
|
|
||||||
|
\item[xmlns] Der XML-Namensraum
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\begin{Hinweis}
|
||||||
|
Die \enquote{System-ID} muss für die Klausur nicht auswendig gelernt werden!
|
||||||
|
|
||||||
|
Für eine Liste verfügbarer DOCTYPEs siehe\newline
|
||||||
|
$\Rightarrow$ \url{https://www.w3.org/QA/2002/04/valid-dtd-list.html}
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\section{Wichtige (X)HTML Tags im \code{<body>}}\label{sec:wichtige_tags_xhtml}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{<h1>} bis \code{<h6>}] \enquote{heading}/Überschriften in verschiedenen Hierarchiestufen, welche aber nicht verpflichtend einzuhalten sind. Dabei ist \html{<h1>} die oberste Ebene.
|
||||||
|
|
||||||
|
\item[\code{<p>}] \enquote{Paragraph}/Textabsatz
|
||||||
|
|
||||||
|
\item[Listen] \hfill
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \html{<ul>} \enquote{Unordered List} -- Liste mit allgemeinem Aufzählungszeichen, \zB Spiegelstrich oder Aufzählungspunkt.
|
||||||
|
\item \html{<ol>} \enquote{Ordered List} -- Liste mit Nummerierung als Aufzählungszeichen, \zB Zahlen, Buchstaben oder römische Zahlen.
|
||||||
|
\item \html{<li>} \enquote{List Item} -- Aufzählungspunkte innerhalb von \html{<ul>...</ul>}
|
||||||
|
\item[$\Rightarrow$] Listen können geschachtelt werden, indem in ein \html{<li>} ein weiteres \html{<ol>/<ul>} geschrieben wird.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[\code{<dl>}] \enquote{Definition List} -- Definitionsliste
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \html{<dt>} \enquote{Definition Term} -- Begriff
|
||||||
|
\item \html{<dd>} \enquote{Definition Description}. Erklärung des Begriffs.
|
||||||
|
\item[$\Rightarrow$] zwei verschiedene Arten von Listenelementen
|
||||||
|
\item[$\Rightarrow$] Definitionslisten dürfen ebenfalls geschachtelt werden, allerdings nur im \html{<dd>}
|
||||||
|
\item[$\Rightarrow$] Die paarweise Verwendung von \html{<dt>} und \html{<dd>} ist üblich, aber nicht gefordert.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item[Hyperlink] \hfill
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \html{<a>} \enquote{anchor} -- Textanker (irreführende Bezeichnung für einen Verweis)
|
||||||
|
\item enthält Beschreibung und technisches Verweisziel.
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Beschreibung: Inhalt des Tags (\html{<a>Inhalt hier</a>})
|
||||||
|
\item Verweisziel: Attribute \html{href="..."} in Form einer \acs{URI} (siehe \autoref{sec:url_uri})
|
||||||
|
\end{itemize}
|
||||||
|
\item Beispiel: \html{<a href="http://dhbw-karlsruhe.de/">Homepage der DHBW</a>}
|
||||||
|
\item Es können auch relative \acsp{URL} angegeben werden, die jedoch mithilfe der vollständigen \acs{URL} des enthaltenden Dokuments ebenfalls zu einer vollständigen (absoluten) \acs{URL} gemacht werden (siehe \autoref{sec:relative_url} auf Seite~\pageref{sec:relative_url})
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\bigskip
|
||||||
|
\begin{Hinweis}[frametitle=Klausur -- Hinweis]
|
||||||
|
In der Klausur kann eine Fehlersuche in einem \acs{XHTML} Dokument vorkommen.
|
||||||
|
|
||||||
|
\textbf{Beispiel}: \newline
|
||||||
|
Es kommt eine unsortierte Liste, worauf ein \html{<ol>} kommt $\Rightarrow$ Ein semantischer, nicht aber grammatikalischer Fehler!
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\section{Bilder \code{<img>}} \label{sec:html_img}
|
||||||
|
|
||||||
|
\html{<img src="URL" alt="alternative Beschreibung" [width="" height=""] />}\index{HTML!Bilder}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Attribut \code{src} (\enquote{source}/Quelle) für \acs{URL} zur Bilddatei.
|
||||||
|
\item Attribut \code{alt} (\enquote{alterntive text}) für Alternativtext zur Anzeige, falls das Bild selbst nicht angezeigt wird (technische Gründe und Barrierefreiheit)
|
||||||
|
\item für mehr siehe \autoref{sec:html_img} auf Seite~\pageref{sec:html_img}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\code{width} und \code{height} enthalten (meist) die \enquote{natürliche Größe} des Bildes, um dem Browser das entsprechende Platzfreihalten zu ermöglichen, bevor die Bilddatei selbst geladen ist. Eine Skalierung ist möglich, aber:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item die Datenmenge muss dennoch komplett geladen werden
|
||||||
|
\item erhöhter Speicherplatzverbrauch im Web-Browser (Arbeitsspeicher! Es ist nicht der Cache gemeint)
|
||||||
|
\item die Qualität der Skalierung im Browser ist (meist) schlechter als bei Bildverarbeitungsprogrammen
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Tabellen}\index{HTML!Tabellen}
|
||||||
|
Tabellen sind eine zweidimensionale Struktur mit Zeilen und Spalten. Diese müssen für \acs{HTML} notwendigerweise serialisiert werden, da \acs{HTML} ein Textformat ist!
|
||||||
|
|
||||||
|
Im \acs{HTML} werden erst die Zeilen und dann die Felder (Spaltenelemente) innerhalb der Zeilen geschrieben.
|
||||||
|
|
||||||
|
Für die Tabelle gibt es folgende wichtige \acs{HTML} 3.2 Tags:
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{<tr>}] \enquote{table row} -- enthält eine Tabellenzeile
|
||||||
|
\item[\code{<td>}] \enquote{table data} -- enthält je ein Tabellenfeld
|
||||||
|
\item[\code{<th>}] \enquote{table heading}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=HTML 3.2 Tabellen]
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>a1</td> <td>a2</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>b1</td> <td>b2</td> <td>b3</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Die Anzahl der Spalten (und Zeilen) wird nicht vorab definiert. Eine unterschiedliche Anzahl an Feldern in den Zeilen ist außerdem erlaubt! Dies wird in \autoref{tbl:html_tabelle_anzahl_felder} gezeigt.
|
||||||
|
|
||||||
|
\begin{table}[h!]
|
||||||
|
\centering
|
||||||
|
\begin{tabular}{|l|l|l}
|
||||||
|
\cline{1-2}
|
||||||
|
a1 & a2 & \\
|
||||||
|
\hline
|
||||||
|
b1 & b2 & b3 |\\
|
||||||
|
\hline
|
||||||
|
\end{tabular}
|
||||||
|
\caption{Tabelle mit unterschiedlicher Anzahl an Feldern pro Zeile}
|
||||||
|
\label{tbl:html_tabelle_anzahl_felder}
|
||||||
|
\end{table}
|
||||||
|
|
||||||
|
\begin{figure}[h]
|
||||||
|
\centering
|
||||||
|
\includegraphics[scale=0.92]{Bilder/HTML_rowspan_colspan.png}
|
||||||
|
\caption{HTML-Tabelle mit zusammengefügten Feldern}
|
||||||
|
\label{fig:html_table_colspan_row}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
Statt \html{<td>} kann auch überall \html{<th>} verwendet werden, um eine Art Metadaten (Beschreibung der Tabelleninhalte) anzeigen zu lassen.
|
||||||
|
|
||||||
|
Seit \acs{HTML} 4 kann \html{<table>} zusätzlich gegliedert werden in:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \html{<thead>} Tabellenkopf (optional, max. einmal)
|
||||||
|
\item \html{<tfoot>} Tabellenfuß (optional, max. einmal)
|
||||||
|
\item \html{<tbody>} Tabellenkörper (kann mehrfach vorkommen)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Diese Reihenfolge muss eingehalten werden! Diese drei Elemente enthalten dann nur \html{<tr>}-Tags, in denen wiederum nur \html{<td>}- und \html{<th>}-Tags vorkommen dürfen.
|
||||||
|
|
||||||
|
Optionale Attribute in \html{<td>} und \html{<th>}:
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{colspan}] für nebeneinanderliegende Felder, welche das \html{<td>}/\html{<th>} überdecken soll
|
||||||
|
\item[\code{rowspan}] für Angabe der übereinanderliegenden Felder, welche das \html{<td>}/\html{<th>} überdecken soll
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Die überdeckten \html{<td>}/\html{<th>} müssen im Quelltext gestrichen/ausgelassen werden. Ein Beispiel für die Ausgabe zeigt \autoref{fig:html_table_colspan_row} mit dem dazu gehörigen \acs{HTML}-Quelltext in \autoref{lst:table_col_row_span} auf Seite~\pageref{lst:table_col_row_span}.
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=Tabelle -- \code{colspan} und \code{rowspan},label=lst:table_col_row_span]
|
||||||
|
<table border="1">
|
||||||
|
<tr>
|
||||||
|
<th>Geschäftsjahr</th>
|
||||||
|
<th>Umsatz</th>
|
||||||
|
<th>Gewinn/Verlust</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2013</td>
|
||||||
|
<td>5,8</td>
|
||||||
|
<td rowspan="2">62,8</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2014</td>
|
||||||
|
<td rowspan="2">60,0</td>
|
||||||
|
<!-- weggelassen -->
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2015</td>
|
||||||
|
<!-- weggelassen -->
|
||||||
|
<td>50,87</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3">Zusammengefasste Spalten</td>
|
||||||
|
<!-- weggelassen -->
|
||||||
|
<!-- weggelassen -->
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2" rowspan="2">Spalten + Zeilen</td>
|
||||||
|
<!-- weggelassen -->
|
||||||
|
<td>44,87</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<!-- weggelassen -->
|
||||||
|
<!-- weggelassen -->
|
||||||
|
<td colspan="3">70,78</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\section{Semantische und strukturelle Tags (meist mit HTML5 eingeführt)}
|
||||||
|
|
||||||
|
\begin{tabular}{p{30mm}p{125mm}}
|
||||||
|
\multicolumn{2}{l}{\textbf{Abschnitte}}\index{HTML!Abschnitt-Tags} \\
|
||||||
|
\midrule
|
||||||
|
\html{<body>} & gesamter Inhalt \\
|
||||||
|
\html{<section>} & Unterteilung des Dokuments ins (unabhängige) Sektionen \\
|
||||||
|
\html{<nav>} & \enquote{navigation} -- Abschnitt für Navigation (Menü, Suchfeld, \ldots) \\
|
||||||
|
\html{<article>} & inhaltlich selbstständiger Teil des Dokuments \\
|
||||||
|
\html{<aside>} & Randbemerkung (Seitennotiz), ohne die das restliche Dokument verständlich bleibt \\
|
||||||
|
\html{<h1>} \ldots \html{<h6>} & Überschriften \\
|
||||||
|
\html{<header>} & für typische Kopfzeilen/-bereiche \\
|
||||||
|
\html{<footer>} & für typische Fußzeilen/-bereiche \\
|
||||||
|
\html{<address>} & für Urheberinformationen (eine Art Metainfo, welche explizit angezeigt werden soll $\Rightarrow$ bereits in Ur-\acs{HTML} enthalten!) \\
|
||||||
|
\html{<main>} & wichtigster (eigentlicher) Inhalt der Seite (nur ein \html{<main>} pro Seite erlaubt) \\
|
||||||
|
|
||||||
|
\multicolumn{2}{l}{\textbf{Gruppen}} \index{HTML!Gruppen-Tags} \\
|
||||||
|
\midrule
|
||||||
|
\html{<p>}, \html{<ul>}, \ldots & \textit{siehe \autoref{sec:wichtige_tags_xhtml} auf Seite~\pageref{sec:wichtige_tags_xhtml}} \\
|
||||||
|
\html{<figure>} & \enquote{für Abbildungen} \\
|
||||||
|
\hspace*{3mm}\html{<figcaption>} & Über-/Unterschrift für \html{<figure>} \\
|
||||||
|
\html{<blockquote>} & Zitat mit eigenem Absatz \\
|
||||||
|
\html{<pre>} & \enquote{preformatted} -- für vorformatierten Text (darf keine Tags enthalten, Whitespace bleibt erhalten). Sinnvoll für \zB Code-Stücke. \\
|
||||||
|
\html{<div>} & \enquote{division} -- Gruppe von Text, die ohne spezielle semantische Bedeutung zusammengehalten wird (seit \acs{HTML} 4 -- siehe \autoref{sec:html_history}) \\
|
||||||
|
|
||||||
|
\multicolumn{2}{l}{\textbf{Fließtext-Elemente}} \index{HTML!Fließtext-Tags} \\
|
||||||
|
\midrule
|
||||||
|
\html{<em>} & \enquote{emphasize} -- hervorgehobene Bedeutung (seit Ur-HTML) \\
|
||||||
|
\html{<strong>} & wichtiger Text \\
|
||||||
|
\html{<i>}, \html{<b>}, \html{<u>}, \html{<tt>}, \ldots & \textit{italic}, \textbf{bold}, \uline{underline}, \texttt{teletype}, \ldots -- für unterschiedliche Arten der \newline
|
||||||
|
Hervorhebung \\
|
||||||
|
\html{<cite>} & für (kurze) Zitate \\
|
||||||
|
\html{<code>} & für Code-Bruchteile \\
|
||||||
|
\html{<span>} & Textteil ohne semantische Bedeutung (seit \acs{HTML} 4)\\
|
||||||
|
\multicolumn{2}{c}{$\Rightarrow$ größtenteils aus früheren \acs{HTML}-Version revitalisiert}
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\section{Audio- und Videoeinbindung}\index{HTML!Video}\index{HTML!Audio}
|
||||||
|
|
||||||
|
Zur Einbindung von Audio- und Videodateien werden \html{<audio>} und \html{<video>} verwendet.
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=Video- und Audioeinbindung]
|
||||||
|
<video [width="90px" height="160px" controls="controls" ...] >
|
||||||
|
<source src="URL1" type="MIME Type 1" />
|
||||||
|
<source src="URL2" type="MIME Type 2" />
|
||||||
|
<!-- weitere Quellen möglich -->
|
||||||
|
<!-- alternativ anzuzeigender Inhalt (Tags sind möglich) -->
|
||||||
|
Der Browser scheint die Wiedergabe nicht zu unterstützen.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<audio [controls ...]>
|
||||||
|
<source src="URL1" type="MIME Type 1">
|
||||||
|
<source src="URL2" type="MIME Type 2">
|
||||||
|
Der Browser scheint die Wiedergabe nicht zu unterstützen.
|
||||||
|
</audio>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Aufgaben}
|
||||||
|
Aufgaben von \url{http://dh.jroethig.de/}
|
||||||
|
|
||||||
|
\subsection*{Grundstruktur einer HTML-Datei}
|
||||||
|
|
||||||
|
Erstellen Sie eine einfache \acs{HTML}-Datei, welche nur die unbedingt notwendigen Informationen (\acs{HTML}-Tags) enthält. Rufen Sie diese Datei mit den verschiedenen auf Ihrem System verfügbaren Web-Browsern auf. Was passiert, wenn Sie notwendige Teile der \acs{HTML}-Struktur weglassen? Warum?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Grundstruktur]{Aufgaben/2017_02_27_HTML/01_Grundstruktur_einer_HTML-Datei.html}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Wenn \html{<head>} fehlt, gibt es folgende Fehlermeldung: \texttt{Element head is missing a required instance of child element title.}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Text}
|
||||||
|
Schreiben Sie nun Text in den Body Ihrer \acs{HTML}-Datei. Trennen Sie Wörter und Sätze testweise durch unterschiedliche Anzahlen von Leerzeichen und Zeilenumbrüchen. Welchen Einfluss hat dies auf die Darstellung im Web-Browser?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Text]{Aufgaben/2017_02_27_HTML/02_Text.html}
|
||||||
|
|
||||||
|
Bei mehreren Leerzeichen, Tabs oder Zeilenumbrüchen wird nur ein Leerzeichen zwischen den getrennten Worten eingefügt! Zeilenumbrüche sorgen \textit{nicht} für Zeilenumbrüche im Browser.
|
||||||
|
|
||||||
|
\subsection*{Gliederung}
|
||||||
|
Erweitern Sie Ihre \acs{HTML}-Datei um mehrere Textabschnitte. Verwenden Sie zur Gliederung des Textes zunächst nur die Tags für Überschriften und Paragraphen. Setzen Sie demgegenüber dann auch die \html{<span>}- und \html{<div>}-Tags ein. Wie unterscheidet sich deren Einsatz vom vorangegangenen?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Gliederung]{Aufgaben/2017_02_27_HTML/03_Gliederung.html}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Paragraphen und Überschriften erzeugen Abstände (Standard-Design im Browser) \ldots
|
||||||
|
\item \ldots\html{<div>} und \html{<span>} nicht
|
||||||
|
\item \html{<span>} erzeugt keine Umbrüche.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Verweise}
|
||||||
|
Bauen Sie sich eine komplette Website auf, indem Sie weitere \acs{HTML}-Seiten erstellen. Verlinken Sie diese mittels absoluter und relativer \acsp{URL}. Verändern Sie die Lokation des Dateibaumes (durch Verschieben der Dateien in ein Unterverzeichnis) und prüfen Sie die Funktionsfähigkeit der Links. Bauen Sie in Ihre Seite Verweise ein, mit welchen Sie an bestimmte Stellen im aktuellen Dokument springen können.
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Verweise]{Aufgaben/2017_02_27_HTML/04_Verweise_ohne_lorem_ipsum.html}
|
||||||
|
|
||||||
|
\pagebreak
|
||||||
|
|
||||||
|
\subsection*{Bilder}
|
||||||
|
Binden Sie nun außerdem graphische Darstellungen ein. Was passiert bei der Darstellung im Web-Browser, wenn die eingebundenen Bilder nicht geladen werden können (\zB weil sie nicht existieren oder umbenannt wurden) oder wenn Sie das automatische Laden von Bildern abschalten?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Bilder]{Aufgaben/2017_02_27_HTML/05_Bilder.html}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Es wird der Alternativ-Text angezeigt
|
||||||
|
\item Eine Box in der Größe von \code{width} und \code{height} erscheint
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Listen}
|
||||||
|
Erstellen Sie eine ungeordnete sowie eine nummerierte Liste. Bauen Sie nun zusätzlich eine weitere nummerierte Liste in die erste ungeordnete Liste ein. Wie unterscheidet sich diese von der zuerst erstellten nummerierten Liste? Experimentieren Sie mit weiteren vielfach geschachtelten Listen!
|
||||||
|
|
||||||
|
Ein weiteres Beispiel für Listen (neben unnummerierten und nummerierten) sind Definitionslisten. Erstellen Sie eine solche! Was passiert, wenn Sie die entsprechenden Tags für die Listenelemente nicht paarweise einsetzen?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Listen]{Aufgaben/2017_02_27_HTML/06_Listen.html}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Die nummerierte Liste in der unnummerierten Liste wird eingerückt.
|
||||||
|
\item Eine nummerierte Liste in einer nummerierten Liste hat andere Aufzählungszeichen.
|
||||||
|
\item Werden mehrere \html{<dd>} hinter ein \html{<dt>} geschrieben, so sind dies alternative Definitionen. Es können mehrere Definitionen für einen Begriff existieren.
|
||||||
|
\item Ein \html{<dt>} ohne \html{<dd>} ist ein Begriff ohne Erklärung / ohne Definition
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Tabellen}
|
||||||
|
Erstellen Sie eine Tabelle mit vier Zeilen und drei Spalten. Wie wird die Tabelle dargestellt, wenn einzelne Zellen keinen Inhalt besitzen? Fassen Sie zwei einzelne (nacheinander sowohl übereinander als auch nebeneinander liegende) Zellen zusammen. Experimentieren Sie mit weiteren zusammengefassten Tabellenzellen. Was passiert, wenn Sie die gleiche Tabellenzelle sowohl von oben als auch von links mit anderen Tabellenzellen zusammenfassen?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- Tabellen]{Aufgaben/2017_02_27_HTML/07_Tabellen.html}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Haben Zellen keinen Inhalt, so werden sie leer dargestellt
|
||||||
|
\item Wird die gleiche Tabellenzelle sowohl von oben als auch von links zusammengefasst, so handelt es sich um undefiniertes Verhalten!
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Verschachtelung}
|
||||||
|
Bei Listen haben Sie bereits die Verschachtelung von \acs{HTML}-Tags verwendet. Probieren Sie dies nun auch bei den anderen bislang verwendeten Tags aus! Wo macht dies Sinn? Wo ist es nutzlos? Und wo ist es (laut Spezifikation) gar verboten?
|
||||||
|
|
||||||
|
\subsection*{Semantische Tags}
|
||||||
|
\acs{HTML}5 wurde vor allem um zahlreiche \enquote{semantische Tags} ergänzt. Bauen Sie diese in Ihren Quelltext ein und schauen Sie sich das Ergebnis im Browser an! Sehen Sie in der Darstellung im Browser, ob und mit welchen semantischen Tags Sie den Quelltext ausgezeichnet haben?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=HTML5,caption=HTML-Datei -- semantische Tags]{Aufgaben/2017_02_27_HTML/08_semantische_Tags.html}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Nein, man sieht bei den meisten semantischen Tags wie \html{<main>} oder \html{<article>} nicht, dass es sich um jene handelt.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Reaktion von Browsern auf Fehler im HTML-Quellcode}
|
||||||
|
Bauen Sie absichtliche Fehler in Ihren \acs{HTML}-Quellcode ein! Typische Fehler sind beispielsweise fehlende Dokumenttyp-Deklaration, nicht geschlossene Tags, falsch geschachtelte Tags, fehlerhaft aufgebaute Tabellen (sich widersprechende colspan- und rowspan-Attribute) oder falsch geschriebene Tags. Wie reagieren die Ihnen zur Verfügung stehenden Web-Browser auf die Fehler?
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Die meisten (kleinen) Fehler werden ohne Fehlermeldung vom Browser gerendert.
|
||||||
|
\item Fehlende schließende Tags werden geschlossen.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection*{Validation von HTML-Seiten}
|
||||||
|
|
||||||
|
Zur Validierung der Korrektheit Ihres \acs{HTML}-Quellcodes dienen \acs{HTML}-Validatoren. Online im Web gibt es beispielsweise die folgenden:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \href{http://validator.w3.org/}{W3C Markup Validation Service}\footnote{\url{http://validator.w3.org/}}
|
||||||
|
\item \href{http://www.htmlhelp.com/tools/validator/}{WDG HTML Validator}\footnote{\url{http://www.htmlhelp.com/tools/validator/}}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Testen Sie Ihre Seiten (auch und gerade diejenigen mit absichtlichen Fehlern) mit diesen Validatoren auf Korrektheit! Werden alle Fehler (und insbesondere auch nur die wirklichen Fehler) erkannt? In welchen Fällen haben die Validatoren Probleme?
|
||||||
|
|
||||||
|
Testen Sie, ob und wie die Validatoren auf Ihre Deklaration der \acs{HTML}-Version reagieren. Finden Sie beispielsweise Fehler, welche nur bei \enquote{\acs{XHTML} 1.0 strict} und nicht bei \enquote{\acs{XHTML} 1.0 transitional} erscheinen! Wie reagieren die Validatoren auf die Deklaration einer \enquote{falschen} (unpassenden) \acs{HTML}-Version?
|
||||||
|
|
||||||
|
Eine Sonderposition nimmt HTMLTidy ein, da es versucht, einige häufig gemachte Fehler automatisch zu beheben. Eine Online-Version gibt es hier:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item W3C Tidy your \acs{HTML}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Was macht HTMLTidy mit Ihren Seiten, insbesondere denen mit Fehlern? Probieren Sie aus, ob und welche der Fehler behoben werden können!
|
||||||
|
|
||||||
|
Untersuchen Sie nun, welche Tags bei HTML5 weggelassen werden können, ohne dass der Validator Fehler meldet! Wie können Sie erkennen, welche Tags der Validator oder der Browser selbst ergänzt?
|
||||||
116
Kapitel/06_URL.tex
Normal file
116
Kapitel/06_URL.tex
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
|
||||||
|
\chapter{URLs und URIs}\label{sec:url_uri}\index{URL}
|
||||||
|
\acfp{URL} sind eine Teilmenge der \acfp{URI}.
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\acs{URL}] Die Adresse einer Ressource (mit allen relevanten Informationen). \newline
|
||||||
|
Beispiel für URL (und damit auch für URI): \pfad{http://www.dhbw-karlsruhe.de/}
|
||||||
|
|
||||||
|
\item[\acs{URI}] Gibt Informationen, wie eine Ressource erreicht werden kann. \newline
|
||||||
|
Beispiel für URI (aber nicht für eine URL): mailto:xyz@dhbw-karlsruhe.de
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||||
|
|
||||||
|
|
||||||
|
\section{\acl{URI} (URI)}\index{URI}
|
||||||
|
Allgemeines Format einer URI: \code{schema:info}
|
||||||
|
|
||||||
|
Beispiele für \code{schema}:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{mailto} Info ist die E-Mail Adresse
|
||||||
|
\item \code{news} Info ist die Newsgroup (und evtl. Artikel-ID)
|
||||||
|
\item \code{http} Info ist Rest der Adresse
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Falls \code{schema} = Anwendungsprotokoll $\Rightarrow$ URI ist eine URL.
|
||||||
|
|
||||||
|
\section{\acl{URL} (URL)}
|
||||||
|
|
||||||
|
Format einer \acs{URL}:\newline
|
||||||
|
\code{protocol://[uid[:pw]@]host[:port]/[directory/][resource][?parameter][\#anchor]}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{protocol}] Das Anwendungsprotokoll der Anwendung, \zB http, https, ftp)
|
||||||
|
\item[\code{uid}] User-ID, Benutzername (für zugriffsbeschränkte Ressourcen)
|
||||||
|
\item[\code{pw}] Passwort (in Browsern aus Sicherheitsgründen meist nicht implementiert)
|
||||||
|
\item[\code{host}] Name (\acs{FQDN}) oder IP-Adresse des Webservers.
|
||||||
|
\item[\code{port}] Portnummer (positive ganze Zahl).\newline
|
||||||
|
Falls nicht angegeben, so ist der Default-Port abhängig vom verwendeten
|
||||||
|
Protokoll (\zB HTTP auf Port 80, HTTPS auf Port 443)
|
||||||
|
\item[\code{/}] Der abschließende Schrägstrich (könnte auch als Pfad zur Ressource interpretiert werden).
|
||||||
|
|
||||||
|
\item[directory] Verzeichnis. Falls nicht angegeben $\Rightarrow$ Wurzelverzeichnis (\enquote{root directory}).
|
||||||
|
|
||||||
|
\item[resource] Name der Ressource im jeweiligen Verzeichnis (meist bestehend aus Name und File-Extension). Falls nichts angegeben wird, so entscheidet der Webserver über die auszuliefernde Ressource (\zB eine Default-Datei \pfad{index.html}, eine Verzeichnisauflistung oder eine Fehlermeldung).
|
||||||
|
|
||||||
|
\item[\code{parameter}] Liste von \code{GET}-Parametern in der Form\newline \code{parametername=parameterwert[\¶name2=parawert2[\&\ldots]]} (potentiell beliebig viele Parameter, beschränkt durch max. Länge aus URL\footnote{siehe \url{http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers}}).
|
||||||
|
|
||||||
|
\item[\code{anchor}] Anker: Textstelle, zu welcher der Browser direkt springt.\newline
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\begin{Achtung}
|
||||||
|
Der Anker (\code{\#xyz}) wird beim Request nicht an den Server mitgeschickt! \code{anchor} wird lokal im Browser ausgewertet, \zB durch JavaScript. PHP, welches serverseitig arbeitet, kann dies nicht auswerten.
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\subsection{Relative URLs}\label{sec:relative_url}
|
||||||
|
Es können auch relative \acsp{URL} angegeben werden, die jedoch mithilfe der vollständigen \acs{URL} des enthaltenden Dokuments ebenfalls zu einer vollständigen (absoluten) URL gemacht werden! Es wird zwischen folgenden relativen URLs unterschieden:
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[Protokoll-relative URL] beginnt mit \pfad{//...}, \pfad{host/...} (\zB HTTPS)\index{URL!Protokoll-relativ}
|
||||||
|
\item[Host-relative] (Pfad-absolute) URL: beginnt mit \pfad{/pfad...} (\zB Verweis auf zentrale Dokumente auf demselben Server wie das Impressum oder die Einstiegsseite)\index{URL!Host-relativ}\index{URL!Pfad-absolut}
|
||||||
|
\item[Pfad-relative URL] beginnt mit \pfad{pfad} (ohne Schrägstrich am Anfang; Verweis auf logisch zusammenhängende Ressourcen im selben Verzeichnis oder Unter-/Oberverzeichnis)\index{URL!Pfad-relativ}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Vorteile von relativen URLs:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item (meist) kürzer
|
||||||
|
\item \enquote{Umzugsfähigkeit} der Web-Präsenz\ldots
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \ldots auf einen anderen Server (Host-relativ)
|
||||||
|
\item \ldots in ein anderes Verzeichnis (Pfad-relativ)
|
||||||
|
\end{itemize}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Anwendung von vollständigen (Host-absoluten) URLs
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Verweis auf eine andere Web-Präsenz
|
||||||
|
\item Verweis auf den eigenen Server mit anderem Protokoll (HTTP $\Leftrightarrow$ HTTPS $\Leftrightarrow$ FTP)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Spezielle Verzeichnisnamen, welche speziell bei relativen URLs wichtig sind:
|
||||||
|
|
||||||
|
\begin{description}[noitemsep]
|
||||||
|
\item[\pfad{..}] das übergeordnete Verzeichnis (im Falle des Wurzelverzeichnisses wiederum das Wurzelverzeichnis).
|
||||||
|
\item[\pfad{.}] das aktuelle Verzeichnis
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
\textbf{Beispiel}: URL des Dokuments \pfad{http://a.b/c/d/e/f.bla}
|
||||||
|
|
||||||
|
\begin{tabular}{lll}
|
||||||
|
URL in \html{<a href="...">} & ergibt & \\
|
||||||
|
\pfad{//a.b/z/x} & $\Rightarrow$ \pfad{http://a.b/z/x} & \\
|
||||||
|
\pfad{/} & $\Rightarrow$ \pfad{http://a.b/} & Einstiegsseite des Servers \\
|
||||||
|
\pfad{./} & $\Rightarrow$ \pfad{http://a.b/c/d/e/} & Default-Dokument im aktuellen Verzeichnis \\
|
||||||
|
\pfad{../.././../bla/fasel/././../da} & $\Rightarrow$ \pfad{http://a.b/bla/da} &
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Anker}
|
||||||
|
|
||||||
|
\html{<a>} für Textanker im Dokument (auf die mit \pfad{\#ankername} gesprungen werden kann).
|
||||||
|
|
||||||
|
\html{<a name="ankername">Hierhin kann ich springen</a>} (ursprüngliche Variante) bzw.
|
||||||
|
|
||||||
|
\html{<a id="ankername">Hierhin auch</a>} (neuere/spätere Variante)
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
\code{id} ist ein \enquote{Universalattribut} und kann mit (fast) jedem Tag verwendet werden.
|
||||||
|
Der Tag wird dann über \pfad{\#ankername} ebenfalls direkt anspringbar!
|
||||||
|
|
||||||
|
$\Rightarrow$ Das \html{<a>}-Tag ist für Verwendung als Textanker heute nicht mehr notwendig! Es reicht die ID \zB eines \html{<h1>}-Tags.
|
||||||
|
\end{Hinweis}
|
||||||
462
Kapitel/07_CSS.tex
Normal file
462
Kapitel/07_CSS.tex
Normal file
|
|
@ -0,0 +1,462 @@
|
||||||
|
\chapter{CSS}\index{CSS}
|
||||||
|
\acf{CSS} ist eine Sprache, welche \acs{HTML} (und andere Sprachen) mit Aussehen versieht. Es gibt eine Vielzahl an Quellen von \acs{CSS}-Regeln (Kaskade\index{Kaskade})
|
||||||
|
|
||||||
|
Die Einbindung von \acs{CSS} in \acs{HTML} ist möglich durch:
|
||||||
|
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item Universalattribut \code{style} für jeden Tag im \html{<body>} verwendbar\newline
|
||||||
|
\html{<h1 style="color: red;">Rote Überschrift</h1>}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item[$\ominus$] keine Trennung von Struktur und Aussehen
|
||||||
|
\item[$\oplus$] gut für Prototyping und für explizit anders aussehende Elemente
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\item \html{<style>}-Tag im \html{<head>} der \acs{HTML}-Seite (siehe \autoref{code:html5_style_tag} auf Seite~\pageref{code:html5_style_tag} als Beispiel)
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item[$\oplus$] Trennung von Aussehen und Struktur klar innerhalb der Datei
|
||||||
|
\item[$\oplus$] eine Regel hat Auswirkung auf alle selektierten Tags $\Rightarrow$ einheitliches Aussehen wird ermöglicht
|
||||||
|
\item[$\ominus$] Design ist separat in jeder Seite vorhanden, bei Designänderungen müssen alle HTML-Seiten angepasst werden
|
||||||
|
\end{itemize}
|
||||||
|
\item \html{<link>}-Tag im \html{<head>} der \acs{HTML}-Seite (siehe \autoref{code:html5_link_tag} auf Seite~\pageref{code:html5_link_tag} als Beispiel)\newline
|
||||||
|
Das Attribut \code{rel} (\enquote{relation}) gibt die Beziehung an. Auch möglich: \enquote{alternate stylesheet} für verschiedene auswählbare Aussehensvarianten.
|
||||||
|
|
||||||
|
Das Attribut \code{media} gibt das Ausgabegerät an. Beispiele:
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
\begin{tabular}{cll}
|
||||||
|
• & \code{all} & $\Rightarrow$ für alle Ausgabegeräte \\
|
||||||
|
• & \code{screen} & $\Rightarrow$ für (Computer-)Bildschirme \\
|
||||||
|
• & \code{print} & $\Rightarrow$ für Ausdrucke der Seite \\
|
||||||
|
• & \code{speech} & $\Rightarrow$ für Blinde oder Sehbehinderte. Die Seite wird vorgelesen. Bestimmte\\
|
||||||
|
& & \phantom{$\Rightarrow$} Menüpunkte können dafür \zB ausgeblendet werden.\\
|
||||||
|
• & \code{handheld} & $\Rightarrow$ für sehr kleine Geräte (veraltet)\\
|
||||||
|
\end{tabular}
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=HTML \texttt{<style>}-Tag,label=code:html5_style_tag]
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Blabla</title>
|
||||||
|
<style type="text/css">
|
||||||
|
h1 { color: red; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>rote Überschrift</h1>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=HTML \texttt{<link>}-Tag,label=code:html5_link_tag]
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Blabla</title>
|
||||||
|
<link href="URL" type="text/css" rel="stylesheet" title="Name der Auswahlvariante" media="all" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
...
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
|
||||||
|
\section{\code{@import}-Statement}\index{CSS!import}
|
||||||
|
\code{@import}-Statement zu Beginn eines \acs{CSS}-Regelblocks (externe \acs{CSS}-Datei oder innerhalb des Style-Tags). Hiermit wird eine andere \acs{CSS}-Datei eingebunden.
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\begin{lstlisting}[language=CSS,caption={@import-Anweisung in CSS}]
|
||||||
|
@import "URL/zur/datei.css" [mediatype]; // oder:
|
||||||
|
@import url("URL/zur/datei.css") [mediatype];
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{mediatype}] optional, \zB \code{all}, \code{sceen}, \code{speech}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
\section{CSS Struktur}\index{CSS!Struktur}
|
||||||
|
|
||||||
|
\acs{CSS} besteht aus beliebig vielen \enquote{Regeln}. Jede Regel besteht aus (mindestens) einer Zeile. Jede Regel besteht aus \enquote{Selektor} und \enquote{Deklaration} im Format:
|
||||||
|
|
||||||
|
\qquad \css{selector \{ declaration; \}}
|
||||||
|
|
||||||
|
Jede Regel kann mehrere Selektoren enthalten, welche durch Kommata voneinander getrennt werden.
|
||||||
|
Jede Regel kann mehrere Deklarationen enthalten, welche in derselben geschweiften Klammer jeweils mit \enquote{;} abgeschlossen werden.
|
||||||
|
Der Selektor wählt die Elemente (\enquote{Tags}) aus, für welche die Regel gilt. Die Deklaration gibt das \enquote{Aussehen} für die selektierten Elemente vor, \zB:
|
||||||
|
|
||||||
|
\qquad \css{h1, h2 \{ color: red; font-size: 16pt; \}}
|
||||||
|
|
||||||
|
Ein Selektor ist im einfachsten Fall ein Tagname, \zB \code{h1} (oder die Wildcard \enquote{\code{*}} für alle Tagnamen).
|
||||||
|
|
||||||
|
|
||||||
|
Eine Deklaration besteht aus einer Eigenschaft (property) und einem Wert (value) im Format:
|
||||||
|
|
||||||
|
\qquad \code{property: value;}
|
||||||
|
|
||||||
|
\subsection{Positionierung: \enquote{Box-Model}}
|
||||||
|
|
||||||
|
In \acs{CSS} gibt es das sogenannte \enquote{Box-Model}. Was es genau bedeutet, wird in \autoref{fig:css_modell}\footnote{Quelle: \url{https://wiki.selfhtml.org/wiki/CSS/Box-Modell}} gezeigt.
|
||||||
|
|
||||||
|
\begin{figure}[ht]
|
||||||
|
\centering
|
||||||
|
\includegraphics[width=0.8\textwidth]{Bilder/CSS_Box_Modell.png}
|
||||||
|
\caption{CSS Box Modell}
|
||||||
|
\label{fig:css_modell}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
\css{div \{ width: 40mm; padding: 3mm; border-width: 2mm; margin: 5mm; \}}
|
||||||
|
|
||||||
|
$\Rightarrow$ Gesamtbreite: 60mm, da padding, border-width und margin doppelt gezählt werden.
|
||||||
|
|
||||||
|
Falls es keine explizite Angabe durch den Autor der Seite gibt, so wird folgendes verwendet:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item default-Vorgabe (\code{user-agent})
|
||||||
|
\item dynamische Anpassung (hier an den Inhalt)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection{Eigenschaften/\enquote{properties}}
|
||||||
|
|
||||||
|
\subsubsection{Eigenschaft \enquote{\code{display}}}
|
||||||
|
|
||||||
|
Die Eigenschaft \code{display} gibt an, wie die Elemente im Fluss dargestellt werden:
|
||||||
|
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
\code{display: inline;} & Innerhalb einer Zeile (sofern genug Platz)\\
|
||||||
|
\code{display: block;} & Beginnt und endet auf jeden Fall in einer eigenen Zeile\\
|
||||||
|
\code{display: none;} & Element wird nicht dargestellt und nimmt auch keinen Platz ein
|
||||||
|
\end{tabular}
|
||||||
|
\bigskip
|
||||||
|
|
||||||
|
Es gibt noch weitere \code{values} als Spezialfälle für Tabellen, Listen, \ldots
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\begin{Tipp}
|
||||||
|
Eine Alternative zu \code{display: none;} ist \code{visibility: hidden;} (anstatt \code{visibility: visible;}). Damit wird das Element nicht dargestellt, nimmt aber seinen Platz in Anspruch.
|
||||||
|
\end{Tipp}
|
||||||
|
|
||||||
|
|
||||||
|
\subsubsection{Eigenschaft \enquote{\code{position}}}
|
||||||
|
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
\code{position: static;} & \enquote{normale} Position, Default-Wert \\
|
||||||
|
\code{position: relative;} & relative Verschiebung zur \enquote{normalen} Position\\
|
||||||
|
& Der Platzbedarf bleibt an der ursprünglichen Position erhalten \\
|
||||||
|
\code{position: absolute;} & Positionierung relativ zum nächsten Vorfahren, welches eine \\
|
||||||
|
& von \code{static} verschiedene Position aufweist (bzw. \html{body}) \\
|
||||||
|
\code{position: fixed;} & Positionierung relativ zum Browserfenster (\enquote{viewport}) \\
|
||||||
|
\end{tabular}
|
||||||
|
\bigskip
|
||||||
|
|
||||||
|
Unterschied \code{fixed} zu \code{static}/\code{absolute}/\code{relative}: scrollt nicht mit bzw. scrollt mit.
|
||||||
|
|
||||||
|
Unterschied \code{absolute}/\code{fixed} zu \code{static}/\code{relative}: Element hat keinen Platzbedarf bzw. hat Platzbedarf.
|
||||||
|
|
||||||
|
Die tatsächliche \enquote{Position} wird angegeben mittels \code{top}, \code{bottom}, \code{left} und \code{right}.
|
||||||
|
|
||||||
|
\code{width}, \code{right}, \code{margin}, \code{top}, \ldots erwarten Längenangaben als Werte. Diese können sein:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item absolute Werte, \zB $50mm$, $3in$, $2pt$ (\enquote{Punkt der Schriftsetzer}) $\Rightarrow$ werden selten verwendet
|
||||||
|
\item relative Werte, \zB \medskip
|
||||||
|
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
300px & Pixel, \dash relativ zur Bildschirmauflösung. Meist ungünstige Wahl \\
|
||||||
|
& für allgemeine Größenangaben, verwendet \zB für \code{border} Angaben \\
|
||||||
|
50\% & Prozentangabe, \dash relativ zur entsprechenden Bezugsgröße des Elternelements \\
|
||||||
|
& meist oder oft eine gute Wahl (\code{width} $\Rightarrow$ \code{width}, \code{top} $\Rightarrow$ \code{height}) \\
|
||||||
|
2em & Breite des Kleinbuchstabens \enquote{m} in der aktuellen Schrift. Ebenfalls eine gute Wahl. \\
|
||||||
|
4rem & Breite des Kleinbuchstabens \enquote{m} in der Schrift des \code{root} Elements \\
|
||||||
|
& (für die Unterstützung siehe \url{http://caniuse.com/\#feat=rem}) \\
|
||||||
|
3ex & Höhe des Kleinbuchstabens \enquote{x} in der aktuellen Schrift \\
|
||||||
|
&
|
||||||
|
\end{tabular}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsubsection{Eigenschaften \enquote{margin}, \enquote{padding}, \enquote{border-width}, \ldots}
|
||||||
|
|
||||||
|
Diese Eigenschaften sind Sammeleigenschaften für die Dimensionen an allen vier Seiten.
|
||||||
|
|
||||||
|
\begin{tabular}{llll}
|
||||||
|
margin-top & padding-top & border-top-width & \ldots \\
|
||||||
|
margin-right & padding-right & border-right-width & \ldots \\
|
||||||
|
margin-bottom & padding-bottom & border-bottom-width & \ldots \\
|
||||||
|
margin-left & padding-left & border-left-width & \ldots
|
||||||
|
\end{tabular}
|
||||||
|
\bigskip
|
||||||
|
|
||||||
|
Gesammelt ergibt dies zum Beispiel:
|
||||||
|
|
||||||
|
\qquad \code{margin: 1mm 2mm 3mm 4mm;}
|
||||||
|
|
||||||
|
Die Eigenschaften werden in der Reihenfolge \code{top}, \code{right}, \code{bottom} und \code{left} mit Leerzeichen getrennt angegeben.
|
||||||
|
Es können aber auch weniger Werte angegeben werden. Fehlende Werte werden ersetzt:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item left = right (3 oder 2 Werte)
|
||||||
|
\item bottom = top (2 Werte)
|
||||||
|
\item left = bottom = right = top (1 Wert)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\code{border} ist auch eine Sammeleigenschaft für:
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item \code{border-width} $\Rightarrow$
|
||||||
|
\item \code{border-style} $\Rightarrow$ jeweils ebenfalls eine Sammeleigenschaft für vier Seiten
|
||||||
|
\item \code{border-color} $\Rightarrow$
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{border-style}] \texttt{solid | dotted | dashed | double | \ldots | none}
|
||||||
|
\item[\code{border-color}] \hfill
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \texttt{red | green | blue|...}
|
||||||
|
\item \texttt{\#abc1f5} (RGB-Angabe, je zwei Zeichen)
|
||||||
|
\item \texttt{\#a5f} $\hat{=}$ \texttt{\#aa55ff} (RGB-Angabe, je ein Zeichen)
|
||||||
|
\item \texttt{rgb(122,231,85)} (RGB-Angabe)
|
||||||
|
\item \texttt{rgba(122,231,85,0.5)} (RGB-Angabe + Alpha-Kanal für Deckkraft von 0 bis 1)
|
||||||
|
\item weitere Farbmodelle sind \uA \code{hsl(\ldots), hsla(\ldots), \ldots}
|
||||||
|
\item weiteres Schlüsselwort, manchmal anwendbar (\zB für Hintergrundfarbe): \code{transparent} (bei \code{rgba()} nicht mehr notwendig
|
||||||
|
\end{itemize}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Weitere Eigenschaften mit Farbangaben sind \uA:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{color} (Schriftfarbe)
|
||||||
|
\item \code{background-color} (Hintergrundfarbe)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\subsubsection{Eigenschaften für den Hintergrund}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{background-image: url("{}url/zum/bild.jpg"{});}
|
||||||
|
\item \code{background-repeat: no-repeat | repeat | repeat-x | repeat-y;}
|
||||||
|
\item \code{background-position: left|right|center top|bottom|center;}\newline oder Längenangabe (mit Positionierung der Bildmitte)
|
||||||
|
\item \code{background-attachment: fixed | scroll;}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsubsection{Eigenschaften für Schriften}
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{font-style: normal|italic|oblique} schräggestellte Schrift
|
||||||
|
\item \code{font-variant: normal|small-caps} \enquote{Kapitälchen}
|
||||||
|
\item \code{font-weight: normal|bold|bolder|lighter|X\%|Zahl} Schriftdicke: Die meisten Schriften unterstützen nur zwei verschiedene Schriftdicken
|
||||||
|
\item \code{font-size:} Schriftgröße -- Angabe der Längenangabe (vorzugsweise Prozentwerte)
|
||||||
|
\item \code{font-family: \textquotedbl{}Name der Schriftfamilie\textquotedbl | serif | sans-serif | cursive | monospace | fantasy } \newline
|
||||||
|
Alternativangaben werden durch Kommata getrennt angegeben
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Die Sammeleigenschaft dafür ist \code{font}.
|
||||||
|
|
||||||
|
|
||||||
|
\section{Ergänzungen -- CSS}
|
||||||
|
|
||||||
|
Positionierung:
|
||||||
|
\enquote{dritte} Dimension: \code{z-index: <Zahlenwert>;}
|
||||||
|
|
||||||
|
$\Rightarrow$ Element mit größeren \code{z-index} überlagern Elemente mit kleinerem \code{z-index}
|
||||||
|
|
||||||
|
\begin{figure}[h]
|
||||||
|
\centering
|
||||||
|
\begin{tikzpicture}[
|
||||||
|
scale=0.80,
|
||||||
|
knoten/.style={
|
||||||
|
rectangle,
|
||||||
|
fill=green!15,
|
||||||
|
draw=green!70!black,
|
||||||
|
minimum width=14mm,
|
||||||
|
inner sep=5pt
|
||||||
|
},
|
||||||
|
thick
|
||||||
|
]
|
||||||
|
|
||||||
|
\node[knoten] at (0,0) (BODY) {<body>};
|
||||||
|
\node[knoten] at (-3,-2) (DIV1) {<div>~~~~}; \node[red] at ($(DIV1) + (0.8,0)$) {2};
|
||||||
|
\node[knoten] at (3,-2) (DIV2) {<div>~~~~}; \node[red] at ($(DIV2) + (0.8,0)$) {4};
|
||||||
|
\node[knoten] at (-6,-4) (P1) {<p>~~~~}; \node[red] at ($(P1) + (0.7,0)$) {1};
|
||||||
|
\node[knoten] at (-3.5,-4) (UL) {<ul>~~~~~}; \node[red] at ($(UL) + (0.75,0)$) {2};
|
||||||
|
\node[knoten] at (-1,-4) (P2) {<p>~~~~~}; \node[red] at ($(P2) + (0.7,0)$) {5};
|
||||||
|
\node[knoten] at (2,-4) (DIV3) {<div>~~~~}; \node[red] at ($(DIV3) + (0.8,0)$) {3};
|
||||||
|
\node[knoten] at (4.5,-4) (H1) {<h1>~~~~}; \node[red] at ($(H1) + (0.8,0)$) {1};
|
||||||
|
|
||||||
|
|
||||||
|
\draw[->,thick] (BODY) -- (DIV1) ;
|
||||||
|
\draw[->,thick] (BODY) -- (DIV2) ;
|
||||||
|
\draw[->,thick] (DIV1) -- (P1) ;
|
||||||
|
\draw[->,thick] (DIV1) -- (UL) ;
|
||||||
|
\draw[->,thick] (DIV1) -- (P2) ;
|
||||||
|
\draw[->,thick] (DIV2) -- (DIV3) ;
|
||||||
|
\draw[->,thick] (DIV2) -- (H1) ;
|
||||||
|
|
||||||
|
|
||||||
|
\draw[blue,very thick,->] (P2) to[out=-60,in=-110] (DIV3);
|
||||||
|
\node[blue] at ($(P2)+(1.4,-1.6)$) {liegt unter};
|
||||||
|
|
||||||
|
\end{tikzpicture}
|
||||||
|
\caption{Beispiel -- Z-Index}
|
||||||
|
\label{fig:abb_1}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
Wie in \autoref{fig:abb_1} zu sehen ist, bezieht sich der \code{z-index} auf den aktuellen Kontext und nicht notwendigerweise dokumentenweit.
|
||||||
|
|
||||||
|
\begin{figure}[ht]
|
||||||
|
\centering
|
||||||
|
\includegraphics[width=0.6\textwidth]{Bilder/CSS_float.png}
|
||||||
|
\caption{CSS -- \code{float}}
|
||||||
|
\label{fig:css_float}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
Umfließen von Inhalten mit \code{float: none|left|right;} (siehe \autoref{fig:css_float}).
|
||||||
|
|
||||||
|
Nachfolgende Inhalte befinden sich bei \code{left} auf der rechten Seite (das Bild links). Möchte man \zB die nächste Überschrift nicht neben den \code{floats} haben, so kann man dies machen mit:
|
||||||
|
|
||||||
|
\code{clear: none|left|right|both;}
|
||||||
|
|
||||||
|
Damit werden alle offenen (\code{left/right}) \code{floats} vor dem aktuellen Element gesetzt/\enquote{geschlossen}.
|
||||||
|
|
||||||
|
\subsection{Selektoren}\index{Selektoren}
|
||||||
|
|
||||||
|
Regeln werden vererbt (auf Kinder und Kindeskinder).
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=CSS,caption=Selektoren]
|
||||||
|
body { font-size: 12pt; }
|
||||||
|
h1 { font-size: 18pt; }
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Grundsätzlich gilt die Regel mit dem für das jeweilige Element spezifischsten Selektor. Weniger weit vererbte Selektoren sind spezifischer.
|
||||||
|
|
||||||
|
Eigenschaft für Aufzählungszeilen bei Listen:
|
||||||
|
|
||||||
|
\css{li \{ list-style-type: decimal; \}}\newline
|
||||||
|
$\Rightarrow$ gilt für alle \html{<li>} (sowohl für \html{<ul>} als auch für \html{<ol>}).
|
||||||
|
|
||||||
|
Deswegen ist folgendes besser: \css{ol \{ list-style-type: decimal; \}}
|
||||||
|
|
||||||
|
\subsubsection{Kontextselektoren}\index{Selektoren!Kontext}
|
||||||
|
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
\code{ol li \{\ldots \}} & $\Rightarrow$ gilt für alle \html{<li>}-Nachfolger eines \html{<ol>} \\
|
||||||
|
\code{ol > li \{\ldots \}} & $\Rightarrow$ gilt für alle \textit{direkten} \html{<li>}-Nachfolger eines \html{<ol>} \\
|
||||||
|
\code{h1 \circa{} p \{\ldots \}} & $\Rightarrow$ gilt für \html{<p>}, wenn es einen vorangegangenen Geschwisterknoten \html{<h1>} gibt. \\
|
||||||
|
\code{h1 + p \{ \ldots \}} & $\Rightarrow$ gilt für \html{<p>}, wenn es einen direkten Vorgänger \html{<h1>} gibt. \\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
Die Kombination von Selektoren ist möglich:\newline
|
||||||
|
\hspace*{5mm} \code{h1 + p + p \{\ldots \}} $\Rightarrow$ gilt für das genau 2. \html{<p>} welches direkt auf \html{<h1>} folgt.
|
||||||
|
|
||||||
|
Kontextselektoren sind spezifischer als Selektoren ohne Kontext!
|
||||||
|
|
||||||
|
\subsubsection{Attributselektoren}\index{Selektoren!Attribut}
|
||||||
|
|
||||||
|
\begin{tabular}{p{5.8cm}lp{9.3cm}}
|
||||||
|
\code{a[href] \{\ldots \}} & $\Rightarrow$ & gilt für \html{<a>}-Tags mit \code{href}-Attribut. \\
|
||||||
|
\code{a[href="{}/"] \{\ldots \}} & $\Rightarrow$ & gilt für \html{<a>}-Tags mit Wert von \code{href}-Attribut \enquote{/} (Verweis auf die Einstiegsseite). \\
|
||||||
|
\code{a[href\^{}="http"] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, deren \code{href}-Attribut mit \enquote{http} beginnt \\
|
||||||
|
\code{a[href\^{}="http://"], a[href\^{}="https://"] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf externe Seiten verlinken. \\
|
||||||
|
\code{a[href\$=".pdf"] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf eine PDF verweisen.\\
|
||||||
|
\code{a[href*="google."] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf Google verweisen (bzw. die \code{google.} enthalten.\\
|
||||||
|
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\subsubsection{Klassenselektoren}\index{Selektoren!Klasse}
|
||||||
|
|
||||||
|
\code{div.klassenname \{\ldots\}} $\Rightarrow$ gilt für alle \html{<div>} der Klasse \enquote{klassenname}\newline (\html{<div class="klassenname"></div>}).
|
||||||
|
|
||||||
|
Ein Klassenselektor ist spezifischer als beliebig viele Kontexte eines Selektors.
|
||||||
|
|
||||||
|
|
||||||
|
\subsubsection{ID-Selektoren}\index{Selektoren!ID}
|
||||||
|
\code{div\#idwert \{\ldots\}} $\Rightarrow$ gilt für einen \html{<div>} mit ID \enquote{idwert}.
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
\code{.klassenname} und \code{\#idwert} anstatt \code{div.klassenname} und \code{div\#idwert} ist auch möglich. Dann gibt es keine Beschränkung auf bestimmte Elementarten!
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
Ein ID-Selektor ist auf jeden Fall spezifischer als ein Klassenselektor!
|
||||||
|
|
||||||
|
\pagebreak
|
||||||
|
\subsubsection{Pseudoklassen}\index{Selektoren!Pseudoklassen}
|
||||||
|
Einige Pseudoklassen sind abhängig von \enquote{externen Randbedingungen}
|
||||||
|
|
||||||
|
\begin{tabular}{llp{11cm}}
|
||||||
|
\code{a:link} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, welche Hyperlinks darstellen \newline
|
||||||
|
(Alternative für \code{a[href] \{\ldots\}}).\\
|
||||||
|
\code{a:visited \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, welche \textit{besuchte }Hyperlinks darstellen).\\
|
||||||
|
\code{a:focus \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die den aktuellen Fokus haben\newline
|
||||||
|
(\zB mit der Tab Taste).\\
|
||||||
|
\code{a:hover \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, über der sich der Mauszeiger im Moment befindet.\\
|
||||||
|
\code{a:active \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die im Moment geklickt werden.\\
|
||||||
|
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
\begin{Achtung}
|
||||||
|
Alle Selektoren sind gleich spezifisch, \dash die Reihenfolge ist wichtig. Die letztnotierte Regel überschreibt die anderen. Im oberen Beispiel darf deswegen \code{a:link \{...\}} nicht nach \code{a:hover \{...\}} stehen, da dies ansonsten überschrieben werden würde.
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\subsubsection{Pseudoelemente}\index{Selektoren!Pseudoelemente}
|
||||||
|
|
||||||
|
\code{a[href\^{}="http://"]:after \{ content: "{}Achtung! Externer Link"; \}} \newline
|
||||||
|
\code{a[href\$=".pdf"]:after \{ content: url("logo-pdf.png"); \}} \newline
|
||||||
|
\code{a[href\$=".pdf"]:before \{ content: url("logo-pdf.png"); \}} \newline
|
||||||
|
|
||||||
|
weitere sind \uA
|
||||||
|
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
\code{:first-letter \{\ldots\}} & Der erste Buchstabe \\
|
||||||
|
\code{:first-line \{\ldots\}} & Die erste Zeile \\
|
||||||
|
\code{:first-child \{\ldots\}} & Das erste Kindelement \\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
Es gibt noch viele weitere Pseudoelemente in aktuellen \acs{CSS} Versionen, die jedoch nicht für die Vorlesung von Bedeutung sind.
|
||||||
|
|
||||||
|
Selektoren mit Pseudoklassen haben grundsätzlich dieselbe Spezifität wie \enquote{normalen} Klassen.
|
||||||
|
|
||||||
|
\pagebreak
|
||||||
|
\subsection{Quellen von CSS-Regeln}\label{sec:CSS_Quellen}
|
||||||
|
Es gibt verschiedene Quellen von CSS-Regeln. Diese sind:
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[author] Vom Webautor
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \html{<link>}-Tag (am \enquote{unspezifischsten})
|
||||||
|
\item \html{<style>}-Tag im \html{<head>} (dazwischen)
|
||||||
|
\item \html{style}-Attribut (ist am spezifischsten)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
(bei gleicher Spezifität der Selektoren)
|
||||||
|
|
||||||
|
Grundsätzlich: Eine Regel (bzw. beim \code{style}-Attribut die Deklaration) überschreibt andere Regeln mit gleicher Spezifität des Selektors, welche sich \enquote{weiter weg vom Element} befinden.
|
||||||
|
|
||||||
|
|
||||||
|
\item[user] Betrachter der Website.
|
||||||
|
\item[user-agent] Webbrowser, mit dem der User die Seite anschaut.
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Prioritätenreihenfolge (bei gleicher Spezifität des Selektors):
|
||||||
|
|
||||||
|
\hspace*{5mm} \code{author > user > user-agent}
|
||||||
|
|
||||||
|
\textbf{Barrierefreiheit?}
|
||||||
|
|
||||||
|
Mit \code{!important} kann die Priorität einer Deklaration erhöht werden:\newline
|
||||||
|
\hspace*{5mm} \code{body \{ \textit{font-family: serif !important}; font-size:50pt; \}}
|
||||||
|
|
||||||
|
Nur die Schriftfamiliendeklaration hat Vorrang vor allen anderen Deklarationen ohne \code{!important}.
|
||||||
|
|
||||||
|
Es gibt eine andere Prioritätsreihenfolge bei \code{!important}:\newline
|
||||||
|
\hspace*{5mm} \code{user > author}
|
||||||
|
|
||||||
|
Der \code{user-agent} hat keine \code{!important}-Deklarationen!
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\begin{Hinweis}[frametitle={Beispiel für eine Klausuraufgabe}]
|
||||||
|
Es ist eine \acs{HTML}- und \acs{CSS}-Datei vorgegeben. Die \acs{HTML}-Datei enthält Überschriften unterschiedlicher Art, welche unterschiedlich gestyled wurden (über IDs, Klassen, \ldots). Auch user- und author-Stylesheets wurden angegeben.
|
||||||
|
|
||||||
|
Die Klausurfrage lautet dann: \enquote{Welche Farbe wird für welche Überschrift verwendet?}
|
||||||
|
\end{Hinweis}
|
||||||
76
Kapitel/08_Projekt.tex
Normal file
76
Kapitel/08_Projekt.tex
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
\chapter{Projekt}
|
||||||
|
Es muss vorher mit Herrn Röthig abgesprochen werden, welches Projekt gewählt wird.
|
||||||
|
|
||||||
|
Folgende Projekte stehen zur Verfügung:
|
||||||
|
|
||||||
|
\begin{enumerate}
|
||||||
|
\item \textbf{Stammbäume und Familientafel} -- Datenerfassung, Speicherung und Darstellung
|
||||||
|
|
||||||
|
Aufgabe ist es, Personendaten, wie sie für Stammbäume und Familientafeln verwendet werden, eingeben, speichern und in geeigneter Form darstellen zu können. Zur Eingabe wie zur Ausgabe der Daten ist ein gängiger (moderner) Web-Browser (Firefox, Chrome) vorzusehen, die Datenhaltung erfolgt auf dem Webserver in einer einfachen (strukturierten) Textdatei. Alternativ kann bei Interesse zur Datenspeicherung auch eine \acf{RDB} zum Einsatz kommen.
|
||||||
|
|
||||||
|
Zu verwendende Techniken:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Datenhaltungsformat: \acs{XML}/\acs{XML}-ähnlich, alternativ \acs{RDB}
|
||||||
|
\item Datentransferformat: \acs{XML}
|
||||||
|
\item Definition des Datenformats: \acs{DTD}
|
||||||
|
\item Wartung per \acs{XSLT} in das Ausgabeformat
|
||||||
|
\item Ausgabeformat: XHTML und/oder \acs{SVG}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Eingabe der Daten: \acs{HTML}-Formulare, JavaScript, einfache serverseitige Auswertung und Abspeicherung in beliebiger webserver-fähiger Programmiersprache (PHP, Perl, bash, \ldots). Ausgabe der Daten/Transfomation in darstellbare Form: mittels \acs{XSLT} nach \acs{HTML} und/oder (alternativ) \acs{SVG}.
|
||||||
|
|
||||||
|
Die Arbeit ist gruppenweise für geeignete Teilaufgaben zu bearbeiten. Für einzelne Teilaufgaben können auch Alternativlösungen von mehreren Gruppen erarbeitet werden, die dann austauschbar in das Gesamtprojekt integrierbar sein sollten.
|
||||||
|
|
||||||
|
Teilaufgaben wären beispielsweise die Definition der Datenstruktur, die clientseitige Eingabekomponente, die Dateneingabe und -haltung auf dem Server, die Ausgabe im Webbrowser. Letztere sollte idealerweise in verschiedenen Formen und parametrisierbar erfolgen können, beispielsweise die Ahnentafel von X oder alle Nachkommen von Y.
|
||||||
|
|
||||||
|
Es sollte mindestens eine komplette Lösung am Ende als Ergebnis zustande kommen.
|
||||||
|
|
||||||
|
\item \textbf{Terminverwaltung/Kalender}
|
||||||
|
|
||||||
|
Vergleichbare Bearbeitung, insbesondere unter Nutzung der gleichen Techniken wie für die Aufgabenstellung Stammbaum - \acs{XML}, \acs{XSLT}, \acs{HTML}, \acs{CSS}, evtl. JavaScript, \acs{SVG}
|
||||||
|
|
||||||
|
\item \textbf{Interaktive Kartenanwendung}
|
||||||
|
|
||||||
|
Aufgabe ist, aus als Geokoordinaten vorliegenden Kartendaten (Ländergrenzen, Straßen, Flüsse, Küsten, \ldots) eine graphische Darstellung im Web zu erstellen. Die Ausgangsdaten können aus OpenStreetMap oder anderen frei zugänglichen Datenquellen gewonnen werden, die Zieldarstellung ist in der Sprache \acs{SVG} zu realisieren. Mindestens eine interaktive Komponente muss enthalten sein, beispielsweise die Angabe von Kenndaten (Name, Lage, Einwohnerzahl, Bedeutung), wenn man auf ein Land klickt.
|
||||||
|
|
||||||
|
\textit{Einige Teilprobleme}:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Eigene konkrete und genau Zielaufgabenstellung selbst erstellen (!)
|
||||||
|
\item Sichtung und Auswahl der geeigneten Datenquelle(n)
|
||||||
|
\item Reduzierung des Umfangs der Geokoordinaten auf eine im Web (für eine \acs{SVG}-Datei) praktikable Größe unter Verringerung der Auflösung
|
||||||
|
\item Definition eines geeigneten \acs{XML}-basierten Datenformats zur Speicherung der relevanten Daten
|
||||||
|
\item Transformation der \acs{XML}-Ausgangsdaten mit Hilfe von \acs{XSLT} in eine \acs{SVG}-Datei
|
||||||
|
\item interaktive Veränderung der \acs{SVG}-Datei mit JavaScript
|
||||||
|
\item Anforderung nachzuladender Teile vom Server und Einbau in die bestehende \acs{SVG}-Datei (\acs{AJAX})
|
||||||
|
\item serverbasierte dynamische Generierung der nachgeladenen Komponenten (optional)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\begin{Achtung}
|
||||||
|
Diese dritte Aufgabenstellung ist relativ unscharf formuliert, was bedeutet, dass das Potential für eigene Kreativität recht gross ist, aber dieses muss auch vorhanden sein und genutzt werden, damit eine \enquote{nette} Anwendung am Ende dabei herauskommt!
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\item \textbf{Begriffswolken}
|
||||||
|
|
||||||
|
Aufgabe ist es, Begriffe und Zusammenhänge zwischen Begriffen mittels \acs{XML} modellieren zu können. Insbesondere ist eine graphische Darstellung von Begriffswolken am Ende das Ziel. Orientieren kann man sich an Mindmaps und Cognitive Maps sowie ggf. Tag Clouds, wobei keine Beschränkung auf beispielsweise strenge Hierarchien erfolgen soll sowie unbedingt (im Gegensatz zu Tag Clouds) die Beziehungen zwischen Begriffen modelliert und graphisch dargestellt werden müssen.
|
||||||
|
|
||||||
|
Zu verwendende Techniken:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \acs{XML} (zur Modellierung der Datenstruktur)
|
||||||
|
\item \acs{XSLT} (zur Transformation der Daten in das Ausgabeformat)
|
||||||
|
\item \acs{SVG} (als Ausgabeformat)
|
||||||
|
\item weitere Techniken nach Bedarf und Kenntnis
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\begin{Achtung}
|
||||||
|
Achtung: Auch diese vierte Aufgabenstellung ist relativ unscharf formuliert, was bedeutet, dass das Potential für eigene Kreativität recht gross ist, aber dieses muss auch vorhanden sein und genutzt werden, damit eine \enquote{nette} Anwendung am Ende dabei herauskommt!
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\textbf{Für alle Aufgabenstellungen gilt:}
|
||||||
|
|
||||||
|
Die Techniken \acs{XML} (als Datenhaltungsformat oder mindestens als Transferformat im Falle des Einsatzes einer anderen Datenbanktechnik), \acs{XSLT} (zur Transformation der Daten) sowie \acs{SVG} und/oder XHTML (als Ausgabeformat) müssen verwendet werden.
|
||||||
|
|
||||||
|
Erforderlich ist am Ende ein (einfach installierbares) Archiv (tar, ggf. gzipped, oder zip) mit allen Quellen und ggf. ausführbaren Dateien sowie eine kurze Installationsanleitung, ggf. mit genauer Nennung der Voraussetzungen zur Installation. Außerdem benötige ich für jedes Projekt die Namen der Mitwirkenden bzw. Mitgewirkt Habenden.
|
||||||
|
|
||||||
|
Die Bewertung (20\% Anteil an der Gesamtnote) umfasst mehrere Kategorien, die sich hauptsächlich aus den drei Bereichen Projektidee, technische Umsetzung und Erfüllung der Anforderungen ergeben.
|
||||||
441
Kapitel/09_XML.tex
Normal file
441
Kapitel/09_XML.tex
Normal file
|
|
@ -0,0 +1,441 @@
|
||||||
|
\chapter{XML -- \acl{XML}}\index{XML}
|
||||||
|
|
||||||
|
\acf{XML}:
|
||||||
|
|
||||||
|
\begin{itemize}
|
||||||
|
\item Vorgaben für die Grammatk einer Sprache
|
||||||
|
\item Tags mit Attributen und Inhalten
|
||||||
|
\item jede \acs{XML}-Datei muss/sollte wohlgeformt und gültig sein!
|
||||||
|
|
||||||
|
\textit{Wohlgeformtheit:}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Tags immer paarweise, \dash zu jedem Start-Tag gibt es das passende End-Tag
|
||||||
|
\item korrekte Schachtelung der Tags, \dash das zuletzt geöffnete und noch nicht geschlossene Tag muss als erstes geschlossen werden.
|
||||||
|
\item Es gibt genau einen \enquote{Wurzeltag}/\enquote{root-Tag}, \dash genau ein Tag auf oberster Ebene welches das gesamte restliche Dokument enthält.
|
||||||
|
\item[$\Rightarrow$] Kann ohne Kenntnis der konkreten Sprache geprüft werden!
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\textit{Gültigkeit:}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item evtl. Name des Wurzelelements
|
||||||
|
\item Elementnamen
|
||||||
|
\item Enthaltenseinsmodell für jedes Element (möglicher Inhalt eines Tags)
|
||||||
|
\item Attributnamen
|
||||||
|
\item Zugehörigkeit von Attributen zu Tags
|
||||||
|
\item Attributtyp (mögliche Attributwerte)
|
||||||
|
\item[$\Rightarrow$] Beschreibung der konkreten Grammatik
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Gültigkeit kann anhand einer \acs{DTD} geprüft werden. Eine Alternative dazu ist \acf{XSD} (deutlich mehr Möglichkeiten für Inhaltsmodell und Typisierung, jedoch viel komplexer).
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\section{DTD}\index{DTD}
|
||||||
|
Die \acf{DTD} \ldots
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item[\ldots] wird referenziert in einer (vollständigen) \code{DOCTYPE}-Deklaration.
|
||||||
|
\item[\ldots] ist textbasiert, aber nicht \acs{XML}-basiert
|
||||||
|
\item[\ldots] besteht aus einer Folge von (also beliebig vielen) Deklarationen (siehe \autoref{lst:xml_deklaration}) in der Variante der \code{DOCTYPE}-Deklaration
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
\begin{lstlisting}[label=lst:xml_deklaration,language=HTML5,caption=DOCTYPE- und XML-Deklaration]
|
||||||
|
<!DOCTYPE html ... mit Param. als Aufzählung der Werte in bestimmter Reihenfolge>
|
||||||
|
<?xml ... mit Parametern als Parname="Parwert">
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Für unsere Zwecke reichen zwei Deklarationen: \code{<!ELEMENT \ldots>} und \code{<!ATTLIST \ldots>}
|
||||||
|
|
||||||
|
|
||||||
|
\acs{DTD} wird wie folgend aufgebaut:
|
||||||
|
|
||||||
|
\subsection{\code{ELEMENT}}
|
||||||
|
|
||||||
|
Beschreibt ein Element und seinen Inhalt.
|
||||||
|
\bigskip
|
||||||
|
\begin{lstlisting}[language=XML,caption=DTD - ELEMENT]
|
||||||
|
<!ELEMENT tagname inhaltsmodell>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{tagname}] Name des Tags oder Elements, bestehend aus Buchstaben (Groß- und Kleinschreibung, case-sensitive), Ziffern, manchen Sonderzeichen (\zB Unterstrich/\enquote{\_}), beginnend nur mit Buchstabe oder Unterstrich.
|
||||||
|
|
||||||
|
Theoretisch kann der \code{tagname} eine beliebige Länge haben, sollte aber aus praktischen Gründen auf <\,256 Zeichen beschränkt werden. Zudem sollten keine Umlaute und sonstige nationale Sonderzeichen verwendet werden.
|
||||||
|
|
||||||
|
\item[\code{inhaltsmodell}] Dies kann sein: \hfill
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{EMPTY}] Leeres Inhaltsmodell, \dash der Tag enthält immer genau nichts. \newline
|
||||||
|
Beispiel: \code{<!ELEMENT br EMPTY>} für einen Zeilenumbruch in HTML.
|
||||||
|
|
||||||
|
\item[\code{ANY}] Beliebiger Inhalt, \dash beliebige Mischung aus Text und Tags (welche aber in der \acs{DTD} deklariert sein müssen). Es gibt kein Beispiel in HTML (und jeder anderen dem Vorleser bekannten Grammatik). $\Rightarrow$ vor dem Inhaltsmodell \enquote{\code{ANY}} warnt der Vorleser!
|
||||||
|
|
||||||
|
\item[(\code{\#PCDATA})] \enquote{Parsed Character Data} \newline
|
||||||
|
Zeichenfolgen, welche keine Tag-ähnlichen Strukturen enthalten (\zB \enquote{<} mit \code{\<} umschreiben).\newline
|
||||||
|
Beispiel: \code{<!ELEMENT title (\#PCDATA) >}
|
||||||
|
|
||||||
|
\item[sequenz] \code{(tagname1, tagname2[, tagname3\ldots])}\newline
|
||||||
|
Inhalt sind die aufgelisteten Tags (in genau dieser Reihenfolge).
|
||||||
|
Beispiel: \code{<!ELEMENT html (head, body) >}
|
||||||
|
|
||||||
|
\item[auswahl] \code{(tagname1|tagname2[|tagname3\ldots])}\newline
|
||||||
|
Inhalt ist entweder \code{tagname1} oder \code{tagname2} oder \ldots Es können auch Sequenzen angegeben werden.\newline
|
||||||
|
Beispiel (aus früherem HTML): \code{<!ELEMENT html ((head,body)|frameset)}
|
||||||
|
|
||||||
|
\item[gemischt] \code{(\#PCDATA|tagname1[|tagname2\ldots])}\newline
|
||||||
|
Inhalt ist entweder Text oder \code{tagname1} oder \code{tagname2} \ldots \newline
|
||||||
|
Hinweis: Statt \code{tagname} sind auch weitere Inhaltsmodelle (sequenz, auswahl) möglich!
|
||||||
|
\end{description}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[Häufigkeitsindikatoren]\hfill\newline
|
||||||
|
Nachgestelltes Symbol, mit dem ein Inhaltsmodell in der Häufigkeit seines Auftretens beeinflusst werden kann.
|
||||||
|
|
||||||
|
\begin{tabular}{cl}
|
||||||
|
\code{\textbf{*}} & Beliebig viele (inkl. keinmal) \\
|
||||||
|
\code{\textbf{+}} & Beliebig viele, aber mindestens einmal\\
|
||||||
|
\code{\textbf{?}} & Einmal oder keinmal (\enquote{optional})\\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
Beispiel:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{<!ELEMENT p (\#PCDATA|em|a|span|\ldots)* >}
|
||||||
|
\item \code{<!ELEMENT ul li+ >}
|
||||||
|
\item \code{<!ELEMENT dl (dt|dd)+ >}
|
||||||
|
\end{itemize}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{\code{ATTLIST}}
|
||||||
|
Beschreibt die Attribute eines Elements.
|
||||||
|
\bigskip
|
||||||
|
\begin{lstlisting}[language=XML,caption=DTD -- ATTLIST]
|
||||||
|
<!ATTLIST tagname attrname attrtyp voreinstellung>
|
||||||
|
|______ auch mehrfach ______|
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{tagname}] Der Tag, für welche die Attribute deklariert werden
|
||||||
|
\item[\code{attrname}] Name des Attributs (derselbe Aufbau und dieselben Einschränkungen wie für \code{tagname})
|
||||||
|
\item[\code{attrtyp}] \hfill
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{CDATA}] (Character Data), \dash beliebige Zeichenfolge (inkl. Tag-ähnlichen Strukturen, welche hier einfache Zeichenfolgen darstellen. Doppelte Hochkommata müssen mit \html{"} umschrieben werden.
|
||||||
|
\textit{Beispiel}: \xml{<!ATTLIST img alt CDATA #REQUIRED>}
|
||||||
|
|
||||||
|
\item[\code{ID}] \label{xml:attrtyp:id} Dokumentenweit eindeutiger Attributwert, Aufbau/Zusammensetzung wie ein \code{tagname} (es ist kein rein numerischer Wert möglich).
|
||||||
|
\textit{Beispiel}: \xml{<!ATTLIST a id ID #IMPLIED>}
|
||||||
|
|
||||||
|
\item[\code{IDREF}, \code{IDREFS}] Ein Attributwert vom Typ ID, potentiell mehrere Attributwerte vom Typ \hyperref[xml:attrtyp:id]{ID} (durch Leerzeichen getrennt).
|
||||||
|
|
||||||
|
\textit{Beispiel} aus \acs{HTML}: Bei Formularen, nicht jedoch bei \html{<a href="">}
|
||||||
|
|
||||||
|
\item[\code{NMTOKEN}, \code{NMTOKENS}] \enquote{Nametoken}
|
||||||
|
Aufbau ähnlich wie \code{tagname}, aber jedes der erlaubten Zeichen kann erstes Zeichen sein! So kann \code{123abc} kein Tagname sein, da Tags nicht mit einer Zahl anfangen dürfen, ein \code{NMTOKEN} jedoch schon!\newline
|
||||||
|
Durch Leerzeichen werden mehrere \code{NMTOKEN} voneinander getrennt.
|
||||||
|
|
||||||
|
\textit{Beispiel} aus \acs{HTML}: \xml{<!ATTLIST div class NMTOKENS #IMPLIED>}
|
||||||
|
|
||||||
|
\item[Aufzählung] \code{nmtoken1|nmtoken2[|nmtoken3\ldots]}\newline
|
||||||
|
Aufzählung aller möglichen Werten vom Typ Nametoken
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\item[Voreinstellung] \hfill
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{"\textit{value}"}] Ein vorgegebener Standardwert vom selben Typ wie \code{attrtyp}.
|
||||||
|
|
||||||
|
\item[\code{\#IMPLIED}] Gibt an, dass das Attribut optional ist.
|
||||||
|
|
||||||
|
\item[\code{\#REQUIRED}] Gibt an, dass das Attribut Pflicht ist.
|
||||||
|
|
||||||
|
\item[\code{\#FIXED "\textit{val}"}]
|
||||||
|
Wenn das Attribut gesetzt wird, darf es nur den Wert \code{val} annehmen.
|
||||||
|
|
||||||
|
\textit{Beispiel} aus \acs{HTML}: \xml{<!ATTLIST video autoplay #FIXED "autoplay">}
|
||||||
|
|
||||||
|
Hinweis: Manche Attributtypen, wie \zB \hyperref[xml:attrtyp:id]{ID}, können nur die Voreinstellung \newline
|
||||||
|
\phantom{Hinweis:} \code{\#IMPLIED} oder \code{\#REQUIRED} besitzen.
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\item[weitere Attributtypen] \hfill
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{ENTITY}, \code{ENTITIES}
|
||||||
|
\item \code{NOTATION}
|
||||||
|
\end{itemize}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\section{Was ist XSLT?}\index{XSLT}
|
||||||
|
|
||||||
|
\acf{XSLT} ist Teil der \acf{XSL}-Spezifikation.
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\acs{XSLT}] Eine Sprache zur Umsetzung von \acs{XML} basierten Dokumenten in andere (meist ebenfalls \acs{XML}-basierte) Dokumente.
|
||||||
|
\item[\acf{XPath}] Sprache zur Selektion von Knotenmengen) aus einem \acs{XML}-Dokument
|
||||||
|
\item[XML-FO] Konkrete \acs{XML}-basierte Sprache zu designgetreuen Ausgabe von Dokumenten.
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Wer führt die Transformation durch?
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item ein Standalone-Tool:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \acs{XSL} Transformator (Kommandozeilenaufruf: \code{xslt})
|
||||||
|
\item xalan
|
||||||
|
\item saxon (auch für Version 2, kommerziell)
|
||||||
|
\end{itemize}
|
||||||
|
\item Server-Side:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Apache-Projekt Cocoon
|
||||||
|
\item Perl-Modul: AxKit
|
||||||
|
\end{itemize}
|
||||||
|
\item Client-Side:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item gängige WebBrowser (Chrome, Firefox, Edge, Safari, \ldots)
|
||||||
|
\end{itemize}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Die \acs{XSLT}-Sprache ist \acs{XML}-basiert . \autoref{lst:xslt_beispiel} zeigt ein Beispiel.
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT -- Aufbau,label=lst:xslt_beispiel]
|
||||||
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||||||
|
<xsl:stylesheet version="1.0"
|
||||||
|
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
||||||
|
xmlns="Namespace der Zielsprache">
|
||||||
|
<xsl:output method="xml|text|html" encoding="KodierungZielformat"
|
||||||
|
doctype-public="Public-Id für DOCTYPE-Dekl."
|
||||||
|
doctype-system="System-ID für DOCTYPE-Dekl." />
|
||||||
|
<!-- Liste von Transformationsvorschriften/Templates -->
|
||||||
|
</xsl:stylesheet>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{Tipp}[frametitle=Editorempfehlung von Herrn Röthig]
|
||||||
|
Editix als FreeEditix. Erhältlich auf: \url{http://editix.com/}
|
||||||
|
\end{Tipp}
|
||||||
|
|
||||||
|
Wie die Verknüpfung einer \acs{XSLT} mit einem \acs{XML}-Dokument aussieht, zeigt \autoref{lst:xml_xslt} auf Seite~\pageref{lst:xml_xslt}.
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption={Abstraktes XML-Dokument für die Verknüpfung mit XSLT},label=lst:xml_xslt]
|
||||||
|
<?xml version="1.0" ?>
|
||||||
|
<?xml-stylesheet type="text/xsl" href="url/zur/Transformdatei.xsl" ?>
|
||||||
|
<!DOCTYPE bla SYSTEM "http://ref.zur/DTD/fuer/unsere/Gramatik.dtd">
|
||||||
|
<bla>
|
||||||
|
</bla>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\subsection{Format der XSLT-Templates}
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT Templates]
|
||||||
|
<xsl:template match="bla"> <!-- XPath-Ausdruck -->
|
||||||
|
<!-- Text und Strukturen, welche im Zieldokument den bla-Knoten aus
|
||||||
|
dem Quelldokument darstellen und "ersetzen" sollen, z.B.
|
||||||
|
-->
|
||||||
|
<html><head>...</head><body>...</body></html>
|
||||||
|
</xsl:template>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
In \autoref{sec:xslt_detailed} wird \acs{XSLT} genauer beschrieben.
|
||||||
|
|
||||||
|
\section{Der XPath-Ausdruck}
|
||||||
|
Der \acs{XPath}-Ausdruck\footnote{siehe auch \url{https://de.wikipedia.org/wiki/XPath\#Achsen}}
|
||||||
|
\begin{itemize}
|
||||||
|
\item besteht aus einem oder mehreren Lokalisierungssschritte, optional gefolgt von Prädikaten
|
||||||
|
\item mehrere Lokalisierungssschritte werden durch \enquote{/} getrennt
|
||||||
|
\item ein Lokalisierungsschritt besteht aus Achse und Knotentest:\newline
|
||||||
|
\code{axis::node-test[predicate]/\ldots}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\subsection{Achsen}
|
||||||
|
Achsen geben das \enquote{Verwandtschaftsverhältnis} der aufzusammelnden (gesuchten) zum aktuellen Knoten an.
|
||||||
|
|
||||||
|
\begin{tabular}{rp{10.8cm}}
|
||||||
|
\code{child}: & direkter Kindsknoten \\
|
||||||
|
\code{parent}: & der Elternknoten \\
|
||||||
|
\code{descendent}: & alle Nachfahrenknoten \\
|
||||||
|
\code{ancestor}: & alle Vorfahrenknoten \\
|
||||||
|
\code{descendent-or-self}: & Vereinigungsmenge von descendent und self \\
|
||||||
|
\code{ancestor-or-self}: & Vereinigungsmenge von ancestor und self \\
|
||||||
|
\code{preceding}: & Vorgängerknoten (ohne ancestor!) \\
|
||||||
|
\code{following}: & Nachfolgeknoten (ohne descendent!) \\
|
||||||
|
\code{preceding-sibling}: & ältere Geschwisterknoten (preceding mit demselben parent)\\
|
||||||
|
\code{following-sibling}: & jüngere Geschwisterknoten (following mit demselben parent)\\
|
||||||
|
\code{attribute}: & am aktuellen Knoten hängender Attributknoten (alle anderen Achsenausdrücke sammeln nur Element- und keine Attributknoten)
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\subsubsection{Verkürzte Schreibweise}
|
||||||
|
Eine Verkürzte Schreibweise der Lokalisierungsschritte für Achsen\footnote{siehe auch \url{https://de.wikipedia.org/wiki/XPath\#Achsen}}
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\begin{tabular}{rcl}
|
||||||
|
\code{bla} & $\hat{=}$ & \code{child::bla} \\
|
||||||
|
\code{../bla} & $\hat{=}$ & \code{parent::bla} \\
|
||||||
|
\code{./} & $\hat{=}$ & \code{self} \\
|
||||||
|
\code{@fasel} & $\hat{=}$ & \code{attribute::fasel} \\
|
||||||
|
\end{tabular}
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Knotentests}
|
||||||
|
Knotentests schränken die Elementauswahl einer Achse ein:
|
||||||
|
|
||||||
|
\begin{tabular}{rp{9.5cm}}
|
||||||
|
\code{tagname} & nur die Knoten mit dem entsprechenden \code{tagname} (bzw. bei \code{attribute} der \code{attrname}) \\
|
||||||
|
\code{*} & Alle Knoten (Wildcard) \\
|
||||||
|
\code{text()} & Alle Textknoten \\
|
||||||
|
\code{comment()} & Für Kommentarknoten \\
|
||||||
|
\code{processing-instruction()} & für Knoten mit \enquote{processing instructions}\\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Prädikate}
|
||||||
|
Durch Angabe von Prädikaten kann das Ergebnis weiter eingeschränkt werden. Prädikate werden in eckige Klammern eingeschlossen und können in beliebiger Zahl hintereinander geschrieben werden, wobei die Reihenfolge wesentlich ist. Prädikate können \acs{XPath}-Ausdrücke enthalten, außerdem kann eine Vielzahl von Funktionen und Operatoren verwendet werden.\footnote{Quelle: \url{https://de.wikipedia.org/wiki/XPath}}
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\xml{axis::node-test[predicate][/...]}
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
Es handelt sich um eine Bedingung an die Knoten, welche erfüllt (\enquote{wahr}) sein muss.
|
||||||
|
|
||||||
|
\subsubsection{Bedingung}
|
||||||
|
\begin{tabular}{rp{12.4cm}}
|
||||||
|
\acs{XPath}-Ausdruck & nicht-leere Knotenmenge ergibt \enquote{wahr} \\
|
||||||
|
Zahl & (natürliche Zahl) ergibt den einen Knoten mit der entsprechenden Nummer aus der Knotenmenge beginnend mit 1. \\
|
||||||
|
\enquote{Vergleich} & zweier \acs{XPath}-Ausdrücke auf Gleichheit (\html{=}), kleiner (\html{\<}), größer (\html{\>}), kleinergleich (\html{\<=}), größergleich (\html{\>=}) \\
|
||||||
|
Verknüpfen & mit logischen Operatoren \code{and}, \code{or}, \code{not}. \\
|
||||||
|
Zahlenoperationen & +, -, * \\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\textsf{\textbf{Funktionen}}
|
||||||
|
|
||||||
|
\begin{tabular}{lcl}
|
||||||
|
\xml{number(Knotenmenge)} & $\Rightarrow$ & nummerischer Wert des \enquote{Werts} einer Knotenmenge \\
|
||||||
|
\xml{count(Knotenmenge)} & $\Rightarrow$ & Anzahl Knoten in der Knotenmenge \\
|
||||||
|
\xml{substring(...)} & $\Rightarrow$ & Teilzeichenkette \\
|
||||||
|
...
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\section{XSLT - Aufbau}\label{sec:xslt_detailed}
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSL Template]
|
||||||
|
<xsl:template match="XPath-Ausdruck">
|
||||||
|
<!-- Inhalt, welcher vom Template ausgegeben wird -->
|
||||||
|
</xsl:template>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Mögliche Inhalte:
|
||||||
|
\begin{itemize}
|
||||||
|
\item Tags der Zielsprache \newline
|
||||||
|
\html{<html><head><title>...</title></head><body>...</body></html>}
|
||||||
|
\item Text \enquote{bla fasel blubber}. Whitespace wird auf ein Trennzeichen (\enquote{space}) reduziert.
|
||||||
|
\item Text \xml{<xsl:text> leer zeichen</xsl:text>} $\Rightarrow$ Whitespace bleiben erhalten!
|
||||||
|
\item \enquote{Werte} aus dem Quelldokument: \xml{<xsl:value-of select="Pfadausdruck" />}
|
||||||
|
\item \enquote{Wert} einer Knotenmenge
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Konkatenation der Werte aller Knoten in der Knotenmenge
|
||||||
|
\end{itemize}
|
||||||
|
\item \enquote{Wert} eines Knotens
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item bei Textknoten: der Text
|
||||||
|
\item bei Attributknoten: der Text des Wertes des Attributknotens
|
||||||
|
\item bei Elementknoten: rekursive Ermittlung über alle Kindknoten, welche Element- oder Textknoten (\textit{nicht} Attributknoten) sind (Tiefensuche, keine Breitensuche entsprechend der Notation im \acs{XML}-Dokument).\newline
|
||||||
|
\begin{tabular}{lcl}
|
||||||
|
\html{<a>bla fasel blubba</a>} & $\Rightarrow$ & Ein Textknoten an \html{<a>}\\
|
||||||
|
\html{<a>bla<i>fasel</i>blubba</a>} & $\Rightarrow$ & zwei Textknoten an \html{<a>}
|
||||||
|
\end{tabular}
|
||||||
|
\end{itemize}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsubsection{Attribute}
|
||||||
|
\html{<p style="color:red;">Dieser Text ist rot</p>} $\Rightarrow$ fester Attributwert
|
||||||
|
|
||||||
|
\xml{<xsl:attribute names="Attributname">} $\Rightarrow$ erzeugt einen Attributknoten am soeben neu geöffneten (noch nicht geschlossenen und noch nicht mit Texten oder Elementknoten als Kinder versehen) Elementknoten.
|
||||||
|
|
||||||
|
\begin{flushleft}
|
||||||
|
Wert des Attributs als \acs{XPath}-Ausdruck: \newline
|
||||||
|
\xml{<xsl:attribute name="style" select="pfad/im/Quelldokument"/>}
|
||||||
|
|
||||||
|
Wert des Attributs als \enquote{errechneter} Wert im Quelltext:\newline
|
||||||
|
\xml{<xsl:attribute name="style">color:<xsl:value-of select="..." /></xsl:attribute>}
|
||||||
|
\end{flushleft}
|
||||||
|
|
||||||
|
\subsection{Aufruf der Templates}
|
||||||
|
|
||||||
|
\begin{itemize}
|
||||||
|
\item muss explizit erfolgen
|
||||||
|
\item das \code{match}-Attribut sorgt \textit{nicht} für den Aufruf/die Ausführung des Transformators
|
||||||
|
\item der \acs{XSLT} ruft ein Template für den Wurzeltag auf doch
|
||||||
|
\item mittels \xml{<xsl:apply-templates ...>} können Templates rekursiv aufgerufen werden
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \xml{<xsl:apply-templates />} Template Aufruf für alle Kindelemente
|
||||||
|
\item \xml{<xsl:apply-templates select="Pfadausdruck />} Template-Aufruf für alle Knoten der adressierten Knotenmenge (nicht nur Kinder- und Elementknoten)
|
||||||
|
\end{itemize}
|
||||||
|
\item \enquote{schnelle} Alternative zur Rekursion: iterativer Durchgang durch eine Knotenmenge \medskip
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT -- for-each]
|
||||||
|
<xsl:for-each select="Pfadausdruck">
|
||||||
|
<!-- Ausgabe für jeden Knoten der Knotenmenge -->
|
||||||
|
</xsl:for-each>\end{lstlisting}
|
||||||
|
\item Sortierung der Knoten bei \xml{<xsl:apply-templates/>} und \xml{<xsl:for-each ...>} vor Durchgang durch die Knotenmenge:\newline
|
||||||
|
\xml{<xsl:sort select="XPath-Ausdruck als Sortierkriterium" />}\newline
|
||||||
|
als erste Kinder des \xml{<xsl:apply-templates ...>} bzw. \xml{<xsl:for-each ..>}\newline
|
||||||
|
$\Rightarrow$ mehrere Sortierkriterien sind möglich (durch mehrere \xml{<xsl:sort>} nacheinander)
|
||||||
|
\item weitere Möglichkeiten zu Templates: \medskip
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT -- Mode]
|
||||||
|
<xsl:template match="..." mode="Bezeichner">
|
||||||
|
<!-- dieses Template wir nur bei Aufruf mit gleichem mode-Attributwert ausgefüht -->
|
||||||
|
</xsl:template>\end{lstlisting}
|
||||||
|
Aufruf per: \xml{<xsl:apply-templates select="..." mode="Bezeichner" />}
|
||||||
|
\item Falls kein passendes selbstgeschriebenes Template existiert, existiert ein Default-Template (\textit{ohne} mode-Attribut), welches alle Textknoten und für Elementknoten Templates rekursiv aufruft.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Zweite Art von Templates: \enquote{named templates}/Templates mit Namen\medskip
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT -- Benannte Templates]
|
||||||
|
<xsl:template name="Bezeichner">
|
||||||
|
<!-- Ausgabe -->
|
||||||
|
<!-- Pfadausdrücke werden relativ zum aktuellen Knoten, welcher sich beim
|
||||||
|
Template-Aufruf nicht verändert hat, berechnet
|
||||||
|
-->
|
||||||
|
</xsl:template>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Aufruf per: \xml{<xsl:call-template name="Bezeichner" />}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\subsection{Parameter und Variablen}
|
||||||
|
|
||||||
|
Parameter können im Template definiert werden: \newline
|
||||||
|
\xml{<xsl:param name="Bezeichner">Default-Wert</xsl:param>}
|
||||||
|
|
||||||
|
Aufruf mittels: \xml{<xsl:with-param name="Bezeichner">Wert</xsl:with-param>} innerhalb von \xml{<xsl:apply-templates>} oder \xml{<xsl:call-template>}. \newline
|
||||||
|
Nutzung per \code{\$Bezeichner} innerhalb von \acs{XPath}-Ausdrücken.
|
||||||
|
|
||||||
|
\enquote{Variablen} können in einem Block (und auch direkt innerhalb von \xml{<xsl:stylesheet>} als \enquote{globale Variable}) definiert werden mittels:\newline
|
||||||
|
\xml{<xsl:variable name="Bezeichner">Wert</xsl:variable>} und Verwendung mittels \code{\$Bezeichner}.
|
||||||
|
\textit{Aber}: Der Wert einer \enquote{Variablen} ist nicht veränderbar, sondern fest. Es handelt sich also eher um Konstanten.
|
||||||
|
|
||||||
|
\xml{<xsl:param>} kann auch direkt im \xml{<xsl:stylesheet>} genutzt werden, um Parameter beim Aufruf des Stylesheets zu übergeben!
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Bedingtes Ausführen}
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT -- Bedingtes Ausführen]
|
||||||
|
<xsl:if test="Bedingung">
|
||||||
|
<!-- Ausgabe/Ausführung, falls Bedingung erfüllt ist -->
|
||||||
|
<xsl:if>
|
||||||
|
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="Bedingug 1">...</xsl:when>
|
||||||
|
<xsl:when test="Bedingug 2">...</xsl:when>
|
||||||
|
<xsl:otherwise>
|
||||||
|
<!--Default-Zweig, falls keine Bedingung erfüllt wurde -->
|
||||||
|
</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Bei der \acs{XSLT} If-Abfrage gibt es kein \code{else}!
|
||||||
105
Kapitel/10_Aufgaben.tex
Normal file
105
Kapitel/10_Aufgaben.tex
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
\chapter{Web-Engineering Übungsaufgaben}
|
||||||
|
|
||||||
|
\begin{Achtung}
|
||||||
|
Wenn du die \acs{XML}-Datei lokal öffnest, kann es sein, dass die \acs{XSLT} nicht geladen wird. Viele moderne Browser (\zB Chrome und Edge) verbieten das Laden. Umgehen kann man dies, indem man einen lokalen Server aufsetzt und die Dateien über \code{localhost} aufruft oder einen anderen Browser (\zB Firefox, Internet Explorer) installiert und nutzt.
|
||||||
|
|
||||||
|
\textsf{\textbf{Tipp:}} Nutze folgende Befehle, um mit Python\footnote{siehe \url{https://www.python.org/}} einen lokalen Server im aktuellen Ordner über ein Terminal zu starten (der Ordner ist dann erreichbar unter \url{http://localhost:8000})
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Python 3: \code{python -m http.server --cgi 8000}
|
||||||
|
\item Python 2: \code{python -m SimpleHTTPServer 8000}
|
||||||
|
\end{itemize}
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
Es wurden nicht alle Aufgaben vollständig bearbeitet! Die Aufgaben, welche jedoch bearbeitet wurden, sollten soweit korrekt sein.
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\section{XML, DTD und Validierung}
|
||||||
|
|
||||||
|
Konzipieren Sie eine \acs{XML}-Struktur, mit welcher Sie einen einfachen CD-Katalog abbilden können. Die Datei soll für jede erfasste CD einen Eintrag erhalten, welcher mehrere Felder enthält. Sehen Sie dafür zunächst (mindestens) die folgenden Felder vor:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Titel des Albums
|
||||||
|
\item Interpret
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Erstellen Sie die zur \acs{XML}-Struktur passende \acs{DTD}!
|
||||||
|
|
||||||
|
Erstellen Sie eine \acs{XML}-Datei (mit wenigen Einträgen), welche dieser Struktur entspricht. Was passiert, wenn Sie diese Datei in einem XML-fähigen Web-Browser anzeigen?
|
||||||
|
|
||||||
|
Validieren Sie Ihre \acs{XML}-Datei gegen die \acs{DTD}! Erkennt der Validator, falls die Datei nicht wohlgeformt oder nicht gültig ist, also nicht der \acs{DTD} entspricht? \textit{Hinweis}: Die meisten Online-Validatoren erfordern, dass Ihre \acs{DTD} im Internet online zugreifbar ist. Falls Sie keinen Internet-Webspace zur Verfügung haben, wo Sie Ihre \acs{DTD} ablegen können, können Sie die \acs{DTD} in Ihre \acs{XML}-Datei direkt integrieren oder einen Offline-Validator verwenden. Beispielsweise enthält der \acs{XML}-Editor Free Editix einen solchen.
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=XML,caption=XML mit DTD]{Aufgaben/2017_06_06_XML/CD_Katalog.xml}
|
||||||
|
|
||||||
|
\section{Verknüpfung der XML-Datei mit einer XSLT-Datei}
|
||||||
|
|
||||||
|
Verknüpfen Sie die \acs{XML}-Datei nun mit einer (vorläufig leeren) \acs{XSLT}-Datei und lassen Sie die Datei wiederum im Web-Browser darstellen. Was ist der Unterschied zur vorigen Ausgabe?
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\begin{lstlisting}[caption=Ausgabe bei leerer XSLT Datei im Firefox]
|
||||||
|
XML Parsing Error: no root element found
|
||||||
|
Location: file:///<Dateipfad>/CD_Katalog.xsl
|
||||||
|
Line Number 1, Column 1:
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Da das \code{root}-Element in der \acs{XSLT}-Datei fehlt, gibt es einer Fehlermeldung.
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\section{XSLT-Datei Grundgerüst}
|
||||||
|
|
||||||
|
Füllen Sie die eben erstellte \acs{XSLT}-Datei mit dem entsprechenden obligatorischen Grundgerüst (\acs{XML}-Deklaration etc.). Lassen Sie unabhängig von der \acs{XML}-Eingabedatei eine \acs{HTML}-Datei (mit Titel und Überschrift) ausgeben.
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=XML,caption=XML Datei mit XSLT Einbindung]{Aufgaben/2017_06_06_XML/CD_Katalog_Basic.xsl}
|
||||||
|
|
||||||
|
|
||||||
|
\section{XSLT-Ausgaben und rekursive Transformation}
|
||||||
|
|
||||||
|
Schreiben Sie eine Transformation, die dafür sorgt, dass alle Inhalte von \acs{XML}-Tags in der Eingabedatei (unabhängig von deren Struktur) in der Reihenfolge Ihres Auftretens in der Ausgabedatei ausgegeben werden.
|
||||||
|
|
||||||
|
\section{Ausgabe von bestimmten Feldern}
|
||||||
|
|
||||||
|
Ändern Sie die \acs{XSLT} so ab, dass nur die jeweiligen Titel der CDs ausgegeben werden.
|
||||||
|
|
||||||
|
\section{Nutzung bestimmter Felder als Attributwerte von HTML-Tags}
|
||||||
|
|
||||||
|
Sehen Sie am Anfang Ihrer \acs{XML}-Datei einen Tag \enquote{Farbe} vor und nutzen Sie diesen, um damit die Hintergrundfarbe Ihrer \acs{HTML}-Datei zu setzen. Was ist der Unterschied zur vorigen (direkten) Ausgabe von Feldern?
|
||||||
|
|
||||||
|
\section{Sortierung}
|
||||||
|
|
||||||
|
Sortieren Sie die Einträge nun nach dem (nicht angezeigten) Interpreten.
|
||||||
|
|
||||||
|
\section{Transformation abhängig von der XML-Struktur}
|
||||||
|
|
||||||
|
Erweitern Sie die Ausgabe auf alle vorhandenen Felder. Sorgen Sie dafür, dass jeder CD-Eintrag in einer neuen Zeile beginnt.
|
||||||
|
|
||||||
|
\section{Erstellen einer Tabelle aller Einträge}
|
||||||
|
|
||||||
|
Ändern Sie die \acs{XSLT} so ab, dass die CD-Liste in Tabellenform ausgegeben wird. Welches Problem kann auftreten, wenn die CD-Einträge unvollständig sind, wenn also bei einem bestimmten Eintrag nicht alle möglichen Felder (Tags) vorhanden sind?
|
||||||
|
|
||||||
|
\section{Attribute}
|
||||||
|
|
||||||
|
Erweitern Sie die CD-Datenbank um die jeweilige Musikgattung (Rock, Pop, Jazz, Klassik). Welche Möglichkeiten bieten sich hierfür an? Welche der Möglichkeiten ist sinnvoll, falls der Eintrag abhängig von der jeweiligen Musikgattung unterschiedliche Felder enthalten soll (bei Klassik beispielsweise Komponist, Werk, \ldots{} statt Titel, Interpret, \ldots)?
|
||||||
|
|
||||||
|
\section{Filterung}
|
||||||
|
|
||||||
|
Geben Sie Listen der CDs in ihrer Sammlung aus. Erstellen Sie zum einen Listen getrennt für die jeweilige Musikgattung. Erstellen Sie außerdem eine komplette Liste Ihrer CDs, bei der die Einträge in der Reihenfolge ihres Auftretens in der \acs{XML}-Datei aufgeführt sind.
|
||||||
|
|
||||||
|
\section{Rekursive und iterative Transformation}
|
||||||
|
|
||||||
|
Vergleichen Sie anhand der bisherigen Aufgaben die Verfahrensweise bei iterativer und rekursiver Transformation. In welchen Fällen haben Sie die iterative und in welchen die rekursive Transformation angewandt? Können Sie auch die jeweilige andere Verfahrensweise einsetzen? Realisieren Sie dies, soweit möglich!
|
||||||
|
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\lstinputlisting[language=XML,caption=XML Datei mit XSLT Einbindung]{Aufgaben/2017_06_06_XML/CD_Katalog_fuer_XSLT.xml}
|
||||||
|
|
||||||
|
|
||||||
|
\medskip
|
||||||
|
\lstinputlisting[language=XML,caption=XSLT Beispiel - Iterativer Ansatz]{Aufgaben/2017_06_06_XML/CD_Katalog.xsl}
|
||||||
|
|
||||||
|
\vspace{-2mm}
|
||||||
|
\begin{Achtung}[frametitle={Hinweis}]
|
||||||
|
Der rekursive Ansatz fehlt an dieser Stelle!
|
||||||
|
\end{Achtung}
|
||||||
419
Kapitel/11_SVG.tex
Normal file
419
Kapitel/11_SVG.tex
Normal file
|
|
@ -0,0 +1,419 @@
|
||||||
|
\chapter{SVG -- \acl{SVG}}
|
||||||
|
\section{Grafikformate (im Web)}\index{Grafikformate}
|
||||||
|
In \autoref{tbl:vergleich_raster_vektor} werden Raster- und Vektorgrafiken miteinander verglichen.
|
||||||
|
|
||||||
|
\begin{table}[h]
|
||||||
|
\centering
|
||||||
|
\begin{tabular}{p{7.6cm}|p{7.6cm}}
|
||||||
|
\textbf{Rastergrafiken} (Pixel-, Bitmap-Grafiken) & \textbf{Vektorgrafiken} \\
|
||||||
|
\midrule
|
||||||
|
PNG, JPEG, GIF, (BMP) & SVG \\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
Unterteilung der Darstellungsfläche in (meist gleichgroße, quadratische oder zumindest rechteckige) Teilflächen
|
||||||
|
&
|
||||||
|
Darstellung mithilfe von geometrischen Grundformen (\zB Kreisen, Linien, \ldots)
|
||||||
|
\\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
Zuordnung eines Farb- und/oder Helligkeits- und ggf. Transprarenzwertes zu jeder Teilfläche
|
||||||
|
&
|
||||||
|
Zuordnung von Position, Größe sowie Farb-, Helligkeits-, und Transparentwerten
|
||||||
|
\\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
$\oplus$ gängige Ein- und Ausgabegeräte arbeiten rasterbasiert
|
||||||
|
&
|
||||||
|
$\oplus$ nahezu unendliche Skalierbarkeit
|
||||||
|
\\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
$\oplus$ gut geeignet für fotorealistische Darstellungen
|
||||||
|
&
|
||||||
|
$\oplus$ gut geeignet für schematische, künstlich erzeugte Darstellungen
|
||||||
|
\\
|
||||||
|
\midrule
|
||||||
|
|
||||||
|
&
|
||||||
|
$\ominus$ evtl. Zeit und rechenaufwändiges \enquote{Rendering}
|
||||||
|
\\
|
||||||
|
|
||||||
|
\end{tabular}
|
||||||
|
\caption{Vergleich von Raster- und Vektorgrafiken}
|
||||||
|
\label{tbl:vergleich_raster_vektor}
|
||||||
|
\end{table}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{RGB-Format (für Rastergrafiken)}\index{RGB}
|
||||||
|
\acs{RGB} hat getrennte Farbwerte für Rot, Grün und Blau, welche jeweils im Wertebereich von 0 bis 255 (8~Bit) liegen. Es bestitzt ein additives Farbmodell, \dash jeweils Farbe, je nach Helligkeit.
|
||||||
|
|
||||||
|
Bei einer gängigen Auflösung von \zB 20 Megapixel:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item besteht das Bild aus 20\,Mio. Teilflächen.
|
||||||
|
\item braucht jedes Bild 60\,MByte Speicherplatz!
|
||||||
|
\item[$\Rightarrow$] die meisten Bildformate komprimieren!
|
||||||
|
\item[$\Rightarrow$] $2^{24} \approx 16\,Mio.$ Farben
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Kompression bei:
|
||||||
|
\begin{description}
|
||||||
|
\item[GIF] \acf{GIF} (1987-er Jahre)\index{GIF}
|
||||||
|
Farbtabelle, \dash maximal 256 verschiedene Farben aus den insgesamt verfügbaren 16\,Mio. sind in einem Bild gleichzeitig verwendbar.\newline
|
||||||
|
$\Rightarrow$ Für jede Teilfläche sind nur 1\,Byte Information (als Indexwert auf die Farbtabelle) notwendig.
|
||||||
|
|
||||||
|
$\Rightarrow$ in dieser Quantisierung auf 256 verschiedene Farbwerte steckt der Verlust bei \acs{GIF}, \textit{nicht} jedoch in der nachfolgenden Kompression. Das Kompressionsverfahren ist eine modifizierte Lauflängenkodierung (verlustfrei).
|
||||||
|
|
||||||
|
Sonderfunktion:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Animated \acs{GIF}
|
||||||
|
\item Transparenz (Markieren einer Farbe als \enquote{volltransparent})
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{JPEG}\index{JPEG}
|
||||||
|
\acf{JPEG} ist ein weiteres, häufig verwendetes Grafikformat.
|
||||||
|
|
||||||
|
Hauptziel von \acs{JPEG}:
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item fotorealistische Darstellungen
|
||||||
|
\item $\Rightarrow$ viel mehr als 256 Farben
|
||||||
|
\item Farbformat: \acs{RGB} (ohne Alphakanal)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Komprimierung von \acs{JPEG}:
|
||||||
|
\begin{itemize}
|
||||||
|
\item \acf{DCT} als Vorstufe. Es handelt sich dabei um eine Mittelwertbildung über $8\times 8$-Pixelblöcke mit einer Abweichung der $4\times 4$/$2\times 2$/$1\times 1$-Pixelblöcke von jeweilig enthaltenden größeren Pixelblock (Abweichungen $\hat{=}$ DCT-Koeffizienten).
|
||||||
|
|
||||||
|
\enquote{\textit{Im nächsten Schritt wird das Bild in $8\times 8$ große Pixelblöcke aufgetrennt. Jeder dieser Blöcke wird der diskreten Cosinus-Transformation unterzogen. Diese ist mit der Fourier-Transformation verwandt und wandelt die räumliche Information der Helligkeitswerte in eine Frequenz-Darstellung um. Die Umwandlung selbst ist verlustlos bis auf Rundungsfehler.}} -- Quelle: \url{https://www.tecchannel.de/a/jpeg,401190,3}
|
||||||
|
|
||||||
|
\item Anwendung der Huffman-Kodierung\footnote{siehe auch \url{https://de.wikipedia.org/wiki/Huffman-Kodierung}} auf die Koeffizienten
|
||||||
|
|
||||||
|
Prinzip der Huffman-Kodierung/Komprimierung: \newline
|
||||||
|
Sortierung der Werte nach ihrer Häufigkeit des Vorkommens, \zB
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\begin{tabular}{rl}
|
||||||
|
1: & häufigster Wert \\
|
||||||
|
01: & zweithäufigster Wert \\
|
||||||
|
001: & dritthäufigster Wert \\
|
||||||
|
\end{tabular}
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
Bei den häufigen Werten wird Speicherplatz gespart, bei seltenen Werten braucht man jedoch mehr Speicherplatz.
|
||||||
|
|
||||||
|
$\Rightarrow$ Einsparpotenzial nur bei stark unterschiedlich häufig vorkommenden Werten! \newline
|
||||||
|
$\Rightarrow$ verlustfreie Komprimierung
|
||||||
|
|
||||||
|
Verlust durch Ausgleich ähnlicher Koeffizienten auf gleiche Werte (Qualitätsfehler bei \acs{JPEG})
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\item Nachfolgeformat: JPEG2000
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Unterstützung von RGB\textbf{A}
|
||||||
|
\item keine allzugroße Verbreitung wegen Lizenzgebühren
|
||||||
|
\item Unterstützung meist nur von kostenpflichtiger Software (\zB Photoshop, aber nicht \href{https://www.gimp.org/}{GIMP})
|
||||||
|
\end{itemize}
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection{PNG}\index{PNG}
|
||||||
|
\acf{PNG} ist ein verlustfreies Grafikformat. Es besitzt folgende Eigenschaften:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item mehrere Farbmodelle
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item indiziert (mit Farbtabelle)
|
||||||
|
\item RGBA
|
||||||
|
\end{itemize}
|
||||||
|
\item immer verlustfrei
|
||||||
|
\item geeignet für jegliche Art der Darstellung (künstliche \& photorealistisch)
|
||||||
|
\item Problem bei photorealistischen Darstellungen: manchmal sehr großes Dateivolumen
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
|
\section{SVG}\index{SVG}
|
||||||
|
\acf{SVG} ist ein Vektorgrafikformat, welches sich auch im Internet durchgesetzt hat. Geschichte:\index{SVG!Geschichte}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[1998] zwei Ansätze für vektorbasiertes Grafikformat im Web:
|
||||||
|
|
||||||
|
\begin{enumerate}[noitemsep]
|
||||||
|
\item Microsoft \& Macromedia: \acf{VML}
|
||||||
|
\item Adobe, IBM, NS, Sun: \acf{PGML}
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\item[10/1998] Anforderungen an vektorbasiertes Grafikformat für das Web
|
||||||
|
\item[09/2001] \acs{SVG} 1.0 als \acs{W3C}-Standard
|
||||||
|
\item[01/2003] \acs{SVG} 1.1 mit Fehlerbehebung und Modularisierung
|
||||||
|
\item[04/2005] \acs{SVG} 1.2, aber außer \enquote{\acs{SVG} 1.2 Tiny} zurückgezogen
|
||||||
|
\item[12/2016] Candidate Recommendation für \acs{SVG} 2.0
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
|
||||||
|
Die Anzeige ist bei allen modernen Browsern \enquote{nativ} möglich. Sie kann auch in eine \acs{HTML}-Seite eingebettet werden.
|
||||||
|
|
||||||
|
\begin{table}[h!]
|
||||||
|
\centering
|
||||||
|
\begin{tabular}{rl}
|
||||||
|
\code{MIME}-Type. & \code{image/svg+xml} \\
|
||||||
|
File Extension: & \code{svg}, \code{.svgz} (gzip-komprimiert) \\
|
||||||
|
Format/Grundstruktur: & \textit{siehe \autoref{lst:svg_format}} \\
|
||||||
|
\end{tabular}
|
||||||
|
\caption{Eigenschaften von SVG}
|
||||||
|
\end{table}
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
\begin{lstlisting}[language=XML,caption=Grundstruktur einer SVG Datei,label=lst:svg_format]
|
||||||
|
<?xml version="1.0" ?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
version="1.1"
|
||||||
|
width ="<Breite (in Pixeln, Millimetern, etc.)>"
|
||||||
|
height="<Höhe (in Pixeln, Millimetern, etc.)>"
|
||||||
|
viewBox="<x> <y> <Breite> <Höhe>">
|
||||||
|
|
||||||
|
<title>Titel der Grafik</title>
|
||||||
|
<desc>Beschreibung</desc>
|
||||||
|
<defs>
|
||||||
|
<!-- Für weitere Metadaten, z.B. CSS, JS, vordefinierte Objekte, ... -->
|
||||||
|
</defs>
|
||||||
|
<!-- eigentlich anzuzeigender Inhalt bestehend aus grafischen Elementen -->
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{viewBox}] optionales Attribut, um angezeigten Bereich des Koordinatensystems von 0 $\rightarrow$ Breite und 0 $\rightarrow$ Höhe auf x $\rightarrow$ x+Breite und y $\rightarrow$ y + Höhe zu setzen.
|
||||||
|
|
||||||
|
\autoref{fig:svg_viewbox} auf Seite~\pageref{fig:svg_viewbox} verdeutlicht das Verhalten von \code{viewBox}\footnote{Quelle: \url{https://www.sarasoueidan.com/blog/svg-coordinate-systems/}}.
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\begin{figure}[t!]
|
||||||
|
\centering
|
||||||
|
\includegraphics[width=0.64\textwidth]{Bilder/SVG_viewBoy.jpg}
|
||||||
|
\caption{SVG -- \code{viewBox}}
|
||||||
|
\label{fig:svg_viewbox}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
|
||||||
|
\subsection{Grundelemente}\index{SVG!Grundelemente}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Grafische Grundelemente werden jeweils über einen eigenen Tag dargestellt
|
||||||
|
\item (Fast) Alle Parameter werden als Attribute angegeben (außer Textinhalt bei \svg{<text>})
|
||||||
|
\item (Fast) Alle Tags bei \acs{SVG} sind leere tags (aber Metadaten \svg{<title>} und \svg{<desc>} können bei jedem Tag als Kindelemente angegeben werden)
|
||||||
|
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[Linie] \svg{<line x1="0" y1="0" x2="100" y2="100" />}
|
||||||
|
\item[Kreis] \svg{<circle cx="<X-Koord>" cy="<Y-Koord.>" r="<Radius>" />}
|
||||||
|
\item[Ellipse] \svg{<ellipse cx="<x>" cy="<y>" rx="<Radius X>" ry="<Radius Y>" />}
|
||||||
|
|
||||||
|
Ellipsen liegen zunächst immer lotrecht im Koordinatensystem.
|
||||||
|
|
||||||
|
\item[Rechteck] \svg{<rect x="<x>" y="<y>" width="Breite" height="Höhe" />}
|
||||||
|
|
||||||
|
Optional gibt es noch \code{rx} und \code{ry} um die Ecken abzurunden.
|
||||||
|
\item[Linienzug/Streckenzug] \svg{<polyline points="x1,y1 x2,y2"/>}
|
||||||
|
|
||||||
|
Das \code{points} Attribut enthält Paare von x/y-Koordinaten für die zweidimensionalen Punkte. Getrennt durch Komma und/oder Whitespace, \dash folgendes wäre syntaktisch korrekt: \xml{<polyline points="5.5,3,8 7.5 1,1,1,11,111,1.1" />}
|
||||||
|
|
||||||
|
\item[Polygon/geschlossener Streckenzug] \svg{<polygon points="x1,y1 x2,y2"/>}
|
||||||
|
|
||||||
|
Wie der Linienzug.
|
||||||
|
|
||||||
|
\item[quadratische Bézierkurve] Drei Punkte beschreiben die Kurve: \newline
|
||||||
|
Anfangspunkt (AP), Endpunkt (EP) und Stützpunkt (SP)\newline
|
||||||
|
\textit{Siehe \autoref{fig:bezierkurven} (links) auf Seite~\pageref{fig:bezierkurven} und nachfolgend \code{path Q}.\newline
|
||||||
|
\autoref{sec:bezier} geht weiter auf Bézierkurven ein.}
|
||||||
|
|
||||||
|
\item[kubische Bézierkurve] Vier Punkte beschreiben die Kurve: \newline
|
||||||
|
Anfangspunkt (AP), Endpunkt (EP), Stützpunkt 1 (SP1) und Stützpunkt 2 (SP2)\newline
|
||||||
|
\textit{Siehe \autoref{fig:bezierkurven} (rechts) auf Seite~\pageref{fig:bezierkurven} und nachfolgend \code{path C}}
|
||||||
|
|
||||||
|
|
||||||
|
\item[Path] \enquote{Supertag} \xml{<path>}: eignet sich für Bézierkurven und (fast) alle anderen Objekte:
|
||||||
|
|
||||||
|
Ein Attribut \code{d} (\enquote{data}) enthält Zeichenkommandos und Koordinaten.\newline
|
||||||
|
\textbf{Kommandos} sind einzelne Buchstaben.
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Großbuchstaben: Koordinaten sind absolut
|
||||||
|
\item Kleinbuchstaben: relative Koordinaten zum jeweiligen Bezugspunkt (welcher sich nach der Abarbeitung jedes Kommandos ändert).
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{M x y}] Move: Bewegung zum Punkt (\code{x}, \code{y}), ohne etwas zu zeichnen
|
||||||
|
\item[\code{L x y}] Line: Zeichne eine Strecke von aktuellen Bezugspunkt zum Punkt (\code{x}, \code{y})
|
||||||
|
\item[\code{H y}] Horizontal Line: Zeichne eine horizontale Linie zum Punkt ($x$, $y_{Bezugspunkt}$)
|
||||||
|
\item[\code{V y}] Vertical Line: Zeichne eine vertikale Linie zum Punkt ($x_{Bezugspunkt}$, $y$)
|
||||||
|
\item[\code{a}] arc Kreisbögen (Parameter selbst nachschauen) und Ellipsenbögen
|
||||||
|
\item[\code{Q sx sy ex ey}] Quadratische Bézierkurve: Bézierkurve vom aktuellem Bezugspunkt über Stützpunkt (\code{sx}, \code{sy}) zum Endpunkt (\code{ex}, \code{ey})
|
||||||
|
\item[\code{C s1x s1y s2x s2y ex ey}] Kubische Bézierkurve: Bézierkurve vom aktuellem Bezugspunkt über die beiden Stützpunkte (\code{s1x}, \code{s1y}, \code{s2x}, \code{s2y}) zum Endpunkt (\code{ex}, \code{ey})
|
||||||
|
|
||||||
|
\item[\code{T ex ey}] ähnlich dem Kommando Q, jedoch wird hier als erster Kontrollpunkt der letzte aus der direkt zuvor festgelegten quadratischen Bézierkurve verwendet.
|
||||||
|
\item[\code{S s2x s2y ex ey}] ähnlich dem Kommando C, jedoch wird hier als erster Kontrollpunkt der letzte aus der direkt zuvor festgelegten Bézierkurve verwendet.
|
||||||
|
|
||||||
|
\item[\code{Z}] Schließt den Pfad zum letzten Kontrollpunkt, der durch \code{M} gesetzt wurde (es gibt keinen Unterschied zwischen Groß- und Kleinschreibung).
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
\item[Text] \xml{<text x="x" y="y">zu schreibender Text</text>}
|
||||||
|
|
||||||
|
Stellt eine Textzeile mit linkem oberen Eckpunkt (\code{x}, \code{y}) dar.
|
||||||
|
|
||||||
|
\item[Gruppierung] \xml{<g><!-- andere Tags welche gruppiert werden sollen --></g>}
|
||||||
|
|
||||||
|
Sinnvoll für Universalattribute
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\begin{figure}[h!]
|
||||||
|
\centering
|
||||||
|
\includegraphics[width=0.84\textwidth]{Bilder/Bezierkurven.png}
|
||||||
|
\caption{Quadratische und kubische Bézierkurve}
|
||||||
|
\label{fig:bezierkurven}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
\subsection{Universalattribute}\index{SVG!Universalattribute}
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[style] für \acs{CSS}-Angaben. Es gibt u.a. folgende \acs{CSS}-Properties:
|
||||||
|
|
||||||
|
\begin{tabular}{rl}
|
||||||
|
\code{\textbf{stroke}} & Strichfarbe \\
|
||||||
|
\code{\textbf{fill}}& Füllfarbe \\
|
||||||
|
\code{\textbf{opacity}}& Deckungsgrad (zwischen 0 und 1) \\
|
||||||
|
\code{\textbf{stroke-opacity}} &Deckungsgrad für Strich \\
|
||||||
|
\code{\textbf{fill-opacity}} &Deckungsgrad für Füllfläche \\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
Statt über \acs{CSS}-Properties gibt es auch die Möglichkeit, Darstellungsattribute direkt anzugeben, \zB
|
||||||
|
|
||||||
|
\xml{<line x1="0" x2="5" y1="3" y2="27" stroke="red" />}
|
||||||
|
|
||||||
|
\begin{Achtung}[frametitle=Achtung mit CSS!]
|
||||||
|
\acs{CSS}-Angaben überschreiben die Werte der Darstellungsattribute!
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\begin{Hinweis}[frametitle=Hinweis zu SVG 2]
|
||||||
|
Bei \acs{SVG} 2 werden auch die Geometrie-Attribute \code{x, y, x1, x2, y1, y2,cx, cy, rx, ry, r,... } zu Darstellungsattributen \enquote{promoted}/\enquote{befördert}.
|
||||||
|
|
||||||
|
Damit sind darauf \zB auch \acs{CSS}-Animationen anwendbar. \newline
|
||||||
|
Jedoch sorgt \css{* \{x:0;\}} dafür, dass alle Rechtecke an die X-Koordinate \code{0} positioniert werden (unabhängig vom Wert des Darstellungsattributs \code{x} im \xml{<rect/>}.
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\item[\code{transform}] für geometrische Abbildungen
|
||||||
|
\begin{description}
|
||||||
|
\item[\code{transform="{}translate(dx dy)"}] Verschiebung um (\code{dx}, \code{dy}) (\code{dy} kann weggelassen werden, dann wird nur in X-Richtung verschoben)
|
||||||
|
|
||||||
|
\item[\code{transform="{}scale(sx sy)"}] Skalierung um Faktor (\code{sx}, \code{sy}) (wird \code{sy} weggelassen, so ist \code{sy = sx}).
|
||||||
|
|
||||||
|
Mithilfe von \code{scale} kann man zudem Elemente spiegeln:
|
||||||
|
|
||||||
|
\begin{tabular}{ll}
|
||||||
|
\code{scale(-1,-1)} & Punktspiegelung \\
|
||||||
|
\code{scale(1,-1)} & Achsenspiegelung x-Achse \\
|
||||||
|
\code{scale(-1,1)} & Achsenspiegelung y-Achse \\
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
\item[\code{transform="{}rotate(angle cx cy)"}] Rotation um Winkel \code{angle} (Grad, nicht Radianten) um den optionalen Punkt (\code{cx, cy})
|
||||||
|
|
||||||
|
\item[\code{transform="{}skewX(angle)"}] Scherung horizontal um \code{angle} (Grad, nicht Radianten)
|
||||||
|
|
||||||
|
\item[\code{transform="{}skewY(angle)"}] Scherung vertikal um \code{angle} (Grad, nicht Radianten)
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Kombinierte Abbildung: \xml{transform="scale(3 7) translate(50 10)"} \newline
|
||||||
|
$\Rightarrow$ erst Verschiebung, dann Skalierung!
|
||||||
|
|
||||||
|
\item[Matrixtransformation] für beliebige affine Abbildungen: \code{matrix(a b c d e f)}
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
$
|
||||||
|
\begin{pmatrix}
|
||||||
|
x_{transf} \\
|
||||||
|
y_{transf} \\
|
||||||
|
1 \\
|
||||||
|
\end{pmatrix}
|
||||||
|
$ = $
|
||||||
|
\begin{pmatrix}
|
||||||
|
a & c & e \\
|
||||||
|
b & d & f \\
|
||||||
|
0 & 0 & 1 \\
|
||||||
|
\end{pmatrix}
|
||||||
|
$ $
|
||||||
|
\begin{pmatrix}
|
||||||
|
x_{orig} \\
|
||||||
|
y_{orig} \\
|
||||||
|
1
|
||||||
|
\end{pmatrix}
|
||||||
|
$
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
\textsf{\textbf{Beispiele}}
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\code{scale(sx sy)} als Matrixtransformation:
|
||||||
|
|
||||||
|
$
|
||||||
|
\begin{pmatrix}
|
||||||
|
x_{orig} \cdot sx \\
|
||||||
|
y_{orig} \cdot sy \\
|
||||||
|
1 \\
|
||||||
|
\end{pmatrix}
|
||||||
|
$ = $
|
||||||
|
\begin{pmatrix}
|
||||||
|
sx & 0 & 0 \\
|
||||||
|
0 & sy & 0 \\
|
||||||
|
0 & 0 & 1 \\
|
||||||
|
\end{pmatrix}
|
||||||
|
$ $
|
||||||
|
\begin{pmatrix}
|
||||||
|
x_{orig} \\
|
||||||
|
y_{orig} \\
|
||||||
|
1
|
||||||
|
\end{pmatrix}
|
||||||
|
$
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
|
||||||
|
\code{translate(dx dy)} als Matrixtransformation:
|
||||||
|
|
||||||
|
$
|
||||||
|
\begin{pmatrix}
|
||||||
|
x_{orig} + dx \\
|
||||||
|
y_{orig} + dy \\
|
||||||
|
1 \\
|
||||||
|
\end{pmatrix}
|
||||||
|
$ = $
|
||||||
|
\begin{pmatrix}
|
||||||
|
1 & 0 & dx \\
|
||||||
|
0 & 1 & dy \\
|
||||||
|
0 & 0 & 1 \\
|
||||||
|
\end{pmatrix}
|
||||||
|
$ $
|
||||||
|
\begin{pmatrix}
|
||||||
|
x_{orig} \\
|
||||||
|
y_{orig} \\
|
||||||
|
1
|
||||||
|
\end{pmatrix}
|
||||||
|
$
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
\subsection{Bézierkurve}\label{sec:bezier}
|
||||||
|
Konstruktion mithilfe des Algorithmus von de Casteljau\footnote{siehe auch \url{https://de.wikipedia.org/wiki/De-Casteljau-Algorithmus}}.
|
||||||
|
|
||||||
|
\begin{figure}[ht]
|
||||||
|
\centering
|
||||||
|
\includegraphics[width=0.6\textwidth]{Bilder/Quadratische_Bezierkurve_2.png}
|
||||||
|
\caption{Erzeugung einer quadratischen Bézierkurve}
|
||||||
|
\label{fig:bezierkurve_quadratisch_2}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
|
Wie in \autoref{fig:bezierkurve_quadratisch_2} gezeigt wird, liegt $O$ auf der Bézierkurve. Die Bézierkurve $A-B-C$ lässt sich als Konkatenation der beiden Bézierkurven $A-P-O$ und $O-R-C$ darstellen. Dadurch ist eine rekursive Anwendung möglich! Dies wird soweit ausgeführt, bis die Auflösung des Ausgabegerätes erreicht ist.
|
||||||
|
|
||||||
|
|
||||||
364
Kapitel/12_Uebungsklausur.tex
Normal file
364
Kapitel/12_Uebungsklausur.tex
Normal file
|
|
@ -0,0 +1,364 @@
|
||||||
|
\chapter{Übungsklausur -- 2016}
|
||||||
|
|
||||||
|
\section{Aufgabe 1 (18 Punkte – 2/6/10)}
|
||||||
|
\begin{enumerate}[label=\textsf{\textbf{\alph*)}},leftmargin=*]
|
||||||
|
\item Verweise werden im \acs{WWW} in einer besonderen Form realisiert. Wie heißt die technische Realisierungsform von Verweisen im \acs{WWW} und was ist daran anderes als bei den meisten Verweisen in unserem täglichen Leben?
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}} \newline
|
||||||
|
Die Realisierungsform von Verweisen heißt \enquote{Hyperlink}. \newline
|
||||||
|
Das besondere ist die automatische Verweisauflösung.
|
||||||
|
|
||||||
|
\item Zwei weitere Eigenschaften dieser Verweise (neben der in \textsf{\textbf{a.)}} gefragten) machen den Erfolg des \acs{WWW} aus. Um welche Eigenschaften handelt es sich (mit Erläuterung)? Waren beide Eigenschaften bereits vom Erfinder des Webs, Tim Berners-Lee, geplant? Belegen und begründen Sie ihre Antwort!
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}} \newline
|
||||||
|
Es handelt sich um die Lokations- und Medienunabhängigkeit.
|
||||||
|
|
||||||
|
\begin{description}
|
||||||
|
\item[Lokationsunabhängigkeit] \hfill \newline
|
||||||
|
Unabhängigkeit von der Lokation der Information und der des Suchenden. Dies war von Anfang an geplant, da auch der Tag für Hyperlinks (\html{<a>}) ab der ersten \acs{HTML}-Version existiert.
|
||||||
|
\item[Medienunabhängigkeit] \hfill \newline
|
||||||
|
Informationen können in verschiedenen Medienformaten (Bilder, Video, Text, \ldots) vorliegen. Dies war nicht geplant, da
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item das \code{T} in \acs{HTTP} für \enquote{Text} steht
|
||||||
|
\item das \code{T} in der Sprache \acs{HTML} für \enquote{Text} steht
|
||||||
|
\item die erste Version von \code{HTTP} keinen \code{Content-Type}-Header besaß
|
||||||
|
\end{itemize}
|
||||||
|
\end{description}
|
||||||
|
|
||||||
|
Vergleiche auch \autoref{sec:lokations_medienunabhaengigkeit} zu den Eigenschaften und \autoref{sec:html_history} für die Geschichte von \acs{HTML}.
|
||||||
|
|
||||||
|
\item Relativ und absolut sind zwei Begriffe, welche im Zusammenhang mit Verweisen häufig verwendet werden. Erläutern Sie, was relativ und absolut bei Verweisen bedeutet, in welchen Fällen Verweise relativ und absolut eingesetzt werden und was die jeweilige Form für Vorteile bietet!
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}}
|
||||||
|
|
||||||
|
\textbf{Absolute Verweise} haben ein festes Ziel. Dies hat den Vorteil, dass die angegebene \acs{URL} immer auf das gleiche Ziel verweist, auch wenn das Dokument verschoben wird. Dies wird zum Beispiel verwendet, wenn man auf die eigene Webseite verlinken möchte, aber unter einem anderen Protokoll (\acs{FTP}, \acs{HTTPS}, \ldots).
|
||||||
|
|
||||||
|
\textbf{Relative Verweise} können mithilfe der vollständigen \acs{URL} des enthaltenden Dokuments zu absoluten Verweisen gemacht werden. Vorteil ist \ua die kürzere Länge und die \enquote{Umzugsfähigkeit} der Web-Präsenz auf einen anderen Server (host-relativ) oder in ein anderes Verzeichnis (pfad-relativ).
|
||||||
|
|
||||||
|
Man unterscheidet zwischen:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Protokoll-relative \acs{URL} (falls \acs{HTTP}/\acs{HTTPS} automatisch gewählt werden soll)
|
||||||
|
\item Host-relative (Pfad absolute) \acs{URL} (für zentrale Dokumente, \zB den \acs{CSS}-Ordner).
|
||||||
|
\item Pfad-relative \acs{URL} (für den Verweis auf ein übergeordnetes Verzeichnis)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Siehe auch \autoref{sec:relative_url} auf Seite~\pageref{sec:relative_url}.
|
||||||
|
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
\section{Aufgabe 2 (22 Punkte – 10/12)}
|
||||||
|
|
||||||
|
\begin{enumerate}[label=\textsf{\textbf{\alph*)}},leftmargin=*]
|
||||||
|
\item Zur Repräsentation der lieferbaren Produkttypen (\enquote{Produktkatalog}) eines Schlossherstellers soll eine lineare Darstellung als Text mittels \acs{XML} Verwendung finden. Entwerfen und beschreiben Sie ein entsprechendes Dateiformat (inklusive einer kurzen \acs{XML}-Beispieldatei), welches folgende Daten enthält:
|
||||||
|
|
||||||
|
\vspace*{-2mm}
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item Eindeutige Kennung (numerisch)
|
||||||
|
\item Art des Schlüsselsystems (Einzelschloss, Systemschloss)
|
||||||
|
\item Anzahl möglicher Schlösser
|
||||||
|
\item Sicherheitsklasse (gekennzeichnet mit A für einfache Sicherheit bis E für hohe Sicherheit)
|
||||||
|
\item Verweis auf eine Abbildung
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\vspace*{-3mm}
|
||||||
|
\textsf{\textbf{Lösung}}\smallskip
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption=Schlosshersteller -- XML]
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!DOCTYPE schloesser SYSTEM "/URL/zur/DTD.dtd">
|
||||||
|
<schloesser>
|
||||||
|
<schloss id="123">
|
||||||
|
<system>Einzelschloss</system>
|
||||||
|
<anzahl-moeglichkeiten>999</anzahl-moeglichkeiten>
|
||||||
|
<sicherheit>A</sicherheit>
|
||||||
|
<abbildung href="http://meine.url/grafik.png">
|
||||||
|
Abbildung des Schlosses
|
||||||
|
</abbildung>
|
||||||
|
</schloss>
|
||||||
|
<schloss id="124">
|
||||||
|
<system>Systemschloss</system>
|
||||||
|
<anzahl-moeglichkeiten>9999</anzahl-moeglichkeiten>
|
||||||
|
<sicherheit>C</sicherheit>
|
||||||
|
<abbildung href="http://meine.url/grafik-2.png">
|
||||||
|
Abbildung des Schlosses Nr. 124
|
||||||
|
</abbildung>
|
||||||
|
</schloss>
|
||||||
|
</schloesser>
|
||||||
|
\end{lstlisting} % Diese Einrückung ist Absicht!
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
Bei dieser Aufgabe fehlt die Beschreibung noch. Es muss keine \acs{DTD} sein, eine schriftliche Beschreibung reicht. Den \code{DOCTYPE} sollte man jedoch nicht vergessen!
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\item Schreiben Sie eine \acs{XSLT}, welche eine entsprechend Ihrer obigen Grammatik geschriebene Datei in eine von jedem Web-Browser darstellbare \acs{HTML}-Datei wandelt. Dabei soll die Darstellung als eine Tabelle der obigen Felder erfolgen.
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption=XSLT -- Schlosshersteller]
|
||||||
|
<?xml version="1.0" encoding="utf-8" ?>
|
||||||
|
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<xsl:output method="html" encoding="UTF-8" doctype-public="html"/>
|
||||||
|
<xsl:template match="/">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Titel</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Kennung</th>
|
||||||
|
<th>System</th>
|
||||||
|
<th>Anzahl möglicher Schlösser</th>
|
||||||
|
<th>Sicherheitsklasse</th>
|
||||||
|
<th>Verweis (Abbildung)</th>
|
||||||
|
</tr>
|
||||||
|
<xsl:for-each select="/schloesser/schloss">
|
||||||
|
<tr>
|
||||||
|
<td><xsl:value-of select="@id" /></td>
|
||||||
|
<td><xsl:value-of select="system"/></td>
|
||||||
|
<td><xsl:value-of select="anzahl-moeglichkeiten"/></td>
|
||||||
|
<td><xsl:value-of select="sicherheit"/></td>
|
||||||
|
<td>
|
||||||
|
<a>
|
||||||
|
<xsl:attribute name="href">
|
||||||
|
<xsl:value-of select="abbildung/@href"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
<xsl:value-of select="abbildung"/>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</xsl:for-each>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</xsl:template>
|
||||||
|
</xsl:stylesheet>
|
||||||
|
\end{lstlisting}
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Aufgabe 3 (22 Punkte – 12/10)}
|
||||||
|
\begin{enumerate}[label=\textsf{\textbf{\alph*)}},leftmargin=*]
|
||||||
|
\item Gegeben seien die folgenden quadratischen Bezier-Kurven über die folgenden Koordinaten (\code{x}, \code{y}) von Anfangspunkt (AP), Stützpunkt (SP) und Endpunkt (EP):
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\begin{tabular}{ccc}
|
||||||
|
AP & SP & EP \\
|
||||||
|
2,4 & 3,5 & 7,5 \\
|
||||||
|
7,5 & 8,6 & 8,10 \\
|
||||||
|
9,8 & 8,9 & 3,7 \\
|
||||||
|
3,7 & -7,3 & 5,0 \\
|
||||||
|
\end{tabular}
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
Aus diesen Kurven wird ein Kurvenzug gebildet. Geben Sie an, an welchen Punkten (AP, SP und EP) der Kurvenzug rund ist und an welchen er \enquote{nicht rund} ist, also Ecken aufweist! Begründen Sie jeweils Ihre Antwort!
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}}
|
||||||
|
|
||||||
|
Der Kurvenzug ist am Punkt:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{7,5} eckig, da die Steigung der ersten und zweiten Kurve an dem Punkt nicht übereinstimmt (\code{0} $\Leftrightarrow$ \code{1})
|
||||||
|
\item \code{8,10} und \code{9,8} nicht stetig, da sich die Koordinaten unterscheiden. \newline
|
||||||
|
Somit ist er dort auch nicht rund.
|
||||||
|
\item \code{3,7} rund, da die Steigung der dritten und vierten Kurve gleich sind ($\frac{2}{5} \Leftrightarrow \frac{4}{10} = \frac{2}{5}$)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\includegraphics[scale=0.9]{Bilder/Uebungsklausur_Kurve.png}
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
Eine alternative Aufgabe könnte sein, dass Punkte vorgegeben sind und man diese erweitern muss, sodass sich eine Rundung ergibt!
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
\item Schreiben Sie eine vollständige \acs{SVG}-Datei, welche als Inhalt die in der vorigen Teilaufgabe beschriebenen Kurvenzüge hat!
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}}
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption=Übungsklausur -- SVG]
|
||||||
|
<svg width="200" height="150">
|
||||||
|
<path stroke-width="3" stroke="black" d="M2,4 Q3,5 7,5 M7,5 Q9,6 8,10 M9,8 Q8,9 3,7 M3,7 Q-7,3 5,0" fill="transparent"/>
|
||||||
|
</svg>
|
||||||
|
\end{lstlisting} % Diese Einrückung ist Absicht!
|
||||||
|
|
||||||
|
Wenn man die oben stehende Grafik erhalten möchte:
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=XML,caption=Übungsklausur -- Beispiel SVG mit Farbe]
|
||||||
|
<svg width="200" height="150" viewBox="-10 -10 100 150">
|
||||||
|
<path stroke-width="3" stroke="black" d="M20,40 Q30,50 70,50" fill="transparent"/>
|
||||||
|
<path stroke-width="3" stroke="red" d="M70,50 Q90,60 80,100" fill="transparent"/>
|
||||||
|
<path stroke-width="3" stroke="blue" d="M90,80 Q80,90 30,70" fill="transparent"/>
|
||||||
|
<path stroke-width="3" stroke="#ff00ff" d="M30,70 Q-70,30 50,0" fill="transparent"/>
|
||||||
|
</svg>
|
||||||
|
\end{lstlisting} % Diese Einrückung ist Absicht!
|
||||||
|
|
||||||
|
\begin{Tipp}
|
||||||
|
Da absolute Werte gegeben sind, ist es am sinnvollsten diese auch zu verwenden, \dash Großbuchstaben für die Bézierkurve. Der erste der drei Werte ist der Anfangspunkt. Dieser wird durch ein \enquote{move} (\code{M}) erreicht und durch eine quadratische Bézierkurve über den Stützpunkt und Endpunkt mit \code{Q} fortgesetzt.
|
||||||
|
\end{Tipp}
|
||||||
|
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Aufgabe 4 (16 Punkte – 10/6)}
|
||||||
|
|
||||||
|
\begin{enumerate}[label=\textsf{\textbf{\alph*)}},leftmargin=*]
|
||||||
|
\item Die folgende \acs{HTML}-Seite enthält mehrere syntaktische Fehler und entspricht damit in einigen Punkten nicht dem Standard. Ändern Sie den Code so ab, dass er fehlerfrei und XHTML1.0-konform wird. Geben Sie bei jedem Fehler eine kurze Begründung an!
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=HTML - Klausuraufgabe]
|
||||||
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||||||
|
<!DOCTYPE html PUBLIC "W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en" land="en">
|
||||||
|
<kopf>
|
||||||
|
<link rel=stylesheet type=text/css href="formate.css">
|
||||||
|
</kopf>
|
||||||
|
<BODY>
|
||||||
|
<ol>
|
||||||
|
<li>Dies ist das erste Element einer ungeordneten Liste.</li>
|
||||||
|
<li>Und hier folgt das zweite Element.
|
||||||
|
<li>Das dritte Element enthä:lt eine weitere Liste:
|
||||||
|
<ul>
|
||||||
|
<li>bla</li>
|
||||||
|
<li>fasel</li>
|
||||||
|
<li>blubber</li>
|
||||||
|
</ol>
|
||||||
|
Damit ist dann die innere Liste und auch das dritte Element beendet.
|
||||||
|
</LI>
|
||||||
|
<ul>
|
||||||
|
Das ist fast das Ende.
|
||||||
|
<br>
|
||||||
|
Das ist das Ende.
|
||||||
|
</BODY>
|
||||||
|
</html>
|
||||||
|
\end{lstlisting} % Diese Einrückung ist Absicht!
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}}
|
||||||
|
|
||||||
|
\hspace*{-7mm}
|
||||||
|
\begin{tabular}{c|p{14.2cm}}
|
||||||
|
Zeile & Fehler und Erläuterung \\
|
||||||
|
\midrule
|
||||||
|
4 & Der Wert des Attributs \code{xmlns} steht nicht in Anführungszeichen. Attributwerte müssen in \acs{XML} in doppelten (nicht einfachen!) Anführungszeichen stehen. \\
|
||||||
|
4 & Das Attribut \code{land} müsste \code{lang} heißen. \\
|
||||||
|
5 + 7 & Der Tag müsste \html{<head>} sein, nicht \html{<kopf>} \\
|
||||||
|
5 & Es fehlt das Pflicht-Tag \html{<title>Mein Titel</title>}\\
|
||||||
|
6 & Die Attributwerte von \code{rel} und \code{type} müssen in doppelten Anführungszeichen stehen. \\
|
||||||
|
6 & Beim Tag \html{<link ...>} fehlt das schließende Tag. Es müsste sein: \html{<link ... />} \\
|
||||||
|
8 & \html{<BODY>} müsste kleingeschrieben sein, da in \acs{XHTML} Tags kleingeschrieben sein müssen! \\
|
||||||
|
9 & \sout{Da es in Zeile 10 heißt, es wäre ein Element einer ungeordneten Liste, müsste der Tag \html{<ul>} und nicht \html{<ol>} sein, da \glqq{}ul\grqq{} für \glqq{}unordered list\grqq{} steht.} $\Rightarrow$ semantischer Fehler! \\
|
||||||
|
11 & Das schließende Tag (\html{</li>}) fehlt, denn bevor ein neues \html{<li>} geöffnet werden kann (siehe Zeile 11), muss das vorherige Tag geschlossen werden. \\
|
||||||
|
12 & Die HTML-Entität muss mit einem Semikolon (\code{;}) beendet werden, denn mit einem Doppelpunkt würde nicht ein \code{ä} dargestellt werden, sondern \code{\ä:}\\
|
||||||
|
17 & Das öffnende Tag \html{<ul>} wird nicht durch ein entsprechendes schließendes Tag \html{</ul>} geschlossen. Das Tag \html{</ol>} schließt nicht \html{<ul>}! \\
|
||||||
|
19 & Das schließende Tag \html{</LI>} muss kleingeschrieben werden, da dies vom \acs{XHTML}-Standard vorgeschrieben ist! \\
|
||||||
|
20 & Es wird eine ungeordnete Liste geöffnet, bevor die geordnete geschlossen ist. Es müsste sich um ein \html{</ol>} handeln, bzw. um ein \html{</ul>}, wenn man den Fehler in Zeile 9 beachtet. \\
|
||||||
|
22 & Der Zeilenumbruch muss in \acs{XHTML} geschlossen werden! Es müsste sein: \html{<br/>} \\
|
||||||
|
24 & Das schließende Body-Tag muss klein geschrieben werden (\html{</body>})! \\
|
||||||
|
\end{tabular}
|
||||||
|
\medskip
|
||||||
|
|
||||||
|
\begin{Hinweis}
|
||||||
|
Gesucht sind syntaktische Fehler! Semantische Fehler wie in Zeile 9 sind \textbf{nicht} gesucht!
|
||||||
|
\end{Hinweis}
|
||||||
|
|
||||||
|
\item Skizzieren Sie, wie die Darstellung des (korrigierten) \acs{HTML}-Codes in einem gängigen Webbrowser aussehen könnte.
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}}
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\includegraphics[scale=0.86]{Bilder/Uebungsklausur_XHTML.png}
|
||||||
|
\end{center}
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Aufgabe 5 (22 Punkte – 14/8)}
|
||||||
|
Gegeben ist folgendes Stylesheet in der Datei \code{mystyle.css}:
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=CSS,caption=Übungsklausur -- CSS]
|
||||||
|
body { color:#000000; }
|
||||||
|
em { color:#0000ff; }
|
||||||
|
p em { color:#ffffff; }
|
||||||
|
em.dieseklasse { color:#ff0000; }
|
||||||
|
.dieseklasse { color:#ff00ff; }
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Ferner hat der Benutzer seinen Browser angewiesen, das folgende Stylesheet zu verwenden:
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=CSS,caption=Übungsklausur -- CSS -- Browser-Stylesheet]
|
||||||
|
em { color:#00ff00; }
|
||||||
|
h1 { color:#00ff00 !important; }
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
|
||||||
|
\begin{enumerate}[label=\textsf{\textbf{\alph*)}},leftmargin=*]
|
||||||
|
\item Geben Sie bei jeder Zeile, welche Text zur Ausgabe enthält, im Quellcode folgender \acs{HTML}-Datei an, in welcher Farbe der entsprechende Text bei der Darstellung im Browser des Benutzers angezeigt wird! Begründen Sie jeweils kurz ihre Angabe!
|
||||||
|
|
||||||
|
\begin{Achtung}
|
||||||
|
Der Dozent erwartet, dass keine Hexcodes oder \code{rgb(r,g,b)}-Farben in dieser Aufgabe angegeben werden. Somit muss man die Hexcodes in Wörtern hinschreiben!
|
||||||
|
\end{Achtung}
|
||||||
|
|
||||||
|
\begin{lstlisting}[language=HTML5,caption=Übungsklausur -- HTML mit CSS]
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS-Test</title> <!-- das wird nicht angezeigt, Dummkopf! -->
|
||||||
|
<link href="mystyle.css" rel="stylesheet" type="text/css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 style="color: blue">Erster Teil</h1> <!-- grün -->
|
||||||
|
<p class="dieseklasse" >
|
||||||
|
Das hier sieht wie aus? <!-- pink -->
|
||||||
|
<em>Dieser Text hat welche Farbe?</em> <!-- weiß -->
|
||||||
|
<em class="dieseklasse" > Und dieser hier?</em> <!-- rot -->
|
||||||
|
</p>
|
||||||
|
<h1 class="dieseklasse" > Zweiter Teil</h1> <!-- grün -->
|
||||||
|
<ul>
|
||||||
|
<li>Welche Farbe wird hier verwendet?</li> <!-- schwarz bzw. -->
|
||||||
|
<!-- Browser-default -->
|
||||||
|
<li><em>Und hier?</em></li> <!-- blau -->
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
\end{lstlisting} % Diese Einrückung ist Absicht!
|
||||||
|
|
||||||
|
Erklärung:
|
||||||
|
|
||||||
|
\begin{tabular}{cl}
|
||||||
|
7 & Die \code{!important}-Angabe überschreibt das \code{style}-Tag! \\
|
||||||
|
15 & Es wurde keine Farbe angegeben, deshalb wird dies vom Browser festgelegt.
|
||||||
|
\end{tabular}
|
||||||
|
|
||||||
|
Die folgende Grafik veranschaulicht den \acs{HTML} Code. Der weiße Text wurde markiert, damit er sichtbar wird.
|
||||||
|
|
||||||
|
\begin{center}
|
||||||
|
\includegraphics[scale=.7]{Bilder/Uebungsklausur_CSS.png}
|
||||||
|
\end{center}
|
||||||
|
|
||||||
|
\newpage
|
||||||
|
|
||||||
|
\item \acs{CSS}-Regeln und Regelteile können grundsätzlich aus verschiedenen Quellen stammen. Aus welchen? Erläutern Sie die verschiedenen Verwendungsarten!
|
||||||
|
|
||||||
|
\textsf{\textbf{Lösung}}
|
||||||
|
|
||||||
|
Es gibt:
|
||||||
|
|
||||||
|
\begin{itemize}[noitemsep]
|
||||||
|
\item \code{author}: \html{<link>} und \html{<style>} im \html{<head>} und \code{style} als Attribut. Die Regeln stammen vom Webseiten-Autor.
|
||||||
|
\item \code{user}: Vom Nutzer festgelegte Regeln, \zB für sehbehinderte angepasstes Design.
|
||||||
|
\item \code{user-agent}: Vom Browser festgelegtes Design (\enquote{default})
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
Siehe auch \autoref{sec:CSS_Quellen} auf Seite~\pageref{sec:CSS_Quellen} für \acs{CSS} Quellen.
|
||||||
|
\end{enumerate}
|
||||||
|
|
||||||
|
|
||||||
|
\section{Weitere mögliche Aufgabe}
|
||||||
|
Die folgenden Aufgaben könnten Klausuraufgaben sein.
|
||||||
|
|
||||||
|
\begin{enumerate}
|
||||||
|
\item Nennen und erläutern zwei große Gruppen von Grafikformaten.
|
||||||
|
\item Zu welcher Gruppe gehört \acs{SVG}, nennen sie die wichtigsten Unterschiede zu \acs{JPEG}.
|
||||||
|
\item Setzen Sie die gegebene Liste in gültigen \acs{HTML}-Code um.
|
||||||
|
\item Neben den zwei Listentypen aus \textit{3}, gibt es einen dritten? Welchen? Wo wird er verwendet? Was ist der Unterschied?
|
||||||
|
\item Erläutern sie die in den \acs{CSS} Regeln verwendete Selektoren.
|
||||||
|
\end{enumerate}
|
||||||
Loading…
Reference in a new issue