Im World Wide Web ist der erste Eindruck, den der Besucher von einer Firma oder Organisation erhält, in erster Linie grafischer Natur. Der Surfer bildet sich also eine erste Meinung über die Website aufgrund des grafischen Gesamteindrucks.

Das Ziel des Webpublishers ist es schlussendlich, eine erfolgreiche Webseite zu Erstellen und zu Betreuen und dem Besucher eine attraktive, originelle und dem Corporate Design angepasste Benutzeroberfläche bieten.

CD Corporat Design (Visuelles Erscheinungsbild)
CID Coproat Identity (Identität)

Gutes und schlechtes Webdesing - zurück nach oben

Ist eine sehr subjektive Angelegenheit, doch gibt es Kriterien, die Website für den Besucher angenehm machen

Eigenschaften des Bildschirms - zurück nach oben

Festes Format im Verhältnis 4:3

Einheiten: Zoll /Inch
1" [ =Zoll = Inch] = 2,54cm.
Dies ist wirklich exakt so. Falls Du beim Nachmessen und Rechnen zu anderen Resultaten kommst, dann liegt das an den Lügen der Hersteller und Verkäufer, oder nennen wir es Täuschung, denn angegeben wird der Durchmesser der Röhre, welche unter dem Gehäuse verschwindet. 17 Zoll wären nämlich 43,2cm, beim Nachmessen wirst Du irgendwas zwischen 40 und 41cm ablesen, also ca. 16 Zoll. Folgende Masse hat ein 17 Zoll Monitor von Sony: Höhe: 9,5" = 24,1cm
Breite: 12,8" = 32,5cm
Diagonale: 15,9" = 40,4cm

Auflösung - zurück nach oben 72 (96, 80) dpi (dots per inch)
Dots, Pixels oder Punkte sind in diesem Zusammenhang identisch anzusehen. Bei der oben festgestellten Bildschirmgrösse hat man standardmässig auch die Bildschirmlösung 1024 x 786 Pixel eingestellt. Man hat also auf einer Breite von 12,8" genau 1024 Pixel, was folgende einfache Rechnung ergibt:
1024 dots : 12.8 Inch = 80 dpi

RGB-Farbenmodell 16.7 Mio. Farben, ist abhängig von der Grafikkarte

Farbtiefe - zurück nach oben
Die Qualität Ihrer Bilder im Internet, hängt auch von der Farbtiefe des Rechners ab. Die Farbtiefe eines Betriebssystems wird vom Monitor und der Grafikkarte bestimmt. Eine 8-Bit-Grafikkarte kann nur 256 Farben darstellen, egal, wie gut der Monitor ist. Ein alter Monitor wird dagegen auch mit der besten Grafikkarte nicht mehr als 16 oder 256 Farben verkraften. Seit längerem können auch die günstigsten Monitore problemlos 16,7 Millionen Farben darstellen.
Die Farbtiefe wird ebenfalls in Bits ausgedrückt. Die Rechnung ist einfach: Die 1-Bit-Farbtiefe besteht aus 2 Farben. Wenn sie diese 2 Farben mit 2 multiplizieren, bekommen Sie 4 Farben, hier handelt es sich um die 2-Bit-Farbtiefe. Multiplizieren Sie diese 4 Farben wieder mit 2, so bekommen sie 8 Farben, das ist dann die 3-Bit-Farbtiefe. So können Sie weitermachen, bis Sie zur 32-Bit-Farbtiefe gelangen, die ca. 16,7 Millionen Farben plus eine 8-Bit-Graustufenmaske (256 Stufen) darstellen kann.

Eigenschaften des Browsers - zurück nach oben

Spezielle Farbpalette mit 216 Farben, Die Webpalette wird in beiden Browser gleich dargestellt
Wird eine Grafik im Browser aufgerufen, so setzt dieser die Farben aus seiner Farbpalette neu zusammen. Netscape setzt seine Farben anders zusammen als der Internet Explorer. Während Netscape Farben aus seiner Farbtabelle (CLUT) kombiniert, verwendet der Internet Explorer die Windowsfarben.

Dithering
Stossen der Navigator oder der Internet Explorer auf eine Farbe, die nicht in der eigenen Farbpalette enthalten ist, wird eine ähnliche Farbe ausgewählt oder aus zwei verschiedenen eine neue Farbe gemischt. Das Mischen von Farben wird Dithering genannt.

Verwendet Systemschrift die installiert sind

Grafikformat - zurück nach oben, .JPEG, .GIF, .PNG

MAC / PC

Die Schriften sind bei MAC kleiner und die Farben etwas heller. Grafiken werden gleich dargestellt

Physisce Struckturierung

Dient zur übersichtlichen organisation von Dateien

Logische Struckturierung

Das Layout - zurück nach oben

grosses Bild in Tabelle zerteilen

Nur einfache Layouts sollten dynamisch sein wegen der Ladezeit

Schriften, Text & Farben - zurück nach oben

Schriften und Schriftarten

TrueType und Postscript-Schriften

sind skalierbar, da sie auf einer mathematischen Beschreibung und einem Bündel von Instruktionen für die Ausgabegeräte beruhen. Sie basieren auf einem relativen Masssystem, dem Geviert (engl. „em-square“).

