decocode decocode deco    

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 Skripte (wie die Quelltexte der erstellten Seiten auch genannt werden) in verschiedenen Browsern und wenn möglich auch unter verschiedenen Betriebssystemen (Linux, MacOS, Windows, …), da die Interpretation der Skripte und die daraus resultierende Darstellung nicht immer einheitlich ist. Wenn nicht anders angegeben, wurden die hier beschriebenen Möglichkeiten mit folgenden Browsern erfolgreich getestet:

Mozilla Firefox
Opera
Safari
Google Chorme
Konqueror
Internet Explorer

Die Erfahrung hat gezeigt, dass es am einfachsten ist, Seiten zunächst mit dem Firefox zu entwickeln und Optimierungen für andere Browser nachträglich einzufügen. Besonders der Internet Explorer hinkt den Standards bislang immer etwas hinterher.

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 unverzichtbar.
Für Linux existieren z. B. die Clients gFTP (GNOME) und KFTPGrabber (KDE).
Für Windows gibt es z. B. FileZilla (auch in Deutsch)
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 (HTML5)

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.

2. CSS (Level 3)

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. PHP (Version 7)

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.

4. MySQL (Version 5.7)

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.

5. JavaScript [rudimentär]

JavaScript bietet einen wahren Fundus an zusätzlichen Möglichkeiten, Websites mit mehr oder weniger sinnvollen Extras zu bereichern. Da die Verwendung von JavaScript für Websites aber nicht elementar ist und die Funktionalität von JavaScript (aus gewissen berechtigten Gründen) in den Browsern auch abgestellt werden kann (man also nie sicher sein kann, ob das Extra, von dem man so begeistert ist, beim Besucher auch tatsächlich angezeigt wird), stelle ich hier nur ein paar Möglichkeiten vor, von denen ich doch gerne ab und zu Gebrauch mache.