Techniken für den Aufbau, Design und Programmierung

Für den Aufbau, Gestaltung und Effekte gibt es natürlich auch verschiedene Techniken. Ich kann dir hier zwar keinen Kurs in sämtlichen Techniken geben, aber ich werde nun einmal die wichtigsten hier aufzählen und auch versuchen, dir die Vor- und auch Nachteile aufzuzählen.

Techniken für den Aufbau

» Baukastensystem:

Ein Baukastensystem eignet sich vor allem fürr Anfänger, da hier kein Hintergrundwissen erforderlich ist.
Der Vorteil davon liegt natürlich klar auf der Hand, eben das man keinerlei Fachkenntnisse benötigt und das eine Baukastenhomepage sehr schnell erstellt ist.
Der Nachteil liegt in erster Linie darin, dass es viele andere Seiten im Internet gibt, die fast identisch sind. Auß;erdem sind auch die Möglichkeiten nur sehr begrenzt.
Ein weiterer grosser Nachteil besteht auch darin, daß Seiten, die auf einem Baukastensystem aufgebaut sind, in Suchmaschinen meist schlecht indiziert sind und dadurch natürlich auch schlecht gefunden werden.

Wer sich ernsthaft mit Webdesign beschäftigen will, sollte lieber gleich davon die Finger lassen, aber als kleine Spielerei reicht es.

» Template:

Templates sind Web-Vorlagen, die meist mit etwas Hintergrundwissen, an die eigenen Bedürfnisse angepasst werden können. Viele Seiten bieten Templates gratis zum Download an.
Der Nachteil liegt allerdings auch hier, ähnlich dem Baukastensystem, in der Individualität. Es kann leicht vorkommen, dass viele andere Seiten das selbe Design haben.
Templates empfehlen sich allerdings dann, wenn man nicht die Zeit oder die Lust hat, sich mit dem grundlegenden Aufbau der Page, der ja sehr zeitintensiv ist, zu beschäftigen.
Templates eignen sich auch sehr gut, wenn man sich mit html usw. noch nicht so gut auskennt, zum üben.

» Tabellenlayout:

Tabellen verleiten natürlich gerne dazu, den Aufbau der Page in eine Tabelle zu packen. Das Prinzip ist hier ganz einfach, man erstellt eine Tabelle und teilt die Zeilen und Spalten so auf, wie man den Aufbau der Page haben will.

Diese Technik wird sehr häufig von Anfängern verwendet. Sie hat allerdings den großen Nachteil, daß der Quelltext sehr schnell total unübersichtlich wird und auch die HTML Dateien verhältnismäßig groß werden.
Ein weiterer großer Nachteil liegt auch in der Barrierefreiheit, da Screenreader (Bildschirmleseprogramme) sich mit solchen Layouts eher schwer tun und den Inhalt nicht mehr richtig lesen können. Suchmaschinen übrigens auch.

Sehr gute Ansätze für tabbellenlose Layouts findest du bei CSS 4 You.

» Framesets:

Ein Frameset besteht aus verschiedenen Teilbereichen, sog. Frames. Diese Frames sind nichts anderes als verschiedene Internetseiten. Diese Technik wurde vor allem in den 90er Jahren häufig verwendet.

Der Vorteil eines Framesets liegt natürlich vorwiegend in der Gestaltung. So müssen bestimmte Punkte, wie das Menü oder ein Logo bzw. Banner nicht auf jede Seite neu eingebunden werden und deshalb auch nicht bei jedem Aufruf einer Seite neu geladen werden.

Es wird oft als Nachteil angesehen, dass ein Frameset von Suchmaschinen nur schlecht indiziert wird. Dies liegt daran, das Suchmaschinen den Inhalt einer Seite durchsuchen und dieser bei Framesets nicht vorhanden ist. Dem kann man zumindest etwas entgegenwirken, indem man in den sog. noframe-Bereich wichtige Informationen über den Inhalt der Page an die Suchmaschine liefert.
Ein weiteres Problem, der bei Framesets existiert, ist, wenn man durch eine Suchmaschine eine einzelne Seite davon findet, öffnet sich nur die einzelne Seite ohne das Frameset, wodurch man dann natürlich meist auch kein Menü hat. Dies kann man aber auch durch ein kleines Script umgehen und wenn man schon unbedingt auf Framesets setzt, sollte man das auch.
Ein weiterer Fehler, der oft bei Framesets gemacht wird, ist, das man das Set für eine fixe Größe einstellt und es dadurch bei kleineren Auflösungen nicht mehr so toll aussieht.

Frames werden zum Glück kaum mehr verwendet, da viele sie als benutzerunfreundlich ansehen. Diese Technik gilt allgemein in Zeiten von HTML 5 als ein No Go.
Wenn dich dieses Thema interessiert, empfehle ich dir den Artikel von SELFHTML.

