Inhalt | Weiter zu Kapitel 3


Kapitel 2: Technische Standards

a. Technische Grundlagen des Internets
b. Die Sprachen des Internet
c. Farbmodelle
d. Pixelbasierte Bildformate
e. Vektorbasierte Bildformate
f. Audioformate
g. Bildschirmaufbau: Das Pixel-Problem (PC/Mac)
h. Zusammenfassung



a. Technische Grundlagen des Internets

- Die Entstehung des Internets

Das Internet geht auf Entwicklungen in den 60er Jahren zurück. Die Grundidee stammt aus der militärischen Entwicklung. Die Schaffung eines dezentralen Netzwerks erschien im kalten Krieg ein Vorteil zu sein, da ein solches Netz schwerer angreifbar ist.
Aus dieser Idee entwickelte sich später das eher wissenschaftliche ARPA-Net, und daraus dann – von Studenten initiiert – das Usenet, die Basis der Newsgroups, ein noch heute genutzter Dienst, wenn auch nicht mehr mit der Popularität wie einst.

In Europa verfolgte man die Entwicklung, wollte aber nicht auf das amerikanische TCP/IP-Protokoll setzen. Man arbeitete an einem auf ISO-Normen basierendem Netz. Dem amerikanischen Siegeszug musste man sich aber mit dem EuropaNet beugen, in dem man das TCP/IP-Protokoll akzeptierte.
Heute ist TCP/IP Standard.

Das Internet ist ein Netzverbund, das durch ein standardisiertes Protokoll miteinander kommuniziert.
Die Schaffung eines Standards war Grundlage und Notwendigkeit des Internets.


- TCP/IP-Protokoll

TCP bedeutet »Transmission Control Protocol« (Protokoll für Übertragungskontrolle), IP »Internet Protocol«. Alle Daten im Internet werden über diese Protokolle verwaltet, wobei TCP die Daten als Pakete definiert und das IP die Adresse bestimmt. Fast wie bei der Paketpost oder besser Frachtpost. Auch dort muss der Transporteur wissen, welche Lieferung an wen geht und wie viele Teile die Lieferung umfasst. Im Lkw können die Einzelteile dabei durchaus aus Platzgründen an verschiedenen Stellen geladen sein, Hauptsache sie erreichen den Empfänger und können dort wieder korrekt zusammengesetzt werden.


- Client-Server-Technologie und DNS

Das Internet basiert auf der sog. Client-Server-Technologie, d.h. es gibt Clients und Server: Die Clienten fragen und die Server antworten, wobei die Server durch ihre Struktur dauernd mit anderen Servern kommunizieren und so ggf. Antworten von anderen Stellen beziehen können. Ausnahmen dieser Regel sind FTP-Dienste und die sog. PUSH-Technologie. Hier sollte es Servern ermöglicht werden, selbstständig Daten auch ungefragt zu senden. Die Entwicklung steckt derzeit aber in der Sackgasse – und das ist auch gut so, wie viele meinen. Denn genau das wollen viele ja nicht: Ungefragt Informationen erhalten.

Das Internet hätte sich wohl nie durchgesetzt, wenn man das Adressierungsproblem nicht in den Griff bekommen hätte. Vielleicht hätte man sich noch die eine oder andere IP-Adresse merken können, aber erst die Einführung des Domain-Name-Service (DNS) brachte den Durchbruch. Dabei wird einfach ein Name in eine IP übersetzt – und auch dafür braucht es Standards. Einer der bekanntesten Standards ist dabei die TLD (Top Level Domain). Die Anzahl der TLDs wie .de .com .net ist dabei streng limitiert und die Einführung neuer wie .eu ist ebenso schwierig wie umstritten (wie bspw. .travel).
Und die Namen vor der TLD sind mittlerweile heiß begehrt und ein juristisches Schlachtfeld ... doch dazu später mehr.


- WWW und E-Mail

