WWW Und Multimedia 2008

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 Flash 200
ANHÄNGE 204
Literatur- und Web-Tipps 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?
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.
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
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):
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
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

< <
> >
& &
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

Ä Ä
Ä ä
ß ß
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
<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:
<img alt="Das ist neu!" arc="neu.gif />
9
1.2.5 Kompatibilität
Jeder Browser (egal ob Firefox, Microsoft Internet Explorer, Opera,. . . ) kann jedes HTML-
Dokument darstellen. Mit jedem Editor (egal ob Dreamweaver, Frontpage, GoLive,. . . ) kann
jedes HTML-Dokument bearbeitet werden. Neue Tags, die z. B. ein Browser nicht erkennt,
sind zu ignorieren – es gibt keine Fehlermeldungen!
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 <p>Dies ist meine erste supercoole Websei-
<jump>supercoole</jump> Webseite!!!! </p> 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 <p>Zu den markierten Terminen sind noch Plät-
Plätze im Kurs frei: ze im Kurs frei</p>
</p> <ul>
<ul> <li><jump>Montag *</jump>
<li><jump>Montag</jump> <li>Dienstag
<li>Dienstag <li>
<ul>
Auf älteren Browsern geht die wichtigste Auf allen Browsern ist erkennbar zu welchen
Information verloren! 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:

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 <span style="font-face:Arial;">Text</span>
Schriftart
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
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 <img src="neu.gif" style="float:left;" />
fließt rechts vorbei)
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 <a href="seite2.htm">mehr</a>
Ordner (relative URL)

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
<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>
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):
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
14
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.

• 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)

• 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.
• CSS Zen Garden. http://csszengarden. com/
• Bildformate am Web. http://webwelt.horus.at/html/img/bildformate.html
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>
<p><font size="+1">P</font>rojekte und Praxissemster stellen schon während des Studiums
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> h1 {
<link rel="stylesheet" font-family: Arial;
type="text/css" color: blue;
href="fh.css"> }
</head><body> p:first-letter {
<h1>Das Studium</h1> 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
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;
Eine Regel
color: lightblue;
}
Selektor
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
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
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:
p.wichtig { color: red; } /* nur der Tag p mit der Klasse wichtig */
b.wichtig { color: yellow; } /* 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:
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.
<p>Es gibt hier ganz <span class="wichtig">besonders interessante</span> Meldungen.</p>
19
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. p {
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; }
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
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:
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
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.
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
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
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

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.

• 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.

• 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.
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
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
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
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
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.
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
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%.
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:
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
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.
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%;
}
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
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;
}
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
div#navi li {
float:left;
list-style-type:none;
margin-right:1px;
background:#6C6;
width:6em;
padding: 0.2em;
}
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>
3.3.4 :hover
Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist.
33
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.
Abbildung 17: CSS Sprites von Yahoo
34
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
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;
<div id="content"> position:relative;
<h1>Inhalt</h1> width: 700px;
<p>Hier ist der Inhalt[. . . ]</p> margin: 0px auto;
</div> }
<div id="navi"> #content {

[. . . ] margin-left: 120px;
</div> background-color: #ddd;
}
</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" />
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:
<h1>Salzbuerger Nockerl</h1>
36
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.

• 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.

• Mit jQuery Teile einer Webseite aus- und einblenden und damit interaktive Navigati-
onsmenüs gestalten.
• jQuery Homepage. http://jquery. com/
• Flanagan, David(2007): JavaScript. O'Reilly. ISBN 978-3897214910.
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
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 Alle, auch Großprojekte mit vielen
wenigen Personen „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>
<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
• 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')" />
<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>
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, onLoad,. . . ), als Wert enthalten diese Attribute das Java-
script-Programm das ausgeführt werden soll.
42
<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.
Abbildung 19: Button mit onClick-Event
Ein paar typische Events mit ihren typischen HTML-Tags:
<body onLoad=". . . Das Programm wird ausgeführt, nachdem die ganze Seite
"> geladen + fertig dargestellt ist
<a href=". . . " Das Programm wird ausgeführt wenn die Maus über den Link
onMouseOver=". . . bewegt wird (auch: onMouseOut)
">
<input type="button" Das Programm wird ausgeführt wenn auf den Button geklickt
onClick=". . wird. Das Programm muß true oder false zurückgeben um
"> anzuzeigen ob der Link wirklich geöffnet werden soll.
<form onSubmit=". . . 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 onChange=". . 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.
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]; // Array
a = { datum: "2008-04-13", titel: "Lehrveranstaltung WWW+MM", ort: "T03" }; // Objekt
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
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"); /* alle A-Tags erhalten die Klasse wichtig */

