Kontextabhängige Webseiten-Stilisierung als Aesthetik-Konzept · Farbe und Bilder einer Webseite in Abhängigk eit v om Wetter automatisch ändern. Ziel dieser Arbeit ist es mögliche

KontextabhängigeWebseiten-Stilisierung als

Aesthetik-Konzept

Table of Contents1. Aufgabenstellung und Lösungsansatz ............................................................................................. 1

1.1. Aufgabenstellung ............................................................................................................. 11.2. Lösungsansatz ................................................................................................................. 2

2. Einleitung ................................................................................................................................. 22.1. 1. Was ist Webdesign? ....................................................................................................... 2

2.1.1. Die Pyramide des Webdesig ..................................................................................... 22.1.2. 1.2 Die Komponenten von Web Medien ..................................................................... 32.1.3. Benutzer-zentriertes Design ..................................................................................... 3

3. Eine Webseite mit HTML und CSS Datei ........................................................................................ 43.1. Beispiel HTML und CSS Datei ........................................................................................... 43.2. Position .......................................................................................................................... 63.3. Link .............................................................................................................................. 73.4. Grafik ............................................................................................................................ 73.5. Style-Sheets .................................................................................................................... 7

3.5.1. Stile in einem HTML-Tag ....................................................................................... 83.5.2. Style-Sheets im Kopf der HTML-Seite ....................................................................... 83.5.3. Externe Style-Sheets importieren .............................................................................. 83.5.4. Externe Style-Sheets linken ..................................................................................... 9

3.6. Einheiten ........................................................................................................................ 94. Kontextabhängig mit Technik ........................................................................................................ 9

4.1. Browserabhängigkeit ........................................................................................................ 94.1.1. CSS Datei verändern ............................................................................................ 114.1.2. Mit Javascript ...................................................................................................... 124.1.3. Mit PHP ............................................................................................................. 13

4.2. Bildschirm .................................................................................................................... 145. Kontextabhängig mit "E-Nachrichten" ........................................................................................... 15

5.1. Zeit .............................................................................................................................. 155.1.1. Beispiel abhängige Tagszeit ................................................................................... 17

5.2. Wetter .......................................................................................................................... 195.3. Benutzer ....................................................................................................................... 22

5.3.1. User Information bekommen .................................................................................. 225.3.2. CSS-Datei erzeugen ............................................................................................. 245.3.3. CSS-Datei aufrufen .............................................................................................. 295.3.4. Mit unterschiedliche Bildschirm ............................................................................. 29

1. Aufgabenstellung und Lösungsansatz

1.1. Aufgabenstellung

Kontextabhaengige Webseiten-Stilisierungen können in unterschiedlicher Form umgesetzt werden. Es gibt einmaldie Möglichkeit den Benutzer anhand von vorgegebenen Kontextparameter zwischen mehreren Webseiten-Stilis-ierungen auswaehlen zu lassen, wie beispielsweise der Sprache. Andererseits gibt es die Möglichkeit, dass sichder Stil der Webseite automatisch in Abhängigkeit von Kontextparametern anpasst. Beispielsweise könnten sich

1

XML to PDF by RenderX XEP XSL-FO Formatter, visit us at http://www.renderx.com/

http://www.renderx.com/

http://www.renderx.com/reference.html

http://www.renderx.com/tools/


Farbe und Bilder einer Webseite in Abhängigkeit vom Wetter automatisch ändern. Ziel dieser Arbeit ist es möglicheMethoden zur Parameterermittlung zu finden und entsprechende Stilisierungen zu entwickeln.

1.2. Lösungsansatz

2. Einleitung

2.1. 1. Was ist Webdesign?

Die meisten Menschen haben eine eigene Meinung über Webdesign. Diese Meinungen sind unterschiedlich, abernur einige können eindeutig definiert werden. Komponenten wie Bild, Graphik, Text und Programmierung werdenaber meistens in diesem Zusammenhang erwähnt.

2.1.1. Die Pyramide des Webdesig

Eine Methode, um alle Komponenten des Webdesign zu berücksichtigen, ist die Darstellung des Webdesignmetaphorisch als Pyramide.

Der Inhalt(content) wird durch die Ziegel dargesteltl, der die Pyramide bildet. Aber das Fundament liegt stabil aufden beiden Komponenten Form und Funktion. Die Form legt sich über das Screen Layout einer Seite. DiesesLayout wird im allgemeinen erstellt mit HTML, CSS oder aber auch Flash sowie Grafikelementen, die zurDekoration oder Navigation dienen. Dieser visuelle Aspekt der Webseite ist der meist zweifelslose Aspekt desWebdesign. Die Funktion bezieht sich auf die vershiedenen core-web-Technologie, die von uns benutzt werden,wie z.B. HTML, CSS oder Java . Die Technologie im Kontext legt sich üblicherweise meist über die verschiedeneninteraktiven Elemente der Webseite. Und diese Elemente werden in client-side-scripting, wie z.B. Javascript undserver-side applications unterschieden.

2

Kontextabhängige Webseiten-Stilisier-ung als Aesthetik-Konzept






2.1.2. 1.2 Die Komponenten von Web Medien

Weil die Pyramide des Webdesign sehr abstrakt ist, ist es einfacher für uns über die Komponenten von WebMedien zu diskutieren. Die folgende Darstellung stellt die verschiedenen Komponenten der Web Medien dar.

server-side:

Serverseitig umfasst die Web-Server Hardware und Software, aber auch die Programmierelemente. Die Technolo-gien können unterschieden werden in einfache CGI Programme, die in PERL geschrieben werden, und in komplexemulti-tier Java, die auf Applikation basieren. client-side:

Clientseitig bezieht sich auf die Web-Browser und ihre unterstützenden Technologien, wie z.B. HTML, CSS,XHTML und Javascript languages und ActveX Controls oder Netscape plug-ins.

networl:

Das Netzwerk beschreibt die verschiedenen Element. Man benutzt diese Element um die Webseite zum Benutzerzu geben.

2.1.3. Benutzer-zentriertes Design

Die Menschen sind das eigentliche Zentrum von ihren eigenen Welten. Deshalb bekommen sie alle Informationenanfänglich von ihren eigenen Ansichtspunkten. Wir müssen beobachten, dass wir die Webseiten in die Welt vonunseren Benutzern bringen sollen. Wir müssen wissen, dass jeder Benutzer seine eigene Meinung, Leistungsfähigkeit,Umwelt, und Erfahrung hat. Alle diese Faktoren beeinflussen die Interpretation der Webseite.

3







Die Präsentation, Medien, Kontext und Navigation, die in der folgende Abbildung dargestellt werden, beeinflussendie Benutzern. Außer den Faktoren, es ist auch sehr wichtig, dass eine Balance zwischen dem was der Nutzerdenkt und will und dem was der Designer denkt und will, erreicht wird.

In der heutigen Zeit ist das Internet sehr stark verbreitet, und die Benutzer haben mehrere Möglichkeiten wie mandas Internet nutzen kann. Beispielsweise hat der Benutzer die Möglichkeit verschiedene Browser zu verwenden,wie z.B. Firefox, Opera, Netscape oder IE. Diese Browser haben leider verschiedene Kern-Techniken. Deshalbhaben die Webdesigner in der heutigen Zeit zusätzliche Aufgaben zu bewältigen, die sich damit beschäftigen, dieDarstellung einer Webseite in den verschiedenen Browsern konsistent zu gewährleisten. In weitere Kapiel werdeich als Beispiel vorstellen.

