Geprüfter Webmaster - Lerninhalte

Allgemein formuliert versteht man unter "multimedialen Effekten" alle Inhalte und Werke, die aus mehreren digitalen Median bestehen: Text, Bilder, Grafiken, Animationen, Audio und Video. Außerdem spielt in diesem Kontext die unterschiedlichen Interaktionsmöglichkeiten eine wichtige Rolle, etwa die aktive Navigation, Manipulation von Inhalten oder die Steuerung von Wiedergabeparametern.

Die folgende Tabelle gibt eine Übersicht über die möglichen Multimedia- Effekte, die im Zusammenhang mit Web Publishing zum Einsatz kommen:

[Lösung schließen]

Bei der Gestaltung von Webseiten mit Texten und Grafiken sollten einige Grundregeln beachtet werden:

Eine einzelne Webseite sollte nicht mit zu viel Text und grafischen Elementen ausgestattet sein. In diesem Zusammenhang sei der Begriff "Hypertext" zu erwähnen: ein Komplex aus mehreren einzelnen Webseiten zusammengefasst zu einem Projekt (Website). Jede einzelne Seite sollte damit ein eigenes Thema/ Unterthema behandeln und eine einheitliche Navigationsmöglichkeit bieten. Dabei kann der Anwender direkt zu der Seite "springen", die ihm besonderes interessiert, ohne die vorherigen Seiten "durchblättern" zu müssen.

Die einzelnen Unterseiten sollen informativ sein. Dem Besucher ist nicht damit geholfen, wenn er zu einem Thema 3 Sätze liest und die Seite wieder verlässt, um im Web nach weiteren Informationen zu suchen. Damit hat auch die Webseite ihren Zweck nicht erfüllt.

Eine Webseite sollte aus Sicht der "Anwenderfreundlichkeit" übersichtlich sein. Denn die Besucher sind schell genervt, wenn sie auf der Suche nach einer bestimmten Information bis zum unteren Seitenende scrollen müssen. Es empfiehlt sich etwa der Einsatz von mehreren Überschriften (h1 bis h3), um die einzelnen Punkte optisch voneinander zu trennen. Bei größeren Informationseinheiten ist es zudem sinnvoll, am Seitenanfang eine kleine Einführung zu liefern und zu den jeweiligen Punkten Anker zu setzen.

Die Seite kann durchaus mit Grafiken aufgehellt werden, wobei man mit dem Einsatz der Bilder nicht übertreiben sollte. Die Grafiken lassen sich in zwei große Gruppen einteilen: statische Elemente, die auf jeder Seite auftauchen und dynamische Elemente, die je von Seiteninhalt unterschiedlich sind.

Die statischen Grafikelemente sind etwa das Seitenlogo und Navigationshilfen wie Buttons oder Info- Hinweise. Da sie auf jeder einzelnen Webseite auftauchen, sollen sie auch jedes Mal an der gleichen Stelle zu finden sein (etwa im Header). Sie dürfen aber die Webseite nicht überlasten und sollen damit so klein möglich gehalten werden - der soll sie zwar erkennen können, aber nicht als Hauptbestandteil der Seite betrachten. Diese Grafikdateien sollen dabei auch über eine kleine Dateigröße verfügen, damit sie schnell geladen werden können: hier empfiehlt sich eine gif- Datei, die relativ wenig Speicherplatz einnimmt.

Die dynamischen Grafikelemente sind die aufwendigeren Bilder, die speziell auf einer bestimmten Webseite auftauchen, um etwa den Inhalt zu verdeutlichen oder etwas zu veranschaulichen. Auch sie sollten so aufgebaut werden, dass sie nicht zum Hauptbestandteil der Seite werden - es sei denn, die Seite soll einen Künstler und seine Werke präsentieren. Einerseits spielt die Darstellungsgröße eines Bildes und seine Position eine Rolle - der Besucher möchte nicht unbedingt scrollen, um das Gesamtbild zu sehen. Anderseits ist auch die Dateigröße ein wichtiger Faktor: bei größeren Bildern kann es zu langen Ladezeiten kommen, was die Seitennavigation sehr verlangsamt. Mit Hilfe eines Bildbearbeitungsprogramms (etwa Photoshop) und den Attributen img- Tag können diese Probleme relativ leicht gelöst werden.

