Multimedia-Ratgeber: Webdesign

 
Spezial: Webdesign, Teil 1 b


Das Berufsbild: Präzise Beschreibung
der Tätigkeiten und Anforderungen





Themen-Übersicht
zum Berufsbild: Webdesign


Webdesign-Grundkenntnisse im Überblick
Web-Editor-Programme
HTML 4.0 (Hypertext Markup Language)
Browser
Kompatibilitäts-Prüfung
Dateien-Optimierung für das Web
Multimedia
Programme für Grafik & Animation
JavaScript
Cascading Style-Sheets (CSS)
DHTML (Dynamic Hypertext Markup Language)
Server und Client
Provider
CGI (Common Gateway Interface)
Perl
Web-"Simulations"-Programme
Datenbanken
SQL (Structured Query Language)
IT (InformationsTechnologie)



Alleine 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





Programme für Grafik & Animation:


A) Vektor-orientierte Statik-Bilder:

- Corel Draw 10.0
- Freehand 10.0
- Fireworks 3.0
- Illustrator 7.0
(Corel)
(Macromedia)
(Macromedia)
(Adobe)


B) Pixel-orientierte Statik-Bilder:

- Corel Photo Paint
- Fireworks 3.0
- Photoshop 6.0
(Corel)
(Macromedia)
(Adobe)


C) Vektor-orientierte Animationen:

- Flash 5.0
- Fireworks 3.0
(Macromedia)
(Macromedia)




zur Themen-Auswahl


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


zur Themen-Auswahl


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.

zur Themen-Auswahl


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-Gestaltung


Mit 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.





zur Ratgeber-Seite 3 > Spezial: Webdesign, Teil 1a zur Navigation zur Ratgeber-Seite 3 > Spezial: Webdesign, Teil 1c


Schreiben Sie mir.