1.3 Die Wahl der Hilfsmittel
Die in diesem Abschnitt vorgestellten Hilfsmittel sind selbstverständlich nur eine Auswahl an möglichen Programmen, die Sie für die Entwicklung Ihrer Webseite nutzen können. Die letztendliche Auswahl ist sicherlich auch von Ihrem Betriebssystem abhängig, wobei ich in diesem Tutorial Microsoft Windows 7 verwende. Aber auch ältere Betriebssysteme, wie etwa Windows Vista oder Windows XP unterstützen die im folgenden genannte Software. Für Linux- oder Mac-Nutzer gibt es sicherlich zahlreiche Alternativen, mit der Sie dieses Tutorial ebenfalls nachvollziehen können.
Mit Photoshop erstelle ich in diesem Tutorial die einzelnen Grafiken der Webseite und eine vollständige Voransicht, so dass ich grafische Änderungen schnell durchführen und nachvollziehen kann. Dies ist demnach die moderne Alternative zu Blatt Papier und Stift, bei der Sie Änderungen rückgängig machen und wesentlich detaillierter vorarbeiten können.
Zum Testen und Auffinden von Fehlern empfehle ich Ihnen zudem die Verwendung des Firefox-Browsers von Mozilla mit installiertem Firebug-Plugin.
Laden Sie sich dazu bitte XAMPP für Windows herunter.
Bei Windows Vista / Windows 7 ist es wichtig, dass Sie XAMPP nicht in den Programme-Ordner installieren. Verwenden Sie stattdessen beispielsweise C:\. Öffnen Sie nach der Installation das XAMPP Control Panel und starten Sie den Apache Webserver. Die Anwendung müsste nun wie in Abbildung 1 aussehen. Achten Sie darauf, dass der grüne Schriftzug Running erscheint nachdem Sie den Apache gestartet haben. Tut er dies nicht, so liegt womöglich ein Fehler vor. Die einfachste Fehlerursache ist, dass der verwendete Port durch ein anderes Programm blockiert wird. Anwendungen wie etwa Skype verwenden ebenfalls wie XAMPP den Standard-Port 80, so dass sich diese gegenseitig blockieren. Über den Button Port-Check können Sie dies prüfen lassen.
Grafiksoftware
Zur grafischen Gestaltung einer Webseite benötigen Sie in der Regel eine Grafiksoftware. In diesem Tutorial verwende ich Adobe Photoshop CS 4. Alternativ dazu können Sie auch kostenlose Software wie etwa Gimp oder Inkscape verwenden, wobei sich die Vorgehensweise von der in Photoshop leicht unterscheidet.Mit Photoshop erstelle ich in diesem Tutorial die einzelnen Grafiken der Webseite und eine vollständige Voransicht, so dass ich grafische Änderungen schnell durchführen und nachvollziehen kann. Dies ist demnach die moderne Alternative zu Blatt Papier und Stift, bei der Sie Änderungen rückgängig machen und wesentlich detaillierter vorarbeiten können.
Entwicklungsumgebung
Nachdem Sie alle Grafiken erstellt haben benötigen Sie eine Entwicklungsumgebung, in der Sie die Webseite umsetzen können. Die Software dafür kann mehr oder weniger komplex sein, je nachdem was Sie bevorzugen. Ich setze in dieser Anleitung auf psPad, einen kostenlosen Texteditor, der bereits einige Funktionalitäten zur Verfügung stellt und somit die Entwicklung der Webseite deutlich vereinfacht. Diesen Editor können Sie auf der Webseite des Herstellers herunterladen.Zum Testen und Auffinden von Fehlern empfehle ich Ihnen zudem die Verwendung des Firefox-Browsers von Mozilla mit installiertem Firebug-Plugin.
XAMPP Webserver
Neben einem Editor benötigen Sie noch einen lokalen Webserver zur Ausführung von PHP-Skripten. Die Skriptsprache PHP wird, wie bereits in Kapitel 1.2 kurz erläutert, serverseitig ausgeführt. Sie haben dafür also die Möglichkeit, sich Webspace bei einem Anbieter Ihrer Wahl anzumieten oder Ihre Skripte zunächst lokal zu testen. Damit Sie die gleiche Ausgangsposition wie ich haben, werde ich für die Entwicklung ebenfalls einen lokalen Webserver verwenden. Dabei wird die Funktionalität zur Ausführung und Darstellung von dynamischen Webseiten lokal auf Ihrem PC simuliert.Laden Sie sich dazu bitte XAMPP für Windows herunter.
Bei Windows Vista / Windows 7 ist es wichtig, dass Sie XAMPP nicht in den Programme-Ordner installieren. Verwenden Sie stattdessen beispielsweise C:\. Öffnen Sie nach der Installation das XAMPP Control Panel und starten Sie den Apache Webserver. Die Anwendung müsste nun wie in Abbildung 1 aussehen. Achten Sie darauf, dass der grüne Schriftzug Running erscheint nachdem Sie den Apache gestartet haben. Tut er dies nicht, so liegt womöglich ein Fehler vor. Die einfachste Fehlerursache ist, dass der verwendete Port durch ein anderes Programm blockiert wird. Anwendungen wie etwa Skype verwenden ebenfalls wie XAMPP den Standard-Port 80, so dass sich diese gegenseitig blockieren. Über den Button Port-Check können Sie dies prüfen lassen.
Anschließend können Sie den Webserver in einem Browser Ihrer Wahl über die URL http://localhost/ oder http://127.0.0.1/ erreichen. Um nun ein neues Projekt anzulegen, müssen Sie lediglich einen Unterordner im bereits bestehenden Verzeichnis C:\xampp\htdocs (bzw. in Ihrem entsprechenden Verzeichnis) anlegen, zum Beispiel C:\xampp\htdocs\webdesign. Die Inhalte dieses Verzeichnisses sind anschließend über http://localhost/webdesign/ erreichbar.
TinyButStrong TemplateEngine
Zusätzlich benötigen Sie noch die TemplateEngine TinyButStrong, die Sie auf der offiziellen Webseite des Entwicklers herunterladen können.Was Sie damit machen können erkläre ich Ihnen in Kapitel 5.