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
