Multimedia-Ratgeber: Webdesign
Spezial: Webdesign, Teil 1 b
Das Berufsbild: Präzise Beschreibung
der Tätigkeiten und AnforderungenAlleine hieran wird schon deutlich, das der Webdesigner
bereits über ausreichende Kenntnisse in der Erstellung,
Bearbeitung und Optimierung von
|
Multimedia |
-Dateien verfügen muß, um den Anforderungen des
Mediums Internet gerecht werden zu können.
"Sound"-Text nachträglich einfügen
Auch wenn der angehende Webdesigner auf das Produzieren
von Videos und internetgeeigneten Musik-Tracks verzichtet,
kommt er nicht umhin, sich Wissen über die Erstellung von
Webgrafiken anzueignen.
Denn zum einen sind die meisten Grafiken urheberrechtlich
geschützt und zum anderen muß vom Kunden eingereichtes
Bildmaterial für das Web modifiziert werden (siehe oben).
Selbstredend erst recht dann, wenn die Website mit
fehlenden Illustrationen ergänzt werden muß und die
Navigationsgrafiken dem Firmen-Design des Kunden
(seiner Corporate Identity) entsprechen sollen.
Die Technik des webgerechten Scannens und der nach-
folgenden Bildbearbeitung gehören genauso dazu, wie
ein Grundwissen über die Farbenlehre, Aufbau und
Anwendung websicherer Farbsysteme, Vermeidung bzw.
Beseitigung von Aliasing-Effekten und Pixel-Artefacten,
ästhetische Design-Repertoires und typografisch wie
ergonomisch korrekte Gestaltung.
Hierfür erwartet der Arbeitsmarkt sichere Anwendungs-
kenntnisse über folgende
Wie Sie richtig bemerkt haben, ist das Programm
"Fireworks" von Macromedia in allen drei Kategorien
vertreten, was auch dessen Stärke ausmacht. Es ist
speziell geschaffen für die Erstellung von Webgrafiken,
denen auch Funktionen zugewiesen werden können.
"Fireworks" ist somit ein "All-in-One-Tool", das als
effizientes Webgrafik-Programm zur Grundausstattung
eines jeden Webdesigners gehören sollte.
Aus der gleichen Software-Schmiede stammt das Webautorsystem "Dreamweaver".
Dieser WYSIWYG-Editor ergänzt die grafische
Programm-Palette und erleichtert die Erstellung
und Verwaltung von Webseiten.
Hervorzuheben ist die größtenteils saubere Generierung
von Auszeichnungs- und Steuerungsbefehlen (Vermeidung
von unnötigem Datenballast, der das Darstellungsergebnis
verfälschen kann) und die Möglichkeit, den so erzeugten
Quell-Code einsehen und mittels entsprechendem Editor
von Hand nachbessern zu können.
Nach der Vorstellung der Grafik-Programme
für Webdesigner seien jetzt die gängigsten
WebEditor-Programme im Überblick genannt:
|
Web-Editoren |
| WebEditor-Programme | Hersteller |
| Dreamweaver
(WYSIWYG) |
Macromedia |
| FrontPage
(WYSIWYG) |
Microsoft |
| Fusion
(WYSIWYG) |
Net Objects |
| Cyberstudio
(WYSIWYG) |
Golive |
| PageMill
(WYSIWYG) |
Adobe |
| Phase 5
(Quell-Text) |
Ulli Meybohm |
| Homesite
(Quell-Text) |
Macromedia |
Die WYSIWYG-Editoren sind auch mit Funktionen
ausgestattet, die das Erzeugen dynamischer Aktionen
auf den Web-Seiten ermöglichen.
Diese Funktionen beschränken sich in der Regel auf
die Navigations-Technik. Beispiele hierfür sind die
Effekte, die beim Überfahren einer Schaltfläche mit
dem Mauszeiger entstehen.
Dabei ändern sich meist Form, Farbe oder Beschriftung
der Schaltfläche, was den aktuellen Status anzeigt
(inaktiv / aktiviert / gedrückt / besucht).
Beim dritten Zustand einer Schaltfläche (gedrückt)
wird z.B. eine HTML-Seite aufgerufen oder eine Datei
mit ihrem Anwendungsprogramm geöffnet.
Welche Aktion beim Drücken der Schaltschläche
ausgeführt wird, kann der Webdesigner bestimmen.
Beim Status "besucht" wird deutlich, welche Seiten
vom Net-Surfer bereits besucht bzw. welche Aktionen
dieser veranlasst hat.
Diese Darstellungstechnik dient der Orientierung beim
Durchblättern (browsen) der Website, was im Gegensatz
zum sequenziellen (linear aueinander folgenden) Erfassen
von Inhalten in einem Print-Medium (Buch, Zeitung,Zeit-
schrift etc.) absolut notwendig ist, da im Hypertext
dieses Digital-Mediums willkürlich hin und her gesprungen
werden kann.
Neben dieser Technik gibt es natürlich sehr viel mehr
Möglichkeiten, Dynamik auf Webseiten zu erzeugen.
Der Schlüssel zur dynamischen und event-orientierten
Webseitengestaltung liegt in der Integration einer
Scriptsprache in den HTML-Quellcode. Diese Scriptsprache,
die immer mehr an Bedeutung gewinnt und das "Erleben"
einer Website prägt, ist:
|
JavaScript |
Was können Sie noch alles mit JavaScript machen ?
Hier einige Beispiele:
|
|
Eine automatisierte Dia-Show mit steuerbarem Bildwechsel einrichten |
|
|
Eine Sound-Datei automatisch oder per Mausklick abspielen lassen |
|
|
Platzsparende Bild-Galerien mithilfe von Thumbnail- Leisten aufbauen, wobei durch Mauszeiger-Überfahren der Kleinbilder die jeweils entsprechenden Großbilder an ein und derselben Stelle neben der Leiste angezeigt werden. |
|
|
Menüleisten erstellen, die wie der Windows-Explorer funktionieren |
|
|
Beim Anklicken von Schaltflächen bzw. Links Fenster mit vorgegebener Größe öffnen, die erklärende Texte beinhalten (wie beim Klick auf den Button "Glossar" im obersten Frame-Fenster dieser Website bzw. wie beim Klick auf den Namen des Herstellers eines Web- Editors in der obigen Tabelle) |
|
|
Informationen über den aktuell verwendeten Browser und über die Eigenschaften des Bildschirms des Internet-Nutzers auslesen und in Dialogboxen ausgeben. |
|
|
Die Aufenthaltsdauer des Net-Surfers auf Ihrer Homepage erfassen und anzeigen. |
|
|
Kalkulations- und Umrechnungsmaschinen (für Währungen und Maße etc.) bereitstellen in Form eines virtuellen und entsprechend vorprogrammierten Taschenrechners |
|
|
Einrichten einer Paßwortabfrage, wenn der Net-Surfer Zugang zu einem geschützten Bereich Ihrer Homepage haben möchte. |
|
|
Erstellen eines Formulars mit Möglichkeit zum Überprüfen und Auswerten von Eingaben in Formularfelder mit Rückgabewerten in Dialogboxen und mit den Funktionen zum Löschen bzw. Versenden der Formulardaten. |
Diese und viele andere gängige Scripte müssen nicht
immer wieder neu geschrieben werden. In Fachbüchern,
Magazinen, auf CD-ROMs und im Internet befinden sich
die fertigen "Listings" - jene Scripte, die nur noch
übernommen und für den eigenen Zweck entsprechend
angepaßt werden.
Das erspart viel Arbeit und hilft auch demjenigen beim
Erstellen dynamischer Webseiten, der ansonsten mit
Programmierung und Informatik selten etwas zu tun hatte
oder zu tun haben möchte.
Grundsätzliche Kenntnisse über die JavaScript-
Programmiertechnik sollten aber dennoch vorhanden
sein, denn ohne ein Verständnis über die Funktionen
der Script-Bestandteile kann selbst das individuelle
Anpassen und Einbetten in den HTML-Quell-Code zum
Problem werden.
Auch kleinste Flüchtigkeitsfehler - und die können
sich gerade in der Hektik der Auftragsausführung
schnell einschleichen - können fatale Folgen für
das Funktionieren eines Scriptes haben.
Besonders gute bis fachlich sehr versierte Kenntnisse
sind erst recht dann nötig, wenn komplexe Scripte stark
modifiziert, mit anderen Scripten kombiniert oder total
neu programmiert werden müssen.
Weitaus anschaulicher und leichter nachvollziehbar
für den eher gestalterisch Orientierten, ist eine
andere offiziell normierte Sprache, die zum Standard-
Know-how eines Webdesigners gehört:
|
Cascading Style-Sheets (CSS) |
Diese direkt für HTML entwickelte Ergänzungssprache
bietet dem Webdesigner zwei Vorteile:
a) Beliebiges Formatieren von HTML-Elementen
b) Zentrale Steuerung der Website-GestaltungMit CSS können Sie bestimmen, wie z.B. Überschriften,
Absätze oder Tabellen generell aussehen sollen.
Sie stellen dabei Formatierungseigenschaften in Klassen zusammen und vergeben dafür Namen. Diese von Ihnen individuell erstellten Referenzlisten lagern Sie in externe Dateien aus.
Von hier aus können Sie mit minimalstem Aufwand
Gestaltungs-Änderungen gemäß Ihrer eigenen Wünsche
oder der Wünsche Ihres Kunden vornehmen, die sich auf
alle zuvor entsprechend gekennzeichneten Elemente auf
der gesamten Website auswirken.
Ein weiterer großer Vorteil von CSS ist die Erstellung
von Layern (Schichten, Ebenen). Während HTML eine
Anordnung seiner Elemente auf nur einer Ebene zuläßt,
wird es mit der Layertechnik möglich, Texte, Grafiken
und Tabellen in mehreren Ebenen anzulegen, in denen
Sie diese Elemente frei und pixelgenau zueinander
positionieren können.
Doch auch hier kann nicht alles verwendet werden, was
gestalterisch vorgesehen und theoretisch möglich ist,
denn wie schon erwähnt, unterstützen und interpretieren
die Browser nur das, was ihnen gemäß ihrer Eigenart und
ihrer Version bekannt ist.
So muß der Webdesigner stets Kompatibilitäts-Abgleiche
vornehmen und Gestaltungslösungen für den gemeinsamen
Nenner (= einheitliches Aussehen in allen Browsern)
finden.
Die bisher vorgestellten drei "Sprachen": HTML, CSS
mit Layertechnik und Javascript bilden kombiniert das
|
DHTML (Dynamic Hypertext Markup Language) |
Anwendungsbeispiele haben Sie bereits erlebt:
Wenn Ihnen Text auf einer Homepage entgegen-
kommt und sich abwechselnd vergrößert und verkleinert;
wenn die Buchstaben eines über den Bildschirm flies-
senden Textes ihre Farbe und Laufrichtung ändern;
beim Werbe-Text-"fading" (Darstellung von 100 %iger
Farbdeckkraft zur Transparenz und umgekehrt);
wenn fliegende Texte oder Grafiken um ihre Achsen
rotieren und Ihre Aufmerksamkeit erregen wollen.
Neben diesen Werbezwecken dienenden Anwendungen,
gibt es auch solche, die informieren wollen:
Wenn Sie mit dem Mauszeiger über Text oder Grafik
fahren und daraufhin eine erklärende Texttafel oder
ein illustrierendes Bild wie aus dem Nichts erscheint
und beim Verlassen der sensitiv gemachten Stelle
wieder verschwindet.
Oder wenn Ihnen analog / digital gestaltete Uhren
als Bildschirmschoner oder in sich ständig in den
Vordergrund bringende Fenster die Zeit und Ihre
Verweildauer auf der Website anzeigen.
Der selbstbestimmten Organisation der Informations-
erfassung dienen die verschiebbaren Seitenelemente
innerhalb einer DHTML-Seite. Diese Elemente sind als
Layer angelegt und können per Mausklick bewegt bzw.
per Drag and Drop (Ziehen und Fallenlassen) durch
den Net-Surfer frei positioniert werden.
Sie können sich bestimmt vorstellen, dass diese und
andere Dynamik-Anwendungen durch die Verknüpfung der
drei Sprachen vom Webdesigner recht viel analytisches
und abstraktes Wissen aus der Programmierung fordert.
Bis hierhin reicht das Spektrum des Wissens, das
der Arbeitsmarkt von einem Webdesigner verlangt und
deren Know-how-Elemente von Web-und Werbeagenturen
und Media-Unternehmen als "Essentials" oder "Basics"
in den Stellenangeboten vorausgesetzt werden.
