• Home
• Stummel
• Bilder
• Schulzeit
• Sport
• Dies & Das
• Links
• Kontakt
• Impressum

Einleitung

Ich beschäftige mich seit über 8 Jahren mit der Erstellung und Pflege von Internetseiten. Dabei habe ich Höhen und Tiefen miterleben müssen. Den ersten Tiefschlag musste ich hinnehmen, als ich feststellte, daß der damalige Editor Frontpage 98 zuviel Müll produzierte, den ich nicht mehr kontrollieren konnte. So entschloß ich mich, mich doch endlich mal mit den Grundlagen des Webdesigns zu befassen. Ich fand mich einfach nicht mehr durch den Quelltext- Dschungel!
Als ich begann, die ersten waghalsigeren Schritte mit der Hilfe eines simplen Texteditors zu gehen, wurde Frontpage ganz schnell von meiner Festplatte verbannt. Eine der Höhen, die ich noch erwähnen möchte, ist das Lernen in den Internet-Foren bei spotlight.de. Dort sind zwar allerhand komische Typen unterwegs, die aber mit Rat und Tips zur Seite stehen, wenn man nicht allzu mimosenhaft auf Kritik reagiert. Auf dieser Seite findet ihr Dinge, die ich erst lernen musste und möchte meine Erfahrungen hier mit Euch teilen. Dabei werdet ihr schnell merken, daß ich Abneigungen habe und diese auch mit Wonne pflege. Das ist dann aber auch meine persönliche Sicht auf diese Dinge. Viel Spaß!

Meine bisherigen Arbeiten

Alle diese Arbeiten haben gemeinsam, daß ich bemüht bin, sie valide und den Standards entsprechend aufzubauen. Natürlich muss das Design immer hinter den Ansprüchen zurückbleiben. So ist zu erklären, daß das Layout der Schützenvereins-Seite eher altbacken und bieder wirkt - dafür steckt dort eine Menge PHP-Programmiererei drin, die das Darstellen der Ergebnisse ermöglichen soll. Für diese Seite wurde auch ein ziemlich umfangreiches Back-End programmiert, welches die Eingabe der Daten für Termine, Aufsichtspläne, Ergebnisse und Starttermine durch die Sportleitung ermöglicht. Für solche Arbeiten benutze ich PHP auf Basis einer MySQL-Datenbank.
Ich habe für alle hier gelisteten Seiten den kompletten Arbeitsablauf getätigt: vom Layout über die Bilderstellung bis hin zur Fertigstellung der kompletten Seite. Dabei versuche ich immer, nur Technologien zu nutzen, die einen barrierefreien Zugang ermöglichen - kein JavaScript; nur HTML, CSS und PHP.

die Begriffe...

HTML:

HTMLHypertext Markup Language ist die Sprache aus der Webseiten gemacht werden - quasi das Grundgerüst einer Webseite, welches die Inhalte logisch gliedern soll, ohne sie grafisch zu beeinflussen. Aber in diesen Quelltext können Verweise auf die Darstellung mittels CSSCascading Style Sheet eingebettet werden. Eine Webseite kennt keine Höhen und Breiten und all die anderen Dinge, die man von der papierbezogenen Welt so kennt. Ach ja, HTML ist keine Programmiersprache, sondern beschreibt nur, wie die Inhalte strukturiert werden sollen - eine Seitenbeschreibungssprache!

CSS:

Anweisungen, um beispielsweise Farben, Positionierungen oder die Größen der Schriftarten den einzelnen Tags des Quellcodes zuzuordnen. Dazu kann man diese Anweisungen direkt in die Tags oder in eine externe Datei schreiben. Änderungen in dieser Datei haben sofortige Auswirkungen auf das Aussehen des gesamten Internetauftritts. Das erspart eine Menge Arbeit und dient der strikten Trennung von Inhalt und Layout .

PHP:

PHPPHP: Hypertext Preprozessor ist eine weit verbreitete serverseitige Scriptsprache, die aus den Ergebnissen des Scriptes und dem restlichem HTMLHypertext Markup Language-Gerüst fertigen -Quellcode erzeugt und erst dann an den Browser ausliefert. Das hat den entscheidenden Vorteil, daß es dem Ersteller der Seite egal sein kann, ob der Besucher der Seite eine Scripterweiterung seines Browsers aktiviert hat. Da man keinerlei Kenntnisse über den Rechner, dessen Konfiguration und die Größe des benutzten Browserfensters auf der Besucherseite hat, ist es eine der Todsünden des Webdesigns, bestimmte Besucher von der Benutzung öffentlicher Internetseiten auszuschließen oder zu behindern, nur weil man zur Navigation eine aktivierte JavaScript-Erweiterung voraussetzt. Das zeugt von Kurzsichtigkeit und ist ein Zeichen von Unprofessionalität.