$("h1").append(":"); /* in Überschriften h1 wird ein Doppelpunkt angefügt */
$("h1").prepend("Titel:"); /* --||-- wird vorne ‚titel:’ eingefügt */
$("p.extra").hide(); /* 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 ...</span>
</p>
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>
$("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>
<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>
</head>
<body>
<p>Es war einmal <span class="extra">eine Prinzessin mit namen Erbse</span></p>
46
<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
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

• 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.

• 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.
• Flash Homepage
• Flashforum.de
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
Gruppe PHP

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

• 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.
• PHP Homepage mit Dokumentation in verschiedenen Sprachen: http://php.net
• Smarty http://smarty.php.net/
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
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.
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.
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
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.
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/.
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
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.
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.
Abbildung 27: So funktioniert PHP nicht: Fehler im Programm
Zum Abschluß nun das funktionierende Programm bei einem funktionierenden Testlauf:
54
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
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:
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
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">
<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
?>
<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.
z.B. in HTML: <b>fett <i>und</b> kursiv</i>
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">
<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
</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 is a string with one character (ASCII 48)
$foo += 2; // $foo is now an integer (2)
$foo = $foo + 1.3; // $foo is now a float (3.3)
$bar = 5 + "10 Little Piggies"; // $bar is an integer (15)
$baz = 5 . "10 Small Pigs"; // $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";
for($i=0;$i<count($foo);$i++) {
echo("Der $i. Wert im Array ist $foo[$i]<br />");
}
59
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";
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";
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 = 1 * 2;
return $a . $arg_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;
}
$r = 10;
60
$a = inhalt($r);
echo("ein Kreis mit Radius $r hat eine Fläche von $a");
Dieses Programm funktioniert nicht wie erwartet, da innerhalb einer Funktion kein Zugriff auf
außerhalb definierte Variablen möglich ist! Die Variable $pi ist in der Funktion nicht sichtbar,
statt dessen wird mit einer neuen Variable $pi mit default-Wert 0 gerechnet.
Mit dem Keyword global wird die Variable „in die Funktion eingeladen“ und ist dann auch
innerhalb der Funktion sichtbar, lesbar und veränderbar.
$pi = 3.141;
function inhalt($radius)
{
global $pi;
return $radius * $radius * $pi;
}
$r = 10;
$a = inhalt($r);
echo("ein Kreis mit Radius $r hat eine Fläche von $a");
Ausgenommen von dieser Regelung sind die sogenannten „superglobals“, das sind Variablen,
die auf jeden Fall sichtbar sind. Drei davon sind allgemeiner Natur und werden hier erläutert,
die restlichen dienen speziell zur Kommunikation mit dem Webbrowser und werden erst spä-
ter behandelt.
$GLOBALS Dieses Array enthält alle globalen Variablen.
$_SERVER Dieses Array enthält Konfigurations-Informationen des (Web-)Servers und all-

gemeine Informationen zur aktuellen Anfrage (z.B. IP-Adresse des Browsers)
$_ENV Dieses Array enthält die Umgebungsvariablen (je nach Betriebssystem ver-
schieden).
Lebenszeit eines PHP-Programmes

Das PHP-Programm wird gestartet um die Anfrage des Browsers zu beantworten. Nachdem
diese Aufgabe erfüllt ist, wird das PHP-Programm wieder beendet. Die Laufzeit ist also sehr,
sehr kurz!
5.2.3 Arbeiten mit Dateien und Ordnern
In diesem Kapitel wird beschreiben, wie PHP mit Dateien und Ordnern arbeiten kann und wel-
che Web-spezifischen Probleme dabei auftreten.
61
Zugriffsrechte
Achtung: Auf einem UNIX-Webserver läuft das PHP-Programm unter dem Usernamen des Web-
servers, nicht unter Ihrem Namen! Dies wird relevant, sobald ein PHP-Programm eine andere
Datei lesen oder (über-)schreiben soll.
Beim Upload der Dateien auf den Webserver mit einem FTP oder SFTP-Programm sollten Sie
auch die Möglichkeit haben, die Zugriffsrechte anzusehen bzw. zu verändern. Abbildung 31
zeigt links die Darstellung der Zugriffsrechte in der Shell, rechts das Verändern der Zugriffs-
rechte mit Dreamweaver.
Abbildung 31: UNIX Zugriffsrechte mit Dreamweaver setzen
Eine kurze Wiederholung der UNIX-Zugriffsrechte: Es gibt drei Rechte (Lesen, Schreiben, Aus-
führen) und drei Gruppen von Usern die unterschieden werden (Eigentümer, Gruppe, Jeder).
Im Terminal werden diese Rechte als Buchstaben angezeigt: r steht für Lesen, w für Schrei-
ben, x für Ausführen.
Das PHP-Programm läuft nicht unter Ihrem Usernamen, sondern unter dem Usernamen des
Webservers. D.h. für das PHP-Programm gelten die Zugriffsrechte „für alle“.
Mit den PHP-Funktionen is_readable() und is_writable() können Sie testen, ob das Pro-
gramm Lese- bzw. Schreibrechte auf eine bestimmte Datei hat.
Ordner auflisten
Um herauszufinden, welche Dateien (und Unter-Ordner) sich in einem Ordner befinden, ver-
wendet man die Funktion glob. (Achtung: die Funktionen opendir, readdir, closedir gibt
es auch, die sind aber komplizierter zu verwenden)
<?php
$alle = glob("*");
foreach( $alle as $file ) { // forach-Schleife über Werte, Schlüssel ignorieren!
echo "<br>Datei $file gefunden.\n";
}
?>
62
Im Output des Programmes werden nicht nur Dateien angezeigt, sondern auch Ordner. Mit
den Funktionen is_dir() und is_file() könnte man herausfinden ob ein Ordner oder eine
Datei vorliegt.
Die Funktion glob kann — ähnlich wie das DOS-Kommand dir oder das UNIX-Kommando ls —
mit verschiedenen Mustern suchen:
<?php
$alle = glob("*.jpg");
foreach( $alle as $file ) {
echo "<br>Bild $file gefunden.\n";
}
?>
Der Rückgabewert von glob ist ein Array. Mit array_merge kann man mehrere Arrays zusam-
menfügen zu einem langen Array und mit asort die Werte alphabethisch sortieren:
$jpg = glob("bilder/*.jpg");
$gif = glob("bilder/*.gif");
$alle_bilder = array_merge($jpg, $gif);
asort( $alle_bilder )
Datei lesen
Um eine Datei von PHP aus zu benutzen, muß man sie mit der Funktion fopen öffnen. Man
erhält einen „handle“ mit dem man sich im Weiteren auf diese Datei bezeihen kann.
$handle = fopen("counter.txt", "r"); // r steht für read = lesen
Achtung: die Pfadangabe zur Datei ist in UNIX-Schreibweise mit Slash zu schreiben, nicht in
Windows-Schreibweise mit Backslash, also:
$handle = fopen ("unterordner\counter.txt", "r")

$handle = fopen ("unterordner/counter.txt", "r")
Da die Datei zum Lesen geöffnet wurde, kann man nun mit fgets eine Zeile aus der Datei
lesen. „Eine Zeile“ bedeutet hier: bis ein Zeilenumbruch in der Datei gefunden wird.
$zahl = fgets($handle);
Bei längeren Dateien wird fgets meist in einer Schleife verwendet, um alle Zeilen aus der
Datei zu lesen. Nach Gebrauch muß man die Datei wieder schließen:
fclose($handle);
Datei (über-)schreiben
Beim Schreiben wird als zweites Argument von fopen der Buchstabe „w“ übergeben:
$handle = fopen("counter.txt", 'w');

fwrite($handle, "$zahl\n");
fclose($handle);
63
Leider ist das Leben aber nicht so einfach: sowohl beim Lesen als auch beim Schreiben von
Dateien kann viel schief gehen. Existiert die Datei, aus der ich lesen will, überhaupt? Darf ich
in die Datei, in die ich schreiben will überhaupt schreiben? Um diese Fragen zu beantworten
gibt es Funktionen is_readable, is_writable und die Rückgabewerte der verschiedenen
schon gezeigten File-Funktionen. So liefert fwrite entweder die Anzahl der geschriebenen
Bytes oder FALSE als Status-Code zurück:
$status = fwrite($handle, $zahl);

if ( $status === FALSE ) {
echo "Datei nicht schreibbar: Platte voll? Zugriff verboten?";
exit;
}
Bevor Sie beginnen mit PHP Dateien zu (über-)schreiben, zu löschen oder zu verschieben ein
Warnhinweis: Es wird ernst. Hier gibt es keinen Papierkorb. Wenn Ihr PHP-Programm eine
Datei löscht, dann ist diese Datei sofort und unwiederbringlich weg.
Gleichzeitiger schreibender Zugriff

Achtung: was passiert wenn zwei Zugriffe genau gleichzeitig erfolgen? Zwei Apache-Prozesse
führen jeweils das PHP-Programm aus und versuchen, in die gleiche Datei zu schreiben!
Aber: diese Problem kann man bei der ersten Übung einfach ignorieren.
64
5.3 Flash oder nicht Flash?

Flash ist ein Programm der amerikanischen Adobe (seit diese im Jahr 2005 Macromedia aufge-
kauft hat). Dieses Programm ist eine Authoring-Umgebung, die letztlich Dateien mit der En-
dung *. swf 9 generiert. Wenn diese Dateien mit Hilfe eines Plugins in einem Webbrowser an-
gezeigt werden, sind sie interaktive, multimediale Applikationen.
Die im Alltag übliche Bezeichnung „Flash“ wird für unterschiedliche Dinge angewandt:
1. Das Programm „Adobe Flash“, also die Authoring-Umgebung mit der Flash-
Applikationen erstellt werden.
2. Die mit diesem Programm gespeicherten Dateien, erkennbar am Symbol oder an

der Endung *. fla. Diese Dateien dienen der weiteren Bearbeitung.
3. Die mit diesem Programm erzeugten Endprodukt-Dateien, man erkennt Sie am

Symbol oder an der Endung *. swf. Diese Dateien sind für die Publikation im Web
gedacht.
4. Das Plugin, das zusätzlich zum Webbrowser installiert sein muß, um das Abspielen von
Flash-Applikationen im Webbrowser zu ermöglichen.
5. Die gesamte Technologie, also die Gesamtheit der Punkte 1 bis 4.
5.3.1 Vektorgrafik
Flash war und ist das am weitesten verbreitete vektorbasierte Bild-Format im Web. Eine swf-
Datei, die nur Vektor-Grafiken (keine importierten Bitmaps, Audio- oder Video-Daten) ent-
hält, ist von der Datenmenge her sehr klein. Vektorgrafik heißt auch, dass die in Flash ge-
zeichneten Bilder skalierbar sind – also in verschiedenen Größen ohne Qualitätsverlust ver-
wendbar ist.
Abbildung 32: Beispiel Flash: Stern als Standbild, Stern als einfach Animation
65
WWW und Multimedia: Flash oder nicht Flash?
Ein Beispiel zur Veranschaulichung der geringen Datenmengen im Vergleich zu gif und jpg:
Abbildung 32 zeigt einen fünfzackigen Stern, einfärbig gelb mit schwarzer Kontur, einmal als
Standbild, einmal als einfache Animation mit sich drehendem Stern:
Standbild Animation
Bild-Grösse Gif Jpg Flash (swf) Flash (swf)
200 x 200 Pixel 1. 729 Byte 3. 830 Byte 138 Byte 410 Byte
600 x 600 Pixel 5. 466 Byte 15. 780 Byte 138 Byte 410 Byte
Abbildung 33: Dateigrößen der swf-Dateien in Abbildung 32 im Vergleich zu gif und jpg
Beachten Sie, dass dieselbe swf-Datei für 200x200 und für 600x600 Pixel verwendet wurde!
Die swf-Datei ist ohne Mehrdaten skalierbar.
Abbildung 34 veranschaulicht die Möglichkeit der Skalierung ohne Qualitätsverlust. Sie zeigt
ein Flash-Movie im Vergleich zu einem gif. Beide Bilder wurden von 200x200 auf 600x600, also
auf die 3-fache Höhe und Breite, bzw. 9-fache Fläche skaliert:
Abbildung 34: Stern, skaliert
Alternative SVG
SVG („scalable vector graphics“), ein XML-basiertes, vom w3c entwickeltes und empfohlenes
Format, ist ebenfalls – wie der Name sagt – skalierbar.
Das SVG-Plugin, das zur Darstellung notwendig ist, ist jedoch wenig verbreitet. SVG hatte
eine Zeit lang die Unterstützung von Adobe, um es als Konkurrenz zu Flash zu etablieren. Seit
Adobe Flash aufgekauft hat ist das hinfällig.
9
Auf Englisch manchmal als „swiff“ ausgesprochen
66
5.3.2 Animation
Mit Flash lassen sich einfache Filme erstellen und sehr datensparend abspeichern. Neben der
klassischen „Bild für Bild“-Animation gibt es in Flash zwei Arten der Unterstützung für die
Erstellung einer Animation: den Bewegungstween und den Formtween.
Alternative animiertes Gif

Im Falle der „Bild für Bild“-Animation“ gibt es eine Alternative zu Flash: das animierte Gif.
Abbildung 35 zeigt die einzelnen Bilder eines solchen animierten Gifs, so wie sie im Programm
„Animation Shop“ dargestellt werden.
10
Abbildung 35: (historisches ) Beispiel für eine „Bild-für-Bild“-Animation
Um aus einzelnen Bildern ein animiertes Gif zusammen zu stellen, können Sie verschiedene
Grafikprogramme verwenden, u. a. Animation Shop, Adobe Fireworks. Das Ergebnis ist jeweils
eine einzige Gif-Datei.
Animierte gifs werden von einem größeren Teil der Browser im Internet korrekt dargestellt als
Flash-Animationen. Aber: Sie haben meist eine größere Dateigröße. Bei der Entscheidung
zwischen Animiertem gif und Flash müssen Sie diese beiden Argumente gegeneinander abwä-
gen.
5.3.3 Interaktion
Das Web ist an und für sich schon eine interaktive Technologie: die NutzerIn ist eben nicht
nur LeserIn der Seite, sie kann Links anklicken (oder auf eine andere Art aktivieren) um zu
navigieren, sie kann Formulare ausfüllen und einsenden. Links sind von Anfang an, Webformu-
lare seit HTML Version 2.0 (1995) Teil des HTML-Standards.
10
Im Jahre 1995 stellte die Firma Netscape zwei Technologien für Animation vor: Server Push
und Client Pull. Die hier gezeigte Animation war das erste Beispiel. Beide Technologien wer-
den übrigens von aktuellen Browser-Versionen nicht mehr unterstützt, sie wurden von ani-
mierten gifs verdrängt.
67
WWW und Multimedia: Flash oder nicht Flash?
Als „interaktive Webseite“ bezeichnen wir im Folgenden

also Webseiten, die mehr Interaktionsmöglichkeiten als
Links und Formulare anbieten. Dazu gehören insbesonde-
re alle Interaktionen die zwischen BenutzerIn und Brow-
ser erfolgen, ohne dass – wie beim Aktivieren eines Links
oder beim Einsenden eines Formulars - eine Netzwerkver-
bindung zum Webserver benutzt wird.
Abbildung 36: Rollover-Bild als Beispiel für
einfache Interaktion
Ein einfaches Beispiel ist ein „Rollover-Bild“, das sich
verändert, wenn die NutzerIn die Maus über das Bild be-
wegt.
Barrierefreiheit = Accessability
Eine negative Eigenschaft von interaktiven Webseiten kann die verminderte Barrierefreiheit
(Accessability) sein: Diese fortgeschrittene Interaktion ist nur mit grafischen Webbrowsern
möglich, nicht aber mit textbasierten, solchen mit besonders kleinem Display, solchen die die
Seite nicht grafisch sondern auditiv darstellen (vorlesen) oder als Braille-Schrift ausgeben.
Interaktion bedeutet also für viele UserInnen eine interessantere Website, und für einige Use-
rInnen eine nicht mehr lesbare, nicht mehr zugängliche Website.
Alternative Javascript
Interaktive Webseiten können Sie auch mit CSS und Javascript gestalten.
Flash hat im Vergleich zu Javascript weniger Kompatibilitäts-Probleme: es gibt nur ein Flash-
Plugin, es wird von der Firma Adobe herausgegeben und funktioniert in allen Browsern, auf
den Plattformen Windows, Mac OS und Linux gleich. Alte Flash-Filme funktionieren bei der
Betrachtung mit einem neuen Flash-Plugin immer.
Die Entscheidung zwischen Javascript und Flash für eine interaktive Website ist also eine Ent-
scheidung zwischen proprietärer Technologie und Stabilität auf der einen Seite, und einer
standardisierten, aber potentiell instabileren Technologie auf der anderen Seite.
68
5.3.4 Multimedia: Audio und Video
In einem Flash-Movie können Audio- und Video-

Daten entweder eingebettet werden, oder als ex-
terne Datei mittels Streaming abgespielt werden.
Flash bietet mit der FLVPlayback-Komponente

eine einfache Art einen ‚Standard-Player’ zu er-
stellen, aber auch alle Möglichkeiten, die Oberflä-
che und die Interaktion zu gestalten.
Abbildung 37: FLVPlayback Komponente
Alternativen für Multimedia im Web

Es gibt verschiedene Methoden Audio und Video in Webseiten einzubinden.
Mit einem einfachen Link zu einer Audio- oder Video-Datei kann diese Datei zum Download
und zum Abspielen angeboten werden. Das funktioniert meist sehr gut, es gibt dabei kaum
etwas zu gestalten.
Mit den HTML-Tags <EMBED> oder <OBJECT>, können Dateien jedes Formats direkt in ein
HTML-Dokument eingebunden werden. Die Darstellung übernimmt dann ein Browser-Plugin.
Da auf den verschiedenen Computern im Web verschiedene Plugins installiert sind, ist es
nicht möglich vorherzusagen wie die Darstellung genau erfolgen wird. Diese Methode ist also
fehleranfälliger (bei fehlendem Plugin) und bietet trotzdem kaum mehr Gestaltungs-
möglichkeiten als ein Link.
Mit dem Format SMIL, das vor allem von Real Player unterstützt wird, können Audio- und Vi-
deo-Dateien (synchronisiert) abgespielt werden. Direkt in einer Webseite kann SMIL aber
nicht dargestellt werden.
5.3.5 Überlegter Einsatz von Flash
Die bisher angeführten Fähigkeiten von Flash sollten Sie nicht falsch verstehen. Flash ist für
gewisse Aufgabenstellungen sehr gut oder am Besten von allen aktuellen Technologien ge-
eignet. Das heißt nicht, dass Flash für jede Aufgabenstellung geeignet ist.
Sie müssen bei jedem Projekt einzeln entscheiden (und argumentieren können), ob ein Ein-
satz von Flash sinnvoll oder störend wäre.
69
WWW und Multimedia: Zeichnen in Flash
Bedenklich ist der Einsatz von Flash insbesondere bei Informationsseiten und bei Seiten mit
hohem Anspruch an Barrierefreiheit. Alle Flash-Seiten haben das Problem, dass Sie in Such-
maschinen nicht gefunden bzw. nicht einzelne Seiten annavigiert werden können.
Argumente für den Einsatz von Flash sind die oben angeführten Fähigkeiten.
In manchen Fällen mag es sinnvoll sein, eine Flash-Version und eine Flash-lose Version einer
Website zu entwickeln. Aber Achtung: dieser Ansatz bedeutet die doppelte Arbeit in der Ent-
wicklung, und wieder doppelte Arbeit in der Wartung der Site. Es besteht die Gefahr, dass die
„zweite Version“ nie fertig entwickelt wird und/oder nicht gewartet wird. Das ist dann
schlimmer, als nur eine Version zu haben.
5.4 Zeichnen in Flash

Flash funktioniert weder wie ein klassisches bitmap-orientiertes Grafikprogramm, noch wie
ein klassisches vektor-orientiertes Grafikprogramm. Flash zu lernen, heißt also ein neues Zei-
chen-Modell zu lernen.
5.4.1 Überblick über die Flash-GUI

Ebenen und
Zeitleiste Diverse
Fenster
Werkzeuge
Bühne
Eigentschaften Hinterbühne
Abbildung 38: Die Teile der Flash GUI
Die Bühne ist Ihr erster Orientierungspunkt. Auf der Bühne zeichnen Sie. Anders als in ande-
ren Programmen können Sie in Flash auch „neben“ der Bühne zeichnen. Ein Beispiel für einen
sinnvollen Einsatz: ein Auto soll „durch das Bild fahren“. Sie zeichnen es also neben der Büh-
ne, und erstellen dann die Animation die das Auto durch die Bühne bewegt.
Wie in den meisten Grafik-Programmen finden Sie am linken Rand des Programms die Werk-
zeug-Leiste. Aber Achtung: Die Werkzeuge funktionieren etwas anders als in anderen Grafik-
programmen.
Im unteren Teil des Fensters können Sie die Eigenschaften des jeweils auf der Bühne mar-
kierten Objekts verändern. Das Eigenschafts-Fenster funktioniert also wie im Programm
70
Dreamweaver. Je nachdem welches Objekt markiert ist, sieht das Eigenschafts-Fenster auch
unterschiedlich aus.
Am rechten Rand des Programms können verschiedene Fenster eingeblendet werden. Über
das Menü „Fenster“ können Sie Fenster einblenden und ausblenden. Wenn Sie eine gute Zu-
sammenstellung von Fenstern gefunden haben, können Sie diese Zusammenstellung mit dem
Menüpunkt FENSTER Æ BEDIENFELDSATZ SPEICHERN unter einem Namen abspeichern.
Dieser Teil der GUI ist komplex. Zuerst werden Sie nur die Ebenen verwenden; sie funktionie-
ren ähnlich wie in anderen Grafik-Programmen. Die Zeitleiste verwenden Sie zur Erstellung
von Animationen und für verschiedene Zustände von interaktiven Applikationen.
Die Menüs von Flash entsprechen den üblichen Konventionen. Besonderes Augenmerk sollten
Sie dem Menü MODIFIZIEREN schenken. Im Zweifelsfall finden Sie hier alles was Sie brauchen
und nicht finden können.
5.4.2 Zeichnen mit Flash
Kommen wir nun zur Vorstellung des speziellen Zeichen-Modells von Flash. Für eine detaillier-
tere Beschreibung der verschiedenen Werkzeuge verwenden Sie bitte die Flash-Hilfe.
Füllung vs. Kontur

Wenn Sie in Flash einen Kreis zeichnen, besteht dieser aus einer Füllung und einer Kontur.
Diese beiden Elemente haben unterschiedliche Aufgaben. Sie müssen mit beiden gezielt ar-
beiten können. Abbildung 39 zeigt wie Flash es darstellt, wenn die Füllung markiert ist, bzw.
wenn die Kontur markiert ist.
Abbildung 39: Füllung markiert vs. Kontur markiert
Beim Erstellen des Kreises passen Füllung und Kontur ineinander. Im Verlauf der weiteren
Arbeit können Sie beide trennen. Dabei werden Sie bemerken, dass Flash sich nicht wie ande-
re vektororientierte Programme verhält: Wenn Sie die Füllung auf die Kontur legen, und dann
noch einmal verschieben, dann wird die Kontur „abgebissen“ wie Abbildung 40 zeigt.
71
Abbildung 40: Die Füllung hat einen Teil der Kontur gelöscht
Dieses Verhalten von Flash können Sie gezielt für die Gestaltung einsetzen. Wenn Sie dieses
Zeichnungsmodell nicht verwenden wollen, können Sie auf das Objektzeichnungsmodell um-
schalten. Dann werden beim Zeichnen z. B. eines Kreises die Füllung und die Kontur automa-
tisch gruppiert. Die dabei entstandene Gruppe erkennt man an der blauen Box, die angezeigt
wird, sobald die Gruppe selektiert wird. Von einer Gruppe wird nichts „abgebissen“, das in
Abbildung 40 gezeigte Phänomen tritt nicht auf.
Abbildung 41: der rechte Kreis wurde mit dem Objektzeichnungsmodell gezeichnet
Kontur bearbeiten
Mit dem Auswahlwerkzeug (Tastaturkürzel: V) können Sie die Kontur verformen wie in
Abbildung 42: Kontur verformen mit dem Auswahl-Werkzeug
72
Kontur glätten / begradigen

Wenn eine Kontur markiert ist, und das Auswahlwerkzeug ausgewählt ist, dann werden am
unteren Rand des Werkzeug-Fensters die Symbole für „glätten“ und „begradigen“ aktiv, mit
dem Sie die Kontur schrittweise verformen können.
Abbildung 43: Kontur glätten bzw. begradigen
Kontur vektorbasiert bearbeiten

Mit dem Unter-Auswahl-Werkzeug (Tastaturkürzel A) können Sie eine Kontur auch bearbeiten.
Dann verhält sich die Kontur wie in einem vektor-orientierten Programm; die Kontur ist durch
Ankerpunkte und Tangenten definiert, sie können die Ankerpunkte verschieben, und die Tan-
genten verändern wie in Abbildung 44 gezeigt.
Abbildung 44: Kontur mit Ankerpunkten und Tangenten bearbeiten
Die Unterscheidung zwischen Kontur und Füllung zieht sich durch die
gesamte Werkzeugleiste: Es gibt ein Werkzeug um eine Kontur zu
Zeichnen (das Freihandwerkzeug, Tastaturkürzel Y) und eines um
eine Füllung zu zeichnen (das Pinselwerkzeug, Tastaturkürzel B)
Mit dem Tintenfasswerkzeug (Tastaturkürzel S) können Sie um eine Füllung eine neue Kontur
legen. Mit dem Farbeimerwerkzeug (Tastaturkürzel K) können Sie in eine Kontur eine Füllung
einfüllen, wie in Abbildung 45 gezeigt.
Abbildung 45: Tintenfass- und Farbeimer-Werkzeug
73
Linien in Füllungen umrechnen

Es gibt auch eine Möglichkeit eine Kontur (insbesondere eine Kontur mit hoher Strichstärke) in
eine Füllung zu verwandeln: MODIFIZIEREN Æ FORM Æ LINIEN IN FÜLLUNGEN KONVERTIEREN. In
Abbildung 46 sehen Sie den Effekt dieser Umwandlung.
Abbildung 46: Kontur und Füllung (konvertiert), Verformung Beider
Diese Umwandlung hat auch zur Folge, dass andere Arten der Verformung möglich sind. In
Abbildung 46 sehen Sie auch den Effekt des Auswahlwerkzeuges auf die Kontur und die Fül-
lung, die aus der Kontur entstand. Einmal wird die Linie verbogen, einmal wird die Begren-
zung der Fläche verformt.
Hilfe
Abschließend noch einmal der Hinweis auf die Flash Hilfe, und auf die vielen Bücher, die die
Handhabung von Flash im Detail erklären. Aber es gilt natürlich: Wirklich erlernen können Sie
das Zeichnen mit Flash nur durch die praktische Arbeit mit dem Tool.
Eingabegeräte
Falls Sie ein Zeichenbrett - insbesondere ein druckempfindliches Zeichenbrett - besitzen,
können Sie dieses für die Arbeit mit Flash verwenden.
Was Sie auf jeden Fall verwenden können und sollten ist die Tastatur: Die
Verwendung der Tastaturkürzel zum Wechseln des Werkzeuges beschleunigt
die Arbeit mit Flash enorm, da Sie den Maus-Zeiger dadurch auf der Bühne
belassen, und schneller Zeichnen können. Links sehen Sie die Tastaturkürzel
aller Werkzeuge.
5.4.3 Flash-Symbole
Ein wichtiges Ziel beim Erstellen eines Flash-Films ist es, die swf-Datei so klein wie möglich
zu halten. Eine größere swf-Datei bedeutet längere Wartezeit für die BenutzerInnen.
Die Art mit der Sie bisher gezeichnet haben erzeugt „Originale“, und Originale tragen erheb-
lich zur Dateigröße der swf-Datei bei. Abbildung 47 zeigt ein Beispiel für einen Flash-Film der
18 sehr ähnliche Originale enthält.
74
Abbildung 47: Beispiel für einen Film mit wiederholten Elementen
Die swf-Datei dieses Beispiels ist 1.148 Bytes groß. (Mit einem Stern war sie übrigens 108
Bytes groß).
Symbole
Flash bietet eine Alternative an, die Platz spart: Der Stern wird in ein „Symbol“ verwandelt.
Dieses Symbol kann nun wiederholt im Film verwendet werden, braucht aber wesentlich we-
niger Speicherplatz. In diesem Beispiel: 347 Byte statt 1.148 Byte. Wird ein Symbol öfter wie-
der verwendet, verstärkt sich der Effekt, Abbildung 48 zeigt die Mess-Ergebnisse für 18 und
54 Wiederholungen eines Originals bzw. eines Symbols.
1 Stern 18 Sterne 54 Sterne
Mit Formen 108 Byte 1.148 Byte 3.440 Byte
Mit Symbolen 133 Byte 347 Byte 654 Byte

11
Abbildung 48: Größe von swf-Dateien im Vergleich bei Verwendung von Formen oder Symbolen
Erzeugen eines Symbols

Um ein Original in ein Symbol zu verwandeln verwenden Sie den Menüpunkt MODIFIZIEREN Æ
IN SYMBOL KONVERTIEREN oder die Taste F8. Sie müssen dem Symbol einen Namen geben.
Flash unterscheidet drei Arten von Symbolen: MovieClip, Schaltfläche und Grafik. In einem
späteren Kapitel werden Sie die spezielle Verwendung von Schaltflächen und MovieClips ken-
nenlernen, Grafik-Symbole sind für die reine Wiederverwertung von Formen gedacht.
Abbildung 49 zeigt das entsprechende Fenster.
Abbildung 49: Dialog „in Symbol konvertieren“
11
Konkret: bei Verwendung von MovieClip-Symbolen
75
Bei der Arbeit in Flash können Sie Originale und Symbole einfach unterscheiden: Wenn Sie ein
Original selektieren wird es „gepunktet“ dargestellt. Wenn Sie ein Symbol auswählen, er-
scheint ein Kasten rund um das Symbol. und der „Registrierungs-Punkt“ des Symbols wird als
keines Plus angezeigt (meist mit einem Kreis darum, dem „Transformation-Punkt“). Siehe
Abbildung 50.
Abbildung 50: Original und Instanz eines Symbol, beide ausgewählt
Instanzen
Von einem Symbol kann es mehrere Kopien auf der Bühne geben, diese nennt man dann In-
stanzen des Symbols. Die Instanzen können sich vom Symbol unterscheiden: sie können eine
andere Größe haben, sie können gedreht und/oder gespiegelt sein, sie können umgefärbt
bzw. transparent bzw. heller oder dunkler sein.
Verwenden Sie zum Verändern einer Instanz das Werkzeug „Frei transformieren“ (Tasta-
turkürzel Q) und das Eigenschafts-Fenster.
Instanznamen
Die einzelnen Instanzen können einen Namen erhalten. Dies geschieht im Eigenschafts-
Fenster, wie links in Abbildung 51 gezeigt. Rechts in der Abbildung 51 sehen Sie einen Aus-
schnitt aus dem Fenster FILM-EXPLORER. Hier sieht man, dass sich auf der Bühne vier Instan-
zen der Symbols Smilie befinden, die vier Instanzen haben verschiedene Namen: maria_mc,
hansi_mc, peter_mc und susi_mc.
Abbildung 51: Symbolnamen und Instanznamen in den Eigenschaften und im Film-Explorer
76
5.4.4 Die Bibliothek
Alle Symbole, die in einem Flash-Film enthalten sind, finden Sie in der Bibliothek. Die Biblio-
thek ist ein Fenster, das Sie mit dem Tastaturkürzel STRG-L oder mit F11 anzeigen können.
Options-Menü
der Bibliothek
Abbildung 52: Das Bibliotheks-Fenster
Im Bibliotheks-Fenster sollten Sie mindestens: Ein Symbol umbenennen können, die Eigen-
schaften eines Symbols ändern können, und (mit dem Optionsmenü) herausfinden können,
welche Symbole gar nicht im Film verwendet werden.
Symbol bearbeiten
Mit einem Doppelklick auf ein Symbol in der Bibliothek können Sie das Symbol bearbeiten.
Achtung: Das ist nicht das Gleiche wie eine Instanz auf der Bühne zu bearbeiten. Ob Sie gera-
de die Instanzen auf der Bühne bearbeiten oder ein bestimmtes Symbol bearbeiten, erkennen
Sie an der Bearbeitungsleiste oberhalb der Ebenen:
Abbildung 53: Bearbeiten des Dokuments vs. Bearbeiten des Symbols „Stern“
Das linke Bild in Abbildung 53 zeigt die Bearbeitung der Haupt-Zeitleiste. Das rechte Bild
zeigt die Bearbeitung des Symbols „Stern“ aus der Bibliothek. Mit derselben Bearbeitungs-
leiste können Sie auch zurück zum Bearbeiten des Dokuments wechseln, entweder mit dem
„Zurück“-Pfeil oder indem Sie auf „Szene 1“ klicken.
Wenn Sie das Symbol verändern, verändern Sie damit auch alle Instanzen des Symbols wie
Abbildung 54 zeigt: werden dem „SmilieMC“ in der Bibliothek Haare gezeichnet, dann wach-
sen allen „SmilieMC“-Instanzen auf der Bühne auch Haare.
77
Abbildung 54: Eine Veränderung des Symbols verändert alle Instanzen
5.4.5 Austausch von Daten
Die Bibliothek können Sie auch zum Austausch von Daten zwischen verschiedenen fla-Dateien
verwenden: Sie können zwei fla -Dateien im Flash-Editor öffnen und zwischen den beiden
Bibliotheken wechseln wie in Abbildung 55 gezeigt.
Bibliothek aus-
wählen
Bibliothek vonplayers.fla
Abbildung 55: Arbeiten mit einer fremden Bibliothek
Nun können Sie aus der „fremden“ Bibliothek ein Symbol auf die Bühne ziehen. Es wird dabei
automatisch in die Bibliothek Ihrer fla-Datei übernommen.
Eine Besonderheit tritt auf, wenn das Symbol aus der anderen Bibliothek den gleichen Namen
hat wie ein Symbol der eigenen Bibliothek. Es kann jeden Namen in der Bibliothek nur einmal
geben. Flash zeigt den in Abbildung 56 gezeigten Dialog an, um dieses Dilemma zu lösen.
Abbildung 56: Dialog zum Bibliothekskonflikt – Symbol mit gleichem Namen wird eingefügt
Wenn Sie das vorhandene Element ersetzten, bedeutet das, dass alle Instanzen des Symbols
ersetzt werden. Wenn Sie es nicht ersetzen wird das Symbol aus der anderen Bibliothek nicht
eingefügt.
78
Wenn Sie also an einem größeren Projekt - vielleicht mit mehreren Personen - arbeiten, dann
sollten Sie bereits zu Beginn die Namen der wichtigen Symbole festlegen. Dieser Vereinbarung
über die Symbol-Namen und die Symbol-Hierarchie kommt die gleiche Bedeutung zu wie der
Vereinbarung über Dateinamen und Ordner in einem HTML-Projekt.
5.5 Animation in Flash

Die Zeitleiste und die verschiedenen Animationsarten die hier für Flash dargestellt werden
finden Sie auch in anderen Schnitt- und Animations-Programmen wie Aftereffects, Maya, Fi-
nalCut ähnlich wieder.
Flash unterteilt die Zeit in einzelne Bilder (auf Englisch: Frames). Für den gesamten Flash-
Film wird einmal die Bildrate (Bilder pro Sekunde / Frames per second) festgelegt, der Stan-
dardwert ist 12 Bps. In einem Flash-Film mit 12 Bps gibt es keine weitere Unterteilung der
Zeit, es kann also in diesem Film keine Animation geben, bei der 25 verschiedene Bilder in
einer Sekunde angezeigt werden.
5.5.1 Die Zeitleiste
Die Zeitleiste ist das Werkzeug mit dem Sie Animationen erstellen.
Abbildung 57: Zeitleiste ohne Zeit und mit Zeit
In Abbildung 57 sehen Sie in der linken Hälfte den Zustand der Zeitleiste in einem neuen
Flash-Dokument, die Zeitleiste enthält nur ein Bild. In der rechten Hälfte sehen Sie die Zeit-
leiste einer kleinen Animation.
Abspielkopf
Am oberen Rand der Zeitleiste sind die Bilder numeriert, hier von 1 bis 10. Ein roter senk-
rechter Strich repräsentiert den Abspielkopf, der von links nach rechts von Bild zu Bild läuft.
Sie können den Abspielkopf durch einen Klick auf ein bestimmtes Bild setzen, die Bühne zeigt
dann den Zustand zu diesem Zeitpunkt, in diesem Bild an.
Schlüsselbild
In der Zeitleiste müssen Sie zwei Arten von Bildern unterscheiden: ein Schlüsselbild (markiert
durch einen Kreis) kann eine Veränderung enthalten, ein normales Bild (ohne Kreis) bringt
79
WWW und Multimedia: Animation in Flash
keine Veränderung gegenüber dem vorhergehenden Bild. Wie Sie in Abbildung 57 auch sehen
können, kann jede Ebene eine andere Folge von Bildern und Schlüsselbildern enthalten.
Voraussetzung für die Arbeit mit der Zeitleiste ist, dass Sie die Bedeutung der Anzeige in der
Zeitleiste lesen können.
Abbildung 58: Beispiele für Schlüsselbilder, leere Schlüsselbilder und normale Bilder
Das erste Bild in Abbildung 58 ist grau und enthält einen schwarzen Kreis. So wird ein Schlüs-
selbild mit Inhalt dargestellt. Bild 2 ist weiß und enthält einen weißen Kreis, es ist ein leeres
Schlüsselbild. Das heißt: der Inhalt, der in Bild 1 dargestellt wurde, verschwindet hier. Bild 3
ist ein leeres, normales Bild, es gibt also keine Veränderung zu Bild 2 (nix bleibt nix). Bild 4
ist ebenfalls ein leeres, normales Bild, da es aber das letzte normale Bild vor einem Schlüs-
selbild ist, wird hier ein weißes Rechteck dargestellt (angezeigt wird immer noch nix).
Bild 5 ist wieder ein Schlüsselbild mit Inhalt, hier wird also ein neuer Inhalt dargestellt. Bild 6
ist ein normales Bild, der Inhalt von Bild 5 wird also weiter angezeigt. Bild 7 ist ein leeres
Schlüsselbild, der Inhalt verschwindet also. Danach gibt es keine Veränderung mehr bis zum
Ende des Films bei Bild 10.
Wenn Sie nun wissen wollen, welche Inhalte jeweils dargestellt werden, müssen Sie den Ab-
spielkopf entsprechend setzen, und eventuell noch Ebenen ein- und ausblenden um herauszu-
finden, welche Elemente sich auf welcher Ebene befinden.
Abbildung 59: Das Ende der Zeit – in zwei Ebenen der Zeitleiste
Am „Ende der Zeit“ verschwinden alle Elemente auf Ebenen, die keine Bilder mehr enthalten.
In Abbildung 59 ist im Bild Nr. 20 also der Inhalt von Ebene 1 und Ebene 2 schon verschwun-
den, nur Ebene 3 ist noch sichtbar.
Mit der Zeitleiste können Sie auf verschiedene Arten arbeiten:
80
− Rechte Maustaste Æ KONTEXTMENÜ
− Menü EINFÜGEN Æ ZEITLEISTE Æ (SCHLÜSSEL)BILD
− Taste [F5] fügt ein Bild ein
− Taste [F6] fügt ein neues Schlüsselbild ein
− Taste [F7] fügt ein leeres Schlüsselbild ein
− Mit der Maus
Zeitleiste und Geschwindigkeit

Das Bearbeiten der Zeitleiste verändert den Film:
− Bild einfügen = Zeit einfügen = Langsamer machen
− Bild löschen = Zeit löschen = Schneller machen
− Schlüsselbild einfügen = Bild kann sich ändern
− Schlüsselbild löschen = Keine Änderung mehr
Die Zeitleiste ist die Grundlage für die verschiedenen Arten der Animation in Flash.
5.5.2 Bild-für-Bild Animation
Abbildung 60: Zeitleiste einer Bild-für-Bild Animation
Die Bild-für-Bild Animation entspricht im Arbeitsaufwand und in den Möglichkeiten dem Dau-
menkino: Sie zeichnen jedes Bild einzeln.
Unterstützung beim Zeichnen bietet die Darstellung mit Zwiebelschalen. Dabei werden wie in
Abbildung 61 gezeigt die Bilder vor und nach dem aktuellen Bild auch dargestellt, aber etwas
abgeschwächt.
Aktivieren der
Darstellung
Abbildung 61: Erstellung einer Bild-für-Bild Animation mit Hilfe der Zwiebelschalen-Darstellung
81
Die Einzelbilder für die Bild-für-Bild Animation können z.B. aus einem Video entnommen sein,
wie im Projekt „Bujaka“ von Herrmann, Hohnheiser und Scherr (MMA2005), das im Abbildung
62 gezeigt.
Abbildung 62: Bild-für-Bild Animation aus Einzelbildern eines Videos
Im klassischen Trickfilm gab es eine Arbeitsteilung: Der Chef zeichnet einige wichtige Key-
frames. Die Hilfszeichner zeichnen die Bilder dazwischen (auf Englisch: „in between“). Diese
Leute nannte man „Inbetweener“. Diesen Job übernimmt jetzt Flash für Sie. Die automatisch
erstellen Bilder nennt man immer noch „Tween“.
5.5.3 Bewegungstween
Der Bewegungstween dient nicht nur der Bewegung, er kann auch für die Veränderung von
Größe, Drehung, Verzerrung, Alpha (Grad der Transparenz), Farbton eines Symbols eingesetzt
werden.
Abbildung 63 zeigt einen Bewegungstween, der wirklich für Bewegung eingesetzt wird. Auf
der Abbildung sind die drei Positionen des Symbols gleichzeitig angezeigt: ganz links für
Bild 1, das erste Schlüsselbild. Ganz rechts für Bild 15, das zweite Schlüsselbild. Die Position
bei Bild 8 wird durch den Tween automatisch berechnet.
Abbildung 63:Bewegungstween
Zur Erstellung eines Bewegungstweens brauchen Sie eine Ebene die nur ein Symbol enthält,
mit zwei Schlüsselbildern. Zwischen diesen beiden Schlüsselbildern kann dann auf zwei Arten
82
ein Tween erstellt werden, wie in Abbildung 64: Entweder durch Rechts-Klick in die Zeitleiste
oder im Eigenschaften-Fenster.
Abbildung 64: Erstellung eines Tweens
Ob die Erstellung des Tweens gelungen ist, können Sie an der Zeitleiste und im Eigenschafts-
fenster erkennen, wie in Abbildung 65 gezeigt.
Abbildung 65: Darstellung von korrektem und defektem Tween
Gründe, warum die Erstellung des Tweens fehlschlagen könnte, sind:
- mehr als ein Symbol auf der Ebene
- kein Symbol, sondern ein Original auf der Ebene
- kein Schlüsselbild am Ende des Tweens
Wenn Sie diese Fehler korrigieren, wird der Tween funktionieren.
Wie anfangs erwähnt kann der Bewegungstween auch für die Veränderung von Alpha (Grad
der Transparenz), Farbton, Größe, Drehung und Verzerrung eines Symbols eingesetzt werden,
wie in Abbildung 66.
83
Abbildung 66: Bewegungstween mit veränderter Helligkeit und Skalierung
Perspektive
Da in Abbildung 66 das Symbol dunkler wird, an Größe zunimmt, und sich im Sichtfeld nach
unten bewegt, entsteht der Eindruck einer perspektivischen Bewegung, der rote Kreis scheint
näher zu kommen. Da Flash nicht wirklich dreidimensional modelliert, muß man die Tricks der
Darstellung von 3d in 2d anwenden.
Kamera
Dazu gehört auch der Einsatz von verschiedenen „Kameraperspektiven“. Wird ein Hinter-
grundbild vergrößert, entsteht der Eindruck eines Zooms. Wird ein Hintergrundbild bewegt,
entsteht der Eindruck einer Kamerafahrt. Sie müssen also die Wirkung einer Kamera nachbau-
en, es gibt in Flash kein Kamera-Objekt.
5.5.4 Komplexe Bewegungen
Wenn Sie eine Folge von Schlüsselbildern erstellen, und dazwischen jeweils Bewegungs-
tweens, dann erhalten Sie eine flüssige Bewegung entlang gerader Strecken, wie in der linken
Hälfte von Abbildung 67 gezeigt. Wenn die Bewegung nicht entlang gerader Strecken, sondern
entlang einer Kurve erfolgen soll benützt man einen Pfad, wie in der rechten Hälfte von
Abbildung 67: Bewegungstween mit mehreren Schlüsselbilder, Bew.Tween entlang eines Pfades
84
Für eine Pfadanimation müssen Sie oberhalb der Ebene mit dem Ball eine „Pfadebene“ anle-
gen (rechte Maustaste). Die Pfadebene darf nur eine Kontur enthalten, keine Füllung und
kein Symbol, diese Kontur ist dann der Pfad. Das Symbol im Start-Schlüsselbild und End-
Schlüsselbild müssen mit dem Pfad verbunden werden, wie in Abbildung 68 gezeigt.
Abbildung 68: Das Symbol wird am Pfad angebracht
Das Symbol mit der Maus an seinem Registrierungspunkt nehmen, und zum Pfad ziehen. Der
Registrierungspunkt springt automatisch auf den Pfad, man kann dann das Symbol nur noch
entlang des Pfades bewegen.
Drehung
Mit einem Bewegungstween können Sie ein Symbol auch drehen. Verwenden sie das Werkzeug
„frei transformieren“ um den „Transformationspunkt“ (ein kleiner Kreis) zu positionieren. Er
befindet sich über dem Registrierungspunkt des Symbols, wenn er noch nicht verschoben
wurde. In Abbildung 69 wurde der Transformierungspunkt außerhalb des Symbols positioniert.
Im Eigenschaftsfenster können Sie die Drehung genau spezifizieren, falls die automatische
Einstellung nicht funktioniert.
Abbildung 69: Werkzeuge, Bühne, Eigenschaften eines Bewegungstween mit Drehung
Geschwindigkeit
Die Geschwindigkeit der Bewegung können Sie durch Setzen von Zwischen-Schlüsselbildern
steuern. Die Geschwindigkeit ergibt sich als Verhältnis zwischen zurückgelegtem Pfadab-
schnitt und verflossener Zeit.
85
Abbildung 70: Zwischen-Schlüsselbider zur Steuerung der Geschwindigkeit in einem Bewegungstween
Die Animationsmöglichkeiten in Flash — verglichen Maya oder Aftereffects — sind sehr einge-
schränkt, aber im Vergleich zu animierten Gifs ein großer Fortschritt.
86
6.Termin: Parameter + MovieClips

Am sechsten Termin der Lehrveranstaltung werden die ersten Übungsaufgaben zu Flash bzw.
PHP besprochen. Der Datenaustausch zwischen Web-Formular und PHP-Programm mit den
Methoden GET und POST wird vorgestellt. Fash-Movies werden mittels MovieClips komplexer
gestaltet, erste Actionscript-Befehle werden vorgestellt.

• Wie die URL eines GET-Requests mit Parametern aufgebaut ist. Wie Sie zu einem
Web-Formular die URL ‚mit der Hand’ erstellen und so zum Beispiel eine bestimmte
Google-Suche ‚linkbar machen’.
• Dass die URL eines PHP-Programms eine öffentliche Schnittstelle ist: fremde Men-
schen werden mit böse Absicht verschiedene Parameter ausprobieren! Fremde Men-
schen werden in guter Absicht unerwartete Parameter eingeben um neue, nicht be-
dachte Funktionen zu erzielen.
• Dass Actionscript die Syntax von Javascript verwendet, aber zusätzlich Klassen und In-
terfaces (ab AS3) anbietet. Dass die verschiedenen Versionen von Actionscript sehr
unterschiedlich sind, und sich „alter“ und „moderner“ Code nicht kombinieren läßt.

• Mit Firebug und Web Developers Toolbar ein Webformular analysieren, die URL des
Request ‚mit der Hand’ zusammen bauen.
87
Gruppe Flash

• Wozu die verschiedenen Symbol-Typen (Grafik, MovieClip, Schlatfläche=Button) be-
nutzt werden
• Dass ein MovieClip eine eigene Zeitleiste hat, die im selben Takt wie die Hauptzeitlei-
ste läuft, aber von dieser unabhängig ist.
• Dass Sie den Actionscript-Code in Flash an Bildern und Button- und MovieClip-
Instanzen befestigen könne (aber nicht unbedingt sollen).

• MovieClips ineinander Schachteln um damit die gewünschte Animation zu erreichen.
• Buttons erstellen mit denen Sie bestimmte MovieClips anhalten und starten können.
Gruppe PHP

• Dass die Parameter über die superglobalen Arrays $_GET, $_POST (und $_REQUEST) im
PHP-Programm zur Verfügung stehen.

• Ein Web-Formular in HTML erstellen.
• In einem PHP-Programm Daten von einem Web-Formular entgegen nehmen und prü-
fen bevor sie weiter verarbeitet werden.
• Ein Webformular so gestalten, dass „richtige“ Eingaben erhalten bleiben wenn Feh-
lermeldungen angezeigt werden
• Mit PHP CSS, XML, Bilder und Variablen für Flash erzeugen
88
6.2 MovieClips und Buttons

MovieClips und Buttons sind zwei Arten von Symbolen – bisher haben wir ja nur
Grafik-Symbole verwendet.
6.2.1 MovieClips
Abbildung 71: Ein MovieClip in der Bibliothek
Ein MovieClip ist ein Symbol mit einer eigenen Zeitleiste, also ein kleiner „Film-im-Film“. In
der Bibliothek wird neben dem Vorschaubild des MovieClips ein Play-Button dargestellt, mit
dem man diesen Film ablaufen lassen kann.
Es ist üblich 12 den MovieClips in der Bibliothek einen Namen zu geben, der auf MC endet, im
Beispiel in Abbildung 71 sind das AlgeMC, FischMC und OktopusMC.
Sie können ein Grafiksymbol im nachhinein in ein MovieClip umwandeln, mittels eines Rechts-
Klicks auf die Zeile des Symbols in der Bibliothek.
Das betrifft aber nur neue Instanzen, die sie erstellen. Alle Instanzen die sich schon auf der
Bühne befinden müssen Sie händisch auf MovieClip umstellen (im Eigenschafts-Fenster)
Die Wirkung der Hauptzeitleiste und der Zeitleiste im MovieClips kann man kombinieren. Dies
sei am Beispiel eines Fisches erläutert, der von links nach rechts schwimmt, und dabei mit
den Flossen schlägt. Die „grobe“ Bewegung findet auf der Hauptzeitleiste statt, wie in
Abbildung 72 gezeigt: Im Zeitraum von 60 Bildern bewegt sich der Fisch 500 Pixel weit.
89
WWW und Multimedia: MovieClips und Buttons
Abbildung 72: Bewegung der MovieClip Instanz auf der Hauptbühne (Hauptzeitleiste)
Die Bewegung der Flossen findet in der Zeitleiste des MovieClips statt, wie in Abbildung 73
gezeigt. Diese Zeitleiste enthält 12 Bilder.
Abbildung 73: Zeitleiste im MovieClip
Während des 60 Bilder langen Tweens auf der Hauptzeitleiste werden die 12 Bilder des Mo-
vieClips 60 / 12 = fünf mal wiederholt. Abbildung 74 versucht das darzustellen.
Abbildung 74: Hauptzeitleiste und Zeitleiste des MovieClips symbolisch überlagert
Da in diesem Fall die Rechnung genau aufgeht (5 mal 12 = 60) sieht die Bewegung bei jedem
Durchlauf genau gleich aus. Geht die Rechnung nicht auf (z.B. 11 Frames im MovieClip), dann
sieht die Bewegung erst nach vielen Durchläufen wieder gleich aus.
Einsatz von MovieClips

MovieClips sind die wichtigste Strukturierungs-Einheit von Flash. Wenn man die MovieClips
richtig wählt, kann man sie vielseitig einsetzen. Damit sind Änderungen im Konzept auch nach
Beginn der Umsetzung noch möglich. Wenn man sie ungeschickt wählt ist man unflexibel.
Ein paar Tipps zur Auswahl von MovieClips:
12
Um genau zu sein: es ist üblich eine Namens-Konvention zu verwenden. Wie die Konvention
aussieht ist von Team zu Team verschieden. Wichtig ist, daß alle Leute in einem Projekt sich
daran halten.
90
− Was sich über die Bühne bewegt, ist ein MovieClip (nicht zwei oder drei)
− Bewegung eines Objekts unabhängig machen von Veränderung eines Objekts: die „in-
nere“ Zeitleiste des MovieClips wird für innere Bewegungen verwendet wie blinzeln,
mit den Flossen schlagen, Beine bewegen. Die „äussere“ Zeitleiste wird für die Bewe-
gung quer über die Bühne verwendet.
Wie in Kapitel 5.4.5 beschreiben können Sie Symbole – also auch MovieClips – von einer .fla
Datei in eine andere Übernehmen. In einem Projekt könnte das so verwendet werden:
1. Es soll ein Spiel in Flash programmiert werden. Die Programmiererin und der De-
signer vereinbaren welche Spielfiguren es geben wird, welche MovieClips dafür
nötig sind, wie die genauen Namen in der Bibliothek lauten werden und wie groß
die MovieClips sein werden. z.B. MausMC (50x50px), KatzeMC (100x50px), KasMC
(10x10px).
2. Die Programmiererin erstellt das Spiel mit Dummies – sehr groben Versionen der
MovieClips.
3. Der Designer zeichnet die Figuren in Illustrator und exportiert sie für Flash. Dabei
vergibt er die richtigen Namen für die Bibliothek.
4. Die Programmiererinnen kopiert die fertigen MovieClips ins Spiel, dabei werden
die Dummies überschrieben.
6.2.2 Buttons
Bisher waren alle Ihre Flash-Werk nur „Filme“. Nach dem Start liefen sie jedes Mal
gleich von Anfang bis zum Ende ab. Mit Buttons können Sie ihren Film jetzt inter-
aktiv machen: die UserIn kann durch anklicken von Buttons den Ablauf des Filmes
beeinflussen – stoppen, starten, Alternativen auswählen.
Die korrekte Übersetzung des englischen Begriffes „Button“ wäre „Schaltfläche“. Dieser
Begriff entspricht zwar der DIN-Norm, ist aber nicht sehr gebräuchlich. Deswegen wird in
diesem Skriptum der gängigere Betriff „Button“ verwendet.
Ein Button in Flash braucht nicht so auszusehen wie ein Button der Betriebssystem-Oberfläche
(wie in Abbildung 75 gezeigt). Das Aussehen von Buttons in Flash ist völlig frei gestaltbar.
Abbildung 75: Standard-Buttons von Windows, Mac OS X, Gnome (Linux)
91
WWW und Multimedia: MovieClips und Buttons
Buttons in Flash
Ein Button ist eine Art Mini-MovieClip mit nur vier Frames mit den Namen Auf, Darüber,
Drücken und Aktiv. Der Frame Auf wird dargestellt, wenn die Maus sich nicht über dem
Button befindet. Ist die Maus über dem Button wird der Frame Darüber dargestellt. Wird
dabei der Maus-Button gedrückt wird Drücken dargestellt.
Abbildung 76:Aktiver Bereich eines Buttons gleich sichtbarer Bereich
Wenn man also die Maus über die Schatzkiste in Abbildung 76 bewegt, dann öffnet sie sich.
Größe
Die Größe des Buttons ist frei festlegbar. Sie können also einen kleinen 50 mal 20 Pixel But-
ton ebenso erstellen, wie einen Button der die gesamte Bühne überdeckt. Schwierigkeiten
macht das nur, wenn mehrere Buttons den gleichen Raum auf der Bühne beanspruchen. Es
kann immer nur ein Button „die Maus bemerken“, wie in Abbildung 77 gezeigt.
Abbildung 77: Drei Buttons mit Überlappung, nur eine ist jeweils aktiv
Im mittleren Bild ist die Maus an einer Position an der sich der runde und der quadratische
Button überlappen. Der quadratische Button ist weiter vorne, deswegen „bemerkt“ nur er
die Maus, und geht in den Darüber Zustand.
Aktiver Bereich
Der Frame Aktiv entscheidet darüber, in welchem Bereich der Button auf die Maus reagiert.
In Abbildung 76 ist dieser aktive Bereich gleich dem sichtbaren Button. Das muß aber nicht so
sein. In Abbildung 78 ist der aktive Bereich sehr klein: nur das Schloss der Schatzkiste. Hier
öffnet sich die Schatzkiste also nur, wenn man auf das Schloss klickt.
92
Abbildung 78: Aktiver Bereich eines Buttons, der sich vom sichtbaren Bereich unterscheidet
Wiederverwertung von Buttons

Auch beim Erstellen von Buttons sollten Sie an Wiederverwertung denken: Um eine Navigati-
onsleiste zu erstellen wie in Abbildung 79 gezeigt, brauchen Sie nur einen einzigen Button,
von dem mehrere Instanzen verwendet werden. Die Beschriftung ist nicht Teil des Buttons,
sondern wird mit separaten Textfeldern realisiert.
Abbildung 79: Wiederverwendung eines Buttons mit verschiedenen Beschriftungen
Abbildung 79 zeigt eine Mischung aus verschiedenen Ansichten des Flash Editors und des Flash
Players (So werden Sie das nie am Bildschirm sehen). In der linken Hälfte der Abbildung se-
hen Sie einen Ausschnitt aus dem Film Explorer (Tastenkürzel [ALT]-[F3]) des Flash Editors.
Hier sehen Sie einen Überblick über die Buttons und Textfelder des Flash-Films. In der rech-
ten Hälft der Abbildung sehen Sie einerseits den ganzen Film im Flash Player, und als kleinen
Ausschnitt darüber gelegt einen Teil der Bühne aus dem Flash-Editor.
Im Film-Explorer können Sie sehen, dass sich vier Instanzen des Buttons mit dem Namen
KnopfBtn auf der Bühne befinden, die Instanzen tragen die Namen a_btn, b_btn, c_btn
und d_btn. Ein blauer Pfeil in der Abbildung weist von a_btn zu der Darstellung von a_btn
auf der Bühne. Wie sie sehen können ist der Button rechteckig, und scheint einen gelben
Kreis und den Buchstaben A zu beinhalten.
93
WWW und Multimedia: Einstieg in Actionscript
Ebenfalls im Film-Explorer können Sie vier Textfelder erkennen. Ein blauer Pfeil verweist
vom Textfeld mit dem Buchstaben B auf die Darstellung dieses Textfeldes auf der Bühne.
Was für die UserIn also wie vier Schalter mit Beschriftung aussieht besteht aus viermal dem-
selben Button und vier verschiedenen Beschriftungen. Der Buchstabe A gehörte auch nicht
wirklich zu a_btn, sondern befindet sich auch in einem separaten Textfeld.
6.3 Einstieg in Actionscript

Actionscript ist die Programmiersprache von Flash. Actionscript hat eine lange Ge-
schichte hinter sich. Deshalb eine Warnung: oft findet man alte, umständliche, lan-
ge Skripts am Web, die für eine frühere Version von Flash programmiert wurden.
Hier sollte man also auf die Versions-Angabe achten.
Die akutellen Versionen sind „Actionscript 2“ (AS2) und

„Actionscript 3“ (AS3). AS3 bietet fortgeschrittenere
Programmiermöglichkeiten für fortgeschrittene Pro-
grammiererInnen. Wir bleiben bei der Version AS2, die
leichter zu erlernen ist.
Actionscript-Programme können Sie im Fenster AKTIONEN

(Tastatur-Kürzel F9) schreiben.
6.3.1 Entwicklungsumgebung
Für EinsteigerInnen die das direkte Eintippen des Codes scheuen gibt es Unterstützung durch
die Flash Umgebung: Verhaltensweisen, Werkzeugleiste für Aktionen, Automatische Code-
formatierung, Tooltipps. Diese Hilfsmittel werden hier in einem ersten Schritt vorgestellt.
Fenster VERHALTEN
Das Fenster VERHALTEN wurde in Anlehnung an Dreamweaver gestaltet. Abbildung 80 zeigt

dieses Fenster. Die gezeigte Situation wurde in drei Schritten erstellt:
1) Auf der Bühne wurde der Button mit dem Instanznamen weiter_btn ausgewählt. Im
VERHALTEN -Fenster wird das in der Kopfzeile angezeigt.
2) Mit dem Plus-Zeichen in der linken oberen Ecke des VERHALTEN-Fensters wurde die
Aktion ANSTEUERN UND ABSPIELEN BEI BILD eingefügt. Dadurch entstand die Zeile im
Fenster.
3) Mit einem Klick auf die linke Hälfte der Zeile wurde das Ereignis festgelegt, bei dem
die Aktion ausgeführt wird.
94
Fenster AKTIONEN
Als „Nebenwirkung“ der Arbeit im VERHALTEN-Fenster wurde im AKTIONEN-Fenster 5 Zeilen

Actionscript-Code eingefügt, wie in Abbildung 80 rechts gezeigt.
Abbildung 80: Fenster VERHALTEN erzeugt auch Actionscript, siehe Fenster AKTIONEN
Betrachten Sie die Abbildung 80 genau: Woran können Sie erkennen wo der Code positioniert
ist? Welches Ereignis den Code auslöst? Welcher Befehl ausgeführt wird?
Sie können ein Programm im VERHALTEN-Fenster erstellen, und dann im AKTIONEN-Fenster

weiter bearbeiten.
Werkzeugleiste und Skript-Navigator

Das Aktionen-Fenster besteht wie in Abbildung 81 gezeigt aus drei Teilen: Rechts wird der
Programmcode angezeigt. Links oben in der WERKZEUGLEISTE sind alle Actionscript-Befehle
verzeichnet, und können durch einen Klick in den Code eingefügt werden. Links unten befin-
det sich der SKRIPT-NAVIGATOR. Hier kann man sehen an welchen Stellen in der Flash-Datei
Actionscript eingefügt ist, und durch einen Klick diese Stelle im Code-Fenster anzeigen las-
sen.
95
Werk-
zeugleiste
Popup-
Menü
Optionen
Ansichts-
Code
Navigator
Skript-
weiter_btn
Abbildung 81: AKTIONEN-Fenster mit Werkzeugleiste und Skript-Navigation
Tooltipps
Wenn Sie Code direkt in das Code-Fenster eintippen erhalten Sie noch Unterstützung durch
Tooltipps, wie in Abbildung 82 gezeigt: Mit einem Dropdown-Menü bietet Flash Ergänzungen
zum Code an (unterer Teil der Abbildung), mit einem kleinern Popup Informationen zum aus-
gewählten Befehl (oberer Teil der Abbildung).
Abbildung 82: Tooltipps im AKTIONEN-Fenster
Actionscript außerhalb von Flash

Sie können Ihre Actionscript-Programme auch außerhalb von Flash erstellen. Mit dem #in-
clude Befehl können Sie ein Actionscript-Programm, das als eigene Datei gespeichert ist
herein laden.
Achtung: der #include Befehl ist ungewöhnlich: am Ende der Zeile darf kein Semikolon/
Strichpunkt stehen!
#include "mehrcode.as"
96
6.3.2 Hilfe
Das Flash-Fenster HILFE können Sie mit dem Tastenkürzel [F1] öffnen. Wenn der Cursor sich
im AKTIONEN-Fenster befand, wird in der Flash-Hilfe automatisch eine passende Seite zum
aktuellen Befehl angezeigt. In Abbildung 83 sehen Sie die Seite in der Flash-Hilfe zum Thema
on().
Versions-
Hinweise
Pseudo-Code.
Parameter
Links zu weite-
ren Seiten in
der Flash-Hilfe
Beispiele
Abbildung 83: Flash-Hilfe zum Befehl on()
Das Lesen der Flash-Hilfe braucht einige Übung. Es wird hier sehr viel Programmier-
Fachvokabular verwendet, dass man sich erst aneignen muß. Besonders gefährlich am An-
fang: Unter der Überschrift Verwendung findet man „Pseudo-Code“, das ist eine Mischung
aus echtem Computerprogramm und Teilen, die man erst ersetzen muß. Diesen Code kann
man also nicht direkt ins AKTIONEN-Fenster kopieren! Fertige, kopierbare Beispiele finden Sie
am Ende der Hilfe, unter der Überschrift Beispiel.
In der Abbildung 83 sieht dieser Pseudo-Code zum Beispiel so aus:
on(mausereignis) {
// Anweisungen hier
// einfügen
}
Das kursiv gestellte Wort mausereignis ist nicht wörtlich gemeint, hier muß man erst den
Namen eines Mausereignisses einfügen. Welche Mausereignisse es gibt ist unter der Über-
schrift Parameter nachzulesen, ein Mausereignis wäre zum Beispiel release.
97
Zeilen die mit zwei Schrägstrichen // beginnen sind Kommentare, kein Actionscript-Code. An
dieser Stelle muß man statt der Kommentar-Zeile einen oder mehrere Befehle einfügen. Ein
korrektes Actionscript-Programm mit dem on()-Befehl könnte also so aussehen:
on(release) {
play();
}
All diese Hilfsmittel erleichtern das Eintippen des Codes, ersetzen aber nicht das Verständnis!
Wenn Sie programmieren wollen, müssen Sie den Code verstehen – bis zum letzten Punkt und
Komma. Denn jeder Punkt und jedes Komma hat eine Bedeutung.
6.3.3 Wo ist der Code?
Die Frage „Wo ist der Code“ bezieht sich hier nicht auf das VERHALTEN- oder das AKTIONEN-
Fenster. Unabhängig davon auf welche Art Sie den Code erstellen: der Code ist immer ent-
weder einem bestimmten Bild einer Zeitleiste, oder einer bestimmten Instanz eines Symbols
(nur MovieClip oder Button) zugeordnet, wie in Abbildung 84 gezeigt.
Abbildung 84: Actionscript auf Bildern der Zeitleiste oder auf Instanzen auf der Bühne
Ist Actionscript-Code auf einem Bild der Zeitleiste gespeichert, dann wird dieses Faktum als
kleiner Buchstabe „a“ in der Zeitleiste dargestellt. Ob an einer (Button- oder MovieClip-)
Instanz auf der Bühne Actionscript-Code gespeichert ist kann man nicht auf den ersten Blick
erkennen.
In beiden Fällen gilt: Im Fenster AKTIONEN wird der

Actionscript-Code des jeweils ausgewählten Bildes
bzw. der jeweils ausgewählten Instanz angezeigt.
Der SKRIPT-NAVIGATOR im AKTIONEN-Fenster gibt

einen Überblick über den gesamten Code, eine
ähnliche Darstellung finden Sie auch im FILM-
EXPLORER.
Abbildung 85: Der Skriptnavigator In Abbildung 85 ist derzeit das erste Bild auf der
Ebene zwei ausgewählt, hier kann gerade Code
eingetippt werden. Insgesamt ist an zwei verschiedenen Stellen Code gespeichert: auf dem
13. Bild der Hauptzeitleiste in Ebene 2. Und auf dem Button mit dem Instanz-Namen wei-
ter_btn, der sich auf der Hauptzeitleiste befindet.
98
6.3.4 Fehlersuche
Auch für die tollsten Programmier-Profis gilt: die meiste Zeit verbringen sie mit der Fehler-
suche. Das Erfinden und Eintippen des Programmcodes geht sehr schnell, die Fehlersuche
hingegen braucht Zeit. Auch wenn man in einem Tag ein geniales Programm erschaffen hat
das ein wichtiges Problem löst und vielen Leuten Freude bereiten wird: Die meiste Zeit dieses
Tages hat man mit den Programmfehlern verbracht.
Deswegen braucht man fürs Programmieren eine hohe Frustrationstoleranz. Wenn das Pro-
gramm dann endlich funktioniert, von vielen Leuten verwendet wird, wunderbare Arbeit lei-
stet – dann bin ich als Programmiererin schon mit dem nächsten Projekt, und den nächsten
Fehlern beschäftigt.
Es gibt viele Strategien um Fehler zu vermeiden und schnell zu finden:
Kleine Schritte
Beim Schreiben von Programmen geht man in vielen kleinen Schritten vor: ein paar Zeilen
programmieren, das Programm testen, ein paar Zeilen programmieren, wieder testen. Durch
diese Vorgangsweise schafft man es oft fehlerfreie Programme zu schreiben. Und schleicht
sich doch ein Fehler ein, so findet man ihn schnell – er kann ja nur im letzten Schritt dazu
gekommen sein, man weiß also genau in welchen Programmzeilen er sich versteckt.
Fehlermeldung lesen
Wenn ein Fehler auftritt sollte man alle Informationen die Flash zur Verfügung stellt nutzen.
Abbildung 86 zeigt eine Fehlermeldung des Actionscript Interpreters.
Abbildung 86: Fehlermeldung
Man liest diese Fehlermeldungen sorgfältig von Oben nach Unten. Bei der in Abbildung 86
gezeigten Fehlermeldung befindet sich die wichtigste Information am Ende der ersten Zeile:
'{' erwartet
Im Programm fehlt also eine öffnende geschwungen Klammer. Wo fehlt sie? In Szene 1, auf
Ebene 1, in Bild 1, in der zweiten Zeile des Actionscript Programmes. Nun können Sie den
Film-Explorer verwenden um ganz gezielt das Problem anzusteuern:
99
Abbildung 87: Gezieltes Ansteuern des Fehlers mit dem Film Explorer
Falls im Ausgabe-Fenster mehrere Fehler angezeigt werden sollten Sie immer den ersten Feh-
ler beheben, und das Programm erneut testen – oft sind die weiteren Fehler so genannte
„Folgefehler“, die sich nur aus der Verwirrung nach dem ersten Fehler ergeben.
Programmzeilen auskommentieren
Wenn Sie vermuten, dass eine Programmzeile falsch ist, oder sie die Programmzeile vorüber-
gehen nicht brauchen, dann können Sie Kommentarzeichen davor setzen:
// x = 4;
Jetzt ist die Zeile „auskommentiert“, sie wird also nicht ausgeführt. Wenn man die Zeile
später doch wieder braucht, kann man die beiden Schrägstriche wegnehmen, und die Zeile
wird wieder wirksam.
Das Action-Fenster bietet zwei Symbole zum Setzen und Entfernen von Kommentaren.
Trace Meldungen
Wenn Programme länger und komplexer werden treten andere Arten von Fehler auf: die
Schreibeweise des Programms paßt, aber die Logik stimmt nicht, es passieren nicht die richti-
gen Dinge in der richtigen Reihenfolge.
on(release) {
play();
trace("Film gestartet");
}
Ein Hilfsmittel, um den Programmablauf zu verfolgen, sind so genannte trace Meldungen,

die im Ausgabefenster angezeigt werden.
Der Text der beim Befehl trace in Klammern und Anführungszeichen angegeben ist, wird im
Ausgabefenster angezeigt. So haben Sie beim Testen des Programms einen Überblick an wel-
cher Stelle in Ihrem Programm der Actionscript-Interpreter gerade arbeitet.
100
6.3.5 Erste Actionscript Befehle
Die hier gezeigten Befehle sollen ausgeführt werden wenn die UserIn auf einen Button drückt.
Dazu muß auf der Button-Instanz folgender Code angebracht werden:
on ( release ) {
// hier
// der
// Befehl
}
Dann wird der Befehl ausgeführt wenn über dem Button die Maustaste gedrückt und anschlie-
ßend wieder losgelassen wird (release). Statt release können auch andere Events verwen-
det werden, z.B. press (wenn die Maustaste gedrückt wird) oder mouseover (wenn die Maus
über den Button bewegt wird).
Nach dem on-Befehl innerhalb der geschwungenen Klammern können mehrere Be-
fehle stehen. Das funktioniert immer wenn sie in Actionscript die geschwungenen
Klammern {} sehen. Zwischen diesen Klammern können Sie einen Befehl oder
mehrere Befehle schreiben. Das nennt man einen Code-Block.
Navigation mit getURL()

Wenn ein Button gedrückt wird soll der Webbrowser zu einer anderen Webseite weitergeleitet
werden. Der Befehl getURL entspricht also ungefähr dem Link mit <a href="…"> in HTML. Ach-
tung: beim „Weitersurfen“ zu einer anderen Webseite wird der Flash-Film verlassen – nach
getURL kann also „in Flash“ nichts mehr passieren.
Die Gestaltung des Buttons bleibt dabei völlig frei, Fehler! Verweisquelle konnte nicht ge-
funden werden. zeigt ein mögliches Beispiel wie eine entsprechende Button-Instanz aussehen
kann.
Abbildung 88: Ein Button als Link zu einer anderen Webseite
Wie bei einem Link in HTML muß man auch bei einem Link in Flash zuerst wissen wo der Link
hin gehen soll: dazu braucht man die genaue URL der Webseite. Am einfachsten entnimmt
man die URL mit „copy“ aus der Adress Anzeige eines Webbrowsers. Dann selektiert man die
Instanz des Buttons, und fügt dann wie in Fehler! Verweisquelle konnte nicht gefunden
werden. gezeigt das Verhalten hinzu.
101
Abbildung 89: Erstellen eines Links mit dem Verhalten-Fenster
Neben der URL könnte man auch ein Ziel-Fenster bzw. Ziel-Frame für den Link angeben, die
Angabe entspricht bei einem HTML-Link dem Attribut target. Mit der Standard-Einstellung
_self wird die Webseite im aktuellen Frame und Fenster angezeigt.
Sie können die URL im Nachhinein ändern, indem Sie im Verhalten-Fenster auf die Zeile dop-
pelklicken.
Im Aktionen-Fenster können Sie den Code betrachten der durch das Verhalten erzeugt wurde,
siehe Abbildung 90.
Abbildung 90: Actionscript Code der durch das Verhalten erstellt wurde
Drag and Drop mit startDrag() und stopDrag()

Abbildung 91 zeigt drei Teile eines Puzzles, nicht aber das Hintergrundbild in das diese Teile
hineinpassen. In der rechten Hälfte der Abbildung sehen sie die Verhaltensweisen die für
Drag-and-Drop notwendig sind.
102
Abbildung 91: Drag and Drop mit Verhalten
Der entsprechende Actionscript-Code sieht für alle Puzzle-Teile genau gleich aus:
on (press) {
this.startDrag();
}
on (release) {
this.stopDrag();
}
Eine Überprüfung, ob alle Teile am richtigen Ort gelandet sind, können Sie noch nicht pro-
grammieren, dafür brauchen sie Verzweigungen und Variablen.
Andere Flash-Filme laden mit loadMovie()

Fertige swf Dateien können in einen Flash-Film geladen und dargestellt werden.
Im Haupt-Flash-Film wird eine leere MovieClip-Instanz eingefügt, in Abbildung 92 hat diese

MovieClip-Instanz den Namen display_mc. Dieses leere MovieClip dient als „Landeplatz“ für
die geladene swf Datei.
on (release) {
loadMovie("1.swf", display_mc);
}
on (release) {
unloadMovie(display_mc);
}
Abbildung 92: Navigation für das Laden von swf-Dateien
103
6.3.6 Steuerung von Zeitleisten
Stop() und Play()

Eine Animation kann angehalten und von der UserIn neu gestartet werden.
Abbildung 93 zeigt den Film und die beiden Punkte an denen er stoppt.
Abbildung 93: Filme wird angehalten, und über Buttons wieder gestartet
Um das zu erreichen brauchen wir zwei Actionscript-Befehle:
− stop();
− play();
Der Befehl stop() hält die Zeitleiste dort an, wo der Abspielkopf gerade steht. Der
Befehl play() startet die Zeitleiste wieder, der Abspielkopf beginnt wieder sich zu
bewegen.
Den stop()Befehl können Sie direkt auf ein Bild in der Hauptzeitleiste schreiben.
Wenn der Abspielkopf zu diesem Bild kommt wird er angehalten. In Abbildung 94
sehen Sie wie die Zeitleiste und das Aktionen-Fenster den Befehl darstellen.
Abbildung 94: Aktion am Bild Nummer 11: stop();
Der play()Befehl muß auf den Button geschrieben werden, und wird (wie in den vorherge-
henden Beispielen) beim Loslassen des Buttons ausgeführt: on (release), siehe Abbildung
95.
104
Abbildung 95: Actionscript beim Loslassen des Buttons
Der Film stoppt also von selbst und startet erst wieder, falls die UserIn klickt.
Film mit alternativem Ende

Ein interaktiver Film mit zwei alternativen Enden: Die UserIn entscheidet mit einem Klick wie
der Film endet. Abbildung 96 zeigt die gesamte Handlung des Films mit Hilfe des Zwiebel-
schaleneffekts: Der blaue Ball betritt von links die Bühne und bewegt sich bis zum Rand des
Abgrunds. Hier stoppt der Film. Entscheidet sich die UserIn für das gute Ende, dann geht der
Ball wieder nach links ab. Entscheidet sie sich für das schlechte Ende, dann stürzt er sich in
den Abgrund.
Abbildung 96: Eine Story mit zwei alternativen Enden
Abbildung 97 zeigt die Zeitleiste des Films und die beiden Frames an denen er stoppt.
Abbildung 97:Namen für einzelne Bilder in der Zeitleiste
105
Bei Frame 10 stoppt der Film. Hier werden die beiden Buttons angezeigt, mit denen die Use-
rIn entscheiden kann wie der Film weiter gehen soll. Das schlechte Ende des Films ist in den
Frames 11 bis 33 gespeichert, der entsprechende Button enthält also nur einen play Befehl.
on ( release ) {
gotoAndPlay(34);
}
Das gute Ende des Films ist in den Frames 34 bis 40 gespeichert, hier ist also ein Sprung zu 34
notwendig. Dieser Sprung wird durch den Befehl gotoAndPlay(34) bewirkt.
Im Laufe der Entwicklung eines Flash-Films können sich die Frames noch verschieben – z.B.
weil man das schlechte Ende ausführlicher gestalten will, und es mehr Frames braucht. Da-
mit würde sich das gute Ende von 34 auf z.B. 54 verschieben, und entsprechend müßte man
den Code verändern.
Diese Arbeit kann man vermeiden, indem man den wichtigen Frames einen Namen gibt. In
Abbildung 97 trägt der Frame 34 den Namen Happy. Diesen Namen kann man im Actionscript-
Programm verwenden, und zwar in (geraden, doppelten) Anführungszeichen:
on ( release ) {
gotoAndPlay("Happy");
}
Werden nun Frames vor 34 eingefügt, dann funktioniert das Programm trotzdem noch.
Strings
An diesem Beispiel kann man sehen, dass in Programmiersprachen Zahlen und Texte verschie-
den behandelt werden. Das Fachwort für ein Stück Text in einer Programmiersprache ist ein
String. Oder auf Deutsch manchmal: eine Zeichenkette. Während man Zahlen einfach hin-
schreiben kann, muß man den Text im Code in Anführungszeichen setzen:
gotoAndPlay(34);
Achtung: in Programmiersprachen werden nur gerade Anführungszeichen verwendet. Die

doppelten und die einfachen Anführungszeichen sind in Actionscript gleichbedeutend. Sie
müssen aber paarweise zusammenpassend verwendet werden:
gotoAndPlay('Happy');
Andere Anführungszeichen kann man mit copy-and-paste in das Flash Aktionen-Fenster hinein-
bringen, sie funktionieren aber nicht!
gotoAndPlay(`Happy´); // FALSCH !
gotoAndPlay(“Happy”); // FALSCH !
gotoAndPlay(»Happy«); // FALSCH !
106
Flußdiagram
Den gesamten Ablauf des Filmes könnte man in einem
Intro Flußdiagramm wie folgt darstellen:
Bei größeren Projekten können Flußdiagramme helfen

den Überblick zu bewahren. Eine Raute stellt eine Ver-
zweigung / Entscheidung dar, sonst folgt der Ablauf den
Bad Happy Pfeilen.
Flußdiagramme sind ein sehr altes Werkzeug in der Pro-

grammierung, sie wurden schon in den 70er-Jahren ver-
Abbildung 98: Flussdiagramm für den Film
mit Verzweigung
wendet. Deswegen sind sie weit verbreitet.
Sie können Flußdiagramme auch verwenden, um die

Handlung eines interaktiven Films oder eines Computerspiels zu planen.
Spielfigur steuern
Eine Spielfigur, die durch ein MovieClip dargestellt wird, wird gesteuert.
Wichtig ist, dass die Spielfigur durch ein einzelnes – wenn auch komplexe aufgebautes – Mo-
vieClip dargestellt wird. Vermeiden Sie es eine Spielfigur als zwei oder mehrere separate
MovieClips darzustellen – das macht das Bewegen der Figur sehr viel schwieriger!
Abbildung 99 < Zeitleiste des MovieClips. Die Zeitleiste ist in Abschnitte zu je 10 Frames ein-
geteilt, jeder Abschnitt entspricht einer bestimmten Handlung, die die Spielfigur durchführen
kann. Der erste Frame im Abschnitt ist entsprechend benannt:
Abbildung 99: Zeitleiste des MovieClips als Handlungs-Repertoire
Frame 1 heißt Steh, von Frame 1 bis 9 steht die Figur also nur rum. Frame 10 heißt Wink,
von 10 bis 19 winkt die Figur mit dem Arm. Von 20 bis 29 tritt sie mit dem Bein (Kick), von
30 bis 39 macht sie eine Kniebeuge (Kniebeug), von 40 bis 49 wackelt sie mit dem Kopf
(Kopf), von 50 bis 59 dreht sie sich einmal seitlich und wieder zurück in Frontalansicht
(dreh).
107
WWW und Multimedia: Webformulare und Parameter
Abbildung 100: Eine Handlung
Befindet sich eine Instanz dieses MovieClips/dieser Spielfigur auf der Bühne, so kann diese
Instanz mit Actionscript gesteuert werden. Die Instanz braucht dazu einen Instanznamen, in
diesem Fall figur_mc:
on (release) {
figur_mc.gotoAndPlay("dreh");
}
Wenn sich eine zweite Spielfigur auf der Bühne befindet, dann kann diese über Ihren Instanz-
namen angesprochen werden: andereFigur_mc.gotoAndPlay("dreh");
6.4 Webformulare und Parameter

Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-
Möglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web.
Formularen ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr
strukturierten Rahmen. Abbildung 101 zeigt zwei typische Anwendungsgebiete für Web-
Formulare: das Eingabeformular der Suchmaschine Google und ein Bestellformular.
Abbildung 101 Formulare in Webseiten
108
Mit den HTML-Tags <form>, <input />, <textarea>, <option>, <select> werden Formulare ge-
baut. Hier ein einfaches Beispiel, (in der Code-Ansicht von Dreamweaver):
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:
6.4.1 Eingabefelder
Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und
den „normalen“ HTML-Tags auf. Tabelle 2 zeigt die verschiedenen Arten von Text-
Eingabefeldern.
Textfeld:
<input type="text"
name="meintextfeld"
value="text eingeben" />
Passwort-Feld:
<input type="password"
name="meinpasswort" />
mehrzeiliges Textfeld = Textbereich

<textarea name="zitat">
In a hole in the ground
there lived a Hobbit.
</textarea>
Tabelle 2: Text-Eingabefelder
Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element
„checkbox“ verwendet, siehe Tabelle 3.
<input
109
type="checkbox"
name="rauch" /> Raucher
Tabelle 3: Checkbox für Ja-/Nein-Fragen
Für Fragen, bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es
verschiedene Eingabeelemente, die in Tabelle 4 gezeigt werden.
Radiobuttons
<input type="radio" name="size" value="XL" /> XL
<input type="radio" name="size" value="L" /> L
<input type="radio" name="size" value="M" /> M
<input type="radio" name="size" value="S"
checked="checked" /> S
Menü
<select name="size2">
<option>XL</option>
<option selected>L</option>
<option>M</option>
<option>S</option>
</select>
Menü mit „leer“- Auswahl

<select name="size3">
<option>---Bitte Auswählen---</option>
<option>XL</option>
<option>L</option>
<option>M</option>
<option>S</option>
</select>
Liste
<select name="html" size="4" multiple="multiple">
<option>im Code</option>
<option>Dreamweaver</option>
<option>GoLive</option>
<option>Frontpage</option>
</select>
Tabelle 4: Eingabeelemente für Fragen mit mehreren Antworten
Radiobuttons, die zu einer Frage gehören, müssen den selben Namen tragen. der Wert ist
unterschiedlich (im Code: Attribut name ist gleich, value unterschiedlich). Nur bei einer Liste
besteht die Möglichkeit mehrere Antworten auszuwählen. Für alle Eingabefelder gibt: falls
auch "keine Antwort" möglich sein soll müssen Sie dafür eine eigene Option einbauen.
Jedes Formular braucht einen Absende-Button wie in Tabelle 5 gezeigt.
Absende-Button
<input type="submit"
value="drück mich!" />
Zurücksetzen-Button
110
<input type="reset"
value="Zurücksetzen" />
Tabelle 5: Eingabefelder Absenden und Zurücksetzen
Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.
Zurücksetzen? Nein Danke!

Den Zurücksetzen Button sollten Sie nur sehr selten einsetzen. Warum? Denken Sie an Ihre
eigene Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen Zurücksetzen But-
ton gedrückt und dann gedacht „super, alles gelöscht, genau das wollte ich“, und wie oft
haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „Mist, das war ja gar
nicht der Einsende-Button, jetzt muß ich alles noch mal tippen.“
111
Tabelle 6 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.
Unsichtbares = Verstecktes Feld

<input type="hidden"
name="webseite"
value="www.students" />
Button ohne Auftrag, für Javascript-Programme

<input type="button"
value="Extrafenster"
onClick="..Javascript hier.."
/>
Bildfeld, liefert angeklickte x+y Koordinaten.

<input type="image"
border="0"
name="position"
src="austria.gif"
width="150" height="64" />
Visuelle Zusammenfassung mehrer Felder: fieldset + legend

<fieldset>
<legend>Kreditkarte</legend>
<input name="nr" /><br>
<input type="radio" name="kk"
value="Master" /> Master
<input type="radio" name="kk"
value="Visa" /> Visa <br>
</fieldset>
Datei-Upload, funktioniert nur wenn die Formular-Daten mit Methode POST und
speziellem enctype an den Webserver geschickt werden
Wählen Sie ein Bild aus:
<input type="file" name="bilddatei">
Tabelle 6: selten verwendete Eingabefelder
Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formu-
lare liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmög-
lichkeiten.
Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Ho-
tel.
Version 1: Ein Menü ermöglicht die Auswahl aus

vorgegebenen Elementen.
Mit diesem Formular kann man nur ein, nicht aber
zwei oder mehr Zimmer reservieren.
112
Version 2: Ein Text-Eingabefeld ermöglicht hier die

Eingabe der Anzahl der Zimmer.
Es ist aber nicht möglich ein Einzel- plus ein Dop-
pel-Zimmer zu reservieren.
Version 3: Diese Version ermöglicht die Reservie-
rung von beliebigen vielen Zimmern in allen Kom-
binationen.
Version 4: Durch ein zusätzliches Textfeld können

alle weiteren Probleme abgefangen werden
Abbildung 102 Entwürfe für ein Zimmer-Reservierungs-Formular
Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor,
welche Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit
vergessen, kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt
geboten. Eine besonders häufige Auslassung zeigt Tabelle 7.
Tabelle 7: Entwürfe für ein Getränke-Bestell-Formular
Der linke Entwurf in Tabelle 7 läßt keine Bestellung nur einer Sorte Bier zu. Die „Mindestbe-
stellmenge“ für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer „Leer“-Option in
die Menüs wird diese Einschränkung aufgehoben.
6.4.2 Daten absenden
Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Meist
werden Sie an den Webserver zur weiteren Verarbeitung geschickt. Diese action wird direkt
im <form>-Tag angegeben.
<form action="http://webwelt.horus.at/html/form/echo.cgi">
113
Daten an E-Mail senden

Wenn Sie kein Möglichkeit haben, am Webserver zu programmieren, bleibt als Alternative, die
Daten direkt per E-Mail zu senden. So sieht der entsprechende HTML-Code des Formulars aus:
<form action="mailto:ich@uni-salzburg.at"
method="POST"
enctype="text/plain">
Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß nicht nur der
Browser funktionieren, sondern auch das E-Mail Programm. Das E-Mail Programm muß richtig
konfiguriert sein. Das ist auf vielen Computern am Internet nicht der Fall, oft werden die
Daten also nicht erfolgreich versandt sondern gehen verloren.
Abbildung 103: Formular per E-Mail oder an den Webserver senden
Daten senden mit Methode GET

Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den
Webserver gesendet. Dabei gibt es zwei Methoden: GET und POST. GET ist die einfachere.
In Abbildung 104 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die
Methode GET verwendet.
Abbildung 104: Formular mit Methode GET
114
Wenn die UserIn auf „Bestellung absenden“ drückt, baut der Browser aus der action und den
Namen und Werten der einzelnen Eingabefelder eine URL zusammen, die dann aufgerufen
wird wie in Abbildung 105 gezeigt.
Abbildung 105: URL einer GET-Anfrage
Die komplette URL lautet im Beispiel:
http://localhost/php/test.php?anzahl=4&adresse=Jakob+Haringer+Str.1%0D%0A5020+Salzburg
action 1.Eingabe 2.Eingabe
Die URL wird zusammengestellt aus:
1. der Action (aus dem form-Tag)
2. ? (einem Fragezeichen )
3. für alle Eingabefelder, getrennt durch & (kaufmännisches Und):
a. Name des Eingabefeldes
b. = (Gleich Zeichen)
c. Eingegebener / angeklickter Wert
Falls dabei Sonderzeichen vorkommen (z.B. Leerzeichen, Zeilenumbrüche, Umlaute, Frage-

zeichen, kaufmännisches Und) werden diese wie folgt encodiert: Statt Leerzeichen wird ein +
oder %20 gesetzt, bei allen anderen Zeichen wird ein % gefolgt von der Hexadezimaldarstel-
lung des ASCII-Code gesetzt (siehe rfc 2396). Diese Codierung nennt man URL-Encoding.
URL als Programm-Schnittstelle

Das Webformular ist nicht notwendig, um eine GET-Anfrage zu erzeugen. Wenn Sie z.B. das
Eingabe-Formular von Google analysieren werden Sie herausfinden, dass die Anfrage mit dem
Suchwort „Schokolade“ so aussieht:
http://www.google.com/search?q=Schokolade
Sie können diese URL einfach direkt in den Browser eintippen, ohne das Eingabeformular von
Google zu verwenden. Sie können diese URL in den Lesezeichen/Favoriten Ihres Browsers
speichern oder in einem Link verwenden:
115
<a href="http://www.google.com/search?q=schokolade">Suche nach Schokolade</a>
Gerade bei Google wird diese Möglichkeit oft genutzt: z.B. durch die Suchfelder, die in den
Browsern eingebaut sind:
Abbildung 106: Suchfeld von Firefox
Wenn Sie eine Web-Applikation erstellen müssen Sie auch darauf gefaßt sein, dass die UserIn-
nen nicht nur die Web-Formulare verwenden sondern auch URLs konstruieren und aufrufen.
Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops, die den Preis der
Waren als verstecktes Eingabefeld im Formular speicherten:
<form action="order.php" method="GET">

Anzahl: <input name="anzahl" /> <br />
Adresse: <textarea name="adresse"></textarea><br />
Preis: 1.000.000 DM
<input type="hidden" name="preis" value="1000000" />
<input type="submit" value="Bestellung absenden" />
</form>
Das gibt der KundIn die Chance ein „Gegenangebot“ zu senden (als „pricing attack“ bekannt):
http://happyshop.com/order.php?anzahl=4&adresse=Jakob+Haringer+Str.1&preis=10
Wenn nun das Programm order.php einfach den Preis aus der URL übernimmt und auf die
Rechnung schreibt, wird der Airbus recht günstig (für die KundIn) verkauft.
Merke: Alle Eingaben sind mit Skepsis zu betrachten!
Daten senden mit Methode POST

Bei Verwendung der Methode GET werden die gesamten Daten in der URL codiert. Dadurch
ergibt sich eine Beschränkung der Datenmenge: Webserver verarbeiten nur URLs bis zu einer
bestimmten Länge. Die Methode POST umgeht diese Beschränkung. Dabei werden die Daten
gleich codiert wie bei GET, aber im body des HTTP-Requests 13 gesendet.
POST ermöglicht damit das Einsenden von ganzen Dateien, dabei muß auch noch das Attribut
enctype des Form-Tags gesetzt werden:
<form enctype="multipart/form-data"
method="post"
action="upload.php">
13
Die Details von http werden wir an einem späteren Termin behandeln
116
Neues Bild auswählen: <input type="file" name="bilddatei">

<input type="submit" value="hinaufladen">
</form>
Der Input-Tag mit dem Typ „file“ wird vom Browser als Textfeld plus Button dargestellt. Wird
der Button gedrückt dann erscheint ein Datei-Auswahl-Dialog, wie in Abbildung 107 gezeigt.
Abbildung 107: Webformular mit Datei-Upload
6.4.3 Daten prüfen
Die Daten aus einem Web-Formular werden vom PHP-Interpreter verarbeitet, die URL-
Codierung aufgelöst und die Daten dann in mehreren superglobalen 14 Arrays zur Verfügung
gestellt:
$_GET Dieses Array enthält die Parameter einer GET-Anfrage.
$_POST Dieses Array enthält die Parameter einer POST-Anfrage.
$_REQUES Dieses Array kombiniert die Daten aus $_GET und $_COOKIE und $_POST. Besser
T die spezifischen Arrays verwenden!
$_FILES Dieses Array enthält die Daten zu Datei-Uploads.
Warnhinweis: In frühen PHP Versionen konnte man noch direkt die Variable $nr verwenden
um den Wert aus einem Eingabefeld <input name="nr" /> zu lesen — das funktioniert heute
nicht mehr!
14
Superglobal bedeutet, dass diese Variablen auch ohne global innerhalb von Funktionen
sichtbar sind
117
Um die Airbus-Bestellung aus Abbildung 104 zu verarbeiten, könnte folgendes Programm ver-
wendet werden:
<?php
$anzahl = $_GET['anzahl'];
$adresse = $_GET['adresse'];
echo("<p>Ihre Bestellung über $anzahl Flugzeuge ist eingelangt</p>");

echo("<p>Die Flugzeuge werden binnen 1 Monat an $adresse geliefert</p>");
?>
Dabei wird aber die Eingabe nicht geprüft. Eine bessere Version des Programmes prüft vorher
jede Eingabe und gibt entsprechende Fehlermeldungen aus:
<?php
$anzahl = $_GET['anzahl'];
$adresse = $_GET['adresse'];
$ok = true; // zeigt ob alle Eingaben ok sind

$fehler = array(); // sammelt alle Fehlermeldungen
if( ! is_numeric( $anzahl ) or (int) $anzahl != $anzahl or $anzahl < 1) {
$ok = false;
$fehler[] = "Bitte geben Sie die Anzahl der Flugzeuge ein!";
}
if( strlen( $adresse ) < 5 ) {

$ok = false;
$fehler[] = "Bitte geben Sie die vollständige Lieferadresse an!";
}
if ( ! $ok ) {
echo("<p>Ihre Bestellung kann derzeit nicht bearbeitet werden:</p>");
echo("<ol>");
foreach( $fehler as $fehler_text ) {
echo("<li>$fehler_text</li>");
}
echo("</ol>");
echo("<p>Bitte gehen Sie zurück und bessern Sie die Bestellung aus.");
}
else {
echo("<p>Ihre Bestellung über $anzahl Flugzeuge ist eingelangt</p>");
echo("<p>Die Flugzeuge werden binnen 1 Monat an $adresse geliefert</p>");
}
?>
Diese einfachste Überprüfung in PHP funktioniert mit einem statischen HTML-Formular und
einem PHP-Programm.
html php
Das Programm gibt im Falle eines Fehlers die Nachricht aus „bitte gehen Sie einen Schritt
zurück zum Formular, und bessern Sie die Fehler aus“. Das funktioniert in jedem Browser
und ist einfach zu programmieren.
118
Man kann das HTML-Formular aber statt als statische Datei auch als Output desselben PHP-
Programms erzeugen, das dann die Überprüfung vornimmt. Die Daten werden also an das
gleiche Programm zurück gesandt.
php
Wenn das Programm aufgerufen wird muß man drei Fälle unterscheiden:
− das Programm wurde noch nie aufgerufen: Formular anzeigen
− Daten liegen vor, sind aber nicht korrekt: Formular mit allen richtigen Daten und den
Fehlermeldungen anzeigen
− Daten liegen vor, alle sind korrekt: Bestellung behandeln, „Danke“ ausgeben.
Um festzustellen ob das Programm schon einmal aufgerufen wurde, fügen Sie ein unsichtbares
Feld in das Formular ein:
<input type="hidden" name="checkme" value="1" />

Anzahl: <input name="anzahl" /> <br />
Adresse: <textarea name="adresse"></textarea><br />
<input type="submit" value="Bestellung absenden" />
Somit ergibt sich folgende Gesamt-Struktur für das Programm:
if( $_GET['checkme'] ) {
$allesok = true;
// Überprüfung aller Eingaben
}
if ( $allesok ) {
// fertig, danke für die Bestellung
} else {
// Formular anzeigen, eventuell
// mit Fehlermeldungen und mit
// Vorausgefüllten Feldern
}
Wenn im Formular nur noch eine Eingabe fehlt sollen alle schon ausgefüllten Felder ausgefüllt
bleiben. Dazu muß bei jedem <input> Tag das Attribut value gesetzt werden.
<input type="text" name="tel" value="<?php echo $tel ?>" />
Besonders praktisch ist es, die Fehlermeldungen direkt neben dem betroffenen Eingabefeld
anzuzeigen
// Überprüfung
if ( strlen($tel) < 4 ) {
$allesok = false;
$error_tel = 'Telefonnummer angeben!';
119
}
// Anzeige
<input type="text" name="tel" value="<?php echo $tel ?>" />
<?php echo $error_tel ?>
Arrays als Parameter

Wenn im Webformular mehrere Textfelder den gleichen Namen tragen, dann wird davon in
PHP nur der letzte Wert übernommen.
In folgendem PHP-Programm wird mit dem Befehl print_r der Wert einer Variablen inklusive
Datentyp ausgegeben.
Webformular PHP-Programm Output
<input name="a" value="erster" /> print_r( zweiter

<input name="a" value="zweiter" /> $_GET["a"]
);
Eine Spezialität von PHP ist die Schreibweise von Parametern mit eckigen Klammern: solche
Parameter setzt PHP in Arrays um.
Webformular PHP-Programm Output

Array
<input name="a[]" value="erster" /> print_r( (
<input name="a[]" value="zweiter" /> $_GET["a"] [0] => erster
); [1] => zweiter
)
Datei Upload
Die Verarbeitung von hochgeladenen Dateien ist wesentlich komplizierter: Die Dateien wer-
den vom PHP-Interpreter temporär gespeichert. Das PHP-Programm kann die Dateien dann an
einen permanenten Speicherort kopieren.
Die Details zu den Hochgeladenen Dateien sind im Array $_FILES gespeichert, in folgendem
Beispiel hatte das Eingabefeld den Namen „bild“:
$_FILES['bild']['name'] Der Originalname der Datei am Client.
$_FILES['bild']['type'] Der „Mime Type“ der Datei – falls der Browser diese In-
formation liefert. Zum Beispiel „image/gif“. Achtung:
nicht zuverlässig!
$_FILES['bild']['size'] Größe der hochgeladenen Datei in Byte.
$_FILES['bild']['tmp_name'] Der Dateiname der temporären Datei.
$_FILES['bild']['error'] Fehlercode bei Upload, 0 bedeutet dass kein Fehler auf-

getreten ist. Siehe PHP-Doku.
120
<?php
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "File is valid, and was successfully uploaded.\n";
} else {
echo "Possible file upload attack!\n";
}
echo 'Here is some more debugging info:';

print_r($_FILES);
print "</pre>";
?>
Die Konfigurations-Direktiven file_uploads, upload_max_filesize, upload_tmp_dir,

post_max_size and max_input_time in der Konfigurationsdatei php.ini beeinflussen den
Dateiupload.
6.4.4 Nicht nur HTML
Ein PHP-Programm gibt normalerweise HTML aus. Entsprechend liefert der PHP-Interpreter
einen http-Header „Content-Type: text/html“. Mit dem Befehl header() kann dies verän-
dert werden.
PHP erzeugt CSS

Eine externes Stylesheet kann auch Output eines PHP-Programmes sein:
<html>
<head>
<link rel="stylesheet" href="style.php" />
</head>
<body>
<h1>Überschrift</h1>
<p>text text text</p>
</body>
</html>
Ein Stylesheet, das von PHP aus erzeugt wird, hat den Vorteil, dass man Variablen verwenden
kann, z.B. für die Definition von Farben, die mehrmals im Stylesheet verwendet werden sol-
len. In folgendem Beispiel wird einfach das ganze Stylesheet mit einem echo ausgegeben:
<?php
$blau = "rgb(0,0,255)";
echo "
body { padding: 3em; }
h1 { color: $blau; }
.box {
background-color: $blau;
}
";
?>
121
PHP erzeugt Bild

Das PHP-Programm kann auch Bilddaten ausgeben, diese können dann auf die bekannten Ar-
ten im Web verwendet werden:
<html>
<head>
<style>
body {
margin-left: 120px;
background-image: url(drawbackground.php);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Zufalls-Hintergrund</h1>
<p>Das verwendete Hintergrundbild wurde von PHP erzeugt:</p>
<p><img src="drawbackground.php" />
</body>
</html>
Welches Bildformat verwendet wird (jpg, gif, png, …) wird wieder über den http-Header Con-
tent-Type angekündigt. Die Befehle zur Bild-Erzeugung in Manipulation sind unter dem Stich-
wort „Image Funktions“ in der PHP-Doku zu finden.
<?php // Waagrechte Linien zufälliger Länge

header("Content-type: image/png");
$max = 100; // maximale Breite des Bildes

$im = imagecreate($max, 100);
$background_color = imagecolorallocate($im, 255, 255, 255);
$drawing_color = imagecolorallocate($im, 255, 0, 255);
imagefill($im, 0, 0, $background_color);
$y=0;
while( $y < 100 ) {
$x = rand(0,$max);
imageline($im, 0, $y, $x, $y, $drawing_color);
$y=$y+2;
}
imagepng($im); // gibt das Bild aus

imagedestroy($im);
?>
PHP erzeugt Variablen für Flash

Wenn PHP als „Backend“ für Flash verwendet wird kommt eine sehr einfache Form
der Ausgabe zum Einsatz: Variablenname und Werte werden wie für eine URL en-
codiert und ausgegeben. So könnte der Output eines Counters so aussehen:
count=25856&date=2.Mai+2008&time=10:15
Unter dem Stichwort „URL Funktionen“ finden Sie in der PHP-Doku die Funktion
http_build_query() die hier weiterhilft.
122
PHP erzeugt XML

Bei der Zusammenarbeit mit Flash kommt auch XML zum Einsatz. Dies ist notwendig wenn
komplexe Datenstrukturen übertragen werden sollen. Für eine Flash-Bildergalerie die alle
Bild-Dateien am Server darstellen soll muß man zum Beispiel die Liste der Bilder übertragen:
<bilder>
<bild imageurl="img/DSC_3461.jpg" />
</bilder>
Das PHP-Programm dazu könnte so aussehen:
<?php
header("Content-Type: application/xml");
$bilder = glob("*.jpg");
echo("<bilder>\n");
foreach( $bilder as $bild ) {
echo("<bild imgurl='$bild' />\n");
}
echo("</bilder>\n");
?>
PHP leitet weiter

Ein PHP-Programm kann den Browser zu einer anderen URL weiterleiten. So kann zum Beispiel
die Verarbeitung einer Bestellung (im ersten PHP-Programm) von der Darstellung des Bestell-
status (im zweiten PHP-Programm) getrennt werden:
<?php
// hier passieren wichtige Dinge ...
header("Location: status.php");
exit; /* fertig, nichts weiter ausgeben! */
?>
123
7.Termin: AJAX, Drawing API

