Handbuch Webdesign: Multimedia

Handbuch Webdesign Multimedia

Einleitung

In Kapitel 1 haben Sie sich schon einmal mit der Problemstellung beschäftigt, Dateien mit einem anderen Format als HTML in eine Website einzubinden. Dazu reicht ein einfacher Link. Diese Methode finden Sie hier noch einmal unter dem Stichwort „Download“.

Weiters werden Streaming Audio, Eingebettete Multimedia-Objekt, Flash und Java-Applet behandelt. Am Ende des Kapitels wissen Sie, welche Technik Sie für welche Aufgabenstellung verwenden können.

Download

<img src="pdf.gif" alt="PDF-Dokument"> Folien zu Dateisystemen, 450 KB pdf <a href="docs/dateisysteme-sw.pdf">sw</a> oder <a href="docs/dateisysteme.pdf">farbe</a>

Beispiel: PDF (oder Audio) zum Download anbieten: ganz normaler Link. Achtung: Als Gestalterin der Seite kann ich nicht festlegen, ob die PDF-Datei gespeichert werden soll oder ob sie gleich im Browser (mittel Plug-in) angezeigt werden soll.

JavaScript

Javascript ist eine Skriptsprache im Web-Browser, mit der man Webseiten interaktiver gestalten kann. Außer dem ähnlichen Namen hat JavaScript aber nichts mit der Programmiersprache Java zu tun! Obwohl JavaScript „nur“ eine  Skriptsprache ist, bietet sie viele Möglichkeiten einer ausgereiften Programmiersprache wie Variablen, Schleifen und Verzweigungen. Von daher ist sie etwas schwerer zu erlernen als HTML oder CSS. Glücklicherweise kann man schon mit wenigen Zeilen JavaScript gute Effekte erzielen. Außerdem kann man relativ einfach erlernen, fertige, frei verfügbare JavaScript in die eigenen Webseite einzubauen.

Was kann Javascript?

Ein JavaScript-Skript kann nur Elemente der Webseite und des Webbrowser kontrollieren, aber kein anderes Programm auf dem Computer. Wäre dies so, würde ein einfacher Besuch einer Webseite genügen, den Computer mit Viren zu infizieren oder Dateien auf dem Rechner zu löschen. Typische Anwendungsmöglichkeiten von JavaScript sind:

• Rollover-Bilder – Wenn die Maus über ein Bild bewegt wird, wird dieses Bild durch ein neues Bild ersetzt.
• Verändern von Inhalten einer Webseite nachdem diese geladen wurde.
• Nachladen von Inhalten von einem Webserver ohne die ganze Seite neu zu laden (siehe auch:  Ajax (Programmierung))
• Öffnen von neuen Browserfenstern mit definierter Größe und Position am Bildschirm (Pop-up)
• Automatisches Ausfüllen von Web-Formularen (z.B. könnte bei Eingabe einer Stückzahl der Gesamtpreis automatisch berechnet und angezeigt werden)
• Prüfen ob ein Formulareintrag (z.B. Webadresse) plausibel ist
• Setzen von  Cookies um vorhergehen Werte wie die zuletzt besuchte Seite, den Benutzernahmen für eine Anmeldung oder den Inhalt eines Warenkorbes für den nächsten Besuch der Webseite zu merken.
• Prüfung, welche Plugins im Browser installiert sind
• (Neu-)Positionierung von Inhalten (z.B. könnte so ein Hilfefenster, welches immer neben der Maus ist, realisiert werden)
• Erstellen von Grafiken im Browser (im Verbindung mit dem  HTML5 Canvas-Element oder mit  skalierbaren Vektorgrafiken (SVG))
• Realisierung von ganzen Browsergames
• und vieles mehr

Einbindung von Javascript

im Body

JavaScript-Skripte können direkt in die Webseite mit dem <script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der Seite ausgeführt:

 <h1>Guten Tag!</h1>
<script language="JavaScript">
    var Datum = new Date();
    var Tag   = Datum.getDate();
    var Monat = Datum.getMonth() + 1;
    var Jahr  = Datum.getFullYear();
    document.write("Heute ist der " + Tag + "." + Monat + "." + Jahr);
</script>

Es gibt ein vordefiniertes Datumsobjekt Date() das an die Variable Datum das augenblickliche Datum mit Uhrzeit übergibt. Allerdings ist die Formatierung nicht besonders leserlich. Tue May 17 2011 18:06:03 GMT+0200 Die Methode .getDate() und die folgenden Metoden speichern in die Variablen Tag, Monat und Jahr die entsprechenden Zahlen. Die Methode document.write() setzt einzelne Texte und die Werte der einzelnen Variablen zu einem Text zusammen, und gibt dieses an Ort und Stelle aus.

innerhalb eines Links

<p><a href="javascript:history.back();">zurück</a></p>

Führt zur zuletzt aufgerufenen Seite zurück.

im Head