Bitmap-Fonts

Schriften, die aus einem Punktemuster bestehen und sich deshalb nicht ohne Qualitätsverlust vergrößern lassen.

Web Embedding Fonts Tool

Schriftarten kommen auf den meisten Rechnern zu Hauff vor. Doch im Web einsetzen kann man nur die wenigsten davon. Es sei denn, man bettet sie ein. Zwar lässt sich beim Anlegen einer Site jede beliebige Schriftart verwenden, doch sehen kann sie später im Web nur derjenige, der über eben diesen Font verfügt. Je exotischer die Schrift, desto unwahrscheinlicher ist das.
Schwierig ist die Arbeit mit dem „Web Embedding Fonts Tool“ nicht. Jede, in einer Site vorhandene Schrift wird über die Software in eine Datei verwandelt, die mittels CSS angesprochen werden kann. Die Quellcodeergänzung nimmt das Programm automatisch vor. Microsoft setzt auf die WEFT-Technologie. Ihr Vorteil liegt darin, dass sich die Site zunächst unter Rückgriff auf alle Type-1- und Truetype Schriften auf dem Entwicklungsrechner erstellen lässt. Erst auf das fertige Projekt wird der WEFT Wizard angesetzt. Beim ersten Start scannt WEFT Wizard den Rechner nach Truetype- und Type-1-Schriften und legt eine Datenbank an. Anschliessend werden alle zu überarbeitenden HTML-Projekte angegeben. Der Wizard analysiert die verwendeten Schriften und konvertiert sie in ein eigenes EOT-Format. Für die Konversion muss eine Webadresse hinterlegt werden, von der aus die Schrift lauffähig ist. Andere Adressen kommen nicht in Frage, womit dem Font-Klau ein Riegel vorgeschoben wird.
Netscape hat seine Fonttechnologie in Zusammenarbeit mit Bitstream entwickelt. Es handelt es sich dabei um ein RIP, das als Plug-in für Netscape realisiert wurde und das die in den Speicher geladenen Schriften im Browser korrekt darstellt.

Unterteilung der Schriften

Für grosse Textmengen: Arial, Helvetica, Futura, Univers, Garmond Times

Schriften und Schriftcharakter

Verwenden einer Serifenschrift für die Überschrift und eine Serifenlose Schrift oder umgekehrt für den Fliesstext. Sonst entsteht eine störende Disharmonie

Maxi. 4 Schriftarten auf einer Seite

Mikrotypografie

heisst auch Detailtypografie, die sich mit den Feinheiten der Zeichen-, Wort- und Zeilenabstände befasst. Sie umfasst alle Bemühungen, den Satz nicht einfach in Spalten abzufüllen, sondern verständlich und vor allem leicht lesbar zu anzuzeigen. Neben der richtigen Laufweite und dem richtigen Zeilenabstand trägt auch der richtige Wortzwischenraum zur schnellen und verständlichen Leserlichkeit eines Textes bei.

Bildschirmtexte werden aber in der Regel 20 bis 30% langsamer gelesen und Schrift an Bildschirm sollte 30% grösser gewählt werden als auf der herkömmlichen Publikation

Faustregeln für Bildschirmtexte

• Kurze einfache und prägnante Sätze

• Nicht mehr als acht bis zehn Wörter pro Zeile verwenden

• Empfohlener Zeilenabstand 150 – 200% (blinde Gif verwenden)

• Kurze Zeilen linksbündig ausrichten

• Syntaktische Einheit bei Zeilenende beachten

• Jede Zeile sollte eine Sinneinheit umfassen

Schriftgrösse und Zeilenabstand - zurück nach oben

1 Punkt = 0.351 mm

Der Zeilenabstand sollte 120% der Schriftgrösse entsprechen. Um die Schriftgrösse konstant zu halten dennoch die Lesbarkeit zu optimieren den Zeilenabstand vergrössern. Optimale Ergebnisse lassen sich jedoch durch eine Kombination von kurzen Zeilen und einem vergrössertem Zeilenabstand erzielen.

Text aus Bildbearbeitungsprogrammen Wirken schnell stufig, dieser störender Effekt wird mit antialiasing reduziert. Bei Text kleiner als 12 pt gehen häufig Schriftdetails verloren, zudem nimmt der Speicherplatz des Bildes zu daher sollte bei diesen Grössen kein antialiasing angewendet werden.

Richtlinie für Zeilenlänge

Text und Farben - zurück nach oben

Farben haben grosse Wirkung auf uns. Sie können Stimmungen beeinflussen, Signale setzen oder Hinweisvermitteln. Sie helfen mehr als alle anderen Stilmittel dabei den Charakter einer Website zu ermitteln. Sie setzen Modetrends oder wecken Assoziationen.

Heller Text auf einem dunklen Hintergrund wirkt optisch schwächer als dunkler Text auf hellem Hintergrund

Feine Linien werden überstrahlt, wodurch Schriftdetails verloren gehen, Text fett Formatieren

Farbige Schrift Kontrastiert weniger als Schwarze Schrift, Text fett Formatieren

Farb-Harmonie