[Lösung schließen]

Die Gestaltung von Webseiten mit Multimedia- Effekten erfreut sich in den letzen Jahren großer Beliebtheit. Sie können etwa die Hauptbotschaft einer Seite unterstreichen oder dem Anwender aktiv am Seiteninhalt teilnehmen zu lassen. Zwar gibt es im Netz unzählige Seiten, die ausschließlich aus bewegten Bildern, Applets oder Interaktionen bestehen (z.B. YouTube oder Spielportale), doch im Allgemeinen sollten die Multimedia- Elemente bei üblichen Projekten nicht zum Hauptbestandteil der Seite werden, sondern nur die Hauptbotschaft in einer gewissen Form unterstreichen. Dem Einsatz von Multimedia sind auch Grenzen gesetzt:

• Wie bei den Grafiken spielt die Dateigröße eine wesentliche Rolle. Je nach Internetverbindung des Anwenders kann eine solche Datei sehr lange geladen werden, bis ihr Inhalt zu sehen ist. Vor allem bei Flash- Intro kann es passieren, dass der Besucher schnell genervt ist und die Seite fluchtartig verlässt. Innerhalb einer solchen Seite sollte z.B. eine Angabe über die Dateigröße gemacht und eine Möglichkeit geboten werden, das Laden zu überspringen und mit der Navigation fortzufahren.

• Um einen Multimedia- Objekt betrachten zu können, muss der Besucher mit einer gewissen Soft- und Hardware ausgestattet sein (etwa Sound- und Video-karte, Lautsprecher, Plugin). Deshalb sollte man im Normalfall eine Multimedia- Datei nicht kommentarlos in eine Webseite einbinden, sondern den Anwender darauf hinweisen, um welche Art von Datei es sich handelt und unter welchen Voraussetzungen eine korrekte Anzeige möglich ist.

• Manche Multimedia- Dateien werden immer noch nicht vollstndig von allen Web- Browsern unterstützt. Vor allen bei älteren Browser- Versionen kann es vorkommen, dass sie ein gewisses Format nicht kennen und auch keinen Plugin zum Abspielen anbieten können. Auch hier sollte ein entsprechender Hinweis eingebaut und eine alternative Ansicht geboten werden. Grundsätzlich sollten aber solche Webseiten vor der Inbetriebnahme in mehreren Browsern getestet werden, um mögliche Probleme erkennen zu können - unter Umständen sollte man auf den Einsatz dieser Dateitypen komplett verzichten.

[Lösung schließen]

CSS (= Cascading Style Sheets) ist eine unmittelbare Ergänzung zu HTML. Damit kann der Gestalter individuelle Formateigenschaften für einzelne HTML- Elemente definieren. Vor allem bei größeren Projekten und bei unternehmensspezifischen Präsentationen spielt CSS eine große Rolle, wenn es darum geht auf mehreren Einzelseiten einer Website ein einheitliches Layout und ein gewisses Corporate Design zu entwickeln. So verwendet etwa ein Unternehmen bestimmte Farbakzente und Schriftarten, die in Online- Firmenpräsentation mit einfließen sollen. Mit HTML lässt sich dieses Vorhaben nicht erreichen, da die meisten Browser die HTML- Elemente per Voreinstellung darstellen. Zudem gelten nach den Empfehlungen vom W3- Konsortium viele Präsentations- Attribute in HTML- Tags (etwa Ausrichtung, Farbe oder Größe) als deprecated und sollen künftig aus dem HTML- Standard zugunsten von CSS entfallen.