Am siebten Termin der Lehrveranstaltung werden wieder die Übungsaufgaben besprochen.
Die Funktionsweise von AJAX wird erklärt und jQuery wird am Client verwendet. In Fash wird
mit der drawing-API gezeichnet, dabei werden Grundbegriffe der Programmierung wie Varia-
blen, Schleifen, Funktionen erklärt.

• Was AJAX ist.
Was die Leute aus der Flash-Gruppe wissen sollten

• Wie man mit lineStyle, moveTo, lineTo Linien zeichnet
• Wie man mit fillStyle, beginFill, endFill Teile einer Zeichnung mit Farbe füllt
• Wie man mit Variablen und Funktionen Programmteile abstrahiert und wieder ver-
wendet
• Wie man mit einer while-Schleife viel Arbeit mit wenig Code macht.
Was die Leute aus der Flash-Gruppe können sollten

• Zeichnen in Flash.
Was die Leute aus der PHP-Gruppe wissen sollten

• Dass PHP-Programme für AJAX sehr simple sind.
Was die Leute aus der PHP-Gruppe können sollten

• Eine Web-Applikation mit AJAX bauen: sowohl das Frontend mit Javascript (jQuery)
als auch das Backend mit PHP.
• Von einem PHP-Programm aus E-Mail versenden.
124
7.2 AJAX
AJAX ist die englische Abkürzung für „Asynchrones Javascript und XML“. In die-
sem Kapitel lernen Sie was das genau bedeutet, und dass sich hinter dem X zum
Schluß auch andere Format verbergen können
Der Begriff AJAX wurde von Jesse James Garrett zuerst verwendet 15. Ein Beispiel für die Ver-
wendung von AJAX ist das in Abbildung 108 gezeigte Eingabefeld: schon während des Eintip-
pens eines Suchwortes wird eine Anfrage an den Webserver geschickt. Dieser antwortet mit
einer Liste von vorgeschlagenen Namen. Diese Liste wird mit Javascript (unter Verwendung
der DOM) in einer <div> unterhalb des Eingabefelds angezeigt:
Abbildung 108: Vorschläge für die Eingabe werden über AJAX geladen
Mit AJAX werden also mehr HTTP-Anfragen gesendet. Es ändert sich aber gar nichts an der
einzelnen HTTP-Anfrage selbst.
Die HTTP-Anfragen werden asynchron abgesetzt. D.h. das Javascript-Programm wartet nicht
auf die Antwort des Servers. Statt dessen wird beim Senden der Anfrage eine Funktion ange-
geben, die aufgerufen werden soll, sobald die Antwort vorliegt.
Für die LeserIn der Webseite bedeutet das: sie Weite mit Formular Client Server
wird angefordert
erhält sehr schnell eine Reaktion auf ihre Klicks.
Formular wird ange-
In der Illustration rechts sehen Sie wie zwei zeigt
asynchrone HTTP-Anfragen nebeneinander UserIn interagiert