3. Eine Webseite mit HTML und CSS DateiAls Beispiel-Webseite habe ich eine HTML-Datei mit einer dazugehörigen CSS-Datei entwickelt. In diesemKapitel wird ich die HTML- und CSS-Datei meiner Webseite näher vorstellen.

3.1. Beispiel HTML und CSS Datei

Die Datei color.html sieht folgendermaßen aus:

<?xml version='1.0' encoding='ISO-8859-1'?><!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="de" lang="de">

<head><title>Willkommen, Color Design</title><mete name= "author" content= "YangYingxi" /><meta name= "description" content= "Color Design" /><link rel="stylesheet" href="css0.css" type="text/css" title="style0" />

</head>

<body>

<div id="header"> <h1>COLOR DESIGN</h1></div>

<div id="image"> <image src="wine.jpg" alt="Wine" /></div>

<div id="mainbox"> <h2>Webdesign</h2> <p>Wir Menschen assoziieren - warum auch immer - bestimmte Gefuehle und Reaktionen mit bestimmten Farben. In vielen Faellen laesst sich das sicher evolutionaer erklaeren: Alle sogenannten "Signalfarben" stellen in der Natur ein Zeichen fuer Gefahr dar.<br />So verallgemeinern laesst sich das aber nicht. Es ist davon auszugehen, dass die Farb-Wahrnehmung je nach Kulturkreis variiert. So zum Beispiel die traditionelle Bedeutung der Farbe Weiss im Europa/Asien-Vergleich: In Europa bei Hochzeiten verwendet, wird sie in asiatischen Laendern oft zu Beerdigungen getragen. Die hier getroffenen Aussagen beziehen sich ausschliesslich auf den westlichen Kulturkreis. Gestalten Sie also fuer eine andere Zielgruppe, raten wir Ihnen, sich ueber die vor Auftragsausfuehrung genauestens zu informieren. Gefühle sind schneller verletzt, als man denken mag - auch durch Verwendung bestimmter Farben kann es dazu kommen. <p> </div>

<div id="bottom"> <p>

4







<a href="Color.html">Gelb</a>&emsp; <a href="Color.html">Orange</a>&emsp; <a href="Color.html">Rot</a>&emsp; <a href="Color.html">Grün</a>&emsp; <a href="Color.html">Blau</a> </p></div>

<div id="footer"><p>Yingxi Yang, 2006</p></div></body>

</html>

In der Webseite wird der Inhalt der Webseite festgelegt. Es wurden fünf verschiedene Boxen definiert. Das div"header" enthält die Überschrift "Color Design". Das div "image" enthält das Bild "Wine". Das div "mainbox"enthält einen Text zum Thema Color Design. Das div "bottom" enthält Verknüpfungen und das div "footer" bein-haltet Informationen über den Autor.

Aber wie der Inhalt der Webseite auf dem Bildschirm dargestellt wird, ist abhängig von der zugehörigen CSS-Datei. Mit dem Ausdruck <link rel="stylesheet" href="css0.css" type="text/css" title="style0" /> wird in derHTML-Datei die externe CSS-Datei css0.css eingebunden. Die Datei css0.css definiert den Stil, d.h. die gestalterischeUmsetzung der Webseite.

Die Datei css0.css sieht folgendermaßen aus:

body { margin: 0; padding: 0; font-size: 80%; font-family: Verdana, sans-serif; background-color: #ccff00;}

#header {position: absolute;background: #FFCCCC;top: 0;left: 0;width: 100%;height: 11%;}

#header h1 {text-align: center;vertical-align: middle;}

#image {position: absolute;top: 11%;left: 0;height: 64%;width: 30%;}

#image img {width: 100%;height: 100%;}

#mainbox {position: absolute;top: 14%;left: 34%;height: 64%;width: 60%;

5







overflow: auto;}

#mainbox h2 {margin: 3%;font-size: 160%;}

#mainbox p {margin: 3%;font-size: 130%;}

#bottom {position: absolute;background: #9999ff;top: 75%;left: 0;width: 100%;height: 11%;}

#bottom p {margin-top: 2%;text-align: center;vertical-align: middle;font-weight: bold;font-size: 120%;}

#bottom a {text-decoration: none;color: #000000;}

#footer {position: absolute;bottom: 0;left: 0;width: 100%;}

#footer p {margin: 0;font-size: 80%;text-align: center;vertical-align: bottom;}

In der CSS-Datei habe ich mehrere Boxen definiert, so dass man einfacher Veränderungen vornehmen kann.

Zunächst habe ich "body" definiert, um die Schriftart und -größe sowie die Hintergrundfarbe für die gesamteWebseite anzugeben. Der Vorteile ist, dass beispielsweise spätere Änderungen der Schriftgröße, wenn sie diegesamte Webseite betreffen, nur in "body" vorgenommen werden müssen anstatt in jedem einzelnen div.

3.2. Position

In HTML werden Elemente in der Reihenfolge platziert, wie sie im HTML-Dokument notiert wurden. Dabei verhaeltsich das nachfolgende Element immer relativ zum vorherigen. In CSS kann man die Reihenfolge der Positionierungmit dem div-Element durchbrechen und somit jedes beliebige HTML-Element (indem es innerhalb eines div-Ele-ments steht) an die Position stellen, die einem am besten gefällt. Die entsprechende Eigenschaft lautet positionund kennt folgende Werte:

absolut; absolute Positionierung, gemessen am vorherigen Element.relativ; relative Positionierung, gemessen von der eigentlichen Postiion des Elements.static ; keine Positionierung, folgt dem normalen Element-bzw.Textfluss.

6







Wenn man das div-Element verwendet, um Absätze oder Überschriften auszurichten oder zu gruppieren, kann esvorkommen, dass der Inhalt über die mit width und height zugewiesene Größe des Bereiches hinausgeht. Normaler-weise vergrößert der Browser in diesem Fall den Bereich, um den kompletten Ihhalt darstellen zu können, oder erverkleinert ihn - je nach Bedarf. Aber die Verwendung der Eigenschaft overflow macht am meisten Sinn. Mankann mit dieser Eigenschaft dem Browser die Entscheidung abnehmen, wie er im Fall eines Konflikts mit demübergroßen Inhalt zu verfahren hat.

3.3. Link

Das div "bottom" der HTML-Datei enthält folgenden Code:

<a href = "Color.html">Gelb</a>

Es handelt sich hierbei um einen Link, der auf dieselbe HTML-Seite verlinkt. Um auf eine andere HTML-Seitezu verlinken, muss man die Syntax des Attributs href etwas verändern.

Wenn man auf eine Datei in einem anderen Ordner verlinken will, muss man dem Dateinamen den Pfad des Ordnersvoranstellen. Man unterscheidet zwischen absoluten und relativen Links. Absolute Links beginnen mit http odermit einem Solsh /. Absolut heißt, dass der Pfad der verlinken Daten unanhängig von der Datei, aus der gelinktwird, angegeben wird.

<a href = "http://www.web.de/">Web</a>

Bei einem relativen Link hingegen ist die Datei, aus der gelinkt wird, die Basis, von der aus auf die Zieldatenverwiesen wird. Der folgende Link verweist beispielsweise auf eine Datei in einem übergeordneten Ordner:

<a href = "../index.html">Color</a>

Um einen Link auf eine Email-Addresse in eine HTML-Seite yu integrieren, muss man in das Attribut href dieEmial-Addresse und davor ein mailto: eintragen.

