http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Objekte

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Ginge es nach dem Willen der Autoren der HTML-Empfehlungen, wäre das img-Element schon vor Jahren von der Bildfläche verschwunden. Unrecht haben sie damit nicht, denn es wirft einige unbeantwortete Fragen auf:

  • Warum gibt es ein Element zur Einbettung von Bildern, aber keines zur Einbettung von Audio-, Video oder anderen Multimedia-Dateien? Oder anders gefragt: Weshalb gibt es kein Element, das beliebige Medien einbetten kann, also auch Bilder, und das img-Element damit überflüssig macht?
  • Reicht der Wert des alternativen Attributs, eine einfache Zeichenkette, wirklich aus, um ein Bild zu ersetzen? Wie kann die Zugänglichkeit dieser Alternative gewährleistet werden, wenn Webautoren Abkürzungen, Akronyme oder Sprachwechsel nicht auszeichnen können?

Das Element object soll diese Probleme lösen.

Das Element object erlaubt Webautoren die Einbindung von Ressourcen, die Browser nicht nativ, also »von Haus aus«, unterstützen, zum Beispiel spezielle Grafiken, Videos, Musikdateien, XHTML-Dokumente, ein Word-Dokument, ein Java-Applet oder andere Programme. XHTML bietet über das object-Element eine einheitliche Syntax zur Einbettung beliebiger Objekte, anstatt für jeden Datentyp ein eigenes Element bereitzustellen.

Eine per object-Element eingebettete Ressource kann nur dann dargestellt werden, wenn das System des Nutzers mit der Art der Ressource etwas anfangen kann, also das Benutzerprogramm die Ressource verarbeiten kann oder ein entsprechendes Plug-in installiert ist. Ob das Objekt innerhalb der Webseite angezeigt werden kann, hängt von dem Programm ab, das zur Anzeige des Objekts herangezogen wird. Kann das System des Nutzers die eingebettete Ressource nicht verarbeiten, wird der Alternativinhalt herangezogen. Dieser beschränkt sich beim object-Element im Gegensatz zum Element img nicht nur auf den Wert eines alternativen Attributs. Das object-Element darf Block- und Inline-Elemente als Kinder enthalten und stellt so vielfältige Möglichkeiten zur Auszeichnung des alternativen Inhalts zur Verfügung. So ist es denkbar, einen kurzen Film durch eine Folge von statischen Bildern zu ersetzen, deren Bildunterschriften die Geschichte des Films nacherzählen.

Nicht jeder Browser interpretiert das Element object so, wie die Empfehlung es vorschreibt, leider auch nicht bei der Einbettung von Grafiken. Dies ist der Grund dafür, dass das img-Element sich bis heute außerordentlicher Beliebtheit erfreut und ein Großteil der Webdesigner sicherlich nicht einmal weiß, dass Bilder auch über das object-Element eingebettet werden können. Zum Teil liegt dies auch an der Vielzahl der proprietären Multi- und Hypermedia-Formate und ihren unterschiedlichen Schnittstellen. Für Standardgrafiken sollten Sie weiterhin auf das img-Element zurückgreifen.

object verfügt über eine ganze Reihe an Attributen, von denen jeweils eine unterschiedliche Menge zur Einbettung der verschiedenen Medientypen verwendet werden kann oder muss.

Einbettung von SVG

Es gibt mehrere Möglichkeiten, SVG-Dateien in Webseiten einzubinden; die Einbettung über das Element object ist die gebräuchlichste und die von den meisten Browsern am besten interpretierte. Kann die SVG-Datei nicht angezeigt werden, wird der Inhalt des object-Elements als Alternative herangezogen – in Listing 5.3 dieselbe Grafik im GIF-Format.

<div>
  <object type="image/svg+xml" data="../beispiele/example.svg"
    width="460" height="570">
    <param name="src" value="../beispiele/example.svg" />
    <img src="../images/example.gif" width="425" height="533" alt="" />
  </object>
</div>
Listing 5.3: SVG einbinden

SVG-Dateien sind Datenobjekte und werden über das Attribut data in Form eines URI referenziert.