Was fehlt also noch? Richtig, die Anwendung! Die reine Existenz eines Netzes sorgt ja noch nicht für Erfolg. Zwar konnte man auf der Basis Daten austauschen, also versenden und empfangen, aber das macht das Internet ja noch nicht richtig für die Masse interessant. So geht es übrigens zur Zeit ebenso UMTS wie dem interaktiven Fernsehen. Auch wenn es eine noch so tolle Technik ist: Keiner weiß, wozu man es gebrauchen kann. Es fehlt die Killerapplikation, wie es SMS für das Handy ist, oder eben WWW (World Wide Web) und E-Mail für das Internet.

Gerade E-Mail ist dabei – bei aller Entwicklung – in vielen Belangen noch in den Kinderschuhen. Zwar funktioniert der Dienst tadellos und bestimmt das heutige Geschäftsleben, doch fehlen wesentliche Eigenschaften. So ist es mit der Sicherheit (Datenschutz) nicht weit her und auch Ansätze wie PGP (Pretty Good Privacy) wollen sich einfach noch nicht durchsetzen. Dazu kommt das Gestaltungsproblem: E-Mails sind eigentlich nicht gestaltbar! Zwar gibt es zwischenzeitlich die Möglichkeit auch HTML oder RTF zu gestalten, doch wer sich die Ergebnisse auf verschiedenen Systemen und Programmen angesehen hat, wird es meist wieder sein lassen. Es fehlt der Standard!
Der einzige Standard, der sich durchgesetzt hat, lautet MIME. Doch regelt dieser mehr technisch den Inhalt und die Art der Versendung von Anhängen. Es fehlt an einer einheitlichen Interpretation der E-Mails beim Empfänger. Und hier scheiden sich die Geister.

Das Thema E-Mail-Gestaltung wäre allein einen Vortrag und eine Diskussionsrunde wert. Der Streit zwischen ASCII-Aktivisten und Mail-Gestaltern geht seit Jahren. Die Aussage der Puristen: E-Mail sei nun einmal ein reines Informationsübertragungsmittel - da kontern die anderen: Auch die Gestaltung sei doch ein Teil der Information!
Da setzt man viel Geld und Mühen in einen Style-Guide der eigenen CI und per E-Mail wird Kraut und Rüben versandt oder doch zumindest empfangen.
Klärung des Problems: Noch offen und eine Lösung nicht in Sicht

Beim Thema WWW, dem jüngsten der Internet-Dienste, ist man da einen Schritt weiter. Entgegen der hartgesottenen Technik-Puristen-Fraktion drängte das Verlangen nach Gestaltung alle Bedenken vom Tisch. Bedenken, die vor allem mit Bandbreite und Sicherheit zu tun haben – also durchaus auch nachvollziehbare Gründe.
Die Grundlagen des WWW sind wiederum Standards. URL, http und HTML sollen da genannt sein. Das Protokoll heißt http (Hypertext Transfer Protocol) und sorgt für die Verständigung im Frage-Antwort-Dialog. Die URL (Universal Resource Identifier) weist den Weg und HTML (Hypertext Markup Language) ist die gemeinsame Sprache.

Weitere Dienste neben WWW und E-Mail sind übrigens FTP, Telnet oder Gopher, wobei gerade Gopher durchaus Chancen hatte und bereits weit verbreitet war.
Gopher ist eine Art »Suchdienst in Datenbeständen«, der aber an einem letztendlich scheiterte: An fehlenden Standards.
Gopher bietet keine Möglichkeit den Suchdienst individuell zu gestalten oder sonst zu modifizieren.


- Browserentwicklung und die W3C

Durch den WWW-Dienst stand dem Erfolg nichts mehr im Wege. Als einer der Ersten ist der Brite Tim Berners-Lee in den 80ern zu nennen. Man schreibt Tim Berners-Lee sogar das erste Weblog zu, da er auf seiner Website die Entwicklung des WWW wie in einem Tagebuch protokollierte, über die neuesten Website-Entwicklungen berichtete und sie kommentierte. Nach den Ideen des Tim Berners-Lee sollte die Software, die das WWW interpretieren kann, eine Lese- und Schreib-Software werden, damit jeder an allen Texten mit schreiben kann, ähnlich wie das der Idee nach heute Wikipedia realisiert. Doch die Software, die sich durchsetzte, war eine reine Lesesoftware: Der Browser