<a href = "mailto:[email protected]">Melde mich</a>

3.4. Grafik

Um eine Grafik in eine HTML-Seite zu integrieren, verwendet man das Tag <img> ("img" steht für "image" =Bild). Dieses Tag wird mit </img> beendet oder <img />.

Ale erstes Attribut für das <img>-Tag benötigt man src. Mit diesem Attribut definiert man die Position ("src" stehtfür "source" = Quelle), an der das Bild zu finden ist. Das Attribut src funktioniert im Prinzip wie ein normalerLink mit dem Attribut href.

<img src = "grafik.gif" />

Man gibt den Namen des Bildes an, wenn es sich in demselben Verzeichnis befindet. Links auf ein anderesVerzeichnis realisiert man als relative oder absolute Links. Liegt also das Bild beispielsweise im Verzeichnis IM-AGE, dann sähe der Bildaufruf so aus:

img src = "image/grafik.gif" />

Mit dem Attribut alt legt man einen Text fest, der angezeigt wird, falls die Grafik nicht geladen wird (z.B. weilder Nutzer das Laden von Grafiken unterbunden hat). Außerdem erscheint der Text in den gängigen Browsern,wenn man mit der Maus über die Grafik fährt.

3.5. Style-Sheets

Es gibt insgesamt drei Arten von Style-Sheets. Zum einen Stile, die direkt in einem HTML-Tag eingebunden sind.Dann Style-Sheets im Kopf eines Dokuments, Als letzts gibt es noch Style-Sheets, die in einer externen Datei mitder Dateiendug .css gespeichert sind. Bei dem externen Style-Sheets unterscheidet man nochmals zwischen Style-Sheets, die mit @import werden, und solchen, die mit <link> verlinkt werden.

7







3.5.1. Stile in einem HTML-Tag

Man kann Stile in ein normales HTML-Tag kopieren. Der Stile ist dann exakt für diesen Tag definieret.

<p style = "color:red; font-family:Verdana">Eine rote Schrift in Arial</p>

Der obige Code vergibt beispielsweise für die gesamte Schrift zwischen <p> und </p> eine rote schrift und dieSchriftart Verdana.

Außerdem gibt es ab der vierten Generation in allen gängigen Browsern auch die Möglichkeit, eine Stil im körperder Seite ohne einen vorgegebenen Tag zu definieren. Dazu verwendet man einfach die Tags <span> und </span>und schließt die Stellen darin ein, denen man den Stil zuweisen will. Dann muss man den Stil nur noch im <span>-Tag festlegen.

3.5.2. Style-Sheets im Kopf der HTML-Seite

Ein Style-Sheet nur in einem Tag zu definieren, ist zwar manchmal praktisch, bringt aber bei der Wartung gegenübereiner Tag-Lösung mit <font> keine Vorteile. Vorteilhaft wird ein Style-Sheets erst, wenn es an zentraler Stelle imDokument positioniert wird und für alle Elemente des Dokuments gilt.

<html><head><tittle>Ein Style-Sheet im Kopf der HTML-Seite</title><style type=“text/css“> </style></head><body><p>Dieser Text ist in Verdana und rot</p><p>Dieser auch!</p></body></html>

In diesem Beispiel erfolgt die Definition des Style-Sheets zwischen den <head>-Tag der Seite. Dafür gibt es deneigenen Tag <style>. Er enthält als Attribut type. Dies zeigt mit dem Wert text/css an, dass es sich um ein CascadingStyle-Sheet handelt. Das Style-Sheet wird mit beendet.

3.5.3. Externe Style-Sheets importieren

Ein externes Style-Sheet ist eine eigene Datei, auf die von vielen Dokumenten aus gleichzeitig zugegriffen werdenkann. Das Style-Sheet kann entweder importiert werden oder aber verlinkt werden. In meinem Beispiel habe ichdas Style-Sheet mit <link> in meine Webseite eingebunden.

Zuerst muss man die externe Style-Sheets-Datei erstellen. Dis macht man beispielsweise mit einem Texteditor.Die erstellte Datei wird anschließend mit der Endung .css gespeichert. In meinem Beispiel habe ich die DateiStyle.css genannt. Sie hat folgenden Inhalt:

p { color:red; font-family: Verdana }

Nun zum Import von Style-Sheets in HTML-Seiten:

<html><head><title>Ein Style-Sheet importieren<title><style type=“text/css“> </style>

8







</head><body><h1>Übeschrift in blau und Courier</h1><p>Dieser Text ist in Verdana und rot</p><p>Dieser auch!</p></body></html>

Der Import erfolgt im Kopf der HTML-Seite zwischen dem schon bekannten <style>-Tag. Für den Import wirdder Befehl @import eingesetzt. Diesem ist unter url der Link auf das zu importierende Style-Sheet zugewiesen.Dieser Link kann wie ein normaler Link mit <a ref> relativ oder absolut sein. Nach dem Aufruf des Style-Sheetsfolgt eine Strichpunkt zur Abtrennung. Dann kann man noch einen beiliebigen anderen Stil aufrufen. Sollte dieserauch im Style-Sheet vorkommen, so werden die Angaben des Style-Sheets überschrieben. Aber der Import funk-tioniert nicht im Netscape Navigator 4.x.

3.5.4. Externe Style-Sheets linken

Externe Style-Sheets werden im Kopf der HTML-Seite verlinkt. Dieshat den Vorteil, dass es auch im NescapeNavigator 4.x funktioniert.

<link rel="stylesheet" href="css0.css" type="text/css" title="style0 />

In meinem Beispiel habe ich die Datei css0.css eingebunden. Mit href werden die Position und der Datennamebestimmt. Unter rel informiert man den Browser, dass es sich um ein Style-Sheet handelt und unter type legt manfest, dass es ein Cascading Style-Sheet ist. Mit title vergibt man für das Style-Sheet einen Namen. Dies ist notwendig,sobald man mehr als ein <link>-Tag einsetzt.

Es kann auch nach dem Link auf das externe Style-Sheet ein Style-Sheet im Dokument selbst folgen. Falls manim externen Style-Sheet für dasselbe Tag einen Stil vergeben hätte, so würde dieser mit dem des internen Style-Sheets überschrieben.

Ich habe die Datei css0.css als zentrales Style-Sheet definiert. Auf dieses wird dann aus jedem Dokument gelinkt.Wenn sich der Stil ändert, sind so nur Änderungen in der CSS-Datei css0.css notwendig.

3.6. Einheiten

Anderes als HTML kennt CSS die unterschiedlichsten Einheiten, um eine Wertangabe zu machen, sowie in Zenti-mentern(cm), Zoll(in), Pronzent(%), Pixel(px) etc.

In der Datei css0.css habe ich die Angabe in Prozent definiert, da sich die prozentualen Angaben automatisch andie Fenstergröße des Browsers anpassen.

4. Kontextabhängig mit TechnikIm Internet findet man viele schöne Webseiten. Aber häufig wird ein und dieselbe Webseite auf verschiedenenComputern unterschiedlich dargestellt. Der Grund dafür sind unter anderem unterschiedliche Bildschirmauflösungenoder aber die Darstellung einer Webseite in unterschiedlichen Browsern. Diese Faktoren können die Darstellungeine Webseite beeinflussen, so dass die Webseite unter Umständen nicht so dargestellt wird, wie man es sichvorgestellt hat. In diesem Kapitel werden solche Kontexte diskutiert werden und Methoden vorgestellt werden,die Probleme im Zusammenhang mit solchen Kontexten lösen.

