Sie sind auf Seite 1von 207

WWW und Multimedia

Universität Salzburg

Sommersemester 2008

(cc) Brigitte Jellinek

1.TERMIN: MULTIMEDIA UND WEB

2

6.TERMIN: PARAMETER + MOVIECLIPS

87

1.2

Was ist MultiMedia?

3

6.2 MovieClips und Buttons

89

1.1

Was ist das Web?

3

6.3 Einstieg in Actionscript

94

1.2

HTML

7

6.4 Webformulare und Parameter

108

2.TERMIN: CSS UND BILDER

15

7.TERMIN: AJAX, DRAWING API

124

2.2 Cascading Style Sheets - CSS

16

7.2 AJAX

125

2.3 Bilder im Web

25

7.3 PHP und E-Mail

126

 

7.4 Die Flash Drawing API

127

3.TERMIN: CSS FÜR LAYOUT UND :HOVER26

3.2 Rahmenbedingungen für Layout

27

8.TERMIN: WEB 2.0, BLOGS UND VIDEO136

3.3 CSS für Layout

30

8.2 Web 2.0

137

3.4 Graceful Degradability

36

8.3 Weblogs

143

 

8.4 Flash als Audio und Video-Player149

 

4.TERMIN: JAVASCRIPT MIT JQUERY

38

8.5 Wordpress

157

4.2 Hintergrund zu Javascript

39

4.3 Javascript Beispiel

41

9.TERMIN: DB UND ONENTERFRAME

166

4.4 jQuery

45

9.2 PHP und MySQL

167

 

9.3 onEnterFrame

175

5.TERMIN: EINSTIEG IN PHP+FLASH

48

5.2 Einstieg in PHP

51

10.TERMIN: SECURITY + LOADVAR

183

5.3 Flash oder nicht Flash?

65

10.2 HTTP

183

5.4 Zeichnen in Flash

70

10.3 Security von Web-Applikationen 195

5.5 Animation in Flash

79

10.4 Daten vom Server laden in Flash200

 

ANHÄNGE Literatur- und Web-Tipps

204

204

Stichwortverzeichnis 206

1.Termin: Multimedia und Web

Der erste Termin der Lehrveranstaltung klärt organisatorische Fragen, stellt die grundlegen- den Begriffe vor und gibt einen Einstieg in HTML.

Was Sie wissen sollten

Wer das World Wide Web erfunden hat

Wer die Standards des Webs definiert

Wie die drei Standards http, URL und HTML das Web definieren.

Wie eine HTTP Anfrage funktioniert

Den Zusammenhang zwischen http und TCP sowie zwischen http und dem DNS

Wie ein Dokument im XHTML-Format aufgebaut ist

Die HTML-Tags für Überschriften, Absätze, Links, Bilder, Listen, Tabellen

Was Sie können sollten

Ein einfaches Dokument im XHTML-Format erstellen, einen vorgegebenen Text in XHTML umwandeln

Die Korrektheit des XHTML-Codes mit dem Validator des World Wide Web Consortium überprüfen

Fehler in einem XHTML-Dokument ausbessern bis es valide ist

Weitere Informationsquellen

Selfhtml. http://de.selfhtml.org/

Website des WWW-Consortiums. http://www.w3c.org/

HTML Validator des WWW-Consortiums. http://validator.w3.org/

Wikibook Handbuch Webdesign. http://de.wikibooks.org/wiki/Webdesign

Vertiefungsmöglichkeiten

Sie können sich mit HTML intensiver auseinandersetzen: erforschen Sie Anker/Textmarken und die verschiedene Eingabefelder für Formulare.

Uni Salzburg, SS 2008

1.2 Was ist MultiMedia?

Der Begriff „Multimedia“ wurde im Jahr 1995 von der Gesellschaft für deutsche Sprache in Deutschland zum „Wort des Jahres“ gekürt.

Multimedia ist die Kombination von Text, Bild, Audio und Bewegtbild am Computer.

1.1 Was ist das Web?

Für diese Veranstaltung ist eine technische Sicht auf das World Wide Web die relevante. Das World Wide Web ist also ein verteiltes (Client/Server) Informationssystem, das durch folgende drei Standards in der jeweils aktuellen Form definiert wird:

URL (Uniform Resource Locators) nach RFC 1738 - http://www. w3. org/Addressing/rfc1738. txt

HTTP (Hypertext Transfer Protocol) nach RFC 2616 - http://www. w3. org/Protocols/rfc2616/rfc2616. html

(X)HTML (Hypertext Markup Language) in der Version XHTML 1. 0 transitional

Die entsprechenden Dokument finden Sie z. B. am Webserver des World Wide Web Consorti- ums 1 .

Rund um diese drei Standards ordnen sich weitere wichtige Begriffe an:

Webbrowser

Ein Webbrowser, oder kurz Browser, ist ein Programm, das bei Eingabe einer URL über http eine HTML-Webseite laden und anzeigen kann, es ist also der Client zum World Wide Web.

Es gibt sehr viele verschiedene Webbrowser. Abbildung 1 zeigt drei davon: den Browser „Mo- saic“, der im Jahre 1993 als zweiter Webbrowser für grafische Oberflächen stark zur Verbrei- tung des World Wide Web beigetragen hat, und die Browser Opera und Mozilla in den Versio- nen, die im Jahre 2004 verwendet wurden.

1 http://www.w3c.org/

3

WWW und Multimedia: Was ist das Web?

WWW und Multimedia: Was ist das Web? Abbildung 1: Webbrowser: Mosaic (1993), Opera(2004) und Mozilla(2004) Alle

Abbildung 1: Webbrowser: Mosaic (1993), Opera(2004) und Mozilla(2004)

Alle eben erwähnten Browser haben gemeinsam, dass sie auf einem typischen „Büro- Computer“ eingesetzt werden, einem Computer mit grafischer Oberfläche und einem Farb- Monitor.

Es gibt aber auch „exotischere“ Browser. Abbildung 2 zeigt den Browser lynx, der nur Text darstellt, aber keine Bilder. Daneben sehen Sie eine „Braille Ausgabezeile“, ein Gerät, das eine Zeile Text in eine Zeile Blindenschrift übersetzt. Mit diesem Webbrowser und diesem Ausgabegerät können Blinde im Web surfen.

und diesem Ausgabegerät können Blinde im Web surfen. Abbildung 2: Text-Only Browser lynx und Braille
und diesem Ausgabegerät können Blinde im Web surfen. Abbildung 2: Text-Only Browser lynx und Braille

Abbildung 2: Text-Only Browser lynx und Braille Ausgabegerät

Webseite

Die Dokumente, die im Webbrowser dargestellt werden nennt man Webseiten. Eine Webseite ist – technisch gesehen – ein Dokument im HTML-Format.

Eine Webseite kann – im Gegensatz zu einer Seite in einem Buch – beliebig lang sein. Ist die Seite zu groß / zu lang für das Browser-Fenster, dann erscheint ein Scrollbalken mit dem man den Rest der Seite erreichen kann, wie in Abbildung 3 gezeigt.

4

Uni Salzburg, SS 2008

Uni Salzburg, SS 2008 Abbildung 3: Ein Browser zeigt eine lange Webseite an Website Als Webseite

Abbildung 3: Ein Browser zeigt eine lange Webseite an

Website

Als Webseite wird also ein Dokument bezeichnet. Verwechseln Sie diesen Begriff nicht mit dem englischen Wort Website. Eine Website besteht aus mehreren Webseiten, die zusammen gehören und untereinander verlinkt sind.

1.1.2

URL

Eine URL ist die Adresse eines Dokuments am Web oder in einem anderen Online- Informationssystem. Wir werden uns hier vorerst nur mit Web-URLs und mailto-URLs beschäf- tigen. Ein Beispiel:

http://kurse.horus.at/2006-ss/www-mm/index.html#literatur

Diese URL zerfällt in 4 Teile:

5

WWW und Multimedia: Was ist das Web?

http

Übertragungsprotokoll

kurse.horus.at

Domain Name (oder IP-Adresse) des Webservers

/2006-ss/www-mm/index.html

Wird vom Webserver interpretiert, meist eine Pfad-Angabe

Literatur

Textmarke innerhalb des Dokuments (wird vom Browser interpretiert)

Im Zusammenhang mit Web-Formularen und CGI-Skripts werden wir oft mit URLs zu tun ha- ben, die Parameter enthalten:

http://webwelt.horus.at/html/form/echo.cgi?a=10&b=20#copy

Die Zeichen : / # ? & = haben offensichtlich eine besondere Bedeutung in URLs.

HTTP-URLs sind nicht die einzigen URLs, ein Beispiel mit einem anderen Übertragungsproto- koll:

mailto:brigitte.jellinek@fh-salzburg.ac.at

1.1.3

HTTP

Das Hypertext Transfer Protocol ist ein relativ simples Protokoll, das immer TCP- Verbindungen verwendet. Alle Aktivität wird vom Client (=Browser) initiiert.