Und jetzt endlich kommen wir in die Rubrik Gestaltung und Design! Denn der Browser war und ist es, der im WWW für Faszination und Verzweiflung sorgt und eine ganze neue Designer-Zunft ins Leben rief: Den Webdesigner

Ein junger Mann namens Marc Andreessen entwickelte Mosaic und später den noch heute bekannten Netscape-Browser. Mit Netscape gelang der Durchbruch in den Jahren 1995/96. Netscape ermöglichte auf Basis des WWW die Gestaltung von grafischen Oberflächen auf Basis des WWW. Doch gerade Netscape war auch kein Waisenkind: Zum einen war Netscape und insbesondere Mr. Andreessen immer schon Business-orientiert und strebte nach einer Monopolstellung und damit wirtschaftlichen Erfolg, zum anderen hielt man sich selbst nur so weit nötig an allgemeine Standards.

Der schlafende Riese Microsoft erwachte spät, aber er erwachte und kam mit Macht. Nach zwischenzeitlichen 90% Marktanteil von Netscape findet man heute den Browser nur noch im einstelligen Prozentbereich in den Statistiken. Dafür sorgte Microsoft, die ihren Browser, den Internet Explorer, kostenfrei auf den Markt warfen. Ein Desaster für ein gewinnorientiertes Unternehmen wie Netscape.
Eines hatten der Netscape-Browser und der Internet-Explorer aber immer gemein: Sie hielten sich nicht an Standards – oder besser: Nur an die eigenen. Und das brachte und bringt Webdesigner bis heute zur Verzweiflung. Warum? Weil es so gut wie ausgeschlossen war, mit einer HTML-Programmierung auf allen Browsern das identische Ergebnis zu erzielen, ähnlich wie das ja heute noch bei E-Mails ist.

Und auch wenn mittlerweile der Internet Explorer, trotz des neuen Emporkömmlings Firefox, auf einer Basis von 80 bis 90% Marktanteil ruht, so hat sich doch gezeigt, dass ein Bedürfnis nach Standards besteht: Und zwar seitens der Designer!

Das geistige Erbe von Tim-Berners Lee, der die Wichtigkeit von Standards für das Internet immer proklamierte, übernimmt heute die W3C, ein Konsortium, das mehr und mehr Einfluss gewinnt und immer mehr Druck auszuüben vermag, was die Durchsetzung gemeinsamer Standards angeht. Ein Ergebnis ist dabei unter anderem »Barrierefreiheit« – ein Standard, der durch die BITV zwischenzeitlich auch gesetzlich normiert ist.


|




b. Die Sprachen des Internet: SGML, HTML, CSS, XML

Die Sprache des Internet ist HTML, dabei wird stets darauf Wert gelegt, dass HTML keine Programmiersprache ist, sondern eine Beschreibungssprache. HTML ist dabei ein Derivat aus SGML, sozusagen eine abgespeckte Variante.

Der Vorteil von HTML ist zum einen die Einfachheit, aber auch der Umstand, dass es ein Klartextformat ist, also eine Sprache, die mit jedem herkömmlichen Texteditor erstellt und bearbeitet werden kann.

HTML zeichnet aus, dass heißt HTML weist Text Attribute zu. Das kann ebenso eine Formatierung, ein beigefügtes Objekt oder auch ein Bild sein.
Und HTML eignet sich für Verweise, eine der Grundprinzipien des WWW, die sog. »Links«.

Auch hier ist die Verständigung auf einen gemeinsamen Standard wichtige Grundlage und so wurden Spezifikationen erarbeitet. Aktuell ist die Version HTML 4.01 - bereits in der Vorgängerversion wurde die Integration von CSS (Cascading Stylesheets) beschlossen, eine Ergänzungssprache, die es ermöglicht, Teilbereiche der Formatierung zentral auszulagern.

Aber es wird auch hier noch komplexer: XML. XML ist – einfach ausgedrückt - eine Definitionssprache für Auszeichnungssprachen. Noch vereinfachter ausgedrückt: Mit XML kann man sein eigenes HTML definieren.