Das Attribut type gibt den MIME-Typ der Daten an, die vom data-Attribut referenziert werden, in diesem Fall image/svg+xml. Unterscheidet sich der Wert dieses Attributs vom HTTP-MIME-Typ, der vom Server zurückgegeben wird, wenn das Objekt empfangen wird, ist der HTTP-MIME-Typ vorrangig.

Die Attribute width und height legen die Breite und Höhe des Objekts in Pixel oder Prozent fest.

Bei Daten wie beispielsweise Videos, die über feste Dimensionen verfügen, sollten Sie die Originalbreite und -höhe angeben. Darüber hinaus sollten Sie die Anzeige des Objekts in verschiedenen Browsern überprüfen; es kann passieren, dass Rollbalken angezeigt werden, wenn die angegebenen Dimensionen aus irgendwelchen Gründen nicht ausreichen. In diesem Fall müssen Sie so lange verschiedene Werte ausprobieren, bis die Darstellung browserübergreifend zufriedenstellend ist.

Nicht alle Browser zeigen die SVG-Datei an, wenn sie ausschließlich über das data-Attribut referenziert wird. Der Internet Explorer beispielsweise benötigt einen zusätzlichen Parameter.

Das leere Element param gibt einen Wert an, der von einem Objekt zur Laufzeit benötigt wird. Welche Parameter benötigt werden, ist abhängig vom einzubettenden Objekt. Die Reihenfolge ist beliebig. Das Attribut name definiert den Namen des Laufzeitparameters, das Attribut value dessen Wert.

Einbettung von Flash

Flash ist eine Kombination aus einem Grafikprogramm und einer Animationssoftware zur Erzeugung von Multimedia-Dateien im auf Vektorgrafiken basierenden SWF-Format der amerikanischen Firma Adobe (vormals Macromedia). Flash ermöglicht es, Filme und interaktive Elemente wie beispielsweise Spiele in Webseiten zu integrieren. Zur Anzeige von Flash benötigt man ein Plug-in, den sogenannten Flash Player, den man sich beim Hersteller herunterladen kann.

Auch zur Einbindung von Flash gibt es verschiedene Ansätze, wobei der gebräuchlichste dem zur Einbindung von SVG-Dateien gleicht. Der Unterschied liegt in der Anzahl und der Art der Parameter, die Sie üblicherweise wie in Listing 5.4 notieren. Bitte beachten Sie auch den Alternativinhalt.

<div>
  <object type="application/x-shockwave-flash"
    data="../images/example.swf" width="400" height="300">
    <param name="movie" value="../images/example.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#FFFFFF" />
    <p>Leider kann Ihr Browser die Diashow nicht anzeigen. Womöglich benötigen Sie einen aktuellen <a href="http://www.macromedia.com/de/downloads/">Flash Player</a>.</p>
  </object>
</div>
Listing 5.4: Flash einbinden

Einbettung von Java-Applets

Java ist eine objektorientierte Programmiersprache, die unter anderem von Patrick Naughton, Mike Sheridan und James Gosling in den Jahren 1991 bis 1992 im Auftrag des amerikanischen Computerherstellers Sun Microsystems entworfen wurde. Das ursprüngliche Ziel bei der Entwicklung von Java war nicht nur die Entwicklung einer weiteren Programmiersprache, sondern die Entwicklung einer vollständigen Betriebssystemumgebung, inklusive virtueller CPU, für unterschiedlichste Einsatzzwecke. Java wird noch heute weiterentwickelt.

Man unterscheidet

  • Java-Anwendungen, die von einer virtuellen Maschine als eigenständige Programme ausgeführt werden,
  • Java-Servlets, die auf einem Webserver ausgeführt werden, und
  • Java-Applets, die in einem Webbrowser laufen.

Java-Applets werden entweder über das missbilligte (nicht in der strikten Variante von XHTML enthaltene) Element applet eingebunden oder über das Element object.

Einbettung mittels applet

Das Element applet gestattet es Webautoren, ein Java-Applet in ein XHTML-Dokument einzubetten. Der Inhalt des applet-Elements dient als Alternative für Benutzerprogramme, die dieses Element nicht unterstützen oder so konfiguriert sind, dass sie Java-Applets nicht ausführen.

