Externe Sound-, Video- und andere Dateien
Ein Lagebericht über interne Multimedia-Funktionen im Web
Bemerkungen zu Shockwave und anderen Netscape-Plug-Ins
Tag 5
Kapitel 9 - Externe Dateien, Multimedia und Animation
Multimedia ist heutzutage ein sehr abgedroschenes Wort, das in uns Bilder von teuren CD-ROMs mit viel intergriertem Sound und Video hervorruft, von 3-D-virtuellen Umgebungen mit raffinierten Oberflächen und ununterbrochener Aktion wie in Doom. Multimedia im Web erzeugt jedoch, vor allem wegen der Begrenzungen der Netzwerk-Geschwindigkeiten und der plattformübergreifenden Dateiformate, noch längst nicht so viel Spaß. Multimedia im Web birgt das Potential, sehr interessant zu werden, besteht zur Zeit aber vor allem aus kleinen Sound- und Videodateien und einfachen Animationen. Gestern haben Sie etwas über Bilder gelernt und vor allem über die Unterschiede zwischen externen und internen Bildern. Sie können dieselbe Unterscheidung zwischen externen und internen Multimedia im Web treffen, und genau das werde ich in diesem Kapitel tun.
Dieses Kapitel besteht aus zwei Hauptteilen. Der erste Teil beschreibt externe Media-Dateien, die die Standardmethode verkörpern, mit der Multimedia auf dem Web verwirklicht wird und die von allen Browsern unterstützt werden. In dieser ersten Hälfte des Kapitels erfahren Sie folgendes:
Im zweiten Teil dieses Kapitels werde ich die neuesten Entwicklungen von Browsern im Bereich von interner Animation und Multimedia behandeln, einschließlich:
Externe Medien im Browser
Gestern haben Sie etwas über den Unterschied zwischen internen und externen Bildern erfahren - interne Bilder erscheinen direkt auf der Webseite, während externe Bilder, nun ja, extern gespeichert und geladen werden, indem man eine Verknüpfung auf einer Webseite anklickt. Die gleiche Unterscheidung von intern und extern betrifft auch viele andere Arten von Medien, nicht nur Bilder. Die allgemeine Definition von externen Medien ist, daß dies Dateien sind, die nicht automatisch geladen, abgespielt oder gezeigt werden, wenn ein Web-Browser eine Webseite liest.
Während Sie bei der Verwendung von internen Medien darauf beschränkt sind, welche Arten von Dateien Sie einsetzen können (und bei den meisten Browsern bedeutet das, daß Sie nur GIF- und JPEG-Bilder einsetzen können), können externe Dateien aus so ziemlich jedem beliebigen Dateiformat bestehen, das Sie sich vorstellen können: nichtinterne GIF-Dateien, MPEG-Video, PostScript-Dateien, mit Zip komprimierte Programme - so ziemlich alles, was Sie auf eine Festplatte packen können, kann als externes Medium betrachtet werden.
Externe Medien in HTML verwenden
Um eine externe Medien-Datei in HTML zu kennzeichnen, erzeugen Sie eine Verbindung auf genau die gleiche Weise, wie Sie es mit einem anderen Dokument täten: mit Hilfe der <A>-Kennung und dem HREF-Attribut. Der Pfad zu der externen Datei ist entweder ein Pfad-Name oder eine URL, gerade so, wie Sie's auch mit einem anderen HTML-Dokument machen würden, und der Text innerhalb der Verknüpfung beschreibt die Datei, zu der Sie verknüpfen. Hier kommt ein Beispiel:
<A HREF="eine_externe_datei"> Eine Medien-Datei. </A>
Was passiert also, wenn Sie eine Verknüpfung zu einer dieser externen Dateien anklicken? Bei einigen Dateien, wie z.B. Bild- und Textdateien, mag Ihr Browser dazu in der Lage sein, die Datei selbst in das gegenwärtige Browser-Fenster zu laden. In vielen Fällen wird Ihr Browser die Datei jedoch herunterladen und sie dann an ein anderes Programm in Ihrem System weiterleiten, welches dazu konstruiert ist, diese Datei zu lesen und mit ihr umzugehen. Diese anderen Programme werden Hilfsprogramme genannt oder manchmal auch Betrachtungsprogramme, und Sie können Ihren Browser darauf einstellen, verschiedene Arten von externen Medien mit verschiedenen Hilfsprogrammen zu betrachten. Wenn der Browser nicht herausbekommen kann, was für eine Art von Datei diese externe Medien-Datei ist, wird er normalerweise ein Dialog-Fenster hervorbringen und Sie um eine Entscheidung bitten (Datei speichern, ein Programm auswählen, das sie lesen kann, oder eine andere Wahlmöglichkeit).
Wie es funktioniert
Woher weiß der Browser, ob eine bestimmte Datei für ihn lesbar ist oder ob sie an ein Hilfsprogramm weitergegeben werden muß? Wie ein Browser eine Datei behandelt, wird von einem dieser zwei Faktoren bestimmt: der Endung des Datei-Namens oder dem Inhaltstyp der Datei. Bisher haben Sie einige Dateiendungen ziemlich oft gesehen - HTML-Dateien müssen die Endung .html oder .htm haben, GIF-Dateien müssen mit .gif enden usw. Wenn Ihr Browser Dateien auf Ihrer Festplatte liest oder betrachtet, benutzt er diese Dateiendungen, um herauszufinden, um was für eine Datei es sich handelt.
Der Inhaltstyp kommt ins Spiel, wenn Ihr Browser Dateien von einem Web-Server erhält. Der Web-Server sendet nicht den Datei-Namen - in einigen Fällen werden die Daten, die zurückgesendet werden, automatisch generiert und haben überhaupt keine Datei-Namen. Was der Browser zurücksendet, ist ein spezieller Code, der Inhaltstyp genannt wird und der dem Browser angibt, was für eine Art von Datei er sendet. Inhaltstypen sehen beispielsweise so aus: text/html, image/gif, video/mpeg, application/msword usw.
Der Inhaltstyp (Content-Type) ist ein spezieller Code, den Web-Server einsetzen, um dem Browser mitzuteilen, was für ein Dateityp gesendet wird. |
Sowohl Browser als auch Server haben Listen von Konfigurationen oder Voreinstellungen, die Dateiendungen den Inhaltstypen zuordnen. Der Server benutzt diese Liste, um herauszubekommen, welcher Inhaltstyp dem Browser mit einer bestimmten Datei gesendet werden soll. Der Browser widerum hat eine zusätzliche Liste, die die Inhaltstypen den Hilfsprogrammen auf dem lokalen System zuordnet (siehe Abbildung 9.1 für Netscape's Anwendungseinstellungen). Auf diese Weise kann der Browser, unabhängig davon, woher er die Datei bezieht, herausbekommen, was er mit ihr tun soll.
Abbildung 9.1: |
Indem der Browser es den Hilfsprogrammen überläßt, sich mit den meisten externen Dateien abzugeben, erspart er sich Arbeit und kann kleiner und schneller bleiben (er braucht sich nicht um jedes geheimnisvolle Dateiformat zu kümmern, das es irgendwo im Web gibt) und kann gleichzeitig für neue und bessere Hilfsprogramme konfigurierbar bleiben, wenn diese geschrieben werden - und auch für neue und bessere Dateiformate.
Mit diesem Wissen im Hinterkopf lassen Sie uns jetzt endlich einige Webseiten erstellen, die Verbindungen zu externen Media-Dateien herstellen.
Externe Sound-, Video- und andere Dateien
Sound- und Videodateien sind als externe Media-Dateien auf einer Webseite ideal. Sie können Sound auf Ihrer Webseite für optionale Ergänzungen des existierenden Textes einsetzen oder für Willkommensbotschaften von Ihnen oder von einer wichtigen Persönlichkeit aus Ihrer Organisation oder für andere Extra-Informationen, die durch Wort und Bild nicht übermittelt werden können. Videos können eingesetzt werden, um Informationen zu übermitteln, die durch statische Bilder nicht abgedeckt werden können (wobei der Ausdruck Video sich auf beliebigen, digital-kodierten Film bezieht - sowohl Animation als auch »echte« Videodateien).
Klangdateien
Um eine Verknüpfung zu einem externen Sound auf Ihrer Webseite herzustellen, müssen Sie diese Sounddatei erst mal im richtigen Format haben, so wie auch bei einem Bild. Sie werden alles über die verschiedenen Arten von Soundformaten in Kapitel 10, »Sound- und Videodateien«, lernen, aber hier kommt schon mal eine kurze Zusammenfassung. Gegenwärtig ist das einzige plattformübergreifende, im Web unterstützte Format das AU-Format von Sun Microsystems. AU gestattet verschiedene unterschiedliche Arten der Klangkodierung, aber die beliebteste ist das 8-Bit-m-law. Aus diesem Grunde werden AU-Dateien häufig auch einfach m-law-Dateien genannt. AU-Dateien haben eine gerade noch akzeptable Qualität, da die 8-Bit-Aufzeichnung sie ein wenig so klingen läßt, als würden sie durchs Telefon übertragen.
Sie können für bestimmte Plattformen andere, qualitativ bessere Soundformate benutzen. Die beliebtesten sind AIFF für den Macintosh und WAVE (WAV) für Windows oder MPEG-Audio, das auf mehreren Plattformen funktioniert, aber nicht so beliebt ist.
Das RealAudio-Format wurde schließlich speziell dafür entwickelt, Audiodateien auf dem Internet und World Wide Web abzuspielen. Im Unterschied zu den meisten Audiodateien, bei denen Sie warten müssen, bis die gesamte Datei heruntergeladen ist, bevor Sie sie anhören können, benutzt RealAudio Streaming (Strömen), was bedeutet, daß es zur selben Zeit abspielen kann, zu der die Datei heruntergeladen wird; es gibt da nur anfangs eine kurze Verzögerung, wenn die ersten Daten auf Ihrer Maschine ankommen. Der einzige Nachteil bei der Verwendung von RealAudio ist der, daß Sie zuerst einen speziellen Server einrichten müssen, der die RealAudiodateien übermittelt, und auch, daß die Verknüpfung zu den Dateien ein wenig anders vor sich geht als die zu normalen Audiodateien. Aus diesen beiden Gründen werde ich RealAudio in diesem Buch erst dann wieder behandeln, wenn Sie bereits mehr über die Arbeit mit Servern wissen.
Damit ein Browser Ihre Klangdatei erkennen kann, muß sie eine passende Dateiendung besitzen. Die gebräuchlichen Formate und ihre Endungen sind in Tabelle 9.1 aufgeführt.
Tabelle 9.1: Klangformate und Dateiendungen
Format |
Endung |
AU |
.au |
AIFF/AIFC |
.aiff, .aif |
WAVE/WAV |
.wav |
MPEG-Audio |
.mp2 |
Sobald Sie eine Datei im richtigen Format und mit der richtigen Endung haben, können Sie weitermachen und sie genauso in Ihre Webseite aufnehmen wie irgendeine andere externe Datei:
Laurence Oliviers Monolog "To Be or
Not To Be" aus der Hamlet-Verfilmung
(<A HREF="olivier_hamlet.au"> AU-Format, 375K </A>)
Videodateien
Videodateien müssen genauso wie Sounddateien in einem gängigem Format vorliegen, um von den gegenwärtigen Web-Browsern gelesen werden zu können. Auch dies wird ausführlich im nächsten Kapitel beschrieben, aber hier kommt schon mal ein kurzer Überblick über die Formate.
Für Videodateien, die plattformübergreifend eingelesen werden können, ist MPEG der gegenwärtige Standard im Web, doch sowohl Microsoft's Video for Windows (AVI) und Apple's QuickTime-Format haben in dem Maße Boden gewonnen, wie Player auch auf anderen Plattformen verfügbar geworden sind. QuickTime und AVI haben zudem den Vorzug, auch Audiospuren ins Video aufnehmen zu können; obgleich MPEG-Videos auch Tonspuren enthalten können, können sie nur von wenigen Playern abgespielt werden.
Die Dateiendungen für jede dieser Videodateitypen werden in Tabelle 9.2 aufgeführt.
Tabelle 9.2: Videoformate und -endungen
Format |
Endung |
MPEG |
.mpeg, .mpg |
QuickTime |
.mov |
AVI |
.avi |
Dann verknüpfen Sie die Datei so mit Ihrer Webseite, wie Sie das mit jeder anderen Datei auch machen würden:
<P><A
HREF="dumbo3.mov">The "pink elephant" scene</A> from
Disney's <CITE>Dumbo</CITE>.</P>
Die Verwendung von externen Medien für andere Dateien
Externe Medien sind nicht auf tatsächliche Medien wie Sound, Video und Bilder beschränkt. Jede Datei, die Sie mit einer Endung auf Ihrer Platte speichern können, kann als externe Medien-Datei angewendet werden: Textdateien, PostScript-Dateien, MS-Word-Dateien, ZIP-Dateien, Macintosh-HQX-Dateien usw. So lange die Datei mit der richtigen Endung versehen und Ihr Browser dazu konfiguriert wurde, mit diesem Dateityp umzugehen, können Sie Verknüpfungen zu diesen Dateien aufstellen, die sie herunterladen, wenn sie ausgewählt werden.
Oder zumindest theoretisch. Bei vielen Dateitypen müssen Sie nämlich auch noch Ihren Server darauf einstellen, mit der Datei auf die richtige Weise umzugehen, oder Sie werden sonst, wenn Sie versuchen, die Datei herunterzuladen, nur Datensalat oder gar nichts bekommen. Inzwischen können Sie damit experimentieren, Verknüpfungen zu unterschiedlichen Dateitypen herzustellen; nächste Woche, im Kapitel 27, »Web-Server: Hinweise, Tricks und Tips«, werde ich mehr über Dateitypen und Server erzählen.
Hinweise zur Verwendung von externen Medien in HTML
Wenn Sie Verknüpfungen zu externen Medien-Dateien von Ihren Webseiten herstellen, dann ist es für Ihre Leser sehr hilfreich, wenn Sie innerhalb der Verknüpfung (oder in ihrer Nähe) einen Hinweis auf das Medienformat (ist es eine AU- oder AIFF- oder AVI- oder MPEG oder eine ZIP-Datei) und die Dateigröße geben. In allen Beispielen, die ich hier gezeigt habe, habe ich diese Angaben eingefügt.
Machen Sie sich klar, daß Ihre Leser keine Möglichkeit haben, herauszubekommen, was sich auf der anderen Seite der Verknüpfung versteckt. Wenn sie sich also dazu entscheiden, die Verknüpfung zu aktivieren, kann es eine Weile dauern, bis die Datei heruntergeladen wurde - und dann finden sie vielleicht heraus, nachdem sie solange gewartet haben, daß ihr System mit diesem Dateityp nichts anfangen kann. Indem Sie Ihre Leser darüber aufklären, was sie auswählen, können sie selber die Entscheidung treffen, ob sich das Herunterladen der Datei für sie lohnt.
Alles, was Sie wirklich tun müssen, ist, einige Wörter in den Verknüpfungstext einzufügen:
<A HREF="bigsnail.jpeg">A
59K JPEG Bild einer Schnecke</A>
<A HREF="tacoma.mov">Der Einsturz der Tacoma Narrows-Brücke </A>
(eine 200K QuickTime-Datei)
Ein anderer nützlicher Trick, den Sie einsetzen können, wenn Sie viele Medien-Dateien auf einer Seite einsetzen, ist der, daß Sie kleine Bildsymbole von verschiedenen Medien-Typen einsetzen, um einen Sound- oder Videoausschnitt (oder ein anderes Medium) anzuzeigen. Abbildung 9.2 zeigt einige Beispiele. Vergewissern Sie sich dabei, eine Aufschlüsselung der Formate anzugeben, und vergessen Sie auch nicht die Dateigrößen.
<A
HREF="bigsnail.jpeg"><IMG SRC="earicon.gif"
ALT="[sound]">Whooping Cranes (JPEG, 36K)</A>
Abbildung 9.2: |
Übung 9.1: Anlegen eines Medien-Archives
Eine der Anwendungsmöglichkeiten von Webseiten ist das Anlegen eines Medien-Archives: eine Webseite, die nur dem Zweck dient, einen schnellen Zugriff auf Abbildungen und andere Medien-Dateien zu ermöglichen.
Bevor das Web populär wurde, wurden Medien-Dateien im Netz auf FTP- oder Gopher-Servern gespeichert. Die textbasierte Natur dieser Archive macht es den Leuten schwer, Abbildungen, Klänge oder Videodateien zu finden, einfach, weil der Datei-Name oft die einzige Beschreibung ist, die sie über den Inhalt der Datei informierte. Und selbst halbwegs beschreibende Datei-Namen wie roter-vogel-in-gruen-baum.gif oder verdi-arie.aiff sind nicht allzu nützlich, wenn Sie über Bilder oder Klänge reden; es ist häufig nur über das tatsächliche Laden der Datei herauszufinden, ob man sie brauchen kann oder nicht.
Mit Hilfe der Verwendung von internen Abbildungen, Symbolen und der Zerlegung von Klang- und Videodateien in kleine Ausschnitte und größere Dateien können Sie im Web ein Medien-Archiv anlegen, das weit brauchbarer ist als irgendeines der textbasierten Archive.
Denken Sie daran, daß diese Art von Archiv, mit seinem
ausgedehnten Gebrauch interner Abbildungen und großer Medien-Dateien, nur für grafische
Browser und schnelle Netzwerk-Verbindungen optimal zu verwenden ist. Gleichwohl bietet das
Web auch in dieser Hinsicht Vorzüge selbst für textbasierte Browser, einfach weil mehr
Platz verfügbar ist. Anstatt nur den Datei-Namen für die Beschreibung der Datei zur
Verfügung zu haben, können Sie so viele Wörter benutzen, wie Sie brauchen. Zum
Beispiel: <P>A <A HREF="orangefish.jpeg">34K JPEG-Datei</A> eines orangen Fischs mit einem leuchtend gelben Auge, der vor einigen sehr pinken Korallen schwimmt. |
In dieser Übung werden Sie ein einfaches Beispiel eines Medien-Archivs mit verschiedenen GIF-Bildern, AU-Klängen und MPEG-Videos anlegen.
Zunächst beginnen wir mit dem allgemeinen Rahmen für das Archiv, also etwas einleitendem Text, einigen internen Abbildungen, um die Dateiarten zu erläutern, sowie Überschriften für jeden Dateityp, wie im folgenden Codebeispiel gezeigt wird (siehe Abbildung 9.3):
<HTML>
<HEAD>
<TITLE>Laura's Way Cool Image Archive</TITLE>
<H1>Laura's Way Cool Image Archive</H1>
<P>Select an image to download the appropriate file.</P>
<P><IMG SRC="penguinslittle.gif">Picture icons indicate GIF
images</P>
<P><IMG SRC="earicon.gif">This icon indicates an AU Sound
file</P>
<P><IMG SRC="film.gif">This icon indicates an MPEG Video
File</P>
<HR>
<H2>Images</H2>
<H2>Sound Files</H2>
<H2>Video Files</H2>
Abbildung 9.3: |
Für das Archiv haben wir vier große GIF-Dateien:
Mit Ihrem Bildverarbeitungsprogramm können Sie nun Verkleinerungen von jedem dieser Bilder anfertigen, die als interne Symbole dienen sollen, und fügen dann die <IMG>-Tags an den passenden Stellen in Ihre Archiv-Datei ein:
<H2>Images</H2>
<IMG SRC="orchidsmall.gif" ALT="a drawing of a pink orchid">
<IMG SRC="jellybeansmall.gif" ALT="a photograph of some
jellybeans">
<IMG SRC="cougarsmall.gif" ALT="a photograph of a cougar">
<IMG SRC="biohazardsmall.gif" ALT="a biohazard symbol">
Beachten Sie, daß ich Werte für das ALT-Attribut der <IMG>-Kennung angegeben habe, die von Browsern, welche diese Abbildungen nicht darstellen können, anstelle der Abbildungen angezeigt werden. Obgleich Sie vielleicht nicht beabsichtigen, daß Ihre Seiten mit nichtgrafischen Browsern gelesen werden, ist dies den Leuten gegenüber höflich, die ihre Seite zufällig aufrufen, wenigstens eine entsprechende Andeutung zu machen. Auf diese Weise kann jeder auf die Medien-Dateien zugreifen, die Sie auf dieser Seite anbieten.
Nun müssen wir die Verkleinerungen der Dateien noch mit den richtigen Bildern verbinden (Abbildung 9.4 zeigt das Ergebnis):
<A HREF="orchid.gif">
<IMG SRC="orchidsmall.gif" ALT="a drawing of a pink
orchid"></A>
<A HREF="jellybean.gif">
<IMG SRC="jellybeansmall.gif" ALT="a photograph of some
jellybeans"> </A>
<A HREF="cougar.gif">
<IMG SRC="cougarsmall.gif" ALT="a photograph of a cougar">
</A>
<A HREF="biohazard.gif">
<IMG SRC="biohazardsmall.gif" ALT="a biohazard symbol">
</A>
Abbildung 9.4: |
Belasse ich das Archiv so, sieht es nett aus, doch verstoße ich gegen meine eigenen Regeln: Ich habe nicht darauf hingewiesen, wie groß die Dateien selbst sind. Sie könnten die Dateigröße einfach neben die Bilder schreiben und die Zeilen auf der Seite umbrechen lassen, wie immer Sie es mögen (Abbildung 9.5 zeigt das Ergebnis):
<H2>Images</H2>
<A HREF="orchid.gif">
<IMG SRC="orchidsmall.gif" ALT="a drawing of a pink
orchid"></A>(67K)
<A HREF="jellybean.gif">
<IMG SRC="jellybeansmall.gif" ALT="a photograph of some jelly
beans"></A>(39K)
<A HREF="cougar.gif">
<IMG SRC="cougarsmall.gif" ALT="a photograph of a
cougar"></A>(122K)
<A HREF="biohazard.gif">
<IMG SRC="biohazardsmall.gif" ALT="a biohazard
symbol"></A>(35K)
Abbildung 9.5: |
Sie könnten auch Zeilenumbrüche (<BR>) nach jedem Bild einfügen, um sicherzustellen, daß die Abbildungen am linken Seitenrand ausgerichtet sind. Ich ziehe die erste Methode vor, weil sie eine kompaktere Anordnung der Bilder erlaubt.
Machen wir nun weiter mit den Klang- und Videodateien. Sie haben drei Klangdateien und zwei Videos. Da diese Dateien nicht einfach auf Thumbnail-Größe verkleinert werden können, beschreiben wir sie im Text des Archives selbst (einschließlich der enormen Größe der Dateien):
<H2>Sound and Video Files</H2>
<P>A five-part a capella renaissance madrigal
called "Flora Gave me Fairest Flowers" (650K)</P>
<P>Some lovely wind-chime sounds (79K) </P>
<P>Chicken noises (112K)</P>
<P>The famous Tacoma Narrows bridge accident (where the bridge twisted and fell down
in the wind)(13Meg)</P>
<P>A three-dimensional computer animation of a flying airplane over a landscape
(2.3Meg)</P>
Nun müssen wir noch die Symbole zu den Beschreibungen ergänzen - das Ohrenbild bei den Klangdateien und das Filmbild bei den Videos. Auch hier fügen wir wieder das ALT-Attribut in die <IMG>-Kennung ein, diesmal als Kurzbeschreibung, die in textbasierten Browsern als Platzhalter für die Verknüpfung dienen wird. Beachten Sie, daß wir keine Textbeschreibungen der Dateiformate zusätzlich zu den Bildsymbolen einsetzen müssen, da wir durch letztere bereits angezeigt haben, welche Dateien zu welchem Typ gehören.
Und schließlich, genauso wie Sie's im Bilderteil dieser Übung getan haben, verbinden Sie die Symbole mit den externen Dateien. Hier ist der HTML-Code für die fertige Liste (Abbildung 9.6 zeigt, wie sie aussieht):
<H2>Sound and Video Files</H2>
<P><A HREF="flora.au">
<IMG SRC="earicon.gif" ALT="[madrigal sound]"> A five-part a
capella renaissance madrigal called "Flora Gave me Fairest Flowers"
(650K)</A></P>
<P><A HREF="windchime.au">
<IMG SRC="earicon.gif" ALT="[windchime sound]"> Some lovely
wind-chime sounds (79K)</A></P>
<P><A HREF="bawkbawk.au">
<IMG SRC="earicon.gif" ALT="[chicken sound]"> Chicken noises
(112K)</A></P>
<P><A HREF="tacoma.mpeg">
<IMG SRC="film.gif" ALT="[tacoma video]"> The famous Tacoma
Narrows bridge accident (where the bridge twisted and fell down in the wind)
(13Meg)</A></P>
<P><A HREF="airplane.mpeg">
<IMG SRC="film.gif" ALT="[3D airplane]">A three-dimensional
computer animation of a flying airplane over a landscape (2.3Meg) </A></P>
Abbildung 9.6: |
Et voilà, Ihr Medien-Archiv (Abbildung 9.6). Durch die Kombination von internen und externen Abbildungen ist es ganz einfach. Und durch die Verwendung des ALT-Attributes kann es sogar ganz vernünftig mit textbasierten Browsern benutzt werden. Abbildung 9.7 zeigt, wie's in Lynx aussieht!
Abbildung 9.7: |
Ein Lagebericht über interne Multimedia-Funktionen im Web
Bis vor ganz kurzer Zeit war die einzige Art, wie Sie Multilmedia-Dateien übers Web verteilen konnten, der Einsatz von externen Dateien, wie er in der ersten Hälfte dieses Kapitels beschrieben wurde. In den letzten Monaten haben jedoch sowohl Netscape als auch Microsoft viele interessante Schritte in Richtung einer besseren Integration von Multimedia innerhalb von Webseiten unternommen. Dies geschah entweder durch den Einsatz neuer HTML-Kennungen, durch fortgeschrittene Fähigkeiten wie Java oder durch die Verwendung von »Plug-Ins« - Hilfsprogramme, die mit dem Browser und den darin betrachteten Dateien enger verbunden sind.
Für den Rest dieses Kapitels werde ich viele der neueren Innovationen im Bereich von internen Medien, die von verschiedenen Browsern unterstützt werden, an Ihnen vorübersausen lassen, einschließlich internen Sound und Video, rollenden Text sowie einfachen Animationen mit GIF-Dateien und Java. Seien Sie sich im klaren darüber, wenn Sie diese Hälfte des Kapitels durchlesen, daß diese Möglichkeiten im Moment neu sind und auf die jeweiligen Browser beschränkt bleiben. Wenn Sie diese Möglichkeiten nutzen wollen, bedenken Sie, daß sie für ihre Leser ohne den jeweiligen bestimmten Browser nicht verfügbar sind.
Internes Video
Einer der ersten Mechanismen für die Handhabung interner Animation wurde mit Microsoft's Internet Explorer eingeführt. Er enthält eine Erweiterung zur <IMG>-Kennung, die es zuläßt, AVI-(Video für Windows-)Dateien direkt auf der Webseite abzuspielen. Diese HTML-Erweiterung, die DYNSRC (Dynamic Source, dynamische Quelle) genannt wird, wird bis jetzt noch von keinem anderen Browser unterstützt; da sie aber von diesen »unwissenden« Browsern ignoriert wird, beeinflußt diese neue Erweiterung die Lesbarkeit der Seite in anderen Browsern nicht. Selbst das aktuelle Release von Netscape - Communicator, die vierte Version des Browser dieser Firma - unterstützt diese Erweiterung nicht.
Um eine AVI-Videodatei auf einer Webseite mit Internet Explorer einzusetzen, verwenden Sie die <IMG>-Kennung mit dem DYNSRC-Attribut. Der Wert von DYNSRC ist der Pfad zur AVI-Datei oder deren URL:
<IMG DYNSRC="gewitter.avi" SRC="gewitter.gif" ALT="[ein Gewitter]">
Beachten Sie, daß Sie immer noch alle anderen gewöhnlichen Attribute der <IMG>-Kennung für Ausrichtung und Umrandungen einsetzen und sie dazu benutzen können, das AVI-Video auf der Seite zu plazieren. Beachten Sie weiterhin, daß das SRC-Attribut immer noch erforderlich ist; denn das dadurch angegebene Bild wird anstelle der AVI-Datei gezeigt, wenn diese entweder nicht gefunden werden kann oder wenn es sich um Browser handelt, die internes Video mittels DYNSRC nicht unterstützen.
Zusätzlich zu DYNSRC hat Microsoft der <IMG>-Kennung verschiedene andere Attribute beigefügt, die bestimmen, wie die AVI-Datei abgespielt wird:
Interner Sound
Abgesehen von den Kennungen für internes Video hat der Internet Explorer auch eine Kennung für das Abspielen interner Audiodateien eingeführt. Diese Sounddateien werden automatisch mit der Seite geladen, ohne daß der Leser auf einen Knopf drücken oder eine Verknüpfung anklicken muß. Um einen eingebetteten Hintergrundsound auf der Seite einzufügen, verwenden Sie die <BGSOUND>-Kennung, und zwar folgendermaßen:
<BGSOUND SRC="posaune.au">
Wenn der Browser dann die Seite lädt, wird er ebenfalls den Hintergrundsound laden und abspielen. Die <BGSOUND>-Kennung produziert keinen sichtbaren Effekt auf der Seite.
Um den Sound mehrfach zu wiederholen, verwenden Sie das LOOP-Attribut. Wenn der Wert von LOOP eine Zahl annimmt, wird er so oft gespielt, wie die Zahl es angibt. Ein LOOP-Wert von -1 oder INFINITE (unendlich) läßt den Sound immer wieder durchlaufen, bis der Leser die Seite verläßt.
Explorer unterstützt drei verschiedene Formate für interne Sounds: das beliebte AU-Format von Sun, Windows WAV-Dateien für Sound-Samples und MIDI-Dateien mit einer .mid-Endung.
Wenn Sie Webseiten erzeugen, halten Sie sich bei den Hintergrundklängen ein wenig zurück. Wenn Sie unbedingt einen verwenden wollen, spielen Sie ihn nur für kurze Zeit ab. Ununterbrochen spielende Klänge wirken ablenkend auf viele Leser.
Wie auch mit der Erweiterung für interne Videos, wird das <BGSOUND>-Tag in den Browsern von Netscape nicht unterstützt.
Laufschriften
Laufschrift (engl.: Marquee) ist eine Textzeile, die sich von einer Seite des Bildschirms auf die andere bewegt. Obwohl Sie Laufschriften mit fast jeder Art interner Animation hervorbringen können, erlaubt Ihnen die <MARQUEE>-Kennung des Internet Explorer, diesen Text schnell und einfach zu erzeugen (und Sie brauchen auch keine anderen Bild- oder Animationsdateien herunterzuladen). Abbildung 9.8 zeigt eine Laufshrift im Internet Explorer bei der Arbeit
Abbildung 9.8: |
Laufschriften sind ein Merkmal des Internet Explorer, das noch von keinem anderen Browser unterstützt wird. Andere Browser werden den Text zwar anzeigen, er wird sich jedoch nicht bewegen.
Laufschriften erzeugen
Um Laufschriften zu erzeugen, verwenden Sie die <MARQUEE>-Kennung. Der Text zwischen den eröffnenden und abschließenden <MARQUEE>-Kennungen ist eine Laufschrift:
<MARQUEE>I'm scrolling!</MARQUEE>
Die Voreinstellung für die Laufschrift ist, daß er auf einer eigenen Zeile erscheint, und zwar in der gleichen Schriftart und -größe wie der ihn umgebende Text. Wenn Sie also die <MARQUEE>-Kennung innerhalb einer Überschrift einsetzen, können Sie rollenden Text von der Größe der Überschrift erhalten:
<H1><MARQUEE>I'm scrolling, and large, too!</MARQUEE></H1>
Dieses funktioniert aber nicht mit allen HTML-Elementen; Sie können den umgebenden Text z.B. nicht auf <FONT COLOR=yellow> einstellen. Noch können Sie einen Schriftartwechsel innerhalb der MARQUEE-Kennung vornehmen - alle HTML-Befehle darin werden ignoriert.
Das Verhalten der Laufschrift ändern
Wenn Sie eine einfache Laufschrift mit einer einfachen <MARQUEE>-Kennung erschaffen, läuft der Text von der rechten Bildschirmseite nach links und verschwindet völlig, bevor er wieder von rechts auftaucht. Er bewegt sich in einer kontinuierlichen Schleife, gerade langsam genug, daß er bequem gelesen werden kann.
Sie können jedoch das Verhalten, die Richtung, die Anzahl der Schleifen und die Geschwindigkeit der Bewegung mit verschiedenen Attributen der <MARQUEE>-Kennung bestimmen:
Schließlich bestimmen die SCROLLAMOUNT- und SCROLLDELAY-Attribute mit ihren jeweiligen Zahlenwerten die Geschwindigkeit, mit der der Text läuft. SCROLLAMOUNT ist die Anzahl der Pixel zwischen jeder Stufe, um die der Text sich jedesmal bewegt, das heißt die Anzahl der Pixel, um die der Text sich jedesmal nach rechts oder links bewegt. Höhere Zahlen lassen den Text sich schneller bewegen. SCROLLDELAY ist die Anzahl von Millisekunden zwischen jeder Stufe der Animation; höhere Werte lassen die Animation langsamer und weniger fließend vonstatten gehen. Indem Sie mit diesen beiden Attributen experimentieren, können Sie eine optimale Kombination aus Textgeschwindigkeit und Gleichmäßigkeit der Bewegung erreichen.
Die Erscheinung der Laufschrift ändern
Eine Laufschrift nimmt eine einzige Zeile auf dem Bildschirm ein und ist ansonsten transparent und läßt die Hintergrundfarbe der Seite durchscheinen. Sie können jedoch die Erscheinung der Laufschrift auf der Seite mit verschiedenen Attributen beeinflussen:
Abbildung 9.9 zeigt die verschiedenen Teile der Textfahne, die Sie mit obigen Attributen verändern können:
Abbildung 9.9: |
Laufschriften einsetzen
Laufschriften sind ebenso wie die <BLINK>-Kennung eine sehr aufdringliche Weise, die Aufmerksamkeit des Lesers auf sich zu ziehen. Laufschriften richten die Aufmerksamkeit des Lesers auf einen Punkt und lenken ihn dadurch davon ab, den Rest der Seite zu betrachten. So wie <BLINK> sollten auch Laufschriften sparsam eingesetzt werden, und wenn überhaupt, dann nur mit einer beschränkten Anzahl von Schleifendurchläufen (so daß die Bewegung schließlich aufhört). Kleine Textfahnen sind besser als große, und solche ohne Hintergrundfarben wirken subtiler als welche mit.
Ich kann nicht oft genug betonen, daß es sich hierbei um ein Tag des Internet Explorer handelt. Wenn Sie derartige Laufschriften in anderen Browsern sehen wollen, sollten Sie ein entsprechendes Java-Applet verwenden. Sie finden eine Vielzahl von Laufschrift-Applets auf der Gamelan Java Site unter http://www.gamelan.com/. |
GIF-Animation
Die wahrscheinlich einfachste Methode für einfache Animationen ist, eine Fähigkeit des GIF-Formats zu nutzen, die es Ihnen erlaubt, mehrere GIF-Bilder innerhalb einer einzigen GIF-Datei zu speichern. Wenn diese GIF-Bilder in einem Browser geladen werden, der dieses spezielle Format versteht, werden die individuellen Bilder nacheinander abgebildet, wodurch sie eine Animation erzeugen. Je nachdem, wie die GIF-Datei ursprünglich gespeichert wurde, kann sie entweder ein einziges Mal, mehrere Male oder kontinuierlich abgespielt werden.
Im Moment unterstützen sowohl der Internet Explorer als auch Netscape animierte GIFs, wie das auch bei anderen Browsern der Fall ist.
Und was passiert in Browsern, die keine GIF-Animationen unterstützen? Die gute Nachricht ist in diesem Fall, daß nur das erste Bild der Serie abgebildet wird, so daß Sie nicht alles verlieren. Die schlechte Nachricht ist, daß Sie, wenn Sie verschiedene GIF-Bilder als eine einzige animierte GIF-Datei speichern, auf diese Weise eine Datei erhalten, die aus einer Kombination aller einzelnen GIF-Bilder besteht, wodurch Ihre Bilddateien um vieles größer werden und damit mehr Zeit zum Herunterladen benötigen wird. Es gibt also bestimmte Vor- und Nachteile, die Sie erwägen müssen, wenn Sie sich entscheiden, ob Sie eine GIF-Animation auf Ihrer Webseite einbauen wollen.
Um eine GIF-Animation hervorzubringen, brauchen Sie zwei Dinge:
Für den ersten Punkt brauchen Sie nur Ihr Bildverarbeitungsprogramm einzusetzen, um jedes einzelne Bild der Animation zu erzeugen. Abhängig von der Komplexität der Animation, die Sie erstellen wollen, und davon, wie künstlerisch begabt Sie sind, kann dies ziemlich einfach oder sehr schwierig sein (heutzutage werden die meisten beeindruckenden Animationen auf dem Web von professionellen Künstlern hergestellt).
Als ich begann, eine einfache GIF-Animation zu erstellen, verwendete ich ein gelb-schwarzes »Coming Soon«-Bild (»In Kürze«), das ich auch auf einigen meiner Webseiten benutze, und ließ einfach einige der Lichter um die Ränder jedes Bildes aus (natürlich unterschiedliche bei jedem Bild). Die vier Bilder, die dabei entstanden, können Sie in Abbildung 9.10 betrachten.
Abbildung 9.10: |
Wenn Sie Photoshop 3.0 für Ihre Animation einsetzen, können die Ebenen sehr nützlich sein; erstellen Sie einfach einen Hintergrund, der bei den verschiedenen Animationen gleich bleibt, und benutzen Sie dann verschiedene Ebenen, um die einzelnen Bilder für die Animation zu entwerfen. Wenn Sie dann die einzelnen Bilder (Frames) erzeugen wollen, speichern Sie die Photoshop-Datei an einem sicheren Ort. Ändern Sie das Bild so, daß es nur noch aus einer Ebene und dem Hintergrund besteht und speichern Sie es als GIF-Datei. |
Nachdem Sie also Ihre Bilder haben, brauchen Sie noch ein Programm, das diese Bilder ins spezielle Animationsformat umwandeln kann. Leider wurde dieses spezielle Merkmal des GIF-Formats nur sehr wenig benutzt, bis es vom Web entdeckt wurde, weswegen es die meisten GIF-Editoren nicht unterstützen. Es gibt jedoch eine Anzahl kleiner Tools (Werkzeuge), die sich mit dieser Aufgabe beschäftigen:
http://www.mindworkshop.com/alchemy/gifcon.html.
http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html erhalten.
Das GIF-Animationsformat erlaubt es Ihnen, verschiedene unerschiedliche Merkmale der Animation zu bestimmen, einschließlich der Anzahl der Wiederholungen der Animation (0 bis infinite [unendlich]) und der Zeitverzögerung zwischen den einzelnen Bildern.
Wenn Sie eine animierte GIF-Datei haben, mit der Sie spielen können, probieren Sie sie in Netscape oder einem anderen Programm aus. Im Fall meines »Coming Soon«-Bildes scheinen sich die Lichter um den Rand des Kastens wie bei einer Filmreklame ein- und auszuschalten.
Animation mit Java
Java ist ein neues Merkmal des Web, das viele Leute sehr begeistert. Java-Applets sind kleine Programme, die auf einer Webseite laufen und auf Anwender-Eingaben reagieren können, ohne sich andauernd mit dem Web-Server in Verbindung setzen zu müssen (wie das bei Formularen der Fall ist). Und man kann tatsächlich eine Menge mit Java anfangen, wenn man programmieren kann und willig ist, die Zeit hineinzustecken, die man braucht, um es zu lernen (Sie werden später in diesem Buch mehr über Java erfahren). Aber auch dann, wenn Sie keinen Bezug zum Programmieren haben, können Sie vorgefertigte Java-Applets auf Ihren Seiten einsetzen, um Animationseffekte hervorzubringen, ohne jemals eine Zeile Java-Code eingeben zu müssen. Alles, was Sie tun müssen, ist, das Java-Applet auf Ihr System herunterzuladen, einige Zeilen HTML auf Ihrer Seite einzufügen, und dann funktioniert alles bestens (vorausgesetzt natürlich, daß Sie und Ihre Leser einen Java-fähigen Browser besitzen).
In diesem Abschnitt werden Sie gerade genug über Java-Applets erfahren, damit Sie eine Animation auf Ihrer Webseite einrichten können. Später in dieser Woche werden Sie dann mehr darüber lernen.
Das brauchen Sie für Java-Animationen
Ein vorgefertigtes Java-Applet kommt von Sun direkt und heißt Animator. Animator kann einfache Animationen mit und ohne Soundtracks ausführen, Bilder wiederverwenden, Animationen in Schleifen abspielen und die Zeitverzögerung zwischen den einzelnen Bildern festlegen. Um eine Animation mit Java und dem Animator-Applet zu erzeugen, brauchen Sie drei Dinge:
Sagen wir, ich habe z. B. 12 GIF-Bilder einer Taschenuhr, von denen jedes den Minutenzeiger an einer anderen Position zeigt. Ich habe sie T1.gif, T2gif usw. genannt, bis hin zu T12.gif. Abbildung 9.11 zeigt die ersten vier Bilder der Animation.
Abbildung 9.11: |
Nachdem ich die Animator-Klassendateien heruntergeladen habe, kopiere ich diese und die Bilddateien in ein einziges Verzeichnis namens Uhr. Jetzt bleibt als letzter Schritt, eine HTML-Seite zu schreiben, die die Java-Animation enthält.
Fügen Sie das Applet zur Webseite hinzu
Um eine Java-Animation (oder irgendein anderes Applet) zu ihrer Webseite hinzuzufügen, verwenden Sie die <APPLET>- und <PARAM>-Kennungen. Die <APPLET>-Kennung enthält das Applet selbst und bestimmt die Ausmaße des Rechtecks, von dem das Applet auf der Seite umgeben wird. Um z.B. das Animator-Applet auf Ihrer Seite mit einem Rechteck zu umgeben, das 100 Pixel im Quadrat mißt, würden Sie folgenden Code einsetzen:
<APPLET CODE="Animator.class"
WIDTH=100 HEIGHT=100>
...
</APPLET>
In meinem Beispiel mit der Taschenuhr ist die Größe der Bilder 129 x 166 Pixel, so daß ich diese Werte für WIDTH und HEIGHT einsetze:
<APPLET CODE="Animator.class"
WIDTH=122 HEIGHT=166>
...
</APPLET>
Zwischen den beiden <APPLET>-Kennungen befinden sich verschiedene <PARAM>-Kennungen, die verschiedene Parameter für das Animator-Applet selbst angeben, um die Animation zu kontrollieren. Jede <PARAM>-Kennung hat zwei Attribute: NAME und VALUE. NAME wird für den Namen des Parameters eingesetzt und VALUE für seinen Wert. Indem Sie verschiedene <PARAM>-Kennungen einsetzen, können Sie an das Applet verschiedene Parameter weitergeben - und verschiedene Applets benötigen verschiedene Parameter. Das Animator-Applet hat eine ganze Menge von Parametern, aus denen Sie auswählen können, ich werde hier jedoch nur ein paar erwähnen.
STARTIMAGE ist die Bildnummer, bei der Sie anfangen, gewöhnlich 1. Wenn Ihre Bilddatei-Namen mit einer anderen Zahl anfangen, setzen Sie diese ein. Entsprechend ist ENDIMAGE die Nummer des letzten Bildes, das in der Animation verwendet werden soll. Da meine Taschenuhrbilder T1.gif bis T12.gif genannt werden, wird der Wert von STARTIMAGE 1 sein und der Wert von ENDIMAGE 12. Sie fügen dies auf Ihrer HTML-Seite innerhalb der <PARAM>-Kennungen ein, welche ihrerseits zwischen die <APPLET>-Kennungen gehören:
<APPLET CODE="Animator.class"
WIDTH=100 HEIGHT=100>
<PARAM NAME="STARTIMAGE" VALUE="1">
<PARAM NAME="ENDIMAGE" VALUE="12">
</APPLET>
Der letzte Parameter, den Sie normalerweise einfügen wollen ist PAUSE; dieser bestimmt, wie viele Millisekunden das Applet zwischen den einzelnen Bildern der Animation verstreichen lassen wird. Die Voreinstellung ist auf 3900 Millisekunden eingestellt (also fast vier Sekunden), was ein bißchen lang erscheint. Sie können mit der Pause zwischen den Bildern herumexperimentieren, bis Sie eine Animation erhalten, die Ihnen zusagt (hier habe ich 1000 Millisekunden gewählt, also eine volle Sekunde):
<APPLET CODE="Animator.class"
WIDTH=100 HEIGHT=100>
<PARAM NAME="STARTIMAGE" VALUE="1">
<PARAM NAME="ENDIMAGE" VALUE="12">
<PARAM NAME="PAUSE" VALUE="1000">
</APPLET>
Schließlich füge ich noch den REPEAT-Parameter ein, der dem Animator-Applet mitteilt, wie oft er die gesamte Animation wiederholen soll (wenn Sie jedoch auf die Animation klicken, wird sie anhalten):
<APPLET CODE="Animator.class"
WIDTH=100 HEIGHT=100>
<PARAM NAME="STARTIMAGE" VALUE="1">
<PARAM NAME="ENDIMAGE" VALUE="12">
<PARAM NAME="PAUSE" VALUE="1000">
<PARAM NAME="REPEAT" VALUE="TRUE">
</APPLET>
Wenn Sie dies alles beisammen haben, können Sie die HTML-Datei abspeichern und in Ihrem Java-fähigen Browser laden. Dann wird das Animator-Applet geladen werden, welches wiederum alle Bilder in der Abfolge abspielt.
Ich habe hier nur einige der Parameter des Animator-Applet erwähnt, damit Sie loslegen können. Es gibt jedoch noch einige andere Parameter, einschließlich solcher, die es Ihnen erlauben, den Ort und Namen der Bilddateien zu ändern, der Animation einen Hintergrund oder Soundtrack zu geben oder die Reihenfolge zu verändern, in der die Bilder abgespielt werden. Wenn Sie mehr über das Animator-Applet herausfinden wollen, gehen Sie zu seiner Homepage unter http://www.javasoft.com/applets/applets/Animator/index.html.
Multimedia Controls
Mit dem Internet Explorer 4 hat Microsoft einen Satz von sogenannten Multimedia Controls vorgestellt, die es erlauben mit ein paar HTML-Zeilen Multimedia Grafiken und Effekte Ihren Seiten hizuzufügen.
Für den Internet Explorer 4 sind Zahlreiche Multimedia Controls verfügbar:
Der Einsatz dieser Controls kann kompliziert sein, da diese die Verwendung von ClassID-Codes erforderlich machen, um auf Seiten eingefügt zu werden. Microsoft stellt eine ungeheure Menge an Informationen über die neuen Features des Internet Explorer 4 unter http://www.microsoft.com/ie/ie40 zur Verfügung. Darunter befinden sich auch Informationen zu den Multimedia Controls.
Microsoft bietet einige Demos zu den Multimedia Controls an. Die Demo in Abbildung 9.12 z.B. zeigt eine Seite mit einem ActiveX-Control, das die Grafik im großen Frame minimiert. Dieses und andere Demos finden Sie unter http://www.microsoft.com/ie/ie40/demos.htm.
Abbildung 9.12: |
Eine der ersten und einfachsten Arten von interner Animation auf Webseiten Client-Pull und Server-Push, die als Bestandteil von Netscape 1.1 eingeführt wurden. Client-Pull bringt den Browser dazu, dieselbe oder eine andere Seite automatisch zu laden, nachdem ein gewisser Zeitraum verstrichen ist; Server-Push hält die Verbindung zwischen dem Server und dem Browser geöffnet und liefert kontinuierlich Daten über die Verbindung.
Die Konzepte, die hinter Client-Pull und Server-Push stecken, sind ähnlich: Sie lassen zu, daß eine neue Seite oder ein neuer Seitenteil nach einem gewissen Zeitraum automatisch geladen wird, ohne daß der Leser eine Verbindung auswählen oder sich zu einer neuen Seite bewegen muß. Im Fall von Client-Pull kann dies dazu benutzt werden, automatisch wechselnde »Dia«-Projektionen oder andere langsame Präsentationen zu erstellen. Bei Server-Push konnten verschiedene Bilder mehrfach auf eine einzelne Seite geladen werden, wodurch ebenfalls ein einfacher Animationseffekt erzeugt wurde.
Server-Push ist bei der Web-Gemeinde in Ungnade gefallen, da es spezielle Installierungsprogramme auf dem Server erfordert, die zu kompliziert sind. Neuere Arten der Animation, wie die GIF-Animation, die Sie in diesem Kapitel kennengelernt haben, haben den Server-Push auf dem Web so gut wie verdrängt. Ich werde noch mehr über Server-Push erzählen, wenn Sie mehr über Server erfahren haben.
Client-Pull wird andererseits immer noch verwendet, zwar nicht unbedingt als Animationsmethode, sondern als Hilfsmittel dazu, Seiten automatisch erneut zu laden, nachdem eine gewisse Zeit verstrichen ist, oder auch dazu, eine Serie von Seiten automatisch zu laden, wobei zwischen dem Laden jeweils eine Pause eintritt.
Client-Pull basiert auf der Idee, daß es einen speziellen HTTP-Befehl (der HTTP-Header genannt wird) gibt, der Refresh (erneut laden) heißt. Wenn ein Web-Server den Refresh-Befehl zusammen mit den Daten der Seite an den Browser schickt, soll der Browser für eine gewisse Zeit warten und die Seite dann erneut laden.
Normalerweise müßten Sie Ihren Server modifizieren, um diesen speziellen HTTP-Befehl mit jeder Seite mitschicken zu können. Aber HTML bietet eine spezielle HTML-Kennung, die, wenn sie innerhalb einer Webseite verwendet wird, der Seite einen Weg liefert, viele HTTP-Header vorzutäuschen, so, als seien diese vom Server selbst gesendet worden. Diese spezielle HTML-Kennung heißt <META> und ist eine allgemeine HTML-2.0-Kennung, die Informationen über eine HTML-Seite liefert (Meta-Informationen). Das Attribut der <META>-Kennung, welches den HTTP-Header vortäuscht, wird HTTP-EQUIV genannt (von HTTP-Equivalent), und der Wert dieses Attributs, der eingesetzt werden muß, um die Seite erneut zu laden, ist »Refresh«. Um die Zeitspanne anzugeben, die der Browser warten soll, benutzen Sie das Attribut CONTENT. Um es jetzt mal alles zusammenzufügen, wenn Sie z.B. wollen, daß der Browser die gegenwärtige Seite nach vier Sekunden erneut laden soll, fügen Sie folgende Kennung innerhalb der <HEAD>-Sektion Ihrer HTML-Seite ein:
<META HTTP-EQUIV="Refresh" CONTENT=4>
Wenn der Wert von CONTENT Null ist (also 0 Sekunden), wird die Seite so schnell wieder eingeladen, wie der Browser sie erhalten kann (was ziemlich langsam sein kann, abhängig von der Geschwindigkeit der Verbindung - sicherlich nicht schnell genug für eine einigermaßen gute Animation).
Beachten Sie, daß der Browser die Seite immer wieder lädt, wenn Sie diesen Header auf der Seite eingefügt haben. Um das Laden zu unterbrechen, müssen Sie irgendwo auf der Seite eine Verknüpfung zu einem Ort einfügen, der keine Kennung für Client-Pull besitzt.
Client-Pulls, die wiederholt dieselbe Seite laden, sind nützlich für Seiten, die kontinuierlich aktualisiert werden - z.B. Live-Daten wie Börsenberichte oder Sportergebnisse. Eine andere Anwendung für Client-Pull ist, nach einer gewissen Zeit eine neue Seite zu laden, anstatt dieselbe Seite wiederholt zu laden, um beispielsweise automatisch durch eine Reihe von Präsentationsbildern oder Instruktionen zu gehen.
Um <META HTTP-EQUIV> zum Laden einer unterschiedlichen Seite einzusetzen, fügen Sie die URL der nächsten Seite zum Wert des CONTENT-Attributs der aktuellen Seite hinzu, so wie hier:
<META HTTP-EQUIV="Refresh"
CONTENT="4; URL=">http://mysite.com/page2.html">
Beachten Sie hierbei, daß die URL, die Sie innerhalb von CONTENT einfügen, eine absolute URL sein muß; Sie können also keinen relativen Pfad-Namen einsetzen. Er muß mit http:// anfangen.
Innerhalb der zweiten Seite können Sie einen Bezug zur nächsten Seite der Serie einsetzen und in dieser Seite wiederum einen zur folgenden. Mit dieser Methode können Sie eine beliebige Anzahl von Seiten nacheinander automatisch laden. Es ist jedoch genauso wie bei den Seiten, die wiederholt geladen werden, von Vorteil, eine Verknüpfung aus dem automatischen Wiedereinladen heraus zur Verfügung zu stellen, so daß Ihre Leser nicht dazu gezwungen werden, gegen ihren Willen Ihre gesamte Präsentation zu verfolgen.
Bemerkungen zu Shockwave und anderen Netscape-Plug-Ins
Langfristig gesehen wird wahrscheinlich den Plug-Ins von allen Multimedia-Möglichkeiten der größte Erfolg beschieden sein.
Plug-Ins sind so ähnlich wie Hilfsprogramme, mit dem Unterschied, daß sie, anstatt vollkommen unabhängig vom Browser zu existieren, dem Browser selbst neue Fähigkeiten verleihen. Ein Video-Plug-In kann es beispielsweise ermöglichen, Videodateien direkt intern im Browser abzuspielen. Ein Plug-In für Tabellenkalkulationen könnte editierbare Tabellen als Elemente einer Webseite einbeziehen. Die Plug-Ins können auch Verknüpfungen zum Browser zurück beinhalten - beispielsweise könnte die Tabellenkalkulation Verknüpfungen enthalten, die von innerhalb des Plug-In aktiviert und verfolgt werden könnten.
Netscape führte das Konzept von Plug-Ins mit der 2.0-Version seines Browser ein. Es gibt bereits viele Arten von Plug-Ins für Sound und Video; die neue Version von Netscape wird sogar mit bereits installierten Plug-Ins für Sound und Video geliefert. Diese unterstützen Formate, wie z.B. AU. AIFF, WAV, MIDI und QuickTime.
Das Problem mit Plug-Ins ist, daß, wenn Sie deren Fähigkeiten in Ihren Webseiten einsetzen wollen, alle Ihre Leser einen Browser besitzen müssen, der Plug-Ins unterstützt (wie z.B. Netscape oder Microsoft Internet Explorer). Sie müssen das Plug-In außerdem installiert und verfügbar haben (Leser, die das Plug-In nicht besitzen, werden eine leere Stelle oder zerbrochene Bildsymbole an der Stelle zu sehen bekommen, wo der Inhalt des Plug-In erscheinen sollte). Und viele Plug-Ins sind nur für bestimmte Plattformen verfügbar. Bei einigen Medientypen müssen Sie Ihren Server konfigurieren, damit das neue Medium mit dem richtigen Inhaltstyp ausgestattet wird.
Plug-Ins sind erweiterte Merkmale des Web; deshalb werde ich sie erst später in diesem Buch ausführlicher behandeln (und zwar in Kapitel 27). Da dies hier aber das Kapitel über Multimedia und Animation ist, möchte ich doch ein bedeutendes Plug-In erwähnen, das mit diesen beiden Themen zu tun hat: Shockwave von Macromedia.
Shockwave ist ein Plug-In, das es ermöglicht, Macromedia-Director-Filme als interne Medien auf einer Webseite abzuspielen. Macromedia Director ist ein höchst beliebtes Hilfsmittel unter professionellen Multimedia-Entwicklern, mit dem sie Mulitimedia-Präsentationen erzeugen, die synchronisierten Sound und Video zusammen mit Interaktionsfähigkeit enthalten können. (Viele der CD-ROMs, die Sie heutzutage kaufen können, wurden mit Macromedia Director entwickelt.) Wenn Sie bereits mit Director arbeiten, bietet Ihnen Shockwave eine einfache Möglichkeit, Director-Präsentationen aufs Web zu bringen. Oder wenn Sie daran interessiert sind, ernsthafte Multimedia-Arbeit auf dem Web oder irgendwo sonst zu leisten, ist Director ein Programm, das Sie sich genauer ansehen sollten.
Sie werden in Kapitel 27 noch mehr über die Anwendung von Plug-Ins und Shockwave erfahren.
Zusammenfassung
Dieses Kapitel behandelte zwei Hauptthemen: externe Medien-Dateien und interne Multimedia und Animation.
Externe Medien-Dateien sind Dateien, die nicht direkt von Ihrem Browser gelesen werden können. Statt dessen startet der Browser, wenn Sie die Verbindung zu einer externen Datei anwählen, ein Hilfsprogramm für das Anzeigen oder Abspielen solcher Dateien. In diesem Kapitel haben Sie erlernt, wie externe Medien funktionieren, wie Sie Sound- und Videodateien als externe Medien einsetzen können, und haben einige Hinweise für das Entwerfen von externen Medien-Dateien erhalten.
Die zweite Hälfte dieses Kapitels handelte vor allem von internen Multimedia-Funktionen in Netscape und Internet Explorer, wobei die neuen Fähigkeiten und Kennungen dieser Browser besprochen wurden, einschließlich der für internen Sound, internes Video, rollende Textfahnen, interne GIF-Animation und Java-Applets. Tabelle 9.3 zeigt eine Zusammenfassung der Kennungen, über die Sie heute etwas gelernt haben.
Tabelle 9.3: Kennungen für interne Medien
Kennung |
Attribut |
Anwendung |
<IMG> |
DYNSRC |
Fügt eine AVI-Datei anstelle eines Bildes ein. Wenn keine AVI-Datei gefunden oder abgespielt werden kann, wird das (durch SRC angegebene) normale Bild gezeigt. |
CONTROLS |
Bringt eine Kontrolleiste unter dem AVI-Movie zum Vorschein. |
|
LOOP |
Die Anzahl der Wiederholungen des AVI-Movie. Wenn LOOP -1 oder INFINITE ist, wird das Movie immer wieder (»unendlich«) abgespielt. |
|
START |
Bei START=FILEOPEN beginnt das AVI-Movie sofort. Bei START=MOUSEOVER wird das Movie gespielt, wenn der Leser den Maus-Cursor über das Movie bewegt. |
|
<BGSOUND> |
Spielt einen Hintergrundsound. |
|
LOOP |
Die Anzahl der Wiederholungen des Soundclips. Wenn LOOP -1 oder INFINITE ist, wird der Sound immer wieder (»unendlich«) abgespielt. |
|
<MARQUEE>... |
Erzeugt eine Laufschrift auf dem Bildschirm. |
|
BEHAVIOR |
Bei BEHAVIOR=SCROLL bewegt sich die Laufschrift von einer Bildschirmseite zur anderen und weiter. Bei BEHAVIOR=SLIDE bewegt sich die Laufschrift von rechts herein und hält am linken Seitenrand an. Bei BEHAVIOR=ALTERNATE bewegt sich die Laufschrift zwischen den Bildschirmrändern hin und her. |
|
DIRECTION |
Bei BEHAVIOR=SCROLL gibt dieses Attribut die Bewegungsrichtung der Laufschrift an. |
|
LOOP |
Die Anzahl von Wiederholungen der Schleife, in der die Laufschrift sich wiederholt. Wenn LOOP den Wert -1 oder INFINITE annimmt, wird die Laufschrift unendlich oft abgespielt. |
|
SROLLAMOUNT |
Die Anzahl von Pixeln, um die sich die Laufschrift mit jedem Schritt der Animation bewegt; höhere Zahlen bedeuten, daß sich der Text schneller bewegt. |
|
SCROLLDELAY |
Die Anzahl von Millisekunden zwischen jedem Schritt der Animation; höhere Zahlen sind langsamer. |
|
BGCOLOR |
Die Hintergrundfarbe des Rechtecks der Laufschrift (kann eine Farbnummer oder ein Farb-Name sein). |
|
HEIGHT |
Die Höhe des Rechtecks, das die Laufschrift umgibt. |
|
WIDTH |
Die Breite des Rechtecks, das die Laufschrift umgibt. |
|
HSPACE |
Der Abstand zwischen dem linken oder rechten Rand der Laufschrift und dem umgebenden Text. |
|
VSPACE |
Der Abstand zwischen dem oberen oder unteren Rand der Laufschrift und dem umgebenden Text. |
|
ALIGN |
Die Ausrichtung der Laufschrift mit dem Text davor oder danach. Mögliche Werte sind TOP, MIDDLE oder BOTTOM. |
|
<APPLET>... |
Fügt ein Java-Applet auf der Webseite ein. |
|
CODE |
Der Name der Klasse des Applet. |
|
WIDTH |
Die Breite des Rechtecks, das das Applet umgibt. |
|
HEIGHT |
Die Höhe des Rechtecks, das das Applet umgibt. |
|
<PARAM>... |
Parameter, die das Applet betreffen. |
|
NAME |
Der Name des Parameters. |
|
VALUE |
Der Wert des Parameters. |
|
<META> |
Meta-Information über die Seite selbst. |
|
HTTP-EQUIV |
Ein HTTP-Header-Name. |
|
CONTENT |
Im allgemeinen der Wert einer beliebigen Meta-Informationskennung. Bei Client-Pull, die Anzahl von Sekunden, die gewartet wird, bevor die Seite erneut geladen wird; kann auch eine URL für die zu ladende Seite enthalten. |
Fragen und Antworten
Frage:
Bei meinem Browser ist ein Programm für JPEG-Bilder in der Liste der Hilfsprogramme aufgeführt. Wenn ich aber eine JPEG-Datei empfange, beschwert er sich darüber, er könne die Datei nicht lesen. Wie kann ich das beheben?
Antwort:
Nur weil ein Programm in der Liste der Hilfsprogramme (oder der Initialisierungs-Datei) eines Browser aufgeführt ist, heißt das noch nicht, daß jenes Programm auch auf Ihrem System verfügbar ist. Browser werden im allgemeinen mit einigen Voreinstellungen für die Hilfsprogramme ausgeliefert, die es für die gebräuchlichen externen Dateiformate im Web gibt. Doch Sie müssen sich jedes dieser Hilfsprogramme besorgen und installieren, bevor Ihr Browser sie benutzen kann. Der Umstand allein, daß sie in der Liste aufgeführt sind, reicht nicht.
Frage:
Ich habe AU-Dateien für meine Klangaufnahmen benutzt, aber an den leisen Stellen ist ein schreckliches Rauschen zu hören. Was kann ich dagegen machen?
Antwort:
Einige Sound-Bearbeitungsprogramme können Ihnen helfen, etwas von dem Rauschen aus den AU-Dateien zu entfernen. Aufgrund der Natur der AU-Kodierung jedoch wird man gewöhnlich ein gewisses Maß an Rauschen haben. Wenn die Klangqualität für Sie so wichtig ist, denken Sie darüber nach, ob Sie nicht lieber AIFF benutzen wollen oder MPEG-Audio, wenn Sie einen Konverter haben.
Frage:
Warum haben meine MPEG-Dateien keine Töne?
Antwort:
Vielleicht haben sie ja welche! Der MPEG-Standard gestattet sowohl Bild- als auch Tonspuren, doch nur wenige Player können gegenwärtig die Tonspur auch verarbeiten. Sie haben zwei Möglichkeiten, wenn Sie in Ihren MPEG-Filmen auch Ton benötigen: Warten Sie auf bessere Player (oder bestechen Sie einen Programmierer, einen zu schreiben), oder wandeln Sie Ihre Filme ins QuickTime-Format um und zeigen Sie Ihren Lesern, wie sie QuickTime Player installieren und benutzen können.
Frage:
Ich verwende ein Animator-Applet. Ich habe eine ganze Menge von Java-Animationen, die ich auf verschiedenen Dateien unterbringen will, wenn ich sie jedoch alle in dasselbe Verzeichnis stecke, kann ich sie nicht alle T1,T2 usw. nennen, ohne Namenskonflikte zu erhalten. Was kann ich tun?
Antwort:
Das Animator-Applet enthält eine Menge von Parametern, die ich nicht in diesem Kapitel besprochen habe. Der Parameter IMAGESOURCE bestimmt einen Verzeichnis-Namen, der relativ zum aktuellen Verzeichnis ist. Auf diese Weise können Sie Ihre Bilder in individuellen Unterverzeichnissen speichern und Namenskonflikte vermeiden. Mit der Verwendung von anderen Animator-Parametern können Sie die Namen auch von T1, T2 usw. zu etwas anderem ändern. Rufen Sie die URL für das Animator-Applet auf, um Einzelheiten herauszufinden.
Copyright ©1998 by SAMS, einem Imprint
der Markt&Technik Buch- und
Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X