Wozu das Ganze? HTML ist genial einfach, aber zu einfach für manche komplexe Bedürfnisse. Bspw. Blogs – dort wird über eine XML-Datei, die letztendlich wieder eigene Auszeichnungen enthält, ein Austausch der Informationen ermöglicht. Hier kann man sich über einen Reader die XML-Datei einlesen lassen und hat so immer die neuesten Infos parat. Damit ein Reader aber wiederum die XML-Datei verstehen kann, muss auch diese einem Standard folgen. Bekanntes XML-Format ist derzeit RSS (»Really Simple Syndication«), das bereits in der Version 0.91 seit Netscape bekannt war, aber erst heute im Weblog-Zeitalter den Durchbruch schaffte. Aber auch hier geht die Entwicklung weiter zu ATOM und anderen Formaten.


|




c. Farbmodelle

Vorgestellt sollen hier zwei Farbmodelle werden, mit denen man häufig konfrontiert wird: RGB und CMYK

RGB setzt auf die additive Mischung der Grundfarben Rot, Grün und Blau. Da jeder Grundfarbe bei einer 24-Bit-Darstellung ein 8-Bit zu Grunde liegt, ergeben sich bis zu 256 Farbwerte. Angegeben werden diese Werte als Tripel (rrr,ggg,bbb), wobei schwarz als »0,0,0« und weiß als »255,255,255« interpretiert werden. Jeder kann sich selbst fragen, wo die 256te Zahl geblieben ist.

Das CMYK-Farbmodell setzt auf die Substraktion der Grundfarben Cyan (C), Magenta (M), Gelb (Y von Yellow) und Schwarz (K von BlacK). Um hier ein Weiß zu erhalten, muss man alle Farben ausschalten. Schwarz wird benötigt, da alle Farben zusammen kein reines Schwarz ergeben.

Das CMYK-Farbmodell wird überall dort eingesetzt, wo die Farbquellen, zum Beispiel Papier, Licht absorbieren. Das RGB-Modell überall dort, wo Licht direkt (ohne Reflexion) in das menschliche Auge gelangt, also bei Farbquellen, welche selbst Licht aussenden (Lichtfarben) – z.B. Monitore.

In der HTML-Programmierung wird ein RGB-Wert immer als Hexadzimal-Angabe eingesetzt. Dabei setzt man hier auf eine 6-stellige Definition: #CC0033


0 (entspricht dezimal 0)
1 (entspricht dezimal 1)
2 (entspricht dezimal 2)
3 (entspricht dezimal 3)
4 (entspricht dezimal 4)
5 (entspricht dezimal 5)
6 (entspricht dezimal 6)
7 (entspricht dezimal 7)
8 (entspricht dezimal 8)
9 (entspricht dezimal 9)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)


Die ersten beiden Stellen stellen den Rot-Wert der Farbe dar, die zweiten den Grünwert, und die letzten beiden 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.



VGA-Farben | Quelle: http://de.selfhtml.org/


|




d. Pixelbasierte Bildformate: TIFF, PNG, GIF und JPEG



Pixelbasierte Bildformate sind Rastergrafiken (Bitmaps) die aus einzelnen Pixeln bestehen.

Die bekanntesten pixelbasierten Formate im Internet sind GIF und JPEG (oder JPG) und dies einfach deshalb, weil sie von allen bekannten Browsern und Software unterstützt werden.

GIF hat der Vorteil der verlustfreien Kompression, der Darstellung von Transparenz und der Option »Interlaced« (schichtweises Laden der Grafiken). Dazu kommt noch die Möglichkeit Animationen zu realisieren. Auch hier gibt es noch einmal unterschiedliche Standards, wobei das 89er-Format wohl am weitesten verbreitet ist.
Das Problem: GIF kann nur 256 Farben (je pro Datei) darstellen, eignet sich daher mehr für typische Web-Grafiken wie Buttons oder Symbole.