» Iframes:

Ein IFrame dient hauptsächlich zur Strukturierung einer Page. Es ist auf den ersten Blick zwar ähnlich wie das Frameset, sollte aber nicht damit verwechselt werden. Ein Iframe wird vor allem dafür gebraucht, um Inhalte eines anderen Dokuments auf einer Unterseite einzubinden.
Man sollte es aber nur für externe Dateien verwenden, für interne Dateien gibt es bessere Lösungen.
Es werden z.B. Online Shops oder YouTube Videos meist auf diese Art eingebunden.

Früher wuren Iframes oft dafür verwendet, den eigenen Inhalt darzustellen. Den Vorteil sahen viele darin, dass z.B. das Menü um das Iframe aufgebaut wurde und das Iframe in die Mitte der Seite ist und hier der Inhalt dargestellt wird. Der Vorteil dieser Methode liegt vor allem darin, dass die Hauptseite und das Menü nur einmal geladen werden. Mit PHP ist das aber sogar noch viel einfacher zu bewerkstelligen und hat auch auf Suchmaschinen, User usw. keine negativen Auswirkungen.
Falls du dich noch besser über Iframes informieren willst, solltest du den Artikel von SELFHTML ansehen.

» Content-Management-System (CMS):

In der heutigen Zeit darf man natürlich das CMS nicht vergessen, weil solche Systeme sehr oft verwendet werden. Die wahrscheinlich Bekanntesten und Verbreitetsten dürften TYPO3 und WordPress sein.

Im Prinzip ist ein CMS zwar auch eine Art Baukastensystem, aber weit besser und vor allem umfangreicher.
Mit einem CMS kommt man meist auch recht gut klar, wenn man keine besonderen Html-Kenntnisse hat.
Ein großer Vorteil besteht auch darin, wenn mehrere Leute Artikel für die Page erstellen sollen.

Techniken für Design und Programmierung

Wenn du dich nun entschieden hast, ob du eine der hier vorgestellten Techniken verwenden willst oder aber einfach jede Seite einzeln erstellen willst, solltest du dir auch über weitere Techniken Gedanken machen, die dir vielleicht das Arbeiten erleichtern und mit denen du eine gute Webpräsenz erstellen kannst. In der Praxis werden die untenstehenden Techniken miteinander kombiniert, da jede für sich ihre Vorzüge hat.

» CSS heißt das Zauberwort:

CSS ist eine spezielle Style Sheet Sprache. Sie wird verwendet, damit das Design einer Page einheitlich ist. Man kann mittels CSS für alles einen bestimmten Stil erstellen.
Das bedeutet, man kann festlegen, dass z.B. die Schriftfarbe bei normalem Text hellblau ist und bei Überschrift 1 z.B. Schwarz. Man kann ein Hintergrundbild automatisch für jede Seite laden usw. Es gibt wohl kaum etwas, das mit Design zu tun hat, dass mit dieser Sprache nicht realisierbar wäre.

CSS Code kann entweder direkt in den Head Bereich jeder HTML Seite geschrieben werden oder in eine externe CSS Datei und dann in die Seite eingebunden werden.

Geübte Anwender erstellen eine externe CSS Datei und binden diese einfach in das HTML Dokument ein. Bei umfangreichen Homepages ist dies eine große Zeitersparnis, wenn man mal was am Design verändern will. Ich würde dir deshalb auch anraten, den CSS Code lieber über eine eigene Datei einzubinden. Den Code schreibst du einfach in den Header deiner Seite.
Der Tag dazu lautet:

<link href="design.css" rel="stylesheet">

CSS erspart eine Menge Arbeit, da man sich nachher nur noch um den eigentlichen Inhalt der Page kümmern kann.
Durch CSS ist es möglich, ohne Probleme eine gesamte Page mit nur einer Datei im selben Design zu machen. Durch diese Technik läßt sich die Page auch sehr gut für Drucker optimieren. Es empfiehlt sich in jedem Fall, viel mit CSS zu arbeiten.
Skorpions Homepagehilfe ist z.B. ein komplett auf CSS basiertes Layout.
Wenn du mehr über CSS erfahren möchtest empfehle ich dir SELFHTML, CSS4You oder CSS-Fundgrube.

» JavaScript:

JavaScript ist wohl eine der wichtigsten Programmiersprachen, die im Internet verwendet werden. Java Script wird meist verwendet, um schöne Effekte herzuzaubern. Man kann aber auch Passwortabfragen und dergleichen mit JavaScript erstellen.

Leider wird diese Scriptsprache von vielen, vorwiegend von Anfängern, dazu benützt um diverse Alert-Fenster, unnötige Effekte und dergleichen zu erstellen. Dies animiert deinen Besucher eher wieder zum Verlassen der Page.
Aber, wenn JavaScript gezielt und mit Maß eingesetzt wird, ist es eine wertvolle Scriptsprache.