mit dem Formular
ablaufen ohne sich zu stören.
Das wichtigste Javascript-Konstrukt für AJAX ist

das XMLHTTPRequestObject. Leider gibt es auch
bei diesem Objekt Unterschiede zwischen den
Browsern. Um diese Unannehmlichkeiten zu Formular wird abge-
schickt
vermeiden, sollte man fertige Libraries
verwenden, die die Browser-Unterschiede
verbergen.
15
http://www.adaptivepath.com/publications/essays/archives/000385.php
125
WWW und Multimedia: PHP und E-Mail
7.2.1 Simples AJAX Beispiel mit jQuery
Im ersten AJAX Beispiel wird der Output eines PHP-Counters in eine HTML-Seite eingebunden.
Das gibt noch keine besonderen Effekte für die LeserIn, sondern macht nur den Einbau des
Counters in eine bestehende Webseite einfacher.
<html>
<head>
<title>AJAX counter</title>
<script>
$("p#counter_zeile").show();
$("#counter_zahl").load("counter_ajax.php");
});
</script>
<style>
p#counter_zeile { display: none; }
</style>
</head>
<body>
<h1>Das ist eine statische Webseite</h1>
<p>hier ist total viel Inhalt</p>
<p id="counter_zeile">Counter: <span id="counter_zahl">?</span></p>

</body>
</html>
Die ganze Arbeit macht hier jQuery in der Zeile
$("#counter_zahl").load("counter_ajax.php");
Das Element mit der Id counter_zahl wird ausgewählt. Mit dem Load-Befehl wird eine http-
Anfrage an die angegebene URL abgesetzt. Wenn der Output des PHP-Programm beim Browser
ankommt, wird er in das entsprechende Element eingefügt.
Der Output sollte also reiner Text oder HTML sein.
7.3 PHP und E-Mail

Die Funktion zum senden von E-Mail heißt mail:
mail(
"bjelli@horus.at",
"Just another SPAM",
"Das ist der Text in der E-Mail"
);
Dazu passend ein Trick, wie man viel Text in einen langen String schreiben kann:
126
$text <<<Ende
Lieber Newsletter-Kunde!
wir freuen uns, dass Sie unseren
Newsletter zum Thema $thema
abonniert haben.
Ende;
mail("bjelli@horus.at", "Just another Newsletter", $text);
Wie die Mail vom PHP-Interpreter versandt wird in der PHP- Konfiguration festgelegt. Die
Konfigurations-Datei hat den Namen php.ini. Wenn man PHP auf dem eigenen Computer
betreibt, kann man den SMTP-Server des Providers eintragen um die Ausgehende Mail über
diesen Server zu versenden:
;;;;;;;;;;;;;;;;;;;
; Module Settings ;
;;;;;;;;;;;;;;;;;;;
[mail function]
SMTP = mail.provider.at
sendmail_from = someuser@sbg.ac.at
Der Befehl phpinfo() gibt die ganze Konfiguration von PHP aus. Hier kann man auch die
Mail-Konfiguration nachlesen:
Abbildung 109: Konfiguration von PHP für Mail
7.4 Die Flash Drawing API

In diesem Kapitel beschäftigen wir uns wieder mit den Kernkompetenzen von Flash:
es ist bunt, und man kann damit zeichen. Allerdings jetzt auf einer anderen Ebene:
auch wenn man Actionscript programmiert, kann man mit Farben arbeiten und
zeichnen.
127
WWW und Multimedia: Die Flash Drawing API
7.4.1 Zeichnen mit Actionscript
Jede MovieClip-Instanz kann als Zeichen-Blatt fungieren. Das MovieClip merkt sich welcher
Stift verwendet werden soll (lineStyle) und wohin der Stift zuletzt bewegt wurde. Hier ein
Beispiel mit der MovieClip-Instanz mc:
mc.lineStyle( 1, 0x000000, 100 );
Das erste Argument von lineStyle gibt die Breite der Linie an. Das zweite Argument ist die
Farb-Angabe, sie funktioniert wie in HTML: rot, grün, und blau-Anteil in Hexadezimal-
Schreibweise. Die Farbangabe beginnt immer mit 0x. Das dritte Argument ist der Alpha-Wert,
100 ist der höchste mögliche Wert und steht für undurchsichtig.
Abbildung 110: Linien mit Actionscript gezeichnet
Mit moveTo und lineTo kann man Linien auf das MovieClip zeichnen:
mc.moveTo( 0, 0 );
mc.lineTo( 300, 100 );
mc.lineTo( 100, 300 );
mc.lineTo( 200, 0 );
Achtung: das Koordinatensystem von Flash beginnt links oben, die x-Achse geht nach rechts,
die (positive) Y-Achse nach unten!
Kurven
Abbildung 111: Kurve, die mit curveTo gezeichnet wurde (und Kontrollpunkt)
Mit dem Befehl curveTo kann man Kurven zeichnen. Dabei wird ein Zielpunkt und ein so ge-
nannter „Kontroll-Punkt“ angegeben.
128
mc.lineStyle(1, 0x000000, 100);´

moveTo(30, 0);
lineTo(0, 130);
mc.lineTo(320,50);
moveTo(30, 0);
lineStyle(1, 0x0000ff, 100);
curveTo(0, 130, 320, 50);
Abbildung 111 zeigt die Kurve und zusätzlich zwei Linien von Startpunkt- und Endpunkt zum
Kontrollpunkt. Diese Linien sind Tangenten an die Kurve und bestimmen so die genaue Form
der Kurve. (Das Fachwort für diese Art von Kurve ist „quadratische Bézierkurve“)
Füllfarbe
Abbildung 112: Zwei verschiedene Füll-Farben
Die mit lineTo und curveTo gezeichneten Formen können mit Farbe gefüllt werden. Mit be-
ginFill wird Farbe + Alpha festgelegt.
lineStyle( 1, 0x000000, 100 );
beginFill( 0x77ffaa, 40);

moveTo( 0, 0 );
lineTo( 300, 100 );
lineTo( 100, 300 );
lineTo( 0, 0 );
endFill();
beginFill( 0xff77aa, 40);

moveTo( 100, 0 );
lineTo( 200, 300 );
lineTo( 0, 200 );
lineTo( 100, 0 );
endFill();
Ein paar Übungsaufgaben dazu:
Übung 1) Schreiben Sie ein Programm, das 10 Pixel innerhalb des Bühnenrandes einen Rah-
men zeichnet. Verwenden Sie dabei die Eigenschaften width und height des Stage-Objekts.
129
Übung 2) Schreiben Sie ein Programm, das ein großes X quer über die Bühne malt, von Eck-
punkt zu Eckpunkt. Verwenden Sie dabei die Eigenschaften width und height des Stage-
Objekts.
Übung 3) Schreiben Sie ein Programm das mit (mehreren?) curveTo–Aufrufen ungefähr einen
Halbkreis zeichnet.
Übung 4) Schreiben Sie ein Programm das den Anfangsbuchstaben Ihres Vornames mit Action-
script zeichnet.
7.4.2 Funktionen
Beispiel 1) Mehrere Sterne werden auf die Bühne gezeichnet
Wie sie gesehen haben, ist die Zeichen-Fähigkeit von Flash sehr eingeschränkt: Es gibt Metho-
den um Linien und Kurven zu zeichnen, mehr nicht. Praktisch wäre doch auch ein Befehl zum
Zeichnen eines Rechtecks! Wenn Sie so einen Befehl brauchen, können Sie ihn selbst als
Funktion definieren.
Angenommen Sie wollen drei Rechtecke zeichnen:
Abbildung 113: Drei Rechtecke auf der Flash Bühne mit Koordinaten
Der Code dafür könnte so aussehen:
Rechteck 0/0 bis 150/100 Rechteck 200/0 bis 300/100 Rechteck 350/0 bis 500/100
moveTo(0,0); moveTo(200,0); moveTo(350,0);
Die Struktur des Codes ist immer gleich, nur die konkreten Zahlen unterscheiden sich. Ein
bißchen abstrakter betrachtet ist der Code immer gleich: wenn x1/y1 die Koordinaten des
linken oberen Eckpunktes sind, und x2/y2 die Koordinaten des rechten unteren Eckpunktes,
dann sieht der Code so aus:
moveTo(x1, y1);
lineTo(x2, y1);
lineTo(x2, y2);
lineTo(x1, y2);
lineTo(x1, y1);
130
Diesen abstrakten Code kann man in eine Funktion schreiben. Den Namen der Funktion (hier
rect) können Sie selbst festlegen:
Eine Funktion definieren

function rect(x1, y1, x2, y2)
{
moveTo(x1, y1);
lineTo(x2, y1);
lineTo(x2, y2);
lineTo(x1, y2);
lineTo(x1, y1);
}
Die Variablen x1, y1, x2, y2, die in der Klammer nach dem Funktionsnamen geschrieben wer-
den, werden Argumente der Funktion genannt. Wenn man eine Funktion benutzen will, muß
man wissen welche Argumente sie erhält.
Wenn die Funktion mit konkreten Zahlen aufgerufen wird, werden diese Werte in die Argu-
mente x1, y1, x2, y2 geschrieben und der Code ausgeführt:
Eine Funktion aufrufen

rect( 0, 0, 150, 100);
rect(200, 0, 300, 100);
rect(350, 0, 500, 100);
Wird die Funktion nur definiert, aber nie aufgerufen, dann hat Sie keine Auswirkungen auf das
Programm.
Übung 5) Schreiben Sie eine Funktion, die den Anfangsbuchstaben Ihres Vornamens zeichnet.
Die Position des Buchstabens auf der Bühne soll über die Funktions-Argumente gesteuert wer-
den, ähnlich wie bei der rect-Funktion. Benutzen Sie die Funktion um den Anfangsbuchsta-
ben 5mal auf die Bühne zu zeichnen.
Übung 6) Schreiben Sie eine Funktion, die einen Stern zeichnet. Die Position des Sterns auf
der Bühne soll über die Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-
Funktion. Benutzen Sie Ihre Stern-Funktion um 5 Sterne auf die Bühne zu zeichnen.
Übung 7) Schreiben Sie eine Funktion, die mit Hilfe von mehreren Aufrufen der curveTo
Funktion ungefähr einen Kreis zeichnet. Die Position des Kreises auf der Bühne soll über die
Funktions-Argumente gesteuert werden, ähnlich wie bei der rect-Funktion. Benutzen Sie Ihre
Kreis-Funktion um 5 Kreise auf die Bühne zu zeichnen.
Übung 8) Was macht die folgende Funktion?
function kreuz(mc, x, y) {
mc.moveTo(x-5, y);
mc.lineTo(x+5, y);
mc.moveTo(x, y-5);
mc.lineTo(x, y+5);
}
131
Übung 9) Was macht folgendes Programm (es verwendet die Funktion von Übung 8). Zeichnen
Sie das Ergebnis.
kreuz(mc, 100, 10);

kreuz(mc, 20, 300);
kreuz(mc, 40, 40);
7.4.3 Ein Muster aus Linien zeichnen
Beispiel 2) Der Hintergrund des Flash-Films wird mit einem Muster aus Linien be-
deckt: lauter senkrechte Linien mit 10 Pixel Abstand.
Larry Wall, der Erfinder der Programmiersprache Perl, sagte: Die erste Tugend der Program-
mierung ist Faulheit. An dieser Stelle bedeutet Faulheit: ich bin zu faul um viele Zeilen Code
zu tippen, die viele Linien zeichnen. Die Lösung: mittels einer Schleife mit wenig Code viele
Linien zeichnen. Die Variable x enthält dabei die X-Koordinate der senkrechten Linie.
1 lineStyle(1, 0x000000, 100);

2 var x:Number = 0;
3 while (x <= Stage.width)
4 {
5 moveTo(x, 0);
6 lineTo(x, Stage.height);
7 x = x + 10;
8 }
9 // hier gehts weiter
Die while-Schleife reicht von Zeile 3 bis Zeile 8. Sobald der Interpreter zum ersten Mal Zei-
le 3 erreicht, überprüft er die Bedingung in der runden Klammer ( x < Stage.width ) ähnlich
wie bei einer Verzweigung mit if. Wenn die Bedingung nicht erfüllt ist, springt er sofort zu
Zeile 9.
Ist die Bedingung erfüllt, dann werden die Zeilen 5 bis 7 der Reihe nach abgearbeitet. Am
Ende, bei Zeile 8, erfolgt wieder ein Rücksprung zu Zeile 3 – falls die Bedingung (x < Sta-
ge.width ) jetzt noch erfüllt ist.
Endlos-Schleife
Achtung, wichtiger Warnhinweis: achten Sie darauf, dass die Abbruch-Bedingung der Schleife
wirklich irgend wann einmal erfüllt ist! Sonst haben Sie ein Endlos-Schleife: der Actionscript-
Interpreter ist für immer in der Schleife gefangen; nichts geht mehr. Das passiert sehr
schnell, wenn man zum Beispiel vergißt, die Variable x hochzuzählen:
var x:Number = 0;
while(x <= Stage.width) {
moveTo(x, 0);
lineTo(x, Stage.height);
}
Übung 10) Schreiben Sie ein Programm, das senkrechte Linien im Abstand von 10px über die
ganze Bühne zeichnet (Code auf Seite 132).
132
Übung 11, 12, 13) Schreiben Sie drei Programme, die folgende Bilder zeichnen:
Zufallszahlen
Mit Hilfe einer Schleife kann man viele Linien ziehen, mit Hilfe von Zufallszahlen sieht dieses
Muster jedes Mal anders aus:
Abbildung 114: Zufalls-Muster
Zufallszahlen bringen den Moment des Unberechenbaren, Unerwarteten in die strenge, vor-
hersehbare Welt der Computerprogramme. Bei jedem Aufruf der Methode random des Math-
Objekts wird eine Zahl größer gleich Null und kleiner Eins erzeugt:
trace(" Erste Zufallszahl " + Math.random());

trace("Zweite Zufallszahl " + Math.random());
trace("Dritte Zufallszahl " + Math.random());
Bei jedem Aufruf gibt dieses Programm einen anderen Output:
Erste Zufallszahl 0.260387100744992 Erste Zufallszahl 0.348519487306476
Zweite Zufallszahl 0.512555140070617 Zweite Zufallszahl 0.342851056717336
Dritte Zufallszahl 0.321858525741845 Dritte Zufallszahl 0.683320601005107
Meist braucht man keine Zahl zwischen Null und Eins, sondern eine größere Zahl. Dazu multi-
pliziert man die Zufallszahl:
133
y = Math.random() * 400;
Falls man keine Kommerzahlen, sondern ganze Zahlen braucht, kann man mit der Funktion
int() die Zahl abrunden:
bildnr = int(Math.random() * 10);

mc.gotoAndStop( bildnr );
Übung 14) Schreiben Sie ein Programm, das das Muster in Abbildung 114 zeichnet.
Übung 15) Schreiben Sie ein Programm, das zufällige Linien zeichnet.
Übung 16) Was macht das folgende Programm? Zeichnen Sie das Ergebnis auf Papier, ohne
das Programm in Flash einzugeben!
step = 10;
a = 0;
while (a<400) {
mc.moveTo(a, 0);
mc.lineTo(a, 400);
a += step;
}
a = 0;
while (a<400) {
mc.moveTo(0, a);
mc.lineTo(400, a);
a += step;
}
Übung 17) Was macht das folgende Programm? Zeichnen Sie das Ergebnis auf Papier, ohne
das Programm in Flash einzugeben!
x = 0;
step = int(Math.random()*40+5);
while (x<400) {
mc.moveTo(x, 0);
mc.lineTo(400, x);
x += step;
}
Übung 18) (Achtung: mit viel Mathematik!) Was macht das folgende Programm? Finden Sie
zuerst heraus, wie sich die Variable alpha in der Schleife verhält. Erinnern Sie sich dann an
den Mathematik-Unterricht in der Schule: was machen Sinus und Cosinus? Zeichnen Sie wie
der Output aussieht. Was würde eine Veränderung der Variablen n, r, mitte_x, mitte_y be-
wirken?
n = 8;
r = 100;
mitte_x = 200;
mitte_y = 200;
alpha = 0;
// alpha im Bogenmass, von 0 bis 2*pi
x = mitte_x + Math.cos(alpha) * r;
y = mitte_y + Math.sin(alpha) * r;
this.moveTo(x, y);
while (alpha <= Math.PI * 2 && alpha <= max_alpha)
{
134
alpha += Math.PI * 2 / n;
// trace("jetzt bei winkel "+alpha);
x = mitte_x + Math.cos(alpha) * r;
y = mitte_y + Math.sin(alpha) * r;
this.lineTo(x, y);
}
Übung 19) Was macht folgendes Programm. Zeichnen Sie das Ergebnis.
function kreuz(mc, x, y) {
mc.moveTo(x-5, y);
mc.lineTo(x+5, y);
mc.moveTo(x, y-5);
mc.lineTo(x, y+5);
}
x = 0;
while (x<=400) {
y = x / 2 + 50;
kreuz(mc, x, y);
x += 10;
}
Übung 20) (Fortgeschritten!) Wie könnte ein Programm aussehen, das das Bild in Abbildung
115 zeichnet? Skizzieren Sie das Programm. Am besten wäre ein Programm, das mit einer
kleinen Veränderung auch 7 mal 10 oder 700 mal 100 Kreuze zeichnen könnte.
Abbildung 115: Gewünschtes Ergebnis: 7 mal 4 Kreuze
135
8.Termin: Web 2.0, Blogs und Video