JPEG bietet den Vorteil, pro Bild bis zu 16,7 Millionen Farben speichern zu können, dazu kann beim Speichern sowohl die DPI-Dichte (max. 100 dpi) als auch die Kompression eingestellt werden.
Das Problem: JPEG hat vor allem bei scharfen Farbübergängen Schwächen. Dafür zeigt es sein Stärken bei der Darstellung von Fotografien.

Da es im Bereich Multimedia/Internet fast immer notwendig ist, mit Kompression zu arbeiten, scheiden verlustfreie Formate wie Bitmap daher aus. Mögliche Lösungen wie TIFF und PNG scheiden ebenso aus: Zwar kann PNG viel, wie eine verlustfreie Kompression (wenn auch nicht so effizient wie JPEG), dazu Farbtiefe plus Transparenz und auch die Interlaced-Option sowie das Speichern von Zusatzinformationen (wie den Gamma-Wert), doch ist die Unterstützung durch Internet-Software noch nicht 100% garantiert. Der Internet Explorer soll erst ab Version 7, so hörte man vorab, die Transparenz bei PNGs unterstützen.

TIFF wäre in jedem Falle qualitativ überlegen, kann es nahezu beliebig viele Zusatzinformationen speichern und unterschiedlichst komprimieren. Diese Beliebigkeit ist aber auch das Problem für die Anwendung im Internet. TIFFs können nicht direkt in eine HTML-Datei eingebunden werden über den IMG-Tag.


Vergleich TIFF / JPG (hier am Bspe. zweier JPGs mit unterschiedlicher Kompression, wobei vor allem das rechte typische Spuren zeigt):




Vergleich JPEG / GIF:




|




e. Vektorbasierte Bildformate: Flash

Das Dilemma der Webdesigner ist damit die Kompression und die fortwährende Wahl zwischen »Not und Elend«.

Vektorbasierte Bildformate versprechen entscheidende Vorteile:
Bilder werden als geometrische Formen interpretiert und aus den weiteren Attributen beim Benutzer direkt errechnet. Damit spart man Ladezeit und man kann zudem nahezu beliebig skalieren.

Flash von Macromedia hat sich hier weitgehend durchgesetzt. Das zuletzt aufkommende und auch vom W3C standardisierte Format SVG ist noch nicht so weit verbreitet, daher soll es bei einer Erwähnung an dieser Stelle bleiben.

Bei Grafiken ist Flash gegenüber pixelbasierte Bildformate daher im Vorteil, bei Fotografien kann Flash dagegen keine Alternative sein, da hier viel zu viele Einzelinformationen vorhanden sind, die sich nicht in eine verlustfreie Vektorgrafik umsetzen lassen.



Vergleich Pixelgrafik / Vektorgrafik Farbschwelle 1, kleinste Fläche: 10 / Vektorgrafik Farbschwelle: 10, kleinste Fläche: 100 | Quelle: unbekannt
(Auch hier ist die Darstellung im Web als JPG leider nicht sonderlich aussagekräftig)


Gleiches Problem im Übrigen bei geglätteten Schriften. Auch hier gibt es sichtbare Verluste bei der Umwandlung einer Grafik in Flash.

Flash wird auch für die komplette Website-Gestaltung eingesetzt. Dies löst gleich mehrere Probleme, wie bspw. das Schriftenproblem (siehe unten) und die Probleme bei der Interpretation des HTML-Codes in verschiedenen Browsern. Auf die Vor- und Nachteile soll später noch einmal eingegangen werden.
Unbestritten ist die Bedeutung von Flash dagegen bei der Integration von Multimedia-Effekten. Bewegungen, und seien es nur das sanfte Öffnen und Schließen der Navigation, lässt sich nur mit Flash richtig lösen. Ebenso wie Sound-Effekte oder ganze Spiele.


|




f. Audio- und Videoformate

Der Vollständigkeit halber ein Blick auf weitere Multimedia-Elemente, wie sie insbesondere im Internet angetroffen werden.
War es lange Zeit aufgrund der begrenzten Bandbreite generell nicht weit verbreitet, Ton- und Bildelemente auf Webseiten einzusetzen, kommen mit zunehmender Verbreitung von DSL auch diese Elemente vermehrt ins Internet. War es früher höchstens ein MIDI-File oder ein kleines WAV, so werden heute auch Video-Clips gezeigt, Trailer vorgestellt oder man kann den Hintergrundsound sogar gänzlich selbst bestimmen und modulieren.

