Ein responsives Webdesign mit Typo3 (Teil 1)

As-Moll Dummy Seite

In dieser Artikelserie will ich mal skizzieren, wie man von Null an ein responsives Webdesign mit etwas HTML5, CSS3 und Typo3 bastelt. Das ist sicherlich nur ein Weg und es gibt genügend Webdesigner/ Programmierer, die das weitaus besser können, aber ich will hier all denen einen Einstieg ins Thema geben, die bisher nur wenig mit responsiven Seiten zu tun hatten.

Grundlage ist dieses Webdesign, welches ich an einem Vormittag im Photoshop zusammengeschoben habe.

As-Moll Dummy Seite
image-20

As-Moll Dummy Seite

Meine Entwicklungsumgebung ist dabei ein XAMPP in der Version 1.8.3.

XAMPP
image-21

XAMPP Control Center

Dieser liegt auf meiner E: Partition. Unter E:\xampp\htdocs\ eröffne ich einen neuen Ordner „as_moll_test“ und erstelle darin einen weiteren Ordner „_res“. Hier lege ich alles ab, was mit der Seite zu tun hat. Nun holen wir von www.typo3.org das aktuelle Typo3 Paket in der Version 6.2.6 bzw. direkt auf Source Forge.

Die Datei lege ich in den „_res“ Ordner und entpacke den Inhalt eine Ordnerebene höher. Meine Ordner Struktur sieht nun so aus:

Typo3 Installation
image-22

Typo3 Installation

Jetzt schalte ich den Apache und den MySQL Server über das Control Panel an:

XAMPP mit Apache und MySQL an
image-23

XAMPP mit Apache und MySQL an

Bevor ich nun die Installationsroutine mit Typo3 aufrufe, erstelle ich erst eine Datenbank. Das kann man sowohl über ein Shell Kommando machen oder etwas einfacher PHPMyAdmin nutzen. Letzteres lässt sich über das Xampp Control Center starten:

XAMPP PHPMyAdmin
image-24

XAMPP PHPMyAdmin

In PHPMyAdmin wird über „Datenbanken“ eine neue Datenbank mit der Kollation „utf8_general_ci“ und dem Namen „as_moll_test“ angelegt:

Datenbank
image-25

Datenbank

Jetzt noch einen Nutzer anlegen:

Nutzer anlegen
image-26

Benutzer

und

Nutzer anlegen
image-27

Nutzer anlegen

und

Rechte vergeben
image-28

Rechte vergeben

Jetzt im Browser das Install Script aufrufen:

http://localhost/as_moll_test/

Logischerweise kommt ein Fehler:

Fehlermeldung
image-29

Fehlermeldung

Also in die Wurzel eine leere Datei ohne Dateiendung mit Namen „FIRST_INSTALL“ erstellen. Das Script mit F5 erneut aufrufen.

Schritt 1
image-30

Schritt 1

Die Fehlermeldung können wir ignorieren und auf „I know what I’m doing, continue!“ klicken und die Datenbank Parameter eingeben:

Step 2
image-31

Step 2

Danach:

Step 3
image-32

Step 3

Jetzt noch einen Admin für das Backend anlegen:

Step 4
image-33

Step 4

Fertig!

Step 5
image-34

Step 5

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.