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" />
<bild imageurl="img/DSC_3462.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.
Was die Leute aus der Flash-Gruppe wissen sollten

• Dass man die SWF- und die FLV-Datei in den Websapce hochladen muß damit der
Flash Video-Player funktioniert.
Was die Leute aus der Flash-Gruppe können sollten

• Eine Video-Datei in das FLV-Format konvertieren.
• Einen Video-Player gestalten.
Was die Leute aus der PHP-Gruppe wissen sollten

• 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.
Was die Leute aus der PHP-Gruppe können sollten

• 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
WWW und Multimedia: Flash als Audio und Video-Player
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

Sprache

WWW Und Multimedia 2008

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

WWW Und Multimedia 2008

Hochgeladen von

Copyright:

Verfügbare Formate

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>