Bei der Wahl des Formats spielt auch hier die Kompression die entscheidende Rolle. Das Ziel: Maximale Kompression bei geringsmöglichem Qualitätsverlust

»Wave« steht dabei für unkomprimierte Audiodaten am PC, als Pendant vielleicht AIFF von Apple zu nennen.

Durchgesetzt im Audiobereich dürfte sich aber wohl das mp3-Format haben, hart bedrängt von Streaming-Formaten, doch dazu unten mehr.

Im Videobereich stehen sich die MPEG-Formate vor allem den Streaming-Formaten gegenüber. Streaming unterscheidet sich dabei durch einen Ladezeitenvorteil, denn der Betrachter lädt die Datei - während er es betrachtet - kontinuierlich nach und der User kann selbst bestimmen, wie lange er zusieht bzw. muss nicht warten bis die Datei komplett geladen wurde.

Die Wiedergabe eines Videos in einer Website erfordert immer das Starten eines eigenen Programmes (außerhalb des Browsers oder als PlugIn) wie den Windows Media Player, Quicktime oder den Real Player.

Bei der Integration von Video-Elementen hat eine Websitegestaltung in Flash Vorteile. Die Integration eines Players in eine konventionelle HTML-Website (ohne Flash) gestaltet sich in der Regel als nicht unproblematisch, benötigt es die Aktivierung eines Java-Applets oder eines ActiveX-Steuerelements. Zudem ist man in der Gestaltung stark eingeschränkt.


|




g. Bildschirmaufbau: Das Pixel-Problem (PC/Mac)


Ein weiteres Problem erscheint oft als Phänomen. Zwar ist meist bekannt, dass Monitore am PC 96 dpi und am Macs 72 dpi ausgeben, doch weniger bekannt sein dürfte, dass sich dadurch - bei gleicher Bildschirmauflösung (wie 1024x768) - Unterschiede in der Darstellung ergeben!

Bsp.: 1024 Bildpunkte brauchen am Mac bei 72 dpi rechnerisch einen Monitor von ca. 36 cm Breite. Der PC braucht bei 96 dpi rechnerisch ca. 27 cm Breite. Bei gleich großem Monitor wird bei gleicher Bildschirmauflösung beim PC das Bild also skaliert, da sonst nur 75% des Bildschirms gefüllt wäre.

Das bedeutet, dass Inhalte (und auch Schriften) am PC prozentual größer dargestellt werden - bei gleichem Monitor und gleicher Auflösung!
Das sorgt häufiger für Verwirrung als gedacht und macht es dem Webdesigner auch schwer, für einen Kunden, der häufig mit PCs unterwegs ist, via Screenpräsentation zu entwerfen, da das visuelle Erleben am Bildschirm ohne manuelle Anpassung ein anderes ist. (Dies ist bspw. durch eine Anpassung der dpi-Vorgaben im Adobe Reader möglich. Bsp. Adobe Reader 7: Grundeinstellungen > Seitenanzeige > Auflösung)


|




h. Zusammenfassung dieses Kapitels

Standards bestimmen die Gestaltung durch die technischen Vorgaben (Gegebenheiten). Der Gestalter muss z.B. bereits bei der Konzeption beachten, welches Bildformat für sein Vorhaben geeignet ist und ob die Gestaltung im Zusammenspiel von Ladezeiten und dargestellter Bildschirmqualität realisierbar ist. Auch die Anzahl der Farben eines Bildes oder einer Grafik, die Konturschärfe und die Größe in Pixel sind zu beachten. Beim Einsatz multimedialer Elemente - oder generell von Flash - muss klar sein, dass der Besucher hierfür bestimmte PlugIns benötigt und(!) diese Elemente für Suchmaschinen weitgehend unsichtbar sind.


|



Inhalt | Weiter zu Kapitel 3