4.1. Browserabhängigkeit

Nach zehnjähriger Entwicklung des Internets sind die Browserhersteller immer noch der Meinung, unterschiedlicheWege gehen zu müssen. Zwar ist eine gewisse Kernkompatibilität zwischen den verschiedenen Browsernweitestgehend vorhanden, und Benutzer haben die freie Wahl, welchen Browser sie einsetzen möchten, doch fürWebdesigner bedeutet dies eine Menge Arbeit.

Im Folgenden möchte ich zeigen wie ein und dieselbe Webseite in verschiedenen Browsern dargestellt wird.

9







Hier ist mit Firefox:

Darstellung im Nescape:

Darstellung im IE:

10







Breits hier kann man Unterschiedeliche feststellen, die die Schriftgröße und -position betreffen. Eine einzige CSS-Datei reicht nicht aus, um die Webseite an die unterschiedlichen Browser anzupassen. Man braucht mehrere CSS-Datei, die die Darstellung der Webseite an den Jeden einzelnen Browsern anpassen mit dem Ziel, dass die Webseitein jedem Browser gleich aussieht. Um dies zu erreichen, müssen man allerdings Informationen über den vom Be-nutzer verwendeten Browser haben.

Zur Lösung dieser Probleme gibt es viele Möglichkeiten.

4.1.1. CSS Datei verändern

In der Datei css0.css zur eben vorgestellten Webseite wird folgende Veränderung vorgenommen:

#header h1 {text-align: center;margin-top: 1%; //fuer IE, vertical-align: middle;}

Somit wird die Überschrift auch im Internet Explorer in der Mitte der Box positioniert.

Außerdem finde ich die Schriftgröße zu klein, d.h. sie ist nicht benutzerfreundlich. Daher habe ich auch dieSchriftgröße in css0.css verändert.

#mainbox p {margin: 3%;font-size: 150%; // Schrift ist klei, font-size: 130%;}

Nach den Änderungen in der CSS-Datei wird die Webseite im IE nun folgendermaßen darstellt:

11







Die Änderungen werden in der CSS-Datei iecss.css gespeichert.

Diese Methode wird analog zu den anderen Browser vorgenommen.

Ich habe ebenfalls für den Opera-Browser Veränderungen vorgenommen und diese in einer Datei operacss.cssgespeicheret.

#header h1 {text-align: center;margin-top: 1.5%; // center}#mainbox p {margin: 3%;font-size: 150%; //fuer opera, Schrift ist zu klein}

Nachdem die verschiedenen CSS-Dateien erstellt wurden, werden im Weiteren Methoden vorgestellt, die denverwendeten Browser des Anwenders überprüfen, um daraufhin die entsprechende CSS-Datei auszuwählen.

4.1.2. Mit Javascript

Man kann mit Javascript zunächst überprüfen, welche Browser und welche Version des Browsers der Anwendernutzt, um die entspechende CSS-Datei in die Webseite einzubinden.

Javascript bietet die Möglichkeit, den Browser des Anwenders zu ermitteln und ihn zu einer entsprechenden Versionweiteryuleiten, die kompatibel zum Browser ist. Die einfachste Variante ist hierbei, die Eigenschaft appName desnavigator-Objects anzulesen.

browser = navigator.appName;

Den Name des Browsers erhält man mit folgendem Ausdruck:

alert(window.navigator.userAgent);

Dies wird in eine Textdatei geschrieben. Wenn man diese Datei mit dem Opera-Browser öffnet, wird auf eine al-ternative Seite umgeleitet, die folgendes anzeigt:

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 8.52

12







Im Internet Explorer wird folgendes ausgegeben:

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Maxthon; SV1; (R1 1.3))

Deshalb muss man zuerst den Opera-Browser im if-Satz prüfen. Wenn man zuerst den Internet Explorer überprüft,dann funktioniert die Überprüfung für den Opera-Browser nicht mehr.

Somit definiert man in einem if-else-Satz:

if (window.navigator.userAgent.indexOf("Opera")>=1){ setActiveStyleSheet("operacss.css");}else{ if (window.navigator.userAgent.indexOf("MSIE")>=1) { setActiveStyleSheet("iecss.css"); }else{ setActiveStyleSheet("css0.css"); } }

Wenn der Browser Opera ist, wird die Datei operacss.css aufgerufen. Wenn der Browser der Internet Explorer ist,wird die Datei iecss.css aufgerufen. Ansonsten wird die Datei css0.css aufgerufen.

Dann folgt die Funktion:

function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href=title; }

Mit der Methode indexOf können wir das erste Vorkommen eines Zeichens oder einer Zeichenkette ermitteln. DieMethode erwartet dabei als Parameter das zusuchende Zeichen oder die Zeichenkette. Der Parameter ist der Nameder HTML-Seite. getElementsByTagName ist eine Funktion, um ein HTML-Seite zu bekommen. Und die Rückgabeist eine Array.

Mit document.getElementsByTagName("link")[0] wird die erste Instanz der Seite zurückgegeben.

Dokument.getElementsByTagName("link")[0].href ist ein Attribut von <link href = " ">, title ist auf href geschrieben,sowie <link href=title>. Dann kann man die CSS-Datei aufrufen.

4.1.3. Mit PHP

Es gibt auch die Möglichkeit PHP einzusetzen. Mit der Methode get_browser() besteht die Möglichkeiten die ArtBrowsers zu ermitteln. Dies geschieht durch Auslesen der zum Browser vorhandenen Werte aus der Dateibrowscap.ini. Per Voreinstellung wird der Wert von $HTTP_USER_AGENT als Browser-Typ benutzt.

In <head>-Tag schreibt man:

<link rel="stylesheet" href="<?=$csslink ?>" type="text/css" />

In PHP sendet Header eine HTTP-Header in Rohform. Mit <?= ?> kann in einer HTML-Seite eine PHP-Variantedirekt ausgeben werden. Deshalb kann das Ergebnis, der Name der CSS-Datei, in der Variante $csslink gespeichertwerden und wird anschliessend in <link href> ausgeben.

Jetzt muss der Browser geprüft werden:

<?php echo "<?xml version='1.0' encoding='ISO-8859-1'?>";

if( strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'opera') ) { $csslink = "operacss.css"; } else if( strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'msie') ) { $csslink = "iecss.css"; }

13







else { $csslink = "css0.css"; }?>

Mit strtolower erhält man den Name des Browsers in kleine Buchstaben. Ansonsten würde man kleine und großeBuchstaben erhalten.

Im Anschluss daran kann man den Stil der Webseite entsprechend dem Browser anpassen.

4.2. Bildschirm

Neben dem Browser gibt es einen weiteren Kontext, mit dem man den Ausdruck einer Webseite verändern kann.Dieser Kontext wird als Screen Resolution bzw. Bildschirmauflösung bezeichnet.

Häufig ist es notwendig, die Auflösung des Benutzer-Rechners zu ermitteln, um ein ansprechendes und für denBenutzer optimiertes Ergebnis liefern zu können. Für diese Zwecke wird das screen-Object verfügt.

Die Eigenschaften width und height des screen-Objects geben die Bildschirmauflösung des Benutzers in Pixelwieder. Gängige Formate sind 800 x 600, 1024 x 768 und 1280x 960. Aber auch das Format, wie Beispielsweisemeines Bildschirms, 1280 x 800 möglich.

Es gibt eine einfache Methode zur Ermittlung der Bildschirmauflösung und vordefinierte Webseite zu auswählen.