Man kann z.B. bei einem Fotoalbum sehr schöne Effekte mit dieser Programmiersprache erzielen.
Allerdings muss man beachten, dass in den Browsern auch JavaScript deaktiviert sein kann. In diesem Fall ist natürlich der große Nachteil, dass die ganzen schönen Effekte fehlen würden.
Wenn man womöglich sogar ein Menü mit JavaScript macht, wäre die Seite gar nicht mehr besuchbar. Es ist deshalb anzuraten, falls man ein Menü mit JavaScript macht, auch eine Ersatznavigation anzubieten, aber auch generell sollte Java Script so eingesetzt werden, dass die Page auch bei deaktivierten Java Script gut benutzbar ist.
Wenn du mehr über diese Scriptsprache wissen möchtest, empfehle ich dir SELFHTML.

» PHP:

PHP ist eine weitere Programmiersprache, die bei der Webprogrammierung nicht mehr wegzudenken ist. Während jedoch JavaScript vor allem für Effekte eingesetzt wird, ist die Stärke von PHP vor allem in der Erstellung von dynamischen Webseiten, also Webseiten, wo der Inhalt erst nach einer bestimmten Abfrage erstellt wird.
PHP wird deshalb oft dann eingesetzt, wenn man den Inhalt einer Datenbank oder auch einer Textdatei dynamisch darstellen will. So werden z.B. Online Shops, Newsletter, Gästebücher und dergleichen meist mit PHP erstellt.

PHP muss jedoch nicht nur im Zusammenhang mit Datenbanken verwendet werden. So kann man z.B. Bilder automatisch aus einem Ordner abrufen für eine Bildergallerie, Formulare oder Navigationen können ebenfalls sehr einfach mit PHP erstellt werden und noch viel mehr.

Ein großer Vorteil von PHP gegenüber JavaScript ist vor allem, dass man PHP in den Browsereinstellungen nicht, wie JavaScript, abschalten kann. Dadurch funktioniert z.B. ein mit PHP erstelltes Menü immer, während ein Menü, welches auf JavaScript aufgebaut ist, in dem Fall, das ein Besucher JavaScript aus Sicherheitsgründen abgeschaltet hat, nicht funktionieren würde und die Seite deswegen auch keine Navigation hätte.

Ich habe z.B. das Menü dieser Seite mit PHP eingebunden, was für mich den Vorteil hat, wenn ich beim Menü was ändere, muß ich nur an einer Datei was ändern und deshalb ist eine komplette Menüänderung in ein paar Minuten erledigt. Ein weiteres Beispiel, was ganz einfach zu realisieren ist, sind die Zufallszitate bei meinem Metal Tempel, die auf jeder Unterseite erscheinen.

Wenn du mehr über PHP wissen möchtest, empfehle ich dir php-homepage.de, da findest du noch einige interessante Dinge über PHP.

» MySQL:

MySQL ist ein Datenbanksystem, das vor allem in Verbindung mit PHP genutzt wird. Mit MySQL kann man sehr gut große Mengen von Daten, wie z.B. für einen Onlineshop oder ein Gästebuch verwalten. Das könnte in der Praxis z.B. so aussehen, das die Daten von einem GB in einer MYSQL Datenbank gespeichert wird und mit PHP beim Aufruf eines GB, ausgelesen werden.

Bei der Wahl, ob man MySQL verwenden will oder eher nicht, spielt vor allem die Menge der Daten eine wichtige Rolle. Bei nur 10 oder 20 Datensätzen wird sich der Aufwand eher nicht so lohnen, handelt es sich aber um hunderte von Datensätzen, wie z.B. in einem GB, wird es sich immer lohnen, da hier ein erheblicher Geschwindigkeitsvorteil gegenüber ein Textdatei oder einer CSV Datei besteht.
Ein weiterer Vorteil von MySQL liegt auch in der Sicherheit der Daten.

» Perl:

Perl ist, ähnlich wie JavaScript, eine Scriptsprache. Man darf sie aber nicht mit JavaScript verwechseln, da, im Gegensatz zu JavaScript, Perl über den Browser nicht abgeschaltet werden kann, da Perl direkt auf dem Server installiert ist. Perl wird allerdings nicht mehr so oft verwendet, da man mit PHP weit mehr Möglichkeiten hat.
Man kann es aber für kleinere Aufgaben verwenden, die man vielleicht sonst mit JavaScript machen würde. Das hätte den Vorteil, daß das Script auch dann gehen würde, wenn der User JavaScript im Browser ausgeschaltet hat.
Aber auch hier ist Voraussetzung, daß Perl auf dem Server installiert ist.