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.

zurück



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.

zurück



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.

zurück



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

zurück



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.

zurück



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.

zurück



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.

zurück



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.

zurück



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

zurück



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


zurück



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

zurück



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

zurück



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

zurück


Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /homepages/27/d21205299/htdocs/Gillard/besuch_onl.php:16 Stack trace: #0 /homepages/27/d21205299/htdocs/Gillard/design_struktur.php(945): require_once() #1 {main} thrown in /homepages/27/d21205299/htdocs/Gillard/besuch_onl.php on line 16