Document

WWW und Multimedia Universität Salzburg

Sommersemester 2008

(cc) Brigitte Jellinek

1.TERMIN: MULTIMEDIA UND WEB 2 1.2 Was ist MultiMedia? 3 1.1 Was ist das Web? 3 1.2 HTML 7

2.TERMIN: CSS UND BILDER 15 2.2 Cascading Style Sheets - CSS 16 2.3 Bilder im Web 25

3.TERMIN: CSS FÜR LAYOUT UND :HOVER26 3.2 Rahmenbedingungen für Layout 27 3.3 CSS für Layout 30 3.4 Graceful Degradability 36

4.TERMIN: JAVASCRIPT MIT JQUERY 38 4.2 Hintergrund zu Javascript 39 4.3 Javascript Beispiel 41 4.4 jQuery 45

5.TERMIN: EINSTIEG IN PHP+FLASH 48 5.2 Einstieg in PHP 51 5.3 Flash oder nicht Flash? 65 5.4 Zeichnen in Flash 70 5.5 Animation in Flash 79

6.TERMIN: PARAMETER + MOVIECLIPS 87 6.2 MovieClips und Buttons 89 6.3 Einstieg in Actionscript 94 6.4 Webformulare und Parameter 108

7.TERMIN: AJAX, DRAWING API 124 7.2 AJAX 125 7.3 PHP und E-Mail 126 7.4 Die Flash Drawing API 127

8.TERMIN: WEB 2.0, BLOGS UND VIDEO136 8.2 Web 2.0 137 8.3 Weblogs 143 8.4 Flash als Audio und Video-Player149 8.5 Wordpress 157

9.TERMIN: DB UND ONENTERFRAME 166 9.2 PHP und MySQL 167 9.3 onEnterFrame 175

10.TERMIN: SECURITY + LOADVAR 183 10.2 HTTP 183 10.3 Security von Web-Applikationen 195 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

3

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

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/

WWW und Multimedia: Was ist das Web?

4

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.


5

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:

WWW und Multimedia: Was ist das Web?

6

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:[email protected]

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)


7

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 üöä ÜÖÄ ß é ñ

WWW und Multimedia: HTML

8

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:


9

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


10

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 <jump>supercoole</jump> Webseite!!!! </p>

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

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

Schlecht Besser:

<p>Zu den hüpfenden Terminen sind noch Plätze im Kurs frei: </p> <ul> <li><jump>Montag</jump> <li>Dienstag <ul>

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

Auf älteren Browsern geht die wichtigste Information verloren!

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

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

1.2.6 Text formatieren

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


11

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 Schriftart

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

Text in einer bestimmen Farbe <span style="color:red;">rot</span>

1.2.7 Bilder

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


12

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

Bild (URL relativ) <img src="neu.gif" />

Bild mit Ersatztext <img alt="neu" src="neu.gif" />

Bild mit Größenangabe <img width=10 height=5 src="neu.gif" />

Bild nach links (Text fließt rechts vorbei)

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

1.2.8 Links

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

Link zu Webseite (absolute URL) <a href="http://cnn.com">zu CNN</a>

Link zu Webseite im selben Ordner (relative URL)

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

Link zu E-Mail Adresse <a href="mailto:[email protected]">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.


13

<ul> <li>punkti</li> <li>punkti</li> </ul>

<ol> <li>eins</li> <li>zwei</li> <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:


14


15

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.

WWW und Multimedia: Cascading Style Sheets - CSS

16

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> <link rel="stylesheet" type="text/css" href="fh.css"> </head><body>

<h1>Das Studium</h1>

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

h1 { font-family: Arial; color: blue; } p:first-letter { font-size: large; }

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)


17

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

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

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

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

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

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

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

matieren, und nicht mit b, i, font.

2.2.1 Stylesheet Syntax

Beispiel h1,h2 { font-family: Arial, Helvetica, sans-serif; color: lightblue; } 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 serifenlosen3 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

Eine Regel

Selektor Deklaration


18

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 kann4). 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


19

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>


20

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.


21

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.


22

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:


23

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


24

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; }


25

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.

WWW und Multimedia: Bilder im Web

26

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


27

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.

WWW und Multimedia: Rahmenbedingungen für Layout

28

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.


29

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.

WWW und Multimedia: CSS für Layout

30

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; }


31

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.

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:

p { margin: 0px; }

#edvard { float:right; width:33%; }


32

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:


33

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.


34

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


35

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:

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.

margin-left

WWW und Multimedia: Graceful Degradability

36

<div id="main">

<div id="content"> <h1>Inhalt</h1> <p>Hier ist der Inhalt[. . . ]</p> </div>

<div id="navi"> [. . . ] </div>

</div>

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

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

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


37

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.

WWW und Multimedia: Graceful Degradability

38

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)

http://jquery.com/�


39

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

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

4.2.1 Javascript und Java

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

Javascript Java

Wer hat’s erfunden? Netscape Sun

Interpretiert Sprache Kompilierte Sprache

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

Verwendung Im Webbrowser, in Flash Überall (Chipkarten, am Server, im Browser, im Handy)

Projekte Meist kurzfristige Projekt mit wenigen Personen

Alle, auch Großprojekte mit vielen „Mannjahren“

ProgrammiererInnen Auch Web-DesignerInnen Nur InformatikerInnen

Objektorientierung Objekte und Prototypen Objekte und Klassen

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

4.2.2 Geschichte von Javascript

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

WWW und Multimedia: Hintergrund zu Javascript

40

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)


41

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

WWW und Multimedia: Javascript Beispiel

42

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.


43

<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=". . . "

onMouseOver=". . .

">

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

<input type="button"

onClick=". .

">

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

<form 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 selfhtml6.

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

WWW und Multimedia: Javascript Beispiel

44

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.


45

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

WWW und Multimedia: jQuery

46

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

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

<html> <head> <title>jQuery Beispiel</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("p .more").show(); $("p .extra").hide(); $("p .more").click(function() { $(this).next(".extra").toggle(); }); }); </script> <style> .more { color: blue; display: none; } </style> </head> <body> <p>Es war einmal <span class="more">mehr</span> <span class="extra">eine Prinzessin mit namen Erbse</span></p> <p>die lebte <span class="more">mehr</span> <span class="extra">in einem grosses schloss</span></p> <p>und aß <span class="more">mehr</span> <span class="extra">am liebsten Erdbeeren</span></p> </body> </html>

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

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

Oder noch einfacher:

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


47

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


48

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


49

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.


50

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.


51

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.

WWW und Multimedia: Einstieg in PHP

52

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.


53

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:


54

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:


55

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.


56

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>


57

07 </head><body> 08 <h1>PHP-Beispiel</h1> 09 <?php 10 $entfernung = 296; 11 $h = 2; 12 $min = 40; 13 $zeit = $h + $min / 60; 14 $kmh = $entfernung / $zeit; 15 echo "<p>$entfernung km in $h:$min sind $kmh km/h</p>\n"; 16 if( $kmh > 130 ) { 17 echo("<p><b>Das ist zu schnell!</b></p>\n"); 18 } 19 ?> 20 </body> 21 </html>

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

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 06 <title>Beispielseite für ein PHP-Programm</title> 07 </head><body> 08 <h1>PHP-Beispiel</h1> 09 <p>296 km in 2:40 sind 111 km/h</p> 10 </body> 11 </html>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beispielseite für ein PHP-Programm</title> </head><body> <h1>Wilde Mischung</h1> <?php $i = 0; while ( $i < 22 ) { ?> <p>Alles Gute zum Geburtstag <img src="torte.jpg" /> !</p> <?php $i++; }


58

?> <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. Smarty8. Der erste Schritt in diese Richtung wäre, die Berechnung an den Anfang der Datei zu stellen.

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

<?php // Berechnung zuerst $entfernung = 296; $h = 2; $min = 40; $zeit = $h + $min / 60; $kmh = $entfernung / $zeit; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beispielseite für ein PHP-Programm</title>

8 http://smarty.php.net/


59

</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 />"); }


60

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;


61

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


62

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"; } ?>


63

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


64

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.


65

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 *. swf9 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

WWW und Multimedia: Flash oder nicht Flash?

66

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


67

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.

Abbildung 35: (historisches10) 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.

WWW und Multimedia: Flash oder nicht Flash?

68

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.

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.

Abbildung 36: Rollover-Bild als Beispiel für einfache Interaktion


69

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.

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.

Abbildung 37: FLVPlayback Komponente

WWW und Multimedia: Zeichnen in Flash

70

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

Werkzeuge

Eigentschaften

Ebenen undZeitleiste

Bühne

Hinterbühne

DiverseFenster

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


71

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.


72

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

Abbildung 42: Kontur verformen mit dem Auswahl-Werkzeug


73

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


74

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.


75

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

Abbildung 48: Größe von swf-Dateien im Vergleich bei Verwendung von Formen oder Symbolen11

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


76

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


77

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.

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.

Options-Menü der Bibliothek


78

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.

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.

Bibliothek vonplayers.fla

Bibliothek aus-wählen


79

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

WWW und Multimedia: Animation in Flash

80

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:


81

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

Abbildung 61: Erstellung einer Bild-für-Bild Animation mit Hilfe der Zwiebelschalen-Darstellung

Aktivieren der Darstellung


82

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


83

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.


84

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

Abbildung 67: Bewegungstween mit mehreren Schlüsselbilder, Bew.Tween entlang eines Pfades


85

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.


86

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.


87

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.


88

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


89

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 üblich12 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.

WWW und Multimedia: MovieClips und Buttons

90

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.


91

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

WWW und Multimedia: MovieClips und Buttons

92

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.


93

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.

WWW und Multimedia: Einstieg in Actionscript

94

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.


95

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.


96

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"

Wer

k-ze

u gle

iste

Skri

pt-

Nav

i gat

or

Popu

p-M

enü

Ansi

chts

-O

ptio

nen

Code

weiter_btn


97

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().

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.

Link

s zu

wei

te-

ren

Seit

en

inde

r Fl

ash-

Hilf

e

Vers

ions

-H

inw

eise

Pseu

do-C

ode.

Para

met

er

Beis

piel

e


98

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.

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.

Abbildung 85: Der Skriptnavigator


99

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:


100

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.


101

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.


102

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.


103

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.

Abbildung 92: Navigation für das Laden von swf-Dateien

on (release) { loadMovie("1.swf", display_mc); }

on (release) { unloadMovie(display_mc); }


104

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.


105

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


106

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); gotoAndPlay("Happy");

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'); 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 !


107

Flußdiagram

Den gesamten Ablauf des Filmes könnte man in einem 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 Pfeilen.

Flußdiagramme sind ein sehr altes Werkzeug in der Pro-grammierung, sie wurden schon in den 70er-Jahren ver-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).

Abbildung 98: Flussdiagramm für den Film mit Verzweigung

Intro

Bad Happy

WWW und Multimedia: Webformulare und Parameter

108

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


109

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


110

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


111

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


112

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.


113

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


114

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:[email protected]" 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


115

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:


116

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


117

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

$_REQUEST

Dieses Array kombiniert die Daten aus $_GET und $_COOKIE und $_POST. Besser 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


118

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.

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.

html php


119

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.

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!';

php


120

} // 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" /> <input name="a" value="zweiter" />

print_r( $_GET["a"] );

zweiter

Eine Spezialität von PHP ist die Schreibweise von Parametern mit eckigen Klammern: solche Parameter setzt PHP in Arrays um.

Webformular PHP-Programm Output

<input name="a[]" value="erster" /> <input name="a[]" value="zweiter" />

print_r( $_GET["a"] );

