Bitte warten...

WebWorkshop

Grundlagen der Webgestaltung

Das Internet ist ein universelles und äußerst vielseitiges Kommunikations- und Informationsmedium. Ein großer Vorzug dieses Mediums ist es, dass es eigentlich für jeden möglich ist, es nicht nur als Nutzer, sondern auch als Anbieter zu verwenden. Wer selbst einen Internetauftritt im Netz haben möchte, hat ungefähr drei Möglichkeiten:

1. Medienagentur mit dem Projekt beauftragen
Vorteile: geht schnell und professionell, kein technisches Spezialwissen erforderlich
Nachteile: kostet richtig Geld, Abhängigkeit von Experten

2. Redaktionssystem (CMS) besorgen, installieren, konfigurieren und verwenden
Vorteile: OpenSource-Systeme verfügbar, wenig technisches Spezialwissen erforderlich, Unabhängigkeit von Experten, geringe finanzielle Kosten, Support durch Nutzergemeinschaft
Nachteile: relativ zeitintensiv bei der Einrichtung und Einarbeitung; Funktionalität und Darstellung des Projekts sind auf die Grenzen des CMS beschränkt

3. Projekt selbst schreiben
Vorteile: erweiterter technischer Horizont, volle Kontrolle über Inhalt, Darstellung und Funktionsweise des Projekts, geringe finanzielle Kosten, Unabhängigkeit von Experten, Support durch Nutzergemeinschaft
Nachteile: sehr zeitintensiv, großes Interesse und technisches Spezialwissen erforderlich

Hier soll es um die Option 3 gehen. Wer bereit ist, sich mit den elementaren Techniken für Webseiten zu befassen, kann unabhängig von den oftmals teuren Dienstleistungen von Unternehmen aus dem Bereich der Mediengestaltung zu Hause seine eigene Website entwickeln und ins Netz stellen. Wie man das macht, soll in diesem Workshop von Anfang an Schritt für Schritt erklärt werden, so dass auch absolute Laien einen relativ einfachen Einstieg in die Erstellung von Webseiten bekommen können. Ein Wort zur Ermutigung vorneweg: Es ist alles keine Hexerei!

Hierbei werde ich versuchen, mein eigenes Wissen und meine Erfahrungen in diesem Bereich vorzustellen, wobei es mir wichtig ist, die vielfältigen Möglichkeiten auf das Elementare zu beschränken, um den Lernenden vor häufig überflüssigem Ballast zu bewahren und den Fokus auf dem Wesentlichen zu halten, daher hat dieser Workshop eher den Charakter eines ›Crash-Kurses‹. Ich selbst habe mir dieses Wissen seit 1999 ebenfalls autodidaktisch angeeignet und kenne daher viele der Tücken, die einem auf dem Weg zur fertigen Website begegnen können.

Viele Leute, die Webseiten machen, verwenden dazu sog. WYSIWYG-Editoren (What you see is what you get; z. B. Frontpage, Dreamweaver, Nvu…), ohne jedoch zu wissen und die Kontrolle darüber zu haben, was diese Editoren am Ende für Code produzieren. Auch solchen Anwendern soll dieser Kurs eine Hilfe sein, mehr Verständnis über die Resultate von Editoren zu bekommen und die gelegentlich auftretenden Schwächen solcher Anwendungen zu kompensieren.

Eine ganze Reihe von Kompendien und Tutorien, die es bereits in ausreichender Menge im Netz gibt, versucht, die Techniken so umfassend wie möglich darzustellen, was definitiv seine Berechtigung hat, aber gerade für Anfänger häufig zu recht zeitraubenden Recherchen nach Antworten auf einfache Fragen führt. Dies soll hier vermieden werden. Ziel dieses Workshops ist es, einen Anfänger möglichst schnell mit den wichtigsten Grundlagen der Webentwicklung vertraut zu machen und ihn somit auch schnell zu fertigen und korrekten Skripten zu führen.

Die Startseite jedes Kapitels enthält eine Übersicht der Unterthemen, über die durch die Seiten navigiert werden kann.

Links zu externen Webseiten dienen der weiterführenden Information zu dem besprochenen Thema.