<script language="JavaScript">

function screen() {

var s640x480 = "640x480.html";var s800x600 = "800x600.html";var s1024x768 = "1024x768.html";var s1280x1024 = "1280x1024.html";

if ((screen.width == 640) && (screen.heigh == 480)) window.location.href = s640x480; else if ((screen.width == 800) && (screen.heigh == 600)) window.location.href = s800x600; else if ((screen.width == 1024) && ((screen.heigh == 768)) window.location.href = s1024x768; else if ((screen.width == 1280) && (screen.heigh == 1024)) window.location.href = s1280x1024; else window.location.href = 1024x768;}

</script>

Zunächst wird die Größe des Bildschirms ermittelt. Anschließend wird die entsprechende HTML-Datei aufgerufen.Das bedeutet, dafür werden vier verschiedene HTML-Seiten benötigt, die sich im Inhalt nicht unterscheiden, aberin ihrem Ausdruck verschieden sind.

Es gibt aber auch eine wetere Methode, um die Webseite an die Bildschirmauflösung anzupassen.

In Abhängigkeit von der Bildschirmauflösung werden entsprechende Style-Sheets angefertigt. Bevor sich die Seiteöffnet, wird zunächst eine Methode ausgeführt, die die Größe des Bildschirm des Benutzers ermittelt, um danndie entsprechende CSS-Datei auszuwählen.

<script language="JavaScript">

if ((screen.width == 800) && (screen.heigh == 600)){ setActiveStyleSheet("800x600.css");}else if ((screen.width == 1024) && (screen.heigh == 768)) { setActiveStyleSheet("1024x768.css");

14







}else if((screen.width == 1280) && (screen.heigh == 800)) { setActiveStyleSheet("1280x800.css"); }

function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href=title; }

</script>

Diese Methode zur Ermittlung der Bildschirmauflösung ähnelt sher der Methode, die die Art und Version desBrowsers ermittelt.

Später werde ich ein weiteres Beispiel in "Benutzer" vorstellen.

5. Kontextabhängig mit "E-Nachrichten"Nachdem ich einige Lösungsvarianten vorgestellt habe wie man unterschiedliche Bildschirmauflösungen und un-terschiedliche Browser bei der Darstellung von Webseiten berücksichtigen kann, besteht die Möglichkeit ein unddieselbe Webseite unabhängig von der Bildschirmauflösung und vom Browser in einem einheitlichen Stil darzus-tellen. Aber es gibt auch einen weiteren Kontext in Form von E-Nachrichten, die man benutzen kann, wie z.B.Zeit, Datum, Jahreszeit, Wetter, User-Information. Diese Informationen kann man mit Hilfe von Methoden oderaber über das Internet bekommen. In Abhängigkeit von diesen Kontexten, hat man die Möglichkeit das Designeiner Webseite zu beeinflussen.

Im folgende Kapitel wirde ich solche Methode zu diskutieren.

5.1. Zeit

Es gibt vier verschiedene Jahreszeiten, die man in der Webseite zum Ausdruck bringen kann. Je nach Jahrezeitkönnen unterschiedliche Farben und Bilder eingesetzt werden. In Abhängigkeit von der Jahreszeit kann für dieWebseite jeweils ein entsprechendes Design entwickelt werden, die die jeweilige Jahreszeit um Ausdruck bringt.Die Idee ist die gleiche, wie bei der Berücksichtigung der unterschiedlichen Bildschirmauflösungen und den unter-schiedlichen Browserm. Es wird für jede Jahreszeit eine speziele CSS-Datei erstellt. In Abhängigkeit von der Zeitbzw. dem Datum kann dann die jeweilige Jahreszeit ermittelt und die zugehörige CSS-Datei ausgewählten.

Im PHP gibt es eine Methode getdate().

Die Funktion getdate() gibt ein assoziatives Array mit Datums- und Zeitangaben zurück. Das Array setzt sich ausfolgenden Bestandteilen zusammen:

15







Table 1. Schlüsselelemente des zurückgegebenen assoziativen Arrays

Beispiel für RückgabewerteBeschreibungKey

zwischen 0 und 59Anzahl der Sekunden"seconds"

zwischen 0 und 59Anzahl der Minuten"minutes"

zwischen 0 und 23Anzahl der Stunden"hours"

zwischen 1 und 31Numerischer Tag des Monats"mday"

zwischen 0 (für Sonntag) und 6 (fürSamstag)

Numerischer Wochentag"wday"

zwischen 1 und 12Monatszahl"mon"

Beispiele: 1999 oder 2003Vierstellige Jahreszahl"year"

zwischen 0 und 365Numerischer Tag des Jahres"yday"

zwischen Sonntag und SamstagAusgeschriebener Wochentag"weekday"

zwischenJanuar und DezemberAusgeschriebener Monatsname, wieJanuar oder März

"month"

Abhängig vom System, typischerweiseein Wert zwischen -2147483648 und2147483647.

Sekunden seit der Unix Epoche,ähnlich den Werten die von derFunktion time() zurückgegeben undvon der date() verwendet werden.

0

Auf diese Weise lässt sich das Jahr, der Monat, die Woche usw. ermitteln und daraus abgeleitet die Jahreszeit.Man kann entsprechende Bilder in CSS einbinden. Die entsprechende externe CSS-Datei kann dann man mit demAusdruck <link href = ".." > aufgerufen werden oder man verändern den Stil entsprechend im <style>-Tag innerhalbder HTML-Datei.

<head><?php $zeit = getdate(); $stunde=$zeit["hours"]; if($stunde>18) {?> <link href="css0.css" rel="stylesheet" type="text/css" /><?php }else{?> <link href="css1.css" rel="stylesheet" type="text/css" /> <?php }?></head>

Es besteht auch die Möglichkeit den aktuellen Wochentag auszugeben.

<?php switch ( date ( "D" )) { case "Mon" : echo "Heute ist Montag!" ; break; case "Tue" : echo "Heute ist Dienstag!" ; break; case "Wed" : echo "Heute ist Mittwoch!" ; break; case "Thu" : echo "Heute ist Donnestag!" ; break; case "Fri" : echo "Heute ist Freitag!" ; break;

16







default: echo "Heute ist Feiertag!" ; break; } ?>

5.1.1. Beispiel abhängige Tagszeit

Im Folgende habe ich ein Bespiel entwickelt, das auf der schon vorgestellten Webseite color.html basiert. DieseSeite ändert in Abhängigkeit von der Tagszeit die Faben.

Dafür habe ich eine PHP-Datei Zeitphp.php erstellt. Diese Datei stellt ledigliche eine Erweiterung der Datei col-or.html dar, indem ich eine PHP-Funktion eingebaut habe, die die aktuelle Zeit ermittelt.

<?php echo "<?xml version='1.0' encoding='ISO-8859-1'?>"; $zeit = getdate(); $stunde = $zeit ['hours'];

if ($stunde>=19) { $csslink = "css019.css"; } else if ($stunde>=11) { $csslink = "css011.css"; } else if ($stunde>=6) { $csslink = "css06.css"; } else { $csslink = "css019.css"; }?>

Mit gedate() lässt sich die aktuelle Zeit des Benutzers ermittel, die anschließend in der Variable $zeit gespeichertwird. In meinem Beispiel ist nur die Stunde von Interesse, um die Tageszeit zu ermitteln, die dann in der Variable$stunde gespeichert wird.

5.1.1.1. CSS stellen

Ich habe den Tag in drei Teile geliedert:

6 Uhr bis 11 Uhr: Es ist Vormittag. Man ist sehr aufgeregt und man benötigt sehr viele Kraft für die Arbeit. DasLicht der Sonne ist hell und weich.

11Uhr bis 19 Uhr: Dies ist die Zeit vom Mittag bis zum Abend. Nach der Mittagspause ist man ein wenig trägeund untätig. Das Licht der Sonne ist warm und leuchtet sehr stark.

Nach 19 Uhr: Es ist abends. Alles ist dunkel und das Licht der Lampe ist gelb und düster. Man will nicht mehrarbeiten und stattdessen Spaß haben oder entspannen.

Für jede Tageszeit habe ich eine entsprechende CSS-Datei erstellt, die die Hintergrundfarbe verändert.

6 Uhr bis 11 Uhr: Ich habe Grün als Hintergrundfarbe gewählt. Grün wirkt erfrischend. Grün und Blau wirkt be-sonders frisch. Deshalb habe ich den Kopfteil der Webseite in Blau dargestellt. Zusätzlich habe ich Orange alserhellende Farbe hinzugenommen. Sie strahlt Wärme und Licht aus.

17







Wenn ich die Farben für die jeweilige Tageszeit ausgewält habe, brauche ich sie nur noch in die CSS-Datei "Color"einsetzen.