In der einfachsten Form sieht HTTP so aus (hier wieder am Beispiel der URL

http://kurse.horus.at/2006-ss/www-mm/index.html#literatur):

http://kurse.horus.at/2006-ss/www-mm/index.html#literatur): 1. Eine URL wird in den Browser eingetippt, oder ein Link

1. Eine URL wird in den Browser eingetippt, oder ein Link wird im Browser ange- klickt

2. Der Browser analysiert die URL und ermittelt daraus den Domain Namen des Webservers (kurse.horus.at), löst diese über DNS zur IP-Adresse auf

(193.80.109.212)

6

Uni Salzburg, SS 2008

3. Der Browser baut eine TCP-Verbindung zu 193.80.109.212, Port 80 auf

4. Er sendet eine http-Anfrage:

GET /2006-ss/www-mm/index.html HTTP/1.0\n\n

5. Der Webserver nimmt die Anfrage entgegen und analysiert sie. Meistens interpre- tiert er sie als Aufforderung, eine bestimmte Datei von der Platte zu lesen

6. Der Webserver schickt die http-Antwort an den Browser, diese besteht aus einem Statuscode, z. B. „200 OK\n\n“, gefolgt vom Inhalt der Datei index. html.

7. Der Browser nimmt das Dokument in Empfang und stellt es geeignet dar

8. Der Browser scrollt das Dokument bis zur Textmarke literatur

9. Der Browser beendet die TCP-Verbindung

Die nächste Anfrage des Clients kann sich an einen anderen Server, oder wieder an denselben Server richten. Die nächste Anfrage, die der Server beantwortet, kann vom selben Client kommen, oder von einem anderen Client. Keiner der beiden (Client und Server) muß spei- chern mit wem er gerade Daten ausgetauscht hat, um die nächste Anfrage durchfüh- ren/beantworten zu können. Das Protokoll ist also stateless. Dadurch ist es sehr einfach ei- nen Server zu programmieren.

Das ist nur die einfachste Version des Protokolls, mit Proxies, Caching und Keep-Alive wird es komplizierter.

1.2

HTML

In der Übung werden wir XHTML Version 1. 0 transitional verwendet. Die wichtigsten HTML-Tags (Links, Bilder, Tabellen, Formulare) werden Sie bald auswendig können. Alle De- tails können Sie am HTML-Schwindlzettl oder bei selfhtml nachschlagen.

Das X von XHTML steht für die Kompatibilität mit XML. Die Dateien haben aber weiterhin die Endung . htm oder . html, ohne x. Im Unterschied zu HTML ist XHTML ein bisschen strenger in der Schreibweise. Am Web finden Sie noch viele HTML-Dokumente und Tutorials zu HTML – lassen Sie sich davon nicht verwirren!

HTML-Dateien (Hyper Text Markup Language) bestehen aus reinem Text, in unserem Falle entweder aus Text im Format ISO 8859-1 (Latin-1) 2 oder im Format utf-8 Sie können also Umlaute direkt in den HTML-Code eingeben. Siehe auch Seite xxx.

2 Das ist der ASCII-Zeichensatz, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie üöä ÜÖÄ ß é ñ

7

WWW und Multimedia: HTML

1.2.1 Sonderzeichen

Sonderzeichen in HTML nennt man „character entities“. Sie haben die From &entityname;

Folgende Character Entities müssen Sie verwenden:

Gewünschtes Zeichen

Character Entity

<

&lt;

>

&gt;

&

&amp;

Folgende Character Entities können Sie vermeiden, indem Sie das Zeichen direkt im ISO 8859- 1 Zeichensatz oder utf-8 eingeben:

Gewünschtes Zeichen

Character Entity

Ä

&Auml;

Ä

&auml;

ß

&szlig;

1.2.2 HTML-Tags

Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben

1. Tags sind zwischen spitzen Klammern eingeschlossen.

2. Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag", der sich nur durch den Schrägstrich vom Anfangs-Tag unterscheidet.

Z. B. <p>hier der Absatz</p>.

3. "alleinstehende" Tags müssen mit einem Schrägstrich am Ende geschrieben wer-

den: <br />

In XHTML werden Tags immer klein geschrieben (bei HTML war die Groß- oder Kleinschreibung egal).

Die wichtigsten Tags werden weiter unten noch vorgestellt

1.2.3 Whitespace

Sogenannter "whitespace" - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche hintereinander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leer- zeichen oder 7 Leerzeilen einfügen macht keinen Unterschied. (gar kein Leerzeichen oder ein Leerzeichen macht schon einen Unterschied) Die folgenden beiden Dokumente sind also äqui- valent:

8

Uni Salzburg, SS 2008

<p>Halli Hallo</p>

<p>

Halli

Hallo

</p>

Nur die Tags beeinflussen die Darstellung der Webseite. Sie müssen den Tag <br /> verwen- den um einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch durchführt.

1.2.4

Attribute

Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img /> der ein Bild in die Seite einfügt (Englisch: Image). Die wichtigsten Attribute von <img /> sind src (von Source = Quelle) und alt (Alternative Darstellung).

<img src="neu.gif" alt="Das ist neu!" />

In XHTML werden Tags immer klein geschrieben (bei HTML war die Groß- oder Kleinschreibung egal).

Es ist egal, in welcher Reihenfolgen Sie die Attribute schreiben:

<img alt="Das ist neu!" src="neu.gif" />

oder

<img alt="Das ist Neu!" src="neu.gif" bli="bla, blo" />

Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte Attribute einfach ignoriert.

Der Wert eines Attributes muß in Anführungszeichen geschrieben werden. (in HTML gab es eine Ausnahme für Werte die keine Leerzeichen enthalten (wie z. B. Zahlen), diese konnten auch ohne Anführungszeichen geschrieben werden, bei XHTML ist das verboten)

<img alt="Das ist Neu!" src="neu.gif" width=50 height="15" />

ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:

WWW und Multimedia: HTML

1.2.5 Kompatibilität

Jeder Browser (egal ob Firefox, Microsoft Internet Explorer,

Dokument darstellen. Mit jedem Editor (egal ob Dreamweaver, Frontpage,

jedes HTML-Dokument bearbeitet werden. Neue Tags, die z. B. ein Browser nicht erkennt, sind zu ignorieren – es gibt keine Fehlermeldungen!

) kann jedes HTML- ) kann

Wenn das W3C in XHTML Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführen würde, können Sie diesen Tag auf Ihrer Webseite verwenden. Der Text würde je- doch nur in den neuesten Versionen der Browser (die schon die Version 21 kennen) hüpfend dargestellt. In älteren Browsern wird der Tag <jump> ignoriert:

Code

Ein älterer Browser interpretiert das als:

<p>Dies ist meine erste <jump>supercoole</jump> Webseite!!!! </p>

<p>Dies ist meine erste supercoole Websei- te!!!!</p>

Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber klar sein, welche Versionen der Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine pas- sende Browser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit äl- teren Browsern der gesamte Inhalt lesbar ist.

Schlecht

Besser:

<p>Zu den hüpfenden Terminen sind noch Plätze im Kurs frei:

<p>Zu den markierten Terminen sind noch Plät- ze im Kurs frei</p> <ul> <li><jump>Montag *</jump> <li>Dienstag <li>

</p>

<ul>

<li><jump>Montag</jump>

<li>Dienstag

<ul>

 

Auf älteren Browsern geht die wichtigste Information verloren!

Auf allen Browsern ist erkennbar zu welchen Terminen noch Plätze frei sind.

Hinweis: Der <jump>–Tag ist ein Scherz, den gibt es nicht wirklich, und wird es hoffentlich nie geben.

1.2.6 Text formatieren

Wir unterscheiden zwischen HTML-Tags die Blöcke definieren, und solchen die das nicht tun. Blockbildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, nicht blockbildende Tags tun das nicht-

10

Formate, die Text-Blöcke definieren:

Uni Salzburg, SS 2008

Normaler Fließ-Text

<p>Text text text, text text. Text text text, text text. Text text text, text text. Text und text text, text text. </p>

Zentrierter Text

<p style="text-align:center;">Text text text, text text. Text text text, text text. Text text text, text text. Text und text text, text text. </p>

Haupt-Überschrift (1. Ebene)

<h1>Überschriftstext</h1>

Unter-Überschrift (2. Ebene)

<h2>Überschriftstext</h2>

Unter-Überschrift (3. Ebene)

<h3>Überschriftstext</h3>

Block-Zitat (eingerückt)

<blockquote>Alle meine Entchen schwimmen auf dem See</blockquote>

Format für kleinere Text-Abschnitte

Diese müssen Sie innerhalb eines Blocks verwenden. Diese Formate werden unterschieden in logische und physische Elemente. Die logischen geben die genaue Darstellung nicht vor.

Sehr stark betonter Text (meist fett)

Eine <strong>wichtige</strong> Sache

Betonter Text (meist kursiv)

und eine <em>interessante</em> Sache

Physische Elemente geben die genaue Darstellung vor und sind eigentlich „altmodische Tags“, die durch Stylesheets ersetzt wurden, und die Sie möglichst nicht mehr verwenden sollten:

Fettgedruckter Text

Eine <b>fette</b> Sache

Kursiver Text

und eine <i>schräge</i> Sache

Text in einer bestimmten Schriftart

<font face="Arial">Text</font>

Text in einer bestimmen Farbe

<font color="red">rot</font>

Hier die moderne Schreibweise mit Stylesheets:

Text in einer bestimmten Schriftart

<span style="font-face:Arial;">Text</span>

Text in einer bestimmen Farbe

<span style="color:red;">rot</span>

1.2.7

Bilder

Als Attribut src können Sie eine absolute oder relative URL angeben:

11

WWW und Multimedia: HTML

Bild (URL absolut)

<img src="http://www.google.at/intl/de_at/images/logo.gif" />

Bild (URL relativ)

<img src="neu.gif" />

Bild mit Ersatztext

<img alt="neu" src="neu.gif" />

Bild mit Größenangabe

<img width=10 height=5 src="neu.gif" />

Bild nach links (Text fließt rechts vorbei)

<img src="neu.gif" style="float:left;" />

1.2.8 Links

Als Attribut href können Sie eine absolute oder relative URL angeben:

Link zu Webseite (absolute URL)

<a href="http://cnn.com">zu CNN</a>

Link zu Webseite im selben Ordner (relative URL)

<a href="seite2.htm">mehr</a>

Link zu E-Mail Adresse

<a href="mailto:aa@bb.cc">Mail</a>

Bild als Link

<a href="seite2.htm"><img src="mehr.gif" alt="zur Seite 2" /></a>

1.2.9 Gesamt-Struktur einer Webseite

Eine HTML Seite besteht aus einem vordefinierten Grundgerüst.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Titel der Seite</title> </head> <body> Hier die Tags, die Sie schon kennen. </body> </html>

Achtung: es kann nur einen head und einen body geben, keine Wiederholungen! Browser zeigen oft auch Seiten richtig an, die keine korrekte Struktur haben. Sie sollten sich trotzdem immer daran halten und standardkonforme Webseiten erstellen.

Nun können Sie die Seite im Validator http://validator.w3.org/ testen.

1.2.10 Listen

Listen werden mit zwei verschachtelten Tags gebaut: der li-Tag für den einzelnen Listen- Punkt, und der ol- oder ul-Tag für die gesamte Liste.

12

Uni Salzburg, SS 2008

<ul>

<ol>

<li>punkti</li>

<li>eins</li>

<li>punkti</li>

<li>zwei</li>

</ul>

<li>drei</li>

</ol>

1.2.11

Tabellen

Um eine Tabelle zu erzeugen müssen Sie die Tags <table>, <tr> und <td> richtig ineinander verschachteln.

<table border="1"> <tr> <td>Freitag</td> <td>Samstag</td> <td>Sonntag</td> </tr> <tr> <td>lernen</td> <td>lernen</td> <td>lange schlafen</td> </tr> </table>

<td>lernen</td> <td>lange schlafen</td> </tr> </table>

HTML-Tabellen wurden früher in Webseiten für das Layout der Seite verwendet, diese Tabel- lenlayouts sind noch auf vielen älteren Webseiten zu finden. Moderne Webseiten werden mit CSS-Layouts gestaltet (Siehe Kapitel 3).

1.2.12

Formulare

Mit den HTML-Tags <form>, <input />, <textarea>, <option>, <select> werden Formulare ge-

baut. Hier ein einfaches Beispiel, (in der Code-Ansicht von Dreamweaver 4):

Beispiel, (in der Code-Ansicht von Dreamweaver 4): Der < form> -Tag ist „unsichtbar“ und di ent

Der <form>-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im Action-Attribut des <form>-tag wird angegeben, an welche URL die Daten zur Verarbeitung geschickt werden.

Im Browser sieht das oben gezeigte Formular so aus:

13

WWW und Multimedia: HTML

WWW und Multimedia: HTML 14

14

Uni Salzburg, SS 2008

2.Termin: CSS und Bilder

Im zweiten Termin der Lehrveranstaltung wird die visuelle Darstellung von Webseiten bespro- chen: einerseits mit CSS (Cascading Style Sheets) andererseits die Bilder in Webseiten.

Was Sie wissen sollten

Wie HTML und CSS zusammen hängen. Wie CSS Selektoren aufgebaut sind. Welche Schreibweisen und Maßeinheiten es in CSS für Farben, URLs und Größenangaben gibt.

Wie das CSS Box Model funktioniert, wie der Zusammenhang zwischen margin, border und padding ist.

Welche Möglichkeiten zur Darstellung von Schrift, Absatz, Rahmen, Hintergrundfarbe und Hintergrundbilder CSS ungefähr bietet. Wie Sie die genaue Schreibweise der dafür notwendigen CSS-Deklarationen nachschlagen können

Welche Bildformate im Web verwendet werden können. Welches Bildformat für ein gegebenes Bild geeignet ist (auf Grund von Anforderungen wie: Anzahl der Farben, Transparenz, Alpha-Transparenz, Animation)

Was Sie können sollten

Ein einfaches Stylesheet für ein XHTML-Dokument erstellen. Bei Vorgabe einer be- stimmten visuellen Darstellung und eines XHTML-Dokuments ein geeignetes Stylesheet erstellen, das zu dieser Darstellung führt

Mit Hilfe von Firebug oder durch Lesen des Codes herausfinden welche CSS-Regeln zu einer bestimmten Darstellung in einer (fremden) Webseite führen

Die Korrektheit des CSS-Codes mit dem CSS-Validator des World Wide Web Consortium überprüfen. Fehler in einem CSS-Dokument ausbessern bis es valide ist

Ein Bild das digital vorliegt in ein geeignetes Format für das Web konvertieren.

Weitere Informationsquellen

CSS Zen Garden. http://csszengarden. com/

Bildformate am Web. http://webwelt.horus.at/html/img/bildformate.html

Vertiefungsmöglichkeiten

Lesen Sie den CSS-Standard 2. 1. Erstellen Sie eine gif-Animation.

15

WWW und Multimedia: Cascading Style Sheets - CSS

2.2 Cascading Style Sheets - CSS

Von Anfang an sollte eine HTML-Datei keine Information darüber enthalten, wie der Text dar- gestellt werden soll - keine Schriftart oder Schriftgröße. HTML sollte nur strukturelle Informa- tion enthalten („das ist eine Überschrift“ aber nicht „Arial 24pt“). Die Formatierungs- Information sollte in sogenannten „Stylesheets“ gespeichert werden, das Format für die Sty- lesheets war aber noch nicht definiert. Im Jahre 1993 sah eine typische Webseite so aus

<html><body> <h1>Das Studium</h1> <p>Studienziel ist es, breit gefächerte technische und wirtschaftliche Kompetenzen </body></html>

Da es keine Stylesheets gab „erfand“ Netscape ab 1994 zusätzliche HTML-Tags, die die Dar- stellung der Webseite festlegen. Andere Browser übernahmen diese Tags von Netscape.

<html><body> <h1><font face="Arial" color="blue">Das Studium</font></h1>

<p><font size="+1">S</font>tudienziel ist es, breit gefächerte technische und wirt-

schaftliche Kompetenzen

<p><font size="+1">P</font>rojekte und Praxissemster stellen schon während des Studiums

</p>

die Verbindung

</p>

</body></html>

Durch das Hinzufügen der Tags für Formatierung wurde der HTML-Code komplizierter und unübersichtlicher. Erst ab ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet, seit den frühen 2000ern ist die Unterstützung in den gängigen Browsern vorhanden. So sieht nur eine HTML-Seite mit Stylesheet aus:

Die html-Datei

Die Datei fh. css

<html><head> <link rel="stylesheet" type="text/css" href="fh.css"> </head><body>

<h1>Das Studium</h1>

h1 {

font-family: Arial; color: blue;

}

p:first-letter { font-size: large;

 

}

<p>Studienziel ist es, breit gefächerte technische und wirtschaftliche Kompeten- zen </body></html>

Mit der Trennung von Stylesheet und HTML wurde HTML wieder einfacher und übersichtlicher. Besonders das nachträgliche Verändern der Gestaltung wurde vereinfacht.

Wichtige Argumente für den Einsatz von Stylesheets sind:

Zusätzliche Gestaltungsmöglichkeiten

Einheitliche Gestaltung von mehreren Webseiten

Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die

Inhalte erstellen)