Werkzeuge

Zunächst möchte ich die Werkzeuge vorstellen, die man neben einem normalen Rechner benötigt, um eine Website zu entwickeln und ins Netz zu stellen:

1. Text-Editor

Auf jedem beliebigen Rechner sollte sich ein einfacher Text-Editor befinden. Mit diesem Programm kann man Text ohne jede Formatierungsmöglichkeiten schreiben. Das ist genau das, was wir brauchen. Richtige Textverarbeitungsprogramme wie z. B. LibreOffice oder Word können zwar prinzipiell auch verwendet werden, wenn man die Texte als Reintextdatei speichert, werden aber nicht empfohlen. Weiterhin existiert eine ganze Reihe von expliziten HTML-Editoren, die ebenfalls verwendet werden können, die aber vor allem Funktionen zur erleichternden Automatisierung bei der Erzeugung von Code bereitstellen, also nicht zwingend erforderlich sind. Die Erfahrung hat gezeigt, dass ein Nur-Text-Editor, der wenigstens in der Lage ist, Zeilennummern anzuzeigen, Syntaxhervorhebung unterstützt und mit dem man mehrere Dateien gleichzeitig bearbeiten kann, die Arbeit sehr erleichtern kann. Eine Reihe von Editoren, die auf der Linux-Plattform laufen, werden hier vorgestellt.

2. Browser

Um die mehr oder weniger fertigen Seiten anzeigen zu können, benötigt man natürlich einen Browser. Am besten testet man die Quelltexte in verschiedenen Browsern und wenn möglich auch unter verschiedenen Betriebssystemen (Linux, MacOS, Windows, …), da die Interpretation der Quelltexte und die daraus resultierende Darstellung nicht immer einheitlich ist. In der Praxis hat es sich für mich bewährt, die Quelltexte zunächst mit Chromium zu entwickeln und anschließend mit Mozilla Firefox zu überprüfen. So sollte die Darstellung bei aktuellen Browsern mit WebKit- und Gecko-Engine einheitlich sein. Unter MacOS kann man den Quelltext noch mit Safari testen und unter Windows mit dem Internet Explorer, der bei Webstandards bekannterweise immer etwas hinterher hinkt. Edge sollte hier weniger Probleme machen.

Außerdem sollte man die Quelltexte auch mit diversen Browsern für Mobilgeräte testen.

3. FTP-Client

Das ist ein Programm, mit dem man fertige Dateien auf den entfernten Server hochladen kann, über den diese dann im Internet verfügbar werden. Wenn man seine Dateien nicht gerade bei einem Free-Hoster parken möchte, der einem eine Online-Oberfläche zum Upload der Daten über den Browser zur Verfügung stellt, was man in der Regel durch zusätzlich eingeblendete Werbung bezahlt, dann ist ein FTP-Client wie beispielsweise der plattformunabhängige FileZilla unverzichtbar, es sei denn, der Dateimanager des Desktop-Rechners unterstützt FTP-Verbindungen. Um die Skripte nur lokal zu testen, ist ein FTP-Client nicht erforderlich.

4. Webspace

Um seine Seiten im Internet zu veröffentlichen, benötigt man einen Webspace auf einem entfernten Server. Für experimentelle Zwecke reicht zunächst ein kostenloser Webspace bei einem Free-Hoster aus. Allerdings muss man dann in der Regel Werbeanzeigen auf den Seiten in Kauf nehmen. Für professionelle Produktionen ist ein kommerzieller Webspace vorzuziehen. Bei der Wahl des Anbieters ist darauf achten, dass dieser einen Linux-Server (z. B. Debian oder Fedora) mit Unterstützung für PHP 5 sowie MySQL 5 betreibt und eine gute Verfügbarkeitsstatistik aufweisen kann. 25 MB Webspace sind oft ausreichend, aber es gibt schon günstige Angebote mit 100 MB oder mehr. Der angebotene Traffic ist für kleine Projekte meist immer ausreichend, nur wer mit seiner Website intensivsten Datentransfer provoziert, muss auf diesen Faktor achten.