Es ist üblich, im Head-Bereich des Dokuments Funktionen (das sind kleine, wieder verwertbare Proramm-Teile) zu definieren, die später verwendet werden:

<html> 
 <head>
  <script language="javascript">
   function zeige(text) {
    text = "!!!" + text + "!!!";
    alert(text);
   }
  </script>
 </head>
 <body>
  <h1>Willkommen</h1>
  <form><input type="button" value="Hallo" onClick="zeige('Hallo Welt!')"></form>
 </body>
</html>

Die Funktion zeige() wird im <head> definiert, aber noch nicht ausgeführt. Erst beim Klicken auf den Button wird die Funktion aufgerufen.

in einer externen js-Datei

Bei größeren Skripten ist es der Übersicht halber oft sinnvoll, JavaScripte in externe Dateien auszulagern. Diese Dateien werden daraufhin wie folgt in die Webseite eingebunden:

 <script type="text/javascript" src="skriptname.js"></script>

Einbettung von Multimediaelementen

Einbettung von Plug-ins

Falls im Browser ein geeignetes Plug-in für diesen Dateityp installiert ist, wird er das Plug-in als Teil der Webseite anzeigen, und das Plug-in tut dann, was es tut. Es gibt viele verschiedene Plug-ins für ein und denselben Datentyp.

 <embed src="B5.mov"
  width="160" 
  height="140" 
  align="left" 
  autostart="false">
 </embed>

Für eingebettetes Audio bieten sich noch die Attribute hidden="true" und loop="true" an. Nachteil dieser Methode: beim Erstellen der Seite kann ich nicht kontrollieren, welches der vielen verschiedene Plug-ins verwendet wird. Je nach Plug-in sieht das Ganze dann verschieden aus.

Einbettung von HTML5-Elementen

ACHTUNG: Diese Technik wird noch nicht von allen Browsern unterstützt! Die Verwendung dieser Technik wird daher nur empfohlen, wenn zusätzlich ein Fallback (z.B. via Flash) vorhanden ist.

Mit HTML5 kann man Videos und Audio-Dateien in Zukunft direkt ohne Plug-in einbinden. Das Video oder die Audio-Datei wird in diesem Fall direkt vom Browser abgespielt.

Einbindung von Videos

 <video  width="640" height="480" autoplay controls>
  <source src="Videodatei.mp4" type="video/mp4" />
  <source src="Videodatei.ogv" type="video/ogg" /> 
  Ihr Browser unterstützt das Abspielen von <video>-Element leider nicht.
 </video>

Einbindung von Audio-Dateien

 <audio src="AudioDatei.ogg" autoplay controls>  
  Ihr Browser unterstützt das Abspielen von <audio>-Element leider nicht.  
 </audio>

autoplay gibt hierbei an, dass das Video bzw. die Audio-Datei automatisch starten soll.

controls gibt an, dass Steuerelemente eingeblendet werden (Play/Pause, Lautstärke u. a.).

Flash

Mit Flash können Sie sich einen Media-Player selbst bauen und bis ins Detail selbst gestalten.

To-Do:

Einbettung von swf-Dateien beschreiben

Java-Applets

Achtung: Die Programmiersprache Java hat nichts mit der Skriptsprache Javascript zu tun. (Um genau zu sein: Java gibt es schon länger als Javascript, Javascript wurde zu einer Zeit erfunden, als Java „mega-in“ war. Deswegen wurde der Name Javascript in Anlehnung an Java gewählt. Ein Marketing-Gag, keine inhaltliche Ähnlichkeit.)

Java-Applets sind kleine Java-Programme, die man in einer Webseite verwenden kann, um gewisse Effekte zu erzielen. Ursprünglich konnte man nur mit Java-Applets nur Rollover-Effekte erzeugen oder komplexe interaktive Animationen darstellen. Jedoch ist es möglich, alle dieser Funktionalitäten auch mit Flash oder mit modernen Webtechnologien wie HTML5 Canvas zu realisieren. Es sind also relativ wenige Anwendungsmöglichkeiten für Java-Applets geblieben.

In Dreamweaver ist das Symbol für Java-Applet eine dampfende Tasse Kaffee. (Java ist in Kalifornien der Name einer bestimmten Kaffee-Sorte, nach dieser Kaffee-Sorte wurde die Programmiersprache benannt. Ein gutes Beispiel für ein Icon, das nicht international funktioniert.)

Weitere Informationen über Java finden sich in Wikipedia: w:Java_(Programmiersprache)

Zusammenfassung

So viele verschiedene Techniken, bloß um ein bisschen Audio und Video und Interaktion in der Webseite unterzubringen? Ja, sobald man die einfachen Medien Text und Standbild hinter sich lässt, wird das Erstellen von Webseiten wesentlich komplizierter.

Flash ist für Sie als Designer ein interessantes Thema, welches aber (wie auch Java) den Umfang dieses Buches sprengt.