![[LOGO] ITM praktiker - MULTI MEDIA & ELEKTRONIK](images/logpragw.svg)
Wenn Sie selbst eine Website gestalten, so haben Sie freilich ihre eigenen Vorstellungen. Unsere Überlegungen gefallen Ihnen vielleicht gar nicht und Sie wollen auch Ihren persönlichen Stil zeigen. Es gibt in Wirklichkeit keine Richtlinien, außer dem Herstellen einer gewissen Übersichtlichkeit. Diese Übersichtlichkeit und schnelles Auffinden der gesuchten Information kann auf unzählige Arten erreicht werden.
<=> Erfolgsgeheimnis: Interessanter Inhalt - Effekte helfen nicht weiter
<=> Gute Übersichtlichkeit auch für Erst-Besucher, hohe Webbrowser-Kompatibilität
<=> Schmähs bleiben Schmähs: Pageranking und Suchmaschinen
<=> Verlassen Sie sich nicht auf fremde (kostenlose) Dienste
<=> Domain-Bezeichnung, Subdomain, Ordner- und Dateinamen
<=> Was Sie - trotz Individualität - unbedingt beachten sollten
<=> .htaccess: Server-Konfiguration gegen Clickjacking und Foto-Verwendung
<=> Fatale Fehler bei JavaScript vermeiden: Browser deaktiviert sonst JavaScript
<=> Verlassen Sie sich nicht auf Unterscheidung bei Groß-Kleinschreibung ("case sensitive")
<=> Falsch in der Praxis: Browserweichen obsolet, da alle Webbrowser den W3C-Standards folgen
==> Zur Technik der "praktiker"-Website
==> Technik praktiker.at über Handy, Tablet, E-Book, TV
==> praktiker.at als Vollversion für mobilen Zugriff übers Smartphone
==> Tooltip, Hover-Effekt und Alternativmenü bei Smartphone und Tablet
==> Was bisher geschah: Seit Ende der 1990er-Jahre optimiert für Handheld, PDA
==> So meldet sich Ihr Webbrowser - abgefragt über JavaScript, CSS, Microsoft Conditional Comments
==> Gerätedaten, die Ihr Webbrowser über JavaScript-Abfragen meldet: UserAgent etc.
==> Gerätetyp-Erkennung von praktiker.at - welches Gerät Sie vermutlich verwenden
==> Ergebnis des über CSS Cascaded Stylesheets zugänglichen Media-Typ und Eigenschaften
==> Ergebnis der Abfrage mit MS Conditional Comments für Internet-Explorer-Sonderbehandlung
==> UserAgent falsch: Internet Explorer meldet Tablet-PC bei Nicht-Tablets, z.B. Notebook
==> Welche Schriftarten Ihr Webbrowser darstellen kann
Wir haben auf der Seite Zur Technik der "praktiker"-Website ein paar Aspekte zur Gestaltung einer Website - resp. unsere Überlegungen dazu bei der Gestaltung von praktiker.at - etwas detaillierter dargestellt. Es ist nicht nötig, dass Sie das alles so richtig finden. Sicherlich haben Sie einige Ideen, wie etwas - für Ihren Geschmack und Ihre Anforderungen - besser gelöst werden kann. Als Einsteiger geht es aber vorerst einmal darum ein Gefühl für die Techniken zu bekommen und wo kleine Fallstricke bereitliegen. Lesen Sie sich vielleicht als Anregung für eigene Lösungen unsere Erläuterungen auf dieser Seite durch, was wir wie und warum gelöst hatten. Auch wenn Sie letztlich konträrer Ansicht sein sollten, haben Sie für diese konträre Meinung vielleicht durch diese Darstellungen eine bessere Grundlage.
Es ist schwierig, gute Vorbilder zu finden. Die erfolgreichsten Websites sind mitunter ziemlich furchtbar in der Handhabung. Auf der anderen Seite gibt es ganz großartig ästhetisch designte Websites mit gut durchdachter Handhabung aber ohne interessanten Inhalt. Es kommt kein Mensch ein zweites Mal auf eine Seite, die lediglich angenehm in der Handhabung und schön gestaltet ist.
[!> Es kommt also ausschließlich auf den gebotenen Inhalt an. Wenn dieser interessant ist, werden sehr viele Besucher kommen. Wenn nicht, werden sie ausbleiben. Jeder andere Aspekt ist nachrangig. So einfach ist das.
Da können Sie pfiffige Animationen und wer weiß was noch alles haben. Das alles interessiert höchstens ein paar Pseudo-Schöngeister. Weil sie so schön sind. - Kümmern Sie sich also am besten in erster Linie um einen attraktiven Inhalt. Irgendwas, das Sie besser können als Andere oder irgendwas, das sonst kaum geboten wird. Das wäre jedenfalls ideal. Wenn nun auch all das auf Ihrer Website auch leicht gefunden werden kann, dann haben Sie schon gewonnen.
Wenn es eine private Website ist, so suchen Sie sich ein Thema aus, von dem Sie besonders viel verstehen. Idealerweise ist das ein sehr eng abgegrenzter Bereich. Wenn Sie beispielsweise ein Audio-HiFi-Enthusiast sind und sich intensiv mit dem Thema Lautsprecherkabel auseinandersetzen und darüber von den Eigenschaften bestimmter Kabel, Isolierungen, Art der Verlegung, Stecker, Buchsen und bis zum verwendeten Lötzinn schier alles wissen und ausprobiert haben, dann wäre das beispielsweise ein Thema. Es ist erheblich leichter mit einem sehr eng abgegrenzten Spezialgebiet Aufmerksamkeit zu bekommen, als wenn Sie eine Website beispielsweise allgemein zum Thema Audio machen. Im Internet finden sich zu jedem spezialisierten Thema viele Interessenten. Dann würden Sie also beispielsweise Ihre bisherigen Erfahrungen gut gegliedert darstellen. Und dann vielleicht auch ein Forum eröffnen, wo darüber diskutiert wird und es werden Erfahrungen von Besuchern kommen, die Sie dann in den Inhalt Ihrer Website aufnehmen etc. Kurz, es sollte ein Thema sein, zu dem es derzeit nicht so viel gibt und Sie das entweder besser machen oder zumindest eine wertvolle Bereicherung für das Thema anbieten können.
Wenn es eine Firmenpräsentation ist, dann ist das Thema freilich grob vorgegeben. In erster Linie werden Sie also die besonderen Kompetenzen, Erfolge und Ziele ihrer Firma erläutern und möglichst alle jene Fragen innerhalb Ihrer Website beantworten, die von Kunden immer wieder gestellt werden. Dabei können Sie häufige Missverständnisse aufklären und zeigen, was Ihre Firma alles kann. Also im Prinzip so, wie mit einem sehr ausführlichen Image-Prospekt. Zudem können Sie das auch gleich nutzen um alle Produkte ausführlich zu beschreiben. Und auch Hilfestellung für bereits bestehende Kunden bieten. Ein typisches Beispiel dafür geben viele der großen Hersteller mit Bedienungsanleitungen, die kostenlos zum Download bereitgestellt werden. Diese gehen häufig verloren und werden dann gesucht. Ein schönes Beispiel dafür ist beispielsweise die Knowledge-Base von Microsoft, mit der ziemlich tief gehende Informationen zu deren Software-Produkten bereitgestellt werden, für die in einem Handbuch einfach kein Platz wäre. Es gibt für jede Firma - egal wie klein, egal wie eng spezialisiert - eine ganze Menge an Inhalten, die so gezeigt werden können.
Damit das Ganze auch möglichst viele Leute erreicht und bei den Besuchern keine Krämpfe verursacht, sollten Sie vielleicht trachten, Programmumgebungen und Funktionen zu vermeiden, die möglicherweise beim Besucher nicht verfügbar oder abgeschaltet sind, eine auf allen einigermaßen bedeutenden Webbrowsern gute Darstellung zu erreichen und den Inhalt möglichst übersichtlich zu gliedern. Prüfen Sie die Brauchbarkeit Ihrer Website nach folgenden Kriterien:
Alles, was nur bei eingeschalteter Unterstützung von Java zugänglich ist, bleibt für die meisten Anwender unbrauchbar resp. unsichtbar. Die meisten Anwender haben Java abgeschaltet. Obwohl die Webbrowser zunehmend besser ausgestattet sind, wird Java von vielen Usern weggeschaltet, weil damit auch viel Unfug getrieben werden kann.
Bei mobilen Geräten ist oft auch Shockwave Flash entweder überhaupt nicht installiert oder abgeschaltet, weil Flash-Animationen besonders viel Strom verbrauchen können und daher die Akku-Arbeitszeit erheblich reduzieren könnten.
Es geht also nicht nur darum, welche Technologien der User zur Verfügung hat, sondern darum, welche er davon eingeschaltet hat.
Generell zu Internet-Explorer: Internet Explorer sind jeweils bei Windows dabei und zwar jeweils spezielle IE-Versionen bei speziellen Windows-Versionen: IE 6 bis IE 8 bei Windows XP, IE 9 bei Windows Vista. Wenn man es ganz perfekt machen wollte, dann müsste man also Zugang zu einem PC mit der betreffenden Windows-Version haben. Nicht ganz perfekt, aber besser als nichts, ist die Möglichkeit, bei einer neueren Internet-Explorer-Version - resp. Edge in Internet-Explorer-Modus - die älteren Internet-Explorer-Versionen simulieren zu können.
Wenn Ihnen nur die neuesten Versionen wichtig sind, dann wäre das Austesten wichtig mit Google Chrome, Firefox und Edge.
Es gibt freilich zahlreiche andere Webbrowser. Wenn Ihre Website aber mit den hier genannten Webbrowsern problemlos funktioniert, dann wird es keine Probleme mit allen anderen Webbrowsern geben.
Firefox 3.6 ist eine sehr alte Version, die auch heute noch verfügbar ist. Von dieser werden vor allem manche später hinzugekommene Javascript- und CSS-Befehle nicht unterstützt. Hierbei sieht man, wenn sich durch deren Fehlen eine fehlerhafte Darstellung ergeben könnte, was besser vermieden werden sollte. Suchen Sie über eine Suchmaschine nach "Firefox 3.6 Portable Version".
Abgesehen von Internet Explorer 6 - der viele der neueren Befehle nicht kennt - dürfte es keine gravierenden Unterschiede in der Darstellung geben, weil alle aktuelleren Webbrowser ziemlich einheitlich arbeiten. Bei Unterschieden handelt es sich also eher nur um Fehler - also unbeabsichtigte Fehlfunktionen. Diese sind aber kaum so gravierend, sodass der Sinn des Inhalts entstellt werden könnte.
Für eine saubere Darstellung sollten diese Fehldarstellungen je nach Browser - und evtl. auch Browser-Version - korrigiert werden, weil Ihre Website dann wohl einen besseren Eindruck macht. Der Aufwand für solches Finetuning ist allerdings sehr hoch. Außerdem handelt es sich dabei zumeist um Fehlfunktionen. Man muss daher laufend die jeweils aktuellen Versionen der Browser austesten in Hinblick darauf, ob ein Fehler mittlerweile behoben ist - oder auch ein neuer auftritt. Spezialitäten in der Behandlung gelten nicht nur bei speziellen Browser-Versionen sondern auch Betriebssystemen und teilweise auch Gerätetypen. - Perfektion ist nicht nur ein bisschen sondern immer um ein Vielfaches aufwendiger als lediglich "geht schon so".
[!> Ganz schlimm ist der Einsatz von Browserweichen, die den Besucher automatisch auf einen Bereich mit reduziertem Inhalt und Funktionalität "schicken", wenn dieser nicht einen bestimmten Webbrowser verwendet. Das findet kein Besucher originell, der sich wegen Ihrer Website sicherlich kaum die von Ihnen gewünschte Ausstattung zulegen wird. Nach dem Motto: "Schaffen Sie sich einen anständigen Browser an oder Sie sehen bei uns nur die Nur-Text-Version." Freilich ist das dann nicht vermeidbar, wenn auf der Seite ein Inhalt gezeigt werden soll, der anders nicht dargestellt werden könnte. In den meisten Fällen kann aber eine Lösung gefunden werden, die auch mit alten Webbrowsern funktioniert.
Zur Übersichtlichkeit gehört auch ein - abgesehen von der Gestaltung als solcher - inhaltlich gut durchdachtes Menüsystem. Versetzen Sie sich dabei in die Lage eines Besuchers, der von Ihrer Firma oder von Ihrem Thema überhaupt keine Ahnung hat. Bezeichnen Sie entsprechend allgemein verständlich die Menüpunkte. Lassen Sie das von Außenstehenden testen, die mit dem Thema Ihrer Website nicht sehr vertraut sind, ob das verständlich genug ist.
Es ist davon auszugehen, dass die Verwendung von Touchscreens noch weiter an Bedeutung zunehmen wird und schon bald der wichtigste Gerätetyp sein wird, mit dem auf Websites zugegriffen wird. Also sowohl - in der Hauptsache - von Smartphones als auch von Tablets. Auch die Verwendung von SmartTVs zur Nutzung von Websites könnte eine höhere Bedeutung als der Standard-PC oder Notebook bekommen.
Es ist daher sehr wichtig, dass der Zugriff über diese Geräte nicht nur "auch", sondern "optimal" funktioniert. Für Geräte mit Touchscreens ist das die Bedienung mit Fingern am Touchscreen, für Smart-TV die - zumeist - grobmotorische Bedienung von Mauszeigern mittels Cursor-Tasten über eine Fernbedienung. Dazu müssen die Schaltflächen oder Links großflächiger sein und dürfen nicht zu nah beieinander positioniert sein.
Sehr wichtig ist es auch, dass die Übersichtlichkeit über das relativ kleine Display eines Smartphones gegeben ist. Dieses ist zwar weitaus größer als das von früheren PDAs, aber es ist erstens hochformatig und zweitens doch erheblich kleiner als die Fläche, die bei einem PC-Monitor zur Verfügung steht. Beispielsweise umfangreiche Grafiken oder Tabellen, die bei der Nutzung über einen Standard-PC großartig und sehr übersichtlich sind, sind über ein Smartphone schwieriger brauchbar. Große Grafiken sollten dafür - wo dies ohne Einbußen an die Verständlichkeit machbar ist - besser in kleinere Einheiten zerlegt werden und Tabellen nach Möglichkeit auch besser in mehrere aufgeteilt werden. Hier kann man sich bis zu einem gewissen Grad auch damit helfen, dass man eine Tabelle oder größere Grafik horizontal scrollbar machen kann. Bilder resp. Grafiken kann man sowieso mit den Finger sehr komfortabel zoomen.
Das Zurechtfinden auf einem kleineren Display ist etwas, das man lernen kann, aber viele - vor allem ältere - Leute auch heute noch nicht gelernt haben. Jene, die vor einem Smartphone bereits jahrelang zuvor PDAs mit erheblich kleinerer Displayfläche genutzt hatten sowie Kinder und Jugendliche können das sehr gut, sind aber nicht die Mehrheit.
Wenn Icons oder sonstige Symbole verwendet werden, kann es für PC-Anwender sinnvoll sein, die Funktion der Schaltfläche mit Text zu hinterlegen. Dazu wird das Link-Element mit dem Attribut title= mit einer knappen Erläuterung ausgestattet. Der erläuternde Text erscheint dann bei Berühren des Schaltfelds mit dem Mauszeiger als "Tooltip" resp. "Balloon-Tip".
Der Nachteil dabei ist, dass solche Tooltips bei Geräten mit Touchscreen nicht verlässlich angezeigt werden können. Tooltips funktionieren als Hover-Effekt und daher nur mit Geräten mit Mauszeiger; Geräte mit Touchscreen haben zumeist keinen Mauszeiger und es gibt nicht bei allen Touchscreen-Geräten eine alternative Möglichkeit Hover-Effekte auszulösen. Tooltips sollten also immer nur eine Erläuterung zum aktuellen Schaltelement sein.
Angaben mit dem Attribut title= dürfen daher nicht für das Verständnis nötig sein. Für die Verwendung am PC - also mit Mausbedienung - ist es deswegen interessant für Zusatzinformationen, weil man diese Vorgangsweise auch von der Windows-Oberfläche her kennt. Bei Geräten mit Touchscreen erwartet man das nicht und funktioniert das sowieso nicht gut.
Sobald Sie Ihre Website eröffnet haben, werden sich zahlreiche Firmen bei Ihnen melden, die Ihnen eine Rangordnung weit oben in den Ergebnissen zu relevanten Suchwörtern bei den Suchmaschinen "verschaffen". Diese Dienstleistung nennt sich Suchmaschinenoptimierung (SEO Search Engine Optimization). Tatsächlich lässt sich gutes Ranking in den Suchmaschinen auf Dauer ausschließlich durch einen interessanten oder speziellen Inhalt erreichen. Also relevante Inhalte und auch nicht Inhalte, die gleichlautend auch auf anderen Websites zu finden sind.
Alle Tricks können höchstens für eine kurze Zeitspanne - wenn überhaupt - funktionieren. Und wenn es zu schlimm damit getrieben wird kann es passieren, dass die Website von den Suchmaschinenbetreibern überhaupt nicht mehr berücksichtigt wird.
Ein Parameter zur Bewertung der Bedeutung einer Website ist der "Pagerank" - mit der logarithmischen Pagerank-Skala von 0 bis 10 (höher = besser). Pageranking geht davon aus, dass eine Website umso wichtiger ist, je öfter von anderen Websites darauf verwiesen wird. Und umso mehr wichtiger, wenn diese Websites ihrerseits wichtig sind. Um dies vorzutäuschen gibt es etliche Firmen, die das gegenseitige Referenzieren durch Links über sogenannte Linkfarmen organisieren. Mehr oder weniger plump, aber jedenfalls langfristig ohne den gewünschten Effekt. Weil genau darauf die Suchmaschinenbetreiber aufpassen.
Pagerank wird nicht mehr veröffentlicht. Der Pagerank zu einer bestimmten Website konnte früher abgefragt werden - über Browser-Erweiterungen resp. Toolbars -, wird aber mittlerweile nicht mehr von Google bereitgestellt. Google arbeitet zwar nach wie vor - zumindest: auch - mit dieser Technik zur Bewertung der Relevanz von Webseiten, gibt die Ergebnisse aber nicht mehr bekannt. Ein möglicher Grund dafür könnte es sein, dass ein schwunghafter Handel mit Links ausgehend von höher bewerteten Websites betrieben worden ist - was eben eine positivere Bewertung der verlinkten Seite zur Folge haben sollte.
Das Ziel eines Such-Algorithmus ist es, zu den eingegebenen Suchbegriffen möglichst jene Webseiten als Antworten zu liefern, wo relevante Informationen dazu zu erwarten sind. Und jene ganz oben darzustellen, bei denen dies am ehesten zutrifft. Allein das Vorhandensein der Suchwörter und beispielsweise die Häufigkeit des Vorkommens eines solchen Suchworts macht nicht unbedingt höhere Relevanz aus, weil das sehr leicht ausgetrickst werden könnte.
Von einer Suchmaschine ausgewertet werden kann zumindest alles, was auch über einen simplen Text-Webbrowser erreichbar ist. Und damit ist zugleich die Zugänglichkeit für alle Besucher gegeben, was man sowieso anstreben sollte.
Suchmaschinen können auch mit komplexeren Strukturen umgehen, aber die sicherste Methode ist die Prüfung, ob Brauchbarkeit mit einem simplen Textbrowser wie beispielsweise "Lynx" gegeben ist. Falls bei der Darstellung einer Website über Lynx überhaupt keine Struktur erkennbar ist - also die Seite für einen Besucher eigentlich nicht brauchbar ist - sollte sie entsprechend überarbeitet werden. Wenn Sie sich bei der Darstellung über Lynx auf Ihrer Website gut zurechtfinden können, dann kann diese auch eine Suchmaschine gut auswerten und bewerten.
==> Lynx - Textbasierter Webbrowser - nicht nur für Puristen
==> Barrierefreiheit durch Logische Auszeichnung für Textbrowser, Lesefunktion, Screenreader
Es gibt zahlreiche Anbieter kostenloser Dienste, mit denen das Angebot und der Funktionsumfang Ihrer Website erweitert werden kann und diese damit noch attraktiver wird. Das sind beispielsweise Dienste für Meinungsumfragen, Gästebücher (inzwischen nicht mehr so beliebt) oder auch komplexere Dienste wie Sprach-Übersetzungen. Das Problem dabei ist freilich, dass das nur so lange funktioniert, als diese Funktion vom Anbieter weiterhin verfügbar bleibt - oder es zumindest einen alternativen Anbieter gibt, auf den man ggf. ausweichen könnte. Manche solcher Anbieter erwarten sich - no na - ein Geschäft davon und falls sich das nicht realisieren lässt, wird der Dienst freilich beendet. Mitunter ohne Vorankündigung.
Ein stärkerer solcher Einschnitt war Ende des Jahres 2011, als Google ihren Übersetzungsdienst "Google Translate" von kostenlos auf Bezahlung oder unter Einhaltung neuer Bedingungen geändert hatte.
Alle jene Websites auf denen dann ein solcher fremder Dienst essentiell für die Nutzung der Website ist, haben ein erhebliches Problem, sobald dieser nicht mehr - oder zu für den eigenen Bedarf nicht erfüllbaren Bedingungen - verfügbar ist. Es ist daher besser, nicht auf solche Dienste zu vertrauen oder sich zumindest ein Konzept zurechtzulegen für den Fall, dass ein Dienst nicht mehr verfügbar ist.
Im Prinzip ist es dabei so wie das Anlegen einer eigenen Domain im Vergleich zur Nutzung eines Blogger-Portals oder eines Portals wo man sich einen eigenen Bereich einrichten kann. Sobald das Portal seinen Dienst einstellt oder aus irgendeinem Grund beschließt, dass Ihr Angebot nicht mehr dazupasst und Sie daher ausgeschlossen werden, war jede Aufbauarbeit dieser Webpräsenz vergeblich. Deswegen zahlen sich auch die paar Euro pro Monat aus, die eine eigene Domain kostet, wenn man die eigene Webpräsenz ernsthafter angehen will.
Wenn Sie eine eigene Domain haben, dann stellt sich nicht nur die Frage nach der Namensgebung sondern auch, welche Top-Level-Domain es sein soll und ob und welche Subdomains man anlegen soll. Wie auch sonst, ist es vorteilhaft, sich daran zu orientieren, wie das von den Großen und von dem Meisten gemacht wird. Das ist dann das, was der User erwartet.
Eine Domain besteht in der Regel aus drei Elementen - es können auch nur zwei oder mehr als drei sein.
Beispielsweise bei www.praktiker.at ist:
Im Grunde ist es ziemlich egal, was Sie auswählen, weil die meisten Domains als Link weitergegeben werden - vor allem über Suchmaschinen - oder als Lesezeichen gespeichert sind. Einzig die Sublevel-Domain www hat praktische Vorteile.
Zur Auswahl der Top-Level-Domain. Bei den Top-Level-Domains hat sich ein ziemlicher Wildwuchs entwickelt. Weil es halt ein Bombengeschäft ist. Die Klassiker sind com für Firmen und org für Organisationen resp. nichtkommerzielle, nicht private Websites. Diese sind aber eher nur dann passend, wenn die Website auch in englischer Sprache ist. Ansonsten ist es eher passender - für Deutsch - die Länder-Domain zu verwenden. Eher schwieriger zu merken sind Top-Level-Domains wie media oder so halboriginelle Sachen wie beispielsweise die Länderkennung von Tovalu, nämlich tv für Fernsehgerätehersteller oder Website mit TV-Programm. Auch Zusammenziehungen mit der Second-Level-Domain wie beispielsweise priv.at. Das schaut lustig aus, ist aber nicht so leicht zu merken. Wenn sich jemand einen Domain-Namen merkt, dann merkt er sich zumeist nur die Second-Level-Domain - im Beispiel also "praktiker" - und er versucht es dann mit den naheliegenden Top-Level-Domains, wenn er die Website aufrufen will.
Zur Auswahl der Second-Level-Domain. Diese kann man frei wählen - sofern sie halt noch nicht vergeben ist. In den Anfangszeiten des Internet fand man es attraktiv, eine ganze Kategorie für sich zu belegen. Beispielsweise als Installateur installateur.xx. Erstens sind diese aber längst vergeben und zweitens ist halt ein Eigenname auf Dauer sinnvoller. Google heißt ja auch nicht suchmaschine oder flickr nicht photo. Mit einem Eigennamen ist man auch nicht auf eine Sprache festgelegt. In den Anfangszeiten war es stark in Mode, dass man für jede Kleinigkeit eine eigene Domain angelegt hat. Beispielsweise machten das Gerätehersteller für jede Produktgruppe. Das passiert heute nur noch selten. Heute ist es eher so, dass auch sehr große Hersteller oder Anbieter unter einer Domain alles zeigen. Für die Unterteilung gibt es dann - ganz simpel - Ordner. Unter www.hersteller.xx/tv/ findet man dann den Bereich mit den Fernsehern des Herstellers, beispielsweise.
Zur Auswahl der Sublevel-Domain. Diese stellt man selbst in der Konfiguration seiner Website ein. Der Standard ist www. Früher wurde die Sublevel-Domain auch gerne dazu verwendet, die Domain in sogenannte Microsites aufzuteilen. Das ist mittlerweile eher unüblicher. Also früher eher tv.hersteller.xx und heute eher - für den selben Zweck - www.hersteller.xx/tv/. Heute wird die Sublevel-Domain eher dazu verwendet um die Codierung des Contents auszuwählen. Für normale Webbrowser also beispielsweise www und für die Nutzung über Smartphones beispielsweise m oder mobile. Obwohl es dafür eigentlich keinen praktischen Grund gibt. Um welches Gerät es sich handelt, kann ein kurzes Javascript-Script innerhalb ein paar Millisekunden herausfinden und entsprechend umschalten. Es ist auch unpraktisch für den User, der dann unterschiedliche Lesezeichen je nach Gerät braucht. Viele User verwenden ihre Lesezeichen-Sammlung parallel auf verschiedenen Geräten.
www als Sublevel-Domain hat praktische Vorteile. Eine Zeit lang war es modern, dass die Sublevel-Domain überhaupt nicht genutzt wurde. Also beispielsweise nicht www.praktiker.at sondern praktiker.at. Weil es kürzer ist. Das ist freilich richtig. Aber der Vorteil der Sublevel-Domain www ist, dass das das eindeutig als Domain-Name zu erkennen ist. Nur praktiker.at ist da nicht so klar und zur Verdeutlichung müsste man das dann als http://praktiker.at anführen, was erst recht umständlich ausschaut. Auch wenn der Mensch auch praktiker.at als Domain-Name richtig lesen wird, ist das aber nicht so sicher wie bei Programmen, die im Text vorkommende URLs automatisch in Links umwandeln. Beispielsweise wenn innerhalb eines E-Mails der Domain-Name vorkommt, werden www.praktiker.at oder http://praktiker.at automatisch in Links umgewandelt, mobile.praktiker.at oder praktiker.at typischerweise aber nicht.
Sofern man die Möglichkeit dazu hat, Einstellungen am Webserver vorzunehmen, ist es jedenfalls sinnvoll, dass eine fehlende Angabe der Subdomain automatisch ergänzt wird. Wenn also jemand über seinen Browser praktiker.at aufruft, sollte das dann automatisch in www.praktiker.at gewandelt werden, sodass die Website ohne Fehlermeldungen erreicht wird.
Ordner- und Dateinamen. Für Ordner- und Dateinamen wird - von jenen, die sich mit Suchmaschinen-Optimierung beschäftigen - immer wieder empfohlen, dass diese "sprechend" sein sollen. Also eine Ordner-Hierarchie, die das Thema immer weiter eingrenzt und dann ein Dateiname, der dann wie eine Überschrift den Inhalt beschreibt. "praktiker" hat diese Wirkung auf die Reihung in den Suchergebnissen nicht untersucht. Jedenfalls ergeben sich daraus extrem lange URLs.
Ordner- und Dateinamen unter praktiker.at. Unter praktiker.at sind alle HTML-Dokumente - also das, was man über einen Weblink aufruft - im Hauptordner, also nicht thematisch in Ordner verteilt. Die Dateinamen haben bis zu 8 Zeichen, die zwar einem System folgen, aber nicht "sprechend" sind und das wegen der Kürze auch nicht sein können. Der Vorteil sind extrem kurze URLs. Die Reihung in Suchmaschinen ist durchaus sehr gut.
Wie Suchmaschinen arbeiten, weiß man in Wirklichkeit nur sehr grob. Dass sie so primitiv arbeiten, sodass die Auswertung auf Basis von Dateinamen passieren würde, ist nicht sehr wahrscheinlich. Es ist vielmeher davon auszugehen, dass die Inhalte der Seiten analsyiert werden und so dann erkannt wird, in welcher Tiefe ein Thema behandelt wird, nach dem gerade jemand sucht.
Jedenfalls Google ist in der Lage, den Inhalt eines Textes zu "verstehen" und daher auch zu bewerten. Das ist jedenfalls am Übersetzungsdienst translate.google.com gut erkennbar. Es ist daher sogar zu bezweifeln, das häufiges Vorkommen von Reizwörtern innerhalb eines Textes - was auch häufig empfohlen wird - einen nennenswerten Einfluss auf die Reihung in den Suchergebnissen hätte. Es ist vielmehr eher wahrscheinlich, dass mutwillig häufiges Vorkommen solcher Reizwörter erkannt wird und einen negativen Einfluss auf die Reihung haben könnte.
Wirklich wichtig für korrekte Suchergebnisse dürfte es nur sein, dass die Inhalte logisch korrekt ausgezeichnet sind. Das ergibt sich aber automatisch, wenn die Darstellung auch auf einem Nur-Text-Webbrowser funktionieren soll - was auf praktiker.at zutrifft.
Ohne ihre eigene Kreativität einzuengen, sollten Sie aber einige Regeln unbedingt beachten um die Handhabung für den Besucher zu erleichtern. Es geht darum, dem Besucher die Informationen in einer Form zu zeigen in der er sich leicht zurechtfindet. Und das ist ganz einfach so, wie er das bereits von anderen Websites gewohnt ist.
Die meiste Zeit verbringt der Besucher auf fremden Websites.
Seien Sie daher nicht zu sehr originell. Sie können nicht davon ausgehen, dass sich jeder Besucher lange damit auseinandersetzen will, wie etwas gemeint sein könnte und was Sie sich bei der inneren Logik Ihrer Website gedacht hatten. Es gibt zahlreiche bewährte Vorgangsweisen in der Handhabung einer Website bei Navigation, Darstellung von Standard-Elementen und Strukturierung des Inhalts, die auf den meisten Websites angewendet werden.
Stellen Sie sich einen Radioapparat vor. Links ist ein Knopf, rechts ist ein Knopf. Sie wissen - ohne jegliches Nachdenken - aus der Erfahrung, dass links der Lautstärkeregler ist und rechts die Senderwahl. Wenn es einen großen und einen kleinen Knopf gibt, dann ist der kleinere der Lautstärkeregler und der größere für die Senderwahl. Eine solche Lösung versteht jeder sofort, weil das so "gelernt" ist. Mit jedem anderen Design muss sich der Anwender erst - wenn auch nur kurz - beschäftigen. Dies sollte auch auf einer Website vermieden werden.
Möglicherweise haben Sie viel bessere Ideen für die Bedienung einer Website. Ja, das kann schon sein. Auch, dass Ihre Icons für verschiedene, gängige Funktionen viel schöner sind als die üblichen. Aber: Man muss diese erst lernen. Es gibt gutes Design, es gibt schlechtes Design. Auch gutes Design muss aber erst gelernt werden. Je länger und häufiger Ihre Besucher sich typischerweise auf Ihrer Website aufhalten, desto mehr Spezialitäten im Design können Sie einsetzen, weil sie dann durch die häufige Nutzung auch gelernt werden. Zu sehr ausgerissen sollte es aber auch dann nicht sein, weil irgendwann kommt jemand zum ersten Mal auf Ihre Seite und wenn er sich da nicht zumindest grob gleich zurechtfindet, wird er vielleicht nicht wiederkommen und dann kein häufiger Besucher werden können.
Das Einhalten von Konventionen erleichtert es dem Besucher, sich auf Ihrer Website sofort - oder zumindest: rasch - zurechtzufinden. Beachten Sie dabei besonders:
Gestaltung von Links. Zumindest dann, wenn ein Link innerhalb eines Textes ist, sollte dieser unterstrichen und/oder in einer anderen Farbe sein. Bei klar erkennbaren Menüs oder Link-Listen ist die Gestaltung der Links weitestgehend egal, da hier in der Hauptsache Links erwartet werden.
Verwenden Sie Unterstreichen von Text ausschließlich für Links. Und zwar auch dann, wenn Sie auf Ihrer Website Links nicht durch Unterstreichen kennzeichnen. Unterstreichen ist zur Darstellung von Weblinks üblich und wird daher auch so verstanden.
Die Farbe der Links sollte sich ändern, wenn diese bereits besucht sind. Der Besucher muss sich dann nicht erinnern, was er bereits alles angeschaut - resp. im Cache seines Webbrowsers - hat. Das war zumindest die ursprüngliche Intention bei der Konzeption. Tatsächlich wird das auf prominenten Websites kaum angewandt und es dürfte sich daher auch kaum jemand daran orientieren. Es kommt auch darauf an, welches Publikum Sie ansprechen wollen. Ein eher technisch orientiertes Publikum wird eher Wert darauf legen. Vollkommen Ahnungslose könnten evtl. sogar durch die unterschiedliche Einfärbung irritiert sein, weil sie nicht wissen, was das bedeutet.
Bei jedem Webbrowser gibt es eine Vorgabe wie die Eingabefelder, die Wahlfelder und die Schaltflächen für Online-Formulare aussehen. Auch wenn dieses Design möglicherweise nicht sonderlich schön sein sollte, ist es dennoch besser, daran nicht viel zu ändern. Der Besucher soll die Funktion jedes Elements ohne Rätseln erkennen und sich daher sofort zurechtfinden können. Brauchbarkeit ist wichtiger als "schön aussschauen".
Manche Webbrowser ignorieren die Umgestaltung von Standard-Elementen in Online-Formularen. Beispielsweise den Radio-Button - eine Auswahl aus mehreren Punkten treffen - oder das Auswahlfeld lassen sich bei vielen Browsern nicht - oder nur sehr eingeschränkt - ändern. Radio-Button heißt das übrigens deswegen, weil die Tasten für die Betriebsart - oder Wellenbereich - früher bei Radios so war, dass aus einer Gruppe von mehreren Tasten nur eine gewählt sein kann.
Zeitweise ist es modern, häufiger auf einer Website verwendete Funktionen mit Icons zu zeigen. Das hängt vom gerade aktuellen Design-Trend ab; auch wie diese Icons dann ausschauen. Also beispielsweise ein Icon, das einen Drucker zeigt für "Drucken". Zeitweise geht der Trend auch eher in die Richtung, solche Funktionen mit Text zu bezeichnen. Icons sehen zwar schöner aus als ein Text-Link, aber sie sind nicht für alle Besucher so eindeutig.
Wählen Sie Icons sorgfältig aus. Wenn Sie Icons verwenden, dann wählen Sie besser sehr gängige und möglichst eindeutig verständliche Icons. Beispielsweise die so gerne verwendete Darstellung eines Vergrößerungsglases wird für zweierlei verwendet: Suchen oder Vergrößern. Wenn die Funktion nicht eindeutig aus dem Zusammenhang hervorgeht, muss der Besucher zumindest kurz Nachdenken. Wenn also das Symbol für Vergrößerungsglas innerhalb eines Bildes angezeigt wird, ist die Funktion eindeutig. Wenn das Vergrößerungsglas etwas entfernt von einem Bild angeordnet ist, könnte das auch eine Suchfunktion sein.
Wenn ein User JavaScript ausgeschaltet hat oder der verwendete Browser JavaScript nicht verarbeiten kann, dann ist es auch besser, dass erstens die Website auch anständig ohne JavaScript funktioniert und zweitens, dass Buttons und Schalflächen, über welche JavaScript-Funktionen ausgelöst werden, nicht angezeigt werden.
Das kann man mit minimalem Aufwand über CSS Styleshets in Verbindung mit JavaScript lösen. Dafür wird also allen solchen Elementen eine class zugeordnet und diese mit display: none definiert. Damit werden Buttons und Schaltflächen mit JavaScript-Funktionen nicht angezeigt. Nun setzt man in den Header eine JavaScript-Anweisung mit document.write() mit der die betreffende CSS-class - je nachdem, was zutreffend ist - auf display: inline resp. display: block umgeschaltet wird.
Wenn JavaScript also nicht funktioniert, dann gilt die ursprüngliche Anweisung in der CSS-Definition und wenn JavaScript aktiviert ist, dann wird diese Definition aufgehoben und daher die JavaScript-Buttons angezeigt.
Sowieso kann man das auch umgekehrt machen für Elemente oder Textblöcke, die nur dann angezeigt werden, wenn JavaScript nicht verfügbar ist.
Das ist also sehr unkompliziert und verhindert Irritation beim User durch funktionslose Buttons. Freilich kann man das nur über CSS lösen.
Bei Nur-Text-Browsern funktioniert das nicht. Bei Nur-Text-Browsern kann man über CSS keine Elemente ausblenden, da wird alles angezeigt. Damit das aber dennoch verständlich bleibt, ist es nötig, dass dann dazu Text angezeigt wird, der darauf hinweist, dass das nur für JavaScript gilt. Unter der Annahme, dass mit der class JAJSCR der Textblock nur unter JavaScript angezeigt wird, kann man das beispielsweise so lösen:
![[praktiker.at]](images/logprapt.svg)
<span class="JAJSCR">Die Berechnungen werden jeweils am Ende eines Absatzes angezeigt<span style="display: none"> (= JavaScript erforderlich)</span>.Wenn das also über einen Webbrowser angezeigt wird, der CSS nicht verarbeiten kann - also einem Nur-Text-Webbrowser -, dann wird zwar der Hinweis angezeigt, der nur bei JavaScript-Unterstützung gilt, aber eben auch der Hinweis darauf, dass das nur bei JavaScript-Unterstützung gilt.
Noch eleganter ist es freilich, wenn Elemente und Textblöcke, die nur für JavaScript-Unterstützung gelten, über JavaScript eingefügt werden und daher bei einem Browser ohne JavaScript - unabhängig davon ob CSS unterstützt wird oder nicht - von vornherein garnicht in der Seite vorhanden sind.
Das kann man entweder über die JavaScript-Funktion document.write() oder besser über element.innerHTML() oder element.insertAdjacentHTML() lösen. Damit werden diese Elemente oder auch Textblöcke erst in den Inhalt der Seite eingefügt. Wenn JavaScript nicht funktioniert, dann passiert das freilich nicht und sind daher diese - ohne JavaScript-Unterstützung unnötigen - Elemente nicht vorhanden.
Verwenden Sie keine Phantasie- resp. Marketingbezeichnungen in Menüs sofern diese nicht bereits einen Bekanntheitsgrad wie "Walkman" oder "iPhone" haben sollten. Ein gutes Negativ-Beispiel sind die zahlreichen Marketing-Bezeichnungen auf Websites von Handy-Netzbetreibern, bei denen jeder für die selbe Sache eine andere Bezeichnung verwendet. Sie müssen auf Ihre Kunstwörter freilich nicht verzichten, sollten aber in Menüs allgemein verständliche Bezeichnungen wählen.
Verwenden Sie präzise Bezeichnungen. Beispielsweise die so häufig verwendete Bezeichnung "Info" für einen Menüpunkt sagt nichts darüber aus, worüber informiert wird. Der Besucher geht ja davon aus, dass er auf Ihrer Website in allererster Linie Informationen findet und kann daher mit "Info" nichts anfangen. Vermeiden Sie auch mehrdeutige Wörter. Beispielsweise der Menüpunkt "Position" kann zu Ihrer Adresse resp. einem Stadtplan-Ausschnitt oder aber auch zu einer Stellungnahme führen. Also alle Bezeichnungen, die mehrdeutig - und daher nur im jeweiligen Kontext verständlich sind -, sind für Menüs - wo sie typischerweise alleinstehend verwendet werden - ungeeignet.
Es ist gut, den Besucher zum Denken anzuregen. Aber mit intelligenten Dingen, die für ihn auch wertvoll sein können. Nicht nachdenken zu müssen, was mit einer Bezeichnung gemeint sein könnte bedeutet, nicht von den eigentlichen Inhalten Ihrer - hoffentlich interessanten Website - abzulenken.
Wenn Sie einem Gast ein Wiener Schnitzel mit Fischbesteck vorsetzen, dann wird er wohl in der Hauptsache damit beschäftigt sein, mit dem Fischbesteck zurechtzukommen. Vom Schnitzel als solchem wird er eher weniger mitbekommen.
Ihnen gehört nur das Innere der Browser-Fenster.
Alles Andere gehört dem Besucher.
Es ist sein Rechner und seine Software.
Sie sollten also nichts verändern oder gar Funktionen des Webbrowsers außer Kraft setzen. Dazu gehört beispielsweise:
Stellen Sie sich Folgendes vor: Sie sitzen vor dem Fernseher und es ändert sich die Gehäusefarbe, die Tasten auf der Fernbedienung werden umbelegt, einige deaktiviert und der Fernseher schaltet auf ein Programm um, das Sie eigentlich nicht sehen wollten. Davon wäre wohl kaum jemand begeistert.
Das ist freilich bei Web-Seiten auch nichts Anderes.
Um eigene Webseiten davor zu schützen, innerhalb anderer Webseiten dargestellt zu werden - also innerhalb eines Framesets oder in einem iFrame - wird bei einem Apache-Webserver in die Datei .htaccess zur Server-Konfiguration folgende Zeile eingegefügt:
Header always append X-Frame-Options SAMEORIGINDie Anzeige der Seiten - "SAMEORIGIN" - ist also nur für Seiten erlaubt, die innerhalb eines Framesets von der selben Domain angezeigt werden. Es funktioniert dann also freilich die Darstellung Ihrer eigenen Webseiten, die in eigene Webseiten eingebettet sind.
Dieser Befehl schickt mit den Webseiten eine Anweisung im Dokument-Header mit. Das Einbinden in eine fremde Seite ist dadurch nicht unterbunden - der Server liefert die Seite also aus. Es handelt sich dabei nur um eine Anweisung für den Webbrowser, eine Seite nicht innerhalb einer fremden Seite - fremdes Frameset oder innerhalb iframe-Element - anzuzeigen. Es hängt also dann vom Webbrowser des Besuchers ab, ob die Seite tatsächlich geblockt wird. In der Regel wird dann ein Link zum originalen Speicherplatz angezeigt. Die meisten neueren Webbrowser folgen dieser Anweisung des Servers.
Mit folgenden Befehlszeilen in der .htaccess können Sie verhindern, dass Fotos von Ihrer Website in andere Seiten eingebunden werden. Gezeigt wird in diesem Beispiel das Bild "ersatzbild.gif":
RewriteEngine on
RewriteCond %{HTTP_REFERER} ^(\?|\&)
RewriteRule \.(jpg|jpeg)$ http://www.servername.at/ersatzbild.gif [NC,R,L]Bei diesem Beispiel wird also vom Webserver nicht das erwartete Bild ausgeliefert, sondern ein selbst ausgewähltes Ersatzbild evtl. mit einem entsprechenden Hinweis. Hier in dem Beispiel gilt das für alle Fotos mit der Dateiendung .jpg oder .jpeg. Das ist nicht vom Webbrowser abhängig.
Das schützt also nur vor Hotlinking, also das Einbinden von Fotos in fremde Webseiten, wobei das Bild jeweils direkt vom Original-Speicherort - also Ihrem Server - geladen wird. Dass jemand ein Foto herunterladet, es auf seinem eigenen Webserver speichert und dann innerhalb seiner Website zeigt, ist damit freilich nicht verhindert.
Es ist also nicht so schwierig und selbst leicht vorzunehmen, die Serverkonfiguration zu ändern. Ob man die Berechtigung dazu hat, die Serverkonfiguration selbst zu ändern, hängt vom Vertrag mit dem Hoster ab. Bei Billig- oder Gratis-Webspace ist das oft nicht möglich.
==> Clickjacking: Fremde Websites mit transparenter Klick-Falle
JavaScript ist eine recht simple Möglichkeit, einige Funktionen auf einer Webseite auszuführen, welche die Bedienung für den User erleichtern. Um JavaScript einzusetzen, muss man kein Programmierer sein, man kann sich die Code-Snippets - Code-Fragmente für einzelne Abfragen und Vorgänge - zusammensuchen, an die eigenen Anforderungen anpassen und so recht flott zusätzlichen Komfort schaffen - oder auch Fehler bei der Navigation zwischen den eigenen Webseiten abfangen.
JavaScript ist zwar ziemlich simpel und auch für den Nicht-Programmierer schnell verständlich, aber bei Fehlern in der Programmierung kann es passieren, dass der Webbrowser JavaScript für die betreffende Webseite komplett deaktiviert und dann alle anderen JavaScript-Funktionen auch nicht mehr arbeiten. So genannte "fatale Fehler" müssen daher vermieden werden.
Ein normaler Fehler ohne unerlaubte oder unmögliche Zugriffe verursacht nichts weiter, als die jeweilige Funktion einfach nicht funktioniert. Das ist dem Webbrowser egal. Die häufigsten Ursachen für Fatale Fehler bei JavaScript sind recht leicht zu vermeiden. Diese sind beispielsweise:
Den Zugriff auf übergeordnete Seiten ist durchaus nicht uninteressant. Wenn man also eine Seite hat, die auch normalerweise innerhalb eines Framesets oder eines iframe dargestellt wird, gibt es vielleicht den Wunsch, festzustellen, ob sich die Seite unterhalb einer eigenen oder einer fremden Website befindet.
Man kann also die übergeordnete Seite abfragen und das funktioniert auch, wenn es sich dabei um eine Webseite handelt, die am selben Server liegt. Bei eigenen Seiten ist das also kein Problem. Falls es sich allerdings um eine fremde Seite handelt, löst das einen fatalen Fehler aus.
Es gibt keine JavaScript-Funktion mit der Möglichkeit, eine über- oder untergeordnete Seite im selben Browserfenster abzufragen ohne damit einen fatalen Fehler auszulösen, falls es sich dabei um eine fremde Seite handelt. Als fremde Domain gilt übrigens auch eine andere Subdomain. Wenn beispielsweise der Befehl von einer Seite unter www.praktiker.at aufgerufen wird und auf eine Seite zugreift, die unter m.praktiker.at liegt, dann gilt das als Zugriff auf eine fremde Domain und daher als Verstoß gegen die Same Origin Policy. Auch aus diesem Grund sollte man statt Subdomains für den selben Zweck eher Unterordner verwenden.
Das Blöde an der Sache: Man will also feststellen, ob die eigene Seite vielleicht unerlaubt innerhalb einer fremden Webseite dargestellt wird und wenn das der Fall ist, dann kann man garnichts weiter dagegen tun, weil dann - wegen des fatalen Fehlers durch den unerlaubten Zugriff - die meisten Webbrowser JavaScript für die eigene Seite gleich komplett deaktiveren. Es funktioniert daher beispielsweise dann kein Code mehr, der bewirken könnte, dass die Seite allein neu geladen wird (Framebreaker).
Man kann nur ermitteln, ob die eigene Webseite unterhalb - resp. innerhalb - einer anderen Webseite dargestellt wird. Dies geschieht mit der Abfrage, ob die aktuelle Seite in der Hierarchie an erster Stelle ist - was also logisch bedeutet, dass die Seite nicht innerhalb einer anderen Seite resp. innerhalb eines Framesets angezeigt wird:
if (self == top) { }Diese Abfrage ist erlaubt. Nun weiß man also, ob die eigene Webseite innerhalb einer anderen angezeigt wird oder nicht. Man kann also mit self == top abfragen, ob die eigene Seite an Top-Position im Fenster steht. Weil das betrifft nur die eigene Seite.
Man kann aber nicht abfragen, ob diese übergelagerte Seite eine eigene ist oder nicht. Weil dafür muss man auf die übergelagerte Seite zugreifen und das verursacht einen fatalen Fehler, wenn es sich um eine fremde Seite handelt.
Sofern man sowieso ausschließen kann, dass es sich um eine eigene Seite handelt, weil man die betreffende Seite nie aus einer eigenen anderen Seite heraus anzeigt, hat man Glück und braucht diese Abfrage eh nicht. Es kann sich dann also sowieso nur um eine fremde Seite handeln.
Um die Seite dann aus der Umklammerung einer fremden Webseite zu befreien - das Frameset zu sprengen, daher auch als "Framebreaker" bezeichnet -, kann man das also mit einer einfachen JavaScript-Abfrage oben im Header der Webseite so machen:
<script type="text/javascript">
if(self != top)
top.location.replace('http://www.praktiker.at/webtec04.htm');
</script>Dieses Beispiel stellt also die hier aktuelle Seite an die Top-Position im Browser-Fenster, falls diese innerhalb einer anderen Webseite angezeigt wird. Hier im Beispiel wurde der komplette Pfad zum Dateinamen angegeben. Alternativ kann man statt
top.location.replace('http://www.praktiker.at/webtec04.htm');auch
top.location.replace(self.location);angeben. Das hat den Vorteil, dass man das nicht für jede Seite extra - auf den Dateinamen der aktuellen Seite - ändern muss. Falls aber die Seite überhaupt gestohlen wurde und daher von einem anderen Server aus aufgerufen wird, dann wird durch die Hartverlinkung die Seite vom korrekten Speicherplatz auf Ihrem Server neu geladen. Sofern der Dieb - hoffentlich - dumm oder faul genug ist, auch eine solche Zeile aus der gestohlenen Seite nicht herauszunehmen.
top.location.replace() statt top.location.hrefEs wurde hier die Funktion top.location.replace() angewandt. Zumeist wird für den selben Zweck die Funktion top.location.href empfohlen. Erstere hat allerdings den Vorteil, dass die an die Top-Position nun neu geladene Seite die vorherige Situation des Anzeigens innerhalb einer anderen Webseite in der Browser-History überschreibt. Deswegen "replace", also "ersetzen".
Die Browser-History ist für jedes Fenster - resp. Tab - eine Liste der Reihenfolge der Seiten die besucht wurden. Solcherart kann man mit der Zurück-Funktion zu vorher besuchten Webseiten zurückblättern.
Wenn man aber nun mit top.location.href die Seite an die Top-Position lädt, dann verbleibt die vorherige Situation in der Browser-History. Wenn also die Funktion ausgeführt ist und man zurückblättert, dann gelangt man wieder auf die selbe Seite, die innerhalb einer anderen Seite angezeigt wird und wieder wird diese durch den JavaScript-Befehl an die Top-Position geladen und und man landet wieder dort woher man gekommen ist. Um zur vorherigen Seite zu gelangen - um diese Schleife zu durchbrehen - müsste man also 2mal sehr knapp hintereinander die Zurück-Funktion des Browsers betätigen um zur Seite davor zu gelangen. Dieses Verhalten ist ziemlich unverständlich für den User. Daher ist es günstiger, in diesem Fall top.location.replace() einzusetzen. - Folgendes soll das Prinzip veranschaulichen:
Bei Einsatz von top.location.href sieht die Browser-History so aus:
Bei Einsatz von top.location.replace() sieht die Browser-History so aus:
Es ist freilich sinnlos eine Seite in der History zu belassen, von der automatisch wiederum eine andere Seite aufgerufen wird. Damit kann der User die Zurück-Funktion nicht erwartungsgemäß benutzen.
Die Funktion top.location.replace() gibt es seit JavaScript Version 1.1. Diese wird beispielsweise seit Internet Explorer Version 4 und Netscape Version 3 unterstützt. Das dürfte wohl längst kein Hindernis mehr sein, diese Funktion einzusetzen.
Wenn auf eine Variable oder eine Funktion zugegriffen wird, die noch nicht definiert ist, ist das ein Fehler, der zumindest bewirkt, dass der Code der betreffenden Routine nicht mehr weiter ausgeführt wird.
Das ist freilich ein Schlampigkeits- oder Anfängerfehler: Variable, die innerhalb Funktionen definiert werden (= lokale Variable), sind außerhalb dieser Funktionen nicht verfügbar. Häufig ist es so, dass einer Variablen ein bestimmter Wert abhängig von einer Bedingung zugewiesen wird. Ein Problem entsteht dann, wenn es auch weitere als die vorgegebenen Bedingungen gibt und daher auch die Möglichkeit, dass der Variablen kein Wert zugewiesen wird.
Die Variable ist dadurch nicht vorhanden. In einem solchen Fall sollte man also vorweg die Variable irgendwie belegen. Entweder mit "false" oder ohne Inhalt. Falls dann also der Variablen entsprechend den vorgegebenen Bedingungen kein Wert zugewiesen wird, so ist sie jedenfalls existent und kann daher abgefragt werden ohne einen Fehler zu verursachen.
Um beispielsweise abzufragen, ob eine Variable einen bestimmten Inhalt hat, muss diese Variable bereits vorhanden sein. Die Abfrage, ob der Inhalt einer Variablen "abc" ist wird also - wenn die Variable vorher noch nicht definiert wurde - nicht damit beantwortet, dass der Inhalt der Variablen nicht "abc" ist, sondern mit einem Fehler.
Achten Sie also darauf, dass nicht auf Variable zugegriffen wird, die nur innerhalb einer JavaScript-Funktion angelegt werden - und daher nur innerhalb dieser verfügbar sind - und wenn Sie einer Variablen Inhalte abhängig von Bedingungen zuweisen, dass die Variable auch dann definiert wird, falls keine der Bedingungen zutreffen sollte; falls es eben diese Möglichkeit auch gibt.
Wenn einer Variable abhängig von Bedingungen ein Wert zugewiesen wird, dann kann es bei mehrfach verschachtelten Bedingungen recht aufwendig werden, der Variablen bei jeder nicht erfüllten Bedingung "false" - oder was auch immer der Wert sein soll - zuzuweisen. Es ist dann mitunter einfacher, die Variable mit einem Inhalt zu definieren, der für die Nichterfüllung der Bedingungen steht und danach die Änderungen entsprechend den Bedingungen vorzunehmen. Wenn also keine Bedingung zutrifft dann gibt es die Variable auf jeden Fall. - Also vielleicht statt
if (Bedingung) { var VariableA = 'Ja, das ist richtig'; } else { var VariableA = false; }sicherer und auch kürzer:
var VariableA;
if (Bedingung) { var VariableA = 'Ja, das ist richtig'; }Bei diesem Beispiel wurde also die VariableA zwar "deklariert", aber ihr kein Wert zugewiesen. Falls die Variable bereits vorhanden war und ihr ein Wert zugewiesen ist, dann wird dieser dadurch nicht verändert. Man kann übrigens auch sicherheitshalber mehrere Variable anlegen ohne ihnen vorerst einen Wert zuzuweisen. Dies geschieht in Einem, wobei die Variablennamen durch Kommata getrennt werden. - Das schaut beispielsweise so aus:
var VariableA, VariableB, VariableC;Um einen Fehler zu vermeiden, kann man mit typeof abfragen, ob eine Variable vorhanden ist bevor man sie verwenden will. Die folgende Programmzeile
if (typeof VariableA != 'undefined') { alert('Die VariableA ist vorhanden'); } else { alert('Die VariableA gibt es nicht!'); }zeigt ein Warnfenster mit dem entsprechenden Inhalt an, abhängig davon ob die VariableA existiert oder nicht.
Ebenfalls wird ein Fehler verursacht, wenn über JavaScript auf ein Element auf der Webseite zugegriffen werden soll, das mit einem ID-Selektor benannt ist, aber dieser entweder nicht oder unter selbem Namen mehrfach vorhanden ist.
Ein ID-Selektor darf auf einer Webseite nur einmal vorkommen. Schließlich handelt es sich dabei um die Bezeichnung für ein Element, auf das eindeutig zugegriffen werden können muss. Auch dann, wenn man JavaScript nicht verwendet, darf der selbe ID-Selektor - beispielsweise <p id="Name_des_ID-Selektors">Hier ist der Text</p> - im selben HTML-Dokument nur einmal vorkommen.
Alle aktuellen größeren Webbrowser bieten die Möglichkeit, Fehler in der Webseiten-Programmierung - auch JavaScript - zu finden. Diese Analysefunktionen sind bezeichnet mit "Entwicklertools" (Internet Explorer), Extras > Web-Entwickler > Webkonsole (Firefox) oder - nach Anwählen eines Elements auf einer Webseite mittels Rechtsklick im Alternativ-Menü - "Element untersuchen" o.ä.
Solcherart kann man recht einfach Fehler entdecken resp. die eigene Website auf Fehler prüfen. Man kann sich freilich auch den Code von fremden Websites anschauen und sich davon etwas für seine eigene Website abschauen.
Bei der Programmierung ist Groß-Kleinschreibung von Namen von Dateien, Variablen, Funktionen und Befehlen in manchen Fällen wichtig und in manchen Fällen egal. Je nachdem, wo eine Zeichenkette verwendet wird, wird beispielsweise unterschieden zwischen a und A im Namen. Im Englischen gibt es dafür die präzisere Bezeichnung "case sensitive" (zwischen Groß-Kleinschreibung wird unterschieden) resp. "case insensitive" (Groß-Kleinschreibung ist egal).
Es ist selbstverständlich, dass man in den Fällen, bei denen es darauf ankommt die korrekte Schreibweise berücksichtigt. Beispielsweise ist es selbstverständlich, dass dann der einmal definierte Variabenname Abc bei jeder Verwendung exakt so angegeben wird. Oder, dass eine Funktion in einer Programmiersprache in der korrekten Schreibweise angegeben wird.
Diese Möglichkeit kann aber auch dazu verleiten, beispielsweise unterschiedliche Namen anzugeben wie Abc, aBc, ABC. Theoretisch funktioniert das freilich perfekt. Es handelt sich hier um drei unterschiedliche Namen, weil ja zwischen Groß-Kleinschreibung unterschieden wird. Theoretisch, aber nicht verlässlich in der Praxis.
Der bekannteste Fehler ist der bei Dateinamen. Beispielsweise Unix, Linux unterscheiden dabei zwischen Groß-Kleinschreibung, beispielsweise bei Windows ist das egal. Bei Dateinamen von Webseiten kommt es dann also darauf an, ob der Webserver unter Linux oder unter Windows läuft, ob der Dateiname einer aufgerufenen Webseite hinsichtlich Groß-Kleinschreibung korrekt aufgerufen werden muss. Um Fehler bei Ordner- und Dateinamen in einer URL von vornherein auszuschließen, ist es daher üblich, dabei ausschließlich Kleinbuchstaben zu verwenden.
Eine Möglichkeit für Fehlfunktionen ist - trotz standardgerechter Programmierung - die Fehlertoleranz mancher Webbrowser. Beispielsweise Internet Explorer arbeitet extrem fehlertolerant. Der Vorteil ist, dass auch mitunter ganz schlimm fehlerhaft programmierte Webseiten gut dargestellt werden. Eine dieser "Gutmütigkeiten" von Internet Explorer ist es, dabei in manchen Fällen die Groß-Kleinschreibung zu ignorieren. Dann wird zwischen Abc und ABC kein Unterschied gemacht. Es dauert mitunter sehr lange, bis man auf diesen Fehler draufkommt, obwohl man alles richtig gemacht hatte.
Hier ein Beispiel dafür, ob bei der Angabe der CSS-Class zwischen Groß-Kleinschreibung unterschieden wird. Standardgemäß müsste unterschieden werden:
Abc und ABC nicht unterschieden.Abc { color: green; }
.ABC { color: red; }
Normalerweise wird die Darstellung richtig sein. Beispielsweise Internet Explorer 6 macht dabei aber keinen Unterschied. Und vielleicht einige andere Webbrowser auch. Da es ja nicht schwierig ist, diese mögliche Fehlerquelle zu vermeiden, braucht man sich nicht damit beschäftigen, in welcher Konfiguration beim User das korrekt oder zu sehr fehlertolerant verarbeitet wird.
Die Darstellung von älteren Versionen des Internet Explorer kann man sich in Internet Explorer und Microsoft Edge simuliert anzeigen lassen. Bei Microsoft Edge muss man vorerst im Menü über "Mit Internet Explorer öffnen" in den Internet-Explorer-Modus umschalten. Über Taste F12 die "Entwicklertools" aufrufen und dort "Emulation" und dort wiederum "Dokumentmodus: 5" und "Zeichenfolge des Benutzer-Agents: Internet Explorer 6".
Ein Problem, das vor allem mit alten Webbrosern auftreten kann ist es beispielsweise, wenn auf der selben Webseite mehrere Formulare verwendet werden und bei diesen Formularen beispielsweise Feldnamen über JavaScript angesprochen werden sollen. Wenn da ein Feldname in zwei Formularen gleichlautend ist - das kann dann der Fall sein, wenn beide Formulare von dem selben Script verarbeitet werden -, kann es passieren, dass auf das Feld mit gleichlautendem Namen von einem anderen Formular zugegriffen wird.
Es ist daher beispielsweise auch sinnvoll zu vermeiden, dass gleiche Namen mehrmals auf einer Seite vorkommen. Wenn man diese mit JavaScript wie Variablennamen verwendet, ist das sowieso deswegen kritisch, weil das Ziel einer Variablen nur einmal vorkommen darf.
Scripte für Formulare geben in der Regel einige Variablennamen fix vor. Beispielsweise order für das Sortieren der Ausgabe-Daten. Wenn man also zwei Formulare auf einer Seite verwenden will, die auf das selbe Script zugreifen, ist es sinnvoller, Varianten dieses Scripts anzulegen, in denen die fix vorgegebenen Variablennamen unterschiedlich bezeichnet sind.
In den allermeisten Fällen wird damit kein Problem auftreten, aber es gibt eben auch alte Webbrowser und Webbrowser, die etwas zu sehr fehlertolerant arbeiten. Daher ist es sicherer, jede nur irgendwie mögliche Fehlfunktion von vornherein auszuschließen. Es hilft auch nicht viel im Straßenverkehr, wenn man Vorrang hat und blind durch die Kreuzung braust. Man hat dann nichts falsch gemacht, falls was passiert ...
name= und id= könnten gleichwertig behandelt werdenÜber JavaScript kann man auf ein Element über die ID-Bezeichnung zugreifen. Wenn der Webbrowser zu sehr fehlertolerant ist - bei den älteren Internet-Explorern ist das beispielsweise der Fall, dann wird auch ein Element angesprungen, dass die selbe name-Bezeichnung hat. name= kommt beispielsweise vor als Benennung für Formularfelder oder kann - veraltet - auch für die Kennung von Sprunganker-Elementen verwendet werden. Sprunganker-Elemente sind Elemente zu denen ein Link innerhalb einer Webseite führt; also beispielsweise eine Kapitel-Überschrift.
Eine Bezeichnung unter id= sollte also auf der selben Webseite gleichlautend nie unter name= vorkommen. Das kann bei zu sehr fehlertoleranten Webbrowsern zu Fehlern führen. Üblich ist es allerdings - und problemlos - wenn bei einem Element die selbe Bezeichnung sowohl unter id= als auch unter name= verwendet wird. Das kann beispielsweise bei Formularelementen der Fall sein. Es ist dann deswegen unproblematisch, weil es letztlich egal ist, ob das Element über die Bezeichnung von id= oder name= angesprochen wird; weil eben beides beim selben Element ist.
Mitte der 1990er-Jahre hatte es einen Browser-Krieg gegeben zwischen den Webbrowsern Netscape Navigator und Microsoft Internet Explorer. Dieser Browser-Krieg wurde dann bekanntlich von Microsoft gewonnen.
Das Problem damals: Netscape und Internet Explorer hatten teilweise mit selbst entwickelten Funktionen gearbeitet. Für den Webprogrammierer war das ziemlich unerfreulich, weil für komplexere Darstellungen einige dieser individuellen Funktionen verwendet werden sollten. Also wurde die Browserweiche erfunden, wobei - abhängig je nach Browser - entweder unterschiedliche Befehle oder überhaupt speziell an Browser angepasste unterschiedliche Webseiten "ausgeliefert" worden sind. Über JavaScript wurde also der vom Browser gemeldete User-Agent-String ausgewertet, der Hinweise zum verwendeten Browser enthält. Das nennt man Browserweiche.
Es hatte unter Programmierern ständig großes Wehklagen darüber gegeben, dass sich der Internet Explorer, der letzlich jahrelang praktisch konkurrenzlos geblieben ist, nur sehr grob an die Empfehlungen vom W3C-Konsortium gehalten hatte. Das W3C-Konsortium entwickelt Empfehlungen für die Webseiten-Programmierung, also Struktur und Elemente zur Darstellung sowie Funktionen, mit denen die Darstellung gesteuert wird. Das betrifft primär die Seitenbeschreibungssprache HTML Hyper Text Markup Language und CSS Cascaded Style Sheets für die grafische Gestaltung der Inhalte. Mittlerweile sind diese Empfehlungen zum Standard geworden.
Sowohl Internet Explorer als auch zuvor Netscape Navigator hatten sich nicht mutwillig gegen die Empfehlungen des W3C-Konsortiums gestellt, sondern sie hatten wichtige Funktionen - eben jeder auf seine Art - entwickelt, für die es damals vom W3C-Konsortium noch keine - oder keine gut brauchbare - Lösung gegeben hatte. Da Internet Explorer so lange allein dagestanden ist, war dieser der De-facto-Standard für Webseiten-Programmierung. An die Empfehlungen des W3C-Konsortiums hatten sich nur - damals recht bedeutungslose - Webbrowser wie Mozilla oder Opera gehalten.
Browserweichen waren nun weiterhin nötig zum Unterscheiden zwischen Internet Explorer und allen jenen Webbrowsern, die sich an den Empfehlungen des W3C-Konsortiums orientiert hatten. Das waren beispielsweise Mozilla, Opera und einige weitere.
Später sind dann Firefox erschienen und Google Chrome. Nun gibt es in der Hauptsache drei bis - wenn man auch Safari dazuzählt - vier große Webbrowser, die alle entsprechend den Empfehlungen des W3C-Konsortiums funktionieren.
Dies heißt also, dass Browserweichen damit hinfällig sein müssten. Da also alle Browser den Empfehlungen des W3C-Konsortiums folgen, gibt es nun keine Unterschiede in der Darstellung mehr.
Das ist die theoretische Annahme unter der praxisfremden Prämisse, dass alles perfekt funktioniert. Entsprechend laut tönen auch viele - zumindest die lautesten - "Experten", dass Browserweichen der Vergangenheit angehören - und sogar unzeitgemäßer, schlechter Programmierstil wären. Also quasi in der Art: Wir gehen von der Perfektion aus und der Besucher einer Website soll schon sehen, was er davon hat, wenn sein Browser nicht so perfekt funktioniert. Und diese Chance hat er ganz sicher, weil es gibt keinen Browser, bei dem wirklich alles perfekt funktioniert.
Die von diesen Experten ausgegebene Parole lautet also für evtl. unterschiedlich programmierte Auslieferung von Code zur Seitenprogrammierung lediglich das Vorhandensein von Features des Webbrowsers abzufragen. Also nur eine Erkennung, was dieser darstellen kann und welche Funktionen dieser unterstützt.
Das Abfragen von Features ist selbstverständlich wichtig - und noch wichtiger als früher. Vor allem deswegen, weil heute auch noch sehr alte Webbrowser im Einsatz sind, mit denen ja auch eine brauchbare Darstellung gelingen soll.
Browserweichen sind allerdings in Spezialfällen weiterhin erforderlich, wenn man bei der Darstellung auf unterschiedlichen Webbrowsern möglichst wenig Kompromisse eingehen will. Die Webbrowser folgen zwar heute alle den Empfehlungen des W3C-Konsortiums, aber es gibt dennoch Unterschiede in der Darstellung bei manchen Funktionen oder Kombinationen von Funktionen. Es passieren - große Überraschung - weiterhin Programmierfehler in den Rendering-Engines der Webbrowser.
Mitunter sind es aber auch falsch verstandene - oder vorerst nicht eindeutig definierte - neue Funktionen, die vorerst nicht einheitlich bei allen Browsern arbeiten. Evtl. muss man dann die betreffende Funktion für einzelne Browser anders lösen oder einen Trick finden um das erwünschte Ergebnis zu bekommen.
Wenn neue Browser-Versionen erscheinen sollte man dann überprüfen, ob die Funktion mittlerweile korrigiert ist und daher die Sonderlösung entfallen kann. Obwohl von manchen Browsern mittlerweile alle paar Monate neue Versionen erscheinen, dauert es mitunter jahrelang, bis eine Fehlfunktion - oder vorerst zu sehr eigenwillig arbeitende Funktion - korrigiert ist.
Es ist also nicht so wie seinerzeit in der Zeit der Browserkriege, dass man ohne Browserweiche keine Chance auf eine brauchbare Darstellung gehabt hatte, weil Funktionen evtl. überhaupt nicht zur Verfügung stehen. Heute sind es eher kosmetische Details in der Darstellung, die aber auch wichtig sind, wenn man als Webprogrammierer und/oder Webdesigner dem User eine auf allen Webbrowsern gleiche und fehlerfrei funktionierende Darstellung bieten will.
In den meisten Fällen, in denen eine Unterscheidung sinnvoll ist, genügt allerdings eine Unterscheidung je nach angewandter Rendering-Engine. Es gibt zwar eine gewaltige Anzahl an Webbrowsern, aber es gibt nur ein paar Rendering-Engines. Heute arbeiten beispielsweise die meisten "kleineren" Webbrowser mit der Rendering Engine wie Google Chrome, weil der Webbrowser-Baukasten Chromium von Google frei verfügbar ist. Es ist heute also auf Basis von Chromium recht einfach möglich seinen "eigenen" Webbrowser herzustellen und unter eigenem Namen anzubieten. Diese haben dann zumeist nur einige spezielle Einstellmöglichkeiten und mehr oder weniger von vornherein eingebaute Features, aber keine Spezialitäten bei der Umsetzung der Darstellung von Webseiten.
[!> Es ist also falsch, dass - wie vielfach behauptet wird - Browserweichen mittlerweile unnötig wären. Wenn komplexere grafische Darstellung oder Funktionen erforderlich sind, sind Browserweichen weiterhin ein - wenngleich heute nur selten nötiges -, wichtiges Werkzeug für den Webprogrammierer. Und zwar einerseits Browserweichen und andererseits Weichen zum Unterscheiden zwischen Rendering Engines. So lange also nicht alle Webbrowser die selbe Rendering-Engine verwenden - was nicht zu erwarten und eigentlich auch nicht wünschenswert ist -, wird die unterschiedliche Behandlung je nach Browser oder Rendering-Engine für einzelne spezielle Funktionen und Kombinationen von Funktionen wohl auch immer aktuell bleiben. Es ist Software immanent, nicht perfekt zu funktionieren. Es kommen schließlich immer wieder neue Funktionen dazu und mit diesen auch neue Fehlerquellen.
Freilich wird man von vornherein jene Funktionen vermeiden, die nicht bei allen wichtigeren Webbrowsern einheitlich arbeiten. Schließlich bedeutet das zusätzlichen Aufwand. Oft kann man eine alternative Lösung finden oder die Funktion überhaupt weglassen. Es bleiben daher nur die wenigen Fälle, wo dies unumgänglich ist. Diesen wird man häufiger begegnen, wenn man neuere Funktionen einsetzen will. Und sowieso, wenn auch alte Webbrowser eine brauchbare Darstellung liefern sollen. Auch jeder hundertste Besucher, der mit einem alten Webbrowser daherkommt, freut sich, wenn die Darstellung Ihrer Website gut brauchbar ist.
[!> Eine Browserweiche mit dem Zweck, auf unterschiedliche Inhalte umzuleiten, ist heute unnötig. Die Unterschiede können durch - meist nur geringfügig - unterschiedliche Programmierung für die Darstellung ausgeglichen werden. Da die Unterschiede ursprünglich zwischen Netscape und Internet Explorer sehr gravierend waren, war das früher mitunter die einfachere und - im Sinne reibungslosen Funktionierens - die bessere Lösung. Mehrfach die selben Inhalte sind auch für die Auswertung durch Suchmaschinen ungünstig.