Am achten Termin der Lehrveranstaltung werden wieder die Übungsaufgaben besprochen. Der
Begriff Web 2.0 wird diskutiert. Das Genre ‚Weblog’ wird vorgestellt am Beispiel des Blog-
ging-Systems Wordpress. Dabei kommt die Apache Konfigurationsdatei .htaccess zur Spra-
che. In Flash werden Videos im FLV-Format eingebunden.

• Was Tim O’Reilly mit „Web 2.0“ gemeint hat und wie der Begriff heute verwendet
wird.
• Das das Weblog eine Art Online-Tagebuch ist, das teils für private teils für journalisti-
sche Zwecke verwendet wird.
• Wie das Speichern in einer Datenbank einige Probleme von Webapplikationen löst:
z.B. den gleichzeitiger Zugriff auf die Daten.
• Dass Flash viele Möglichkeiten bietet, einen Streaming-Video-Player zu gestalten.

• Entweder im eigenen Webspace oder bei einem Hoster wie wordpress.de einen
Wordpress-Blog einrichten und anpassen.

• Dass man die SWF- und die FLV-Datei in den Websapce hochladen muß damit der
Flash Video-Player funktioniert.

• Eine Video-Datei in das FLV-Format konvertieren.
• Einen Video-Player gestalten.

• Dass Wordpress-Themes aus CSS und PHP-Dateien in einem Unter-Ordner von wp-
content/themes bestehen
• Dass Permalinks ohne Fragezeichen nur aktiviert werden können wenn der Webspace
.htaccess-Dateien erlaubt und das Modul mod_rewrite aktiviert ist.

• Wordpress im eigenen Webspace installieren und anpassen
136
8.2 Web 2.0

Web 2.0 ist ein umstrittener Begriff. Unter diesem Schlagwort werden verschiedene Innova-
tionen im World Wide Web der letzten Jahre zusammengefaßt. Tim O’Reilly, Gründer des
technischen Verlages O’Reilly, beschreibt Web 2.0 in einem Artikel im September 2005 erst-
malig.
Dieser Artikel wird hier in Ausschnitten vorgestellt:
Like many important concepts, Web 2.0 doesn't have a hard boundary, but ra-
ther, a gravitational core. You can visualize Web 2.0 as a set of principles and
practices that tie together a veritable solar system of sites that demonstrate so-
me or all of those principles, at a varying distance from that core.
http://www. oreillynet. com/lpt/a/6228 by Tim O'Reilly, 30. Sept. 2005
8.2.1 Web als Plattform
Als erstes Kennzeichen von Web 2.0 führt Tim O’Reilly an, dass das Web die Plattform für
Software ist. Alte Software-Firmen wie Microsoft oder Netscape produzierten Programme, die
auf Windows oder Apple als Plattform laufen. Web 2.0 Firmen wie Google verwenden statt
dessen das Web als Basis-Plattform für Ihre Applikation:
137
WWW und Multimedia: Web 2.0
1. The Web As Platform
[…]
Google […] began its life as a native web application, never sold or packaged,
but delivered as a service, with customers paying, directly or indirectly, for the
use of that service. None of the trappings of the old software industry are pre-
sent. No scheduled software releases, just continuous improvement. No licen-
sing or sale, just usage. No porting to different platforms so that customers can
run the software on their own equipment, just a massively scalable collection of
commodity PCs running open source operating systems plus homegrown appli-
cations and utilities that no one outside the company ever gets to see.
At bottom, Google requires a competency that Netscape never needed: databa-

se management. Google isn't just a collection of software tools, it's a specialized
database. Without the data, the tools are useless; without the software, the data
is unmanageable. Software licensing and control over APIs--the lever of power
in the previous era--is irrelevant because the software never need be distributed
but only performed, and also because without the ability to collect and manage
the data, the software is of little use. In fact, the value of the software is propor-
tional to the scale and dynamism of the data it helps to manage.
Der Wert von Google liegt also laut O’Reilly zur Hälfte in den gesammelten Daten, zur Hälfte
in der Software mit denen diese Daten verwaltet und durchsucht werden.
8.2.2 Kollektive Intelligenz
Als zweiten Punkt führt er die Nutzung der kollektiven Intelligenz von vielen Web-UserInnen
an. Dies verdeutlicht er mit mehreren Beispielen:
2. Harnessing Collective Intelligence
The central principle behind the success of the giants born in the Web 1. 0 era
who have survived to lead the Web 2.0 era appears to be this, that they have
embraced the power of the web to harness collective intelligence:
[…]
- Google's breakthrough in search, which quickly made it the undisputed search

market leader, was PageRank, a method of using the link structure of the web
rather than just the characteristics of documents to provide better search re-
sults.
- eBay's product is the collective activity of all its users; like the web itself, eBay
grows organically in response to user activity, and the company's role is as an
138
enabler of a context in which that user activity can happen. What's more, eBay's
competitive advantage comes almost entirely from the critical mass of buyers
and sellers, which makes any new entrant offering similar services significantly
less attractive.
- Amazon sells the same products as competitors such as Barnesandnoble. com,

and they receive the same product descriptions, cover images, and editorial con-
tent from their vendors. But Amazon has made a science of user engagement.
They have an order of magnitude more user reviews, invitations to participate
in varied ways on virtually every page--and even more importantly, they use
user activity to produce better search results. While a Barnesandnoble. com
search is likely to lead with the company's own products, or sponsored results,
Amazon always leads with "most popular", a real-time computation based not
only on sales but other factors that Amazon insiders call the "flow" around
products. With an order of magnitude more user participation, it's no surprise
that Amazon's sales also outpace competitors.
[…]
- Wikipedia, an online encyclopedia based on the unlikely notion that an entry

can be added by any web user, and edited by any other, is a radical experiment
in trust, applying Eric Raymond's dictum (originally coined in the context of
open source software) that "with enough eyeballs, all bugs are shallow," to con-
tent creation. Wikipedia is already in the top 100 websites, and many think it
will be in the top ten before long. This is a profound change in the dynamics of
content creation!
8.2.3 Daten
Als dritten Punkt führt O’Reilly die Bedeutung der gesammelten Daten an:
3. Data is the Next Intel Inside
Every significant internet application to date has been backed by a specialized

database: Google's web crawl, Yahoo’s directory (and web crawl), Amazon's da-
tabase of products, eBay's database of products and sellers, MapQuest's map
databases, Napster's distributed song database. As Hal Varian remarked in a
personal conversation last year, "SQL is the new HTML. " Database manage-
ment is a core competency of Web 2.0 companies […]
This fact leads to a key question: Who owns the data?
139
Tim O’Reilly führt MapQuest als Beispiel für eine Webapplikation an, die auf „fremden Daten“
basiert: die Karten werden von MapQuest von anderen Firmen zugekauft. Er stellt diesem
Modell das Modell von Amazon gegenüber: Amazon begann zwar mit zugekauften Daten – die
Titel, Autoren, ISBN-Nummern aller Bücher stammen für die USA von der Firma R. R. Bowker.
Aber Amazon hat zu diesen Daten große Massen an zusätzlichen Daten dazu gesammelt: Von
UserInnen geschriebene Rezensionen, Verkaufsstatistiken, Wunschlisten, etc.
[…]
The race is on to own certain classes of core data: location, identity, calendaring
of public events, product identifiers and namespaces. In many cases, where the-
re is significant cost to create the data, there may be an opportunity for an Intel
Inside style play, with a single source for the data. In others, the winner will be
the company that first reaches critical mass via user aggregation, and turns that
aggregated data into a system service.
„Intel Inside style play“ heisst hier, dass eine Firma eine Monopol-Stellung erreichen kann, so
wie Intel ein de-facto Monopol auf CPUs hat.
8.2.4 Software stündlich
Als viertes typisches Merkmal von Web 2.0 führt Tim O’Reilly an, dass der „Software Release
Cycle“ verschwindet. Nicht mehr das Veröffentlichen der Software alleine reicht, es geht
auch um den täglichen Betrieb der Server. Neue Software erscheint nicht mehr alle paar Mo-
nate oder Jahre in einer neuen Version, sondern kann jederzeit verändert werden:
4. End of the Software Release Cycle
[…], one of the defining characteristics of internet era software is that it is deli-
vered as a service, not as a product. This fact leads to a number of fundamental
changes in the business model of such a company:
1. Operations must become a core competency. Google's or Yahoo’s expertise

in product development must be matched by an expertise in daily operations.
So fundamental is the shift from software as artifact to software as service that
the software will cease to perform unless it is maintained on a daily basis. Goo-
gle must continuously crawl the web and update its indices, continuously filter
out link spam and other attempts to influence its results, continuously and dy-
namically respond to hundreds of millions of asynchronous user queries, simul-
taneously matching them with context-appropriate advertisements. […]
2. […] The open source dictum, "release early and release often" in fact has
morphed into an even more radical position, "the perpetual beta," in which the
140
product is developed in the open, with new features slipstreamed in on a

monthly, weekly, or even daily basis. […]
Cal Henderson, the lead developer of Flickr, recently revealed that they deploy
new builds up to every half hour.
Die von O’Reilly beschriebenen Punkte 5 und 6 beschäftigen sich mit den Details der Soft-
wareentwicklung, werden hier abernicht behandelt.
8.2.5 Rich User Interface
Das Web 2.0 bietet (im Vergleich zum Web 1. 0) Eine anwenderfreundlichere, reichhaltigere,
interessantere Oberfläche. Eine Oberfläche, die eben so gut funktioniert wie „normale“ Ap-
plikationen (von O’Reilly ‚GUI-style application’ genannt)
7. Rich User Experiences
[…] Several years ago, Macromedia coined the term "Rich Internet Applicati-
ons" […] to highlight the capabilities of Flash to deliver not just multimedia
content but also GUI-style application experiences.
However, the potential of the web to deliver full scale applications didn't hit the
mainstream till Google introduced Gmail, quickly followed by Google Maps,
web based applications with rich user interfaces and PC-equivalent interactivity.
The collection of technologies used by Google was christened AJAX, in a se-
minal essay by Jesse James Garrett[…].
Für Tim O’Reilly ist AJAX eine Schlüssel-Komponente von Web 2.0.
8.2.6 Tipps
Am Ende seines Artikels gibt Tim O’Reilly noch Tips, wie man erfolgreiche Web 2.0 Applika-
tionen und Firmen baut:
1) The Long Tail

Small sites make up the bulk of the internet's content; narrow niches make up
the bulk of internet's the possible applications. Therefore: Leverage customer-self
service and algorithmic data management to reach out to the entire web, to the
edges and not just the center, to the long tail and not just the head.
141
2) Data is the Next Intel Inside

Applications are increasingly data-driven. Therefore: For competitive advantage,
seek to own a unique, hard-to-recreate source of data.
3) Users Add Value

The key to competitive advantage in internet applications is the extent to which
users add their own data to that which you provide. Therefore: […]. Involve your
users both implicitly and explicitly in adding value to your application.
4) Network Effects by Default

Only a small percentage of users will go to the trouble of adding value to your
application. Therefore: Set inclusive defaults for aggregating user data as a side-
effect of their use of the application.
5) Some Rights Reserved. Intellectual property protection limits re-use and

prevents experimentation. Therefore: When benefits come from collective adop-
tion, not private restriction, make sure that barriers to adoption are low. Follow
existing standards, and use licenses with as few restrictions as possible. Design
for "hackability" and "remixability. "
6) The Perpetual Beta

When devices and programs are connected to the internet, applications are no
longer software artifacts, they are ongoing services. Therefore: Don't package up
new features into monolithic releases, but instead add them on a regular basis as
part of the normal user experience. Engage your users as real-time testers, and
instrument the service so that you know how people use the new features.
7) Cooperate, Don't Control

Web 2.0 applications are built of a network of cooperating data services. Therefo-
re: Offer web services interfaces and content syndication, and re-use the data
services of others. Support lightweight programming models that allow for loo-
sely-coupled systems.
8) Software Above the Level of a Single Device

The PC is no longer the only access device for internet applications, and appli-
cations that are limited to a single device are less valuable than those that are
connected. Therefore: Design your application from the get-go to integrate ser-
vices across handheld devices, PCs, and internet servers.
8.2.7 Zusammenfassung
Der Begriff Web 2.0 beschreibt den Stand der Technik und der Geschäftsmodelle von Internet-
firmen in einer bestimmten Zeit: der Aufschwung-Zeit nach dem „Platzen der Internet-Blase“
um 2000.
142
8.3 Weblogs
Ein Weblog (engl. Kombination aus Web und Log), oft einfach nur
Blog genannt, ist eine Webseite, die periodisch neue Einträge ent-
hält. Neue Einträge stehen an oberster Stelle, ältere folgen in um-
gekehrt chronologischer Reihenfolge.
http://de.wikipedia.org/wiki/Blog, 20.März 2006
Weblogs kann man meist schon am Layout erkennen:
In der Navigation
rechts gibt es Ver-
Der neueste
weise auf andere
Eintrag im Blog
Webseiten und
Blogs…
Der zweitälteste … und verschiedene

Eintrag im Blog Zugänge zu den
ist sehr lange alten Einträgen in
und enthält ein diesem Blog: über
Bild Kategorien, Suche,
Archive
Jeder Eintrag im
Blog hat einen Titel
und enthält Datum
und Uhrzeit.
In diesem Blog wer-

den Einträge in Ka-
tegorien eingeteilt.
Hier könnten Lese-

rInnen ihre Kom-
mentare einfügen.
Hat aber noch nie-
mand genutzt
143
WWW und Multimedia: Weblogs
Das Weblog unterscheidet sich technisch nicht von anderen Webseiten – Sie können ein We-
blog mit Dreamweaver als statische HTML-Seiten erstellen. Erkennungsmerkmal des Blogs ist
die „Tagebuch“-Struktur: es werden einzelne Einträge unterschieden, diese Einträge sind
nach Datum+Uhrzeit sortiert, der neueste Eintrag findet sich ganz oben auf der Webseite.
Eine Person ist als Autor/Autorin erkennbar, sie spricht für sich selbst, und nicht in einer Rol-
le für eine Institution. Ob dem wirklich so ist, ist über das Internet nicht nachprüfbar, trotz-
dem hat der Blog die Aura des authentischen, echten im Vergleich zu den PR- und Marketing-
Texten von offiziellen (Firmen-)Homepages.
8.3.1 Software für Blogs
Wie oben erwähnt können Sie Ihren Blog auch ohne Hilfe einer speziellen Software erstellen.
Sie können mit Dreamweaver Ihre Einträge in eine statische Webseite machen. Blogging-
Software hilft bei der Verwaltung der Einträge, und bietet zusätzliche Features wie Kommen-
tare oder Kategorien.
Charakteristisch für Weblog Publishing Systeme ist, dass es mit

ihnen sehr einfach ist, Webseiten zu publizieren. Weblog Publishing
Systeme sind einfache Content-Management-Systeme, die das
Einfügen neuer Inhalte sowie die Veränderung bestehender Inhalte
auch für Nutzer ermöglichen, die über keine oder nur geringe
Webdesign-Kenntnisse verfügen. Die gestalterische Anpassung an
die persönlichen Vorlieben des Nutzers lässt sich bei vielen Web-
logs mit Hilfe von Templates vornehmen. Die Installation eigener
Weblog-Software ist in vielen Fällen nicht notwendig. Die (zumeist
kostenlose) Nutzung eines großen Weblog-Anbieters reicht in der
Regel aus.
Blogger ist ein großer Weblog-Anbieter

(im Besitz von Google), die Abbildung
links zeigt das Eingabeformular von
Blogger. Es ist sehr einfach gehalten,
damit es auf vielen Browsern funktio-
niert – auch im Internet-Kiosk in der
Jugendherberge am Ende der Welt.
144
Mit so einem System kann man ganz einfach einen Reise-Blog schreiben –
ohne eigenen Computer oder Spezial-Programme.
Mit einem Laptop und einem W-LAN Zugang oder einem Handy
mit Webbrowser kann man jederzeit unterwegs Einträge im Blog
machen. Das ist zum Beispiel bei Computer-Konferenzen üblich –
eifrige BloggerInnen schreiben zu jedem Vortag den sie besuchen
sofort einen Bericht.
Die Blog-LeserInnen sind ebenso eifrig wie die Blog-SchreiberInnen.

Für LeserInnen, die viele Blogs verfolgen wollen, und dafür nicht jede
Seite einzeln ansurfen wollen gibt es eigene Blog Reader. Das sind
Programme, die die Blogs regelmäßig checken, und die Inhalte
gesammelt anzeigen. Dabei wird RSS verwendet.
8.3.2 RSS
RSS ist eine alternative Darstellung für einen Weblog; nur der Inhalt wird in RSS gespeichert,
nicht aber die Darstellung. RSS ist XML mit den „Tags“ <rss>, <channel> und <item>. Die
Datei beginnt mit der Beschreibung des Channels:
<?xml version="1.0" encoding="UTF-8"?>

<rss version="2.0"
xmlns:blogChannel="http://backend.userland.com/blogChannelModule"
xmlns:dc="http://purl.org/dc/elements/1.1/"
>
<channel>
<title>FH Salzburg - MultiMediaArt - News und Termine</title>
<link>http://www.fh-salzburg.ac.at/News.127.0.html</link>
<description>Aktuelles aus dem Studiengang</description>
Gefolgt von einer Liste der einzelnen Meldungen, der <item>s:
<item>
<title>mma-Absolvent gewinnt Hauptpreis beim film.forum.linz</title>
<description>MMA-Absolvent Markus Huber hat beim film.forum.linz 07 mit seinem Film
"Asyl" den Hauptpreis der Kategorie future gewonnen. Asyl entstand im Rahmen
eines Diplomarbeitsprojektes und setzte sich gegen vierzehn Konkurrenten durch.
</description>
<pubDate>Wed, 2. May 2007 18:00:00 GMT</pubDate>
</item>
<item>
<title>Die (R)Evolution der Kommunikation </title>
<description>Der Werbeblogger im Web 2.0: Am Studiengang MultiMediaArt wird am 30. April
2007 das Themenfeld Bloggen aufgegriffen und im Rahmen eines Vortrages von
Patrick Breitenbach um 12:30 Uhr im Audimax Urstein diskutiert.</description>
<pubDate>Tue, 17. Apr 2007 18:00:00 GMT</pubDate>
</item>
</channel>
</rss>
145
Wird so eine RSS-Datei auf einem Webserver zur Verfügung gestellt und regelmäßig aktuali-
siert, dann spricht man von einem RSS-Feed. Viele Programme können RSS-Feeds verarbeiten
und auf unterschiedliche Art darstellen.
Sowohl Firefox als auch Thunderbird kann man als RSS-Reader einsetzen. Firefox stellt den
RSS-Feed wie in Abbildung 116 gezeigt als „dynamisches Lesezeichen“ dar - ein Untermenü in
den Lesezeichen mit immer neuen Einträgen. Jeder Eintrag ist gleichzeitig ein Link auf den
Original-Blog, dort kann man also den gesamten Artikel lesen.
Abbildung 116: Darstellung von RSS als „dynamisches Lesezeichen“ in Firefox
Thunderbird stellt den RSS-Feed als Mail-Ordner dar, die einzelnen Items als Nachrichten.
Abbildung 117: RSS in Thunderbird
Das waren zwei Beispiele wie RSS gleich für die End-UserIn angezeigt wird.
Es gibt aber auch verschiedene Webapplikationen die RSS verarbeiten. Viele Content-
Management-Systeme können RSS-Feeds darstellen. Abbildung 118 zeigt die Darstellung des
FH-News-Feeds in einem Wordpress-Blog.
146
Abbildung 118: Darstellung eines RSS-Feeds in Wordpress
Ein Aggregator oder „Planet“ fasst verschiedene Blogs zusammen und veröffentlicht sie er-
neut, gebündelt. Ein Beispiel dafür finden Sie auf http://home.multimediaart.at.
8.3.3 Arten von Blogs
Fachliche Blogs, zum Beispiel zu Themen wie Webdesign, CSS, Ajax, können wichtige aktuelle
Informationsquellen sein. Neuigkeiten verbreiten sich in der Blogosphäre sehr schnell, weil
die Blogs aufeinander verweisen, und spannende Neuigkeiten besonders viele Verweise be-
kommen:
Viele Einträge bestehen aus Einträgen anderer Weblogs oder be-

ziehen sich auf diese, so dass Weblogs untereinander stark ver-
netzt sind. Die Gesamtheit aller Weblogs bildet die Blogosphäre.
Nach dem behandelten Themen, den zu Verfügung gestellten Medien und dem angepeilten
Zielpublikum kann man versuchen Blogs zu unterscheiden. Klare Trennlinien gibt es aber
nicht:
− Persönliches Tagebuch
o einer Person, ohne Einschränkung des Themas
o anläßlich einer Weltreise, eines Auslandssemesters
o zu einem bestimmten, persönlichen Thema, z.B. einer
gerade durchlebten Krankheit, Sterbeblog
o zu einem bestimmten fachlichen Thema, z.B. PHP
o mit Empfehlungen von anderen Webseite/Blogeinträgen
(Linkblog)
− Medien-Spezifische Blogs
o Photoblogs
o Videoblogs
− Nachrichtendienst
o mit Pressemeldungen einer Firma, einer Partei, eines
Vereins
o zu einem bestimmten Thema das in klassischen Medien zu
kurz kommt, z.B. Globalisierungskritik
147
Blogs dringen dabei in Gebiete vor, die bisher professionellen JournalistInnen vorbehalten
waren. Allerdings ohne der in Presse und Funk üblichen Kontrolle durch eine Redaktion, ohne
journalistische Qualitätskriterien einhalten zu müssen, und oft — da ganz anonym — ohne für
Fehlmeldung und Verhetzung zur Rechenschaft gezogen werden zu können.
Eine beliebte Form von anonymen Blogs sind Blogs für Leute von großen Firmen, die öffentlich
aber anonym über ihre Firma lästern. Siehe zum Beispiel Minimicrosoft.
8.3.4 Unerwartete Nebenwirkungen von Blogs

Auswirkungen
Aufgrund der Natur und Anwendung von Weblogs sind ggf. Rück-
schlüsse auf die Persönlichkeit des Bloggers möglich. Blogger soll-
ten sich der Tatsache bewusst sein, dass Weblog-Einträge stark
verbreitet und langfristig archiviert werden. (So durchsuchen Un-
ternehmen vor Einstellungen zunehmend das Internet nach Web-
seiten und Weblogs der Bewerber.)
Dazu ein konkreter Fall: aus dem „mmadiplomarbeitsblog“, März 2006:
Jan hat ein Blog-System für mehrere Leute aus dem Jahrgang mma2002 eingerichtet, in dem sie im
Zeitraum von Juni 2005 bis März 2006 persönliche Einträge aus der Praktikums- und Diplomar-
beits-Zeit machten. Am 20.März 2006 postete Stefan folgenden Blog-Eintrag:
"lustige" Geschichte
March 20, 2006
hi allerseits!
ein freund von mir hatte heute ein vorstellungsgespräch – scheinbar ist es nun
schon üblich, dass firmen die namen ihrer bewerber vorher googeln. jedenfalls
teilten sie ihm mit, dass sie ihn geoggelt (was für ein blödes wort) hätten und
dabei einige seiner projekte entdeckt hätten UND einen namensvetter entdeckt
hätten, dessen betrunkener freund in einer LA bar karaoke gesungen hat.
wer hier ein ständchen zum besten gegeben hat, wisst ihr ja :)#
na jedenfalls bin ich stark dafür, dass du(JAN) mal unsere familiennamen aus
dem blog entfernst und vielleicht auch gleich eine google indizierung unterbin-
dest…..
obwohl wer weiss: Nino´s ständermontage könnte ihm vielleicht auch einen
coolen job einbringen. und für rocky gibts sicher auch genug türsteher-jobs.
148
was haltet ihr von dem vorschlag?
http://www.tciny.net/blog/?postid=80, 22.März 2006
Der Vorschlag von Stefan wurde umgesetzt, Jan entfernte die Nachnamen und E-Mail Adressen
aus dem Blog.
Dieser Fall zeigt deutlich, dass die „Öffentlichkeit“ von Blogs unterschätzt wird. Als Zielpu-
blikum für den mmadiplomarbeitsblog waren wahrscheinlich nur FreundInnen und Studienkol-
legInnen gedacht. Dass auch künftige ArbeitgeberInnen, Schwiegereltern und KreditgeberIn-
nen den Blog lesen könnten, wird erst später klar.
Da das Web immer mehr auch archiviert 16 wird,

und immer mehr Leute das Internet benutzen,
wird es immer wahrscheinlicher, dass Blogs von
solchen nicht vorhergesehenen Leuten gelesen
werden. Die ArbeitgeberInnen, Schwiegereltern
und KreditgeberInnen des Jahres 2015 werden
das Web viel besser nutzen können als die von
2005.
Vielleicht führt das aber auch zu einer Verände-

Abbildung 119: Beispiel eines Fotos, das ohne
rung der Erwartungshaltung – vielleicht wird im Wissen des Betroffenen erstellt und im Internet
Jahre 2015 jeder über jeden wissen, wie er be- unter www.besoffene-dekorieren.de publiziert
wurde
soffen und dekoriert aussieht. Vielleicht ist es
dann allen egal?
Im Internet wird die Informationsselbstbestimmung oft gebrochen – Bilder werden ohne das
Wissen und die Zustimmung der Betroffenen veröffentlicht. Das ist ein Thema. Blogs sind ein
anderes Thema: Bei Blogs haben die SchreiberInnen die volle Kontrolle über den publizierten
Inhalt, sie entscheiden selbst was veröffentlicht wird. Sie sollten sich dabei der möglichen
Leserschaft und der möglichen Archivierung für die Ewigkeit bewußt sein.
8.4 Flash als Audio und Video-Player

In diesem Kapitel lernen Sie die verschiedenen Methoden kennen, wie man Audio
und Video in Flash einbindet. Das Abspielen von Audio und Video mit einer selbst
gestaltbaren Oberfläche ist ein Alleinstellungsmerkmal von Flash.
16
Siehe z.B. http://web.archive.org/web/*/http://www.cosy.sbg.ac.at
149
WWW und Multimedia: Flash als Audio und Video-Player
8.4.1 Audiodatei einbetten
Eine in die FLA- und SWF-Datei eingebettete Sounddatei nennt man auch „Sound-Ereignis“.
Ein solches Sound-Ereignis muss, bevor es abgespielt werden kann, erst vollständig geladen
sein.
Entweder zieht man die Sounddatei direkt in die Bibliothek oder man fügt sie über DATEI ->
IMPORTIEREN -> IN BIBLIOTHEK IMPORTIEREN ein.
Abbildung 120: Importierte Sounddatei in der Bibliothek
Abbildung 120 zeigt eine Sounddatei namens loop01.mp3, die in die Bibliothek importiert
wurde. Mittels des in der Abbildung rot markierten Play-Buttons kann man sich noch einmal
vergewissern, ob die Sounddatei wirklich abgespielt werden kann.
Diese Sounddatei wird nun beim Exportieren in die swf-Datei mit eingebunden. Dadurch ver-
größert sich jedoch die swf-Datei.
Abbildung 121: Audio in der Zeitleiste
Sie können nun die Audio-Datei auf die Bühne ziehen. Auf der Bühne selbst ist Audio nicht
sichtbar, aber in der Zeitleiste. Hier sehen Sie auch wie viele Frames lang der Sound andau-
ert. In Abbildung 121 wurde ein Klingelton in das MovieClip einer Klingel importiert. Wenn das
MC abgespielt wird ertönt, auch der Klingelton.
Abbildung 122: Eigenschaften einer Audio-Datei auf der Bühne
Im Eigenschaften-Fenster können Sie die Details einstellen: Hier können Sie einen andern
Sound auswählen, den Sound wiederholen lassen, oder in Endlosschleife laufen lassen. Sie
können sogar sehr einfache Bearbeitung wie Lautstärkenveränderungen vornehmen.
150
Unter DATEI Æ EINSTELLUNGEN FÜR
VERÖFFENTLICHUNGEN finden Sie Möglichkeiten, die

Audiodateien innerhalb von Flash neu zu kompri-
mieren, siehe Abbildung 123. Dies lässt sich für
„Audio-Ereignisse“ sowie für „Audio-Streams“ ge-
trennt einstellen.
Hierbei muß man beachten, dass mit „Audio-

Stream“ nur ein Flash-interner Audio-Stream ge-
meint ist. D.h. eine Audiodatei ist eingebettet,
wird aber gestreamed und nicht vorher geladen.
Sollte die Datei extern gestreamed werden, hängt
die Qualität allein von der externen Datei ab.
Abbildung 123: Einstellungen für Veröffentli-

chungen: Audio-Qualität
8.4.2 Video Streaming
Bei Video ist Streaming eindeutig das einzig sinnvolle Verfahren – Videos sind immer zu groß
um sie einzubetten.
Video Streaming funktioniert mit Dateien im FLV-Format. Dabei wird also die swf-Datei und
die FLV-Datei auf den Webserver geladen, die swf-Datei wie üblich in die Webseite eingebaut.
Das Laden und Abspielen der FLV-Datei erledigt dann Flash.
Der erste Schritt ist also immer die Erzeugung der FLV-Datei. Manche Pro-
gramme (besonders aus dem Hause Adobe) können FLV bereits exportieren.
Falls die Datei in einem andern Video-Format vorliegt kann sie mit dem Flash
Video Encoder konvertieren. Unter Linux können Sie das Programm mencoder verwenden 17.
Für das Abspielen der Videos gibt es eine fertige FLV-Komponente. Wenn
man diese (ähnlich wie ein Symbol) auf die Bühne zieht, dann hat die Instanz
auf der Bühne nicht nur Eigenschaften sondern auch Parameter:
17
http://studge.com/creating-flash-video-in-linux/
151
Abbildung 124: Eigenschaften und Parameter eine Komponenten-Instanz
Als Parameter contentPath den Pfad zur FLV-Datei eingeben. Der Parameter skin ist beson-
ders bequem: hier bietet Flash ein Fenster mit vielen fertige Skins an.
Abbildung 125: Skins für den FLVPlayer
Zusammenfassend ist das Erstellen eines Players einfach und schnell erledigt.
8.4.3 Audio streamen
Um die Dateigröße der swf-Datei klein zu halten kann man eine Audiodatei auch von einem
externen Speicherort streamen.
Ein Audio-Player soll mp3-Dateien abspielen, steuern und den Namen des Stücks in einem
dynamischen Textfeld anzeigt. Die mp3-Dateien müssen die Dateinamen 1.mp3, 2.mp3,
3.mp3, … haben.
Abbildung 3: Audio Player Layout
Wenn die Dateinamen 1.mp3, 2.mp3,… sind, woher weiß der Player dann den Titel des Musik-
stücks? Die Antwort ist in der mp3-Datei versteckt: In der Datei können Informationen über
das Musikstück gespeichert werden, in den ID3-Tags 18. Die kann sogar der Windows Explorer
anzeigen:
18
http://id3.org/
152
Abbildung 126: Darstellung der ID3-Tags in Windows Explorer
Flash beherrscht die Technik des Streamings. Das heißt: die mp3-Datei muss nicht vollständig
geladen werden um sie abzuspielen. Sobald ein paar Sekunden Musik aus der Datei geladen
sind, spielt Flash den Anfang ab. Das Laden und das Abspielen laufen dann gleichzeitig ab.
Trotzdem wird das Laden einer mp3-Datei (im Vergleich zu anderen Actionscript-Befehlen)
sehr lange dauern - vielleicht eine ganze Sekunde. Es wäre nicht gut, wenn das ganze Flash-
Programm während dieser Wartezeit „stehen bleiben“ würde.
Die Lösung für dieses Problem kennen Sie schon von AJAX: asynchrone Programmierung. Ein
Verarbeitungsschritt, der besonders lange dauert – hier das Starten der mp3-Datei – wird ge-
startet, aber sein Ende wird nicht abgewartet.
Erst wenn die mp3-Datei fertig geladen ist, bzw. wenn genug von der mp3-Datei geladen ist,
damit man die ID3-Tags lesen kann, wird eine bestimmte Funktion aufgerufen. Diese Funktion
wird manchmal „Callback-Funktion“ genannt.
Ein einfaches Beispiel mit einer mp3-Datei und dem Lesen des ID3-Tags:
var music:Sound = new Sound();

