\chapter{Themes}
\section{Design}
\subsection{Planung}
Entworfen werden sollte eine Website auf welcheren Fenster geöffnet werden
können, in denen Programme des Rechners auf welchen man übers Internet zugreift
ausgeführt werden. Daher auch der Projektname Ajaxwm, welcher kurz für
\href{http://de.wikipedia.org/wiki/Ajax\_(Programmierung)}{Ajax} Window Manager
steht. Es bot sich an das ganze im Stil von Windows XP zu entwerfen, weiter
Ziele waren, ein Minimalstil für Menschen mit einer Abneigung gegenüber
Microsoft sowie ein Vista und Mac OS Stile.

Als weiteres Ziel sollte ich noch einen Login Screen entwerfen.

\begin{figure}[htbp]
\begin{center}
\includegraphics[height=0.3\textwidth]{Kapitel6/win.png}
\href{http://www.cs.uni-paderborn.de/fileadmin/Informatik/IRB/images/anmelden.jpg}{\includegraphics[height=0.3\textwidth]{Kapitel6/login.png}}
\caption{So sieht’s bei Original Microsoft Windows XP aus}
\end{center}
\end{figure}

\begin{landscape}
\begin{figure}[htbp]
\begin{center}
\includegraphics[width=1.3\textwidth]{Kapitel6/entwurf.png}
\end{center}
\caption{Handgezeichneter Entwurf des Windows XP Stils}
\end{figure}
\end{landscape}

\subsection{Statischer Aufbau}
Die Design Webseiten sind
\href{http://multimedia.zawiw.uni-ulm.de/~webdemo/webkurs/static-de.html}{statisch}
geschrieben, d.h. sie sehen bei  jedem Aufruf genau identisch aus und lassen
sich auch nicht verändern. Wäre ein Besucherzähler enthalten, dann wären Sie
bereits nicht mehr  statisch, denn dieser Zähler verändert sich mit der Zahl
der Seitenaufrufe. Der Seite Leben einzuhauchen ist Andys Aufgabe. Sein
geschriebenes JavaScript wird sich dann darum kümmern die geöffneten Fenster an
der richtigen Stelle anzuzeigen, oder wenn sie verschoben werden, sie mit den
neuen Koordinaten frisch aufzubauen.

\begin{center}
\includegraphics[width=0.9\textwidth]{Kapitel6/style.png}
\end{center}

\subsection{Stand}
Der Windows XP Stil, steht demnächst vor seiner Fertigstellung, allerdings muss
die Desktop Ansicht aufgrund eines Fehlers bei der Taskleiste noch einmal
redesignd werden. Der Anmeldebildschirm muss noch um die zugehörigen Bilder
erweitert werden.

\begin{center}
\includegraphics[width=0.9\textwidth]{Kapitel6/style2.png}
\end{center}

\section{HTML}
Im HTML Teil der Webseiten stehen keine Angaben zur Formatierung, zum Stil und
zur Ausrichtung. Siehe \hyperlink{winxp.html}{winxp.html} für die HTML-Datei.

\begin{figure}[htbp]
\begin{center}
\includegraphics[width=0.5\textwidth]{Kapitel6/ohnecss.png}
\end{center}
\caption{Aussehen der Seite ohne CSS}
\end{figure}

\begin{figure}[htbp]
\begin{center}
\includegraphics[width=0.9\textwidth]{Kapitel6/mitcss.png}
\end{center}
\caption{Jetziger Stand mit CSS}
\end{figure}

\section{CSS}

Die CSS-Datei steht unter \hyperlink{style1.css}{style1.css} zur Verfügung.

Der Name des zu definierenden Elements wird hingeschrieben, falls es sich
innerhalb eines anderen Elements befinden wird der Name des Elternelements
davor geschrieben. Die verwendeten Anweisungen sind in { } diese Klammern  zu
schreiben, jede Anweisung muss mit einem  ;  geschlossen werden sonst übersieht
der Browser sie. Der Internet Explorer von Microsoft stellt die meisten obwohl
richtig geschriebenen Anweisungen trotzdem falsch dar, da er sich nur selten an
Standards hält. Zur steht’s korrekten Anzeige sollte daher der Mozilla Firefox
verwendet werden.


\begin{figure}[htbp]
\begin{center}
\includegraphics[width=0.9\textwidth]{Kapitel6/ie.png}
\end{center}
\caption{So stellt der Internet Explorer die unter Punkt 2(HTML)- Stand
gezeigte Website (Desktop Seite) dar:}
\end{figure}

\begin{longtable}{p{0.25\textwidth}|p{0.65\textwidth}}
{\it CSS-Befehl} & {\it Funktion (Angaben ohne Gewähr)}\\
\hline
{\tt Width}	& ist für die Breite des zu erstellenden Elements, die Angabe kann absolut also in Pixel erfolgen, z.B.  100px oder in Prozenten relativ zur Größe des Browserfensters oder  Elternelements z.B. 20\%\\
{\tt Height} & ist für die Höhe des zu erstellenden Elements, die Angabe kann absolut also in Pixel erfolgen, z.B.  100px oder in Prozenten relativ zur Größe des Browserfensters oder  Elternelements z.B. 20\%\\
{\tt Background-color} & damit lässt sich die Farbe des Hintergrundes entweder von der ganzen Seite oder nur vom betreffenden Element einstellen. Angaben wie z.B. black oder \#004e98 sind zulässig.\\
{\tt Background-image} & Mit der Angabe von url(bild.jpg) kann man ein Hintergrundbild definieren.\\
{\tt Background-repeat} & Die Angabe no-repeat verhindert das als Hintergrund angegeben Bild nicht wiederholt wird.\\
{\tt Margin} & Abstand zu einem anderen \href{http://www.css4you.de/margin.html}{Element}.\\
{\tt Padding} & Definiert  den Innenabstand zwischen Elementrand und  Inhalt.\\
{\tt Position} & Mit diesem Befehl kann man die gewünschte Ausrichtung bestimmen.\\
{\tt Top} & Gibt an, an welcher Stelle das Element erscheinen wird. Von oben ausgehend in Pixel oder Prozent.\\
{\tt Left} & Wie top nur von links ausgehend in Pixel oder Prozent. Right und Bottom (unten) sind auch möglich.\\
{\tt Text-align} & Hiermit lässt sich die Textausrichtung festlegen. Text-align\} center;  richtet den Text mittig aus.\\
%{\tt Float} & Entweder left oder right, bestimmt den Fluß des Elements.\\
\caption{Die verwendeten Befehle}
\end{longtable}

\section{Umsetzung}
\subsection{Loginseite}
Auf der Loginseite trägt man seinen Benutzernamen, das Passwort und den Hostpc
auf welchen man zugreifen möchte ein. Hier fehlen noch die Formulare zur
Eingabe der Daten.

\begin{center}
\includegraphics[width=0.9\textwidth]{Kapitel6/login2.png}
\end{center}
  
\subsection{Desktopseite}
Die Desktopseite wird verwendet um wie im Vorbild zu funktionieren,  so wurde
eine Taskleiste verwirklicht, in welcheren  später die geöffneten Programme
erschein sowie ein Info Teil mit Uhrzeit und Verbindungsstatus. Was bei Windows
XP Start heißt wird hier die Funktion erhalten sich auszuloggen oder einzelne
Programme zu starten.

\begin{center}
\includegraphics[width=0.9\textwidth]{Kapitel6/taskleiste.png}
\end{center}