<div>
  <applet name="Newsticker" code="NewsTicker.class"
    width="400" height="50">
    <param name="bgcolor" value="000000" />
    <param name="fgcolor" value="ffffff" />
    <param name="speed" value="5" />
    <param name="text0" value="www.intermitto.net" />
    <param name="url0" value="http://www.intermitto.net/" />
    <param name="text1" value="Apache Tutorial" />
    <param name="url1" value="http://www.intermitto.net/apache/" />
    <param name="text2" value="PHP Tutorial" />
    <param name="url2" value="http://www.intermitto.net/php/" />
    <param name="text3" value="und vieles mehr ..." />
    <param name="url3" value="http://www.intermitto.net/" />
    <p>Leider kann Ihr Browser das Java-Applet nicht anzeigen.</p>
  </applet>
</div>
Listing 5.5: Das Element applet

Das Attribut code gibt den Namen der auszuführenden Java-Klassendatei an, die normalerweise die Dateinamenserweiterung .class hat. Falls sich diese Datei in einem anderen Verzeichnis befindet als das XHTML-Dokument, das das Applet einbettet, können Webautoren dieses Verzeichnis mittels des Attributs codebase über einen URI referenzieren.

Die Attribute width und height legen die Breite und Höhe des Applets in Pixel oder Prozent fest. Beides sind Pflichtattribute, müssen also gesetzt werden.

Das Attribut name gibt einen Namen für die Instanz des Applets an, um zu ermöglichen, dass verschiedene Applets innerhalb desselben Dokuments miteinander kommunizieren können oder per JavaScript auf das Applet zugegriffen werden kann.

Das ist Listing 5.5 und Listing 5.6 verwendete Applet wurde von Jens Becker programmiert. Es zeigt, wie ein Applet realisiert werden kann, das seine Anzeige zeitgesteuert ändert. Das Applet ist auf der Seite Ein Thread-gesteuertes Java-Applet dokumentiert.

Innerhalb des applet-Elements können Sie beliebig viele Parameter notieren, die dem Applet beim Aufruf übergeben werden. Welche Parameter das Applet erwartet, sollten Sie der Dokumentation des Applets – falls es eine solche gibt – entnehmen können.

Einbettung mittels object

Das Element applet wurde zugunsten der Einbindung mittels des Elements object für missbilligt erklärt. Wenn Sie die strikte Variante von HTML oder XHTML wählen, müssen Sie auf die Einbindung über object zurückgreifen. Sie ähnelt der herkömmlichen Einbindung stark und unterscheidet sich von ihr nur in einigen Attributen.

<div>
  <object classid="java:NewsTicker.class"
    codetype="application/java-vm" width="400" height="50">
    <param name="bgcolor" value="000000" />
    <param name="fgcolor" value="ffffff" />
    <param name="speed" value="5" />
    <param name="text0" value="www.intermitto.net" />
    <param name="url0" value="http://www.intermitto.net/" />
    <param name="text1" value="Apache Tutorial" />
    <param name="url1" value="http://www.intermitto.net/apache/" />
    <param name="text2" value="PHP Tutorial" />
    <param name="url2" value="http://www.intermitto.net/php/" />
    <param name="text3" value="und vieles mehr ..." />
    <param name="url3" value="http://www.intermitto.net/" />
    <p>Leider kann Ihr Browser das Java-Applet nicht anzeigen.</p>
  </object>
</div>
Listing 5.6: Java-Applets einbinden

Das Attribut classid gibt den Namen der auszuführenden Java-Klassendatei in einer speziellen Form an: Der festen Zeichenkette java: folgt der Klassenname samt Dateinamenserweiterung. Falls sich diese Datei in einem anderen Verzeichnis befindet als das XHTML-Dokument, das das Java-Applet einbettet, können Webautoren dieses Verzeichnis mittels des Attributs codebase über einen URI referenzieren.

Auch bei der Einbettung von Applets gibt dasAttribut codetype den MIME-Typ der einzubettenden Ressource an. Bei Java-Applets ist dies entweder application/java oder application/java-vm.

Die Übergabe der Parameter erfolgt analog zur Einbettung über das applet-Element.