music.onID3 = function()
{
trace("später: die Datei und ihre ID3-Tags wurden geladen");
};
music.loadSound("1.mp3", true);
trace("sofort");
Ein Sound-Objekt wird erzeugt. Die Ereignis-Funktion onID3 des Sound-Objekts wird definiert.
Dann wird das Laden einer mp3-Datei gestartet. Dieser Schritt kann lange dauern, deswegen
wartet der mp3-Player nicht, sondern geht weiter zum nächsten Befehl.
Erst viele Millisekunden später, wenn der Anfang der mp3-Datei geladen wurde, wird Flash die
Funktion onID3 aufrufen. Innerhalb dieser Funktion kann man auf this.id.songname und
this.id.artist zugreifen. Diese Information kann man dann in einem dynamischen Textfeld
anzeigen:
Abbildung 4: Benötigte Elemente: Dynamisches Textfeld, Buttons
Als Variablen auf der Hauptzeitleiste braucht man für den Audioplayer neben dem Sound-
Objekt noch ein Variable (i), die anzeigt, welches Stück gerade gespielt wird (1,2,3…), und
eine Variable, die anzeigt, wie viele Stücke es insgesamt gibt:
var i:Number = 1;
153
var max:Number = 3;
var music:Sound = new Sound();
Die beiden Buttons zum Wechseln zwischen den Stücken verändern die Variable i, hier der
Button, der nach rechts blättert:
on(release){
i++;
if(i>max) i=1;
loadNewSound();
}
Die Funktion loadNewSound faßt das Starten des Ladevorgangs und die Anzeige im Textfeld
zusammen:
function loadNewSound()
{
anzeige_txt.text = "loading " + i;
music.loadSound(i + ".mp3", true);
}
Wenn Sie den Audioplayer wie hier beschreiben implementieren: Testen Sie ihn nicht nur am
lokalen Computer, sondern auch auf einem Webserver – dort sind die Ladezeiten für die mp3-
Dateien wesentlich höher!
8.4.4 Variablen für Flash in HTML setzen
Der Audio-Player ist schon ein sehr allgemein verwendbares Programm: Sie können den Player
für verschiedene mp3-Dateien verwenden, ohne die fla-Datei editieren zu müssen. Die swf-
Datei hat nur noch eine Einschränkung: die maximale Zahl der mp3-Dateien ist fix vorgege-
ben. Um die Zahl von 3 auf 5 zu erhöhen, müsste man die fla-Datei wieder Öffnen, und eine
neue swf-Datei erzeugen. Das ist unpraktisch.
Flash bietet uns für diese Problemstellung folgende Möglichkeit:
Man kann einzelne Variablen in der HTML-Datei festlegen, die die swf-Datei einbindet. Der
von Flash erzeugte HTML-Code zum Einbinden des Audio-Players sieht so aus:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="…swflash.cab#version=8,0,0,0" width="220" height="14"
id="audio-player" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="audio-player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="audio-player.swf" quality="high" bgcolor="#ffffff"
width="220" height="14" name="audio-player" align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
154
Wenn man Variablen an die swf-Datei übergeben will, dann muss man die URL der swf-Datei
verändern. Das heisst an zwei Stellen: in einem param Tag und im Embed Tag (oder bei Ver-
wendung von Swf-Object als erstes Argument)
audio-player.swf?max=5
Dann steht die Variable max in der swf-Datei zur Verfügung. Auch mehrere Variablen sind
möglich, sie müßten in der üblichen URL-Schreibweise mit & getrennt werden.
Diese Veränderung macht aber das Testen des Flash-Films schwieriger: innerhalb des Flash-
Editors hat die Variable max (noch) keinen Wert. Deswegen sollte man den Code noch einmal
verändern:
var max:Number; // sollte in der HTML-

// Datei gesetzt werden
if ( max == undefined ) {
max = 3;
}
Nun können Sie getrost die fla-Datei des Audio-Players verlieren: die swf-Datei funktioniert
für beliebig viele Musikstücke.
8.4.5 Video steuern
Ein allgemeiner Videoplayer soll verschiedene FLV-Videos abspielen können, diese werden bei
der Einbindung der swf-Datei in den HTML-Code angegeben.
Für den Player einfach die fertige Komponente von Flash verwenden:
Abbildung 127: Video Player mit der FLVPlayback-Komponente
Aus der HTML-Datei sollen der Name der FLV-Datei (quelle) und eine Beschreibung (be-
schreibung) entnommen werden:
155
Stage.scaleMode = "noScale";
import mx.controls.*;
var myPlayer:mx.video.FLVPlayback;
if (quelle == undefined) {
myPlayer._visible=false;
myTitle.text = "kein Video.";
}
else {
myPlayer.contentPath = quelle;
myPlayer.autoPlay = true;
myTitle.text = beschreibung;
}
Die Angabe eines längeren Textes in der HTML-Datei wirft ein Problem auf:
In einer URL darf kein Leerzeichen vorkommen. Die Leerzeichen müssen mit + ersetzt wer-
den:
video-player.swf?quelle=Ursty_Opener.flv&beschreibung=Opener+Ursty+2006
Es gibt einen Trick um diese „URL-Codierung“ zu erledigen: einfach den Text ins Suchfeld von
Google eingeben, und dann in der resultierenden URL nach der Variable q suchen. Google
muss die gleiche URL-Codierung durchführen.
Abbildung 128: Google führt URL-Codierung durch
Damit sind alle Einzelteile vorhanden, um einen mehrfach verwendbaren Video-Player zu

bauen.
156
8.5 Wordpress
Wordpress ist eine PHP-Applikation, die das Blog-
gen unterstützt. Wordpress braucht eine MySQL
Datenbank. Rechts sehen Sie Worpdress 2.5 mit
dem Default-Theme.
Folgende Hoster bieten Wordpress-Blogs unter

anderem gratis an:
• wordpress com
• wordpress.de
• edublogs.org - für Schulen etc.
• edublogs.de - für Schulen etc.
Die Installation von Wordpress im eigenen Webspace:
1. Schritt Finden Sie raus wie der Zugang zur Datenbank funktioniert: Daten-
bankname, Username, Paßwort.
2. Schritt Laden Sie die Software von www.wordpress.org oder

de.wordpress.org (deutsche Version) als zip-Datei auf Ihren Desk-
top-Computer herunter.
3. Schritt Packen Sie die zip-Datei aus. Dabei muss die Ordner-Struktur erhal-
ten bleiben.
4. Schritt Kopieren Sie wp-config-sample.php nach wp-config.php.
5. Schritt Tragen Sie Datenbankname, Username, Passwort in die Datei wp-

config.php ein (siehe unten).
6. Schritt Laden Sie den Ordner auf Ihren Webspace hoch, dabei muss die Ord-
ner-Struktur erhalten bleiben.
7. Schritt Öffnen Sie die URL ihres Webspace im Browser, sie werden automa-
tisch zu install.php weitergeleitet.
8. Schritt Geben Sie den Namen des Blog und Ihre E-Mail Adresse ein.
9. Schritt Fertig!
157
WWW und Multimedia: Wordpress
Das schwierigste dabei ist Schritt 5: das Editieren der Datei wp-config.php:
define('DB_NAME', 'datenbank'); // The name of the database

define('DB_USER', 'username'); // Your MySQL username
define('DB_PASSWORD', 'passwort'); // ...and password
define('DB_HOST', 'localhost');
// 99% chance you won't need to change this value
// You can have multiple installations in one database

// if you give each a unique prefix
$table_prefix = 'wp_'; // Only numbers, letters, and underscores
Der table_prefix wird verwendet wenn in einer Datenbank mehrere Wordpress-Instanzen

gespeichert werden sollen. Für jedes Wordpress werden mehrere Tabellen in der Datenbank
angelegt, die Namen der Tabellen beginnen mit dem angegebenen Prefix.
8.5.1 Wordpress Konfiguration
Nach der Installation von Wordpress (z.B. auf http://meinblog.at/) finden Sie das Backend
im Ordner wp-admin (also z.B. http://meinblog.at/wp-admin/). Dieser Bereich ist nur mit
Login zugänglich. Im Rahmen der Installation wurde ein Account mit Namen admin angelegt,
den Sie verwenden können.
In Abbildung 129 sehen Sie die Eingabemaske zum Schreiben eines neuen Artikels.
Abbildung 129: Wordpress Backend - Artikel Schreiben
158
8.5.2 Überblick
Die Navigation im Backend zeigt vier Haupt-Navigationspunkte (Schreiben, Verwalten, Dar-

stellung, Kommentare) und drei Neben-Navigationspunkte (Einstellungen, Plugins, Benutzer).
Falls neben der AdministratorIn admin noch weitere Accounts angelegt werden, können die-
sen weniger Rechte zugestanden werden — diese sehen dann manche Navigationspunkte
nicht.
Abbildung 130 zeigt alle sieben Navigationspunkt mit Unter-Navigation.
Abbildung 130: Wordpress Backend: Überblick über die Navigation
8.5.3 Artikel und Seiten
Ein Wordpress-Blog besteht nicht aus einzelnen Webseiten sondern aus kleineren Einheiten:
Artikel (auf englisch: posts) und Seiten (auf englisch: pages). Sowohl Artikel als auch Seiten
haben:
− Eine fixe URL (Permalink)

− Einen Titel
− Einen Text, eventuell mit Bildern, Audio, Video
− Ein Veröffentlichungsdatum
− Eine AutorIn
159
Nur Artikel haben die Chance, auf der Homepage des Blogs aufgelistet zu werden. (Norma-
lerweise die 10 neuesten, verändern unter EINSTELLUNGEN Î AUSGABE). Nur Artikel können in
Kategorien eingeordnet werden.
Damit ergibt sich folgende Verwendung:
− Artikel für Newsmeldungen, Veranstaltungsankündigungen, Dinge, von denen es im

Lauf der Zeit immer mehr geben wird,
− Seiten für Impressum, Anfahrtsskizze und andere Informationen mit “Ewigkeits-

wert”, die sich nicht ändern, und von denen es auch nicht mehrere geben wird.
Die Artikel werden in vielen Seiten wiederverwendet: auf der Homepage (die neuesten) auf
Archivseiten (z.B. Monatsarchiv aller Artikel vom Mai 2008) auf Suchseiten (z.B. Suchergebnis
für Suche nach ‚PHP’).
Bei beiden — Artikeln und Seiten — kann man Navigations-Menüs mit wenigen Klicks bauen:
− Bei Artikeln erfolgt die Navigation über die Kategorien. Sobald eine Kategorie minde-
stens einen Artikel enthält, erscheint ein entsprechender Navigationspunkt.
− Bei Seiten erfolgt die Navigation durch das Festlegen der Seitenreihenfolge bzw.
durch die Zuordnung einer Seite zu einer übergeordneten Seite.
8.5.4 Multimedia-Dateien
Während Texte in Artikeln und Seiten gespeichert werden, müssen Bilder-, Audio-, und Video-
Dateien erst einmal separat hochgeladen werden und erhalten eine fixe URL in einem Unter-
Ordner von wp-content/uploads:
Abbildung 131: Wordpress Datei Upload
160
Anschliessend können diese Dateien auf verschiedene Arten im Artikel bzw. in der Seite ein-
gebunden werden. Bei statischen Bildern funktioniert das sofort, für andere Medientypen gibt
es Plugins (siehe Kapitel 8.5.7)
8.5.5 Kommentare
In der Standardkonfiguration von Wordpress könnne anonyme BesucherInnen des Blogs Kom-
mentare zu den Artikeln und Seiten schreiben. Achtung: es gibt Spam-Roboter die gezielt in
Wordpress-Blogs Werbung eintragen. Unter EINSTELLUNGEN Î DISKUSSION können Sie die
Kommentar-Möglichkeiten beschränken, und sich so den Streß des „Ausmistens“ von Spam zu
ersparen.
8.5.6 Themes, Sidebars und Widgets
Die Darstellung des Blogs wird durch ein „Theme“ festgelegt. Ein Theme ist ein Ordner voll
PHP und CSS-Dateien im Ordern wp-content/themes. Themes werden meist als zip-Dateien
zum Download angeboten, man muss sie nur noch auspacken, in den Ordner hochladen, und
unter DARSTELLUNG Î THEME aktivieren.
Abbildung 132: Wordpress Theme "Sandbox
In der Datei style.css sind Meta-Informationen über das Theme gespeichert, die Datei
screenshot.png wird im Backend bei der Auswahl der Themes angezeigt.
Falls die „Sidebar“ im Theme mit Widgets gestaltet, ist erscheint ein entsprechender Naviga-
tionspunkt DARSTELLUNG Î WIDGETS. Widgets sind die einzelnen Teile, die zu Sidebars zu-
sammen gestellt werden können. Das Theme Diurnal bietet z.B. eine fixe Navigation für die
Pages (links oben) und zwei Sidebars auf der rechten Seite wie in Abbildung 133 gezeigt.
161
Sidebar 1 Sidebar 2
Abbildung 133: Theme mit zwei Sidebars und Page-Navigation
Diese Navigationselemente werden auf allen Seiten des Blogs angezeigt – egal ob Homepage
oder Monats-Archiv oder Seite eines einzelnen Artikels.
Viele Widgets sind erst sinnvoll wenn der Blog viele Einträge hat. Z.B. ein Kalender oder ein
Archiv. Hier ein Überblick über die Funktion der Widgets:
− Seiten listet die Seiten des Blogs auf. (Wäre mit dem Theme in Abbildung 133 nicht
sinnvoll, da schon eine Seiten-Navigation vorhanden ist)
− Kalender linkt zu „Tages-Archiven“, z.B zu den Artikeln, die am 15. Mai

2008 publiziert wurden.
− Archive linkt zu „Monats-Archiven“. Die Anzahl der Artikel kann zu jedem

Monat mit angezeigt werden.
− Links zeigt eine Liste mit Links an, diese können unter VERWALTEN Î LINKS eingege-
ben werden. In der Standard-Installation von Wordpress ist eine Linkliste mit 7 Word-
press-Links enthalten, die sollte man auf jeden Fall durch eigene Links ersetzen oder
ganz entfernen.
− Meta zeigt Links zum An- und Abmelden an.
− Search zeigt ein Suchfeld für die Volltextsuche an.
− Neueste Artikel zeigt die Titel der neuesten Artikel an. Das ist besonders wichtig,
wenn LeserInnen über eine Google-Suche auf der Seite eines alten Artikels landen.
Durch die „neuesten Artikel“ werden sie vielleicht weiter in den Blog hinein gelockt.
162
− Schlagworte (englisch: tags) können zu Artikeln vergeben werden und sind dann über
diese Navigation auffindbar. Es ist sinnvoll kurze Wörter als tags zu verwenden, die
schon bei Technorati oder Digg bekannt sind.
− Kategorien (englisch: categories) können zu Artikeln vergeben werden. Aus den ver-
wendeten Kategorien entsteht eine Navigation. (Siehe Lorelle on Wordpress 19 für eine
Diskussion von Tags vs. Categories)
− Text ermöglicht die Anzeige eines statischen Textes in der Sidebar. Soll-
te man unbedingt nutzen um den Blog (ultra)kurz vorzustellen: Wer
steht dahinter, in welcher Rolle wird geschreiben, was ist der Zweck?
− RSS ermöglicht das Einbinden eines fremden RSS-Feed. Hier gibt es besonders viele
Konfigurationsmöglichkeiten:
− Neueste Kommentare zeigt die neuesten Kommentare. Achtung: falls Sie Kommenta-
re zulassen müssen, Sie diese unbedingt regelmäßig lesen und illegale (üble Nachre-
de, Wiederbetätigung) und lästige (SPAM) entfernen.
− RSS Links zeigt Links zu den RSS-Feeds des Blogs an. Diese Information ist auch im
HTML-Header zu finden, und wird deswegen von manchen Browsern (Firefox, MSIE8)
automatisch angezeigt.
<link rel="alternate" type="application/rss+xml"

href="http://wordpress.local/?feed=rss2" title="Programmier-Portfolio Posts RSS feed" />
Das Zusammenstellen der Sidebars aus den einzelnen Widgets ist etwas umständlich:
1. Zuerst muss (rechts oben) die Sidebar ausgewählt und mit ANZEIGEN geladen werden
2. Dann kann (links) ein Widget angeklickt werden um es hinzuzufügen.
3. Schliesslich kann das einzelne Widget bearbeitet werden.
4. Abschließend muss die Sidebar mit „Änderungen speichern“ gespeichert werden.
19
http://lorelle.wordpress.com/2005/09/09/categories-versus-tags-whats-the-difference-
and-which-one/
163
2 3
Abbildung 134: Wordpress Widgets
8.5.7 Plugins
Plugins können die Funktionsweise von Wordpress erweitern — sowohl was die Anzeige betrifft
als auch im Backend. Ein Plugin ist ein Ordner mit PHP-Dateien im Ordner wp-
content/plugins, das wie ein Theme installiert wird. Als letzter Installations-Schritt wird
das Plugin unter PLUGINS aktiviert.
Zugriffs-Statistik
Das Plugin statpress 20 führt Statistiken über die Zugriffe. Es fügt im Backend einen neuen
Haupt-Navigationspunkt ein.
Abbildung 135: Wordpress Plugin statpress
Suchmaschinen-Optimierung
All in One SEO Pack 21 führt mehrere Veränderungen an Wordpress durch, um die Findbarkeit
für Suchmaschinen zu erhöhen. Die Optionen können unter EINSTELLUNGEN Î ALL IN ONE SEO
verändert werden, das ist aber nicht unbedingt notwendig.
Flash
Das Plugin WP-SWFObject 22 ermöglicht die Einbindung von SWF-Dateien. Nachdem die SWF-
Datei hochgeladen wurde, können Sie mit dem Code [SWF]pfadzurdatei, breite, hö-
20
http://www.irisco.it/?page_id=28
21
http://wp.uberdose.com/2007/03/24/all-in-one-seo-pack/
164
he[/SWF] im Eingabefeld für Artikel oder für Seiten die Datei einbinden. Dieser Code wird in
HTML und Javascript übersetzt. Die Optionen können unter EINSTELLUNGEN Î WP-
SWFOBJECT verändert werden.
Video
Der Flash Video Player 23 ermöglicht das einfache Anzeigen von FLV-Videos. Nachdem die
FLV-Datei hochgeladen wurde wird sie mit dem Code [flashvideo filename="…" /] in das
Eingabefeld für Artikel oder für Seiten eingegeben. Dieser Code wird in HTML und Javascript
übersetzt, die dann über eine SWF-Datei die FLV-Datei abspielen.
Abbildung 136: Wordpress Plugin Flash Video Player
Die Optionen können unter EINSTELLUNGEN Î FLASH VIDEO verändert werden.
22
http://blog.unijimpe.net/wp-swfobject/
23
http://www.mac-dev.net/
165
9.Termin: DB und onEnterFrame

Am neunten Termin der Lehrveranstaltung werden wieder die Übungsaufgaben besprochen.
Der Zugriff von PHP auf die Datenbank MySQL wird vorgestellt. In Flash wird die onEnterFra-
me Funktion verwendet um Animationen und die Bewegung von Spielfiguren zu erzeugen.

• Wie das Speichern in einer Datenbank einige Probleme von Webapplikationen löst:
z.B. den gleichzeitiger Zugriff auf die Daten.

• Dass das Event enterFrame vor dem Aufbau eines neuen Bildes ausgelöst wird – je
nach Framerate z.B. 12 mal pro Sekunde.

• Ein einfaches Spiel mit einem Ball (z.B. Pong, Breakout) in Flash umsetzen

• Wie man mit SELECT * FORM tabelle Daten aus der Datenbank abfragt und mit
INSERT INTO tabelle VALUES ( … ) Daten einfügt.
• Dass das Filtern der Daten in der Datenbank passieren sollte und möglichst wenig Da-
ten nach PHP übertragen werden sollten.

• Mit mysql_connect, mysql_query und mysql_fetch_assoc einfache Zugriffe auf die
Datenbank programmieren.
166
9.2 PHP und MySQL

MySQL ist eine relationale Datenbank, die oft bei Webapplikationen eingesetzt wird, bzw. bei
gemietetem Webspace mit angeboten wird. Hier wird nicht die Funktionsweise einer relatio-
nalen Datenbank erklärt, sondern nur die Besonderheiten von MySQL und die für Web-
Applikationen wichtigen Aspekte.
9.2.1 MySQL Installation und Dokumentation
MySQL am lokalen Rechner installiert man meist im Paket mit Apache, z.B. im Paket XAMPP.
Man könnte die Datenbank auch separat von mysql.com herunterladen und installieren.
Als Abfragesprache kommt SQL zum Einsatz. Die Details (Abweichungen vom Standard, Erwei-
terungen) kann man der Dokumentation entnehmen die Online unter
http://dev.mysql.com/ erreichbar ist.
Abbildung 137: Dokumentation von MySQL auf http://dev.mysql.com/
Wenn man am sich am Datenbankserver einloggen kann, kann man MySQL auf der Kommando-
zeile bedienen. Die MySQL-Shell wird wie folgt gestartet:
$ mysql –u username –p datenbankname

Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 2 to server version: 5.0.27-community-nt
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>
Ein Beispiel zur Orientierung in einer Datenbank:
167
WWW und Multimedia: PHP und MySQL
mysql> show tables;

+-----------------------+
| Tables_in_gym |
+-----------------------+
| attend |
| class |
| person |
| points |
+-----------------------+
4 rows in set (0.00 sec)
mysql> describe person;

+-----------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-----------+--------------+------+-----+---------+----------------+
| pid | bigint(20) | NO | PRI | NULL | auto_increment |
| email | varchar(50) | NO | UNI | | |
| username | varchar(12) | YES | UNI | NULL | |
| password | varchar(12) | YES | | NULL | |
| firstname | varchar(40) | YES | | NULL | |
| lastname | varchar(40) | YES | | NULL | |
+-----------+--------------+------+-----+---------+----------------+
mysql> select pid,firstname from person limit 1,10;

+------+-----------+
| pid | firstname |
+------+-----------+
| 2 | Jutta |
| 1512 | Chaoran |
| 1513 | Nina |
| 1514 | Kevin |
| 1515 | Bernhard |
| 1516 | JOHN |
| 1518 | Daniel |
| 1519 | Georg |
| 1522 | ivica |
| 1523 | Johannes |
+------+-----------+
mysql> INSERT INTO person (firstname,lastname) VALUES ('Brigitte', 'Jellinek');

Query OK, 1 row affected (0.37 sec)
mysql> delete from person where pid=1529;

Query OK, 1 row affected (0.01 sec)
mysql> select class.title,firstname,lastname

from class
natural left join classperson
natural left join person;
+--------------------------------+----------------+------------------+
| title | firstname | lastname |
+--------------------------------+----------------+------------------+
| WWW und Multimedia - Python | Brigitte | Jellinek |
| WWW und Multimedia - Python | Stefan | Jenisch |
…
| Flash+Actionscript @ DID | Brigitte | Jellinek |
+--------------------------------+----------------+------------------+
show tables zeigt alle Tabellen in der Datenbank an, describe tabellenname beschreibt
den Aufbau einer Tabelle. select, insert, delete funktionieren wie erwartet.
168
Ein häufig verwendetes Tool ist der phpMyAdmin, der ein Interface am Web zur Verfügung
stellt:
Abbildung 138: phpMyAdmin
Über phpMyAdmin kann man viele SQL-Abfragen durch Point+Klick formulieren. Das lehrreiche
daran: phpMyAdmin zeigt immer das SQL-Statement mit an — auf diese Art kann man einfach
SQL lernen. Besonders praktisch ist das beim Anlegen und Verändern von Tabellen. Erster
Schritt: Name der Tabelle:
Zweiter Schritt: Spalten definieren:
Dritter Schritt: Tabelle wird angelegt und dazugehörendes SQL-Statement angezeigt:
169
9.2.2 MySQL von PHP aus
Um von PHP auf die Datenbank zuzugreifen gibt es verschiedene Schnittstellen. Die älteste
Schnittstelle wird hier vorgestellt, sie ist in der Dokumentation unter „MySQL Funktionen“
dokumentiert. (Modernere Ansätze werden in Kapitel 9.2.6 auf Seite 174 vorgestellt.)
So funktioniert eine Verbindung zur mysql-Datenbank:
<?
mysql_connect ("rechnernamehier", "usernamehier", "geheimespassworthier")
or die ("Kein Zugriff auf die Datenbank");
echo ("Zugriff zur Datenbank OK");
mysql_close();
echo ("Verbindung zur Datenbank wieder beendet");
?>
Es gibt noch keinen tollen Output - wir haben bisher nur eine Verbindung zur Datenbank, aber
haben noch keine Daten abgefragt.
So funktioniert eine Abfrage aus der Datenbank:
mysql_query ("use mma"); //Datenbank auswählen

$ergebnis = mysql_query ( "SELECT * FROM person WHERE geb>1980 LIMIT 1,10" );
while($zeile = mysql_fetch_array($ergebnis)) {
echo($zeile["vorname"]);
echo("<br />");
}
Ein ganz wichtiges Grundprinzip beim Programmieren mit Datenbanken: Das Filtern und be-
rechnen der Daten möglichst in der Datenbank erledigen, möglichst wenig Daten zu PHP über-
mitteln. Folgender Ansatz wäre also ganz schlecht, besonders wenn viele Daten in der Da-
tenbank sind:
mysql_query ("use mma"); //Datenbank auswählen

$ergebnis = mysql_query ( "SELECT * FROM person" );
while($zeile = mysql_fetch_array($ergebnis)) {
if( $zeile["geb"] > 1980 ) {
echo($zeile["vorname"]);
echo("<br />");
}
}
Zu diesem Prinzip gehört auch die konsequente Verwendung der richtigen Datentypen in der
Datenbank.
Zum Speichern eines Datums also DATE verwenden, das ermöglicht Berechnungen wie „falls
datum nicht älter als 30 Tage alt ist“
… WHERE datediff( curdate( ) , datum ) <= 30
170
9.2.3 auto_increment
MySQL bietet die Möglichkeit, genau eine Spalte einer Tabelle als auto_increment zu markie-
ren. Als Datentyp kann ein Integer-Typ verwendet werden, z.B. BIGINT. Wird eine neue Zeile
in die Tabelle eingefügt und für diese Spalte kein Wert explizit angegeben oder der Wert
NULL angegeben, dann fügt MySQL automatisch einen neuen Wert (der noch nie benutzt wur-
de) ein.
Diese auto_increment Spalte eignet sich also als Primärschlüssel der Tabelle.
Wird ein neuer Datensatz in eine Tabelle mit auto_increment Spalte eingefügt, dann ist der
neu erzeugte Schlüssel anschließend über die Funktion mysql_insert_id() erhältlich.
9.2.4 Escaping
Wenn die Konfigurationsvariable magic_quotes_gpc gesetzt ist, führt der PHP-Interpreter ein
automatisches Escaping bei den Get- und Post-Parametern und bei Cookies durch (deswegen
„gpc“). Dazu ein Beispiel, bei dem die UserInnen viele Sonderzeichen eingeben müssen: Eine
Datenbank mit Code-Beispielen. Die Eingabemaske sieht so aus:
Dann enthält der Parameter in Flash den Wert:
Das ist schon das richtige Escaping für das Einfügen als VARCHAR oder TEXT in MySQL. Anstatt
sich auf den Automatismus zu verlassen, sollte man die „magic quotes“ aber abschalten, jede
Eingabe sorgfältig prüfen und das Escaping bewußt durchführen.
Dazu ein Beispiel: Eine Zitatensammlung soll Zitate in mehreren Sprachen enthalten (hier von
Marie Curie):
Bei der Eingabe von Texten muss hier also nicht nur auf das Escaping von Anführungszeichen
und Backslashes geachtet werden, sondern auch auf die richtige Behandlung von Unicode.
Dafür verwenden wir die Funktion mysql_real_escape_string. Um das SQL-Statement zu-
171
sammenzubauen wird hier außerdem die Funktion sprintf verwendet. Diese Funktion baut
aus einem Template und mehreren einzufügenden Werten einen String.
$txt = $_GET['txt'];
$quelle = $_GET['quelle'];
$sql = sprintf("INSERT INTO input (txt,quelle) VALUES ('%s', '%s')",

mysql_real_escape_string($txt),
mysql_real_escape_string($quelle)
);
mysql_query($sql);
In einem zweiten Schritt soll nun ermöglicht werden, einzelne Zitate aus der Datenbank zu
löschen. Dazu wird jeweils zum Programm delete.php verlinkt und der Schlüssel des zu lö-
schenden Datensatzes übergeben.
Abbildung 139: Link zum Löschen eines Datensatzes
Ein erster Entwurf für das delete.php Programm könnte so lauten — aber Achtung: dieser
Entwurf enthält ein schweres Sicherheitsproblem!
$id = $_GET['id'];
mysql_query( "DELETE FROM input WHERE id=$id" );
Dieses Programm ist anfällig für folgende Attacke: Ein Aufruf über folgende URL
delete.php?id=9%20OR%201=1
setzt den Parameter id auf Wert „9 OR 1=1“. Das führt dazu, dass folgendes SQL-Statement
ausgeführt wird:
DELETE FROM input WHERE id=9 OR 1=1
Und dieses Statemant löscht nicht einen Datensatz sondern alle Datensätze. Es ist also not-
wendig die Eingabe genau zu überprüfen bevor sie in einem SQL-Statement verwendet wird.
In diesem Beispiel gilt: nur wenn es sich um eine ganze Zahl handelt darf sie verwendet wer-
de. Das wird hier mit einer Regular Expression überprüft:
$id = $_GET['id'];
if( ! preg_match( '/^\d+$/', $id ) ) {

error_log("hack: $id statt id in delete.php.");
exit;
}
mysql_query( "DELETE FROM input WHERE id=$id" );
header("Location: list-zitate.php");
172
Nach dem Löschen wird der Browser automatisch an ein anderes PHP-Programm weitergelei-
tet, das den Status der Datenbank anzeigt.
9.2.5 Tabellentypen, Beziehungen und Transaktionen
Eine kleine Adress-Datenbank soll zu jeder Person eine oder mehrere Adressen speichern.
Dafür sind zwei Tabellen notwendig: eine für die Personen, eine für die Adressen. Sobald man
mit Beziehungen arbeitet wäre referentielle Integrität wünschenswert. Dafür braucht man
den Tabellentyp InnoDB. Der Default-Typ MyISAM ist besonders für viele Lese- und wenige
Schreib-Zugriffe und für hohe Lesegeschwindigkeit optimiert, bietet aber keine Unterstützung
für referentielle Integrität.
CREATE TABLE `person` (

`pid` bigint(20) NOT NULL auto_increment,
`vorname` varchar(80) NOT NULL,
`nachname` varchar(80) NOT NULL,
PRIMARY KEY (`pid`)
) ENGINE=InnoDB;
CREATE TABLE àdresse` (

àid` bigint(20) NOT NULL auto_increment,
`pid` bigint(20) NOT NULL,
`strasse` varchar(100) NOT NULL,
`plz` varchar(10) NOT NULL,
òrt` varchar(100) NOT NULL,
`land` varchar(2) NOT NULL,
PRIMARY KEY (àid`),
KEY `pid` (`pid`)
) ENGINE=InnoDB;
Da wir InnoDB verwenden, können wir nun die Beziehung explizit machen:
ALTER TABLE àdresse`

ADD CONSTRAINT àdresse_ibfk_1`
FOREIGN KEY (`pid`)
REFERENCES `person` (`pid`)
ON DELETE CASCADE;
Bei Web-Applikationen kommt es oft zur unerwarteten Unterbrechung des Programms. Damit
trotzdem die Daten in der Datenbank immer konsistent bleiben, verwenden wir Transaktio-
nen: Die Transaktion stellt sicher, daß die gewünschte Veränderung in der Datenbank entwe-
der vollständig durchgeführt oder gar nicht durchgeführt wird — auf keinen Fall wird „bloß
die Hälfte“ gemacht.
Wenn eine neue Person mit der ersten Adresse eingefügt wird, stellt die Transaktion sicher,
daß sowohl Person als auch Adresse gespeichert wird:
mysql_query("START TRANSACTION");
$sql = sprintf("INSERT INTO person (vorname,nachname) VALUES ('%s', '%s')",
mysql_real_escape_string($_GET['vorname']),
mysql_real_escape_string($_GET['nachname'])
);
$ok = mysql_query($sql);
if ( ! $ok ) {
173
mysql_query("ROLLBACK");
echo("<p>Error beim Einfügen von person</p>");
exit;
}
$pid = mysql_insert_id();
$sql = sprintf("INSERT INTO adresse ( pid, strasse, plz, ort, land )

VALUES ( %d, '%s', '%s', '%s', '%s' )",
$pid,
mysql_real_escape_string($_GET['strasse']),
mysql_real_escape_string($_GET['plz']),
mysql_real_escape_string($_GET['ort']),
mysql_real_escape_string($_GET['land'])
);
$ok = mysql_query($sql);
if ( ! $ok ) {
mysql_query("ROLLBACK");
echo("<p>Error beim Einfügen von adresse</p>");
exit;
}
mysql_query("COMMIT");
Mit START TRANSACTION wird die Transaktion gestartet. Mit COMMIT wird sie abgeschlossen,
erst dann werden alle Änderungen an der Datenbank wirklich durchgeführt. Tritt ein Fehler
auf, dann wird ein ROLLBACK ausgelöst, der alle Änderungen in der Datenbank rückgängig
macht. Falls das PHP-Programm abstürzt bevor das COMMIT abgesetzt wird, wird im Daten-
bankserver ebenfalls ein ROLLBACK ausgelöst.
9.2.6 Andere DB-Schnittstellen
Wie anfangs erwähnt ist diese MySQL Schnittstelle die primitivste Schnittstelle die in PHP zur
Verfügung steht. Abschließend noch ein kurzer Ausblick auf andere Schnittstellen: MDB2,
ADODB und Zend Framework.
MDB2 24 aus dem "PHP Extension and Application Repository" (PEAR) ist datenbank-unabhängig
und unterstützt derzeit 8 verschiedene Datenbanken, darunter MySQL, Postgres und Oracle.
In MDB2 können mit prepare SQL-Statements vorbereitet und später mit execute mehrmals
ausgeführt werden. Mit Fragezeichen als Platzhaltern wird dabei das Escaping automatisch
erledigt:
$types = array('integer', 'text', 'text');