body { margin: 0;padding: 0; font-size: 80%;font-family: Verdana, sans-serif;background-color: #66ff66; // hintergrunde Fabe: Gruen}

#header {position: absolute;background: #99ccff; //header Farbe: Blautop: 0;left: 0;width: 100%;height: 11%;}

#bottom {position: absolute;background: #ffcc00; // bottom Farbe: Orangetop: 75%;left: 0;width: 100%;height: 11%;}

11 Uhr bis 19 Uhr: Die positive Wirkung der Farbe Gelb ist hauptsächich in Verbindung mit der Sonne zu finden.Deshalb habe ich Gelb als Hintergrundfarbe für den Mittag und Nachmittag gewält. Gelb und Orange sind sehrhell und leuchtendm daher habe ich den Kopfteil in einem sanften Violett gehalten.

18







Nach 19 Uhr: Es ist bereits abends und alles ist dunkel. Daher habe ich die Farben der Webseite mit Schwarzgemischt. Die Farbe Erdgelb wirkt ruhig. Und Dunkelrot lässt die Webseite trotz der dunklen gedämpften Farbennicht fade aussehen.

Zu diesem Beispiel lassen sich auch noch weitere Stile mit CSS entwickeln in Abhängigkeit von der Tageszeitoder aber auch abhöngig von der Jahreszeit oder vom Wochentag.

5.2. Wetter

In diesem Kapitel soll es darum gehen, die Webseite in Abhängigkeit vom Wetter darzustellen. Somit erhält derBenutzer Informationen über das derzeitige Wetter, so dass er bei schlechtem Wetter eventuell mehr Kleidungträgt oder einen Schirm mitnimmt. Das Wetter könnte durch unterschiedliche Bilder auf der Webseite zum Ausdruckdargestellt werden.

19







Aber zunächst muss man Informationen über das Wetter erhalten. Diese Informationen kann man von anderenWebseiten bekommen, indem man beispielsweise die Seite wetter.de besucht. Dort gibt man den gewünschten Ortein, wie z. B. Berlin und erhält die nötigen Wetterinformationen zum ausgewählten Ort. Dann kopiert man dieKodierung der Wetterinformation.

Um die Informationen bezüglich des Wetters in Berlin von der Webseite wetter.de nutzen zu können, wird diezugehörige URL in der Variabel $address gespeichert:

$address = "http://wetter.rtl.de/deutschland/vorhersage.php?id=10384&id2=10384&ort=Berlin&near=&tag=0";

Mit der Funktion file() kann diese Webseite in dem Programm geöffnet werden:

$arrContent = file($address);

Die Funktion file() ist identisch mit readfile(), außer dass die eingelesene Datei als Array zurückgegeben wird.Jedes Feld des Arrays korrespondiert mit einer Zeile der Datei. Der Zeilenumbruch bleibt erhalten.

PHP enthält noch ein foreach Konstrukt, genau wie Perl und einige andere Sprachen. Diese ermöglicht es, aufeinfache Weise ein Array zu durchlaufen. foreach funktioniert nur in Verbindung mit Arrays. Mit foreach liestman dieses Array in $arrContent. Aber es gibt zwei Syntaxformen. Die zweite ist eine unbedeutende, aber sinnvolleErweiterung der ersten Syntax:

foreach (array_expression as $value) Anweisungforeach (array_expression as $key => $value) Anweisung

Die erste Form durchläuft das array_expression-Array. Bei jedem Durchgang wird der Wert des aktuellen Elements$value zugewiesen und der interne Array-Zeiger um eines erhöhr. Dadurch wird beim nächsten Durchgang auto-matisch das nächste Element ausgewertet.

Die zweite Form arbeitet genauso, außer dass bei jedem Durchlauf auch der aktuelle Schlüssel der Variablen $keyzugewiesen wird.

Folgende es habe ich im meine PHP-Datei geschrieben:

foreach($arrContent as $v)

Anhand des Quellcodes der Wetter-Webseite "http://wetter.rtl.de/deutsch-land/vorhersage.php?id=10384&id2=10384&ort=Berlin&near=&tag=0" kann man folgende Informationen finden,die die Temperatur enthählt wird:

<font color="#ff0000">3°</font><font color="#fcf570">(-2°)</font><font color="#a8bee2">-3°</font><font color="#fcf570">(-9°)</font>

Im vergleiche von der Webseite, kann man wissen. Die aktuelle Tagestemperatur liegt bei 3 bis -3 Grad. Aber diegefühlte Temperatur liegt bei -1 bis -8 Grad. Im folgenden möchte ich zeigen, wie ich die gefühlte Temperaturauf meiner Webseite ausgeben lassen kann.

Ich schreibe es in eine Reguläre Ausdrücke. Die Syntax für Suchmuster, die in diesen Funktionen verwendetwerden, ist Perl sehr ähnlich. Der Ausdruck muss von Begrenzungszeichen, z.B. von Schränstrichen (/), umgebensein. Jedes Zeichen kann als Begrenzungszeichen verwendet werden. solange es kein alphanumerisches Zeichenoder der Backslash (\) ist. Falls das Begrenzungszeichen im Ausdruck selbest verwendet wird, muss es mit demBackslash als Escape-Zeichen maskiert werden. Dann schreiben wir:

$w2 = '/<font color="#a8bee2">-?\d[1,2]°<\/font>/';

In Regular Expression Details sieht man folgenden Ausdruck:

? : extends the meaning of (, also 0 or 1 quantifier, also quantifier minimizer

\d: any decimal digit

{1,2} heißt eine bis zwei.

20







Eine weitere Funktion preg_match_all führt eine umfassende Suche nach Übereinstimungen mit einem reguläremAusdruck durch.

int preg_match_all ( string Suchmuster, string Zeichenkette, array &Treffer [, int Flags [, int Versatz]] )

Die Funktion durchsucht die Zeichenkette nach allen Übereinstimmungen mit dem in Suchmuster angegebenenregulären Ausdruck und legt sie in der durch Flags festgelegten Reihenfolge in Treffer ab.

Nachdem die erste Übereinstimmung gefunden wurde, wird die nachfolgende Suche jeweils am Ende der letztenÜbereinstimmung fortgesetzt. Dann schriben wir:

preg_match_all ($w, $v, $wetter);

Dieser Ausdruck bedeutet, user $w in $v gesucht wird, und dann in $wetter gespeichert wird.

Mit dem folgendem Code kann man jetzt die Informationen zur Temperatur erhalten:

<?php

$address = "http://wetter.rtl.de/deutschland/vorhersage.php?id=10384&id2=10384&ort=Berlin&near=&tag=0";$arrContent = file($address);$w = '/<font color="#fcf570">$(-?\d{1,2})°$<\/font>/i';

foreach($arrContent as $v) { preg_match_all ($w, $v, $wetter);

if($wetter[0][0] != '') { $Result[] = $wetter[1][0]; }}

echo $Result[0] ; // gefühlte Höchsttemperatrecho $Result[1]; // gefühlte Tiefsttemperatur

?>

Dies habe ich in der Datei color.html im div „bottom“ eingesetzt:

<?phpecho "<?xml version='1.0' encoding='ISO-8859-1'?>";$address = "http://wetter.rtl.de/deutschland/vorhersage.php?id=10384&id2=10384&ort=Berlin&near=&tag=0";$arrContent = file($address);$w = '/<font color="#fcf570">$(-?\d{1,2})°$<\/font>/i';

foreach($arrContent as $v) { preg_match_all ($w, $v, $wetter);

if($wetter[0][0] != '') { $Result[] = $wetter[1][0]; }}?><wt><?php echo "Heute ist das Wetter von Berlin<br>";?></wt><w><?phpecho "gefühlte Höchsttemperatur: ".$Result[0]."<br>"; echo "gefühlte Tiefsttemperatur: ".$Result[1];

?> </w>

Der Stil, wie die Informationen zum Wetter ausgegeben werden sollen, wurde auch in der Datei css0.css festgelegt:

21







#footer w {margin: 0;font-size: 80%;text-align: left;}

Dann wird es gezeigt:

Aber es ist nicht so gut aus, wir können auch Bild statt ihn.

5.3. Benutzer

Aber auch der Benutzer kann auf der Webseite Informationen eingeben, damit ein entsprechendes Design derWebseite ausgewählt wird. Der Inhalt der Webseite bleibt gleich, aber der Ausdruck der Webseite kann in Ab-hängigkeit von den Eingaben des Benutzers beeinflusst werden. Beispielsweise haben Männer, Frauen, Kinder,ältere und jüngere Menschen unterschiedliche Vorlieben für Farben. Bei der Auswahl der entsprechenden Farbenin Abhängigkeit der individuellen Vorlieben, besteht die Möglichkeit dem Benutzer eine angenehmere Umgebungzu verschaffen

5.3.1. User Information bekommen

Mit from kann man einen Dialog erzeugen. Die Benutzer können ihre Informationen eingeben. In PHP könnenDaten per HTML-Formular an ein Script übergeben werden. Die Behandlung der verschiedenen Methoden hängteinzig und allein vom zu verwendeten Array ab. Werden die Daten mit der GET-Methode übertragen, werden dieDaten im Array $HTTP_GET_VARS gespeichert und bei der Post-Methode im Array $HTTP_POST_VARS. Fürdiese beiden Arrays gibt es wieder eine Kurzform: $_GET und $_POST. Die Methode von GET und POST wirdim HTML-Dokument geändert. Generell ist die GET-Methode nur bei der Übertragung von wenigen Daten zuverwenden, z.B. bei der Eingabe eines Namens, und die POST-Methode, wenn Sie große Datenmengen oder aberDaten übertragen, die z.B. Benutzernamen und Passwörtern entsprechen. Man setzt:

22







<form name="user1280x800" method="post" action="getuser1.php" onsubmit ="return pruefen(this)">

Geschlecht: <select name="Geschlecht"> <option value="0">Bitte Waehlen Sie</option> <option value="1">maennlich</option> <option value="2">weiblich</option> </select><br />Alter: <select name="Alter"> <option value="0">Bitte Waehlen Sie</option> <option value="1">4-16</option> <option value="2">17-35</option> <option value="3">36-60</option> <option value="4">61-99</option> </select><br /><input type="submit" value="Abgeben" name="Abgeben"><input type="reset" value="Zurueckstellen" name="Zurueckstellen"></form>

in <body> der HTML-Datei ein und speichert die Datei als user1280x800.php.

Im Folgenden habe ich eine Auswahlliste erstellt, in denen eine Mehrfachauswahl erlaubt ist. Das name-Arrtributdes select-Elements wird in eckigen Klammern notiert. In PHP würde dann der Wert des name-Attributs demSchlüssel im Array $HTTP_POST_VARS entsprechen.

Geschlecht: <select name="Geschlecht">Alter: <select name="Alter">

Mit dem neu eingefügten Code sieht die Webseite nun folgendermaßen aus:

Hier gibt es eine Auswahliste für das Geschlecht und eine Auswahlliste für das Alter. Der Benutzer kann seinGeschlecht und sein Alter entsprechend auswählen.

Bei Geschlecht gibt es nur zwei verschiedene Auswahlmöglichkeiten: männlich und weiblich. Auf der ersten Seitesteht die Aufforderung "Bitte wählen Sie".

<option value="0">Bitte Waehlen Sie</option><option value="1">maennlich</option><option value="2">weiblich</option>

23







Beim Alter gibt es vier verschiedene Auswahlmöglichkeiten:

<option value="0">Bitte Waehlen Sie</option><option value="1">4-16</option><option value="2">17-35</option><option value="3">36-60</option><option value="4">61-99</option>

5.3.2. CSS-Datei erzeugen

Nachdem die Auswahllisten erzeugt wurden, werden nun die entsprechenden CSS-Datei benötigt. Es gibt insgesamtacht verschiedene Kombinationsmöglichkeiten, für die jeweils eine CSS-Datei entwickelt werden muss.

Im Alter von 4 bis 16 sind Jungen und Mädchen sehr aktiv und unbeschwert. Daher habe ich die Farbe Orangeund Grün gewählt. Orange ist die Farbe des Vergnügens, des Lustigen und der Geselligkeit, es steht für positiveLebensfreude. Grün ist die Farbe der Hoffnung und wirkt frisch, so wie junge Männer. Wenn Farben auch mitdem Geschmack in Verbindung gebracht werden können, dann sind Grün und Orange aromatisch. Ich habe dieFarben sowohl für Mädchen als auch für Jungen im Alte von 4 bis 16 Jahren verwendet.

24







In der bereits bestehenden CSS-Datei css0.css brauche ich lediglich die Farben der einzelnen div`s verändern.

body { margin: 0; padding: 0; font-size: 80%; font-family: Verdana, sans-serif; background-color: #99cc33; // footer}

#header {position: absolute;background: #ffcc00; //headertop: 0;left: 0;width: 100%;height: 11%;}

#header h1 {text-align: center;vertical-align: middle;color: #ffffff; //Schrift in Header}

#mainbox {position: absolute;top: 11%; left: 30%; height: 64%; width: 70%; overflow: auto;background: #ff9933; //mainbox }

#mainbox h2 {margin-top: 5%;margin-left: 10%;font-size: 160%;color: #000000; //Schrift im Mainbox}

25







#mainbox p {margin: 3% 10% 0% 10%;font-size: 120%;color: #000000; //Schrift im Mainbox}

#bottom {position: absolute;background: #ffcc00; //bottomtop: 75%;left: 0;width: 100%;height: 11%;}

Aber da die Farbe zu hell ist, habe ich auch die Farbe der Schrift verändert.

Für das Alter von 17 bis 35 Jahre habe ich zwei CSS-Datei gemacht, eine für Männer und eine für Frauen.

26







Für Männer und Frauen habe ich verschiedene Farben benutzt. Blau ist still, passiv und ruhig und passt zu Männern.Rosa und Violett hingegen passt zu Frauen. Rosa ist die Farbe des Unrealistischen und wirkt romantisch.

Für die Altersklasse von 35 bis 50 Jahren habe ich eine neue CSS-Datei gestellt.

27







Für Männer habe ich eher dunkele Farben verwendet, die Ruhe ausstrahlen. Und für Frauen habe ich im div bottomdie Farbe Lila statt Rosa gewählt, da sie mehr Eleganz ausstrahlt.

Die letzte Gruppe ist die Alterklasse von 61 bis 99 Jahren

Die Farbe sind still und eleganta.

Die Methoden der Gestaltung der Webseite, d.h. der Erstellung der jeweiligen CSS-Dateien, ist bei allen Gruppengleich.

JNachdem alle CSS-Dateien erstellt wurden, muss in Abhängigkeit von den Eingaben des Benutzers, die passendeCSS-Datei ausgegeben werden.

28







5.3.3. CSS-Datei aufrufen

In der PHP-Datei hatte ich bereits zwei Attribute "Geschlecht" und "Alter" definiert. Jetzt wird eine PHP-Dateibenötigt, die die Werte verarbeitet. Zunächst werden die vom Benutzer ausgewählten Werte in den Variablen$geschlecht und $alter gespeichert:

$geschlecht = $_POST['Geschlecht'];$alter = $_POST['Alter'];

Dann wird mit Hilfe eines if-Satzes abgefragt, welche Daten der Benutzer angegeben hat, um die entsprechendeCSS-Datei auszuwählen:

if($geschlecht ==1) { if ($alter == 1) { $csslink = "kindcss1"; } else if ($alter == 2) { $csslink = "mancss1"; } else if ($alter == 3) { $csslink = "altercss1"; } else if ($alter == 4) { $csslink = "collcss1"; } } else if ($geschlecht == 2) { if ($alter == 1) {

$csslink = "kindcss1"; } else if ($alter == 2) { $csslink = "maedchencss1"; } else if ($alter == 3) { $csslink = "fraucss1"; } else if ($alter == 4) { $csslink = "afraucss1"; } }

Ich habe eine Methode header im PHP beutzt. Die Methode header() wird zum Senden von HTTP Anfangsinform-ationen (Headern) im Rohformat benutzt. Die "Location" ist ein Spezialfall von Header-Aufrufen. Es wird nichtnur der Header an den Browser geschickt, sondern auch ein REDIRECT(302) statuscode. Wenn die entsprechendeCSS-Datei ermittelt wurde, wird schließlich noch eine Methode benötigt, um diese Informationen an die Dateiuser1280x800.php zurückzugeben.

header("location: user1280x800.php?css=".$csslink);

Die eben vorgestellten Methoden zur Verarbeitung der Benuzterangaben werden in der PHP-Datei getuser1.cssgespeichert. Des Weiteren gibt es die PHP-Datei user1280x800.php und 8 verschiedene CSS-Dateien. Diese 10Dateien werden benötigt, damit dieses Beispiel funktioniert.

5.3.4. Mit unterschiedliche Bildschirm

Öffnet man ein und dieselbe Webseite mit verschiedenen Bildschirmauflösungen, kann die Webseite unter Um-ständen unterschiedliche dargestellt werden.

Darstellung mit der Bildschirmauflösung 1024x768:

29







Darstellung mit der Bildschirmauflösung 800 x 600:

Die Positon und die Schriftgröße werden anders dargestellt, so dass sie in der CSS-Datei entsprechend verändertwerden.

1024x768.css:

30







body { margin: 0; padding: 0; font-size: 72%; //schrift font-family: Verdana, sans-serif; background-color: #ccff00;}





#mainbox {position: absolute;top: 14%;left: 34%;height: 60%;width: 60%;overflow: auto;}



#mainbox form {margin-top:3%;margin-left: 3%;}


#bottom p {margin-top: 2%;

31







text-align: center;vertical-align: middle;font-weight: bold;font-size: 120%;}




800x600.css:

body { margin: 0; padding: 0; font-size: 70%; //schrift font-family: Verdana, sans-serif; background-color: #ccff00;}





#mainbox {position: absolute;top: 14%;left: 34%;height: 60%;width: 60%;overflow: auto;}

32









#mainbox form {margin-top:3%;margin-left: 3%;}


#bottom p {margin-top: 2%;text-align: center;vertical-align: middle;font-weight: bold;font-size: 120%;}




Nach der Änderung der Schriftgröße und der Position wird die Webseite nun korrekt dargestellt.


33








Es ist zwar ein sehr einfaches Verfahren, aber es kann problematisch werden, wenn zu viele CSS-Datei erstelltwerden. Deshalb sollten für die CSS-Dateien eindeutige Namen vergeben werden.

34







Jetzt wird eine Funktion benötigt, die den Browser des Benutzers prüft. Diese Methode muss aufgerufen werden,bevor sich die Seite im Browser öffnet. Diese Methode wird mit Javascript durchgeführt.

<?xml version='1.0' encoding='ISO-8859-1'?><!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="de" lang="de">

<head><title>Willkommen, Color Design</title><mete name= "author" content= "YangYingxi" /><meta name= "description" content= "Color Design" /><link rel="stylesheet" href="css0.css" type="text/css" title="style0" />

<script lanuage="javascript">

function screen() {var s800x600 = "user800x600.php";var s1024x768 = "user1024x768.php";var s1280x800 = "user1280x800.php";

if ((screen.width == 800) && (screen.heigh == 600)) window.location.href = s800x600; else if ((screen.width == 1024) && (screen.heigh == 768)) window.location.href = s1024x768; else if ((screen.width == 1280) && (screen.heigh == 800)) window.location.href = s1280x800; else window.location.href = s1024x768;}

</script>

</head>

<body onload="screen();">

</body>

</html>

In dieser HTML-Datei gibt es nur eine Funktion, um die Bildschirmauflösung zu ermitteln und anschließend dieentsprechende PHP-Datei aufzurufen.

Die wichtigsten Schnittstellen zwischen HTML und Javascript sind Event-Handler. Übersetzt heißen sieEreignisbehandler, und genau das ist auch ihre Aufgabe: Sie sollen Ereignisse behandeln. Generell gilt, dass dieseEvent-Handler als Attribute von HTML-Elementen notiert werden und immer mit on beginnen. Das Einsatzgebietder Event-Handler ist groß. Das load-Ereignis ist eines davon. Es tritt ein, wenn ein HTML-Dokument geladenwird.

<body onload="screen();">

Wenn diese HTML geladen wird, wird die Funktion screen() aufgerufen, die die Bildschirmauflösung prüft undanschließend die entsprechende PHP-Seite aufruft.

Mit Hilfe dieser Methoden ist es nun egal vor welchem Computer man mit welcher Bildschirmauflösung sitzt.Diese Methoden ermöglichen es, dass die Webseite in allen Umgebungen konsistent dargestellt wird.

35

Documents

Kontextabhängige Webseiten-Stilisierung als Aesthetik-Konzept · Farbe und Bilder einer Webseite in Abhängigk eit v om Wetter automatisch ändern. Ziel dieser Arbeit ist es mögliche