Tags:

Sind Markierungen, um dem Quelltext eine Struktur zu geben. Beispiele wären die Kennzeichnung eines Textes als Überschrift oder als Liste - wie dieser gesamte Abschnitt. Tags werden in spitzen Klammern geschrieben und sollten danach wieder geschlossen werden - das geschieht mittels eines Slashes. Beispiel anhand des strong-Tags gefällig? Quellcode: <strong>Fetter Text<⁄strong> Ergebnis im Browser: Fetter Text

JavaScript:

Eine Programmiersprache, die ursprünglich von Netscape entwickelt und lizensiert wurde. Die bekanntere und häufiger verwendete Scriptsprache stammt von Microsoft und heißt eigentlich JScript. Diese Programmiersprache wird auf dem Rechner des Besuchers ausgeführt, was in der heutigen Zeit ein immenses Sicherheitsrisiko darstellen kann. Daher ist bei vielen Besuchern die Ausführung von JavaScript deaktiviert worden. Was aber, wenn sich der Entwickler der Seiten darauf verläßt, daß diese Scripte ausgeführt werden können? Wenn Dinge, die für das Design oder die Bedienung extrem wichtig sind, nur aufgrund dieser Scripte funktionieren? Richtig - der Besucher sieht die Seite gar nicht oder nicht, wie sie geplant war.

Validierung:

Es existiert eine Organisation, welche die Richtlinien für die korrekte Verwendung der HTML- oder XHTMLExtensible Hypertext Markup Language -Sprachstandards veröffentlicht - das W3C (World Wide Web Consortium). Validatoren sind Programme oder Onlineangebote, um komplette Webseiten auf die Einhaltung genau dieser Richtlinien zu prüfen und entdeckte Fehler zu melden. Ein freier Service, der es möglich macht, Dokumente in den Formaten HTML und XHTML auf Übereinstimmung zu den W3C Empfehlungen und anderen Standards zu überprüfen. Natürlich erkennt ein solcher Mechanismus keine inhaltlichen Fehler. Sie sind quasi die Rechtschreibprüfung für Webdesigner.
Ein valides HTML-Dokument zeugt in erster Linie für die Einhaltung der W3C Richtlinien und sagt etwas über die Arbeitsweise des Erstellers aus. Die Validität einer Webseite betrachte ich als Grundlage des barrierefreien Zugangs und Basis bei der Problembeseitigung bei Fehldarstellungen in verschiedenen Browsern. Übrigens sind die meisten Webseiten nicht valide - leider!

FTP:

FTPFile Transfer Protocol ist ein Übertragungsprotokoll, mit dem man mittels eines geeigneten Programms die lokal erstellten HTML-Dateien auf den Webspace des Providers uploaden kann. Es können Ordner angelegt werden und die Dateien können wie auf dem lokalen Computer ausgetauscht oder gelöscht werden.

HTTP:

Das Protokoll, Hypertext Transfer Protocolwelches die Browser benutzen, um die HTML-Dateien vom Webspace des Providers downzuloaden. Die darin enthaltenen Tags werden (leider unterschiedlich) interpretiert und dem Computerbenutzer als fertige Internetseite dargestellt.

IP-Adresse:

Jeder Computer im Internet ist durch eine eindeutige Adresse identifizierbar. Diese IP-AdresseIP steht für Internetprotokoll ist die Basis für die Kommunikation aller Internetdienste. Es gibt verschiedene Netzklassen und Eingrenzungsmasken. Eine geläufige IP-Adresse für eine nicht öffentliche IP-Adresse wäre 192.168.152.1, die auch in privaten Netzwerken verwendet werden kann. Alle öffentlichen IP-Adressen müssen bei einem Internetprovider registriert sein. Einige werden fragen, wie man zu einer öffentlichen IP-Adresse kommt, wenn man die Internetverbindung herstellt? Ganz einfach - der Provider, der einem den Internetzugang ermöglicht, verteilt jedem Rechner, der sich einwählt eine dieser Adressen und bedient sich dabei aus einem riesigen Pool, der ihm zur Verfügung steht. Mit der alten Version sind etwa 4 Milliarden unterschiedliche IP-Adressen darstellbar; mittlerweise etwas wenig. Daher gibt es eine neue Version des Internet-Protokolls (IPv6), welches 2^128 Adressen ermöglicht!
Wenn man also einen Domainnamen in die Browserzeile eintippt, stellt man - unbemerkt für den Benutzer - eine Anfrage bei einem der tausenden DNS-Server, der diesen Namen in die entsprechende IP-Adresse auflöst. Diese Adresse wird dann direkt kontaktiert, um die dort abgespeicherten HTML-Dateien an den Browser auszuliefern.

DNS:

Ein riesiger Verbund von Servern, auf denen eine Art Index aller im Internet registrierten Domains gespeichert ist. Jeder einzelne dieser DNS-Server hat auch wiederum Informationen über andere DNSDomain Name System-Server gespeichert, die er abfragt, wenn er die vom Benutzer verlangte Domain noch nicht kennt. Diese Anfrage (und die IP-Adresse des fragenden Rechners) wird so von Server zu Server weitergereicht, bis der erste DNS-Server gefunden wird, der einen Verweis auf den Domainnamen in seinen Registern findet. Ziel ist es, einen Domainnamen (bsp. profitel.de) der eindeutigen IP-Adresse des Webservers zuzuordnen, auf dem dieser entsprechende Webspace beheimatet ist.

die Werkzeuge...

Gerade als Neuling oder Lernender steht man vor der Frage, mit welchem Programm Webseiten am einfachsten erstellt werden. Ein simpler Texteditor würde alles bieten, was man zur Erstellung einer HTML-Seite braucht. Aber leider gibt es eine Vielzahl von Softwareprogrammen, die vollmundig erklären, daß man mit wenigen Klicks sein Ziel erreichen kann. Und gerade in den Händen eines Anfängers bauen diese Programme den größten Mist, den das Internet bietet.

WYSIWYG-Editoren

Diese "What You See Is What You Get" Programme vermitteln dem unbedarften Benutzer das Gefühl, daß Webseiten nur zusammengeklickt werden brauchen. Die Finger sollte man tunlichst von den Webdesign-Funktionen der MS Office Programme Word, Publisher & Co lassen. Das sind nämlich keine Webeditoren. Dreamweaver (Macromedia), Frontpage (Microsoft) oder GoLive (Adobe) sind die bekanntesten Vertreter dieser Softwaregattung. Es gibt aber auch gute Software im Freewarebereich.
Aber - ohne Grundkenntnisse der HTML-Syntax und das entsprechende Gegensteuern kotzen diese Programme - ohne Ausnahme - den grauenhaftesten Quellcode aus, dem man sich denken kann. Nur wenn man weiß, welche Fehler und Unzulänglichkeiten man in der Quellcodeansicht wieder geradebügeln kann, sind diese Editoren eine Unterstützung, da sie eine Vielzahl von Tools und Hilfsmitteln bieten, die zeitraubende Tätigkeiten erleichtern können. Das setzt wiederum voraus, daß man so viel Sachkenntnis besitzt, um diese Seite notfalls auch im Texteditor erstellen zu können. Ich erstelle meine Seiten mit dem Dreamweaver aus dem Macromedia Studio 2004 MX. Die Ergebnisse seht Ihr euch gerade an.

Texteditoren

Jeder poplige Texteditor eignet sich dazu eine HTML-Datei zu erzeugen. Glaubt ihr nicht?

So würde es im Browser dargestellt werden:

Mal abgesehen davon, daß diese Seite nicht besonders hübsch anzuschauen ist, fehlen noch wichtige Angaben wie der Doctype, der Link zur eventuell vorhandenen CSS-Datei oder aber die META-Tags für die Suchmachinen. Aber mehr ist eigentlich nicht erforderlich, um diese Seite in einem Texteditor zu erstellen. Man müsste sie nur per FTP auf den Webserver laden und man kann sie im Browser betrachten!

Wer suchet, der findet?

Ein unidirektionales, virtuelles Märchen aus Düsseldorf

Diese Lektüre ist wirklich jedem zu empfehlen, der nicht weiß, warum seine Seiten in einer Suchmaschine nicht auf den vordersten Plätzen landet. Kleiner Vorgeschmack gefällig?

Ich danke Rainer Kersten, dem Verfasser dieser Story, für die Genehmigung, hier diesen kleinen Auszug zitieren zu können und kann nur jedem raten, sich mal in die Märchenwelt entführen zu lassen!
Hier gehts zu der wohl lustigsten Geschichte, seit die Angestellten Googles Bier trinken: www.woodshed.de

die Sünden und Irrtümer...

Frames

Frames ist eine der häufigsten Unsitten bei der Planung und Gestaltung einer Internetseite. Darunter versteht man die gleichzeitige Darstellung mehrerer HTML-Dateien in einem Browserfenster. Oftmals ist die Navigation und der Inhalt der Seite als ein Frameset gestaltet worden. Ein Frameset ist eine unsichtbare Seite, die bestimmt welche HTML-Seiten in welches Frame geladen werden soll. Dadurch ergeben sich natürlich mehrere Nachteile für den Betreiber der Seite. Die Suchroboter einer Suchmaschine, beispielsweise wie Google, durchsuchen alle auf dem Webspace vorhandenen HTML-Dokumente nach Inhalten und können in der Frameset-Datei keinen finden und ignorieren diese. Wenn also doch ein Suchtreffer gelistet werden sollte, kann es passieren, daß nur die einzelne Frameseite angezeigt wird und die Navigation fehlt. Eine zweifelhafte Abhilfe kann nur das Nachladen des gesamten Framesets per JavaScript sein. Auch das Abspeichern als Favorit ist bei Frameseiten sehr problematisch. Besser ist es also, man verzichtet auf diese Möglichkeit einer Aufteilung.