$sth = $mdb2->prepare('INSERT INTO numbers VALUES (?,?,?)', $types, MDB2_PREPARE_MANIP);
$affectedRows = $sth->execute( array(1, 'eins', 'die erste Zahl') );

$affectedRows = $sth->execute( array(2, 'zwei', 'noch eine Zahl') );
ADODb orientiert sich an Microsofts ActiveX Data Objects (ADO). Ein aktuelles Tutorial finden
Sie im phpmagazin 25.
24
http://pear.php.net/manual/en/package.database.mdb2.php
25
http://phpmagazin.de/itr/online_artikel/psecom,id,529,nodeid,62,_language,de.html
174
Im Zend Framework gibt es die Komponente Zend_Db 26. Dieser Komponente erlaubt den „Zu-
sammenbau“ von SQL-Statements über Methoden:
$minimumPrice = 100;
$maximumPrice = 500;
$select = $db->select()
->from('products', array('product_id', 'product_name', 'price'))
->where('price < ?', $minimumPrice)
->orWhere('price > ?', $maximumPrice)
->order('product_name');
Das Statement kann auch im Nachhinein noch verändert werden:
$select->reset( Zend_Db_Select::ORDER );
$select->order('product_id');
Das Zend Framework bietet auch eine Komponente 27 die ein Mapping von DB-Tabelle auf PHP-
Klasse ermöglicht (Table Data Gateway Design Pattern und Row Data Gateway Design Pat-
tern).
class Person extends Zend_Db_Table_Abstract

{
protected $_name = 'person'; // Tabelle in der DB
protected $_primary = 'pid'; // Primary key
protected $_sequence = true; // --||-- ist auto_increment
}
$table = new Person();
$data = array(
'created_on' => new Zend_Db_Expr('CURDATE()'),
'vorname' => 'Brigitte',
'nachname' => 'Jellinek'
);
$table->insert($data);
$where = $table->getAdapter()->quoteInto('vorname = ?', 'Brigitte');
$table->delete($where);
Leider ist keine dieser moderneren Datenbank-Schnittstellen im Standard Lieferumfang von

PHP enthalten. Für kleine Projekte oder in altem Code findet man deswegen sehr oft die ein-
fache, MySQL-spezifirsche Schnittstelle. Beim Start eines neuen oder größeren Projektes soll-
ten Sie aber die moderneren Lösungen in Betracht ziehen.
9.3 onEnterFrame
In diesem Kapitel werden wir den „Takt“ von Flash aufgreifen, um damit Bewegung
zu erzeugen.
26
http://framework.zend.com/manual/en/zend.db.html
27
http://framework.zend.com/manual/en/zend.db.table.html
175
WWW und Multimedia: onEnterFrame
Ein Flash-Film folgt einem fixen Takt – den Frames pro Sekunde. Alle Zeitleisten im Film –
egal ob Hauptzeitleiste, Zeitleiste eines Movieclips, oder Zeitleisten in einer mit loadMo-
vie() geladenen swf-datei —folgen diesem Takt.
Umgekehrt können Sie diesen Takt beim Programmieren nützen. Auf jeder Zeitleiste kann
man eine onEnterFrame Funktion anbringen. Diese Funktion wird dann jedes Mal, wenn ein
neuer Frame angezeigt wird, ausgeführt.
In den letzten paar Flash-Versionen gibt es mehrere Schreibweise für onEnterFrame. In Ac-
tionscript 2 funktionieren alle diese Schreibweisen nebeneinander.
Die alte Schreibweise verwendet onClipEvent(enterFrame) { am

// alt
onClipEvent: MovieClip
}
Die neue Schreibweise funktioniert mit function onEnterFrame() { am

// modern, erste Schreibweise
einer Funktion namens onEnterFrame. MovieClip
}
Oder man schreibt eine Funktion mit an- function bewegung() {

…
derem Namen, und weist diese dann
}
onEnterFrame zu. Das ist praktisch wenn onEnterFrame = bewegung;
man die Funktion später austauschen will: // später:
onEnterFrame = pause;
Oder man weist der Eigenschaft onEnter- onEnterFrame = function() {

…
Frame eine anonyme Funktion ohne Na-
};
men zu (wie in jQuery).
Die zweite oder dritte Schreibweise empfehle ich. Die Zuweisung funktioniert auch von „au-
ßerhalb“ des MovieClips:
ball_mc.onEnterFrame = bewegung;
9.3.1 Eine Zeichnung wird Schritt für Schritt aufgebaut.
Abbildung 140: Schrittweiser Aufbau einer Zeichnung
Die Funktion onEnterFrame, die für Abbildung 140 verwendet wurde, befindet sich auf der
Hauptzeitleiste und sieht so aus:
176
var x = 0;
function onEnterFrame()
{
if (x < 400) {
lineStyle(x / 70, 0xFF6600);
moveTo(10 + x, 10);
lineTo(400 - x, 100 + x);
x = x + 20;
}
}
Was genau gezeichnet wird, ist hier nicht so wichtig. Wichtig ist: bei jedem Aufbau eines
neuen Frames wird eine Linie gezeichnet.
Wenn die Framerate der Datei also auf 12 frames per second eingestellt ist bedeutet das: die
20 Linien werden in ca. 1,5 Sekunden gezeichnet.
Diese onEnterFrame- Funktion wird bis in alle Ewigkeit wieder und wieder aufgerufen. Nur
das if sorgt dafür, dass ab einem gewissen Punkt nichts Neues mehr gezeichnet wird.
9.3.2 Zeichnung neu aufbauen
Eine Kurve wird angezeigt, mit Anfangs-, End-, und Kon-

trollpunkt. Die drei Punkte kann man mit Drag-and-Drop
positionieren, die Kurve wird dabei immer wieder neu
gezeichnet, sie scheint sich mit zu bewegen.
In diesem Beispiel wird der Frame-Aufbau für eine Neu-

zeichnung der gesamten Zeichnung verwendet. Dazu muß
jeweils die alte Zeichnung gelöscht werden:
Abbildung 141: Neu-Aufbau einer Zeichnung
{
// alte zeichnung löschen
clear();
lineStyle(4, 0xff0000);
moveTo(dot1_mc._x, dot1_mc._y);
curveTo(
controlDot_mc._x, controlDot_mc._y,
dot2_mc._x, dot2_mc._y
);
}}
177
9.3.3 Uhr
Die aktuelle Uhrzeit wird grafisch angezeigt: Die Uhrzeit erfährt man von Flash über das Date
Objekt:
var my_date:Date = new Date();

var sek:Number = my_date.getSeconds();
Hier das vollständige Programm, nur das Zeichnen der Zeiger fehlt noch:
{
clear();
var my_date:Date = new Date();
var sek:Number = my_date.getSeconds();
var min:Number = my_Date.getMinutes();
// Minutenzeiger zeichnen
// Sekundenzeiger zeichnen
}
9.3.4 Bühne und Maus
Ein paar Kleinigkeiten, die bei den folgenden Beispielen gebraucht werden: Die Größe der
Bühne erfährt man über das Stage-Objekt:
Stage.width
Stage.height
Die Position des Mauszeigers ist in zwei Variablen gespeichert:
_xmouse
_ymouse
Den normalen Mauszeiger kann man verstecken:
Mouse.hide();
9.3.5 Ball im Spielfeld
Ein Ball bewegt sich gleichförmig über die Bühne, am Rand der Bühne prallt er ab.
Die Koordinaten der MovieClip Instanz sind über die Variablen _x und _y jederzeit zugänglich
und können auch verändert werden.
Für dieses Beispiel werden wir zwei zusätzliche Werte in der MoviClip-Instanz des Balles spei-
chern, diese beiden Variablen bilden den Bewegungsvektor:
ball_mc.vektorx = 10;
ball_mc.vektory = -20;
178
Diese Werte bedeuten: in jedem Frame soll sich der Ball 10 Pixel nach rechts und 20 Pixel
nach oben bewegen – damit das so passiert, müssen wir aber noch ein entsprechendes Pro-
gramm schreiben.
Abbildung 142: Bewegungsvektor, vorher, nachher
Wie muß so ein Programm zur Bewegung aussehen? Die neue Position des Balls berechnet sich
aus der alten Position plus Bewegungsvektor:
_x = _x + vektorx;
_y = _y + vektory;
Dieser Code muß regelmäßig ausgeführt werden, gehört also in die onEnterFrame Funktion
des Balles.
Abbildung 143 zeigt was passiert, wenn der Ball gegen die Wand prallt: erstens darf der Ball
nicht durch die Wand gehen. Und zweitens verändert sich der Bewegungsvektor des Balls.
Abbildung 143: Bewegungsvektoren beim Abprallen
Im Beispiel prallt der Ball von rechts gegen die senkrechte Wand. Dabei bleibt die Y-
Komponente des Bewegungsvektors gleich, die X-Koordinate wird umgekehrt (aus einer nega-
tiven Zahl wird eine positive Zahl).
179
if ( _x < 0 ) {
vektorx = -vektorx;
}
Die Veränderung der Bewegung stimmt schon, aber der Ball „taucht in die Wand ein“. Die _x
Koordinate des Balles gibt ja an, wo der Registrierpunkt des Balles ist, wenn _x = 0 dann ist
der Ball halb in der Wand:
Abbildung 144: Ball hat Koordinate _x=0
Die Breite und Höhe des Balls können wir aus _width und _height auslesen.
if ( _x < _width/2 ) {
_x = _width/2;
vektorx = -vektorx;
}
Für jede der vier Wände braucht man so ein if in der onEnterFrame-Funktion des Balles. So
sieht das Gesamt-Programm aus:
Auf der Hauptzeitleiste:
mein_ball_mc.vektorx = 15;
mein_ball_mc.vektory = 10;
Auf der Instanz des Balles:
onClipEvent(EnterFrame) {
_x = _x+vektorx;
_y = _y+vektory;
if (_y>Stage.height-_height/2) {
_y = Stage.height-_height/2;
vektory = -vektory;
}
if (_x>Stage.width-_width/2) {
_x = Stage.width-_width/2;
vektorx = -vektorx;
}
if (_y<_height/2) {
_y = _height/2;
vektory = -vektory;
}
if (_x<_width/2) {
_x = _height/2;
vektorx = -vektorx;
}
}
180
9.3.6 Ball und Hittest
Ein Ball trifft auf einen Ziegelstein und zerschlägt diesen.
Um zu testen, ob ein MovieClip ein anderes berührt, verwendet man die Funktion hitTest.
Hier ist der Code des Ziegelsteins:
if(this.hitTest(_root.mein_ball_mc)) {
// Animation kaputter Ziegel starten
this.gotoAndPlay(2);
}
Die Funktion hitTest kann auf zwei Arten verwendet werden: MovieClip gegen MovieClip
oder MovieClip gegen Koordinate.
MovieClip gegen MovieClip (in Abbildung 145 links) testet, ob die Begrenzungs-Boxen der Mo-
vieClips sich berühren. Bei Ziegelsteinen ist das kein Problem, bei komplizierteren Formen
gibt das oft einen Fehlalarm.
MovieClip gegen Koordinate (in Abbildung 145 rechts) testet, ob an der Koordinate wirklich
ein sichtbarer Teil des MovieClips ist – egal wie die Begrenzungsbox aussieht.
Koordinate
berührt Movie-
MovieClip berührt
Clip nicht
MovieClip
Koordinate berührt
MovieClip
Abbildung 145: die zwei Varianten des hitTest
Achtung: ein hitTest ist ein „teurer“ Actionscript-Befehl den man sparsam einsetzen muss.
Wenn Sie ein Spiel mit 1.000 Raumschiffen programmieren können Sie nicht 12 mal in der
Sekunde testen ob irgend ein Raumschiff irgend ein anderes Raumschiff berührt — das wären
500.000 hitTests. Bei so vielen Objekten müßten Sie einen geschickten Algorithmus verwen-
den um die Zahl der nötigen Tests zu vermindern.
9.3.7 Viele Projekte
Mit onEnterFrame und hitTest können Sie nun viele neue Projekte machen – fast alle klassi-
schen Computerspiele lassen sich mit diesen Werkzeugen umsetzen. Hier ein paar Beispiele:
181
Übung 21) Schreiben Sie ein Programm, das eine Zeichnung Schritt für Schritt aufbaut. Ver-
wenden Sie den Zufall!
Übung 22) Schreiben Sie ein Programm, das bei jedem Bildaufbau einen Pfeil vom Nullpunkt
zur aktuellen Position des Cursors zeichnet.
Übung 23) Schreiben Sie ein Programm, das die aktuelle Uhrzeit grafisch darstellt.
Übung 24) Schreiben Sie das Computerspiel Pong: ein Ball bewegt sich über das Spielfeld, das
unten „offen“ ist; mit einem einfachen Schläger versucht man, den Ball im Spiel zu halten.
Übung 25) Schreiben Sie das Computerspiel Breakout: ein Ball bewegt sich über das Spielfeld,
das unten „offen ist“; mit einem einfachen Schläger versucht man, den Ball im Spiel zu hal-
ten. Im oberen Teil des Spielfeldes sind viele Ziegelsteine, diese werden vom Ball zerschlagen
und bringen Punkte.
182
10.Termin: Security + loadVar

Am zehnten Termin der Lehrveranstaltung werden wieder die Übungsaufgaben besprochen.
Das Thema der Sicherheit von Webapplikationen wird noch einmal vertiefend behandelt, so-
wie das Laden von Daten vom Server aus einer Flash Applikation mit loadVar.

• Dass die Datenübertragung zwischen Browser und Server abgehört werden kann – be-
sonders einfach dann, wenn der Client über W-LAN mit dem Internet verbunden ist.
Dass https davor schützt.
• Dass jede PHP-Datei eine öffentliche Schnittstelle ist an ein Angreifer viele Tausend
Einbruchs-Versuche machen kann, bevor Sie das bemerken. Dass alle Daten, die vom
User kommen, verdächtig sind.
• Dass Ihre Website, wenn Sie Input von Usern wieder als HTML-Code ausgibt, für Cross
Site Scripting Attacks (XSS) anfällig ist.

• Im Team zusammenarbeiten, um eine Applikation aus Flash (am Client) und PHP (am
Server) zu erstellen.

• Dass das Laden vom Server asynchron erfolgt (so wie bei AJAX oder beim Streaming).

• Den Stand eines Counters mit loadVar laden.

• Dass die Konfiguration von SSL nur der Betreiber des Webservers vornehmen kann.

• User-Input mit Regular Expressions prüfen.
10.2 HTTP
HTTP ist in RFC 2616 definiert. HTTP baut auf TCP auf, d.h. die hier dargestellten Daten wer-
den über eine TCP-Verbindung zwischen Client und Server übertragen. In Kapitel 1.1.3 wurde
HTTP schon einmal grob vorgestellt; nun werden wir HTTP genauer betrachten.
183
WWW und Multimedia: HTTP
10.2.1 Ablauf im Überblick
Egal ob der Vorgang durch das Eintippen einer URL oder durch das Anklicken eines Linkgs ge-
startet wird — das Laden einer Webseite über HTTP funktioniert immer gleich.
1. Der Browser analysiert die URL: falls Sie eine IP-Adresse enthält geht’s weiter zum näch-
sten Schritt. Falls sie einen Domain Namen enthält wird dieser mittels DNS-Lookup in die
entsprechende IP-Adresse übersetzt.
2. Der Browser baut eine TCP-Verbindung zum Server auf (Default: Port 80)
3. Der Browser sendet über die TCP-Verbindung einen HTTP-Request; dieser besteht aus
einer ersten Zeile, einem Header und manchmal einem Body.
4. Der Webserver nimmt den Request entgegen und analysiert ihn. Meistens interpretiert er
ihn als Aufforderung, eine bestimmte Datei aus dem Dateisystem zu lesen.
5. Der Webserver schickt über die TCP-Verbindung einen HTTP-Response an den Browser,
dieser besteht aus einem Statuscode, z. B. „200 OK\n\n“, einem Header und dem Inhalt
des angeforderten Dokuments.
6. Der Browser nimmt das Dokument in Empfang, stellt es geeignet dar, und beendet die
TCP-Verbindung.
Dieser einfache Ablauf kann durch die Verwendung von Proxies und Caches sowie durch das
wiederholte Abrufen von Dokumenten vom selben Server komplizierter werden — das ignorie-
ren wir aber erst einmal.
10.2.2 Aufbau von Request und Response
Jede Anfrage des Clients und jede Antwort des Servers besteht aus einer ersten Zeile mit
besonderer Bedeutung, einem Header und einem Body. Header und Body funktionieren ähn-
lich wie bei einer E-Mail:
Hier ein Beispiel für einen Request:
Erste Zeile GET /rezensionen/list.php3?no=20 HTTP/1.1
Beliebig viele Header- Host: www.biblio.at
Zeilen User-Agent: Mozilla/5.0 (Win98; de-AT) Gecko/20020311

Accept: text/html;q=0.9,text/plain;q=0.8,*/*;q=0.1
Accept-Language: de-at, de;q=0.66, en-us;q=0.33
Accept-Encoding: gzip, deflate, compress;q=0.9
Accept-Charset: ISO-8859-15, utf-8;q=0.66, *;q=0.66
Eine leere Zeile trennt

Header und Body (\n\n,
184
hier unsichtbar)
Body (leer)
Die erste Zeile einer Client-Anfrage besteht aus: Methode, URL-Fragement und HTTP-
Versionsnummer. Die meist-verwendete Methode ist GET. Sie erinnern sich: bei Web-
Formularen muss man die Methode angeben, mit der die Daten an den Server übertragen wer-
den sollen (Kapitel 6.4.2, Seite 113). Das ist diese Methode.
Hier ein Beispiel für eine Server-Antwort:
Erste Zeile HTTP/1.0 200 OK
Beliebig viele Header-Zeilen Date: Sat, 27 Apr 2002 05:52:57 GMT

Server: Apache/1.3.9 (Unix) Debian/GNU
Content-Type: text/html
Eine leere Zeile trennt Hea-

der und Body (\n\n, hier
unsichtbar)
Body des HTTP-Response <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitio-
nal//EN">
enthält das gesamte Doku-
<html><head><meta http-equiv="Content-Type"
ment
content="text/html; charset=iso-8859-1">
<title>Rezensionsdatenbank des Österreichischen Bi-
bliotheksWerkes</title>
<link rel="Stylesheet" href="rezensionen.css" />
</head><body>nix</body></html>
Die erste Zeile der Server-Antwort besteht aus der HTTP-Versionsnummer, dem Statuscode
und einem erklärenden Text zum Statuscode, der aber nicht standardisiert ist.
Die wichtigsten Statuscodes sind 200 (ok), 404 (not found), 403 (forbidden).
Header-Zeilen gibt es sehr viele; relativ wenige davon werden von Clients und Servern wirk-
lich beachtet.
Host: www.biblio.at Wichtig wenn der Server unter mehre-

Request
ren Domain Names (aber nur einer IP-

Adresse) erreichbar ist.
User-Agent: Mozilla/5.0 (Win98; de-AT) Selbstdarstellung des Clients: welcher

Request
Gecko/20020311
User-Agent: Mozilla/4.0 (compatible; MSIE Browser, welche Version. Die meisten
5.5; Windows 98; Win 9x 4.90) Clients lügen, und behaupten sie wä-
ren Mozilla, erst in der Klammer folgt
die richtige Angabe.
185
Referer: http://my.app.at/form.html Woher kommt der Client? URL der

Request
vorigen Seite—falls von dort ein Link

hierher verfolgt wurde oder ein FORM.
Kann daktiviert werden!
Date: Sat, 27 Apr 2002 05:52:57 GMT Datum und Uhrzeit am Server
Response
Server: Apache/1.3.9 (Unix) Debian/GNU Selbstdarstellung des Servers

Response
Content-Type: text/html MIME-Type des im Body gelieferten

Response
Dokuments
10.2.3 HTTP abhören
Wie können Sie HTTP beobachten? Entweder mit einem allgemeinen Netzwerk-Sniffer wie
Ethereal/Wireshark 28 oder mit der Firefox-Extension Live HTTP Headers 29.
Abbildung 146: HTTP abhören mit Wireshark (links) und Live HTTP Headers (rechts)
Die folgenden Anwendungsbeispiele wurden mit Live HTTP Headers mitgeschnitten.
10.2.4 Seite laden oder Formulardaten senden mit GET
Die Methode GET wird bei den meisten HTTP-Anfragen verwendet - sowohl bei normalen Links
als auch beim Senden von Formulardaten mit GET. Die URL kann dabei ein Fragezeichen ge-
folgt von Parametern und Werten enthalten.
28
http://www. wireshark. org/
29
http://livehttpheaders. mozdev. org/
186
Request = Client an Server
Response = Server an Client
GET /rezensionen/list.php3?no=20 HTTP/1.1

Host: www.biblio.at
User-Agent: Mozilla/5.0 (Win98; de-AT) Gecko/20020311
HTTP/1.0 200 OK
Date: Sat, 27 Apr 2002 05:52:57 GMT
Content-Type: text/html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitio-

nal//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-1">
<TITLE>Rezensionsdatenbank des Österreichischen
BibliotheksWerkes</TITLE>
<LINK REL=Stylesheet HREF=rezensionen.css>
</HEAD>
Die Länge der übertragenen Daten aus dem Formular ist hier begrenzt durch die Länge der
URL. Für größere Datenmengen (z. B. beim Upload von Dateien) gibt es die Methode Post.
Die Header, die mit Accept beginnen, können (laut Standard) dem Aushandeln von Sprache,
Datentyp, Encoding dienen; werden aber von Servern und Clients nur teilweise beachtet.
Accept: text/html;q=0.9,text/plain;q=0.8,*/*;q=0.1 bedeutet laut Standard, daß der Client
das Dokument lieber als HTML als als Plain Text erhalten würde. Im realen Web wird aber
unter einer URL immer nur ein Dokumententyp angeboten. Wenn man eine PDF-Version der
gleichen information anbietet, dann geschieht dies unter einer anderen URL.
Accept-Language würde dem Aushandeln der Sprache dienen. Dazu müssten die UserInnen
aber im Browser die Sprach-Präferenz konfigurieren:
187
Abbildung 147: Festlegen der Sprach-Präferenz im Browser Firefox
Da aber kaum jemand diese Konfiguration vornimmt wird die Sprach-Aushandlung kaum ver-
wendet. Einziges mir bekanntes Beispiel einer Webseite die unter der gleichen URL in ver-
schiedenen Sprachen erhältlich ist ist die Homepage von Debian:
Abbildung 148: Homepage von Debian, verschiedene Sprachen bei gleicher URL
10.2.5 Senden von Formulardaten mit Post
Bei POST werden die Daten aus dem Formular nicht in der URL, sondern im HTTP-Body der
Anfrage übertragen. Die Codierung (kaufmännisches-Und zwischen den namen=wert-Paaren, +
statt Leerzeichen, %-Schreibweise für Sonderzeichen) bleibt gleich. Hier gibt es keine Be-
schränkung der Länge.
Request = Client an Server

POST /rezensionen/list.php3 HTTP/1.1
Host: www.biblio.at
Referer: http://www.biblio.at/rezensionen/formular.htm
Content-Type: application/x-www-form-urlencoded
Content-Length: 129
no=20&limit=1&katalog=all&isbn=&nachname=Jellinek&vornam
e=&titel=&schlagwort1=&schlagwort2=&Bool=AND&verl=&von=&
bis=&submit=SUCHE
188
Die Antwort des Servers unterscheidet sich nicht zwischen GET und POST (außer Sie haben das
in PHP absichtlich so programmiert).
10.2.6 Umleitung an neue URL
Mit dem Statuscode 301 kann der Server anzeigen, dass die Seite an eine neue URL übersie-
delt ist. Der Webbrowser schickt dann sofort eine Anfrage an die neue URL, die LeserIn be-
merkt so eine Weiterleitung meist gar nicht.
(Wie auf Seite 123 beschrieben, können Sie diese Umleitung von PHP aus mit dem header-
Befehl auslösen)
Client an Server
Server an Client
GET / HTTP/1.1
Host: www.rezensionen.at
HTTP/1.0 301 Moved Permanently

Date: Sat, 27 Apr 2002 05:52:26 GMT
Location: http://www.biblio.at/rezensionen/
Content-Type: text/html; charset=iso-8859-1
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML><HEAD>
<TITLE>301 Moved Permanently</TITLE>
</HEAD><BODY>
<H1>Moved Permanently</H1>
The document has moved <A
HREF="http://www.biblio.at/rezensionen/">here</A>.<P>
</BODY></HTML>
GET /rezensionen/ HTTP/1.1
Host: www.biblo.at
und so weiter.
189
10.2.7 Authentisierung nach RFC 2617
Der Webserver kann so konfiguriert werden, dass er Dokumente nur nach Eingabe von User-
name und Passwort liefert. Der Browser zeigt dafür ein Eingabefenster an:
Abbildung 149: Eingabefenster für HTTP Authentisierung in verschiedenen Browsern
Falls eine Authentisierung über diese Methode stattgefunden hat, finden Sie den Usernamen
in PHP in der Variable $_SERVER['PHP_AUTH_USER'].
Auf Ebene des HTTP-Protokolls betrachtet funktioniert diese Authentisierung wie folgt: bei
der ersten Anfrage des Clients schickt der Server einen Status-Code 401 (nicht authorisiert).
Client an Server
Server an Client
GET /pr/ HTTP/1.1
Host: www.sbg.ac.at
HTTP/1.0 401 Unauthorized
Date: Sat, 27 Apr 2002 06:05:08 GMT
Server: Apache/1.3.22 (Unix)
WWW-Authenticate: Basic realm="unineu"
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML><HEAD>
<TITLE>401 Authorization Required</TITLE>
Daraufhin zeigt der Browser das Paßwort-Eingabefenster an. Nach Eingabe von Username und
Passwort schickt der Browser die gleiche Anfrage erneut, diesmal aber mit der zusätzlichen
Header-Zeile Authorization. In dieser Zeile werden Username und Passwort (leicht verschlüs-
selt) mitgeschickt.
190
Wenn Username und Passwort stimmen, schickt der Server eine positive Antwort und das Do-
kument.
Der Browser wird bei allen weiteren Anfragen an diesen Server ebenfalls die Authorization-
Zeile mitschicken.
GET /pr/ HTTP/1.1

Host: www.sbg.ac.at
Authorization: Basic dHI6cHJyMDBy
HTTP/1.0 200 OK
Date: Sat, 27 Apr 2002 06:05:11 GMT
Server: Apache/1.3.22 (Unix)
<html lang="de">
<head>
<title>Universität Salzburg - Büro für Public
Relations</title>
Die Konfiguration des Webservers für diese Art der Authentisierung wird hier am Beispiel von
Apache gezeigt. In dem Ordner, der gesperrt werden soll, wird eine Datei .htaccess angelegt:
AuthType Basic
AuthName "Intranet der Uni Salzburg"
AuthUserFile /home/stud9/pass
require valid-user
Weiters wird eine Passwort-Datei mit dem Namen pass angelegt:
brigitte:$apr1$Yj1. . . . . $N72ZRLbh91/q33fhGqlJW1
clemens:$apr1$al1. . . . . $VZguOHeYTiQ7emGSIj4lh.
Diese Datei können Sie mit einem Generator am Web 30 erzeugen oder mit dem Programm
htpasswd das mit Apache mit geliefert wird. Das funktioniert z.B. auf der Kommandozeile
von Windwos so:
C:\xampp\apache\bin>htpasswd -c pass brigitte