16

Uni Salzburg, SS 2008

Aber Achtung: CSS ist nicht die Lösung jedes Problems:

Mit Stylesheets können Sie nur Objekte verändern, die schon in der HTML-Datei vor-

handen sind. Es können keine neuen Objekte eingefügt werden.

Um ein Stylesheet zu erstellen, muß die DesignerIn die HTML-Tags kennen, z. B. wis-

sen, dass h1, h2, h3 für die Überschriften stehen.

Damit das Stylesheet wirkt, muß die RedakteurIn, die das HTML-Dokument erstellt,

die richtigen HTML-Tags verwenden, z. B. Überschriften wirklich mit h1, h2, h3 for-

matieren, und nicht mit b, i, font.

2.2.1 Stylesheet Syntax

Beispiel

h1,h2 {

font-family: Arial, Helvetica, sans-serif; color: lightblue;

} Selektor

sans-serif; color: lightblue; } S e l e k t o r Eine Regel Deklaration body

Eine Regel

color: lightblue; } S e l e k t o r Eine Regel Deklaration body {

Deklaration

body {

margin-left: 150px; background-color: white;

}

p {

text-align: justify;

}

h1 und h2 sollen mit der Schriftart Arial dargestellt werden, wenn die nicht vorhanden ist mit Helvetica, wenn die nicht vorhanden ist mit irgendeiner serifenlosen 3 Schrift. Außerdem soll die Schrift in hellblauer Farbe dargestellt werden.

Die gesamte Seite (body) soll links um 150 Pixel eingerückt werden, die Hintergrundfarbe ist weiß. Normale Text-Absätze sind im Blocksatz darzustellen.

Syntax der Style Formate

Eine Stylesheet-Regel („Rule“) besteht aus einem Selektor gefolgt von einer geschwungenen Klammer die eine oder mehrere Deklarationen enthalten kann.

Der einfachste Selektor besteht aus dem Namen eines einzelnen HTML-Tags.

Sie können auch mehrere Elemente durch ein Komma trennen. In diesem Falle werden für alle Elemente die selben Style -Angaben definiert, (siehe h1,h2 in obigem Beispiel).

3 Erkärzung zu serifenlos siehe Kapitel 2.2.3

17

WWW und Multimedia: Cascading Style Sheets - CSS

Sie können beliebig Zeilenumbrüche einfügen, diese werden ignoriert.

Style für mehrere Seiten

Die Seiten einer gesamten Website haben meist ein einheitliches Aussehen. Dies können Sie erreichen, wenn Sie für jede Webseite dieselbe CSS Datei verwenden. Dazu müssen Sie in jede HTML-Datei die CSS Datei mittels folgender Anweisung einbinden:

<link rel="stylesheet" src="mystyle.css" />

Diese Zeile sollte innerhalb des head Bereiches der HTML-Datei stehen (da sonst die Darstel- lung der Seite verzögert werden kann 4 ). mysyle. css könnte etwa so aussehen wie im vorigen Beispiel.

Style für eine Seite

Wenn Sie einen Style nur auf einer einzigen Webseite verwenden, können Sie die Style- Angaben direkt in die HTML-Datei schreiben, und zwar innerhalb des head Bereiches.

<style>

h1,h2

{ font-family: Arial, Helvetica, sans-serif; color: lightblue

}

</style>

Style für einen Tag

Style Angaben können auch direkt zu einem bestimmten Tag im body geschrieben werden. In diesem Fall gilt die Angabe nur für diesen ganz speziellen Tag.

Um einen style für einen einzelnen Tag zu definieren, müssen Sie innerhalb des Tags das At- tribut style verwenden.

<h1 style="color:red; text-align:center;">Rote Überschrift </h1>

Gültigkeitsbereich einer Style Angabe

Sie können innerhalb einer HTML-Datei sowohl eine externe Style Sheet Datei verwenden (ein- gebunden durch eine entsprechende Anweisung im head Bereich), als auch eine lokale Defini- tion im head Bereich angeben. Zusätzlich können Sie noch ganz spezielle Angaben für einzel- ne Tags erstellen.

Was passiert nun, wenn die verschiedenen Style Angaben sich widersprechen? Die Angaben bei einem einzelnen Tag haben immer Vorrang. Danach folgen die lokalen Angabe im head Be- reich und erst zum Schluß die externe Datei.

4 Siehe Souders, Steve (2007) High Performance Web Sites. O'Reilly. ISBN 9780596529307

18

Uni Salzburg, SS 2008

2.2.2 Klassen, IDs, SPANs und DIVs

Wenn Sie mit den Style-Angaben den p-Tag umformatieren, betrifft das alle p-Tags in der Webseite. Oft möchten Sie aber ein oder zwei Absätze anders formatieren als die anderen Absätze. Zu diesem Zweck können Sie sich im Stylesheet noch weitere Formatvorlagen - soge- nannte "Klassen" - definieren:

.wichtig { color: red; }

Diesen Klassen können Sie eigene Namen geben (hier „wichtig“), vor dem Klassennamen steht immer ein Punkt.

Jedem normalen HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht mit dem Attribut class.

<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p> <p class="wichtig">Ein ganz wichtiger Absatz</p> <p>Ein ganz normaler Absatz</p>

Zur "normalen" Wirkung des HTML-Tags kommt nun die Formatierung durch die Klasse hinzu:

der Text „ganz wichtige“ und „Ein ganz wichtiger Absatz“ ist in diesem Beispiel also rot.

Eine Klasse kann mehrmals in einem Dokument verwendet werden. Zur eindeutigen Kenn- zeichnung von Tags wird das Attribut id verwendet:

<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p> <p class="wichtig">Ein ganz wichtiger Absatz</p> <p id="impressum">Das einzige Impressum dieser Seite</p>

Auf diese eindeutigen IDs kann in CSS mit der Raute referenziert werden:

#impressum { background-color: #DDD; }

Sowohl Klassen als auch IDs können mit Tags kombiniert werden um einen komplexen Selektor zu bilden:

}

b.wichtig { color: yellow; }