Die folgenden Beispiele sollen die individuellen Gestaltungsmöglichkeiten von Stylesheets verdeutlichen.

Beispiel 1:

<html>
<head>
    <title>CSS- Formate</title>
    <style type="text/css">
        body
            {
                background-color: aqua; 
                font-family:Arial;
            }
        h1
            {
                font-size:14pt;
                font-family:Broadway,serif; 
                color:blue;
            }
        .start
            {
                font-size:1.2em;
                color:red;
                margin-top:3em;
            }
    </style>
</head>
<body>
    <h1>Willkommen beim Unternehmen ABC>/h1>
    <p class="start">Wir sind ein Tochterunternehmen von XY ...</p>
    <p>Von hier aus können Sie ...</p> 
</body>
</html>
                    

Im Beispiel wurde mit verschiedenen Eigenschaften zur Schriftformatierung und Farbe gearbeitet. Zusätzlich wurde eine dateiweite Hintergrundfarbe und dateiweite Schriftart zugewiesen.

Beispiel 2:

<div style="position:absolute; top:30px; left:40px;">
    <img src="logo.gif" width="50" height="50" alt="logo">    
</div>
<div style="position:absolute; top:40px; left:50px;">
    <h1>Willkommen</h1>
</div>
                    

Im Beispiel sind zwei Bereiche definiert, die an einer bestimmten Stelle auf der Seite stehen sollen. Mit Hilfe der Angaben zur Position wird erreicht, dass die Bereiche sich überschneiden, was einen interessanten Darstellungseffekt bewirkt: es scheint, als ob die Überschrift mit ins Logo einfließt.

Beispiel 3:

<ul style="list-style-image:url(list_style_image.gif)">
      <li>Unternehmen</li>
      <li>Produkte</li>
      <li>Standorte</li>
</ul>
                    

Im Beispiel ist eine Aufzählungsliste definiert. Anstatt eines üblichen Bullet- Zeichens, der standardmäßig dargestellt wird, wird hier eine eigene Grafik verwendet, die für das Unternehmen kennzeichnend ist.

[Lösung schließen]

Zum Aufbau und Konzept der Titelseite:

• Die Hundepfoten oben sollen zu den jeweiligen gewünschten Seiten (z.B. Rundgang, Gästebuch, Kontakt usw.) führen. Diese wurden vorab im Rahmen eines möglichen Besuchsablaufs konzipiert, damit der Besucher bereits von der Startseite aus auf den schnellstmöglichen Weg zum Ziel geführt wird.

• Links auf der Leinwand läuft eine kleine Foto- Animation mit verschiedenen Tierbildern ab.

• Der rechte Teil soll eine weitere mögliche Navigation simulieren. Da die Hauptaufgabe eines Tierheims im wesentlichen darin besteht, ein Tier zu vermitteln, kann der Besucher bereits von hier aus auf ein gewünschtes (animiertes) Tier im Haus oder um den Haus herum klicken und zu der jeweiligen Index- Auswahl- Seite (Hund, Katze usw.) gelangen.

• Als Hintergrund für die Titelseite wurde ein neutrales stark aufgehelltes Grasgrün verwendet - dies soll symbolisieren, dass das virtuelle Tierheim auf einer Wiese umgeben von Natur steht.

• Das komplette Design erfolgte mit Hilfe eines Bildarbeitungsprogramms (Photoshop): Gesamt- Entwurf und einzelne Objekte (Schaltflächen, Haus, Baum). Die Animation auf der Leinwand wurde mit Jasc Animation Shop durchgeführt.

• Die Ausrichtung einzelner Objekte wurde durchgeführt mit Hilfe von HTML (Schaltflächen in "blinder" Tabelle angeordnet) sowie von StyleSheets (Anordnung von Grafiken mit absoluter Position- Angabe).

• Auf weitere Multimedia- Effekte wie etwa den Hintergrund- Sound wurde aus Sicht der Benutzerfreundlichkeit komplett verzichtet.

[Lösung schließen]