New password: ********
Re-type new password: ********
Adding password for user brigitte
C:\xampp\apache\bin>htpasswd pass clemens
New password: ***
Re-type new password: ***
Adding password for user Clemens
30
http://www.phpbb.de/diverses/htpasswd.php
191
Diese Methode funktioniert auch auf student.cosy.sbg.ac.at. Wenn Sie einen eigenen Apache
Server betreiben, können Sie diese Authentisierungmethode mit verschiedenen Backends ver-
wenden (LDAP, Datenbank, …) — dafür gibt es verschiedene Apache Module 31.
Mit der HTTP-Authentisierung ist das HTTP-Protokoll nicht mehr zustandslos (stateless) — je
nachdem, ob schon eine Authentisierung erfolgt ist, reagiert der Server unterschiedlich beim
Abrufen ein und derselben URL.
10.2.8 Cookies
Cookies funktionieren analog zur HTTP-Authentisierung, sind aber an keine bestimmte Seman-
tik und keine bestimmte Darstellung gebunden: Ein Cookie wird vom Server gesetzt, und ab
dann vom Client bei jeder Anfrage mit gesendet.
Cookies werden sehr oft für die Authentisierung verwendet, hier z.B. bei der Anmeldung zu
Google Analytics. Die Eingabe von Username und Paßwort erfolgt dabei über ein normales
Webformular. (Umfang und Anzahl der Cookies sowie die Anzahl der Weiterleitungen wurden
vereinfacht, das Paßwort ersetzt und zusätzliche Zeilenumbrüche eingefügt)
Client an Server
Server an Client
POST /accounts/ServiceLoginBoxAuth HTTP/1.1
Username und Paßwort
Host: www.google.com
werden mit POST über-
Content-Type: application/x-www-form-urlencoded
tragen
Content-Length: 198
continue=http%3A%2F%2Fwww.google.com%2Fanalytics%2Fhome%2F%3Fet
%3Dreset%26hl%3D&service=analytics&nui=1&hl=en&GA3T=KWFs5RAYvhg
&Email=bjelli%40gmail.com&Passwd=sagined
&PersistentCookie=yes&rmShown=1
Server antwortet mit einer HTTP/1.x 302 Moved Temporarily
Weiterleitung, dabei wird ein Set-Cookie: SID=DQAAAHcAAACb...r6X5BF-Qg;

Domain=.google.com;Path=/;
Cookie namens SID gesetzt. Expires=Tue, 05-Jun-2018 11:57:24 GMT
Set-Cookie: GoogleAccountsLocale_session=en
Content-Type: text/html; charset=UTF-8
Server: GFE/1.3
Location: https://www.google.com/analytics/home/?et=reset
GET /analytics/home/?et=reset&hl= HTTP/1.1 Bei der nächsten Anfra-
Host: www.google.com ge schickt der Client
Cookie: SID=DQAAAHcAAACb...r6X5BF-Qg bereits das Cookie mit.
. HTTP/1.x 200 OK
Content-Type: text/html; charset=UTF-8
Server: ga-reporting-fe
31
http://httpd.apache.org/docs/2.0/mod/#other
192
Beim Setzen des Cookies können folgende Einschränkungen vorgenommen werden: Beschrän-
kung auf eine bestimmte Domain, auf einen bestimmten Pfad; Setzen eines Ablaufdatums
(Expires).
Cookies in PHP
In PHP finden Sie die bereits gesetzten Cookies, die vom Browser zurückgesendet wurden, im
Array $_COOKIES (und — zusammen mit GET und POST-Parametern — in $_REQUEST). Neue
Cookies können Sie mit setcookie() setzen.
Cookies in Javascript
Im Client können Cookies mit Javascript gelesen und geschrieben werden: über die Eigen-
schaft document.cookie des Dokument-Objekts.
Achtung: beim lesenden Zugriff auf diese Eigenschaft enthält man einen String mit allen Coo-
kies, die gerade gültig sind.
Zum Setzen von neuen Cookies wird auf die Eigenschaft zugewiesen. Zum Setzen mehrere
Cookies wird wiederholt zugewiesen — das hat aber (noch) keinen Einfluß auf den Wert den
man aus document.cookie auslesen kann:
alert(document.cookie); // Zeigt die gültigen Cookies

document.cookie = "farbe:grün";
document.cookie = "anzahl: 3";
document.cookie = "passwort: total super geheimes aber recht langes passwort";
alert(document.cookie); // Zeigt immer noch die ALTEN Cookies !!!
Erst wenn ein neuer Request an den Server erfolgt, werden die neu gesetzten Cookies mit
gesendet: erst wenn die Antwort wieder dargestellt wird, sind die neuen Cookies in Javascript
über document.cookie lesbar!
Cookies und Sessions

PHP bietet die Möglichkeit mit Hilfe von automatisch erstellten Cookies Sessions zu verwal-
ten. Hier ein Beispiel aus der PHP Dokumentation:
<?php
session_start();
if (!isset($_SESSION['zaehler'])) {
$_SESSION['zaehler'] = 0;
} else {
$_SESSION['zaehler']++;
}
?>
Sobald im PHP-Programm session_start() aufgerufen wird, wird überprüft, ob schon ein

Session-Cookie vorliegt und falls nicht, ein neues an den Client gesandt. Bei weiteren Aufru-
fen von PHP-Programmen am selben Server kann nun der Client an hand des Cookies identifi-
ziert werden. Diese PHP-Programme können dann wieder auf die gleichen Daten im Array
$_SESSION zugreifen.
193
10.2.9 HTTPS
HTTPS ist HTTP über Secure Socket Layer (SSL) — d.h. auf Ebene der TCP-Verbindung werden
alle übertragenen Daten verschlüsselt. Ausserdem bietet SSL die Möglichkeit, daß sich der
Server und der Client mit einem Zertifikat ausweisen.
Ob HTTPS oder HTTP verwendet wird, hängt von der Konfiguration des Server ab. Wenn Sie
nur Webspace in „Untermiete“ benutzen (wie auf student.cosy.sbg.ac.at), können Sie
HTTPS nicht aktivieren.
Die Verschlüsselung und Entschlüsselung des gesamten Verkehrs braucht CPU-Zeit — der Web-
server kann also weniger Anfragen bedienen als mit HTTP. Eine Möglichkeit diese Belastung
vom Webserver „fernzuhalten“ ist die Terminierung von SSL auf einem anderen Rechner.
10.2.10 Proxies
Das HTTP-Protokoll sieht die Möglichkeit von Proxies vor. Ein Proxie ist eine „Zwischenstati-
on“ die HTTP-Verkehr weitergibt, der Proxy agiert also auf der einen Seite als HTTP-Server,
auf der anderen Seite als HTTP-Client. Im Browser kann ein Proxie konfiguriert werden:
Abbildung 150: Proxy-Konfiguration in Firefox: Extras - Einstellungen - Erweitert - Netzwerk – Verbindung
Ist ein Proxy konfiguriert dann baut der Browser die HTTP-Verbindung nicht direkt zum Ziel-
rechner auf, sondern zum Proxy, und verändret die Form der ersten Zeile der HTTP-Anfrage:
die vollständige URL wird angegebe:
GET http://www.sbg.ac.at/pr/ HTTP/1.1
Proxies können gleichzeitig als Cache fungieren: Anfragen und Antworten werden gespei-
chert; erfolgt die gleiche Anfrage noch einmal, kann die gespeicherte Antwort verwendet
werden.
194
10.3 Security von Web-Applikationen

Sicherheit ist ein heikles Thema, deswegen eine Warnung vorneweg: dies ist keine vollständi-
ge Darstellung aller möglichen Sicherheitsrisiken. Betrachten Sie dieses Kapitel nur als Ein-
stieg in das Thema, nicht als endgültige Abhandlung.
10.3.1 Keine Ausreden
Egal wie klein, unwichtig, unbekannte Ihre Web-Applikation ist: das ist keine Ausrede dafür
sich nicht um Security zu kümmern.
Selbst die kleinste, unwichtigste, unbekannteste Applkation wird „zum Spaß“ von Vandalen
angegriffen. Selbst die kleinste, unwichtigste, unbekannteste Applikation wird angegriffen um
Kontrolle über den Server zu erlangen, und dann von diesem Server aus weitere Attacken auf
weitere Ziele zu starten.
Sie sind also nicht nur für sich selbst, sondern auch zum Schutz von Anderen für die Sicherheit
Ihrer Applikation verantwortlich.
Dies gilt in besonderem Maße wenn Sie Ihre Web-Applikatoin als open source am Internet zur
Verfügung stellen. Wenn ihr Programm erfolgreich ist, und auf vielen Webservern installiert
wird, dann wird jede Sicherheitslücke gefunden und ausgenutzt werden!
Sie sollten dabei nicht vergessen: Die Einstiegsseite Ihrer Applikation ist nicht der einzige
Angriffspunkt: jede einzelne URL der Applikation ist ein möglicher Angriffspunkt. Jede URL ist
eine öffentliche Schnittstelle der Webapplikation!
10.3.2 Beispiele für Attacken
Was will die böse HackerIn erreichen? Hier ein paar Beispiele für mögliche Attacken:
Durch eine große Anzahl von Zugriffen den Server langsamer machen oder zum Absturz brin-
gen (Denial of Service Attack, DoS).
Die Applikation dazu bringen, daß sie ein nicht vorgesehenes Verhalten zeigt, z.B. SPAM Mail
versendet, Passwortdateien anzeigt, E-Mail Adressen von KundInnen anzeigt, …
Die Applikation dazu bringen, daß sie ins Filesystem schreibt.
Die Applikation dazu bringen, daß sie Befehle ausführt.
Durch gezielte Eingaben nicht vorgesehene SQL-Befehle ausführen um Daten zu zerstören

oder zu erlangen (SQL Injection).
195
WWW und Multimedia: Security von Web-Applikationen
Einer UserIn eine URL einer bekannten Applikation mailen die schon eine Session-ID enthält;
wenn sich die UserIn über diese URL anmeldet, kann die HackerIn die Session auch mitbenut-
zen (Session Fixation).
Einer UserIn eine URL oder eine HTML-Seite mailen, die (in Kombination mit den Zugriffsrech-
ten/Cookies dieser UserIn) unerwartetes Verhalten bei einer Web-Applikation bewirkt, wenn
diese aufgerufen/angzeigt wird (Phishing).
Die Applikation so manipulieren, daß anderen UserInnen HTML+Javascript-Code angezeigt

wird, der eine Attacke auf diese UserInnen ist (Cross Site Scripting) — um deren Coo-
kies/Session auszulesen oder deren Zugriffsrechte zu benutzen (Cross Site Request Forgerie).
Wenn verschiedene User einen Webserver teilen: die „Nachbarn“ ausspionieren, gemeinsam
genutzte Pfade für Uploads und Sessions ausnutzen.
10.3.3 Tipps für mehr Sicherheit in PHP
Din paar Tipps wie sie Sicherheits-Probleme vermeiden können.
Tipp 1: Es gibt keine Security im Client! Z.B. Eingabeprüfung in Javascript ist nett, ersetzt
aber keine Eingabeprüfung am Server.
Tipp 2: Eingaben aus $_GET, $_COOKIE oder $_POST lesen, nicht aus $_REQUEST. Dort finden
sich Strings. Diese Strings prüfen und in den richtigen Datentyp konvertieren (siehe Funktio-
nen zum Prüfen von Daten, Seite 197).
Tipp 3: Daten vor der Verwendung in SQL, auf der Kommandozeile, als URL oder als Webseite
richtig escapen (siehe Funktionen zum Escapen von Daten, Seite 198). (Escapen ersetzt nicht
die Prüfung!)
Tipp 4: Include nur mit fixem Pfad, niemals include( $_POST['includepath'] );
Tipp 5: Include-Dateien immer mit Endung .php speichern—nicht als .txt oder .inc, die
könnten über das Web lesbar sein.
Tipp 6: Niemals Datei-Uploads erlauben mit denen neue Dateien mit der Endung .php in den
Webspace geschrieben werden können.
Tipp 7: Falls möglich Prepared-Statements für SQL verwenden.
Tipp 8: Sessions nicht nach dem Login weiter verwenden, sondern nach dem Login neue Ses-
sion erzeugen mit session_regenerate_id().
Tipp 9: Wenn mehrere User einen Webserver teilen: mit den Konfigurations-Optionen
open_basedir und safe_mode möglichst getrennt halten.
196
Konfiguration von PHP

In der folgenden Tabelle finden Sie wichtige Konfigurationseinstellungen von PHP. Am Besten
setzten Sie dieses Konfigurationen in der Datei php.ini für den ganzen Webserver fest. Falls
Sie keinen Zugriff auf php.ini haben können manchen Konfigurationen auch zur Laufzeit mit
ini_set() vorgenommen werden.
register_globals = Off Verhindert, daß aus Parametern automatisch PHP-Variablen

werden — das war in frühen PHP-Versionen ein Automatismus.
safe_mode = On Beschränkt die Rechte des PHP-Skripts auf den Rechtebereich

einer UserID, z.B. erlabut chdir() nur in Verzeichnisse, die zur
UserID passen.
safe_mode_gid = On Verwende für die Beschränkungen des safe_mod die GroupID

statt der UserID.
magic_quotes_gpc Sollen GET- und POST-Parameter und Cookies automatisch es-

caped werden? Defaultwert ist ja, auf nein setzen!
error_reporting = E_ALL Mehr Fehlermeldungen sehen …
log_errors = On … im Logfile des Webservers
session.referer_check Sessions nur akzeptieren, wenn sie mit dem richtigen Referer
kommen.
PHP Funktionen zum Prüfen von Daten

Alle Eingaben sind suspekt und müssen erst sorgfältig geprüft werden. Hier ein paar Funktio-
nen zum Prüfen von Eingaben:
ctype_alnum Check for alphanumeric character(s)
ctype_alpha Check for alphabetic character(s)
ctype_digit Check for numeric character(s)
ctype_lower Check for lowercase character(s)
ctype_space Check for whitespace character(s)
ctype_upper Check for uppercase character(s)
Mit Regular Expressions kann man noch komplexere Prüfungen erstellen:
preg_match_all Perform a global regular expression match
197
WWW und Multimedia: Security von Web-Applikationen
preg_match Perform a regular expression match
PHP-Funktionen zum Escapen von Daten

In einer Web-Applikation werden verschiedene Technologien kombiniert: HTML, Javascript,
URLs, PHP, SQL, Kommandozeile und Filesystem des Betriebsystems. Jede der hier erwähnten
Sprachen und Standards hat eigene, andere Regeln für das Escapen von Sonderzeichen. Hier
ein paar Funktionen, die dabei helfen:
html_entity_decode Convert all HTML entities to their applicable characters
htmlentities Convert all applicable characters to HTML entities
htmlspecialchars_decode Convert special HTML entities back to characters
htmlspecialchars Convert special characters to HTML entities
strip_tags Strip HTML and PHP tags from a string
Urlencode URL-encodes string
Urldecode URL-decodes string
escapeshellcmd Escape shell metacharacters
mysql_real_escape_string Escapes special characters in a string for use in a SQL statement for
MySQL
10.3.4 Mit unsicheren Scripts leben
Idealerweise wird jedes einzelne PHP-Skript sorgfältig auf Sicherheitsprobleme geprüft, wer-
den regelmäßig Security-Updates an fertigen PHP-Applikationen vorgenommen. Das kann aber
schnell unübersichtlich werden: selbst eine kleine Firma hat vielleicht eine öffentliche Web-
seite, ein Extranet, ein internes Wiki, ein Forum,… also viele verschiedene Applikationen.
mod_security schafft eine zentrale Stelle, an der alle Web-Applikationen geschützt und beo-
bachtet werden können:
Wie in Abbildung 151 gezeit wird in der „demilitarisierten Zone“ (DMZ) wird Webserver mit
reverse Proxy installiert. Vom Internet aus betrachtet ist diese Maschine der Webserver auf
dem alle Applikationen laufen. „reverse Proxy“ bedeutet, dass jeder HTTP-Request an
www.firma.at (für den Client unbemerkt) an den richtigen Webserver phpbox.firma.at wei-
tergegeben wird. Ein direkter Zugriff vom Internet auf phpbox.firma.at wird durch die Fire-
walls verhindert.
198
www.firma.at
phpbox.firma.at
Abbildung 151: mod_security und reverse proxy in der demilitarized zone
Das Apache-Modul mod_security wird auf www.firma.at installiert und bietet die Möglich-
keit Zugriffe auf Ebene von HTTP im Detail zu überprüfen, zu verändern, zu blocken. Damit
können Sicherheitslücken von verschiedenen Web-Applikationen an einer zentralen Stelle
behoben werden.
Wurde z.B. in einer Web-Applikation nicht auf das korrekte escapen von SQL geachtet, so dass
Sie anfällig für SQL-Injection ist, dann können mit mod_security Anfragen mit verdächtigen
Parametern einfach blockiert werden, sie erreichen nie die Web-Applikation:
Die Anfrage GET /delete.php?id=6 wird an phpbox weitergeleitet, eine Anfrage

GET /delete.php?id=6+or+1=1 wird blockiert.
(Siehe http://modsecurity.org/)
199
WWW und Multimedia: Daten vom Server laden in Flash
10.4 Daten vom Server laden in Flash

Kombinieren Sie die Stärken von Flash mit den Stärken serverseitiger Programmie-
rung. Flash hat dabei die Rolle, Information darzustellen. Das Programm am Ser-
ver kann Daten auf Dauer speichern, die Kommunikation mit anderen Usern her-
stellen, etc.
Betrachten wir noch einmal die Kommunikation zwischen Client und Server im Web:
Abbildung 152: Kommunikation zwischen Webbrowser, Webserver und Flash Player
Der Webbrowser stellt eine Anfrage an den Webserver (Pfeil 1 in Abbildung 152), der Webser-
ver antwortet in dem er z.B. HTML-Daten sendet (Pfeil 2). Der Browser liest die HTML-Daten
und stellt sie dar. Wenn ein object Tag enthalten ist, der auf eine swf-Datei verweist dann
stellt der Webbrowser eine weitere Anfrage an den Server (Pfeil 1) um die swf-Datei zu laden.
Der Server sendet die swf-Datei (Pfeil 2).
Nun startet der Browser den Flash Player als Plugin, und übergibt ihm die Kontrolle über ei-
nen Bereich des Browser-Fensters. Der Flash Player erhält die swf-Datei und stellt diese dar.
So weit, so bekannt.
In der swf-Datei können nun Actionscript-Befehle enthalten sein, die den Flash Player anwei-
sen, eine Anfrage an den Server zu schicken (Pfeil 3). Wenn die Antwort des Server einlangt
(Pfeil 4), wird in der swf-Datei eine onLoad Funktion aufgerufen.
10.4.1 Einfache Daten laden
Wir verwenden ein PHP-Programm auf dem Server student.cosy.sbg.ac.at, das mehrere
Zugriffszähler führt und immer den aktuellen Stand des Zählers ausgibt. Aufruf des Counters:
counter.php?name=brigitte
200
Die Ausgabe des Programms ist nicht für die Anzeige im Browser gedacht, sondern für die
Weiterverarbeitung in Flash. Der Output sieht so aus:
count=123
Mit dem (veralteten) Actionscript-Befehl loadVars oder mit dem (moderneren) Objekt load-
Vars kann man diese Daten in Flash lesen.
So sieht ein Flash-Programm aus, das diese Daten abholt und liest:
1 url = "http://student.cosy.sbg.ac.at/.../counter.php?username=b";
2 l = new LoadVars();
3 l.onLoad = function(success) {
4 if (success) {
5 trace("daten sind da: " + this.count);
6 } else {
7 trace("fehler beim Laden von " + url);
8 }
9 }
10 l.load(url);
11 trace("...gleich geht's weiter");
Zeilen eins bis neun sind nur die Vorbereitung, erst Zeile 10 startet den asynchronen Lade-
Vorgang vom Webserver.
Wenn dann viele Millisekunden später die Daten vom Webserver eintreffen wird die onLoad-
Funktion des LoadVars-Objekts (die in Zeile 3 bis 9 definiert wurde) gestartet.
Innerhalb dieser onLoad-Funktion sind die Daten vom Webserver als Eigenschaften von this
lesbar: hier also this.count.
Setzen Sie den Counter mit einer kleinen Bühnen-Größe um, damit Sie diesen Flash-Film als
keines Widget in eine vorhandene HTML-Seite einbinden können.
10.4.2 XML für Slideshow
Ein PHP-Programm liefert eine Liste der am Server vorhandenen Bilder als XML-Daten an
Flash. Flash stellt die Bilder in einer Slideshow dar. Das PHP-Programm wird als Datei mit der
Endung .php in den Ordner mit den Bildern gespeichert:
<?php
header("Content-Type: application/xml");
$bilder = glob("*.jpg");
echo("<bilder>\n");
foreach( $bilder as $bild ) {
echo("<bild imgurl='$bild' />\n");
}
echo("</bilder>\n");
?>
201
WWW und Multimedia: Daten vom Server laden in Flash
Der Output des PHP-Programmes sind XML-Daten:
<bilder>
</bilder>
Testen Sie zuerst das PHP-Programm alleine mit dem Browser: der Browser kann den XML-
Output des Programmes gut darstellen. Wenn Sie ein zusätzliches Bild in den Ordner laden,
sollte es beim nächsen Aufruf im XML erscheinen.
Abbildung 153: Darstellung von XML-Daten im Webbrowser Firefox
Das Laden der XML-Daten erfolgt wieder asynchron, mit dem XML-Objekt:
var xml:XML = new XML();
// Leerzeichen und Formatierungen in XML

// sollen ignoriert werden:
xml.ignoreWhite = true;
// wenn Daten fertig gelanden wurden

// rufe die Funktion XMLgeladen auf
xml.onLoad = xmlGeladen;
Die Struktur der XML-Tags wird in Flash als Baum von Objekten dargestellt; das XML-Objekt ist
dabei die Wurzel des Baumes.
Abbildung 154: Darstellung der XML- Struktur als Baum
202
In Javascript wird dasselbe Prinzip für die Darstellung des HTML-Dokuments als Baum von
Objekten verwendet; Sie kennen es dort unter dem Namen Document Object Model oder kurz
DOM.
Auch die Befehle, Funktionen, Eigenschaften zur Manipulation des DOM sind in Actionscript
gleich wie in Javascript:
Mit den Eigenschaften firstChild und childNodes kann man in diesem Baum navigieren:
xml.firstChild entspricht dem bilder Tag.
xml.firstChild.firstChild entspricht dem ersten bild Tag.
xml.firstChild.childNodes ist ein Array das alle bild Tags enthält,

xml.firstChild.childNodes[0] entspricht also wieder dem ersten bild Tag.
Jedes Objekt im Baum enhält ein Objekt attributes, das die Namen und Werte der Attribute
speichert:
xml.firstChild.firstChild.attributes.imgurl liefert den Wert des imgurl-Attributes

des ersten Bildes.
Die Funktion xmlGeladen liest nun die Daten aus dem XML-Baum und schreibt die Namen der
Bilder in ein Array namens bilderListe, dieses Array wird in weitere Folge von der Funktion
zeigeBilder verwendet um die Slideshow zu starten.
function xmlGeladen() {
var xnode:XMLNode;
// hier wird ausgelesen wie viele nodes sich im XML befinden.
anzahlBilder = xml.firstChild.childNodes.length;
for(var i:Number = 0; i < anzahlBilder; i++) {
// Bild nummer i
xnode = xml.firstChild.childNodes[i];
bilderListe.push(xnode.attributes.imgurl);
}
// Darstellung der Slideshow starten
zeigeBilder();
}
203
WWW und Multimedia: Literatur- und Web-Tipps
Anhänge
Literatur- und Web-Tipps
Web + HTTP
HTTP 1.1: RFC 2616 - http://www. w3. org/Protocols/rfc2616/rfc2616.html
HTML + CSS
Homepage des WWW-Consortiums. http://www.w3c.org/
HTML Validator des WWW-Consortiums. http://validator.w3.org/
Jellinek, Brigitte (2006): Handbuch Webdesign. Wikibook.

http://de.wikibooks.org/wiki/Webdesign
Freeman, Elisabeth (2006): HTML mit CSS & XHTML von Kopf bis Fuß. O'Reilly. ISBN 978-
3897214538
Shea, Dave/ Holzschlag, Molly: CSS Zen Garden. http://csszengarden.com/
Müller, Peter (2007): Little Boxes. Markt+Technik-Verlag. ISBN 978-3827242242
Münz, Stefan: Selfhtml. http://de.selfhtml.org
Münz(2006): Professionelle Websites. Programmierung, Design und Administration von Web-

seiten. Addison-Wesley, München. ISBN 3827323703
PHP
PHP Homepage mit Dokumentation in verschiedenen Sprachen: http://php.net
Templating-System Smarty für PHP. http://smarty.php.net/
PEAR - PHP Extension and Application Repository. http://pear.php.net
KERSKEN,Sascha (2005): Praktischer Einstieg in MySQL mit PHP. O'Reilly Vlg GmbH & Co.. ISBN
3897214032.
Lerdorf, Rasmus (2006): Programmieren mit PHP. O'Reilly; 2. Auflage. ISBN 978-3897214736
Schmidt, Stephan (2007): PHP Design Patterns. O'Reilly. ISBN 978-3897214422.
Welling, Luke (2004): MySQL-Tutorial. München: Addison-Wesley. ISBN 978-3827321695.
204
SHIFLETT,Chris (2005): Essential PHP Security. O'Reilly Media, . ISBN 059600656X.
Javascript + AJAX
FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN
3897214911.
CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.
POWERS,Shelley (2007): Adding Ajax. O'Reilly Media, . ISBN 0596529368.
jQuery Library. http://jquery.com/
Prototype Library. http://www.prototypejs.org/
Flash
MOOCK,Colin (2004): Essential ActionScript 2.0. O'Reilly Media, . ISBN 0596006527.
MOOCK,Colin (2007): Essential ActionScript 3.0. Adobe Dev Library. ISBN 0596526946.
Flashtuts — Adobe Flash Tutorials. http://www.flashtuts.de/htdocs/
Flash Kit. http://www.flashkit.com/
Flash Forum. http://www.flashforum.de/forum/
205
WWW und Multimedia: Stichwortverzeichnis
Stichwortverzeichnis
3d 88 eine Funktion ... 137
Absende-Button 115 Dienst 57
Abspielkopf 84 Document Object Model 211
Abstraktion DOM 211
mit Funktionen 136 Drehung 89
Actionscript 99 verändern mit Tween 87
Actionscript 2 99 Eigenschaften 75
Actionscript 3 99 Ende der Zeit 85
Adobe 70 Endlos-Schleife 138
Aggregator 154 F9 99
Aktionen-Fenster 99 Farbe
Aktiver Bereich 97 beim Zeichnen einer Linie 134
Alpha beim Zeichnen mit lineTo und curveTo 134
verändern mit Tween 87 Farbeimerwerkzeug 78
Anführungszeichen Faulheit 138
für Strings 111 Fehlersuche 103
animiertes Gif 72 fieldset 117
Argument Film-Explorer 103
einer Funktion 137 Fireworks 72
asynchron 210 firstChild 212
attributes 212 Frame 83
auditiv 73 Framename 111
aufrufen Frames pro Sekunde 183
eine Funktion ... 137 Füllung 76
auskommentieren 105 Funktion 136
Austausch von Daten 82 Geschwindigkeit
Auswahlwerkzeug 77 eines Bewegungstweens 90
Automatische Codeformatierung 99 glob 67
Bewegung gotoAndPlay() 110
mit Bewegungstween 87 Grafiksymbol 94
Bézierkurve 135 Größe
Bibliothek 81 eines Buttons 97
Bildfeld 117 verändern mit Tween 87
Bildname 111 HTML 72
Bildrate 83 Variable an Flash übergeben 161
Blog Reader 152 ImageReady 72
Blogger 151 include 101
Braille 73 Instanz
Bühne 75 eines Symboles 81
Button 96, 117 Instanznamen 81
Größe 97 interaktiv 72
Checkbox 114 Javascript 73
childNodes 212 Kommentar 102, 105
closedir 67 Kontur 76
Code-Block 106 Kurve 134
curveTo 134 Langsamer machen 85
Darstellung mit Zwiebelschalen 86 leeres Schlüsselbild 85
Datei-Upload 117 legend 117
Datenbank 56 lineStyle 134
defekter Bewegungstween 88 lineTo 134
definieren Linien in Füllungen konvertieren 78
206
Liste (Eingabefeld) 115 Audio 157

load Video 158
LoadVars 210 String 111
loadMovie() 183 Symbol 79
LoadVars 210 Tangente 77
Manipulation der DOM 212 target 107
Menü 115 Tastaturkürzel
moveTo 134 für die Zeitleiste 85
MovieClip 94 für Werkzeuge 79
Multimedia 73 Template 56, 151
Name Textbereich 114
für einen Frame 111 Textfeld 114
Objektzeichnungsmodell 76 Tintenfasswerkzeug 78
on (release) 109 Tooltipps 99
onEnterFrame 184 im Aktionen-Fenster 101
onLoad trace() 105
LoadVars 210 Transformation-Punkt 80
opendir 67 Transformationspunkt
Original 79 für Drehung verwenden 89
Passwort-Feld 114 Transparenz
Pfad 89 verändern mit Tween 87
Pfadebene 89 Tween
play() 109 Probleme bei Bewegungstween 88
Radiobutton 115 Unsichtbares Feld 117
Radiobuttons 115 URL-Codierung 163
readdir 67 vektorbasiert 70
Registrierungspunkt Verhaltensweisen 99
für Pfadanimation verwenden 89 Verstecktes Feld 117
Registrierungs-Punkt 80 Video Streaming 158
release 109 Weblog 150
Rollover-Bild 73 Publishing System 151
RSS Reader 152 Template 151
Schaltfläche 96 Werkzeug 75
Schleife 138 Werkzeugleiste
Endlos- 138 für Aktionen 99
Schlüsselbild 84 while-Schleife 138
leer 85 Wiederverwertung
mit Inhalt 84 von Buttons 98
Schneller machen 85 Windows-Dienst 57
skalierbar 70 XAMPP Control Panel 57
Skript-Navigator 103 Zeitleiste 83
SMIL 74 mit Actionscript steuern 110
Sound-Ereignis 156 Zurücksetzen-Button 115
stop() 109 Zwiebelschalen 86
Streaming
207

WWW Und Multimedia 2008

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WWW Und Multimedia 2008

Uploaded by

Copyright:

Available Formats

WWW und Multimedia

(cc) Brigitte Jellinek

1.TERMIN: MULTIMEDIA UND WEB 2 6.TERMIN: PARAMETER + MOVIECLIPS 87

2.TERMIN: CSS UND BILDER 15 7.TERMIN: AJAX, DRAWING API 124

Was Sie wissen sollten

• Wer die Standards des Webs definiert

• Wie eine HTTP Anfrage funktioniert

• 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

• Fehler in einem XHTML-Dokument ausbessern bis es valide ist

• 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

1.2 Was ist MultiMedia?

1.1 Was ist das Web?

• URL (Uniform Resource Locators)

• HTTP (Hypertext Transfer Protocol)

• (X)HTML (Hypertext Markup Language)

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

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

Abbildung 3: Ein Browser zeigt eine lange Webseite an

Diese URL zerfällt in 4 Teile:

kurse.horus.at Domain Name (oder IP-Adresse) des Webservers

/2006-ss/www-mm/index.html Wird vom Webserver interpretiert, meist eine

Literatur Textmarke innerhalb des Dokuments

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

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

4. Er sendet eine http-Anfrage:

8. Der Browser scrollt das Dokument bis zur Textmarke literatur

9. Der Browser beendet die TCP-Verbindung

Folgende Character Entities müssen Sie verwenden:

Gewünschtes Zeichen Character Entity

Gewünschtes Zeichen Character Entity

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

1. Tags sind zwischen spitzen Klammern eingeschlossen.

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

Die wichtigsten Tags werden weiter unten noch vorgestellt

Sogenannter "whitespace" - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche

<p>Halli Hallo</p> <p>

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

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

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

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

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

Code Ein älterer Browser interpretiert das als:

1.2.6 Text formatieren

Formate, die Text-Blöcke definieren:

Zentrierter Text <p style="text-align:center;">Text text text,

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

Format für kleinere Text-Abschnitte

Sehr stark betonter Text (meist fett) Eine <strong>wichtige</strong> Sache

Betonter Text (meist kursiv) und eine <em>interessante</em> Sache

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 <span style="font-face:Arial;">Text</span>

Bild (URL absolut) <img src="http://www.google.at/intl/de_at/images/logo.gif" />