p.wichtig { color: red;

/* nur der Tag p mit der Klasse wichtig */ /* nur der Tag b mit der Klasse wichtig */

.wichtig { font-size: 20px; } /* alle Tags mit der Klasse wichtig

*/

Die Firefox-Erweiterung Firebug zeigt Tags, Klassen und IDs in dieser Schreibweise an:

zeigt Tags, Kl assen und IDs in dieser Schreibweise an: Es wird öfter vorkommen, dass Sie

Es wird öfter vorkommen, dass Sie einem Bereich eine bestimmte Klasse zuweisen möchten, ohne dass ein passender Tag vorhanden ist. Hier können Sie die beiden Tags <span> und <div> verwenden, die beide selber kaum Eigenschaft aufweisen. <span> eignet sich für die Verwen- dung in Fließtext, <div> ist ein blockbildender Tag, erzwingt also einen Zeilenumbruch.

WWW und Multimedia: Cascading Style Sheets - CSS

Die Worte „besonders interessante“ erscheinen rot.

Eine abschließende Warnung: Mit Stylesheets können Sie nur Elemente verändern, die schon in der HTML-Datei vorhanden sind. Sie können keine neuen Elemente einfügen!

2.2.3 Texte und Farben mit Stylesheets

In diesem Abschnitt lernen Sie die wichtigsten Deklarationen für Schriftarten, Absätze, Links, Farben kennen.

Schriftart

Zuerst werden wir die Schriften im Dokument festlegen: Eine serifenlose Schrift für Über- schriften, eine mit Serifen für den Fließtext.

1. {

2. font-family: Arial, Helvetica, sans-serif;

3. font-size: 13px;

4. }

5. h1,h2 {

6. font-family: "Trebuchet MS", Verdana, Arial;

7. }

8. h1 { font-size: 24px; }

9. h2 { font-size: 20px; }

p

Listing 1: Schriftfamilie, Schriftgröße mit CSS festlegen

In Zeile 1 bis 4 von Listing 1 werden zwei Anweisungen für Fließtext gegeben (HTML-Tag <p>):

die Schriftfamilie in Zeile 2 und die Schriftgröße in Zeile 3.

Bei Schriftfamilien gilt es die Einschränkungen des Web zu beachten. In Zeile 2 werden meh- rere Schriften angegeben, diese Liste wird vom Browser von links nach rechts abgearbeitet, die erste Schrift die er findet verwendet er. Vergleichen Sie Zeile 2 mit Zeile 6: Schriftnamen die ein Leerzeichen enthalten müssen in Anführungszeichen gesetzt werden, wie „Trebuchet MS“ in Zeile 6.

Das letzte Wort in Zeile 2 „sans-serif“ ist ein CSS-Kürzel für „irgendeine serifenlose Schrift“. Es empfiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert „wenn alle Stricke reißen“ anzugeben, dabei sind folgende Werte möglich:

sans-serif serif cursive fantasy monospace.

Schriftgröße

Die Schriftgrößen-Angabe in Zeile 3 verwendet Pixel als Maßeinheit. Diese Maßeinheit macht bei der Darstellung am Screen, besonders in Kombination mit Bildern Sinn. Alternativ wäre auch eine Angabe in em (=Breite des Buchstaben M) oder ex (Höhe des Buchstaben X), oder Prozent (%) möglich, so kann jeweils das Verhältnis zur ‚Standard-Schriftgröße’ angegeben werden.

20

Uni Salzburg, SS 2008

Zum Thema Schriftgrößen gibt es verschiedene Ansichten:

Da Webseiten hauptsächlich auf Bildschirmen gelesen werden, kann man argumentieren, dass das Pixel die natürliche Maßeinheit auf Webseiten ist. Wenn Sie gif, jpg oder png-Bilder in Ihrer Webseite verwenden, ist die Breite und Höhe der Bilder in Pixel fix. Pixel auch als Größe für Schrift macht es einfach, die Größenverhältnisse von Bild und Schrift zu fixieren.

Eine andere Position lautet: Bildschirme und Displays sind sehr unterschiedlich groß; Leserin- nen und Leser haben sehr unterschiedliche Sehstärken und –schwächen. Deswegen muß das Verändern der Schriftgröße in der Hand der LeserIn bleiben. In einem Browser wie Firefox geht das ja auch bequem mit einem Tastendruck.

Wenn nun die LeserIn die Schriftgröße ändert, sollte diese Veränderung alle Schriften auf der Webseite betreffen: Fließtest, Überschrifen, Aufzählungen, etc. Dabei könnte das Layout und die Bilder auf der Seite entweder fix bleiben oder sich ebenfalls vergößern oder verkleinern:

Absätze

Wie immer in HTML erfolgt der Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspekte des Absatz-Layoutes steuern, einige davon sind in Abbildung 4 gezeigt:

steuern, einige davon sind in Abbildung 4 gezeigt: Abbildung 4: Absatz mit CSS Formatanweisungen Mit

Abbildung 4: Absatz mit CSS Formatanweisungen

Mit text-align können Sie die Ausrichtung des Texts im Absatz festlegen: left, right, center oder justify (Blocksatz). Blocksatz wird aber am Web wenig verwendet, da die Browser keine Silbentrennung durchführen. Dadurch entstehen bei den meisten Texten häßli- che Löcher im Blocksatz.

Die erste Zeile des Absatzes kann einen separaten Einzug haben, den Sie mit text-indent festlegen. Die Zeilenhöhe wird mit line-height festgelegt. Hier ist es sinnvoll für längere Texte einen etwas erhöhten Wert festzulegen (z. B. 1. 5em) da die Standard-Darstellung der Browser etwas zu eng ist um gut lesbar zu sein.

Box Model

Jeder blockbildende Tag (z. B. h1, h2, p, blockquote, div, …) hat einen Rahmen, Innen- und Außenabstand. Diese werden mit den Deklarationen border, padding und margin festgelegt. Ein Hintergrundbild und/oder eine Hintergrundfarbe des Tags reicht immer bis zum Rahmen, aber nicht darüber hinaus.

21

WWW und Multimedia: Cascading Style Sheets - CSS

WWW und Multimedia: Cascading Style Sheets - CSS Abbildung 5: Darstellung des Box Models von hicksdesign.

Abbildung 5: Darstellung des Box Models von hicksdesign. co. uk

Die Ausdehnung von margin, padding und border kann man besonders gut mit der Firefox- Erweiterung Firebug erforschen wie in Abbildung 6 gezeigt.

Erweiterung Firebug erforschen wie in Abbildung 6 gezeigt. Abbildung 6: margin, border, padding in FireBug Dabei

Abbildung 6: margin, border, padding in FireBug

Dabei wird direkt in der Webseite der Aussenabstand (margin) gelb und der Innenabstand (padding) dunkelviolett hinterlegt.

Die Standard-Darstellung von Absätzen erklärt sich über den margin-top und margin-bottom des <p>-Tags:

22

Uni Salzburg, SS 2008

Uni Salzburg, SS 2008 Abbildung 7: Standard-Darstellung v on Absätzen (<p>) im Browser Die Details zur

Abbildung 7: Standard-Darstellung von Absätzen (<p>) im Browser

Die Details zur Schreibweise sowie die verschiedenen verkürzten Schreibweisen entnehmen Sie bitte selfhtml.

Farben und Hintergrundfarben

Die Farbe des Textes wird mit color, die Hintergrundfarbe mit background-color gesetzt.

Farbangaben erfolgen in CSS in verschiedenen Schreibweisen, die aber meist auf das RGB- Modell 5 zurückgehen. Die älteste Schreibweise ist eine Raute gefolgt von einer sechstelligen Hexadezimalzahl. Dabei wird die Intensität von rot, grün und blau in Hexadezimal zwischen 00 (Minimum) und FF (Maximum) angegeben. (z. B. #000000 für schwarz, #FFFFFF für Weiss, #FF0000 für reines Rot,etc).

In Stylesheets kann man statt dessen auch die Schreibweise rgb(10,2,120) verweden, um 10 Teile rot, 2 Teile grün und 120 Teile blau zu mischen. Jede der drei Zahlen kann Werte zwi- schen 0 und 255 annehmen.

Für einige Farben kann man die englischen Farbwörter wie red, blue, black verwenden.

Hintergrundbilder

Jeder Tag kann mittels CSS ein Hintergrundbild erhalten. Als „Hintergrundbild“ in einer Web- seite kann jedes Bild in einem Web-geeigneten Dateiformat (gif, jpg, png) dienen. Das Bild wird „gekachelt“ – es wird horizontal und vertikal so oft wiederholt, bis es die ganze Fläche des Tags ausfüllt. In Abbildung 8 wurde ein Bild mit drei Zahnrädern als Hintergrundbild ver- wendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

5 Separate Angabe des Rot-, Grün- und Blauwerts; Mischung dieser drei Farben ergibt die Far- be

23

WWW und Multimedia: Cascading Style Sheets - CSS

WWW und Multimedia: Cascading Style Sheets - CSS Abbildung 8: Beispiel für ein Hi ntergrundbild in

Abbildung 8: Beispiel für ein Hintergrundbild in einer Webseite

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 8 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text „wurde schon besucht“ in der letzten Zeile ist kaum noch lesbar.

Links formatieren

Der <a>-Tag wird in HTML für zwei sehr unterschiedliche Dinge verwendet: zum Setzen von Links und zum Setzen von Textmarken (auch ‚Anker’ genannt):

<h1><a name="unis"></a>Universitäten</h1> <a href="http://www.uni-salzburg.at/">Uni Salzburg</a>

Textmarken sind normalerweise unsichtbar, Links sind normalerweise blau oder violett und unterstrichen.

Um die Darstellung von Links zu verändern muß man in CSS :link oder :visited als Selekto- ren verwenden. Der Browser unterscheidet dabei zwischen Links die schon einmal besucht wurden (visited) und neuen Links.

a:link, a:visited { text-decoration: none; } a:link {color:blue} a:visited {color:#FF00FF }

Im folgenden Beispiel werden die Links mit einem Icon markiert:

a:link, a:visited { background-image: url(icon-link.gif); background-position: center right; background-repeat: no-repeat; padding-right: 9px;

}

24

2.3 Bilder im Web

Uni Salzburg, SS 2008

Als Bildformate für Webseiten werden nur Pixel-Formate von vielen Browsern unterstützt:

gif

Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ ent- hält mehrere Bilder, die der Reihe nach angezeigt werden (Daumenkino).

Besonders geeignet für Bilder mit klaren Kanten, einfärbigen Flächen, wenigen Farben, z. B. Comics, Logos.

jpg

Millionen von Farben, variable Kompression, keine Transparenz.

Besonders geeignet für Bilder mit Farbverläufen, z. B. Photos.

png

Nachfolge-Format für gif, Alpha-Transparenz, diese wird aber von MSIE erst ab MSIE 7 unterstützt.

Tabelle 1: Bildformate im Vergleich

Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszu- wählen, in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist.

25

WWW und Multimedia: Bilder im Web

3.Termin: CSS für Layout und :hover

Am dritten Termin der Lehrveranstaltung werden die Übungsaufgaben zu HTML und CSS be- sprochen. Die Verwendung von CSS für das Layout einer Webseite wird erklärt. Mit dem :hover – Selektor werden einfache interaktive Effekte gebaut.

Was Sie wissen sollten

Wie verschiedene Ausgabegeräte und verschiedene Bildschirmgrößen die Darstellung von Webseiten beeinflussen und die Gestaltung von Webseiten schwierig machen.

Welchen Zusammenhang es zwischen den Begriffen ‚graceful degradability’, Barriere- freiheit und Suchmaschinen-Tauglichkeit von Webseiten gibt.

Welche Vor- und Nachteile fixe, fluide und elastische Layouts von Webseiten haben.

Was Sie können sollten

Mittels CSS zwei oder drei Spalten nebeneinander positionieren.

Mittels CSS aus einer Liste von Links ein Navigations-Menü machen.

An einem bestehen CSS-Layout Veränderungen vornehmen.

Weitere Informationsquellen

CEDERHOLM,Dan (2007): Bulletproof Webdesign. Addison-Wesley, München. ISBN 3827326230.

MEYER,Eric A. (2006): Eric Meyer's CSS. Addison-Wesley, München. ISBN 3827324793.

Web Standards Project. http://www. webstandards. org/

Plain Old Semantic HTML (POSH). http://microformats. org/wiki/POSH

Vertiefungsmöglichkeiten

Lesen Sie die Bücher von Dan Cederholm und Eric Meyer um sich noch mehr in CSS zu vertie- fen.

Testen Sie Ihre Stylesheets nicht an einzelnen Seiten sondern immer an ganzen Sites. Ver- wenden Sie das gelernte um einem Blog ein neues Erscheinungsbild zu geben (z. B. einem auf Wordpress basierenden Blog).

26

Uni Salzburg, SS 2008

3.2 Rahmenbedingungen für Layout

Wie in Kapitel 1.1 beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. Für die Gestaltung des Layouts von Webseiten spielt dabei die Bildschirmgröße bzw. die Auflösung eine wichtige Rolle.

3.2.1 Bestimmung der Auflösung

Zuerst stellt sich die Frage: woher weiß ich, wie hoch die Auflösung am Computer meiner LeserIn ist? Woher weiß ich, wie viel Platz im Browserfenster zur Verfügung steht?

Die Antwort lautet: ich weiß es nicht, und es gibt keine zuverlässige Methode, mit der man diese Information in jedem Fall herausfinden kann. Es gibt eine Meßmethode mit Hilfe der Programmiersprache Javascript, mit der man die Größe des Browserfensters messen kann – das Ergebnis der Messung ist natürlich dadurch verfälscht, dass Browser ohne Javascript ganz aus der Messung herausfallen. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten.

Abbildung 9 zeigt einige derzeit (2008) gängigen Bildschirm-Auflösungen von PCs.

800 px 1024 px 1200 px 1600 px
800 px
1024 px
1200 px
1600 px

Abbildung 9: gängige Bildschirmauflösungen 2006

Vergleichen Sie die höchste hier dargestellte Auflösung (1600x1200 Pixel) mit der geringsten Auflösung (800x600). Da Breite und Höhe verdoppelt sind, steht bei der höchsten Auflösung also die vierfache Fläche zur Verfügung!

Abbildung 10 zeigt zwei Statistiken über die Bildschirmauflösung von thecounter. com von 2006 und 2008. In diesem Zeitraum ist der Anteil der geringsten hier dargestellte Auflösung (800x600) von 17% auf 7% gefallen. Die meistverwendete Auflösung bleibt 1024x768.

27

WWW und Multimedia: Rahmenbedingungen für Layout

WWW und Multimedia: Rahmenbedingungen für Layout Abbildung 10: Statistik über die Bildschirmauflös ung, Juni 2006 und
WWW und Multimedia: Rahmenbedingungen für Layout Abbildung 10: Statistik über die Bildschirmauflös ung, Juni 2006 und

Abbildung 10: Statistik über die Bildschirmauflösung, Juni 2006 und April 2008, Quelle: thecounter. com

Brutto vs. Netto

Von diesen „Brutto-Angaben“ über die Größe der zur Verfügung stehenden Fläche sind nun noch der Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblendete Favoritenleisten abzuziehen, um zum „netto“ verbleibenden Raum für die Gestaltung zu kommen. Abbildung 11 zeigt diese Problematik an Hand einer Webseite.

11 zeigt diese Problema tik an Hand einer Webseite. Abbildung 11: Platzbedarf von Brow ser-Elementen an
11 zeigt diese Problema tik an Hand einer Webseite. Abbildung 11: Platzbedarf von Brow ser-Elementen an
11 zeigt diese Problema tik an Hand einer Webseite. Abbildung 11: Platzbedarf von Brow ser-Elementen an
11 zeigt diese Problema tik an Hand einer Webseite. Abbildung 11: Platzbedarf von Brow ser-Elementen an

Abbildung 11: Platzbedarf von Browser-Elementen an zwei Beispielen

Beide Browser zeigen dieselbe Webseite, beide Browser wurden auf einem Computer mit ei- ner Bildschirm-Auflösung von 1024x768 Pixel verwendet.

28

Uni Salzburg, SS 2008

Links in der Abbildung sehen sie den Browser Firefox. Nach Abzug von Symbolleisten oben, Statusleiste unten, Scrollbalken rechts und dem (sehr dünnen) Fensterrahmen links bleiben 1003x615 Pixel für die Webseite. Rechts in der Abbildung sehen Sie dieselbe Seite in Inter- net Explorer. Zusätzlich zu den üblichen Symbolleisten ist hier auch die „Favoriten-Leiste“ am linken Rand des Browser sichtbar. Es bleiben 743x562 Pixel für die Darstellung der Web- seite.

Wie Sie sehen können ist die Seite so gestaltet, dass das Foto, das in Firefox in der rechten oberen Ecke der Webseite sichtbar ist, in Internet Explorer nicht mehr sichtbar ist.

Abbildung 12 zeigt eine Statistik über die „Netto-Größen“ von Browser-Fenstern. Laut dieser Statistik kann eine Webseite mit Breite 950 Pixel auf ca. 70% der Browser vollständig ange- zeigt werden. Bei 1050 Pixel Breite sind es nur noch 20%.

zeigt werden. Bei 1050 Pixel Breite sind es nur noch 20%. Abbildung 12: „Netto“-Breite von Browser-Fenstern,

Abbildung 12: „Netto“-Breite von Browser-Fenstern, 2005-2006, Quelle: webwelt. horus. at

Wie werden Sie als DesignerIn einer Webseite mit diesem Wissen umgehen? Ihr eigener Com- puter hat wahrscheinlich eine hohe Auflösung – das ist für Computer-Profis typisch. Werden Sie beim Entwurf Ihrer Webseiten auf die Mehrheit der LeserInnen vergessen, und die Seite so gestalten, dass sie nur mit hoher Auflösung verwendbar ist?

Zwei gute Faustregeln sind:

die wichtigsten Inhalte Ihrer Webseite sollten im linken, oberen Bereich der Webseite

plaziert sein, innerhalb eines Bereiches von 750x500 Pixel.

Nach unten zu scrollen ist für die LeserInnen gewohnter (und mit Scrollrad an der

Maus auch einfacher) als nach rechts zu scrollen.

Es gibt aber sicher Umstände, unter denen Sie diese Faustregeln ignorieren können. Z. B. wenn Sie eine Webseite für einen Kiosk gestalten, und wissen, dass das Ausgabegerät immer ein Touchscreen mit einer Auflösung von 1200x600 Pixel ist.

Oder wenn Sie eine Webseite mit künstlerischem Anspruch absichtlich so gestalten, dass die Lese-Gewohnheiten des Web durchbrochen werden.

29

WWW und Multimedia: CSS für Layout

3.3 CSS für Layout

Die Darstellung einer HTML-Seite durch den Browser erfolgt von oben nach unten, je nach Sprache von links nach rechts oder von rechts nach links.

Dabei wird zwischen blockbildenden Tags und nicht-blockbildenden Tags unterschieden. In- nerhalb eines Blocks wird Text vom Browser gesetzt und umgebrochen, jeder Block nimmt einen rechteckigen Bereich des Browserfensters in der vollen Breite ein.

In Abbildung 13 wurden <p> und <em>-Tags verwendet und mit folgendem Stylesheet forma- tiert:

p { background-color:#CCCCCC; } em { background-color:#FFFF66; }

Bei der Darstellung im Browser kann ein nicht-blockbildender Tag dabei auf mehrere Zeilen verteilt werden:

ockbildender Tag dabei auf mehrere Zeilen verteilt werden: Abbildung 13: Darstellung von blo ckbildenden und

Abbildung 13: Darstellung von blockbildenden und nicht-blockbildenden Tags

Mit width kann die Breite eines Blocks definiert werden:

div#main { width:500px; }

Um einen Inhalt zu zentrieren kann der margin mit Wert auto verwendet werden.

div#main {

width:500px;

margin-left: auto; margin-right: auto;

}

30

3.3.1

Float

Uni Salzburg, SS 2008

Eine Möglichkeit aus der normalen Reihenfolge der Darstellung auszubrechen bietet die Dekla- ration float mit den Werten left und right. Damit wird ein Element nach links bzw. rechts gesetzt, der Rest des Inhalts „rutscht nach oben“ und wird neben das Element gesetzt.

In Abbildung 1 sind drei Absätze zu sehen die jeweils als erstes ein Bild enthalten. Im ersten Absatz ist die Darstellung ganz normal – das Bild wird wie ein Wort im Text behandelt. Im zweiten Absatz „floated“ das Bild nach rechts, der Text rutscht links davon nach oben. Im dritten Absatz „floated“ das Bild nach links, der Text rutscht rechts davon nach oben.

Bild nach links, der Text rutscht rechts davon nach oben. Abbildung 14: Bilder mit float Bei

Abbildung 14: Bilder mit float

Bei Bildern funktioniert float besonders einfach, weil das Bild schon eine fixe Breite hat. Wird ein anderer HTML-Tag mit float versehen muß man auch die Breite des Tags setzen um einen sichtbaren Effekt zu erzielen. In Abbildung 15 soll der zweite Absatz nach rechts gehen. Er hat die ID edvard.

p { margin: 0px; } #edvard { float:right; width:33%; }

p { margin: 0px; }

#edvard { float:right;

width:33%;

}

Abbildung 15: Ein Absatz mit float

Wenn viele Elemente mit float positioniert werden die die gleiche Höhe haben entsteht ein besonders flexibles Layout: in Abbildung 16 werden je nach zur Verfügung stehendem Platz drei oder vier Bilder nebeneinander dargestellt:

31

WWW und Multimedia: CSS für Layout

WWW und Multimedia: CSS für Layout Abbildung 16: Zwei Darstellungen der Bildergalerie mit float 3.3.2 Navigationsmenü
WWW und Multimedia: CSS für Layout Abbildung 16: Zwei Darstellungen der Bildergalerie mit float 3.3.2 Navigationsmenü

Abbildung 16: Zwei Darstellungen der Bildergalerie mit float

3.3.2

Navigationsmenü

Wenn man mit CSS ein Navigationsmenü gestaltet dann sollte man von einem HTML-Code aus- gehen der auch ohne CSS gut benützbar bleibt. Dieser Ansatz ist auf englisch als „graceful degradablility“ bekannt.

Der Ausgangspunkt für ein Navigationsmenü ist eine Liste mit Links:

<div id="navi"> <h3 class="unsichtbar">Seitenauswahl</h3> <ul> <li><a href="home.html">home</a></li> <li><a href="news.html">news</a></li> <li><a href="portfolio.html">portfolio</a></li> <li><a href="contact.html">contact</a></li> </ul> </div>

Ohne CSS wird die Liste ganz normal dargestellt. Mit CSS kann man daraus ein vertikales Menü machen, dazu wird mit list-style-type:none der Listenpunkt zu einem normalen Tag.

.unsichtbar {display:none;}

div#navi li { list-style-type:none;

margin-bottom:1px;

background:#6C6;

width:6em;

padding: 0.2em;

}

div#navi li a:link { text-decoration: none; font-weight: bold; color: black;

}

