Seitendesign
So paradox es klingt, aber einem flüchtigen Surfer sind schriftliche
Informationen zunächst eher lästig, weil sie Zeit kosten. Die
Information wird erst dann interessant, wenn der Surfer seine Seite
gefunden hat. Jeder Surfer, der auf der Suche nach einer Website zu einem
bestimmten
Thema ist, darf als flüchtiger Surfer angesehen werden, weil er zunächst
stichprobenartig kontrolliert, ob die Website auch das richtige
Thema behandelt. Die Startseite nimmt eine besondere Stellung ein, weil
es die erste Seite
ist, die der Surfer sieht. Deshalb ist es wichtig, die Startseite
schnell zu gestalten: Schnell sowohl was die Ladezeit anbelangt, aber ganz
besonders
was die Informationsübertragung betrifft: Die Informationen müssen
in möglichst kurzer Zeit aufgenommen werden können.
Die Struktur der Site muß von der Startseite aus zu erkennen sein.
Weiterführende Artikel zu auf der Startseite angesprochenen Themen
m üssen leicht erreichbar sein.
Die Information Ihrer Seite wird im wesentlichen durch folgende
Elemente übertragen:
Im ersten Augenblick des Ladens durch die Seitenstruktur, Farbgestaltung und die Navigationsleisten. Bei genauer Betrachtung der Seite durch den Besucher durch Grafiken, Überschriften und schließlich den eigentlichen Text.
Seitengestaltung, Farbgestaltung, Überschriften und Text
Die Startseite einer Website muß als erstes die Information übertragen. Sie muss sich nicht nur schnell laden (max. ca. 30 KB bei Firmenhomepages), Sie muss von flüchtigen Surfer sofort verstanden und schnell gelesen werden können. Der Name der Seite sollte passend gewählt sein. Seitengestaltung und Farbwahl sollten sofort erklären, um welche Art Seite es sich handelt. Die Navigation sollte die Seitenstruktur wiedergeben und sofort als solche zu erkennen sein.
Seitengestaltung
Es wäre vermessen, für Seitengestaltung Regeln aufstellen zu wollen. Natürlich sollte keine seriöse Businessseite im 70er-Jahre Retrolook auftreten, Seiten mit Musikclips füt junge Leute sollten nicht mit 3 streng getrennten Blöcken in taubenblauen Design auftreten. Fest steht, die Funktion der Elemente einer Seite sollte sofort erkennbar sein und über die ganze Seite konstant bleiben.
Farbgestaltung
"Grau, teurer Freund ist alle Theorie, und Grün des
Lebens goldner Baum."
Mephisto in Goethe´s Faust
Jeder von uns versteht auf Anhieb, worum es geht. Wir ordnen intuitiv die assoziierte
Symbolik den jeweiligen Farbwörtern zu. Wissenschaftliche Untersuchungen
haben ergeben, dass wir in unterschiedlich beleuchteten oder auch gefärbten
Räumen ganz differenzierte Reaktionen zeigen: In Rot gestrichenen Räumen
uns Temperaturen um etwa 3° C wärmer als in blaugestrichenen. Auch
Zeitspannen erscheinen uns in in roten Räumen länger, unser Reaktionsvermögen
steigt in rot beleuchteten Räumen um etwa 12%! Der richtige Gebrauch von
Farben kann also den Aufnahmeprozess unterstützen. Diese Effekte kann
man bei der Wahl seiner Farben nutzen:
Mit der richtigen Farbgestaltung Ihrer Website können
Sie auf manche Erklärung verzichten!
Lange bevor der Benutzer sich mit dem Inhalt Ihrer Webseiten
beschäftigt, nimmt er deren farbliche Gestaltung wahr. Es
ist jedoch hoffnungslos, Farben zu finden, die allen eb-Benutzern
gefallen. Farben haben zwar eine Symbolik, werden aber trotzdem
extrem subjektiv aufgenommen. Ein für uns seriös erscheinendes
blau kann von einem anderen Benutzer extrem negativ beurteilt
werden. Es ist jedoch möglich, einen grossen Prozentsatz
der Besucher zufridenzustellen, wenn man einige Grundregeln beachtet:
Farben für den Hintergrund:
Sie wissen es selber: Gute Businessseiten sind nicht orange! Farben lassen
sich anhand Ihrer Temparatur klassifizieren.kalt-neutral-warm. Warme Farben
sind Rot, Orange, Gelb. Diese Farben sind eher für Seiten geeignet,
bei denen ein Gefühl der Energie erzeugt werden oder Aktionen provoziert
werden sollen. Informative Seiten sollten diese Hintergründe meiden,
sie ermüden den informationssuchenden Besucher zu stark. Als kalte gelten
Farben wie blau und blaugrün. Diese Farben wirken eher entspannend und
erhöhen die Aufmerksamkeit des Besuchers. Warme farben treten auf kalten
Hintergründen deutlicher hervor.Ausserdem wirkt blau in allen Kulturkreisen
seriös! Neutral wirkt dagegen Schwarz, Grau und Weiß.
Farben für Grafiken, Texte und Überschriften:
Grafiken sollten eine mittlere helligkeit aufweisen: dunkler (oder heller)
als der hintergrund aber wiederum heller (bzw. dunkler) als Text. Text sollte
die dunkelste oder hellste Farbe aufweisen. Wichtig ist auch, daß der
Kontrast zwischen Text und Hintergrund ausreichend hoch ist, es erlaubt ein
ermüdungsfreies Lesen.
Farben als Bindeglied:
Benutzen Sie für analoge Sachverhalte imme die gleich Farbe (z.B. für
bestimmte Produkte oder Produktkategorien), ob Text, Schaubilder oder Grafiken.
Farben für Navigation:
Was für Produktkategorien gilt, gilt auch für die Navigationselemente.
Achten Sie darauf, das Navigationselemente in den einzelnen Navigationsbereichen
auch farblich immer gleich gestaltet sind.
Farbsymbolik:
Ein Hersteller von Medizinischen Gerätschaften beschäftigt sich in seinem
Internetauftritt mit dem Thema "Gesundheit". Hier könnten Farben
eingesetzt werden, die wir mit dem Begriff "Gesundheit" assoziieren.
In der Tat sind es die Farben Grün und Rot und ein wenig Rosa und Blau.
Wir würden
in diesem Fall der Seite ein Aussehen in Kombination Blau Weiß (Hintergrund,
Weiß als neutrale Farbe für Texte) und blaugrün(Navigation)
geben.
Rot: Aktivität, Dynamik, Energie, Intensität, Liebe Leidenschaft,
Macht, Gefahr, Blut, Feuer, Krieg.
Blau: Passive Farbe, Ruhe,Kälte,Ferne, im Mittelalter die
Farbe des Glaubens, Blau mit Schwarz oder mit der Komplementärfarbe Orange
getrübt: Trauer Furcht.
Grün: entspannend, stabil, idyllisch, Hoffnung. Dunkles Grün:
Ruhe und Abgekehrheit. British Green: Aristokratisch.
Gelb: Licht! Auf wesl. Kulturen kindlich und unschuldig, Freude
und Glück. Getrübt signalisiert es Neid, Lüge, Falschheit. Mit Schwarz: Gefahr.
In asiatischen Kulturen das Heilige.
Graphiken
Ein Bild ist die erste Wahl, wenn es gilt, Informationen in möglichst kurzer Zeit zu übertragen. Bilder sind sehr beliebt, denn sie informieren in Sekunden:
"Bilder werden fast immer zuerst betrachtet"
" Bilder werden schneller verarbeitet. Die zentrale Aussage eines Bildes
kann mit einem einzigen Blick erfasst werden"
" Bilder sind glaubwürdig. Sie überzeugen schnell"
" Bilder werden schneller gelernt"
Quelle: Erfolgreiche Anzeigen, Meyer-Hentschel Management Consulting, Wiesbaden
1993, S. 18
Zur Information der Blickverlauf des Auges beim Betrachten einer Seite:
Bild vor Text
Personen vor Landschaften oder Hintergründen
Gesichter vor dem Körper; Auge, Mund und Nase zuerst.
Optisch auffällige Elemente vor unauffälligen
Elementen.
(Auffällig sind große, bunte, zentral platzierte Elemente. Außerdem
Elemente mit hohem Kontrast zum Hintergrund.)
Bei all dem bewegt sich das Auge am liebsten nach unten und nach rechts. Der "Rückwärtsgang" wird
vermieden.
Bilder sind das Instrument, eine Startseite schneller zu machen. Selbst wenn
es sich "nur" um das Portrait des Firmeninhabers handelt: Bei professioneller
Aufnahme und Umsetzung bringt es der Seite einen beträchtlichen Gewinn.
Es spricht sehr viel dafür, gerade Startseiten nicht nur mit farbigen
Flächen und Text zu versehen, sondern auch mit einem geeigneten Bild.
Ein Bild kann eine aktivierende Wirkung ausüben und allein
aufgrund dieser Wirkung die Attraktivität der Seite steigern.
Das Bild muß sich leicht merken lassen, d.h. es muß konkret und nicht
zu komplex sein. Praktische Prüfung:
Wenn man den Inhalt des Bildes mit einem nicht zu langen Satz (max. 15 Wörter)
vollständig beschreiben kann, dann ist das Bild konkret und nicht zu komplex.
Der Erinnerungswert kann gesteigert werden, wenn das Bild den Produktnutzen/Produktvorteil
oder eine andere zentrale Information zeigt. Besonders erfolgreiche Erinnerungswerte
haben Bilder, die den Nutzen visualisieren.
Die Assoziationen (Erinnerungen, Eindrücke, Gefühle, Farb-Assoziationen),
die durch das Bild ausgelöst werden, sollten positiv sein.
Im Internet können folgende Graphikformate benutzt werden:
GIF:
Das älteste Format im Web ist gif (Grafic Interchange Format), welches
schon 1987 im Auftrag des Onlinedienstes Compuserve entwickelt wurde.
gif eignet sich hervorragend zum Komprimieren von Grafiken mit wenigen
Farben und zusammenhängenden Farbflächen (z.B. Logos, Buttons
u.ä.)
Weitere Vorteile des gif-Formats: Es können beliebige Farben der
Ausgangsgrafik als transparent definiert werden. Das Ergebnis ist
dann ein z.B. freigestelltes Bild, welches Sie problemlos auf jeden Hintergrund,
auch mit Farbverläufen, platzieren können. Diese Variante des gif-Formats
heißt korrekt "gif89a".
Außerdem können (und sollten) gif's im "Interlaced"-Modus
gespeichert werden. Ergebnis beim Betrachter mit seinem Browser ist: Das Bild
baut sich stufenweise von grob bis fein auf. Subjektiv hat der Betrachter das
Gefühl des schnelleren Ladens, da er die Grafik schon frühzeitig
erkennen kann, objektiv ist die Datei aber sogar etwas größer, aber
nur wenige Bytes.
Auch die beliebten animierten Grafiken im Web sind gif-Dateien (animated gif),
diese können z.B. mit Macromedia Fireworks, Adobe Image Ready (im Lieferumfang
von Photoshop seit Vers. 5.5) und vielen speziellen Free- und Shareware "Gif-Animations-Programmen" erstellt
werden.
Der große Nachteil des gif-Formats liegt in seiner Farbbeschränkung:
Es können maximal 256 Farben je Grafik gespeichert werden. Damit ist es für
alle Bilder mit Farbverläufen, z.B. Fotos, untauglich.
PNG:
(gesprochen "ping") steht für "Portable Network Graphics" und
ist die Alternative und Nachfolger des gif's. Dieses Format
kann 16,7 Mio Farben darstellen, komprimiert sehr gut und verlustfrei und ist
im Gegensatz zu gif für die Softwarehersteller ohne Lizenzgebühren
implementierbar.
Leider unterstützen bisher nur die neuesten Browser von Netscape
und Microsoft die Darstellung des png-Formats. Deswegen ist zum jetzigen
Zeitpunkt von einer Verwendung im Web noch abzuraten.
JPEG oder JPG:
Das jpg-Format (Joint Photographic Experts Group) ist der "Allrounder":
Dieses Format kommt zum Einsatz, wenn es sich um Bilder mit vielen Farben handelt,
also grundsätzlich für Fotos und für alle Grafiken mit
Farbverläufen. Da jpg immer mit 16,7 Mio. Farben speichert,
können mit diesem Format solche Bilder am besten dargestellt werden.
Ähnlich wie der interlaced-Modus beim gif-Format funktionieren die "progressiven
JPEG-Grafiken": es wird erst eine undeutliche Fassung des Bildes im Browser
angezeigt, die Details werden nach und nach sichtbar.
Text
Unmissverständliche Überschrift
Ist die Überschrift unmissverständlich formuliert und lenkt sie
den Leser in die richtige Richtung? Wenn die Überschrift der Startseite
eines Stromerzeugers "Wir füllen Ihre Wanne mit heißem Wasser" lautet,
so könnte dies missverstanden werden.
Schnelle Formulierungen
Werden in der Überschrift "langsame" Formulierungen
vermieden? Langsame Formulierungen sind Wörter mit "un..." und
Passivsätze.
Beispiel: "So unvergleichlich wie unsere Haut". Besser:
So einzigartig wie unsere Haut.
Beispiel: "Sogar tiefe Falten werden reduziert". Besser:
Reduziert sogar tiefe Falten.
Hinweis auf den Nutzen
Weist die Überschrift auf den Nutzen (auch Zusatz-Nutzen)
für den Kunden hin? Informationen über persönliche
Vorteile sind für die meisten Menschen einfach interessant.
Wer schnell hohe Erinnerungswerte erzielen will, sollte den Produkt-Nutzen
erwähnen.
Viele Substantive
Ist der relative Anteil von Substantiven in der Überschrift
hoch? Je mehr Substantive, desto besser.
Keine Frage-Headline
Ist eine Frage-Überschrift vermieden? Überschriften in
Frageform bringen eher Nachteile. Sie zielen darauf ab, den Leser "in
den Text zu ziehen". Aber es gibt immer weniger Leser, die
dieses Spiel mitmachen. Zusätzlich läuft man Gefahr,
den Leser zu verärgern. Akzeptabel sind rhetorische Fragen,
auf die der Leser sowieso nicht antworten soll, wie z.B. "Haben
Sie sich entschieden, schlank zu werden?"
Konkrete Formulierung der Überschrift
Ist die Überschrift konkret, anschaulich und bildhaft formuliert?
Beispiel konkret: "Freude am Fahren" (BMW)
Beispiel abstrakt: "Die neue Sicht der Dinge: Verantwortung" (eine
Bank)
Quelle: Meyer-Hentschel Management Consulting, Erfolgreiche Anzeigen, Wiesbaden
1994
Der Fließtext
Im Fließtext sollte man auf folgendes Achten:
Verständliche Texte
Haben die Sätze des Fließtextes nicht mehr als 15 Wörter?
Leicht verständliche Texte haben kurze Sätze mit 15 Wörtern
pro Satz als Obergrenze.
Wenige Wörter
Könnte man den Inhalt des Fließtextes mit weniger Wörtern
formulieren? Je mehr Überflüssiges, desto größer
die Gefahr, dass der Leser bei seinen Stichproben auf langweilige
Worte und Formulierungen stößt. Das signalisiert ihm
schnell: weiter!
Formale Gestaltung
Wird die Aufnahme des Fließtextes durch gute formale Gestaltung
begünstigt? Absätze, Hervorhebungen, Zwischenüberschriften
usw. erleichtern schnelles Lesen. Die ideale Zeilenbreite für
schnelles Lesen: 35 bis 45 Anschläge pro Zeile.
Konkrete Wörter im Fließtext
Werden im Fließtext konkrete Wörter verwendet und abstrakte
Wörter vermieden?
Ist die Schrift leicht lesbar?
Die Lesbarkeit der Schrift ist natürlich von Schriftart
und Schriftgrösse
abhängig. Die Anzahl der Schriftart im Web ist gering, da nur
Schriften verwendet werden können, die standartmäßig von jedem Browser
angezeigt werden. Sonderschriftarten kann man natürlich verwenden,
man kann dann aber nicht sicherstellen, das diese tatsächlich
vom Besucher installiert sind. In solch einem Fall ist es wichtig,
alternative Schriften anzugeben. Die Schriftgrösse
kann entweder den Einstellung des Browsers überlassen
bleiben, oder man legt auch diese durch CSS fest. Ein weiterer entscheidener
Faktor bei der Darstellung von Schriften ist die Auflösung
des Monitors. Die Schriften werden mit höher werdender Auflösungen
des Monitors immer kleiner. Hat mann die Schriften per CSS fest definiert,
sollte
man den Besuchern eine Möglichkeit geben, die Schriftarten
in der Grösse zu ändern und Ihrer Monitorauflösung
und persönlichen
Sehkraft anzupassen.
Schriften für Fliesstext
Welche Schriftfamilien lassen sich für den Fliesstext einer Website
verwenden?
Versuchen Sie einmal, auf einem karierten Blatt Papier ein paar Buchstaben aufzumalen. Bitte dabei nur ganze Kästchen verwenden (halb ausmalen gilt nicht ;), und die Buchstaben dürfen nur 10-12 Kästchen hoch sein. Auch für die Zwischenräume zwischen den Buchstaben sind nur ganze Kästchen erlaubt. So stellt sich grob gesagt die Aufgabe, die Buchstaben eines durchschnittlichen Fliesstextes mit Pixeln am Bildschirm darzustellen. Kann eine Schrift unter diesen Bedingungen gut lesbar sein und noch als Schriftfamilie erkennbar bleiben?
Bekannt ist, dass Arial, eine Schrift, die sehr stark der Helvetica gleicht, diese Anforderungen im Web-Alltag zufriedenstellend erfüllt. Sie lässt sich soweit herunterskalieren, dass sie auch bei 10-12 Pixel Höhe noch ein passables Schriftbild abgibt.
Ein Typograf namens Matthew Carter hat sich vor einigen Jahren ebenfalls an obige Aufgabe gesetzt, und entwickelte die Verdana! Er hatte Übung darin, Schriften für beschränkte Platzverhältnisse zu entwerfen, denn zuvor entwickelte er Fonts für US-Telefonbücher. Die Verdana ist somit eine Schrift, die für nichts anderes als für lesbaren Bildschirm-Fliesstext gemacht wurde. Dafür ist sie hervorragend geeignet. Weniger gut wirkt sie jedoch bei grossformatigen Titeln, da wirkt sie schnell etwas klobig.
In dieser Disziplin wird sie von der Trebuchet um Längen geschlagen. Die Trebuchet eignet sich, weise eingesetzt, ebenfalls für Fliesstext. Das Designtemplate Weites Land ist zum Beispiel ist in der Trebuchet gesetzt.
Und das war's dann auch schon mit serifenlosen Schriften! Warum ist denn die Auswahl so stark eingeschränkt? Ganz einfach: Weil Sie Ihre Website mit Vorteil in dem Font anbieten, die Ihr Leser auf seinem Computer auch installiert hat. Die Schrift selber wird bei einer Website nicht mitgesendet, das würde zuviel Speicherplatz kosten. Und ein grösserer gemeinsamer Nenner zwischen den verschiedenen Systemen ist nicht zu finden (wir wollen die Comic Sans nicht zu den 'ernsthaften' Schriften zählen).
In Flash-Movies können Sie auch dynamischen Text in beliebigen Fonts darstellen, weil sich dort der Schriftsatz mitsenden lässt. Das macht normalerweise etwa 20 kB aus, bei zwei verschiedenen Schriften sind es dementsprechend 40 kB und so weiter. Doch dann kann Google Ihren Text nicht indexieren, und es müssen einige Usability-Nachteile in Kauf genommen werden, darum lassen wir das Thema hier.
Warum ist das Web eigentlich so serifenlos? Ganz im Gegensatz zu den Print-Medien? In Büchern, Zeitungen und Magazinen herrschen aus gutem Grund immer noch die Serifen-Schriften vor: Die Füsschen geben den einzelnen Buchstaben im Wort- und Satzzusammenhang mehr Halt und helfen dem Auge beim Lesen. Das wurde bei unzähligen Lesegeschwindigkeits-Studien nachgewiesen. Und das soll am Bildschirm nicht funktionieren?
Haben Sie die Übung am Anfang gemacht? Dann haben Sie das Problem sicher schon erkannt: Für die kleinen Serifen muss genauso 1 Pixel verwendet werden, wie für die Striche der Buchstaben - damit sie überhaupt sichtbar sind, denn halbe Pixel, das geht ja nicht. Das macht die Serifen viel zu kräftig, und am Schluss sieht es etwa so aus wie bei den WANTED-Plakaten in den Westernfilmen. Solche Buchstaben kann man nicht für Fliesstext verwenden!
Doch Microsoft beauftragte erneut Matthew Carter mit der Aufgabe, und der schaffte das Wunder. Er entwickelte die geniale Georgia-Schriftfamilie. Damit rettete er die Serifen für den Bildschirm. Die Times New Roman ist für Fliesstext nicht brauchbar. Die Georgia hingegen ergibt ein schönes, lebendiges Schriftbild, und sie ist gut lesbar.
Uns bleiben also ganze drei Schriften zur Auswahl, und nur eine davon mit Serifen. Auch die Trebuchet ist unter bestimmten Voraussetzungen einsetzbar, und die ebenfalls weit verbreitete Comic Sans lassen wir mal weg.
Bei so wenig Auswahlmöglichkeiten lässt sich eine Faustregel aufstellen: Die Verdana für technisch orientierte Websites oder bei kleinen Schriftgrössen. Die Arial für alle anderen professionellen Anwendungen, und die Georgia für Weblogs. Und die Trebuchet als ästhetische Alternative für alle zusammen, wenn man einige besondere Rahmenbedingungen (Grösse, Schnitt) beachtet.
Animationen
Animationen ermöglicht die Visualisierung von Fertigungvorgängen, Montageabläufen oder Arbeitsprozessen. Mit der 3D-Visualisierung können komplexe Zusammenhänge anschaulich vermittelt werden. Exklusive Waren lassen sich effektvoll in Szene setzen. Animationen ziehen auch den Betrachter an, die Aufmerksamkeit richtet sich sofort auf die animierten Inhalte. Animatione sollten sparsam und nur wenn sie einen tatsächlichen Nutzen bringen, eingesetzt werden. Seiten mit mehreren Animation wirken oft sehr lainhaft und lenken den Betrachter ab
Die Navigation
Intuitive Erkennbarkeit
Besucht ein Benutzer eine neue Seite, muß er sich in Sekundenbruchteilen
orientieren können. Navigation muß sich deshalb klar von Inhalt unterscheiden.
Der Besucher muß die einzelnen Seitenelemente ausmachen und zuordnen können.
Dies erfordert eine klare Seitenstruktur und vom Text deutlich hervorgehobene
Links. Außerdem sollte der Besucher durch die Navigation eine Überblick über
die thematische Gliederung der Seite erhalten. Durch intelligentes Navigations-Design
wird der Besucher der Website geführt, ohne eingeschränkt zu werden.
Browser stellen unbesuchte Links standardmäßig unterstrichen
und blau dar. Daran haben sich die User im Laufe der Zeit gewöhnt.
Jede Abweichung vom Standard führt beim Besucher zu Verwirrung. Deshalb
muß der Besucher in der Lagesein, Links intuitiv auszumachen. Sobald
er weißt, wie diese aufgebaut ist er auch in der Lage, Text von
Links zu unterscheiden und Inhalt von Navigation abzugrenzen. Schlimm
ist, wenn die Verwirrung permanent bestehen bleibt, wenn der Besucher
einer Seite also nicht mehr eindeutig und intuitiv
ausmachen kann,
was ein Link ist
und was Inhalt ist. Der Grund einer dauernden Verwirrung liegt
meist in mangelnder optischer Abhebung der Links zum Fließtext und/oder
durch eine Vielfalt verschieden gestalteter Links und Buttons.
Nicht nur das Aussehen der Links, sondern auch die Position sollte auf der
ganzen Seite konsequent beibehalten werden. Dies erfordert eine klare Seitenstruktur
und eine konsequente Dokumentenhierarchie. Vermeiden sollte man umgekehrt auch
unterstrichenen Textpassagen oder buttonähnlichen Grafiken, die vom Aussehen
her den Links ähneln.
Eine gute Navigation besitzt Aussagekraft und Eindeutigkeit.
Sie zeigt einem bevor man ihr nachfolgt, wohin sie mich wird. Dies
erfordert eine klare, eindeutige Auszeichnung und Benennung der Links. Sie
sollte auch in der Lage sein, einem eine Über
Attraktivität
Praktisch ist, wenn Hyperlinks und Buttons optisch anzeigen, dass ich sie mit
der Maus überfahren werden oder durch Ihren Status angeben, in welchem
Bereich der Seite Sie sich befinden. Links können so gestaltet werden,
dass sie das Auge des Besuchers erfreuen und sein aktives Teilnehmen an der
Seite auch optisch begleiten. Dies kann mit mit CSS (Cascading Style Sheets)
oder Graphiken realisiert werden.
Technische Aspekte
Navigationsleisten sollten
wenn möglich in einer externen Datei liegen und durch
SSI oder PHP in das Dokumet eingebunden werden. So muß
bei der
nächsten Aktualisierung nicht jede einzelne Seite editirt
werden. Ist das Aussehen des Menüs durch das CSS
des Hauptdokuments definiert, wirken sich Änderungen im
Aussehen der Seite automatisch auf die eingebundenen Menüs
aus.
Suchmaschinenoptimierung
Allgemein kann man für Suchmaschinenoptimierung und Seitendesign folgende Regeln aufstellen:
Suchmaschinenoptimierung (SEO) sollte ein fester Bestandteil jeder Marketing-Strategie sein. Es gibt ca. 60 verschiedene HTML- und Designelemente einer Webseite, die das Suchmaschinenranking beeinflussen. Besonders der Text innerhalb von <body> ... </body> und die Linkpopularität. Das Design und die Seitenstruktur einer Webseite sind ebenfalls wichtige Elemente um ein hohes Suchmaschinenranking zu erzielen. Wo und wie ein Keyword im Quelltext steht, ist ebenso wichtig, wie die Häufigkeit, in der es vorkommt. Suchmaschinen nutzen sogenannte Spider oder Robots, die den gesammten Quelltext einer Webseite durchlesen und mittels eines sogenannten Ranking Algorithmus bewerten, indexieren und in einer Datenbank ablegen. Danach wird der Spider den auf der Seite befindlichen Links folgen und das ganze passiert noch einmal. Das 'Futter' für einen Spider ist der textbasierte Seiteninhalt. Grafiken sind nicht lesbar für „Herrn Spider“. Java Applets sind ebenfalls nicht lesbar. Dieses gilt auch für Links und Textinhalte in Imagemaps und Flash. Bei einer Seite mit Frames werden die Links häufig nicht verfolgt. Nehmen wir an, Sie haben sich dazu entschloßen, eine suchmaschinenfreundliche Seite" ohne Frames, Flash, Java Applets und JavaScript zu erstellen, dann sollten Sie vorher Wissen, welche Keywords Sie benutzen wollen.Diese Überlegung ist tatsächlich einer der entscheidendsten Aspekte der Suchmaschinenoptimierung. Wissen Sie nach welchen Suchbegriffen ein User in einer Suchmaschine sucht, um eine Seite mit dem Inhalt Ihrer Seite zu erreichen? Wissen Sie nach welchen Begriffen oder Begriffskombinationen die meisten User in Suchmaschinen suchen würden, um Ihre Seite zu erreichen? Haben Sie herausgefunden, für welche Keywords Ihre Mitbewerber ihre Webseiten optimiert haben? Das Design Ihrer Webseiten sollte schon beim Planen auf Suchmaschinenfreundlichkeit angepasst werden.
1. Text, Text und nochmals Text. Eine einzelne Seite mit einer großen Grafik und verschiedenen Links einer Imagemap sind kein gutes Futter für Spider. Erstens kann ein Spider keine Schriften in Bildern lesen und zweitens haben viele Spider große Schwierigkeiten den Links in einer Imagemap zu folgen. In vielen Fällen ist es nicht nötig, den Text durch Bildgrafiken schöner zu gestalten. Die richtige Anwendung von CSS kann Texte produzieren, die für das Auge attraktiv und noch wichtiger, für die Spider ein leckeres Futter sind. Vermeiden Sie aufwendige Seiten, die nur wenig oder keinen Text beinhalten.
2. Benutzen Sie Überschriften (<H1>-<H4>) direkt nach dem Body-Tag. Es ist Praxis vieler Webmaster, auf ihren Webseiten anstelle eines Heading-Tags Bilder zu nutzen. Für eine Suchmaschine ist es jedoch unmöglich, aus einer Grafik Keywords zu extrahieren. Die Nutzung von Überschriften kann Ihrer Suchmaschinenplatzierung einen bedeutenden Anstieg geben. Aber verwenden Sie nicht jedes Wort fett, kursiv oder unterstrichen, ein- bis zweimal im gesamten Body-Text genügen! Eine zweite Möglichkeit ist die auf dieser Seite gezeigte. Wir benutzen in unserem Kopf auch Bilder! Diese sind jedoch extern in einem Stylesheet definiert und werden so von Suchmaschinen nicht beachtet. Die dann folgenden Menüs sind ebenfalls in exteren Dateieb definiert. gleich dahinter beginnt der eigentliche Text mit einer Überschrift H1. Auch diese wurde in einem externen Stylesheet neu definiern, mit einer Grafik hinterlegt usw. Für die Suchmaschine ist jedoch nur das H1-Tag zu erkennen!
4. Suchmaschinen mögen Links, die im Text Keywords enthalten. Dies kann vor allem bei internen Links, aber auch bei Links zu externen Seiten mit gleichem Thema relevant sein und eine kleine Steigerung bei der Platzierung bringen.
5.Wir empfehlen, die Verzeichnisstruktur flach zu halten. Sofern möglich, beschränken Sie sich auf maximal 3 Verzeichnisebenen!
6. Es ist wichtig dass all Ihre Webseiten komplett untereinander verlinkt sind. Die Art wie Sie sie zusammen verlinken kann ebenfalls einen Einfluss auf das Ranking haben. Die Verwendung von Textlinks als Verknüpfung stellt sich im Allgemeinen als besser heraus als die von Grafiken. Der Grund liegt in der Möglichkeit, Schlüsselbegriffe in Textlinks einbauen zu können. Die Verwendung von Schlüsselbegriffen in den Textlinks versieht die Seite, auf die gelinkt wird, in vielen Suchmaschinen mit einem "Ranking" Schub. Falls Sie dennoch Grafiken als Navigation verwenden, benutzen Sie das "alt" Attribut und f ügen Sie Schlüsselbegriffe darin ein.
7. CSS und Javascript sind weit verbreitet. Legen Sie CSS Definitionen
und Javascripte in eine externe Datei und verlinken Sie diese(< SCRIPT
LANGUAGE= "JavaScript" SRC="MeinScript.js">< /SCRIPT>).
Der Spider einer Suchmaschine fängt am Anfang Ihres Quellcodes an und
arbeitet sich nach unten durch. Er achtet mit besonderem Interesse auf den
oberen, ersten Teil Ihres Quellcodes. Ist nun dieser obere Teil Ihres Quellcodes
voll mit CSS Definitionen und Javascript Befehlen (diese typischen "mouse
roll over" Effekte und Javascript Menüs), muss der Spider sich nun
umso weiter nach unten arbeiten um zu dem "keyword-reichen" Body
Text zu gelangen. Wie bereits erwähnt kommt es nicht nur auf die Häufigkeit
Ihrer Schlüsselbegriffe an, sondern auch darauf WO diese Schlüsselbegriffe
bzw. Schlüsselbegriff-Phrasen erscheinen. Aus diesem Grund sollten Sie
die ersten 20 Zeilen des Quellcodes nicht mit Javascript Funktionen und CSS
Definitionen füllen. Lagern Sie stattdessen beide, Javascript und CSS,
aus in externe Dateien - so wird der Code zum einen viel sauberer erscheinen
und es somit einem Spider sehr erleichtern, Ihren "keyword-reichen" Text
schneller zu finden.
8. Setzen Sie Ihre Keyword früh in Ihren <body> Text hinein. Ihr erster Abschnitt nach der Unter-Überschrift sollte Ihre wichtigsten Keyword / Keyword-Phrasen mindestens zweimal beinhalten. Vorzugsweise als erstes Wort des Abschnitts. Sobald der erste Abschnitt fertig erstellt ist und voller Schlüsselbegriffe, wenden Sie sich dem restlichen Ihres <body> Textes zu. Wenn Sie eine Grafik verwenden, benutzen Sie das "alt" Attribut. Der eigentliche Text sollte immer noch Keywords beinhalten - allerding ist der Mittelteil Ihres <body> Textes nicht ganz so wichtig wie der erste Abschnitt bzw. die ersten 300-400 Buchstaben des <body> Textes. Am Ende Ihrer Webseite ist eine hohe Dichte an Schlüsselbegriffen wiederum wichtig, Normalerweise sind das Textlinks oder eine Zusammenfassung eines Produktes / einer Dienstleistung. Schreiben Sie Ihre Keyword-Phrasen ruhig ein- oder zweimal fett und kursiv - solange Ihre Seite dadurch nicht seltsam aussieht. Eine gute Idee ist, ganz unten auf Ihrer Seite Textlinks mit Keyword beinhaltend zu setzen sowie eine Zusammenfassung, die ebenfalls Ihre Schlüsselbegriffe beinhaltet. Sie sotten darauf achten, dass die Anzahl Ihrer Schlüsselbegriffe annähernd 5% - 7% beträgt, mit besonders hoher Dichte von Schlüsselgbegriffen am Anfang sowie Ende Ihrer Seiten. Einige Suchmaschinen achten bei der Ermittlung Ihrer Keyword-Dichte auf den gesamten Quelltext - dies schliesst dann die Inhalte Ihres <head> Bereiches sowie soche Dinge wie das <alt> Attribut mit ein. Ermitteln Sie Ihre Keyword-Dichte ganz einfach online unter http://www.keyworddensity.com/ . Die Seite ist zwar in Englisch, jedoch selbsterklärend. Wir empfehlen Ihnen, "raw data comparison" zu benutzen, um eine hervorragende Aufschlüsselung Ihrer Keyword-Dichte sowie deren Position zu erhalten. Es lässt sich sogar eine zweite URL zu Vergleichszwecken hinzufügen.
Die Technik
Den Einzelnen Sieten liegt ein Gerüst aus (X)HTML-Code zugrunde. HTML ist eine so genannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen. Lange Zeit wurde das gesamte Design der Webseiten in Tabellen ferstgelegt. Grafiken wurden in verschiede Fragmente zerlegt und dann in Tabellen wieder zusammengesetzt. Diese Seiten benutzen keine Tabellen. Die Elemente der Seiten liegen in sog. Layern. Position und aussehen, sowie Graphiken der Layer sind mit Cascading Stylesheets (CSS) definiert.
Warum dieser Weg?
Durch die Trennung von Inhalt (HTML) und Aussehen (CSS)
sind Änderungen der gesamten Seite möglich, ohne das der Inhalt
einzelner Seiten verändert werden muss. Besonders eindrucksvoll zeigen
dies unsere verschiedenen Designschemata Herbstimpressionen,
Meer und
Weites
Land. Ein weitere Vorteil diese vorgehensweise liegt darin, daß
dynamisch
generierte Inhalte (wie z.B. die aus einer simplen Textdatei
generierte aktuelle Preisliste) automatisch dem aktuellen Seitendesign
angepasste
werden. Die Seiten sind ausserdem für Suchmaschinen optimal zu lesen.
Denn das 'Futter' für einen Spider ist der textbasierte Seiteninhalt.
Grafiken sind nicht lesbar für „Herrn Spider“. Java Applets
sind ebenfalls nicht lesbar. Dieses gilt auch für Links und Textinhalte
in Imagemaps und Flash. Bei einer Seite mit Frames werden die
Links häufig
nicht verfolgt. Es gibt ca. 60 verschiedene HTML- und Designelemente
einer Webseite, die das Suchmaschinenranking beeinflussen. Besonders der
Text
innerhalb von <body> ... </body> und
die Linkpopularität.
Änderungen und Berechnungen in einzelnen Feldern werden mit
Javascript ausgeführt. JavaScript erlaubt es, Maus- und Tastatureingaben
des Anwenders zu verarbeiten und darauf mit Bildschirmausgaben oder dynamischen Änderungen
innerhalb der angezeigten Web-Seite zu reagieren. So lässt sich mit
JavaScript beispielsweise ein HTML-Formular zu einem Zinseszinsberechner
umfunktionieren. Der Anwender gibt ein paar Werte ein, JavaScript
berechnet etwas und gibt das Ergebnis aus.
All diese Dinge laufen im Web-Browser des Anwenders ab, während eine
Web-Seite am Bildschirm angezeigt wird. Es ist keine zusätzliche Kommunikation
zwischen Web-Browser und Web-Server erforderlich.
Für die Darstellung von komplexen dynamische Inhalten (z.B dem Auslesen
einer Datenbank eines Forums) benutzen wir PHP.
(X)HTML in Kombination mit CSS als State-of-the-art-Technik
Die HTML-Sprache wurde für wissenschaftliche Texte im Internet geschaffen, nicht für die Darstellung von Unternehmens-Präsentationen im Corporate Design. In der Vergangenheit - und aktuell noch weit verbreitet - wurden und werden viele Tricks angewandt, um trotz der Beschränkungen in HTML ansprechende Webseiten zu erstellen. Wesentlich tragen dazu unsichtbare Tabellen als Seitengerüst und unsichtbare Bilder als Abstandshalter bei. Mit der Einführung von CSS (Cascading Style Sheets) und dessen immer besser gelingende Implementierung in modernen Browsern (Internet Explorer, Netscape Navigator, Opera, usw.) sind diese Hilfsmittel nicht mehr notwendig - und auch nicht sinnvoll!
Mit dem Einsatz von (X)HTML in Kombination mit CSS als State-of-the-art-Technik entstehen folgende Vorteile:
Einheitliche Anwendung für mehrere Ausgabemedien bedeutet im hohen Maße Kostenersparnisse und mehr Flexibilität bei Änderungswünschen.
Änderungen des Layouts werden zentral an wenigen CSS-Dateien vorgenommen und wirken sich auf alle Internetseiten gleichzeitig aus - egal ob die Internetpräsenz zehn Seiten oder hunderte Seiten umfasst. Der laufende Pflegeaufwand wird geringer, Änderungen sind schneller durchzuführen.
Die Indexierung durch Suchmaschinen wird wesentlich erleichtert und ist ausgeprägt steuerbar.
Wesentlicher Schritt in Richtung Barrierefreiheit - für Behörden-Websites ist dies bereits Pflicht.
Schnelle Zugriffszeiten beim Aufruf der Webseiten - Ihre Kunden erhalten ein deutliches Plus an Service.
Auch bei ausgeschaltetem JavaScript funktioniert die Navigation in den Webseiten ohne Einschränkung.
Zukünftige Entwicklungen werden diese Sprachen als Standard voraussetzen - der frühzeitige Einsatz spart Kosten oder vermeidet gar Fehlinvestitionen.
Um die Darstellung von Internetseiten auch auf Handys, Handhelds, Web-TV und anderen Plattformen zu ermöglichen, müssen nicht mehr wie bisher komplett getrennte Anwendungen geschrieben werden. Auch die Darstellung der Inhalte als PDF oder Druckseite benötigt nur jeweils ein zentrales Stylesheet für die gesamte Webpräsenz, die Inhalte selbst (HTML-Dateien) bleiben unverändert.
Schauen Sie sich diese Seite (mit den Designs Herbstimpressionen, Meer
und weites Land) oder als Beispiel CSS Zengarden an, um die
Möglichkeiten
von CSS-Design zu erleben. Lesen Sie dazu auch folgenden Artikel: Michael
Charlier: Stylesheets als Kostenbremse
- Große Unternehmen entdecken die Webstandards
Große Firmen und Portale wie z.B. Lycos France, Opera, Mercedes, Stern, Post und viele andere stellen ihre Seiten bereits teilweise oder komplett auf XHTML und CSS um. Dieser im Jahr 2003/2004 begonnene Trend wird sich im Jahr 2005 verstärkt fortsetzen, denn die Vorteile des CSS-Designs überzeugen.
HTML
Die jeder einzelnen Seite eines Webauftritts zugrunde liegende Sprache
ist HTML.
HTML bedeutet HyperText Markup Language. Es handelt sich dabei
um eine Sprache, die mit Hilfe von SGML (Standard Generalized Markup Language)
definiert wird. SGML ist als ISO-Norm 8879 festgeschrieben. HTML ist eine
so genannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe,
die logischen Bestandteile eines textorientierten Dokuments zu beschreiben.
Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische
Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze,
Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.
Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML zeichnet Inhalte von Dokumenten aus. Dokumente haben globale Eigenschaften wie zum Beispiel Kopfdaten. Der eigentliche Inhalt besteht aus Elementen, zum Beispiel einer Überschrift 1. Ordnung, Textabsätzen, Tabellen und Grafiken. Einige dieser Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als betont oder fett markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen.
HTML ist ein so genanntes Klartext-Format. HTML-Dateien können Sie
mit jedem beliebigen Texteditor bearbeiten, der Daten als reine Textdateien
abspeichern kann. Es gibt also keine bestimmte Software, die man zum Erstellen
von HTML-Dateien benötigt. Zwar gibt es längst mächtige
Programme, die auf das Editieren von HTML spezialisiert sind, doch das ändert
nichts an der entscheidenden Eigenschaft: HTML ist nicht an irgendein bestimmtes,
kommerzielles Software-Produkt gebunden. Diese wichtige, vielleicht sogar
wichtigste Eigenschaft von HTML sollten Sie immer im Auge behalten, wenn
man Ihnen erzählen will, dass Web Publishing nur mit bestimmten Software-Produkten
möglich sei.
Da HTML ein Klartextformat ist, lässt es sich auch hervorragend mit
Hilfe von Programmen generieren. Von dieser Möglichkeit machen beispielsweise
PHP-Scripts Gebrauch. Wenn Sie im Web zum Beispiel einen Suchdienst benutzen
und nach einer Suchanfrage die Ergebnisse präsentiert bekommen, dann
ist das, was Sie am Bildschirm sehen, HTML-Code, der von einem Script generiert
wurde.
Quellen: http://de.selfhtml.org/intro/technologien/html.htm
CSS
Mit HTML definieren Sie den grundsätzlichen Aufbau Ihrer Web-Seiten,
die Elemente, die Strukturen, die Verweise, die referenzierten Elemente
wie Grafiken, Multimedia usw. Aber HTML ist eigentlich nicht dazu gedacht,
um exakt anzugeben, wie ein Element genau aussehen soll. So können
Sie in HTML eine Überschrift definieren und dabei angeben, dass es
sich um eine Überschrift 1. Ordnung handeln soll. Sie können
innerhalb von HTML aber nicht bestimmen, wie groß, in welcher Schriftart
usw. die Überschrift dargestellt werden soll. Das übernimmt der
Web-Browser bei der Anzeige. Er benutzt dabei eine Mischung aus Grundeinstellungen,
die der Anwender vornehmen kann, und fest programmierten Darstellungen
einzelner HTML-Elemente.
An diesem Punkt setzen die Cascading Stylesheets (CSS) ein.
Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die
vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML
ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit
Hilfe von CSS Stylesheets können Sie beispielsweise festlegen, dass
alle Überschriften 1. Ordnung 24 Punkt groß sind, in roter Helvetica-Schrift,
mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten
Rahmenlinie oberhalb dargestellt werden. Sie können aber genauso gut
auch für einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter
groß sein soll und eine gelbe Hintergrundfarbe erhält. Daneben
enthält CSS auch Möglichkeiten zum punktgenauen platzieren von
Elementen am Bildschirm und für andere Ausgabemedien wie Drucker oder
Audio-Systeme bereit.
CSS erlaubt es, zentrale Formate zu definieren, beispielsweise
für alle Überschriften erster Ordnung, oder für alle Textabsätze
mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten
Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate
können sich auf eine HTML-Datei beziehen, aber auch in eine externe
Style-Datei ausgelagert werden, die Sie dann in allen gewünschten
HTML-Dateien einbinden können. So werden einheitliche Formatvorgaben
möglich, und der HTML-Code wird von unnötigem Ballast befreit.
CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen
gleichzeitig zu erlernen. Im HTML-Kapitel der vorliegenden Dokumentation
werden Sie bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer
auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit
Hilfe von CSS gestalten können.
CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen
Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie
HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache,
die Sie frei und ohne Lizenzprobleme verwenden können.
Vom MS Internet Explorer wurde CSS schon recht früh unterstützt,
da Microsoft sein Know How aus dem Bereich der visuellen Textverarbeitung
in den Browser einfließen lassen konnte. Netscape tat sich dagegen
schwer mit der Implementierung. Was die immer noch verbreitete Version
4.x an CSS beherrscht, ist insgesamt wenig ermutigend, und Web-Designer
müssen alle Augenblicke lang wieder mit bösen Überraschungen
bei diesem Browser rechnen. Erst in der von Grund auf neu programmierten
6er-Version des Netscape-Browsers ist CSS sauber umgesetzt.
Aber auch beim Internet Explorer gab es lange Zeit eigenwillige Interpretationen
einzelner
CSS-Eigenschaften. Auch hier kann man erst seit der 5er-Version
eine ausgereifte Umsetzung erwarten.
Quellen: http://de.selfhtml.org/intro/technologien/css.htm
Javascript
JavaScript erlaubt es, Maus- und Tastatureingaben des Anwenders
zu verarbeiten und darauf mit Bildschirmausgaben oder dynamischen Änderungen
innerhalb der angezeigten Web-Seite zu reagieren. So lässt sich
mit JavaScript beispielsweise ein HTML-Formular zu einem
Zinseszinsberechner umfunktionieren. Der Anwender gibt ein paar Werte
ein, JavaScript berechnet
etwas und gibt das Ergebnis aus.
All diese Dinge laufen im Web-Browser des Anwenders ab, während eine
Web-Seite am Bildschirm angezeigt wird. Es ist keine zusätzliche Kommunikation
zwischen Web-Browser und Web-Server erforderlich. Wenn die Web-Seite zum
Browser übertragen wurde und sich damit im Arbeitsspeicher des Anwender-Rechners
befindet, sind JavaScripts, die in die Web-Seite integriert sind, lokal
ausführbar. Damit Programmierer auf dem Rechner des Anwenders keinen
Unfug treiben können, ist JavaScript allerdings in seinen Möglichkeiten
stark beschränkt. Es ist mit JavaScript beispielsweise nicht möglich,
mal eben eine Datei auf dem Rechner des Anwenders auszulesen oder diese
gar zu löschen. Die Möglichkeiten von JavaScript sind auf das
Umfeld der Web-Seite eingeschränkt, in die so ein Script eingebettet
ist.
JavaScripts können Sie ebenso wie CSS Stylesheets direkt innerhalb
von HTML-Dateien notieren oder wahlweise als separate Datei einbinden.
Damit bezieht sich ein solches JavaScript auf die Seite, in die es eingebunden
ist und kann auf das unmittelbare Umfeld und die Elemente dieser Seite
zugreifen. Was den Zugriff auf Elemente einer HTML-Datei betrifft, muss
man jedoch einen wichtigen Unterschied machen: mit klassischem JavaScript,
wie es Netscape zunächst einführte, lässt sich nur auf bestimmte
Elemente zugreifen, beispielsweise auf Formularelemente. Mittlerweile setzen
sich jedoch Ansätze durch, bei denen der Scriptsprachen-Zugriff auf
beliebige HTML-Elemente möglich ist, und zwar lesend und schreibend.
So wird es beispielsweise möglich, den Text eines Textabsatzes dynamisch
auszutauschen, wenn der Anwender an eine bestimmte Stelle klickt. Auf diese
Weise werden HTML-Dateien zu richtigen interaktiven Anwendungen - was sich
etwa hervorragend für didaktische Zwecke nutzen lässt. Für
das dynamische Verändern von am Bildschirm angezeigten Web-Seiten
hat sich auch der Begriff Dynamic HTML eingebürgert.
Den Zugriff auf beliebige Elemente regelt das Document Object
Model (DOM). Dabei handelt es sich nicht um eine Programmiersprache,
sondern um ein Schema für Programmiersprachen, das beschreibt, wie auf die
Elemente von HTML- und auch auf die Elemente von beliebigen XML-basierten
Dokumenten zugegriffen werden kann. Das DOM regelt also beispielsweise,
welche Möglichkeiten eine Sprache wie JavaScript bereitstellen muss,
um dem Programmierer zu erlauben, den Text einer Überschrift erster
Ordnung in einer HTML-Datei zu ermitteln und durch einen anderen Text zu
ersetzen. Das DOM ist im Gegensatz zu JavaScript keine konkrete Programmiersprache.
Es ist lediglich eine Vorgabe, die in modernen Scriptsprachen für
Web-Seiten umgesetzt werden sollte. Denn das DOM wird wie HTML, CSS und
JavaScript vom W3-Konsortium standardisiert und hat damit einen normativen
Charakter. In den JavaScript-Modulen der verbreiteten Browser wird das
DOM allmählich umgesetzt. Der MS Internet Explorer unterstützt
DOM-gerechtes JavaScript seit Version 5.x, Netscape seit Version
6.x.
Die Mehrzahl der heutigen Web-Seiten setzt JavaScript in irgendeiner
Form ein - die meisten so wie es gedacht ist, nämlich als Unterstützung
für bestimmte Aufgaben, die sich mit HTML einfach nicht lösen
lassen. Einige Seiten sind aber auch komplett JavaScript-basiert. Anwender,
die in ihrem Browser JavaScript deaktiviert haben (was bei allen Browsern
m öglich ist), sehen von solchen Seiten rein gar nichts.
Quellen: http://de.selfhtml.org/intro/technologien/javascript.htm
PHP
Die Abkürzung steht für Hypertext Preprocessor. Das Konzept dahinter
ist, dass PHP-Code ähnlich wie JavaScript direkt in HTML-Dateien an
einer dafür geeigneten Stelle notiert werden kann. Wenn die HTML-Datei
dann im Web abgelegt ist und von einem Web-Browser aufgerufen wird, erkennt
der Web-Server, der die Datei zum Browser übermittelt, aufgrund bestimmter
Konventionen, dass es sich nicht um eine gewöhnliche HTML-Datei handelt,
sondern um eine HTML-Datei mit eingebettetem PHP-Code. Eine solche Datei
lässt er dann zunächst von dem server-seitig installierten PHP-Interpreter
verarbeiten. Dieser liest in der HTML-Datei die PHP-Code-Passagen aus,
führt den Code aus und erzeugt daraus den endgültigen HTML-Code,
der schließlich an den Browser gesendet wird.
PHP kann alles, was mit CGI und Perl auch möglich ist. Und manches
ist mit PHP durchaus einfacher als mit CGI und Perl, weil der PHP-Interpreter
viel stärker als etwa der Perl-Interpreter auf aktuelle Belange des
Web-Publishings ausgerichtet ist. So ist es beispielsweise mit PHP auch
möglich, PDF-Dateien dynamisch zu generieren, um druckreife Daten
an den Browser zu senden. Mit Perl geht so etwas zwar auch, doch dazu muss
der Programmierer sich erst mal nach einem geeigneten Modul umsehen, dieses
installieren und sich dann mit der modul-eigenen Dokumentation beschäftigen.
Beim PHP-Interpreter ist dagegen alles inklusive und fest eingebaut. Allerdings
platzt der PHP-Interpreter aufgrund seines Feature-Umfangs allmählich
aus allen Nähten und wird durch die "Alles-inklusive"-Philosophie
nicht gerade schneller - auch wenn er mittlerweile die gleiche interne
Technik wie der Perl-Interpreter verwendet, nämlich Scripts erst einmal
zu kompilieren und sie dann auszuführen. Letztendlich aber bestimmen
immer eine ganze Reihe von Faktoren mit darüber, wie performant eine
dynamische Web-Seite wirklich ist - unter anderem die Anzahl der Seitenaufrufe,
die Leistungsfähigkeit der Server-Hardware, die Netzanbindung des
Servers usw. In der Praxis hat sich PHP jedenfalls bestens bewährt
und wird von vielen großen Web-Angeboten mit Erfolg eingesetzt
PHP und der PHP-Interpreter sind frei verfügbar und lizenzfrei benutzbar.
Entwickelt werden Sprache und Interpreter von der so genannten
PHP Group, einem Projektzusammenschluss von Programmierern.
Die Einstiegsseite zu
allen Belangen rund um PHP ist php.net.
Quellen: http://de.selfhtml.org/intro/technologien/php.htm