Farben können sich gegenseitig verstärken oder stören (Disharmonie). Was als angenehm empfunden wird ist bis zu einem gewissen Grad vom Betrachter abhängig
Grundregel: Wenn eine der drei Grundfarben eine weggelassen wird , bilden die anderen zwei eine harmonische Kombination. Auch Abstufungen einer Farbe werden als Harmonisch empfunden

Kontraste

Der grösste Kontrast ist der Komplementärkontrast (Jeweils die 2 sich gegenüberliegenden Farben im Farbenkreis)
rot - grün, blau - orange. violette - gelb

Farbtiefe

Von 1 Bit bis 32 Bit sie wird durch Faktoren wie Monitor, Grafikkarten und Systemeinstellungen beeinflusst.
So kann eine Grafikkarte mit 1 Mbyte Speicher bei einer Auflösung von

Bildpunkte darstellen - zurück nach oben

Farbpalette - zurück nach oben

Ist eine Tabelle, die alle Farben enthält dei eine die eine Grafik oder ein Browser oder ein Betriebssystem verfügbar sind. Wen eine Farbe nicht in der Palette enthalten ist wird die Farbe genommen die der gewünschten am ähnlichsten ist.

Bilder & Animationen - zurück nach oben

Reduzieren Indizieren

Im Bild werden die Farben auf die Webpalette (216 Farben) reduziert = indizieren. Die Bild-Farben die nun nicht mehr in der Palette vorhanden sind werden durch verschiedene Dittering Methoden simuliert beste Ditteringsmethode Diffusion. Es ist nur mit geringen Qualitätsverlusten zu rechnen. (erst als letzter Arbeitsgang auf Webpalette reduzieren

Antialiasing

auch "Kantenglättung" genannt zur Verminderung des Treppeneffekts, der durch Pixeldarstellung bei schrägen und gekrümmten Linien entsteht. Durch Interpolation - farbliche Angleichung benachbarter Bildpunkte - werden die "Treppenstufen" ausgeglichten. Dabei kann es allerdings passieren, daß die Darstellung von Linien breiter erscheint. Vegrössert auch die Datei.

Interlacing

Normal abgespeicherte Bilder werden erst nach der vollständigen Übertragung über das INTERNET im Browser angezeigt. Interlacing ist ein spezielles Speicherverfahren, bei dem das Bild in 4 Schichten abgespeichert wird. Der Betrachter kann so dem Bildaufbau zusehen. Die Übertragung großer Bilder wird dadurch etwas kurzweiliger und kann ggfls. abgebrochen werden, falls es nicht interessant ist.
Nicht so geeignet für Bilder deren Information für den Betrachter wichtig sind. Erst ab Bildgrösse 200 x 200 Pixel vernünftig

Transparenz

Manche grafischen Objekte kommen erst richtig zur Geltung, wenn sie sich harmonisch in das Umfeld einbetten. Am Besten geht das, wenn der Farbhintergrund transparent ist. Das GIF-Format bietet die Möglichkeit, eine Farbe transparent darzustellen. So können Teile einer Grafik sozusagen "durchsichtig" erscheinen und der Hintergrund schimmert durch.

Alpha-Kanal

neben den Farbkanälen (RGB, CMYK,...) ein zusätzlicher Kanal in einer Bilddatei, der z.B. Maskierungen, Transparenzen oder Verläufe enthalten kann. In professionellen EBV-Systemen können mehrere dieser Alpha-Kanäle angelegt werden. Dieses setzt voraus, daß das verwendete (Bildverarbeitungs-)Programm mit Layern / Ebenen arbeitet

Grafiktypen

Zwei Grafiktypen werden für das Web genutzt: Bitmap-Grafiken (GIF und JPG) und Vektorgrafiken (Flash).

Bitmap-Grafiken

Bitmap-Grafiken setzten sich aus einzelnen Pixeln zusammen. Diese lassen sich sichtbar machen, wenn eine Grafik erheblich vergrößert wird. Angegeben wird die Auflösung von Bitmap-Grafiken in dpi ("dots per inch" = Punkte pro Zoll - 1 Zoll = 2,54 cm). Standardmonitore können physikalisch nur 72 dpi darstellen. Wenn Sie Grafiken für das Web erstellen, brauchen Sie sich daher um höhere Auflösungen keine Gedanken zu machen. Mit diesem Wert haben Sie eine reale Darstellung auf jedem Monitor mit gleicher Auflösung
Nicht verlustfrei Skalierbar
Der Speicherbedarf von Grafiken wird durch folgende Faktoren bestimmt:
Auflösung, Farbtiefe und Speicherbedarf.

Vektor Grafik (48 Bit)

Im Gegensatz zu Bitmap-Grafiken besteht eine Vektorgrafik nicht aus einzelnen Bildpunkten sondern aus einer (farbigen) Fläche, welche durch Ausdehnung in die entsprechende Größe skaliert (ausgedehnt) werden kann. Vektorgrafiken gibt es schon lange, doch erst mit Aufkommen der Shockwave Technologie (Flash) sind sie im Internet richtig populär geworden. Flash-Seiten leben praktisch von Vektorgrafiken. Sie werden in mathematischen Werten (Vektoren oder Bezier-Kurven) angegeben, dadurch sind ihre Dateien kleiner, als die optisch gleichgroßen Bitmap-
Verlustfrei Skalierbar
Web-gerechte Vektorformate: PGML, SVG, SVF, VML, DWF, VRML, O2C
 

Dreidimensionale Grafiken - zurück nach oben

Benötigen Plug-Ins zudem lange Ladezeit und braucht einen grossen Speicherplatz

Gif Format - zurück nach oben "Graphics Interchange Format" - Grafik-Austausch-Format

• 8 Bit beschränkt kann 256 Farben darstellen.

• man kann sicher sein, dass die Farben auch websicher bleiben

• starke, verlustfreie Komprimierung von Bildern mit weniger als 256 Farben.

• Amimationen möglich 89a

• Transparenz 89a

• Hardware- und Plattform-Unabhängigkeit.

• Karten, Piktogramme, Symbole, Zeichnungen Grafiken, Logos oder Schriftzüge

JPEG-Format - zurück nach oben "joint photografic expert group"

• 24 Bit kann 16,7 Mio. Farben darstellen.

• Bei Grösseren einfarbigen Flächen können Artefakte entstehen.

• Im JPEG-Format können Sie Bildqualität und Komprimierungsstufe bestimmen (50% Praxiserfahrung ohne nennenswerte Verluste)

• Das JPEG wird komprimiert und bei der Wiedergabe dekomprimiert, dies nimmt Zeit in Anspruch.

• Hardware- und Plattform-Unabhängigkeit

• Für Farbfotos bestens geeignet

progressive JPEG

Das Bild wird zunächst mit einer sehr niedrigen Auflösung übertragen. Anschließend erfolgt eine Verfeinerung der Bilddaten, bis die Grafik in der gewohnten Qualität vorliegt.Trotz der guten Komprimierung, die sich mit JPEG erzielen läßt, kommt es bei der Übertragung von Bildern auf Web-Seiten für den Betrachter zu einer unangenehmen Wartezeit, bis ein Bild vollständig aufgebaut ist. Hinzu kommt ein linear von oben nach unten verlaufender Bildaufbau im Browser, so daß zunächst ein großer Teil der Grafik zu übertragen ist, bevor der Betrachter den Inhalt einzuschätzen vermag.
Zum Speichern von Bildern mit einer Progressive-JPEG-Komprimierung lassen sich bereits heute die meisten gängigen Grafikprogramme, wie Paintshop Pro, verwenden. Auch die aktuellen Browser unterstützen das Format, so daß eigentlich nichts gegen den Einsatz spricht.

JPEG 2000

Die International Organization for Standardization (ISO) hat das Format "JPEG 2000" ab 2. Januar 2001 zum Standard erklärt. An der Entwicklung von JPEG 2000 sind die Universität von British Columbia, das Unternehmen Image Power sowie die ISO beteiligt. Im Gegensatz zu zahlreichen gefloppten Bildformaten, darunter etwa Flashpix, werden der neuen JPEG-Version duch die starke Verbreitung des Vorgängerformats allgemein große Chancen auf Erfolg eingeräumt.

PNG-8 , PNG-24 Format - zurück nach oben "portable network graphic"

• Vereinigt GIF und JEPG

• 8 Bit beschränkt kann 256 Farben darstellen.

• Hat eine verlustfreie Kompressionsmethode

• Alphakanal für Transparez

• Dateiformat ist Plattform übergreifend PC Apple-Maciotosh-Systemen. Nicht ohne Plug-Ins in Browser ansebar

• gezeichnete Illustrationen. gescannte Bilder, Strichgrafiken, Logos und Abbildungen mit Text

Sie sollten dieses Format vermeiden, wenn Sie Bilder fürs Internet aufbereiten.

MNG-Format "Multiple Image Network Graphics format"

• ergänzt die PNG-Familie um bewegte Bilde

Sie sollten dieses Format vermeiden, wenn Sie Bilder fürs Internet aufbereiten.

Animation - zurück nach oben

• Werden oft langweilig wenn sie in eine Endlosschleife gesetzt werden

• Nicht mehrere Animation auf einer Seite

• Textanimation nur um das Gewicht des Textes zu maximieren und nur für Überschriften geeignet

• Als Ausgangmaterial für anim.gif kein interlaced gif verwenden

Scannen - zurück nach oben

Ein Monitor schafft nur 72 dpi, daher kann mit 100 dpi eingescannt werden. Bei einer Auflösung von 300 dpi sieht das Bild am Monitor grösser aus. Man kann Grafiken oder Text Scannen, Text lässt sich nachher auch wie Text bearbeiten. Beim scannen auf den Farbraum achten meist ist RGB voreingestellt Der Twaintreiber ist der Standart-Treiber um zu scannen und um Photos einzulesen. Die meisten Geräte sind SCSI-Geräte. Es gibt auch multifunktionale Scanner die Faxen und Drucken
dpi - Dots per Inch
lpi - Lines per Inch
Die Auflösung ist die Anzahl Pixel, Punkte oder Linien pro Zoll von Bildern, Druckern oder Rastern gebraucht werden
Der Moire Effekt ist ein unerwünschtes Punktmuster, das eine auffällige Rasterung bewirkt und das gescannte Bild beeinträchtigt Es entsteht wenn bereits gerastete Grafiken (z.B. Kataloge, Produktbroschüren) gescannt werden. Kann mit dem Gaussian Blue (Gauscher Weichzeichner Radius ca. 1.2) wegmachen

Interpolation - zurück nach oben

Unter Interpolation versteht man ein Verfahren, mit dem die gescannten Bildpunkte noch zusätzlich rein rechnerisch ermittelt werden. Dadurch ist eine scheinbare Verbesserung der Auflösung möglich. Es ist aber nur die Punktdichte, nicht die Detailtreue, die damit vergrössert wird. Bildinformationen sind in jedem Fall nicht mehr vorhanden, als ursprünglich eingescannt. So können feine Strukturen zusammenfliessen oder können wirken.

Farbtiefe

Wird ein Bildpunkt nur mit 1 Bit digitalisiert, ist er entweder schwarz oder weiss. Je mehr Bit beim Scannen zur Verfügung stehen, desto mehr Graustufen können erzeugt werden, nämlich 2 hoch Anzahl Bit. Bei Farbscannern muss diese Zahl verdreifacht werden. Aktuelle Geräte haben eine Farbtiefe von (pro Bildpunkt) 24, 30 oder 36 Bit. Bei einer Farbtiefe von 30 Bit gibt das pro Farbe „30 Bit / 3 Farben = 10 Bit“. Mit diesen 30 Bit lassen sich dann „30 Bit =1 Milliarde“ Farbnuancen darstellen.

Kalibrierung - zurück nach oben

Um sicherzustellen, dass Farben zwischen Scanvorgang und Bildausgabe korrekt wiedergegeben werden, müssen die benutzten Geräte kalibriert werden. Die Farbdarstellung am Bildschirm ist so einzustellen, dass sie mit den Originalfarben übereinstimmt.

Multimedia - zurück nach oben

Versteht man die parallele Verwendung von Text, Bildern, Ton und Film in Computerprogrammen (Flash, Power Point, Corel Move). Es ist Datenintensiv und auf schnellen Datenträger Zuhause. Benötigt wird Verbindung ins Internet, Soundkarte, e.v Video Decoder Karte, CD-Rom oder DVD Laufwerk, Multimediaelemente in den Browser, e.v Plugins

Einbinden von Multimediaelementen

Automatisch ladende Multimedia Elemente

Sind Multimediaelemente die mit den obigen Tags eingebunden sind
Kann störend sein, jeder Seitenwechsel unterbricht die Musik, es werden auch bei abgeschalteten Lautsprecher alle Sounddateien heruntergeladen
Für Netscape und Internet Explorer
<EMBED SRC="sound.wav" AUTOSTART=TRUE HIDDEN=TRUE>
<NOEMBED><BGSOUND="sound.wav"></NOEMBED>

Sounddatei Formate - zurück nach oben

Nicht in Endlosschleifen

<bgsound src="dateiname.erweiterung" loop="5">

Klangqualität Samplingrate und Auflösung

Je höher die Sampling Rate (kHz oder Hz) je grösser das Klangspektrum und der Speicherbedarf. Für Sprachwiedergabe ist eine Samplingrate von 8.000Hz und eine Samplingauflösung von 8 Bit Mono völlig ausreichend

Plug Ins

Durch Plug Ins werden Programme aufgerufen die ohne Unterstützung des Browsers ablaufen. Sie haben den Nachteil, dass sie erst dann Funktionieren wenn der Benutzer die Zusatzkomponenten auf seinem Rechner installiert hat. Nur Technologien die bereits mit Browser installiert worden sind heben eine Chance sich durchzusetzen

Videos einbinden - zurück nach oben

Videokarten gewähren eine gute einlese Qualität und enthaltet normalerweise eine Software für den Export

Kompressionsart und Format

Videosequenzen

Qualität eher mässig da sehr viel Speicherplatz gebraucht wird und die Übertragungsgeschwindigkeit ist zu klein ist. Plug-Ins ab Windows 95/98 und Netscape bereits vorhanden

Videosequenz optimieren Frame Grösse 160 x 120 Pixel (Bearbeiten bei 640 x 480 Pixel), Schrift 30pt. Ruckfrei bei 25 Bildern pro Sekunde geht aber zu lange besser bei 10 - 15 Bilder pro Sekunde ( Faustregel halbieren der original Abspielgeschwindigkeit
<a href="name des films.avi">Laden Sie den Film</a> oder
<img dynsrc="name des films.avi" start="mouseover"

Meat-Stream

stellt eine Kombination von Hard und Software dar. Dabei nimmt die Kamera eigenständig 7 Bilder auf, aus denen der dreidimensionale Effekt errechnet wird. Das Objekt wird direkt im Metaformat ausgegeben. Vorteil gegenüber Quick-Time VL und VRLM niedriger Speicherbedarf, in Handhabung sehr einfach, Streamingfunktion erlaubt herunter zu laden und gleichzeitig anzusehen. Ab Windows 2000 ohne Plug-Ins

Quick-Time VR

Können 360° Panoramabilder wiedergegeben werden. Man kann mit der Maus innerhalb des Bildes navigieren. Nachteil hoher Speicherbedarf und benötigt Plug-Ins, 3D-Möglichkeiten eher beschränkt.

WebCams

Braucht eine fixe Verbindung ins Internet. Sie müssen an PC angeschlossen sein.

Camera Server

Brauchen keine fixe Verbindung ins Internet und können mehrere Kameras gleichzeitig abgefragt werden. Kameraeinstellungen lassen sich direkt steuern.

Video Server

Live Übertragung in Video Qualität. Mehrere Kameras können gleichzeitig abgefragt werde, Teil ferngesteuert über das Internet zoomen oder Bewegungen ausführen

Audio und Video Liveübertragung

Real bietet eine vollumfassende Software und teilweise Hardware an um auf dem Internet Live-Übertragungen zu „streamen", ein Online Datenfluss

Video Konferenzen

1. Basierend auf eigenständigen Geräten z.B. ein Bildtelefon, welches an eine ISDN Telefonleitung angeschlossen ist:
Teilnehmer immer sofort erreichbar, Gute Bild- / Tonqualität, teure Verbindungskosten, teure Hardware, Meist nur gegen gleiche Geräte kompatibel

2. Basiert auf Software Basis welche mit dem PC über einen Internetanschluss funktioniert: nur lokale Telefonkosten bis zum Provider, Geringe oder keine Hardware kosten, Ton- / Bildqualität hängt von der Netzkapazität ab, gleiche Software muss eingesetzt werden, kein direktes Anwählen, Verbinden möglich

Beide Videokonferenzpartner müssen zur gleichen Zeit Online sein, Terminabsprache via Email sowie die gleiche Software.

Interaktionen

Ein paar performence Gebote - zurück nach oben

1. Die gleichen Designelemente, Logos, Bullets, Buttons und Trennlinien, auf der ganzen Website verwenden. Da diese in den Browsercache geladen werden und so schneller zur Verfügung stehen als neue zu laden. Alle mehrfach verwendeten Grafiken gehören in den gleichen Ordner (Images)

2. Das richtige Format wählen .gif = für die Komprimierung Grafiken mit grossen Farbflächen, .jpg = für Fotografien mit zahlreichen Farbdetails
Die Bilder sollten so gespeichert sein, dass schon beim Laden eine partielle Darstellung erfolgt

3. Daten optimieren .gif nur die benötigten Farben speichern (wieder in den RGB Modus umwandeln Photoshop erkennt nun das bereits Indiziert wurde und schlägt als Palettentyp Exakt mit einer individuellen Farbtiefe und der entsprechenden Anzahl von Farben vor. Übernehmen.), Verläufe, antialiasing und Schattenschlag brauchen viel Platz.  .jpg = Dateien lassen sich in variablen Bildqualitäten speichern. Animation sollte man mit einem professionellen Tool optimieren.

4. Grafiken verkleinern indem man sie in kleinere Teile aufteilt und in einer Tabelle wieder zusammensetzt. Tumbinals geben dem Betrachter die Wahl durch die Ansicht eines kleinen Ausschnittes ob das ganze Bild heruntergeladen werden soll. Um vorab einen Eindruck des Bildes zu erhalten Schwarzweiss oder Graustufenbild einfügen das dann durch die farbige Variante ersetzt wird
<img lowsrc="schwarzweissbild.gif src=Farbbild.jpg width="xx" height="xx">

5. Da Tabellen den Inhalt erst anzeigen nachdem sie vollständig geladen ist, grosse Tabellen in kleine aufteilen und untereinander anordnen.

6. Einzelne Seite nicht mit Informationen überladen, dem Besucher die Möglichkeit geben eigene Entscheidung zu treffen

7. Bei grossen Seiten ist ein Inhaltsverzeichnis Sitemap oder eine Suchmaschine unumgänglich

8. Sauberes HTML schreiben indem alle Parameter und Tags geschrieben werden um das rendern zu vereinfachen. Höhe und Breite angaben von Bilder, Tabellen, u.s.w.

HTML - zurück nach oben

Hyper-Text-Markup-Language, ist eine Auszeichnungssprache (Dokumentbeschreibungssprache), und enthält Befehle zum Markieren typischer Elemente eines Dokumentes wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen.

Das Beschreibungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML beschreibt Dokumente. Dokumente haben globale Eigenschaften wie zum Beispiel einen Titel oder eine Hintergrundfarbe. Der eigentliche Inhalt besteht aus Elementen, zum Beispiel einer Überschrift 1. Ordnung. Einige dieser Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als fett markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen

HTML-Dateien bestehen immer aus reinem Text, dass heisst Klartext ohne irgendwelche Formatierungen. Zeichen welche jenseits der ersten 128 Zeichen des ASCII-Zeichensatzes vorkommen, müssen über eine Folge von Sonderzeichen Maskiert werden
HTML-Dokumente sind Plattformabhängig

Eine HTML-Datei muss interpretiert werden, um der Seite eine über reiner Text hinausgehende Bedeutung zu verleihen. Dazu verwendet man den Browser. Der Browser arbeiten nach dem Prinzip der Fehlertoleranz. Damit können auch syntaktisch fehlerhafte Dokumente weitgehend, ausgewertet werden.

HTML-Dateien bestehen aus ASCII-Text. Deshalb können Sie HTML-Dateien mit jedem einfachen Text-Editor bearbeiten. Besser sind allerdings ausgereifte HTML-Editoren.

Allgemeine Regeln in HTML

Tags

Neben dem eigentlichen Text enthalten HTML-Dateien HTML-spezifische Befehle. Alle HTML-Befehle stehen in sog. Tags. Die Tags werden durch spitze Klammern markiert. Fast alle Befehle von HTML bestehen aus einem einleitenden und einem abschließenden Tag. Der Text dazwischen ist der "Gültigkeitsbereich" für die betreffenden Tags.

Attribute in Tags

Einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten. Diese werden in Hochkommas geschrieben

Schema des Grundgerüsts einer HTML-Datei

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen:

• Header (Kopf)
  (enthält Angaben zu Titel u.ä.)

• Body (Körper)
  (enthält den eigentlichen Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Regeln bei der Texteingabe

Wenn Sie einen Text-Editor oder einen ASCII-basierten HTML-Editor zur Erstellung Ihrer HTML-Dateien verwenden, sollten Sie folgende Regeln kennen und beachten:

• Notieren Sie in einer neuen Datei immer zuerst das Grundgerüst einer HTML-Datei.

• Beachten Sie bei der Texteingabe die Maskierungsvorschriften für Umlaute, Sonderzeichen und HTML-eigene Zeichen.

• Setzen Sie Zeilenumbrüche und Leerzeilen so, daß Sie im Quelltext eine optimale Übersicht behalten. Beachten Sie aber auch, daß WWW-Browser die Zeilenumbrüche und Absatzschaltungen im Editor ignorieren und den Text automatisch umbrechen - so wie Textverarbeitungsprogramme. Für Zeilenumbrüche und Absatzschaltungen, die im WWW-Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Befehle eingeben, zum Beispiel Befehle für Textabsätze (Absatzschaltungen) oder erzwungene Zeilenumbrüche. Wenn Sie aus besonderen Gründen Text im WWW-Browser so anzeigen wollen wie Sie ihn eingeben (mit allen Einrückungen, Umbrüchen usw.), können Sie den HTML-Befehl für präformatierten Text verwenden.

• Beachten Sie, daß der WWW-Browser auch keine Tabulatoren interpretiert. Tabulatoren sind in HTML derzeit nicht vorgesehen. Für definierte Einrückungen können Sie mit Style-Sheets arbeiten.

• Mehrere Leerzeichen hintereinander werden vom WWW-Browser ignoriert und zu einem einzigen zusammengefaßt. Um mehrere Leerzeichen zu erzwingen, verwenden Sie anstelle der normalen Leerzeicheneingabe die Zeichenfolge &#160; ( geschütztes Leerzeichen), und zwar so oft hintereinander wie gewünscht.

 Farben in HTML - zurück nach oben

Farben können Sie in HTML in vielen Zusammenhängen definieren, zum Beispiel bei:

• bei dateiweiten Hinter- und Vordergrundfarben

• bei Schriftfarben für Textabschnitte

• bei Style-Sheet-Angaben

• bei Farben in Tabellen

• bei farbigen Trennlinien

• bei farbigen Rahmen für Frames

• bei Hintergrundfarben für Layer

• Obwohl die HTML-Tags der entsprechenden Farbdefinitionen sehr unterschiedlich sind, gilt bei allen Farbdefinitionen ein einheitliches Schema. Grundsätzlich gibt es zwei Möglichkeiten, Farben in HTML zu definieren:

durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform (RGB = Rot/Grün/Blau-Wert der Farbe)
durch Angabe eines Farbnamens
Wenn Sie hexadezimale Werte angeben, arbeiten Sie Browser-unabhängig, und Sie haben die volle Freiheit zwischen 16,7 Millionen Farben.

Wenn Sie Farbnamen angeben, umgehen Sie die etwas schwierige Definition einer Farbe im Hexadezimal-Modus. Derzeit sind jedoch nur 16 Farbnamen offiziell standardisiert. Weitere Farbnamen gibt es, sie sind jedoch Browser-abhängig.

Hexadezimale Angabe von Farben

Wenn Sie Farben direkt im Hexadezimal-Modus definieren, müssen Sie die gewünschte Farbe aus Angaben zu den drei Grundfarben Rot, Grün und Blau (RGB-Werte) zusammenstellen.

Jede hexadezimale Farbdefinition ist 6stellig und hat das Schema: #XXXXXX.
Zunächst notieren Sie also ein Gatter #. Dahinter folgen 6 Stellen für die Farbdefinition. Die ersten beiden Stellen stellen den Rot-Wert der Farbe dar, die zweiten beiden Stellen den Grün-Wert, und die letzten beiden Stellen den Blau-Wert.

Eine hexadezimale Ziffer kann also 16 Zustände haben. Für jeden Farbwert (Rot, Grün, Blau) stehen 2 Ziffern zur Verfügung. Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert. Es gibt 16 Grundfarben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden können. Es gieb ferner 216 Standartfarben, die Netscape intern und Platformübergreifend zur Verfügung stellt Diese Farbpallete hat sich im WWW zu einer Art Quasi-Standart entwickelt.

Konventionen für Dateinamen - zurück nach oben

Dateinamen im Hinblick auf Server-Rechner

Die meisten Server-Rechner im heutigen WWW sind Unix-Rechner. Unix unterscheidet strikt zwischen Gross- und Kleinschreibung bei Dateinamen. Wer sein WWW-Projekt beispielsweise in einer DOS-/Windows-Umgebung erstellt, wo dies keine Rolle spielt, kann bittere Erfahrungen machen, wenn plötzlich die lokal funktionierenden Verweise und Grafikreferenzen nach dem Hochladen auf den Server-Rechner nicht mehr funktionieren. Der Grund ist in solchen Fällen, daß beispielsweise in den HTML-Dateien kleingeschriebene Verweisziele oder Grafikdateinamen notiert wurden, während das DOS-/Windows-System großgeschriebene Dateinamen an den Server übertragen hat.

Wenn Sie mit Windows 3.x oder DOS 6.x und niedriger arbeiten, bleibt Ihnen in einem solchen Fall kaum eine andere Möglichkeit, als die Dateien auf dem Server-Rechner mit Hilfe von FTP-Befehlen so umzubenennen, wie sie in den Verweisen und Grafikreferenzen notiert sind. Wenn Sie mit einem System arbeiten, das Groß-/Kleinschreibung bei Dateinamen zwar für die Optik, aber nicht intern unterscheidet (z.B. Windows 98), ist es am sichersten, Sie erzeugen Dateinamen, die nur aus Kleinbuchstaben bestehen, und in Verweisen und Grafikreferenzen notieren Sie ebenfalls alle Dateinamen in Kleinbuchstaben.

Dateinamen im Hinblick auf Kompatibilität

Wenn Sie Ihr WWW-Projekt ausschließlich für den Einsatz im WWW erstellen, müssen Sie nur darauf achten, daß die Dateien vom Server-Rechner akzeptiert werden. Bei modernen Unix-Systemen, wie sie die meisten WWW-Server einsetzen, sind Dateinamen bis zu 256 Zeichen Länge erlaubt. Vermeiden Sie aber in jedem Fall deutsche Umlaute und scharfes S in den Dateinamen. Als Sonderzeichen ist in jedem Fall der Unterstrich "_" erlaubt. Andere Satzzeichen sollten Sie vermeiden. Fragezeichen "?", Sternzeichen "*", Istgleichzeichen "=" dürfen Sie auf keinen Fall in Dateinamen verwenden. Auch auf Leerzeichen sollten Sie unbedingt verzichten.

Wenn Sie Ihr Projekt auch anderweitig vertreiben möchten, zum Beispiel als Download zum Offline-Lesen (wie das vorliegende Dokument) oder auf CD-ROM, sollten Sie die engen Grenzen von MS-DOS-kompatiblen Dateinamen beachten, damit auch solche Anwender keine Problem mit der Anzeige des Projekts bekommen. Dabei sind maximal 1 Punkt zur Trennung von Dokumentname und Dateiendung, 8 Zeichen vor dem Punkt und 3 Zeichen dahinter (für die Dateiendung) erlaubt. Bei ausführbaren Java-Applets, die zwingend die Dateiendung .class erfordern, müssen Sie diese Regeln allerdings brechen.

Dateiendungen - zurück nach oben

Hierbei gilt generell: halten Sie unbedingt die üblichen Dateiendungen ein. Moderne WWW-Browser erkennen einige Dateitypen zwar auch an ihrem Inhalt, aber im Hinblick auf Fehlerfreiheit sollten Sie immer die üblichen Dateiendungen verwenden.

• HTML-Dateien erhalten entweder die Endung .html oder .htm (DOS-kompatibel).

• GIF-Grafiken erhalten die Endung .gif

• JPEG-Dateien erhalten die Endung .jpg

• Java-Applets erhalten die Endung .class

• Separate JavaScript-Dateien erhalten die Endung .js

• Separate CSS-Style-Sheet-Dateien erhalten die Endung .css

• Auch andere Dateitypen sollten ihre Standardendung erhalten.

Default-Datei bei WWW-Servern - zurück nach oben

Die meisten heutigen WWW-Server sehen einen bestimmten HTML-Dateinamen als Datei für die "Einstiegsseite" vor. Meistens ist das der Name index.html oder index.htm, manchmal auch welcome.html bzw. welcome.htm oder default.html bzw. default.htm. Bei einigen Anbietern können Sie auch selbst einen beliebigen Dateinamen als Default-Dateinamen bestimmen (z.B. bei Compuserve-Homepages).

Der Default-Dateiname hat den Vorteil, daß die WWW-Adresse keinen HTML-Dateinamen mehr braucht und kürzer wird. Viele Adressen lauten ja einfach http://www-xy.com/ oder http://www.xy.net/verzeichnis/ - ohne weitere Angabe einer bestimmten HTML-Datei. Daß beim Aufruf einer solchen Adresse dennoch eine bestimmte HTML-Datei geladen wird, liegt eben daran, daß es eine Datei mit einem Namen gibt, die der WWW-Server als Default-Dateiname gespeichert hat.

Erkundigen Sie sich bei Ihrem Provider, ob er einen Default-Dateinamen für Verzeichnisse anbietet, und wenn ja, welchen. Erstellen Sie Ihr Projekt dann so, daß die Einstiegsseite diesen Dateinamen hat und untergeordnete Seiten auf diese Datei zurückverweisen.

zurück nach oben