width:6em; padding: 0.2em; } div#navi li a:link { text-decoration: none; font-weight: bold; color: black; }

Mit Hilfe von Float kann man das Menü auch horizontal darstellen, dazu muß nur ein float eingefügt und der margin anders gesetzt werden:

32

Uni Salzburg, SS 2008

div#navi li { float:left; list-style-type:none;

margin-right:1px;

background:#6C6;

width:6em;

padding: 0.2em;

}

background:#6C6; width:6em; padding: 0.2em; } div#navi li a:link { text-decoration: none; font-weight:

div#navi li a:link { text-decoration: none; font-weight: bold; color: black;

}

3.3.3 Image Replacement

Wenn man eine Schriftart verwenden will die nicht in allen gängigen Browsern zur Verfügung steht kann man auf folgenden Trick zurück greifen: der Text wird normal im HTML-Code ein- gegeben, es wird aber auch ein Bild in der richtigen Schriftart gemacht.

Bei CSS-fähigen Browsern wird der Text versteckt und das Bild angezeigt. Browser ohne CSS und Suchmaschinen verwenden einfach den Text:

<style> h1#bildStattText { /* schiebt den "echten text" extrem weit nach links */

text-indent:-10000px;

overflow:hidden; background: url(pix/nockerln_schriftzug.gif); /* hoehe und breite der grafik angeben! */

height:150px;

width:500px;

}

</style>

<h1 id="bildStattText">Salzburger Nockerln</h1>

bildStattText ">Salzburger Nockerln</h1> 3.3.4 :hover Mit dem Selektor :hover wird eine CSS-Regel

3.3.4 :hover

Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist.

33

WWW und Multimedia: CSS für Layout

div

{ background-color: #ddd; }

div:hover

{ background-color: red; }

Mit Hilfe von Hintergrundbildern kann man so zum Beispiel einen kitschigen 3d-Button dar- stellen.

div

{ background-image: url(button-up.png);

}

div:hover

{ background-image: url(button-down.png); }

Beim Laden des zweiten Hintergrundbildes kann es dabei zu einer Verzögerung kommen. Um das zu verhindern kann man die beiden Hintergrundbilder in einer Bilddatei speichern und nur den Bildausschnitt wechseln:

/* css */ div {

height:115px;

width:240px;

background-image: url(pix/rolloverButton.gif); overflow:hidden;

}

div:hover

{

background-position: 0 -120px;

}

Eine extreme Anwendung dieses Prinzips nennt man CSS-Sprites: dabei werden möglichst viele Bilder in einer Bild-Datei zusammengefaßt. Falls viele kleine Icons verwendet werden kann das die Darstellung der Webseite erheblich beschleunigen.

verwendet werden kann das die Darstellung der Webseite erheblich beschleunigen. Abbildung 17: CSS Sprites von Yahoo

Abbildung 17: CSS Sprites von Yahoo

34

Uni Salzburg, SS 2008

3.3.5 Absolute Positionierung

Mit der Deklaration position:absolute wird ein Tag aus der normalen Darstellung herausge- nommen und über dem restlichen Inhalt der Seite platziert. Mit top und left kann die linke obere Ecke des Elements positioniert werden.

#navi {

 

position: absolute; width: 80px;

top:

0px;

left:

0px;

}

In Kombination mit einem Inhalt mit margin-left ergibt das folgendes Layout:

margin-left
margin-left

Abbildung 18: Kombination von absoluter Positionierung und margin-left

Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browserfenster. Ein Tag mit position:absolute oder position:relative bildet für seine unterge- ordneten Tags ein neues Koordinationsystem. In folgendem Code definiert das main-div ein neues Koordinatensystem, das navi-div ist also in der linken oberen Ecke des main-div und nicht in der linken oberen Ecke des Browser-Fensters positioniert.

35

WWW und Multimedia: Graceful Degradability

<div id="main">

 

#main { border: 1px red solid; position:relative; width: 700px; margin: 0px auto;

<div id="content">

 

<h1>Inhalt</h1>

<p>Hier ist der </div>

]</p>

}

<div id="navi">

#content { margin-left: 120px; background-color: #ddd;

[.

.

.

]

</div>

 

}

</div>

#navi { position: absolute; width: 80px;

top:0px;

left:0px;

}

3.4 Graceful Degradability

Der englische Begriff ‚graceful degradability’ hat noch keine adequate deutsche Übersetzung, er bedeutet ungefähr: „funktioniert auch ohne … gut. “

Das dahinter stehende Prinzip lautet: für die verschiedenen Ausgabemedien sollen nicht ver- schiedene Versionen einer Webseite erstellt werden, sondern alle Ausgabemedien werden mit einem Dokument bedient.

Wenn der Browser Javascript, Flash, CSS unterstützt, dann soll die Website besonders schön, interaktiv, praktisch sein. Wenn der Browser etwas nicht unterstützt, dann soll die Website immer noch lesbar und benutzbar bleiben.

Schlechtes Beispiel: Bild als Überschrift

Um eine bestimmte Schriftart in der Überschrift der Seite zu garantieren wird ein Bild ver- wendet:

<img src="Salzburger Nockerl" />

wendet: <img src="Salzburger Nockerl" /> Das sieht zwar wie eine Überschrift aus – wenn das Bild

Das sieht zwar wie eine Überschrift aus – wenn das Bild geladen wird – die Information ist aber für eine Suchmaschine oder ein Braille-Ausgabegerät nicht lesbar. Für diese wäre fol- gender Code optimal:

Uni Salzburg, SS 2008

Mit Image Replacement (siehe 3.3.3) kann man die optimale Darstellung für Suchmaschinen und Braille Ausgabegeräte mit der optimalen Darstellung als Bild kombinieren.

Schlechtes Beispiel: Navigationsmenü mit Bildern

Ein Navigationsmenü wird mit Tabellen und Bildern aufgebaut:

<table cellspacing="1"> <tr> <td><a href="home.html"><img src="1.gif" /></a></td> <td><a href="news.html"><img src="2.gif" /></a></td> <td><a href="portfotdo.html"><img src="3.gif" /></a></td> <td><a href="contact.html"><img src="4.gif" /></a></td> </tr> </table>

Wieder gilt: die Information ist für eine Suchmaschine oder ein Braille Ausgabegerät nicht lesbar. Für diese Ausgabemedien wären Links mit normalen Texten besser. Mit der in 3.3.2 beschriebenen Methode kann dieses Problem vermieden werden.

37

WWW und Multimedia: Graceful Degradability

4.Termin: Javascript mit jQuery

Am vierten Termin der Lehrveranstaltung werden die Übungsaufgaben zu CSS und Layout be- sprochen. Javascript wird am Beispiel der Library jQuery vorgestellt.

Was Sie wissen sollten

Wie man FireBug für die Fehlersuche in Webseiten nutzen kann.

Was der Unterschied zwischen Javascript und Java ist. Welche Sprache für eine be- stimmte Programmier-Problemstellung passend ist.

Dass Javascript eine Programmiersprache im Web-Browser ist. Dass Javascript Kompa- tiblitätsprobleme hat, aber trotzdem die einzige Chance ist Webseiten interaktiver zu machen.

Was Sie können sollten

Mit jQuery Teile einer Webseite aus- und einblenden und damit interaktive Navigati- onsmenüs gestalten.

Weitere Informationsquellen

jQuery Homepage. http://jquery. com/

Flanagan, David(2007): JavaScript. O'Reilly. ISBN 978-3897214910.

Vertiefungsmöglichkeiten

Erforschen Sie die Dokumentation und die Tutorials von jquery. Alternativ: befassen Sie sich statt dessen mit anderen Libraries wie: prototype, scriptaculous, dojo, yui (von Yahoo)

38

Uni Salzburg, SS 2008