Um die Skripte nur lokal zu testen, ist ein externer Webspace nicht erforderlich.

5. Lokaler Server (optional)

Wer sich soweit mit den Grundlagen von HTML, der Programmiersprache für statische Websites, vertraut gemacht hat, dass er in die Welt der dynamischen Websites einsteigen möchte, tut gut daran, sich einen eigenen PHP-fähigen Webserver auf seinem Rechner zu installieren, dann kann man nämlich die Skripte, die man nun in PHP erstellt hat, lokal testen, bevor man sie hochlädt. Wer sich einen LAMP-Server installiert, hat alles, was man braucht: Apache-Server, PHP-Parser und MySQL-Datenbank in einem.

Technologien

Soweit zu den Werkzeugen. Nun stelle ich noch kurz die verschiedenen Technologien vor, die Thema dieses Workshops sind. Dazu muss aber gesagt werden, dass ich auf diese Technologien nur in dem Rahmen eingehen werde, wie ich sie für elementar halte. In der Regel sind die Möglichkeiten, die sie bieten, weit umfangreicher als hier vorgetstellt.

1. HTML

HTML ist wie gesagt die Sprache, in der statische Websites erstellt werden. ›Statisch‹ bedeutet, dass jede aufgerufene Datei einen im Skript fest definierten Inhalt hat, der dann im Browser angezeigt wird. Soll der Inhalt verändert werden, muss die Datei verändert und neu hochgeladen werden.

1b. SVG

SVG ist eine Auszeichnungssprache und ein Datenformat für Vektorgrafiken. Der Vorteil von Vektorgrafiken gegenüber Rastergrafiken besteht vor allem in der beliebigen verlustfreien Skalierbarkeit. Das heißt, eine Vektorgrafik kann beliebig vergrößert werden, ohne dass die Grafik an Konturschärfe verliert oder grobe Pixel sichtbar werden. Dies wird erreicht, indem das Bild nicht Bildpunkt für Bildpunkt aufgelöst, sondern auf seine geometrischen Inhalte abstrahiert wird.

2. CSS

CSS ist der Standard für die grafische Gestaltung der Inhalte einer Website. Mit CSS färbt man Text ein, bestimmt Hintergrundfarben, Zeichengröße, Schriftarten, Tabellenrahmen, Positionierungen usw. Diese Möglichkeiten boten ältere Versionen von HTML zwar in geringem Maße auch an, diese werden aber mittlerweile als ›deprecated‹ eingestuft, sollen also vermieden werden.

3. JavaScript

Die Programmiersprache JavaScript wurde geschaffen, um den Inhalt von Webseiten anzupassen, nachdem diese vom Client beim Server abgerufen wurden. Dazu können unter anderem Eigenschaften einer Webseite abgefragt werden, bestehende Inhalte geändert oder gelöscht sowie gänzlich neue Inhalte hinzugefügt werden. Auf diese Weise können dynamische und interaktive Webseiten erstellt werden, die Server-unabhängig sind, da JavaScript-Code von der entsprechenden Engine des Client-seitigen Browsers ausgeführt wird, wodurch solche Dokumente sogar portabel sein können.

4. PHP

PHP bietet die Möglichkeit, dynamisch HTML-Code zu erzeugen, wodurch eine Seite veränderliche Inhalte haben kann. PHP erzeugt HTML z. B. anhand von Benutzereingaben oder aus Datenbankinhalten. Mit PHP kann man z. B. Online-Shops oder Gästebücher programmieren. PHP ist sehr mächtig, daher wird von den vielen Möglichkeiten lediglich eine Auswahl behandelt.

5. MySQL

MySQL ist eine Sprache, mit der man auf Datenbanken zugreifen kann. Das ist vor allem in Verbindung mit PHP interessant, wenn die Inhalte einer Website in einer Datenbank gespeichert sind (das übliche Verfahren für Gästebücher, Foren und ganze Redaktionssysteme). Will man diese Technologie nutzen, muss der Webspace, auf dem die eigene Website liegt, MySQL unterstützen, was vor allem bei den billigsten Anbietern nicht grundsätzlich der Fall sein muss.