Missbrauch von Tabellen für das Seitenlayout

Der schnellste und leider auch am häufigsten beschrittene Weg, um seine Webseite zu gestalten. Leider ist das <table> Tag laut der ursprünglichsten Bestimmung dafür gedacht, tabellarische Daten darzustellen. Erst später kam die Unsitte auf, in die Zellen einer "Tabelle ohne Linien" Grafiken zu platzieren und diese als Layoutgerüst zu missbrauchen. Viele Anfänger lassen sich durch diese schnelle Platzierung von Grafiken und Webelementen zu dieser Unsitte verleiten. Alle Elemente einer Webseite lassen sich nämlich viel einfacher und wirkungsvoller mittels CSS positionieren und gestalten. Das bedeutet aber, daß man sich mit dieser Thematik befassen muss.

Scripte , die behindern statt zu helfen

Sehr schick sind doch diese Navigationsleisten, die aufklappen, sich drehen und auch noch "klick-klack" dabei machen. Auch hier ist JavaScript das Helferlein im Hintergrund. Wenn man aber für Besucher mit deaktiviertem JavaScript keine alternative Möglichkeit bietet zur nächsten Seite zu gelangen, hat man eine bestimmte Anzahl von Nutzern quasi ausgesperrt. Eine Alternative für Navigationsscripte wäre eine serverseitig ausgeführte Programmiersprache - beispielsweise PHP. Die Navigation auf dieser Seite ist eine reine HTML-Liste, die mit CSS gestaltet wurde!

Eingriffe in das System des Benutzers

Hierzu zähle ich in erster Linie farbige Scrollbalken, das Ausblenden derselben, nervige Popups, zappelige Mauszeiger und das plötzliche Losplärren irgendeines Sounds. Diese Dinge sind meist nur per Javascript möglich und ein Grund diese Scriptart zu deaktivieren. Wenn also der Webmaster einen schlechten Geschmack hat, müssen doch nicht andere darunter leiden- oder? Für viele Besucher sind diese "Stilelemente" abschreckend und ein Grund, diese Seite nie mehr zu besuchen. Die Betreiber gewerblicher Webseiten brauchen sich also nicht über den nur mäßigen Andrang zu wundern, wenn die oben erwähnten Gimmicks ihre Unfähigkeit schon ausreichend präsentiert haben. Es geht nämlich auch ohne diesen Nervkram!

Von Auflösungen und Geckos...

Die Fragen, die in bekannten Webdesign-Foren - z.B. www.spotlight.de - von Anfängern fast jeden Tag gestellt werden, lauten:
Frage: "Wie passe ich meine Seite an die verschiedenen Bildschirmauflösungen an?"
Antwort:"Gar nicht, weil die Auflösung des Besucherbildschirmes nämlich überhaupt keine Aussage darüber trifft, wie groß das gerade geöffnete Fenster des Browsers ist! Die einzige Möglichkeit das Layout einigermaßen dynamisch an die Fenstergröße anzupassen ist es, alle Größenangaben beim Gestalten in Prozent- oder Schriftgradgrößen anzugeben. Beim Ändern der Fenstergröße sollten maximal ein paar Scrollbalken auftauchen - aber das ist normal!
Frage: "Im Internet Explorer sieht meine Seite ganz normal aus, aber im Firefox zerhaut es mir mein schönes Design! Wo steckt der Fehler?"
Antwort: "Meist im Quellcode! Um gleich einmal das Missverständnis aus der Welt zu räumen - der Internet Explorer mag zwar der am häufigsten benutzte Browser sein, er ist aber auch der schlechteste! Er ist auch Spitzenreiter in der Disziplin "CSS-Missachter" und strotzt nur so vor Darstellungsfehlern. Wenn also ein Browser wie Mozilla, Firefox oder Opera Probleme mit einer Seite haben, dann sind die Fehler in aller Regel in der Seite zu suchen und nicht beim Browser. Tips zur Fehlersuche: Als erstes sollte man die Seite validieren, um sicherzustellen, daß der Quellcode in Ordnung ist. Danach orientiert man sich an der Darstellung in einem Gecko-Browser (Mozilla & Co.). Wenn da alles passt, schaut man sich die Seite vorsichtig im Internet Explorer an und versucht ihn durch Einflechten von sogenannten Browser-Hacks auf die richtige Spur zu bringen."