4.2 Hintergrund zu Javascript

Mit Javascript lernen Sie nun die einzige Programmiersprache im Web-Browser kennen. Nur mit Javascript können Sie Webseiten interaktiver machen und AJAX verwenden.

Javascript ist eine Programmiersprache die in HTML eingebettet und vom Browser interpre- tiert wird. Der Wirkungsbereich von Javascript ist auf das Browserfenster und das aktuelle Dokument beschränkt — Sie können mit Javascript nicht die Festplatte löschen oder Excel starten. Unter dem Namen Actionscript wird eine Variante von Javascript in Flash verwendet.

4.2.1 Javascript und Java

Es gibt noch eine zweite Programmiersprache mit sehr ähnlichem Namen: Java. Die beiden zu verwechseln ist recht peinlich:

 

Javascript

Java

Wer hat’s erfunden?

Netscape

Sun

 

Interpretiert Sprache

Kompilierte Sprache

Typbindung

Wenige Datentypen

Datentypen und Klassen werden sterng unterschieden und zur Com- pilezeit geprüft

Verwendung

Im Webbrowser, in Flash

Überall (Chipkarten, am Server, im Browser, im Handy)

Projekte

Meist kurzfristige Projekt mit wenigen Personen

Alle, auch Großprojekte mit vielen „Mannjahren“

ProgrammiererInnen

Auch Web-DesignerInnen

Nur InformatikerInnen

Objektorientierung

Objekte und Prototypen

Objekte und Klassen

Die Verwechslung ist übrigens beabsichtigt: Im Jahr 1995 gab es einen großen Hype rund um Java, Netscape wollte davon profitieren und nannte die neue Sprache „Javascript“.

4.2.2 Geschichte von Javascript

Javascript wurde ursprünglich von Netscape erfunden, und dann von verschiedenen Herstel- lern weiterentwickelt. Es war eines der Schlachtfelder im Browser-War: Microsoft und Net- scape versuchten durch verschiedene Javascript-Implementierungen die Position des eigenen Browsers zu verbessern; Webseiten im gegnerischen Browser unbrauchbar zu machen.

39

WWW und Multimedia: Hintergrund zu Javascript

Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten:

funktioniert in Netscape und Mozilla

x

= window. innerWidth;

funktioniert in Internet Explorer

x

= document. body. client-

Width;

Erst nachträglich gab es (partielle) Einigung auf Standards. Mit dem „Document Object Mo- del“ (DOM) und Libraries wie Prototype oder jQuery hat Javascript nun einen Zustand er- reicht, der die Programmierung wieder erträglich macht.

Lange Zeit waren kleine Javascript-Programme eine relative unabhängige Ergänzung für Web- Applikationen. Ein Beispiel dafür wäre ein Javascript-Kalender der die Eingabe eines Datums in ein Eingabefeld erleichtert.

Seit 2005 wir unter dem Schlagwort AJAX Javascript noch enger mit der serverseitigen Web- applikation verzahnt: AJAX steht für asynchrones Nachladen von Teilen der Webseite über Javascript.

4.2.3 Document Object Model

Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Websei- te oder auch ein XML- Dokument) von einer objektorientierten Skriptsprache aus manipuliert werden kann. Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommen- dation) in der Version 1. 0.

Das DOM einer Webseite kann man sich als Baum vorstellen, ähnlich der Ordnerstruktur im Dateisystem. So ist in folgendem Beispiel der markierte <li>-Tag innerhalb des <ol>-Tags, der <li>-Tag enthält wiederum einen <a>-Tag.

<html> <body> <p>Navigation</p>

<h1>Überschrift</h1>

<div class="intro"> <h2>Dies und Das</h2> <ol>

<h2>Dies und Das</h2> <ol> <li><a href="#bla">erster
<h2>Dies und Das</h2> <ol> <li><a href="#bla">erster

<li><a href="#bla">erster Link</a></li>

<li><a href="#bla">zweiter Link</a></li> </ol> </div>

Wenn man mit Javascript irgendeinen Teil der Webseite verändern will verändert man diesen Baum. Mögliche Veränderungen wären:

Mache ein beliebiges Element des DOM unsichtbar (z. B. die gan-

ze Liste)

Ändere den Style eines beliebigen Elements (z. B. die Schriftart

der Überschrift)

40

(z. B. die gan- ze Liste) • Ändere den Style eines beliebigen Elements (z. B. die

Uni Salzburg, SS 2008

Füge neue Elemente ein (z. B. drei zusätzliche Listenpunkte)

4.3 Javascript Beispiel

Ein vollständiges Beispiel für eine Webseite mit Javascript-Programm:

<head>

<script>

function setcolor( c ) {

 
 

b = document.getElementById('farbfeld');

 

b.style.backgroundColor = c

 

}

 

</script> <body id="farbfeld">

<h1>Farbwahl</h1>

<form>

<input type="button" value="Rot" onClick="setcolor('red')" />

onClick="setcolor('red')" /> <input type="button" value="Grün"

<input type="button" value="Grün" onClick="setcolor('#0F0')" /> <input type="button" value="Blau" onClick="setcolor('blue')" />

</form>

</body>

In dieser Webseite ist an den vier markierten Stellen Javascript zu finden. Wie Sie sehen ist Javascript sehr eng mit HTML und CSS verzahnt. Wenn Sie also eine bestehende Website war- ten oder verändern sollen, müssen Sie mindestens den bestehenden Javascript-Code erkennen können, um ihn nicht zu beschädigen — auch wenn Sie selbst nicht programmieren wollen.

Deswegen klären wir erst einmal wie Javascript eingebunden wird.

4.3.1 Einbindung von Javascript

Externe Javascript-Datei

Man kann Javascript-Programme in eigenen Dateien speichern, diese haben traditionell die Endung . js. Wir werden eine Javascript-Library namens jQuery verwendet. Mit dem <script>-Tag im Head des Dokuments wird die externe Javascript-Datei eingebunden:

<script src="jquery.js" type="text/javascript"></script>

Wird der <script>-Tag auf diese Weise (mit dem Attribut src) verwendet, dann darf er kei- nen Inhalt zwischen <script> und </script> enthalten. Achtung: die Schreibweise ohne Ende-Tag: <script src=“jquery“ /> funktionert nicht!

41

WWW und Multimedia: Javascript Beispiel

Der <script>-Tag im Body

Javascript-Programme können direkt in den body der Webseite mit dem <script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der Seite ausgeführt:

<h1>Selbstzerstörung</h1>

<script>

i=10;

while (i>0) { document.write("<br>in " + i + " Millisekunden"); i--;

}

</script>

<p><strong>Peng!</strong>

<p><strong>Peng!</strong> Dieses Programm ist übrigens ein gutes Beispiel für ein

Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript-Programm. Der Befehl document. write(), der hier für die Ausgabe verwendet wird, wurde durch das DOM größteteils ersetzt. Also: nicht nachahmen.

Javascript in einer URL

Als URL kann man auch ein kleines Javascript-Programm angeben, z. B. bei einem Link:

<a href="javascript:alert('linkt nicht sondern poppt');">js</a>

Die “Javascript-in-einer-URL”- Schreibweise ist in HTML-Seiten nicht sehr sinnvoll, da sie für Browser ohne Javascript-Fähigkeit die Links unbrauchbar macht. Aber Sie werden diese Me- thode vielleicht noch von Flash aus verwenden.

Die onEvent - Attribute

Meist werden Javascript-Programme so geschrieben, dass sie nicht gleich beim Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events) eintreten.

Die Begriffe Ereignis und Event sind Fachbegriffe in der Programmierung von Benutzer- schnittstellen: Ein Event ist etwas was die UserIn tut, und was das Programm wahrnehmen kann. z. B. die UserIn klickt auf einen Button oder bewegt die Maus über einen bestimmten Bereich der Webseite. Wenn man eine grafische Oberfläche programmiert (egal ob in HTML+Javascript oder in Flash+Actionscript oder in Java) spricht man von ereignisgesteuerter Programmierung.

In HTML+Javascript funktioniert das so: Bei manchen HTML-Tags gibt es Attribute die mit on

beginnen (onClick, onSubmit, script-Programm das ausgeführt werden soll.

), als Wert enthalten diese Attribute das Java-

42

Uni Salzburg, SS 2008

<h1>Überraschung</h1>

<form> <input type="button" value="Start" onClick="alert('Ihre Festplatte wurde gelöscht')">

</form>

Ein Button wird angezeigt. Erst wenn der Button gedrückt wird, wird das Event onClick aus- gelöst, und damit das Javascript-Programm gestartet. Es erzeugt ein Popup-Fenster mit dem Text „Ihre Festplatte wurde gelöscht“ (aber es löscht nicht wirklich die Festplatte!). Das Pop- up-Fenster muß erst mit einem Klick auf den OK-Button geschlossen werden, bevor weitere Arbeit mit dem Browser möglich ist.

werden, bevor weitere Arbeit mit dem Browser möglich ist. Abbildung 19: Button mit onClick-Event Ein paar

Abbildung 19: Button mit onClick-Event

Ein paar typische Events mit ihren typischen HTML-Tags:

<body

Das Programm wird ausgeführt, nachdem die ganze Seite geladen + fertig dargestellt ist

">

<a

"

Das Programm wird ausgeführt wenn die Maus über den Link bewegt wird (auch: onMouseOut)

">

<input type="button"

Das Programm wird ausgeführt wenn auf den Button geklickt wird. Das Programm muß true oder false zurückgeben um anzuzeigen ob der Link wirklich geöffnet werden soll.

">

<form

Das Programm wird ausgeführt wenn der Einsende-Knopf des Formulars betätigt wird, aber bevor die Daten wirklich ge- sendet werden. Das Programm muß true oder false zurück- geben um anzuzeigen ob das Formular wirklich abgesendet werden soll.

">

<input

Das Programm wird ausgeführt wenn der Inhalt des Eingabe- feldes verändert wurde

">

Eine vollständige Liste der Events, und eine vollständige Auflistung welcher HTML-Tag mit welchem Event kombiniert werden kann, finden Sie in selfhtml 6 .

6 http://de.selfhtml.org/javascript/sprache/eventhandler.htm

43

WWW und Multimedia: Javascript Beispiel

4.3.2 Syntax von Javascript

Javascript hat eine ähnliche Schreibweise wie die Sprachen aus der C-Familie (C, C++, Java, Perl, PHP): Anweisung wird mit einem Strichpunkt (Semikolon) getrennt, Blöcke werden mit geschwungenen Klammern gebildet. Im Beispiel sehen Sie eine Funktions-Definition mit zwei Anweisungen:

function setcolor( c ) { b = document.getElementById('farbfeld'); b.style.backgroundColor = c

}

In andere Programmiersprachen müssen Variablen deklariert werden (ein Datentyp für die Variable wird festgelegt) und initialisiert werden (ein erster Wert wird in die Variable gespei- chert). In Javascript ist das nicht nötig, wenn eine Variable zum ersten Mal im Programm erwähnt wird, wird sie vom Interpreter angelegt und mit dem Wert undefined belegt.

Die folgenden Beispiele können Sie direkt in FireBug in der Console ausprobieren wie in Abbildung 20 gezeigt: Wenn Sie einen Ausdruck eintippen wird er ausgewertet, mit dem Be- fehl console. log( … ) können Sie direkt auf die Console schreiben.

log( … ) können Sie direkt auf die Console schreiben. Abbildung 20: Javascript Console in FireBug

Abbildung 20: Javascript Console in FireBug

Variablen in Javascript können Zahlen, Strings, Arrays, Objekte enthalten – der Interpreter trennt Variablen nicht nach verschiedenen Datentypen:

a = 10;

// Zahl

a = "ein text";

// String

a = [1,2,3];

a = { datum: "2008-04-13", titel: "Lehrveranstaltung WWW+MM", ort: "T03" }; // Objekt

// Array

Eine Besonderheit von Javascript ist, dass auch Funktionen in Variablen gespeichert werden können:

a = function ( x ) { return x * x };

a(2);

Dies wird oft verwendet um Event-Funktionen zu definieren.

44

Uni Salzburg, SS 2008

Die Kontrollstrukturen if, while, for funktionieren wie in den anderen C-ähnlichen Spra- chen.

Die Schleife for iteriert über die Eigenschaften eines Objekt:

b = { datum: "2008-04-13", titel: "Lehrveranstaltung WWW+MM", ort: "T03" };

for (

i in

b

)

{

console.log("Eigenschaft " + i + " hat den Wert " + b[i] );

}

Damit sollten erfahrene ProgrammiererInnen den Einstieg schaffen, als Referenzwerk kann wieder selfhtml dienen.

4.4

