\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&auml: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{\&auml:}\\
        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}