Array ( [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.


121

<?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; } "; ?>


122

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.


123

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! */ ?>


124

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.


125

Client

Formular wird ange-zeigt

Formular wird abge-schickt

UserIn interagiert mit dem Formular

Server Weite mit Formular wird angefordert

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 verwendet15. 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 erhält sehr schnell eine Reaktion auf ihre Klicks.

In der Illustration rechts sehen Sie wie zwei asynchrone HTTP-Anfragen nebeneinander 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 vermeiden, sollte man fertige Libraries verwenden, die die Browser-Unterschiede verbergen.

15 http://www.adaptivepath.com/publications/essays/archives/000385.php

WWW und Multimedia: PHP und E-Mail

126

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 src="jquery.js"></script> <script> $(document).ready(function(){ $("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( "[email protected]", "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:


127

$text <<<Ende Lieber Newsletter-Kunde! wir freuen uns, dass Sie unseren Newsletter zum Thema $thema abonniert haben. Ende; mail("[email protected]", "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 = [email protected]

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.

WWW und Multimedia: Die Flash Drawing API

128

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.


129

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.


130

Ü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(150,0); moveTo(150,100); moveTo(0,100); moveTo(0,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);


131

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); }


132

Ü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).


133

Ü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

Zweite Zufallszahl 0.512555140070617

Dritte Zufallszahl 0.321858525741845

Erste Zufallszahl 0.348519487306476

Zweite Zufallszahl 0.342851056717336

Dritte Zufallszahl 0.683320601005107

Meist braucht man keine Zahl zwischen Null und Eins, sondern eine größere Zahl. Dazu multi-pliziert man die Zufallszahl:


134

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


135

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


136

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


• Was Tim O’Reilly mit „Web 2.0“ gemeint hat und wie der Begriff heute verwendet wird.

• Das das Weblog eine Art Online-Tagebuch ist, das teils für private teils für journalisti-sche Zwecke verwendet wird.

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

• Dass Flash viele Möglichkeiten bietet, einen Streaming-Video-Player zu gestalten.


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


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


• Eine Video-Datei in das FLV-Format konvertieren.

• Einen Video-Player gestalten.


• Dass Wordpress-Themes aus CSS und PHP-Dateien in einem Unter-Ordner von wp-content/themes bestehen

• Dass Permalinks ohne Fragezeichen nur aktiviert werden können wenn der Webspace .htaccess-Dateien erlaubt und das Modul mod_rewrite aktiviert ist.


• Wordpress im eigenen Webspace installieren und anpassen


137

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:

http://www.oreillynet.com/lpt/a/6228#mememap�

WWW und Multimedia: Web 2.0

138

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


139

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?


140

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


141

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.


142

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.


143

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:

Der neueste Eintrag im Blog

Der zweitälteste Eintrag im Blog

ist sehr lange und enthält ein

Bild

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

In der Navigation rechts gibt es Ver-weise auf andere Webseiten und Blogs…

… und verschiedene Zugänge zu den alten Einträgen in diesem Blog: über Kategorien, Suche, Archive

http://de.wikipedia.org/wiki/Englische_Sprache�

http://de.wikipedia.org/wiki/Kombination#Sprachwissenschaft�

http://de.wikipedia.org/wiki/World_Wide_Web�

http://de.wikipedia.org/wiki/Logbuch�

http://de.wikipedia.org/wiki/Webseite�

WWW und Multimedia: Weblogs

144

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.


145

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>


146

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.


147

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


148

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.


149

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 archiviert16 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-rung der Erwartungshaltung – vielleicht wird im Jahre 2015 jeder über jeden wissen, wie er be-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

Abbildung 119: Beispiel eines Fotos, das ohne Wissen des Betroffenen erstellt und im Internet unter www.besoffene-dekorieren.de publiziert

wurde

WWW und Multimedia: Flash als Audio und Video-Player

150

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.


151

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.

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

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/

Abbildung 123: Einstellungen für Veröffentli-chungen: Audio-Qualität


152

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-Tags18. Die kann sogar der Windows Explorer anzeigen:

18 http://id3.org/


153

Abbildung 126: Darstellung der ID3-Tags in Windows Explorer

Flash beherrscht die Technik des Streamings. Das heißt: die mp3-Datei muss nicht vollständig geladen werden um sie abzuspielen. Sobald ein paar Sekunden Musik aus der Datei geladen sind, spielt Flash den Anfang ab. Das Laden und das Abspielen laufen dann gleichzeitig ab.

Trotzdem wird das Laden einer mp3-Datei (im Vergleich zu anderen Actionscript-Befehlen) sehr lange dauern - vielleicht eine ganze Sekunde. Es wäre nicht gut, wenn das ganze Flash-Programm während dieser Wartezeit „stehen bleiben“ würde.

Die Lösung für dieses Problem kennen Sie schon von AJAX: asynchrone Programmierung. Ein Verarbeitungsschritt, der besonders lange dauert – hier das Starten der mp3-Datei – wird ge-startet, aber sein Ende wird nicht abgewartet.

Erst wenn die mp3-Datei fertig geladen ist, bzw. wenn genug von der mp3-Datei geladen ist, damit man die ID3-Tags lesen kann, wird eine bestimmte Funktion aufgerufen. Diese Funktion wird manchmal „Callback-Funktion“ genannt.

Ein einfaches Beispiel mit einer mp3-Datei und dem Lesen des ID3-Tags:

var music:Sound = new Sound(); music.onID3 = function() { trace("später: die Datei und ihre ID3-Tags wurden geladen"); }; music.loadSound("1.mp3", true); trace("sofort");

Ein Sound-Objekt wird erzeugt. Die Ereignis-Funktion onID3 des Sound-Objekts wird definiert. Dann wird das Laden einer mp3-Datei gestartet. Dieser Schritt kann lange dauern, deswegen wartet der mp3-Player nicht, sondern geht weiter zum nächsten Befehl.

Erst viele Millisekunden später, wenn der Anfang der mp3-Datei geladen wurde, wird Flash die Funktion onID3 aufrufen. Innerhalb dieser Funktion kann man auf this.id.songname und this.id.artist zugreifen. Diese Information kann man dann in einem dynamischen Textfeld anzeigen:

Abbildung 4: Benötigte Elemente: Dynamisches Textfeld, Buttons

Als Variablen auf der Hauptzeitleiste braucht man für den Audioplayer neben dem Sound-Objekt noch ein Variable (i), die anzeigt, welches Stück gerade gespielt wird (1,2,3…), und eine Variable, die anzeigt, wie viele Stücke es insgesamt gibt:

var i:Number = 1;


154

var max:Number = 3; var music:Sound = new Sound();

Die beiden Buttons zum Wechseln zwischen den Stücken verändern die Variable i, hier der Button, der nach rechts blättert:

on(release){ i++; if(i>max) i=1; loadNewSound(); }

Die Funktion loadNewSound faßt das Starten des Ladevorgangs und die Anzeige im Textfeld zusammen:

function loadNewSound() { anzeige_txt.text = "loading " + i; music.loadSound(i + ".mp3", true); }

Wenn Sie den Audioplayer wie hier beschreiben implementieren: Testen Sie ihn nicht nur am lokalen Computer, sondern auch auf einem Webserver – dort sind die Ladezeiten für die mp3-Dateien wesentlich höher!

8.4.4 Variablen für Flash in HTML setzen

Der Audio-Player ist schon ein sehr allgemein verwendbares Programm: Sie können den Player für verschiedene mp3-Dateien verwenden, ohne die fla-Datei editieren zu müssen. Die swf-Datei hat nur noch eine Einschränkung: die maximale Zahl der mp3-Dateien ist fix vorgege-ben. Um die Zahl von 3 auf 5 zu erhöhen, müsste man die fla-Datei wieder Öffnen, und eine neue swf-Datei erzeugen. Das ist unpraktisch.

Flash bietet uns für diese Problemstellung folgende Möglichkeit:

Man kann einzelne Variablen in der HTML-Datei festlegen, die die swf-Datei einbindet. Der von Flash erzeugte HTML-Code zum Einbinden des Audio-Players sieht so aus:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="…swflash.cab#version=8,0,0,0" width="220" height="14" id="audio-player" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="audio-player.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="audio-player.swf" quality="high" bgcolor="#ffffff" width="220" height="14" name="audio-player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>


155

Wenn man Variablen an die swf-Datei übergeben will, dann muss man die URL der swf-Datei verändern. Das heisst an zwei Stellen: in einem param Tag und im Embed Tag (oder bei Ver-wendung von Swf-Object als erstes Argument)

audio-player.swf?max=5

Dann steht die Variable max in der swf-Datei zur Verfügung. Auch mehrere Variablen sind möglich, sie müßten in der üblichen URL-Schreibweise mit & getrennt werden.

Diese Veränderung macht aber das Testen des Flash-Films schwieriger: innerhalb des Flash-Editors hat die Variable max (noch) keinen Wert. Deswegen sollte man den Code noch einmal verändern:

var max:Number; // sollte in der HTML- // Datei gesetzt werden if ( max == undefined ) { max = 3; }

Nun können Sie getrost die fla-Datei des Audio-Players verlieren: die swf-Datei funktioniert für beliebig viele Musikstücke.

8.4.5 Video steuern

Ein allgemeiner Videoplayer soll verschiedene FLV-Videos abspielen können, diese werden bei der Einbindung der swf-Datei in den HTML-Code angegeben.

Für den Player einfach die fertige Komponente von Flash verwenden:

Abbildung 127: Video Player mit der FLVPlayback-Komponente

Aus der HTML-Datei sollen der Name der FLV-Datei (quelle) und eine Beschreibung (be-schreibung) entnommen werden:


156

Stage.scaleMode = "noScale"; import mx.controls.*; var myPlayer:mx.video.FLVPlayback; if (quelle == undefined) { myPlayer._visible=false; myTitle.text = "kein Video."; } else { myPlayer.contentPath = quelle; myPlayer.autoPlay = true; myTitle.text = beschreibung; }

Die Angabe eines längeren Textes in der HTML-Datei wirft ein Problem auf:

In einer URL darf kein Leerzeichen vorkommen. Die Leerzeichen müssen mit + ersetzt wer-den:

video-player.swf?quelle=Ursty_Opener.flv&beschreibung=Opener+Ursty+2006

Es gibt einen Trick um diese „URL-Codierung“ zu erledigen: einfach den Text ins Suchfeld von Google eingeben, und dann in der resultierenden URL nach der Variable q suchen. Google muss die gleiche URL-Codierung durchführen.

Abbildung 128: Google führt URL-Codierung durch

Damit sind alle Einzelteile vorhanden, um einen mehrfach verwendbaren Video-Player zu bauen.


157

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

Folgende Hoster bieten Wordpress-Blogs unter anderem gratis an:

• wordpress com

• wordpress.de

• edublogs.org - für Schulen etc.

• edublogs.de - für Schulen etc.

Die Installation von Wordpress im eigenen Webspace:

1. Schritt Finden Sie raus wie der Zugang zur Datenbank funktioniert: Daten-bankname, Username, Paßwort.

2. Schritt Laden Sie die Software von www.wordpress.org oder de.wordpress.org (deutsche Version) als zip-Datei auf Ihren Desk-top-Computer herunter.

3. Schritt Packen Sie die zip-Datei aus. Dabei muss die Ordner-Struktur erhal-ten bleiben.

4. Schritt Kopieren Sie wp-config-sample.php nach wp-config.php.

5. Schritt Tragen Sie Datenbankname, Username, Passwort in die Datei wp-config.php ein (siehe unten).

6. Schritt Laden Sie den Ordner auf Ihren Webspace hoch, dabei muss die Ord-ner-Struktur erhalten bleiben.

7. Schritt Öffnen Sie die URL ihres Webspace im Browser, sie werden automa-tisch zu install.php weitergeleitet.

8. Schritt Geben Sie den Namen des Blog und Ihre E-Mail Adresse ein.

9. Schritt Fertig!

http://wordpress.com/�

http://wordpress.de/�

http://edublogs.org/�

http://edublogs.de/�

WWW und Multimedia: Wordpress

158

Das schwierigste dabei ist Schritt 5: das Editieren der Datei wp-config.php:

define('DB_NAME', 'datenbank'); // The name of the database define('DB_USER', 'username'); // Your MySQL username define('DB_PASSWORD', 'passwort'); // ...and password define('DB_HOST', 'localhost'); // 99% chance you won't need to change this value // You can have multiple installations in one database // if you give each a unique prefix $table_prefix = 'wp_'; // Only numbers, letters, and underscores

Der table_prefix wird verwendet wenn in einer Datenbank mehrere Wordpress-Instanzen gespeichert werden sollen. Für jedes Wordpress werden mehrere Tabellen in der Datenbank angelegt, die Namen der Tabellen beginnen mit dem angegebenen Prefix.

8.5.1 Wordpress Konfiguration

Nach der Installation von Wordpress (z.B. auf http://meinblog.at/) finden Sie das Backend im Ordner wp-admin (also z.B. http://meinblog.at/wp-admin/). Dieser Bereich ist nur mit Login zugänglich. Im Rahmen der Installation wurde ein Account mit Namen admin angelegt, den Sie verwenden können.

In Abbildung 129 sehen Sie die Eingabemaske zum Schreiben eines neuen Artikels.

Abbildung 129: Wordpress Backend - Artikel Schreiben


159

8.5.2 Überblick

Die Navigation im Backend zeigt vier Haupt-Navigationspunkte (Schreiben, Verwalten, Dar-stellung, Kommentare) und drei Neben-Navigationspunkte (Einstellungen, Plugins, Benutzer). Falls neben der AdministratorIn admin noch weitere Accounts angelegt werden, können die-sen weniger Rechte zugestanden werden — diese sehen dann manche Navigationspunkte nicht.

Abbildung 130 zeigt alle sieben Navigationspunkt mit Unter-Navigation.

Abbildung 130: Wordpress Backend: Überblick über die Navigation

8.5.3 Artikel und Seiten

Ein Wordpress-Blog besteht nicht aus einzelnen Webseiten sondern aus kleineren Einheiten: Artikel (auf englisch: posts) und Seiten (auf englisch: pages). Sowohl Artikel als auch Seiten haben:

− Eine fixe URL (Permalink)

− Einen Titel

− Einen Text, eventuell mit Bildern, Audio, Video

− Ein Veröffentlichungsdatum

− Eine AutorIn


160

Nur Artikel haben die Chance, auf der Homepage des Blogs aufgelistet zu werden. (Norma-lerweise die 10 neuesten, verändern unter EINSTELLUNGEN AUSGABE). Nur Artikel können in Kategorien eingeordnet werden.

Damit ergibt sich folgende Verwendung:

− Artikel für Newsmeldungen, Veranstaltungsankündigungen, Dinge, von denen es im Lauf der Zeit immer mehr geben wird,

− Seiten für Impressum, Anfahrtsskizze und andere Informationen mit “Ewigkeits-wert”, die sich nicht ändern, und von denen es auch nicht mehrere geben wird.

Die Artikel werden in vielen Seiten wiederverwendet: auf der Homepage (die neuesten) auf Archivseiten (z.B. Monatsarchiv aller Artikel vom Mai 2008) auf Suchseiten (z.B. Suchergebnis für Suche nach ‚PHP’).

Bei beiden — Artikeln und Seiten — kann man Navigations-Menüs mit wenigen Klicks bauen:

− Bei Artikeln erfolgt die Navigation über die Kategorien. Sobald eine Kategorie minde-stens einen Artikel enthält, erscheint ein entsprechender Navigationspunkt.

− Bei Seiten erfolgt die Navigation durch das Festlegen der Seitenreihenfolge bzw. durch die Zuordnung einer Seite zu einer übergeordneten Seite.

8.5.4 Multimedia-Dateien

Während Texte in Artikeln und Seiten gespeichert werden, müssen Bilder-, Audio-, und Video-Dateien erst einmal separat hochgeladen werden und erhalten eine fixe URL in einem Unter-Ordner von wp-content/uploads:

Abbildung 131: Wordpress Datei Upload


161

Anschliessend können diese Dateien auf verschiedene Arten im Artikel bzw. in der Seite ein-gebunden werden. Bei statischen Bildern funktioniert das sofort, für andere Medientypen gibt es Plugins (siehe Kapitel 8.5.7)

8.5.5 Kommentare

In der Standardkonfiguration von Wordpress könnne anonyme BesucherInnen des Blogs Kom-mentare zu den Artikeln und Seiten schreiben. Achtung: es gibt Spam-Roboter die gezielt in Wordpress-Blogs Werbung eintragen. Unter EINSTELLUNGEN DISKUSSION können Sie die Kommentar-Möglichkeiten beschränken, und sich so den Streß des „Ausmistens“ von Spam zu ersparen.

8.5.6 Themes, Sidebars und Widgets

Die Darstellung des Blogs wird durch ein „Theme“ festgelegt. Ein Theme ist ein Ordner voll PHP und CSS-Dateien im Ordern wp-content/themes. Themes werden meist als zip-Dateien zum Download angeboten, man muss sie nur noch auspacken, in den Ordner hochladen, und unter DARSTELLUNG THEME aktivieren.

Abbildung 132: Wordpress Theme "Sandbox

In der Datei style.css sind Meta-Informationen über das Theme gespeichert, die Datei screenshot.png wird im Backend bei der Auswahl der Themes angezeigt.

Falls die „Sidebar“ im Theme mit Widgets gestaltet, ist erscheint ein entsprechender Naviga-tionspunkt DARSTELLUNG WIDGETS. Widgets sind die einzelnen Teile, die zu Sidebars zu-sammen gestellt werden können. Das Theme Diurnal bietet z.B. eine fixe Navigation für die Pages (links oben) und zwei Sidebars auf der rechten Seite wie in Abbildung 133 gezeigt.


162

Abbildung 133: Theme mit zwei Sidebars und Page-Navigation

Diese Navigationselemente werden auf allen Seiten des Blogs angezeigt – egal ob Homepage oder Monats-Archiv oder Seite eines einzelnen Artikels.

Viele Widgets sind erst sinnvoll wenn der Blog viele Einträge hat. Z.B. ein Kalender oder ein Archiv. Hier ein Überblick über die Funktion der Widgets:

− Seiten listet die Seiten des Blogs auf. (Wäre mit dem Theme in Abbildung 133 nicht sinnvoll, da schon eine Seiten-Navigation vorhanden ist)

− Kalender linkt zu „Tages-Archiven“, z.B zu den Artikeln, die am 15. Mai 2008 publiziert wurden.

− Archive linkt zu „Monats-Archiven“. Die Anzahl der Artikel kann zu jedem Monat mit angezeigt werden.

− Links zeigt eine Liste mit Links an, diese können unter VERWALTEN LINKS eingege-ben werden. In der Standard-Installation von Wordpress ist eine Linkliste mit 7 Word-press-Links enthalten, die sollte man auf jeden Fall durch eigene Links ersetzen oder ganz entfernen.

− Meta zeigt Links zum An- und Abmelden an.

− Search zeigt ein Suchfeld für die Volltextsuche an.

− Neueste Artikel zeigt die Titel der neuesten Artikel an. Das ist besonders wichtig, wenn LeserInnen über eine Google-Suche auf der Seite eines alten Artikels landen. Durch die „neuesten Artikel“ werden sie vielleicht weiter in den Blog hinein gelockt.

Sidebar 1 Sidebar 2


163

− Schlagworte (englisch: tags) können zu Artikeln vergeben werden und sind dann über diese Navigation auffindbar. Es ist sinnvoll kurze Wörter als tags zu verwenden, die schon bei Technorati oder Digg bekannt sind.

− Kategorien (englisch: categories) können zu Artikeln vergeben werden. Aus den ver-wendeten Kategorien entsteht eine Navigation. (Siehe Lorelle on Wordpress19 für eine Diskussion von Tags vs. Categories)

− Text ermöglicht die Anzeige eines statischen Textes in der Sidebar. Soll-te man unbedingt nutzen um den Blog (ultra)kurz vorzustellen: Wer steht dahinter, in welcher Rolle wird geschreiben, was ist der Zweck?

− RSS ermöglicht das Einbinden eines fremden RSS-Feed. Hier gibt es besonders viele Konfigurationsmöglichkeiten:

− Neueste Kommentare zeigt die neuesten Kommentare. Achtung: falls Sie Kommenta-re zulassen müssen, Sie diese unbedingt regelmäßig lesen und illegale (üble Nachre-de, Wiederbetätigung) und lästige (SPAM) entfernen.

− RSS Links zeigt Links zu den RSS-Feeds des Blogs an. Diese Information ist auch im HTML-Header zu finden, und wird deswegen von manchen Browsern (Firefox, MSIE8) automatisch angezeigt.

<link rel="alternate" type="application/rss+xml" href="http://wordpress.local/?feed=rss2" title="Programmier-Portfolio Posts RSS feed" />

Das Zusammenstellen der Sidebars aus den einzelnen Widgets ist etwas umständlich:

1. Zuerst muss (rechts oben) die Sidebar ausgewählt und mit ANZEIGEN geladen werden

2. Dann kann (links) ein Widget angeklickt werden um es hinzuzufügen.

3. Schliesslich kann das einzelne Widget bearbeitet werden.

4. Abschließend muss die Sidebar mit „Änderungen speichern“ gespeichert werden.

19 http://lorelle.wordpress.com/2005/09/09/categories-versus-tags-whats-the-difference-and-which-one/


164

Abbildung 134: Wordpress Widgets

8.5.7 Plugins

Plugins können die Funktionsweise von Wordpress erweitern — sowohl was die Anzeige betrifft als auch im Backend. Ein Plugin ist ein Ordner mit PHP-Dateien im Ordner wp-

content/plugins, das wie ein Theme installiert wird. Als letzter Installations-Schritt wird das Plugin unter PLUGINS aktiviert.

Zugriffs-Statistik

Das Plugin statpress20 führt Statistiken über die Zugriffe. Es fügt im Backend einen neuen Haupt-Navigationspunkt ein.

Abbildung 135: Wordpress Plugin statpress

Suchmaschinen-Optimierung

All in One SEO Pack21 führt mehrere Veränderungen an Wordpress durch, um die Findbarkeit für Suchmaschinen zu erhöhen. Die Optionen können unter EINSTELLUNGEN ALL IN ONE SEO verändert werden, das ist aber nicht unbedingt notwendig.

Flash

Das Plugin WP-SWFObject22 ermöglicht die Einbindung von SWF-Dateien. Nachdem die SWF-Datei hochgeladen wurde, können Sie mit dem Code [SWF]pfadzurdatei, breite, hö-

20 http://www.irisco.it/?page_id=28 21 http://wp.uberdose.com/2007/03/24/all-in-one-seo-pack/

1 1

2 3

4


165

he[/SWF] im Eingabefeld für Artikel oder für Seiten die Datei einbinden. Dieser Code wird in HTML und Javascript übersetzt. Die Optionen können unter EINSTELLUNGEN WP-SWFOBJECT verändert werden.

Video

Der Flash Video Player23 ermöglicht das einfache Anzeigen von FLV-Videos. Nachdem die FLV-Datei hochgeladen wurde wird sie mit dem Code [flashvideo filename="…" /] in das Eingabefeld für Artikel oder für Seiten eingegeben. Dieser Code wird in HTML und Javascript übersetzt, die dann über eine SWF-Datei die FLV-Datei abspielen.

Abbildung 136: Wordpress Plugin Flash Video Player

Die Optionen können unter EINSTELLUNGEN FLASH VIDEO verändert werden.

22 http://blog.unijimpe.net/wp-swfobject/ 23 http://www.mac-dev.net/


166

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


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


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


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


• Wie man mit SELECT * FORM tabelle Daten aus der Datenbank abfragt und mit INSERT INTO tabelle VALUES ( … ) Daten einfügt.

• Dass das Filtern der Daten in der Datenbank passieren sollte und möglichst wenig Da-ten nach PHP übertragen werden sollten.


• Mit mysql_connect, mysql_query und mysql_fetch_assoc einfache Zugriffe auf die Datenbank programmieren.


167

9.2 PHP und MySQL MySQL ist eine relationale Datenbank, die oft bei Webapplikationen eingesetzt wird, bzw. bei gemietetem Webspace mit angeboten wird. Hier wird nicht die Funktionsweise einer relatio-nalen Datenbank erklärt, sondern nur die Besonderheiten von MySQL und die für Web-Applikationen wichtigen Aspekte.

9.2.1 MySQL Installation und Dokumentation

MySQL am lokalen Rechner installiert man meist im Paket mit Apache, z.B. im Paket XAMPP. Man könnte die Datenbank auch separat von mysql.com herunterladen und installieren.

Als Abfragesprache kommt SQL zum Einsatz. Die Details (Abweichungen vom Standard, Erwei-terungen) kann man der Dokumentation entnehmen die Online unter http://dev.mysql.com/ erreichbar ist.

Abbildung 137: Dokumentation von MySQL auf http://dev.mysql.com/

Wenn man am sich am Datenbankserver einloggen kann, kann man MySQL auf der Kommando-zeile bedienen. Die MySQL-Shell wird wie folgt gestartet:

$ mysql –u username –p datenbankname Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 2 to server version: 5.0.27-community-nt Type 'help;' or '\h' for help. Type '\c' to clear the buffer. mysql>

Ein Beispiel zur Orientierung in einer Datenbank:


169

Ein häufig verwendetes Tool ist der phpMyAdmin, der ein Interface am Web zur Verfügung stellt:

Abbildung 138: phpMyAdmin

Über phpMyAdmin kann man viele SQL-Abfragen durch Point+Klick formulieren. Das lehrreiche daran: phpMyAdmin zeigt immer das SQL-Statement mit an — auf diese Art kann man einfach SQL lernen. Besonders praktisch ist das beim Anlegen und Verändern von Tabellen. Erster Schritt: Name der Tabelle:

Zweiter Schritt: Spalten definieren:

Dritter Schritt: Tabelle wird angelegt und dazugehörendes SQL-Statement angezeigt:


170

9.2.2 MySQL von PHP aus

Um von PHP auf die Datenbank zuzugreifen gibt es verschiedene Schnittstellen. Die älteste Schnittstelle wird hier vorgestellt, sie ist in der Dokumentation unter „MySQL Funktionen“ dokumentiert. (Modernere Ansätze werden in Kapitel 9.2.6 auf Seite 174 vorgestellt.)

So funktioniert eine Verbindung zur mysql-Datenbank:

<? mysql_connect ("rechnernamehier", "usernamehier", "geheimespassworthier") or die ("Kein Zugriff auf die Datenbank"); echo ("Zugriff zur Datenbank OK"); mysql_close(); echo ("Verbindung zur Datenbank wieder beendet"); ?>

Es gibt noch keinen tollen Output - wir haben bisher nur eine Verbindung zur Datenbank, aber haben noch keine Daten abgefragt.

So funktioniert eine Abfrage aus der Datenbank:

mysql_query ("use mma"); //Datenbank auswählen $ergebnis = mysql_query ( "SELECT * FROM person WHERE geb>1980 LIMIT 1,10" ); while($zeile = mysql_fetch_array($ergebnis)) { echo($zeile["vorname"]); echo("<br />"); }

Ein ganz wichtiges Grundprinzip beim Programmieren mit Datenbanken: Das Filtern und be-rechnen der Daten möglichst in der Datenbank erledigen, möglichst wenig Daten zu PHP über-mitteln. Folgender Ansatz wäre also ganz schlecht, besonders wenn viele Daten in der Da-tenbank sind:

mysql_query ("use mma"); //Datenbank auswählen $ergebnis = mysql_query ( "SELECT * FROM person" ); while($zeile = mysql_fetch_array($ergebnis)) { if( $zeile["geb"] > 1980 ) { echo($zeile["vorname"]); echo("<br />"); } }

Zu diesem Prinzip gehört auch die konsequente Verwendung der richtigen Datentypen in der Datenbank.

Zum Speichern eines Datums also DATE verwenden, das ermöglicht Berechnungen wie „falls datum nicht älter als 30 Tage alt ist“

… WHERE datediff( curdate( ) , datum ) <= 30


171

9.2.3 auto_increment

MySQL bietet die Möglichkeit, genau eine Spalte einer Tabelle als auto_increment zu markie-ren. Als Datentyp kann ein Integer-Typ verwendet werden, z.B. BIGINT. Wird eine neue Zeile in die Tabelle eingefügt und für diese Spalte kein Wert explizit angegeben oder der Wert NULL angegeben, dann fügt MySQL automatisch einen neuen Wert (der noch nie benutzt wur-de) ein.

Diese auto_increment Spalte eignet sich also als Primärschlüssel der Tabelle.

Wird ein neuer Datensatz in eine Tabelle mit auto_increment Spalte eingefügt, dann ist der neu erzeugte Schlüssel anschließend über die Funktion mysql_insert_id() erhältlich.

9.2.4 Escaping

Wenn die Konfigurationsvariable magic_quotes_gpc gesetzt ist, führt der PHP-Interpreter ein automatisches Escaping bei den Get- und Post-Parametern und bei Cookies durch (deswegen „gpc“). Dazu ein Beispiel, bei dem die UserInnen viele Sonderzeichen eingeben müssen: Eine Datenbank mit Code-Beispielen. Die Eingabemaske sieht so aus:

Dann enthält der Parameter in Flash den Wert:

Das ist schon das richtige Escaping für das Einfügen als VARCHAR oder TEXT in MySQL. Anstatt sich auf den Automatismus zu verlassen, sollte man die „magic quotes“ aber abschalten, jede Eingabe sorgfältig prüfen und das Escaping bewußt durchführen.

Dazu ein Beispiel: Eine Zitatensammlung soll Zitate in mehreren Sprachen enthalten (hier von Marie Curie):

Bei der Eingabe von Texten muss hier also nicht nur auf das Escaping von Anführungszeichen und Backslashes geachtet werden, sondern auch auf die richtige Behandlung von Unicode. Dafür verwenden wir die Funktion mysql_real_escape_string. Um das SQL-Statement zu-


172

sammenzubauen wird hier außerdem die Funktion sprintf verwendet. Diese Funktion baut aus einem Template und mehreren einzufügenden Werten einen String.

$txt = $_GET['txt']; $quelle = $_GET['quelle']; $sql = sprintf("INSERT INTO input (txt,quelle) VALUES ('%s', '%s')", mysql_real_escape_string($txt), mysql_real_escape_string($quelle) ); mysql_query($sql);

In einem zweiten Schritt soll nun ermöglicht werden, einzelne Zitate aus der Datenbank zu löschen. Dazu wird jeweils zum Programm delete.php verlinkt und der Schlüssel des zu lö-schenden Datensatzes übergeben.

Abbildung 139: Link zum Löschen eines Datensatzes

Ein erster Entwurf für das delete.php Programm könnte so lauten — aber Achtung: dieser Entwurf enthält ein schweres Sicherheitsproblem!

$id = $_GET['id']; mysql_query( "DELETE FROM input WHERE id=$id" );

Dieses Programm ist anfällig für folgende Attacke: Ein Aufruf über folgende URL

delete.php?id=9%20OR%201=1

setzt den Parameter id auf Wert „9 OR 1=1“. Das führt dazu, dass folgendes SQL-Statement ausgeführt wird:

DELETE FROM input WHERE id=9 OR 1=1

Und dieses Statemant löscht nicht einen Datensatz sondern alle Datensätze. Es ist also not-wendig die Eingabe genau zu überprüfen bevor sie in einem SQL-Statement verwendet wird. In diesem Beispiel gilt: nur wenn es sich um eine ganze Zahl handelt darf sie verwendet wer-de. Das wird hier mit einer Regular Expression überprüft:

$id = $_GET['id']; if( ! preg_match( '/^\d+$/', $id ) ) { error_log("hack: $id statt id in delete.php."); exit; } mysql_query( "DELETE FROM input WHERE id=$id" ); header("Location: list-zitate.php");


173

Nach dem Löschen wird der Browser automatisch an ein anderes PHP-Programm weitergelei-tet, das den Status der Datenbank anzeigt.

9.2.5 Tabellentypen, Beziehungen und Transaktionen

Eine kleine Adress-Datenbank soll zu jeder Person eine oder mehrere Adressen speichern. Dafür sind zwei Tabellen notwendig: eine für die Personen, eine für die Adressen. Sobald man mit Beziehungen arbeitet wäre referentielle Integrität wünschenswert. Dafür braucht man den Tabellentyp InnoDB. Der Default-Typ MyISAM ist besonders für viele Lese- und wenige Schreib-Zugriffe und für hohe Lesegeschwindigkeit optimiert, bietet aber keine Unterstützung für referentielle Integrität.

CREATE TABLE `person` ( `pid` bigint(20) NOT NULL auto_increment, `vorname` varchar(80) NOT NULL, `nachname` varchar(80) NOT NULL, PRIMARY KEY (`pid`) ) ENGINE=InnoDB; CREATE TABLE àdresse` ( àid` bigint(20) NOT NULL auto_increment, `pid` bigint(20) NOT NULL, `strasse` varchar(100) NOT NULL, `plz` varchar(10) NOT NULL, òrt` varchar(100) NOT NULL, `land` varchar(2) NOT NULL, PRIMARY KEY (àid`), KEY `pid` (`pid`) ) ENGINE=InnoDB;

Da wir InnoDB verwenden, können wir nun die Beziehung explizit machen:

ALTER TABLE àdresse` ADD CONSTRAINT àdresse_ibfk_1` FOREIGN KEY (`pid`) REFERENCES `person` (`pid`) ON DELETE CASCADE;

Bei Web-Applikationen kommt es oft zur unerwarteten Unterbrechung des Programms. Damit trotzdem die Daten in der Datenbank immer konsistent bleiben, verwenden wir Transaktio-nen: Die Transaktion stellt sicher, daß die gewünschte Veränderung in der Datenbank entwe-der vollständig durchgeführt oder gar nicht durchgeführt wird — auf keinen Fall wird „bloß die Hälfte“ gemacht.

Wenn eine neue Person mit der ersten Adresse eingefügt wird, stellt die Transaktion sicher, daß sowohl Person als auch Adresse gespeichert wird:

mysql_query("START TRANSACTION"); $sql = sprintf("INSERT INTO person (vorname,nachname) VALUES ('%s', '%s')", mysql_real_escape_string($_GET['vorname']), mysql_real_escape_string($_GET['nachname']) ); $ok = mysql_query($sql); if ( ! $ok ) {


174

mysql_query("ROLLBACK");

echo("<p>Error beim Einfügen von person</p>"); exit; } $pid = mysql_insert_id(); $sql = sprintf("INSERT INTO adresse ( pid, strasse, plz, ort, land ) VALUES ( %d, '%s', '%s', '%s', '%s' )", $pid, mysql_real_escape_string($_GET['strasse']), mysql_real_escape_string($_GET['plz']), mysql_real_escape_string($_GET['ort']), mysql_real_escape_string($_GET['land']) ); $ok = mysql_query($sql); if ( ! $ok ) { mysql_query("ROLLBACK"); echo("<p>Error beim Einfügen von adresse</p>"); exit; } mysql_query("COMMIT");

Mit START TRANSACTION wird die Transaktion gestartet. Mit COMMIT wird sie abgeschlossen, erst dann werden alle Änderungen an der Datenbank wirklich durchgeführt. Tritt ein Fehler auf, dann wird ein ROLLBACK ausgelöst, der alle Änderungen in der Datenbank rückgängig macht. Falls das PHP-Programm abstürzt bevor das COMMIT abgesetzt wird, wird im Daten-bankserver ebenfalls ein ROLLBACK ausgelöst.

9.2.6 Andere DB-Schnittstellen

Wie anfangs erwähnt ist diese MySQL Schnittstelle die primitivste Schnittstelle die in PHP zur Verfügung steht. Abschließend noch ein kurzer Ausblick auf andere Schnittstellen: MDB2, ADODB und Zend Framework.

MDB224 aus dem "PHP Extension and Application Repository" (PEAR) ist datenbank-unabhängig und unterstützt derzeit 8 verschiedene Datenbanken, darunter MySQL, Postgres und Oracle.

In MDB2 können mit prepare SQL-Statements vorbereitet und später mit execute mehrmals ausgeführt werden. Mit Fragezeichen als Platzhaltern wird dabei das Escaping automatisch erledigt:

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

ADODb orientiert sich an Microsofts ActiveX Data Objects (ADO). Ein aktuelles Tutorial finden Sie im phpmagazin25.

24 http://pear.php.net/manual/en/package.database.mdb2.php 25 http://phpmagazin.de/itr/online_artikel/psecom,id,529,nodeid,62,_language,de.html


175

Im Zend Framework gibt es die Komponente Zend_Db26. Dieser Komponente erlaubt den „Zu-sammenbau“ von SQL-Statements über Methoden:

$minimumPrice = 100; $maximumPrice = 500; $select = $db->select() ->from('products', array('product_id', 'product_name', 'price')) ->where('price < ?', $minimumPrice) ->orWhere('price > ?', $maximumPrice) ->order('product_name');

Das Statement kann auch im Nachhinein noch verändert werden:

$select->reset( Zend_Db_Select::ORDER ); $select->order('product_id');

Das Zend Framework bietet auch eine Komponente27 die ein Mapping von DB-Tabelle auf PHP-Klasse ermöglicht (Table Data Gateway Design Pattern und Row Data Gateway Design Pat-tern).

class Person extends Zend_Db_Table_Abstract { protected $_name = 'person'; // Tabelle in der DB protected $_primary = 'pid'; // Primary key protected $_sequence = true; // --||-- ist auto_increment } $table = new Person(); $data = array( 'created_on' => new Zend_Db_Expr('CURDATE()'), 'vorname' => 'Brigitte', 'nachname' => 'Jellinek' ); $table->insert($data); $where = $table->getAdapter()->quoteInto('vorname = ?', 'Brigitte'); $table->delete($where);

Leider ist keine dieser moderneren Datenbank-Schnittstellen im Standard Lieferumfang von PHP enthalten. Für kleine Projekte oder in altem Code findet man deswegen sehr oft die ein-fache, MySQL-spezifirsche Schnittstelle. Beim Start eines neuen oder größeren Projektes soll-ten Sie aber die moderneren Lösungen in Betracht ziehen.

9.3 onEnterFrame In diesem Kapitel werden wir den „Takt“ von Flash aufgreifen, um damit Bewegung zu erzeugen.

26 http://framework.zend.com/manual/en/zend.db.html 27 http://framework.zend.com/manual/en/zend.db.table.html

WWW und Multimedia: onEnterFrame

176

Ein Flash-Film folgt einem fixen Takt – den Frames pro Sekunde. Alle Zeitleisten im Film – egal ob Hauptzeitleiste, Zeitleiste eines Movieclips, oder Zeitleisten in einer mit loadMo-vie() geladenen swf-datei —folgen diesem Takt.

Umgekehrt können Sie diesen Takt beim Programmieren nützen. Auf jeder Zeitleiste kann man eine onEnterFrame Funktion anbringen. Diese Funktion wird dann jedes Mal, wenn ein neuer Frame angezeigt wird, ausgeführt.

In den letzten paar Flash-Versionen gibt es mehrere Schreibweise für onEnterFrame. In Ac-tionscript 2 funktionieren alle diese Schreibweisen nebeneinander.

Die zweite oder dritte Schreibweise empfehle ich. Die Zuweisung funktioniert auch von „au-ßerhalb“ des MovieClips:

ball_mc.onEnterFrame = bewegung;

9.3.1 Eine Zeichnung wird Schritt für Schritt aufgebaut.

Abbildung 140: Schrittweiser Aufbau einer Zeichnung

Die Funktion onEnterFrame, die für Abbildung 140 verwendet wurde, befindet sich auf der Hauptzeitleiste und sieht so aus:

Die alte Schreibweise verwendet onClipEvent:

onClipEvent(enterFrame) { // alt }

am MovieClip

Die neue Schreibweise funktioniert mit einer Funktion namens onEnterFrame.

function onEnterFrame() { // modern, erste Schreibweise }

am MovieClip

Oder man schreibt eine Funktion mit an-derem Namen, und weist diese dann onEnterFrame zu. Das ist praktisch wenn man die Funktion später austauschen will:

function bewegung() { … } onEnterFrame = bewegung; // später: onEnterFrame = pause;

Oder man weist der Eigenschaft onEnter-Frame eine anonyme Funktion ohne Na-men zu (wie in jQuery).

onEnterFrame = function() { … };


177

var x = 0; function onEnterFrame() { if (x < 400) { lineStyle(x / 70, 0xFF6600); moveTo(10 + x, 10); lineTo(400 - x, 100 + x); x = x + 20; } }

Was genau gezeichnet wird, ist hier nicht so wichtig. Wichtig ist: bei jedem Aufbau eines neuen Frames wird eine Linie gezeichnet.

Wenn die Framerate der Datei also auf 12 frames per second eingestellt ist bedeutet das: die 20 Linien werden in ca. 1,5 Sekunden gezeichnet.

Diese onEnterFrame- Funktion wird bis in alle Ewigkeit wieder und wieder aufgerufen. Nur das if sorgt dafür, dass ab einem gewissen Punkt nichts Neues mehr gezeichnet wird.

9.3.2 Zeichnung neu aufbauen

Eine Kurve wird angezeigt, mit Anfangs-, End-, und Kon-trollpunkt. Die drei Punkte kann man mit Drag-and-Drop positionieren, die Kurve wird dabei immer wieder neu gezeichnet, sie scheint sich mit zu bewegen.

In diesem Beispiel wird der Frame-Aufbau für eine Neu-zeichnung der gesamten Zeichnung verwendet. Dazu muß jeweils die alte Zeichnung gelöscht werden:

function onEnterFrame() { // alte zeichnung löschen clear(); lineStyle(4, 0xff0000); moveTo(dot1_mc._x, dot1_mc._y); curveTo( controlDot_mc._x, controlDot_mc._y, dot2_mc._x, dot2_mc._y ); }}

Abbildung 141: Neu-Aufbau einer Zeichnung


178

9.3.3 Uhr

Die aktuelle Uhrzeit wird grafisch angezeigt: Die Uhrzeit erfährt man von Flash über das Date Objekt:

var my_date:Date = new Date(); var sek:Number = my_date.getSeconds();

Hier das vollständige Programm, nur das Zeichnen der Zeiger fehlt noch:

function onEnterFrame() { clear(); var my_date:Date = new Date(); var sek:Number = my_date.getSeconds(); var min:Number = my_Date.getMinutes(); // Minutenzeiger zeichnen // Sekundenzeiger zeichnen }

9.3.4 Bühne und Maus

Ein paar Kleinigkeiten, die bei den folgenden Beispielen gebraucht werden: Die Größe der Bühne erfährt man über das Stage-Objekt:

Stage.width Stage.height

Die Position des Mauszeigers ist in zwei Variablen gespeichert:

_xmouse _ymouse

Den normalen Mauszeiger kann man verstecken:

Mouse.hide();

9.3.5 Ball im Spielfeld

Ein Ball bewegt sich gleichförmig über die Bühne, am Rand der Bühne prallt er ab.

Die Koordinaten der MovieClip Instanz sind über die Variablen _x und _y jederzeit zugänglich und können auch verändert werden.

Für dieses Beispiel werden wir zwei zusätzliche Werte in der MoviClip-Instanz des Balles spei-chern, diese beiden Variablen bilden den Bewegungsvektor:

ball_mc.vektorx = 10; ball_mc.vektory = -20;


179

Diese Werte bedeuten: in jedem Frame soll sich der Ball 10 Pixel nach rechts und 20 Pixel nach oben bewegen – damit das so passiert, müssen wir aber noch ein entsprechendes Pro-gramm schreiben.

Abbildung 142: Bewegungsvektor, vorher, nachher

Wie muß so ein Programm zur Bewegung aussehen? Die neue Position des Balls berechnet sich aus der alten Position plus Bewegungsvektor:

_x = _x + vektorx; _y = _y + vektory;

Dieser Code muß regelmäßig ausgeführt werden, gehört also in die onEnterFrame Funktion des Balles.

Abbildung 143 zeigt was passiert, wenn der Ball gegen die Wand prallt: erstens darf der Ball nicht durch die Wand gehen. Und zweitens verändert sich der Bewegungsvektor des Balls.

Abbildung 143: Bewegungsvektoren beim Abprallen

Im Beispiel prallt der Ball von rechts gegen die senkrechte Wand. Dabei bleibt die Y-Komponente des Bewegungsvektors gleich, die X-Koordinate wird umgekehrt (aus einer nega-tiven Zahl wird eine positive Zahl).


180

if ( _x < 0 ) { vektorx = -vektorx; }

Die Veränderung der Bewegung stimmt schon, aber der Ball „taucht in die Wand ein“. Die _x Koordinate des Balles gibt ja an, wo der Registrierpunkt des Balles ist, wenn _x = 0 dann ist der Ball halb in der Wand:

Abbildung 144: Ball hat Koordinate _x=0

Die Breite und Höhe des Balls können wir aus _width und _height auslesen.

if ( _x < _width/2 ) { _x = _width/2; vektorx = -vektorx; }

Für jede der vier Wände braucht man so ein if in der onEnterFrame-Funktion des Balles. So sieht das Gesamt-Programm aus:

Auf der Hauptzeitleiste:

mein_ball_mc.vektorx = 15; mein_ball_mc.vektory = 10;

Auf der Instanz des Balles:

onClipEvent(EnterFrame) { _x = _x+vektorx; _y = _y+vektory; if (_y>Stage.height-_height/2) { _y = Stage.height-_height/2; vektory = -vektory; } if (_x>Stage.width-_width/2) { _x = Stage.width-_width/2; vektorx = -vektorx; } if (_y<_height/2) { _y = _height/2; vektory = -vektory; } if (_x<_width/2) { _x = _height/2; vektorx = -vektorx; } }


181

9.3.6 Ball und Hittest

Ein Ball trifft auf einen Ziegelstein und zerschlägt diesen.

Um zu testen, ob ein MovieClip ein anderes berührt, verwendet man die Funktion hitTest. Hier ist der Code des Ziegelsteins:

if(this.hitTest(_root.mein_ball_mc)) { // Animation kaputter Ziegel starten this.gotoAndPlay(2); }

Die Funktion hitTest kann auf zwei Arten verwendet werden: MovieClip gegen MovieClip oder MovieClip gegen Koordinate.

MovieClip gegen MovieClip (in Abbildung 145 links) testet, ob die Begrenzungs-Boxen der Mo-vieClips sich berühren. Bei Ziegelsteinen ist das kein Problem, bei komplizierteren Formen gibt das oft einen Fehlalarm.

MovieClip gegen Koordinate (in Abbildung 145 rechts) testet, ob an der Koordinate wirklich ein sichtbarer Teil des MovieClips ist – egal wie die Begrenzungsbox aussieht.

Abbildung 145: die zwei Varianten des hitTest

Achtung: ein hitTest ist ein „teurer“ Actionscript-Befehl den man sparsam einsetzen muss. Wenn Sie ein Spiel mit 1.000 Raumschiffen programmieren können Sie nicht 12 mal in der Sekunde testen ob irgend ein Raumschiff irgend ein anderes Raumschiff berührt — das wären 500.000 hitTests. Bei so vielen Objekten müßten Sie einen geschickten Algorithmus verwen-den um die Zahl der nötigen Tests zu vermindern.

9.3.7 Viele Projekte

Mit onEnterFrame und hitTest können Sie nun viele neue Projekte machen – fast alle klassi-schen Computerspiele lassen sich mit diesen Werkzeugen umsetzen. Hier ein paar Beispiele:

MovieClip berührt MovieClip

Koordinate berührt Movie-Clip nicht

Koordinate berührt MovieClip


182

Übung 21) Schreiben Sie ein Programm, das eine Zeichnung Schritt für Schritt aufbaut. Ver-wenden Sie den Zufall!

Übung 22) Schreiben Sie ein Programm, das bei jedem Bildaufbau einen Pfeil vom Nullpunkt zur aktuellen Position des Cursors zeichnet.

Übung 23) Schreiben Sie ein Programm, das die aktuelle Uhrzeit grafisch darstellt.

Übung 24) Schreiben Sie das Computerspiel Pong: ein Ball bewegt sich über das Spielfeld, das unten „offen“ ist; mit einem einfachen Schläger versucht man, den Ball im Spiel zu halten.

Übung 25) Schreiben Sie das Computerspiel Breakout: ein Ball bewegt sich über das Spielfeld, das unten „offen ist“; mit einem einfachen Schläger versucht man, den Ball im Spiel zu hal-ten. Im oberen Teil des Spielfeldes sind viele Ziegelsteine, diese werden vom Ball zerschlagen und bringen Punkte.


183

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


• Dass die Datenübertragung zwischen Browser und Server abgehört werden kann – be-sonders einfach dann, wenn der Client über W-LAN mit dem Internet verbunden ist. Dass https davor schützt.

• Dass jede PHP-Datei eine öffentliche Schnittstelle ist an ein Angreifer viele Tausend Einbruchs-Versuche machen kann, bevor Sie das bemerken. Dass alle Daten, die vom User kommen, verdächtig sind.

• Dass Ihre Website, wenn Sie Input von Usern wieder als HTML-Code ausgibt, für Cross Site Scripting Attacks (XSS) anfällig ist.


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


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


• Den Stand eines Counters mit loadVar laden.


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


• User-Input mit Regular Expressions prüfen.

10.2 HTTP HTTP ist in RFC 2616 definiert. HTTP baut auf TCP auf, d.h. die hier dargestellten Daten wer-den über eine TCP-Verbindung zwischen Client und Server übertragen. In Kapitel 1.1.3 wurde HTTP schon einmal grob vorgestellt; nun werden wir HTTP genauer betrachten.

WWW und Multimedia: HTTP

184

10.2.1 Ablauf im Überblick

Egal ob der Vorgang durch das Eintippen einer URL oder durch das Anklicken eines Linkgs ge-startet wird — das Laden einer Webseite über HTTP funktioniert immer gleich.

1. Der Browser analysiert die URL: falls Sie eine IP-Adresse enthält geht’s weiter zum näch-sten Schritt. Falls sie einen Domain Namen enthält wird dieser mittels DNS-Lookup in die entsprechende IP-Adresse übersetzt.

2. Der Browser baut eine TCP-Verbindung zum Server auf (Default: Port 80)

3. Der Browser sendet über die TCP-Verbindung einen HTTP-Request; dieser besteht aus einer ersten Zeile, einem Header und manchmal einem Body.

4. Der Webserver nimmt den Request entgegen und analysiert ihn. Meistens interpretiert er ihn als Aufforderung, eine bestimmte Datei aus dem Dateisystem zu lesen.

5. Der Webserver schickt über die TCP-Verbindung einen HTTP-Response an den Browser, dieser besteht aus einem Statuscode, z. B. „200 OK\n\n“, einem Header und dem Inhalt des angeforderten Dokuments.

6. Der Browser nimmt das Dokument in Empfang, stellt es geeignet dar, und beendet die TCP-Verbindung.

Dieser einfache Ablauf kann durch die Verwendung von Proxies und Caches sowie durch das wiederholte Abrufen von Dokumenten vom selben Server komplizierter werden — das ignorie-ren wir aber erst einmal.

10.2.2 Aufbau von Request und Response

Jede Anfrage des Clients und jede Antwort des Servers besteht aus einer ersten Zeile mit besonderer Bedeutung, einem Header und einem Body. Header und Body funktionieren ähn-lich wie bei einer E-Mail:

Hier ein Beispiel für einen Request:

Erste Zeile GET /rezensionen/list.php3?no=20 HTTP/1.1

Beliebig viele Header-Zeilen

Host: www.biblio.at

User-Agent: Mozilla/5.0 (Win98; de-AT) Gecko/20020311

Accept: text/html;q=0.9,text/plain;q=0.8,*/*;q=0.1

Accept-Language: de-at, de;q=0.66, en-us;q=0.33

Accept-Encoding: gzip, deflate, compress;q=0.9

Accept-Charset: ISO-8859-15, utf-8;q=0.66, *;q=0.66

Eine leere Zeile trennt Header und Body (\n\n,


185

hier unsichtbar)

Body (leer)

Die erste Zeile einer Client-Anfrage besteht aus: Methode, URL-Fragement und HTTP-Versionsnummer. Die meist-verwendete Methode ist GET. Sie erinnern sich: bei Web-Formularen muss man die Methode angeben, mit der die Daten an den Server übertragen wer-den sollen (Kapitel 6.4.2, Seite 113). Das ist diese Methode.

Hier ein Beispiel für eine Server-Antwort:

Erste Zeile HTTP/1.0 200 OK

Beliebig viele Header-Zeilen Date: Sat, 27 Apr 2002 05:52:57 GMT

Server: Apache/1.3.9 (Unix) Debian/GNU

Content-Type: text/html

Eine leere Zeile trennt Hea-der und Body (\n\n, hier unsichtbar)

Body des HTTP-Response enthält das gesamte Doku-ment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitio-nal//EN">

<html><head><meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1">

<title>Rezensionsdatenbank des Österreichischen Bi-bliotheksWerkes</title>

<link rel="Stylesheet" href="rezensionen.css" />

</head><body>nix</body></html>

Die erste Zeile der Server-Antwort besteht aus der HTTP-Versionsnummer, dem Statuscode und einem erklärenden Text zum Statuscode, der aber nicht standardisiert ist.

Die wichtigsten Statuscodes sind 200 (ok), 404 (not found), 403 (forbidden).

Header-Zeilen gibt es sehr viele; relativ wenige davon werden von Clients und Servern wirk-lich beachtet.

Request

Host: www.biblio.at Wichtig wenn der Server unter mehre-ren Domain Names (aber nur einer IP-Adresse) erreichbar ist.

Request

User-Agent: Mozilla/5.0 (Win98; de-AT) Gecko/20020311 User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90)

Selbstdarstellung des Clients: welcher Browser, welche Version. Die meisten Clients lügen, und behaupten sie wä-ren Mozilla, erst in der Klammer folgt die richtige Angabe.


186

Response

Date: Sat, 27 Apr 2002 05:52:57 GMT

Datum und Uhrzeit am Server

Response


Selbstdarstellung des Servers

Response


MIME-Type des im Body gelieferten Dokuments

10.2.3 HTTP abhören

Wie können Sie HTTP beobachten? Entweder mit einem allgemeinen Netzwerk-Sniffer wie Ethereal/Wireshark28 oder mit der Firefox-Extension Live HTTP Headers29.

Abbildung 146: HTTP abhören mit Wireshark (links) und Live HTTP Headers (rechts)

Die folgenden Anwendungsbeispiele wurden mit Live HTTP Headers mitgeschnitten.

10.2.4 Seite laden oder Formulardaten senden mit GET

Die Methode GET wird bei den meisten HTTP-Anfragen verwendet - sowohl bei normalen Links als auch beim Senden von Formulardaten mit GET. Die URL kann dabei ein Fragezeichen ge-folgt von Parametern und Werten enthalten.

28 http://www. wireshark. org/ 29 http://livehttpheaders. mozdev. org/

Request

Referer: http://my.app.at/form.html Woher kommt der Client? URL der vorigen Seite—falls von dort ein Link hierher verfolgt wurde oder ein FORM. Kann daktiviert werden!


187

Request = Client an Server

Response = Server an Client

GET /rezensionen/list.php3?no=20 HTTP/1.1

Host: www.biblio.at






HTTP/1.0 200 OK

Date: Sat, 27 Apr 2002 05:52:57 GMT



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitio-nal//EN">

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset=iso-8859-1">

<TITLE>Rezensionsdatenbank des Österreichischen

BibliotheksWerkes</TITLE>

<LINK REL=Stylesheet HREF=rezensionen.css>

</HEAD>

Die Länge der übertragenen Daten aus dem Formular ist hier begrenzt durch die Länge der URL. Für größere Datenmengen (z. B. beim Upload von Dateien) gibt es die Methode Post.

Die Header, die mit Accept beginnen, können (laut Standard) dem Aushandeln von Sprache, Datentyp, Encoding dienen; werden aber von Servern und Clients nur teilweise beachtet.

Accept: text/html;q=0.9,text/plain;q=0.8,*/*;q=0.1 bedeutet laut Standard, daß der Client das Dokument lieber als HTML als als Plain Text erhalten würde. Im realen Web wird aber unter einer URL immer nur ein Dokumententyp angeboten. Wenn man eine PDF-Version der gleichen information anbietet, dann geschieht dies unter einer anderen URL.

Accept-Language würde dem Aushandeln der Sprache dienen. Dazu müssten die UserInnen aber im Browser die Sprach-Präferenz konfigurieren:


188

Abbildung 147: Festlegen der Sprach-Präferenz im Browser Firefox

Da aber kaum jemand diese Konfiguration vornimmt wird die Sprach-Aushandlung kaum ver-wendet. Einziges mir bekanntes Beispiel einer Webseite die unter der gleichen URL in ver-schiedenen Sprachen erhältlich ist ist die Homepage von Debian:

Abbildung 148: Homepage von Debian, verschiedene Sprachen bei gleicher URL

10.2.5 Senden von Formulardaten mit Post

Bei POST werden die Daten aus dem Formular nicht in der URL, sondern im HTTP-Body der Anfrage übertragen. Die Codierung (kaufmännisches-Und zwischen den namen=wert-Paaren, + statt Leerzeichen, %-Schreibweise für Sonderzeichen) bleibt gleich. Hier gibt es keine Be-schränkung der Länge.

Request = Client an Server

POST /rezensionen/list.php3 HTTP/1.1

Host: www.biblio.at


Referer: http://www.biblio.at/rezensionen/formular.htm

Content-Type: application/x-www-form-urlencoded

Content-Length: 129

no=20&limit=1&katalog=all&isbn=&nachname=Jellinek&vornam e=&titel=&schlagwort1=&schlagwort2=&Bool=AND&verl=&von=& bis=&submit=SUCHE


189

Die Antwort des Servers unterscheidet sich nicht zwischen GET und POST (außer Sie haben das in PHP absichtlich so programmiert).

10.2.6 Umleitung an neue URL

Mit dem Statuscode 301 kann der Server anzeigen, dass die Seite an eine neue URL übersie-delt ist. Der Webbrowser schickt dann sofort eine Anfrage an die neue URL, die LeserIn be-merkt so eine Weiterleitung meist gar nicht.

(Wie auf Seite 123 beschrieben, können Sie diese Umleitung von PHP aus mit dem header-Befehl auslösen)

Client an Server

Server an Client

GET / HTTP/1.1

Host: www.rezensionen.at






HTTP/1.0 301 Moved Permanently

Date: Sat, 27 Apr 2002 05:52:26 GMT


Location: http://www.biblio.at/rezensionen/

Content-Type: text/html; charset=iso-8859-1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML><HEAD>

<TITLE>301 Moved Permanently</TITLE>

</HEAD><BODY>

<H1>Moved Permanently</H1>

The document has moved <A HREF="http://www.biblio.at/rezensionen/">here</A>.<P>

</BODY></HTML>

GET /rezensionen/ HTTP/1.1

Host: www.biblo.at






und so weiter.


190

10.2.7 Authentisierung nach RFC 2617

Der Webserver kann so konfiguriert werden, dass er Dokumente nur nach Eingabe von User-name und Passwort liefert. Der Browser zeigt dafür ein Eingabefenster an:

Abbildung 149: Eingabefenster für HTTP Authentisierung in verschiedenen Browsern

Falls eine Authentisierung über diese Methode stattgefunden hat, finden Sie den Usernamen in PHP in der Variable $_SERVER['PHP_AUTH_USER'].

Auf Ebene des HTTP-Protokolls betrachtet funktioniert diese Authentisierung wie folgt: bei der ersten Anfrage des Clients schickt der Server einen Status-Code 401 (nicht authorisiert).

Client an Server

Server an Client GET /pr/ HTTP/1.1

Host: www.sbg.ac.at






HTTP/1.0 401 Unauthorized

Date: Sat, 27 Apr 2002 06:05:08 GMT

Server: Apache/1.3.22 (Unix)

WWW-Authenticate: Basic realm="unineu"


<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML><HEAD>

<TITLE>401 Authorization Required</TITLE>

Daraufhin zeigt der Browser das Paßwort-Eingabefenster an. Nach Eingabe von Username und Passwort schickt der Browser die gleiche Anfrage erneut, diesmal aber mit der zusätzlichen Header-Zeile Authorization. In dieser Zeile werden Username und Passwort (leicht verschlüs-selt) mitgeschickt.


191

Wenn Username und Passwort stimmen, schickt der Server eine positive Antwort und das Do-kument.

Der Browser wird bei allen weiteren Anfragen an diesen Server ebenfalls die Authorization-Zeile mitschicken.

GET /pr/ HTTP/1.1

Host: www.sbg.ac.at






Authorization: Basic dHI6cHJyMDBy

HTTP/1.0 200 OK

Date: Sat, 27 Apr 2002 06:05:11 GMT

Server: Apache/1.3.22 (Unix)


<html lang="de">

<head>

<title>Universität Salzburg - Büro für Public Relations</title>

Die Konfiguration des Webservers für diese Art der Authentisierung wird hier am Beispiel von Apache gezeigt. In dem Ordner, der gesperrt werden soll, wird eine Datei .htaccess angelegt:

AuthType Basic AuthName "Intranet der Uni Salzburg" AuthUserFile /home/stud9/pass require valid-user

Weiters wird eine Passwort-Datei mit dem Namen pass angelegt:

brigitte:$apr1$Yj1. . . . . $N72ZRLbh91/q33fhGqlJW1 clemens:$apr1$al1. . . . . $VZguOHeYTiQ7emGSIj4lh.

Diese Datei können Sie mit einem Generator am Web30 erzeugen oder mit dem Programm htpasswd das mit Apache mit geliefert wird. Das funktioniert z.B. auf der Kommandozeile von Windwos so:

C:\xampp\apache\bin>htpasswd -c pass brigitte New password: ******** Re-type new password: ******** Adding password for user brigitte C:\xampp\apache\bin>htpasswd pass clemens New password: *** Re-type new password: *** Adding password for user Clemens

30 http://www.phpbb.de/diverses/htpasswd.php


192

Diese Methode funktioniert auch auf student.cosy.sbg.ac.at. Wenn Sie einen eigenen Apache Server betreiben, können Sie diese Authentisierungmethode mit verschiedenen Backends ver-wenden (LDAP, Datenbank, …) — dafür gibt es verschiedene Apache Module31.

Mit der HTTP-Authentisierung ist das HTTP-Protokoll nicht mehr zustandslos (stateless) — je nachdem, ob schon eine Authentisierung erfolgt ist, reagiert der Server unterschiedlich beim Abrufen ein und derselben URL.

10.2.8 Cookies

Cookies funktionieren analog zur HTTP-Authentisierung, sind aber an keine bestimmte Seman-tik und keine bestimmte Darstellung gebunden: Ein Cookie wird vom Server gesetzt, und ab dann vom Client bei jeder Anfrage mit gesendet.

Cookies werden sehr oft für die Authentisierung verwendet, hier z.B. bei der Anmeldung zu Google Analytics. Die Eingabe von Username und Paßwort erfolgt dabei über ein normales Webformular. (Umfang und Anzahl der Cookies sowie die Anzahl der Weiterleitungen wurden vereinfacht, das Paßwort ersetzt und zusätzliche Zeilenumbrüche eingefügt)

Client an Server

Server an Client

POST /accounts/ServiceLoginBoxAuth HTTP/1.1

Host: www.google.com

Content-Type: application/x-www-form-urlencoded

Content-Length: 198

continue=http%3A%2F%2Fwww.google.com%2Fanalytics%2Fhome%2F%3Fet%3Dreset%26hl%3D&service=analytics&nui=1&hl=en&GA3T=KWFs5RAYvhg&Email=bjelli%40gmail.com&Passwd=sagined &PersistentCookie=yes&rmShown=1

Username und Paßwort werden mit POST über-tragen

Server antwortet mit einer Weiterleitung, dabei wird ein Cookie namens SID gesetzt.

HTTP/1.x 302 Moved Temporarily

Set-Cookie: SID=DQAAAHcAAACb...r6X5BF-Qg; Domain=.google.com;Path=/; Expires=Tue, 05-Jun-2018 11:57:24 GMT

Set-Cookie: GoogleAccountsLocale_session=en

Content-Type: text/html; charset=UTF-8

Server: GFE/1.3

Location: https://www.google.com/analytics/home/?et=reset

GET /analytics/home/?et=reset&hl= HTTP/1.1

Host: www.google.com

Cookie: SID=DQAAAHcAAACb...r6X5BF-Qg

Bei der nächsten Anfra-ge schickt der Client bereits das Cookie mit.

. HTTP/1.x 200 OK

Content-Type: text/html; charset=UTF-8

Server: ga-reporting-fe

31 http://httpd.apache.org/docs/2.0/mod/#other


193

Beim Setzen des Cookies können folgende Einschränkungen vorgenommen werden: Beschrän-kung auf eine bestimmte Domain, auf einen bestimmten Pfad; Setzen eines Ablaufdatums (Expires).

Cookies in PHP

In PHP finden Sie die bereits gesetzten Cookies, die vom Browser zurückgesendet wurden, im Array $_COOKIES (und — zusammen mit GET und POST-Parametern — in $_REQUEST). Neue Cookies können Sie mit setcookie() setzen.

Cookies in Javascript

Im Client können Cookies mit Javascript gelesen und geschrieben werden: über die Eigen-schaft document.cookie des Dokument-Objekts.

Achtung: beim lesenden Zugriff auf diese Eigenschaft enthält man einen String mit allen Coo-kies, die gerade gültig sind.

Zum Setzen von neuen Cookies wird auf die Eigenschaft zugewiesen. Zum Setzen mehrere Cookies wird wiederholt zugewiesen — das hat aber (noch) keinen Einfluß auf den Wert den man aus document.cookie auslesen kann:

alert(document.cookie); // Zeigt die gültigen Cookies document.cookie = "farbe:grün"; document.cookie = "anzahl: 3"; document.cookie = "passwort: total super geheimes aber recht langes passwort"; alert(document.cookie); // Zeigt immer noch die ALTEN Cookies !!!

Erst wenn ein neuer Request an den Server erfolgt, werden die neu gesetzten Cookies mit gesendet: erst wenn die Antwort wieder dargestellt wird, sind die neuen Cookies in Javascript über document.cookie lesbar!

Cookies und Sessions

PHP bietet die Möglichkeit mit Hilfe von automatisch erstellten Cookies Sessions zu verwal-ten. Hier ein Beispiel aus der PHP Dokumentation:

<?php session_start(); if (!isset($_SESSION['zaehler'])) { $_SESSION['zaehler'] = 0; } else { $_SESSION['zaehler']++; } ?>

Sobald im PHP-Programm session_start() aufgerufen wird, wird überprüft, ob schon ein Session-Cookie vorliegt und falls nicht, ein neues an den Client gesandt. Bei weiteren Aufru-fen von PHP-Programmen am selben Server kann nun der Client an hand des Cookies identifi-ziert werden. Diese PHP-Programme können dann wieder auf die gleichen Daten im Array $_SESSION zugreifen.


194

10.2.9 HTTPS

HTTPS ist HTTP über Secure Socket Layer (SSL) — d.h. auf Ebene der TCP-Verbindung werden alle übertragenen Daten verschlüsselt. Ausserdem bietet SSL die Möglichkeit, daß sich der Server und der Client mit einem Zertifikat ausweisen.

Ob HTTPS oder HTTP verwendet wird, hängt von der Konfiguration des Server ab. Wenn Sie nur Webspace in „Untermiete“ benutzen (wie auf student.cosy.sbg.ac.at), können Sie HTTPS nicht aktivieren.

Die Verschlüsselung und Entschlüsselung des gesamten Verkehrs braucht CPU-Zeit — der Web-server kann also weniger Anfragen bedienen als mit HTTP. Eine Möglichkeit diese Belastung vom Webserver „fernzuhalten“ ist die Terminierung von SSL auf einem anderen Rechner.

10.2.10 Proxies

Das HTTP-Protokoll sieht die Möglichkeit von Proxies vor. Ein Proxie ist eine „Zwischenstati-on“ die HTTP-Verkehr weitergibt, der Proxy agiert also auf der einen Seite als HTTP-Server, auf der anderen Seite als HTTP-Client. Im Browser kann ein Proxie konfiguriert werden:

Abbildung 150: Proxy-Konfiguration in Firefox: Extras - Einstellungen - Erweitert - Netzwerk – Verbindung

Ist ein Proxy konfiguriert dann baut der Browser die HTTP-Verbindung nicht direkt zum Ziel-rechner auf, sondern zum Proxy, und verändret die Form der ersten Zeile der HTTP-Anfrage: die vollständige URL wird angegebe:

GET http://www.sbg.ac.at/pr/ HTTP/1.1

Proxies können gleichzeitig als Cache fungieren: Anfragen und Antworten werden gespei-chert; erfolgt die gleiche Anfrage noch einmal, kann die gespeicherte Antwort verwendet werden.


195

10.3 Security von Web-Applikationen Sicherheit ist ein heikles Thema, deswegen eine Warnung vorneweg: dies ist keine vollständi-ge Darstellung aller möglichen Sicherheitsrisiken. Betrachten Sie dieses Kapitel nur als Ein-stieg in das Thema, nicht als endgültige Abhandlung.

10.3.1 Keine Ausreden

Egal wie klein, unwichtig, unbekannte Ihre Web-Applikation ist: das ist keine Ausrede dafür sich nicht um Security zu kümmern.

Selbst die kleinste, unwichtigste, unbekannteste Applkation wird „zum Spaß“ von Vandalen angegriffen. Selbst die kleinste, unwichtigste, unbekannteste Applikation wird angegriffen um Kontrolle über den Server zu erlangen, und dann von diesem Server aus weitere Attacken auf weitere Ziele zu starten.

Sie sind also nicht nur für sich selbst, sondern auch zum Schutz von Anderen für die Sicherheit Ihrer Applikation verantwortlich.

Dies gilt in besonderem Maße wenn Sie Ihre Web-Applikatoin als open source am Internet zur Verfügung stellen. Wenn ihr Programm erfolgreich ist, und auf vielen Webservern installiert wird, dann wird jede Sicherheitslücke gefunden und ausgenutzt werden!

Sie sollten dabei nicht vergessen: Die Einstiegsseite Ihrer Applikation ist nicht der einzige Angriffspunkt: jede einzelne URL der Applikation ist ein möglicher Angriffspunkt. Jede URL ist eine öffentliche Schnittstelle der Webapplikation!

10.3.2 Beispiele für Attacken

Was will die böse HackerIn erreichen? Hier ein paar Beispiele für mögliche Attacken:

Durch eine große Anzahl von Zugriffen den Server langsamer machen oder zum Absturz brin-gen (Denial of Service Attack, DoS).

Die Applikation dazu bringen, daß sie ein nicht vorgesehenes Verhalten zeigt, z.B. SPAM Mail versendet, Passwortdateien anzeigt, E-Mail Adressen von KundInnen anzeigt, …

Die Applikation dazu bringen, daß sie ins Filesystem schreibt.

Die Applikation dazu bringen, daß sie Befehle ausführt.

Durch gezielte Eingaben nicht vorgesehene SQL-Befehle ausführen um Daten zu zerstören oder zu erlangen (SQL Injection).

WWW und Multimedia: Security von Web-Applikationen

196

Einer UserIn eine URL einer bekannten Applikation mailen die schon eine Session-ID enthält; wenn sich die UserIn über diese URL anmeldet, kann die HackerIn die Session auch mitbenut-zen (Session Fixation).

Einer UserIn eine URL oder eine HTML-Seite mailen, die (in Kombination mit den Zugriffsrech-ten/Cookies dieser UserIn) unerwartetes Verhalten bei einer Web-Applikation bewirkt, wenn diese aufgerufen/angzeigt wird (Phishing).

Die Applikation so manipulieren, daß anderen UserInnen HTML+Javascript-Code angezeigt wird, der eine Attacke auf diese UserInnen ist (Cross Site Scripting) — um deren Coo-kies/Session auszulesen oder deren Zugriffsrechte zu benutzen (Cross Site Request Forgerie).

Wenn verschiedene User einen Webserver teilen: die „Nachbarn“ ausspionieren, gemeinsam genutzte Pfade für Uploads und Sessions ausnutzen.

10.3.3 Tipps für mehr Sicherheit in PHP

Din paar Tipps wie sie Sicherheits-Probleme vermeiden können.

Tipp 1: Es gibt keine Security im Client! Z.B. Eingabeprüfung in Javascript ist nett, ersetzt aber keine Eingabeprüfung am Server.

Tipp 2: Eingaben aus $_GET, $_COOKIE oder $_POST lesen, nicht aus $_REQUEST. Dort finden sich Strings. Diese Strings prüfen und in den richtigen Datentyp konvertieren (siehe Funktio-nen zum Prüfen von Daten, Seite 197).

Tipp 3: Daten vor der Verwendung in SQL, auf der Kommandozeile, als URL oder als Webseite richtig escapen (siehe Funktionen zum Escapen von Daten, Seite 198). (Escapen ersetzt nicht die Prüfung!)

Tipp 4: Include nur mit fixem Pfad, niemals include( $_POST['includepath'] );

Tipp 5: Include-Dateien immer mit Endung .php speichern—nicht als .txt oder .inc, die könnten über das Web lesbar sein.

Tipp 6: Niemals Datei-Uploads erlauben mit denen neue Dateien mit der Endung .php in den Webspace geschrieben werden können.

Tipp 7: Falls möglich Prepared-Statements für SQL verwenden.

Tipp 8: Sessions nicht nach dem Login weiter verwenden, sondern nach dem Login neue Ses-sion erzeugen mit session_regenerate_id().

Tipp 9: Wenn mehrere User einen Webserver teilen: mit den Konfigurations-Optionen open_basedir und safe_mode möglichst getrennt halten.


197

Konfiguration von PHP

In der folgenden Tabelle finden Sie wichtige Konfigurationseinstellungen von PHP. Am Besten setzten Sie dieses Konfigurationen in der Datei php.ini für den ganzen Webserver fest. Falls Sie keinen Zugriff auf php.ini haben können manchen Konfigurationen auch zur Laufzeit mit ini_set() vorgenommen werden.

register_globals = Off

Verhindert, daß aus Parametern automatisch PHP-Variablen werden — das war in frühen PHP-Versionen ein Automatismus.

safe_mode = On Beschränkt die Rechte des PHP-Skripts auf den Rechtebereich einer UserID, z.B. erlabut chdir() nur in Verzeichnisse, die zur UserID passen.

safe_mode_gid = On Verwende für die Beschränkungen des safe_mod die GroupID statt der UserID.

magic_quotes_gpc Sollen GET- und POST-Parameter und Cookies automatisch es-caped werden? Defaultwert ist ja, auf nein setzen!

error_reporting = E_ALL Mehr Fehlermeldungen sehen …

log_errors = On … im Logfile des Webservers

session.referer_check Sessions nur akzeptieren, wenn sie mit dem richtigen Referer kommen.

PHP Funktionen zum Prüfen von Daten

Alle Eingaben sind suspekt und müssen erst sorgfältig geprüft werden. Hier ein paar Funktio-nen zum Prüfen von Eingaben:

ctype_alnum Check for alphanumeric character(s)

ctype_alpha Check for alphabetic character(s)

ctype_digit Check for numeric character(s)

ctype_lower Check for lowercase character(s)

ctype_space Check for whitespace character(s)

ctype_upper Check for uppercase character(s)

Mit Regular Expressions kann man noch komplexere Prüfungen erstellen:

preg_match_all Perform a global regular expression match

WWW und Multimedia: Security von Web-Applikationen

198

preg_match Perform a regular expression match

PHP-Funktionen zum Escapen von Daten

In einer Web-Applikation werden verschiedene Technologien kombiniert: HTML, Javascript, URLs, PHP, SQL, Kommandozeile und Filesystem des Betriebsystems. Jede der hier erwähnten Sprachen und Standards hat eigene, andere Regeln für das Escapen von Sonderzeichen. Hier ein paar Funktionen, die dabei helfen:

html_entity_decode Convert all HTML entities to their applicable characters

htmlentities Convert all applicable characters to HTML entities

htmlspecialchars_decode Convert special HTML entities back to characters

htmlspecialchars Convert special characters to HTML entities

strip_tags Strip HTML and PHP tags from a string

Urlencode URL-encodes string

Urldecode URL-decodes string

escapeshellcmd Escape shell metacharacters

mysql_real_escape_string Escapes special characters in a string for use in a SQL statement for MySQL

10.3.4 Mit unsicheren Scripts leben

Idealerweise wird jedes einzelne PHP-Skript sorgfältig auf Sicherheitsprobleme geprüft, wer-den regelmäßig Security-Updates an fertigen PHP-Applikationen vorgenommen. Das kann aber schnell unübersichtlich werden: selbst eine kleine Firma hat vielleicht eine öffentliche Web-seite, ein Extranet, ein internes Wiki, ein Forum,… also viele verschiedene Applikationen.

mod_security schafft eine zentrale Stelle, an der alle Web-Applikationen geschützt und beo-bachtet werden können:

Wie in Abbildung 151 gezeit wird in der „demilitarisierten Zone“ (DMZ) wird Webserver mit reverse Proxy installiert. Vom Internet aus betrachtet ist diese Maschine der Webserver auf dem alle Applikationen laufen. „reverse Proxy“ bedeutet, dass jeder HTTP-Request an www.firma.at (für den Client unbemerkt) an den richtigen Webserver phpbox.firma.at wei-tergegeben wird. Ein direkter Zugriff vom Internet auf phpbox.firma.at wird durch die Fire-walls verhindert.


199

Abbildung 151: mod_security und reverse proxy in der demilitarized zone

Das Apache-Modul mod_security wird auf www.firma.at installiert und bietet die Möglich-keit Zugriffe auf Ebene von HTTP im Detail zu überprüfen, zu verändern, zu blocken. Damit können Sicherheitslücken von verschiedenen Web-Applikationen an einer zentralen Stelle behoben werden.

Wurde z.B. in einer Web-Applikation nicht auf das korrekte escapen von SQL geachtet, so dass Sie anfällig für SQL-Injection ist, dann können mit mod_security Anfragen mit verdächtigen Parametern einfach blockiert werden, sie erreichen nie die Web-Applikation:

Die Anfrage GET /delete.php?id=6 wird an phpbox weitergeleitet, eine Anfrage GET /delete.php?id=6+or+1=1 wird blockiert.

(Siehe http://modsecurity.org/)

www.firma.at

phpbox.firma.at

WWW und Multimedia: Daten vom Server laden in Flash

200

10.4 Daten vom Server laden in Flash Kombinieren Sie die Stärken von Flash mit den Stärken serverseitiger Programmie-rung. Flash hat dabei die Rolle, Information darzustellen. Das Programm am Ser-ver kann Daten auf Dauer speichern, die Kommunikation mit anderen Usern her-stellen, etc.

Betrachten wir noch einmal die Kommunikation zwischen Client und Server im Web:

Abbildung 152: Kommunikation zwischen Webbrowser, Webserver und Flash Player

Der Webbrowser stellt eine Anfrage an den Webserver (Pfeil 1 in Abbildung 152), der Webser-ver antwortet in dem er z.B. HTML-Daten sendet (Pfeil 2). Der Browser liest die HTML-Daten und stellt sie dar. Wenn ein object Tag enthalten ist, der auf eine swf-Datei verweist dann stellt der Webbrowser eine weitere Anfrage an den Server (Pfeil 1) um die swf-Datei zu laden. Der Server sendet die swf-Datei (Pfeil 2).

Nun startet der Browser den Flash Player als Plugin, und übergibt ihm die Kontrolle über ei-nen Bereich des Browser-Fensters. Der Flash Player erhält die swf-Datei und stellt diese dar. So weit, so bekannt.

In der swf-Datei können nun Actionscript-Befehle enthalten sein, die den Flash Player anwei-sen, eine Anfrage an den Server zu schicken (Pfeil 3). Wenn die Antwort des Server einlangt (Pfeil 4), wird in der swf-Datei eine onLoad Funktion aufgerufen.

10.4.1 Einfache Daten laden

Wir verwenden ein PHP-Programm auf dem Server student.cosy.sbg.ac.at, das mehrere Zugriffszähler führt und immer den aktuellen Stand des Zählers ausgibt. Aufruf des Counters:

counter.php?name=brigitte


201

Die Ausgabe des Programms ist nicht für die Anzeige im Browser gedacht, sondern für die Weiterverarbeitung in Flash. Der Output sieht so aus:

count=123

Mit dem (veralteten) Actionscript-Befehl loadVars oder mit dem (moderneren) Objekt load-Vars kann man diese Daten in Flash lesen.

So sieht ein Flash-Programm aus, das diese Daten abholt und liest:

1 url = "http://student.cosy.sbg.ac.at/.../counter.php?username=b"; 2 l = new LoadVars(); 3 l.onLoad = function(success) { 4 if (success) { 5 trace("daten sind da: " + this.count); 6 } else { 7 trace("fehler beim Laden von " + url); 8 } 9 } 10 l.load(url); 11 trace("...gleich geht's weiter");

Zeilen eins bis neun sind nur die Vorbereitung, erst Zeile 10 startet den asynchronen Lade-Vorgang vom Webserver.

Wenn dann viele Millisekunden später die Daten vom Webserver eintreffen wird die onLoad-Funktion des LoadVars-Objekts (die in Zeile 3 bis 9 definiert wurde) gestartet.

Innerhalb dieser onLoad-Funktion sind die Daten vom Webserver als Eigenschaften von this lesbar: hier also this.count.

Setzen Sie den Counter mit einer kleinen Bühnen-Größe um, damit Sie diesen Flash-Film als keines Widget in eine vorhandene HTML-Seite einbinden können.

10.4.2 XML für Slideshow

Ein PHP-Programm liefert eine Liste der am Server vorhandenen Bilder als XML-Daten an Flash. Flash stellt die Bilder in einer Slideshow dar. Das PHP-Programm wird als Datei mit der Endung .php in den Ordner mit den Bildern gespeichert:

<?php header("Content-Type: application/xml"); $bilder = glob("*.jpg"); echo("<bilder>\n"); foreach( $bilder as $bild ) { echo("<bild imgurl='$bild' />\n"); } echo("</bilder>\n"); ?>

WWW und Multimedia: Daten vom Server laden in Flash

202

Der Output des PHP-Programmes sind XML-Daten:

<bilder> <bild imageurl="img/DSC_3461.jpg" /> <bild imageurl="img/DSC_3462.jpg" /> </bilder>

Testen Sie zuerst das PHP-Programm alleine mit dem Browser: der Browser kann den XML-Output des Programmes gut darstellen. Wenn Sie ein zusätzliches Bild in den Ordner laden, sollte es beim nächsen Aufruf im XML erscheinen.

Abbildung 153: Darstellung von XML-Daten im Webbrowser Firefox

Das Laden der XML-Daten erfolgt wieder asynchron, mit dem XML-Objekt:

var xml:XML = new XML(); // Leerzeichen und Formatierungen in XML // sollen ignoriert werden: xml.ignoreWhite = true; // wenn Daten fertig gelanden wurden // rufe die Funktion XMLgeladen auf xml.onLoad = xmlGeladen;

Die Struktur der XML-Tags wird in Flash als Baum von Objekten dargestellt; das XML-Objekt ist dabei die Wurzel des Baumes.

Abbildung 154: Darstellung der XML- Struktur als Baum


203

In Javascript wird dasselbe Prinzip für die Darstellung des HTML-Dokuments als Baum von Objekten verwendet; Sie kennen es dort unter dem Namen Document Object Model oder kurz DOM.

Auch die Befehle, Funktionen, Eigenschaften zur Manipulation des DOM sind in Actionscript gleich wie in Javascript:

Mit den Eigenschaften firstChild und childNodes kann man in diesem Baum navigieren:

xml.firstChild entspricht dem bilder Tag.

xml.firstChild.firstChild entspricht dem ersten bild Tag.

xml.firstChild.childNodes ist ein Array das alle bild Tags enthält, xml.firstChild.childNodes[0] entspricht also wieder dem ersten bild Tag.

Jedes Objekt im Baum enhält ein Objekt attributes, das die Namen und Werte der Attribute speichert:

xml.firstChild.firstChild.attributes.imgurl liefert den Wert des imgurl-Attributes des ersten Bildes.

Die Funktion xmlGeladen liest nun die Daten aus dem XML-Baum und schreibt die Namen der Bilder in ein Array namens bilderListe, dieses Array wird in weitere Folge von der Funktion zeigeBilder verwendet um die Slideshow zu starten.

function xmlGeladen() { var xnode:XMLNode; // hier wird ausgelesen wie viele nodes sich im XML befinden. anzahlBilder = xml.firstChild.childNodes.length; for(var i:Number = 0; i < anzahlBilder; i++) { // Bild nummer i xnode = xml.firstChild.childNodes[i]; bilderListe.push(xnode.attributes.imgurl); } // Darstellung der Slideshow starten zeigeBilder(); }

WWW und Multimedia: Literatur- und Web-Tipps

204

Anhänge

Literatur- und Web-Tipps

Web + HTTP

HTTP 1.1: RFC 2616 - http://www. w3. org/Protocols/rfc2616/rfc2616.html

HTML + CSS

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

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

Jellinek, Brigitte (2006): Handbuch Webdesign. Wikibook. http://de.wikibooks.org/wiki/Webdesign

Freeman, Elisabeth (2006): HTML mit CSS & XHTML von Kopf bis Fuß. O'Reilly. ISBN 978-3897214538

Shea, Dave/ Holzschlag, Molly: CSS Zen Garden. http://csszengarden.com/

Müller, Peter (2007): Little Boxes. Markt+Technik-Verlag. ISBN 978-3827242242

Münz, Stefan: Selfhtml. http://de.selfhtml.org

Münz(2006): Professionelle Websites. Programmierung, Design und Administration von Web-seiten. Addison-Wesley, München. ISBN 3827323703

PHP

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

Templating-System Smarty für PHP. http://smarty.php.net/

PEAR - PHP Extension and Application Repository. http://pear.php.net

KERSKEN,Sascha (2005): Praktischer Einstieg in MySQL mit PHP. O'Reilly Vlg GmbH & Co.. ISBN 3897214032.

Lerdorf, Rasmus (2006): Programmieren mit PHP. O'Reilly; 2. Auflage. ISBN 978-3897214736

Schmidt, Stephan (2007): PHP Design Patterns. O'Reilly. ISBN 978-3897214422.

Welling, Luke (2004): MySQL-Tutorial. München: Addison-Wesley. ISBN 978-3827321695.

http://php.net/�


205

SHIFLETT,Chris (2005): Essential PHP Security. O'Reilly Media, . ISBN 059600656X.

Javascript + AJAX

FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN 3897214911.

CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.

POWERS,Shelley (2007): Adding Ajax. O'Reilly Media, . ISBN 0596529368.

jQuery Library. http://jquery.com/

Prototype Library. http://www.prototypejs.org/

Flash

MOOCK,Colin (2004): Essential ActionScript 2.0. O'Reilly Media, . ISBN 0596006527.

MOOCK,Colin (2007): Essential ActionScript 3.0. Adobe Dev Library. ISBN 0596526946.

Flashtuts — Adobe Flash Tutorials. http://www.flashtuts.de/htdocs/

Flash Kit. http://www.flashkit.com/

Flash Forum. http://www.flashforum.de/forum/

WWW und Multimedia: Stichwortverzeichnis

206

Stichwortverzeichnis 3d 88 Absende-Button 115 Abspielkopf 84 Abstraktion

mit Funktionen 136 Actionscript 99 Actionscript 2 99 Actionscript 3 99 Adobe 70 Aggregator 154 Aktionen-Fenster 99 Aktiver Bereich 97 Alpha

verändern mit Tween 87 Anführungszeichen

für Strings 111 animiertes Gif 72 Argument

einer Funktion 137 asynchron 210 attributes 212 auditiv 73 aufrufen

eine Funktion ... 137 auskommentieren 105 Austausch von Daten 82 Auswahlwerkzeug 77 Automatische Codeformatierung 99 Bewegung

mit Bewegungstween 87 Bézierkurve 135 Bibliothek 81 Bildfeld 117 Bildname 111 Bildrate 83 Blog Reader 152 Blogger 151 Braille 73 Bühne 75 Button 96, 117

Größe 97 Checkbox 114 childNodes 212 closedir 67 Code-Block 106 curveTo 134 Darstellung mit Zwiebelschalen 86 Datei-Upload 117 Datenbank 56 defekter Bewegungstween 88 definieren

eine Funktion ... 137 Dienst 57 Document Object Model 211 DOM 211 Drehung 89

verändern mit Tween 87 Eigenschaften 75 Ende der Zeit 85 Endlos-Schleife 138 F9 99 Farbe

beim Zeichnen einer Linie 134 beim Zeichnen mit lineTo und curveTo 134

Farbeimerwerkzeug 78 Faulheit 138 Fehlersuche 103 fieldset 117 Film-Explorer 103 Fireworks 72 firstChild 212 Frame 83 Framename 111 Frames pro Sekunde 183 Füllung 76 Funktion 136 Geschwindigkeit

eines Bewegungstweens 90 glob 67 gotoAndPlay() 110 Grafiksymbol 94 Größe

eines Buttons 97 verändern mit Tween 87

HTML 72 Variable an Flash übergeben 161

ImageReady 72 include 101 Instanz

eines Symboles 81 Instanznamen 81 interaktiv 72 Javascript 73 Kommentar 102, 105 Kontur 76 Kurve 134 Langsamer machen 85 leeres Schlüsselbild 85 legend 117 lineStyle 134 lineTo 134 Linien in Füllungen konvertieren 78


207

Liste (Eingabefeld) 115 load

LoadVars 210 loadMovie() 183 LoadVars 210 Manipulation der DOM 212 Menü 115 moveTo 134 MovieClip 94 Multimedia 73 Name

für einen Frame 111 Objektzeichnungsmodell 76 on (release) 109 onEnterFrame 184 onLoad

LoadVars 210 opendir 67 Original 79 Passwort-Feld 114 Pfad 89 Pfadebene 89 play() 109 Radiobutton 115 Radiobuttons 115 readdir 67 Registrierungspunkt

für Pfadanimation verwenden 89 Registrierungs-Punkt 80 release 109 Rollover-Bild 73 RSS Reader 152 Schaltfläche 96 Schleife 138

Endlos- 138 Schlüsselbild 84

leer 85 mit Inhalt 84

Schneller machen 85 skalierbar 70 Skript-Navigator 103 SMIL 74 Sound-Ereignis 156 stop() 109 Streaming

Audio 157 Video 158

String 111 Symbol 79 Tangente 77 target 107 Tastaturkürzel

für die Zeitleiste 85 für Werkzeuge 79

Template 56, 151 Textbereich 114 Textfeld 114 Tintenfasswerkzeug 78 Tooltipps 99

im Aktionen-Fenster 101 trace() 105 Transformation-Punkt 80 Transformationspunkt

für Drehung verwenden 89 Transparenz

verändern mit Tween 87 Tween

Probleme bei Bewegungstween 88 Unsichtbares Feld 117 URL-Codierung 163 vektorbasiert 70 Verhaltensweisen 99 Verstecktes Feld 117 Video Streaming 158 Weblog 150

Publishing System 151 Template 151

Werkzeug 75 Werkzeugleiste

für Aktionen 99 while-Schleife 138 Wiederverwertung

von Buttons 98 Windows-Dienst 57 XAMPP Control Panel 57 Zeitleiste 83

mit Actionscript steuern 110 Zurücksetzen-Button 115 Zwiebelschalen 86

Document

Documents

Transcript of Document