jQuery

Warnhinweis: jQuery definiert eine Funktion mit Namen $ und ein Objekt mit Namen $. Das tun auch andere Javascript-Libraries, z. B. Prototype.

Die Library jQuery 7 unterstützt das Prinzip der „graceful degradability“ – auch ohne Javas- cript werden Webseiten mit jQuery immer noch gut verwendbar sein. Der HTML-Code bleibt dabei „javascript-frei“, jQuery wird nur an einer Stelle, im Head des Dokuments eingebaut:

<script src="jquery.js"></script> <script> $(document).ready(function(){ // Your code here

});

</script>

jQuery verwendet die Schreibweise der CSS-Selektoren um Nodes des DOM auszuwählen:

$("a").addClass("wichtig");

$("h1").append(":");

$("h1").prepend("Titel:");

$("p.extra").hide();

/* alle A-Tags erhalten die Klasse wichtig */ /* in Überschriften h1 wird ein Doppelpunkt angefügt */ /* --||-- wird vorne ‚titel:’ eingefügt */ /* alle p-tags mit klasse extra werden versteckt */

Die Schreibweise für Ereignis-Funktionen ist etwas gewöhnungsbedürftig. Angenommen im HTML-Code befinden sich die Klassen more und extra:

<p>Es war einmal <span class="more">mehr</span> <span class="extra">eine Prinzessin, die lebte </p>

</span>

Falls auf das ‚more’ geklickt wird soll das ‚extra’ erscheinen bzw. verschwinden:

$("p .more").click(function() { $(this).next(".extra").toggle();

});

7 http://jquery.com

45

WWW und Multimedia: jQuery

this ist innerhalb der Funktion der angeklickte Tag. Mit dem jQuery-Befehl next() wird nach dem nächsten Geschwister-Tag, bzw. hier nach dem nächsten Geschwister-Tag mit der Klasse extra gesucht. Auf den gefundenen Tag wird der befehl toggle() angewandt.

Hier noch einmal das vollständige Beispiel wie es in der Vorlesung gezeigt wurde:

<html> <head> <title>jQuery Beispiel</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("p .more").show(); $("p .extra").hide(); $("p .more").click(function() { $(this).next(".extra").toggle();

});

}); </script> <style> .more { color: blue; display: none; } </style> </head> <body> <p>Es war einmal <span class="more">mehr</span> <span class="extra">eine Prinzessin mit namen Erbse</span></p> <p>die lebte <span class="more">mehr</span> <span class="extra">in einem grosses schloss</span></p> <p>und aß <span class="more">mehr</span> <span class="extra">am liebsten Erdbeeren</span></p> </body> </html>

Lesen Sie dieses Beispiel ganz genau: Was passiert wenn Javascript aktiviert ist? Hier eine vereinfachte Darstellung der Seite falls Javascript nicht aktiviert ist:

<html> <head> <title>jQuery Beispiel</title> <style> .more { display: none; } </style> </head> <body> <p>Es war einmal <span class="more">mehr</span> <span class="extra">eine Prinzessin mit namen Erbse</span></p> <p>die lebte <span class="more">mehr</span> <span class="extra">in einem grosses schloss</span></p> <p>und aß <span class="more">mehr</span> <span class="extra">am liebsten Erdbeeren</span></p> </body> </html>

Oder noch einfacher:

<html> <head> <title>jQuery Beispiel</title> </head> <body> <p>Es war einmal <span class="extra">eine Prinzessin mit namen Erbse</span></p>

46

Uni Salzburg, SS 2008

<p>die lebte <span class="extra">in einem grosses schloss</span></p> <p>und aß <span class="extra">am liebsten Erdbeeren</span></p> </body> </html>

47

WWW und Multimedia: jQuery

5.Termin: Einstieg in PHP+Flash

Am fünften Termin der Lehrveranstaltung werden die Übungsaufgaben zu CSS, Javascript und jQuery besprochen. PHP und Flash werden vorgestellt.

Was Sie alle wissen sollten

Dass Flash eine proprietäre Technology im Besitz der Firma Adobe ist. Das Flash- Applikationen Dateien mit der Endung swf sind und mit Hilfe eines Browser-Plugins dargestellt werden.

Dass Flash-Grafiken als Vektoren gespeichert werden, und somit skalierbar sind. Dass über die Zeitleiste in Flash Animationen erstellt werden können.

Dass PHP eine freie Skriptsprache ist, die am Webserver interpretiert wird. Dass nur der Output von PHP an den Browser übertragen wird, also der Source-Code niemals lesbar ist.

Dass es sehr viele Programmiersprache gibt die alternativ zu PHP am Webserver ver- wendet werden können.

Was Sie alle können sollten

Erkennen ob Flash in einer Webseite verwendet wird. (Der Trick mit der rechten Maustaste).

48

Gruppe Flash

Was Sie wissen sollten

Uni Salzburg, SS 2008

Wie Sie eine Demo-Version von Flash herunterladen können.

Dass Flash-Grafiken aus Formen und Konturen aufgebaut sind.

Dass die Bühne keine Begrenzung darstellt, dass Sie auch außerhalb der Bühne zeich- nen können.

Dass Symbole zur Wiederverwertung von Formen dienen und Speicherplatz sparen. Dass die Möglichkeit zur „Gruppierung“ existiert aber kaum verwendet wird.

Was ein Bewegungstween ist; Dass nur ein einziges Symbol getweent werden kann.

Dass die Illusion von Bewegung auch durch die Bewegung eines Hintergrundbildes er- zeugt werden kann. Dass die Illusion von Raumtiefe durch perspektivische Verkleine- rung/Vergrößerung erzeugt werden kann.

Was Sie können sollten

Zeichnen, Malen, Formen in Flash. Gezielt Ebenen verwenden.

Ein Symbol erstellen.

Ein Symbol mittels Bewegungstween über die Bühne bewegen.

Mittels Bewegungstween Größe, Durchsichtigkeit (Alpha), Farbe eines Symbols verän- dern.

Mit SWFObject 2.0 die swf-Datei in eine Webseite einbinden.

Weitere Informationsquellen

Flash Homepage

Flashforum.de

Vertiefungsmöglichkeiten

Erforschen Sie die verschiedenen Möglichkeiten Flash in eine Webseite einzubinden: Fenster- füllend, als Hintergrundbild, verzerrt, nicht verzerrt, … Importieren Sie Vektorgrafiken und Bitmap-Grafiken, erstellen Sie Animationen mit den importieren Grafiken. Experimentieren Sie mit dem Formtween.

49

WWW und Multimedia: jQuery

Gruppe PHP

Was Sie wissen sollten

Wo Sie Apache, PHP und MySQL im Paket für Windows herunterladen können.

Was Sie können sollten

Ein PHP Programm schreiben und testen – sowohl am eigenen Computer als auch auf einem UNIX-Webserver wie z.B. student.cosy.sbg.ac.at.

PHP-Code lesen, egal auf welche Art er in HTML eingebettet ist.

Die PHP-Dokumentation als Nachschlagewerk verwenden.

Mit Zahlen, Strings, Arrays in PHP arbeiten.

Eigene Funktionen definieren.

Mit Dateien und Ordnern in PHP arbeiten.

Weitere Informationsquellen

PHP Homepage mit Dokumentation in verschiedenen Sprachen: http://php.net

Smarty http://smarty.php.net/

Vertiefungsmöglichkeiten

Lesen Sie in der Dokumentation über String-Funktionen, Array-Funktionen, Filesystem- Funktionen.

Installieren Sie Smarty und lösen Sie die Übungsaufgaben alternativ mit Smarty.

50

Uni Salzburg, SS 2008

5.2 Einstieg in PHP

PHP ist eine Programmiersprache am Webserver. Sie ist im Vergleich zu anderen Program- miersprachen wie Java oder sogar Actionscript recht einfach in der Schreibweise und etwas altmodisch. Gerade deswegen eignet sie sich gut für Programmier-Einsteiger. Viele bekannte open source Web-Applikationen sind in PHP geschrieben.

Bei Verwendung von serverseitiger Programmierung wird auch – wie bei statischen Webseiten – HTML an den Browser geliefert. Dieser HTML-Code ist nun aber der Output eines Program- mes. So hat z.B. bei einem Online-Shop wie Amazon jedes Buch eine eigene Webseite.

Diese Seite wurde aber nicht „von Hand“ erstellt, sondern die Daten zum Buch (Titel, Auto- rInnen, ISBN) liegen in einer Datenbank, und werden bei einer Browser-Anfrage von einem (PHP-)Programm ausgelesen.

Außerdem gibt es eine Vorlage wie der HTML-Code der gesamten Webseite aussehen solle, ein sogenanntes Template. Die Daten werden mit dem Template zu einer vollständigen HTML- Seite kombiniert, und an den Browser gesandt wie in Abbildung 21 gezeigt.

und an den Browser gesandt wie in Abbildung 21 gezeigt. Abbildung 21: Template, Datenbank, PHP-Programm Neben

Abbildung 21: Template, Datenbank, PHP-Programm

Neben PHP werden viele andere Sprachen am Webserver verwendet. Da der Output dabei immer HTML ist kann der Client nicht erkennen, welche Sprache verwendet wurde. Der Quell- text des Programmes wird nie im Browser sichtbar.

51

WWW und Multimedia: Einstieg in PHP

5.2.1 PHP Entwicklungsumgebung

Ein sehr einfaches Beispielprogramm in PHP gibt „Hallo Welt“ aus und zeigt (mit dem Befehl phpinfo) viele Informationen über den Webserver und die PHP Installation an:

<?php echo "Hallo Welt"; phpinfo();

?>

Um dieses Programm zu testen, brauchen Sie einen Browser und einen Webserver.

Apachefriends und XAMPP

Die „apachefriends“ bieten den Webserver Apache in einem Paket mit der Programmierspra- che PHP und der Datenbank MySQL für Windows an. Dieses Gesamtpaket heißt dann XAMPP. Eine sehr freundliche Installations-Anleitung ist auch dabei.

sehr freundliche Installations-Anleitung ist auch dabei. Abbildung 22: Webseite von apac hefriends.org, download von

Abbildung 22: Webseite von apachefriends.org, download von XAMPP

Die Alternative zur Distribution XAMPP wäre, jeden Teil einzeln zu besorgen: Apache von httpd.apache.org, PHP von php.net, und MySQL von MySQL.com herunter laden, die drei Pakete separat installieren, und dann versuchen, sie richtig zu kombinieren. Das ist viel mehr Arbeit.

Apache und MySQL starten

Wenn die Installation von Apache und MySQL auf Windows funktioniert hat, findet man nicht – wie bei anderen Programmen – einen Eintrag im Programm-Menü. Weder Apache noch PHP noch MySQL haben eine grafische Oberfläche. Apache und MySQL sind „Server“, die man star- ten muß.

Man kann Apache und MySQL auf zwei Arten starten: als Windows-Dienst oder über das in Abbildung 23 gezeigte XAMPP Control Panel.

52

Uni Salzburg, SS 2008

Uni Salzburg, SS 2008 Abbildung 23: XAMPP Control Panel zum Starten und Stoppen von Apache Apache

Abbildung 23: XAMPP Control Panel zum Starten und Stoppen von Apache

Apache als Windows-Dienst

Man findet unter SYSTEMSTEUERUNG -> VERWALTUNG -> DIENSTE eine Liste aller installierten Dienste und kann diese starten und anhalten.

installierten Dienste und kann diese starten und anhalten. Abbildung 24: Dienste von Windows: MySQL und Apache2

Abbildung 24: Dienste von Windows: MySQL und Apache2 sind schon gestartet

Webserver stoppen

Egal wie man Apache gestartet hat: erst mit einem Browser kann man die Funktionstüchtig- keit des Webservers wirklich testen. Als URL verwendet man http://localhost/.

wirklich testen. Als URL verwendet man http://localhost/ . Achtung: Apache und MySQL brauchen viel Hauptspeicher:

Achtung: Apache und MySQL brauchen viel Hauptspeicher: Apache ca. 40 MB, MySQL fast 400 MB. Wer gleichzeitig mit vielen anderen Programmen arbeitet und nur wenig Hauptspeicher im Computer hat, sollte also MySQL und Apache nach Gebrauch wieder beenden.

Das erste PHP-Programm

Beachten Sie, dass das Programm die richtige Dateiendung (.php) haben muß und nicht direkt im Browser angezeigt werden kann:

53

WWW und Multimedia: Einstieg in PHP

WWW und Multimedia: Einstieg in PHP Abbildung 25: So funktioniert PHP ni cht: ohne Webserver, falsche

Abbildung 25: So funktioniert PHP nicht: ohne Webserver, falsche Dateiendung

Wenn Sie eine PHP-Programm in einer Datei mit der Endung .html oder .htm speichern wird es nicht vom Webserver interpretiert, sondern direkt an den Browser gesandt. Der Browser zeigt den Code aber nicht an, erst mit Ansicht->Quelltext kann man den Code sehen wie in Abbildung 26 gezeigt.

kann man den Code sehen wie in Abbildung 26 gezeigt. Abbildung 26: So funktioniert PHP nicht:

Abbildung 26: So funktioniert PHP nicht: falsche Dateiendung

Wenn Sie die richtige Dateiendung verwenden (.php) und die Seite über einen Webserver betrachten (z.B. http://localhost) kann immer noch ein Fehler im PHP-Programm auftre- ten. Die Fehlermeldung des Interpreters wird dann im Browser angezeigt wie in Abbildung 27 gezeigt.

dann im Browser angezeigt wie in Abbildung 27 gezeigt. Abbildung 27: So funktioniert PHP nicht: Fehler

Abbildung 27: So funktioniert PHP nicht: Fehler im Programm

Zum Abschluß nun das funktionierende Programm bei einem funktionierenden Testlauf:

54

Uni Salzburg, SS 2008

Uni Salzburg, SS 2008 Abbildung 28: So funktioniert PHP: Webser ver, richtige Endung, richtiger Programmcode Mit

Abbildung 28: So funktioniert PHP: Webserver, richtige Endung, richtiger Programmcode

Mit Ansicht->Quelltext kann man nun im Browser nur noch den HTML-Code sehen, niemals aber den PHP-Quellcode!

PHP Versionen

Der Befehl phpinfo() liefert Informationen zur PHP-Installation. In Abbildung 28 sehen Sie z.B. dass PHP in der Version 5.0.5 installiert ist.

Zwischen den verschiedenen PHP-Versionen gibt es eklatante Unterschiede, PHP ist nicht aufwärts-kompatibel. Wenn ihr Webspace-Vermieter auf eine neue PHP-Version umstellt, müssen Sie eventuell den Code Ihres Programmes anpassen.

In der PHP-Dokumentation sind diese Unterschiede bei den einzelnen Befehlen aufgeführt, z.B. bei der Funktion array_fill() ist in der Dokumentation angegeben:

(PHP 4 >= 4.2.0, PHP 5)

Die Funktion existiert also seit PHP 4 Version 4.2.0 und auch in PHP 5.

Besonders im Bereich der Objektorientierung (Objekte, Klassen, etc.) gab es große Verände- rungen von PHP 4 auf PHP 5. Falls Sie objektorientiert programmieren wollen, sollten Sie auf jeden Fall PHP 5 verwenden!

Dokumentation

Die Dokumentation zu PHP finden Sie auf http://php.net.

55

WWW und Multimedia: Einstieg in PHP

WWW und Multimedia: Einstieg in PHP Abbildung 29: Eine Funktion in der Doku auf php. net

Abbildung 29: Eine Funktion in der Doku auf php. net nachschlagen

Hilfreich sind auch die Kommentare der UserInnen am Ende jeder Doku-Seite. Hier finden Sie oft Erklärungen zu einzelnen Features, die in der Dokumentation ‚vergessen’ wurden, oder Anwendungsbeispiele:

‚vergessen’ wurden, oder Anwendungsbeispiele: Abbildung 30: Kommentare von UserInnen in der Doku auf php.

Abbildung 30: Kommentare von UserInnen in der Doku auf php. Net

Die Dokumentation kann man auch herunterladen und lokal installieren, dann enthält sie aber nicht die Kommentare.

5.2.2 Syntax von PHP

HTML und PHP

Ein erstes längeres Beispiel zeigt wie eng HTML und PHP vermischt werden können:

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

02

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

03

<html xmlns="http://www.w3.org/1999/xhtml">

04

<head>

05

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

06

<title>Beispielseite für ein PHP-Programm</title>

56

Uni Salzburg, SS 2008

07 </head><body>

08 <h1>PHP-Beispiel</h1>

09 <?php

10 $entfernung = 296;

11 $h = 2;

12 $min = 40;

13 $zeit = $h + $min / 60;

14 $kmh = $entfernung / $zeit;

15 echo "<p>$entfernung km in $h:$min sind $kmh km/h</p>\n";

16 if( $kmh > 130 ) {

17 echo("<p><b>Das ist zu schnell!</b></p>\n");

18 }

19 ?>

20 </body>

21 </html>

Der Quellcode besteht hier aus einem HTML-Dokument, in dem in Zeile 09 bis 19 PHP einge- bettet ist. In den Zeilen 10 bis 14 werden nur Berechnungen durchgeführt, diese Zeilen haben keine Auswirkung auf das resultierende HTML-Dokument. In den Zeile 15 und 17 wird mit der echo() – Funktion ein Output erstellt. Der PHP-Interpreter fügt diesen Output an der Stelle ein, wo der PHP-Code war; das Ergebnis sieht wie folgt aus:

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

02

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

03

<html xmlns="http://www.w3.org/1999/xhtml">

04

<head>

05

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

06

<title>Beispielseite für ein PHP-Programm</title>

07

</head><body>

08

<h1>PHP-Beispiel</h1>

09

<p>296 km in 2:40 sind 111 km/h</p>

10

</body>

11

</html>

Welcher Teil des Dokuments statisch war und welcher von PHP berechnet wurde ist für den Browser nicht erkennbar.

Ein PHP-Dokument kann mehrere Einbettungen enthalten, dabei können sogar Kontrollstruk- turen in einem anderen Teil fortgesetzt werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 
 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beispielseite für ein PHP-Programm</title> </head><body> <h1>Wilde Mischung</h1>

 

<?php $i = 0;

 

?>

while ( $i < 22 ) {

   
 

<p>Alles Gute zum Geburtstag <img src="torte.jpg" /> !</p>

 

<?php

$i++;

 

}

57

WWW und Multimedia: Einstieg in PHP

?>

<p>Und ein gutes nächstes Jahr!</p>

</body>

</html>

Diese Schreibweise widerspricht den Lese-Gewohnheiten von ProgrammiererInnen: diese Art von Verschachtelung ist in den meisten Sprachen verboten.

<i>und</b> kursiv</i>
<i>und</b> kursiv</i>
<i>und</b> kursiv</i>
<i>und</b> kursiv</i>

<i>und</b> kursiv</i>

<i>und</b> kursiv</i>

z.B. in HTML: <b>fett

In PHP wird diese Schreibweise oft verwendet, es gibt aber eine alternative Schreibweise für die Kontrollstrukturen, die besser zu unseren Lesegewohnheiten paßt: Statt der öffnenden geschwungenen Klammer wird ein Doppelpunkt geschreiben, das Ende der Schleife wird mit einem eigenen Schlüsselwort (endwhile, endif, endfor) markiert:

<h1>Wilde Mischung</h1>

<?php $i = 0;

 

?>

while ( $i < 22 ) :

 
 

<p>Alles Gute zum Geburtstag <img src="torte.jpg" /> !</p>

<?php

$i++;

 

endwhile;

?>

 

<p>Und ein gutes nächstes Jahr!</p>

Bei größeren Projekten empfehle ich aber auf jeden Fall die Trennung von Programm-Logik und Darstellung und die Verwendung von Templates wie z.B. Smarty 8 . Der erste Schritt in diese Richtung wäre, die Berechnung an den Anfang der Datei zu stellen.

Welcher Teil schon als Ausgabe zählt und in das HTML-Dokument eingebettet wird ist dabei wieder eine Abwägungsfrage, auf die es keine fixe Antwort gibt.

<?php

// Berechnung zuerst $entfernung = 296; $h = 2; $min = 40; $zeit = $h + $min / 60; $kmh = $entfernung / $zeit;

?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beispielseite für ein PHP-Programm</title>

8 http://smarty.php.net/

58

Uni Salzburg, SS 2008

</head><body>

<h1>PHP-Beispiel</h1>

<?php echo "<p>$entfernung km in $h:$min sind $kmh km/h</p>"; if( $kmh > 130 ) { echo("<p><b>Das ist zu schnell!</b></p>");

?>

}

</body>

</html>

Variablen und Typen

Variablenamen in PHP beginnen mit einem Dollar-Zeichen. Warum? Sie haben im Beispielpro- gramm schon gesehen, wie Variablen einfach in Strings eingebettet werden können:

echo "$entfernung km in $h:$min sind $kmh km/h";

Das ist nur möglich weil die Variablennamen mit einem besonderen Zeichen gekennzeichnet sind. Es gibt in PHP eine zweite Schreibweise für Strings die keine Variablen erlaubt:

echo 'Bei einfachen Anführungszeichen ist ein $ einfach ein $';

Variablen in PHP müssen nicht deklariert oder initialisiert werden. PHP unterscheidet zwi-

schen den Datentypen boolean, integer, float, string, array, object, resource und

NULL. In einer Variable können nacheinander verschiedene Datentypen gespeichert werden, die Variable selbst hat also keinen Typ! Je nach verwendeten Operatoren und Funktionen werden die Typen konvertiert:

<?php $foo = "0"; $foo += 2; $foo = $foo + 1.3;

$bar = 5 + "10 Little Piggies"; // $bar is an integer (15)

$baz = 5 . "10 Small Pigs"; ?>

// $foo is a string with one character (ASCII 48) // $foo is now an integer (2) // $foo is now a float (3.3)

// $baz is a longer string "510 Small Pigs"

Die Addition mit + interpretiert beide Summanden als Zahl. Falls ein Summand ein String ist, wird am Beginn des Strings nach einer Zahl gesucht und diese verwendet. Der Punkt-Operator fügt Strings zusammen und interpretiert seine beiden Operanden als Strings.

Arrays in PHP können auf ähnliche Art verwendet werden wie in C, C++, Java, Perl und ver- hält sich auf den ersten Blick auch wie erwartet:

$foo[2] = 2008; $foo[3] = 2009; $foo[0] = "Halli"; $foo[1] = "Hallo";

2009; $foo[0] = "Halli"; $foo[1] = "Hallo"; for($i=0;$i<count($foo);$i++) { echo("Der $i. Wert

for($i=0;$i<count($foo);$i++) { echo("Der $i. Wert im Array ist $foo[$i]<br />");

}

59

WWW und Multimedia: Einstieg in PHP

Auf den zweiten Blick sind Arrays in PHP aber wesentlich komplexer: nicht nur Integers sind als Index zulässig, sondern auch Strings, es handelt sich also um assoziative Arrays in denen ein Schlüssel mit einem Wert assoziert wird.

Mit der foreach Schleife kann man Schlüssel und Wert auslesen. Dabei wird offenbar, dass die Reihenfolge des Einfügens ins Array erhalten geblieben ist: Die Schlüssel-Wert-Paare sind im Array weiterhin geordnet!

$foo[2] = 2008; $foo[3] = 2009; $foo[0] = "Halli"; $foo[1] = "Hallo";

2009; $foo[0] = "Halli"; $foo[1] = "Hallo"; foreach( $foo as $key => $value ) { echo("Zum

foreach( $foo as $key => $value ) { echo("Zum Schlüssel $key ist der Wert $value gespeichert<br />");

}

Mit der Schreibweise $foo[] kann ein Wert unter der kleinsten (noch nicht verwendet) Inte- ger-Zahl als Schlüssel gespeichert werden:

$foo[2] = 2008; $foo[3] = 2009; $foo[0] = "Halli"; $foo[1] = "Hallo"; $foo['dies'] = "etwas Nahes"; $foo['das'] = "etwas Fernes"; $foo[] = "das Nächste";

= "etwas Nahes"; $foo['das'] = "etwas Fernes"; $foo[] = "das Nächste";

Das Array in PHP ist also ein wesentlich komplexerer Datentyp als ein Array in anderen Pro- grammiesprachen – es verbindet Eigenschaften von Arrays mit denen von assoziativen Arrays. Ein Array zu sortieren ist entsprechend kompliziert, es gibt entsprechend eine ganze Reihe von Sortier-Funktionen. Sie finden diese im Abschnitt „Array-Funktionen“ der PHP-Doku.

Funktionen

function foo($arg_1, $arg_2 = "Euro")

{

$a

return $a . $arg_2;

= 1

*

2;

}

$x = foo(10); $y = foo(20, "Pfund");

Die Schreibweise von Funktionen inklusive Argumentliste und Rückgabewert ist leicht ver- ständlich. Eine Falle für erfahrene ProgrammiererInnen ist das Scoping von globalen Varia- blen:

$pi = 3.141;

function inhalt($radius)

{

return $radius * $radius * $pi;

}