Diese Website besteht aus lediglich einer einzigen sogenannten index-Datei, aus der alles Weitere dynamisch erzeugt wird. Auch wenn sie das oben in der Adresszeile ihres Browsers anders dargestellt bekommen, also beim Klick auf einen Link verschiedene Seitenadressen angezeigt werden: dies erledigt der Server, die Seiten sind faktisch nicht vorhanden, sondern sind je nach Anfrage generiert.
Das hat den Vorteil bei Änderungen des Inhalts diesen leicht und schnell ändern oder ergänzen zu können, inklusive der Navigationspunkte. Das grafische Layout läßt sich dabei ebenfalls recht einfach ändern.
Sofern sie kein Fachmann sind können sie gerne aufhören hier weiter zu lesen, ansonsten ein paar Fakten zu den eingesetzten Techniken:
» LAMP ([Betriesbsystem:Linux][Webserver:Apache][Datenbank:MySQL][Interpreter:PHP])
» Apache mod-rewrite
» CSS (Cascading Style Sheet)
Wie nett und brav ich alles geschrieben habe können sie jederzeit ganz unten validieren.
Hier nun die Historie der Entwicklung von Root Art in Wort und Bild*:
Am Anfang steht die Konzeption. Da wir möglichst viele Features zeigen wollen stellt dies die Hauptaufgabe vor der ersten Zeile Code dar. Parallel wird die Domain registriert, der Webspace und die Datenbank sind bereits beim Provider erstellt, E-Mails sind eingerichtet. Auf meiner Entwicklungsmaschine simuliere ich weit möglichst die Gegebenheiten des zur Verügung stehenden Produktivservers, erstelle lokal einen Vhost samt Datenbank. Endlich kann ich die erste Datei erstellen, kreiere Include-Dummies und eine Basis CSS, werfe ein paar Daten in die Datenbank und verknüpfe die Container. Nun ist das erste Resultat im Browser zu sehen. Grundsätzlich soll die Site folgende Features bieten: direkter Wechsel zwischen Deutsch und Englisch, URL-Rewrite für die Suchmaschinenoptimierung, valider HTML und CSS Code, grafische Elemente komplett übers CSS gesteuert. Das Logo erhalte ich von Art. Da ich schwarze Websites nicht so recht mag, starte ich mit weißem Hintergrund.
Wir haben entschieden Root und Art je eine eigene Navigation zu geben. Ich bin beim klassischen Aufbau gelandet: 3 Zeilen und 3 Spalten, mit dem Hauptinhalt im Zentrum. Die Farben und Rahmen helfen mir zum Positionieren. Das Auslesen der Browsersprache klappt ebenfalls brav, was mir später jedoch noch Probleme bringen wird: default ist halt ebenfalls eine Datei.
Mit den Container-Positionierungen bin ich nun zufrieden, der Rewrite klappt nun auch auf dem Produktivserver, was beruhigend ist, der Wechsel der Sprachen klappt bis auf die default-Page. Ich behalte mir im Hinterkopf die kanonischen Tags nicht zu vergessen um duplicate Content-Penalty zu vermeiden. Darauf muss man bei Rewrite immer achten: der Server liefert dann immer mindestens 2 Versionen ein- und desselben Inhalts. Exploits sind ebenfalls zu beachten.
Letzte Positionierungen der Container, es geht nun darum etwas Farbe in die Site zu bringen. Im Footer wird nun immer das aktuelle Datum eingeblendet, dazu die IP des Besuchers. Dies sind beides einfache PHP-Funktionen, das Datum wird je nach gewählter Sprache passend eingeblendet.
Ich färbe nun die Hintergründe ein, die Inhalts-Zellen sind fertig justiert und bereit, optische Elemente aufzunehmen. Ab diesem Zeitpunkt zerpflücke ich die von Art gelieferte Datei mit Photoshop oder The GIMP, um 1 Pixel hohe bzw. breite Images zu erhalten, die sich horizontal bzw. respektive vertikal wiederholen. Das macht man weil das sinnlosen Traffic spart, die ganze WebSite wird schneller an einen Surfer geliefert. Dazu gibt es dynamische Inhalte, wie die Hauptinhaltszelle, die ja nach unten je nach Seite verschieden lang wird. Spätestens ab diesem Zeitpunkt enden die Webdesign-Fähigkeiten der meisten Grafiker, denn es wird mathematisch.
Die Grafiken und optischen Elemente sind nun integriert, die Datenbank ist mit den Grunddaten gefüttert; warum nicht damit online gehen? Gedacht und getan holen mich zwei Probleme ein: die default-Sache mit den Sprachen und dem Rewrite, sowie Art, der das Logo zu klein ist. Nach anfänglichen innerem Wehren muss ich zugeben, dass der Look doch etwas zu ... naja, simpel ist. Die neue Idee bringt mich allerdings leicht ins schwitzen, denn das bestehende CSS und Include-Gerüst muss ich vollkommen neu aufziehen.
Es folgt die Invertierung mit dem großen Logo im Zentrum. Die kleinen grafischen Elemente müssen alle entsprechend umgefärbt werden. Ich gebe den Versuch auf, bestehende Module anzupassen und stricke das CSS samt Includes neu.
Wie beim Basic-CSS erleichtere ich mir die Positionierungen der Container.
Für diese Page hier wollte ich auflockernd ein nettes Bildchen eines Musikvideos von Rammstein vor etwas Code darstellen. Klappte wie zu sehen leider nicht. Art meint ich solle es mit einem Standbild versuchen ... das werde ich später tun.
Man kann nun erkennen wo die Reise hingeht: die Navigationen sollen sich rund um das Logo schmiegen. Ganz toll; musste das also tatsächlich mit einer trigonometrischen Funktion lösen. Da die Navigationspunkte dynamisch generiert und dazu links und rechts nicht die gleiche Anzahl haben werden, erinnerte ich mich an so manche Mathestunde aus meiner Schulzeit.
Das System errechnet nun die Positionen und Abstände der Navigationen vollkommen automatisiert. Nun kommt wieder die Feinjustierung der Container mit den kleinen Images an die Reihe.
Die Hauptinhaltsbox gibt Anlass zu Diskussionen. Ich bin der Ansicht dass wir die Fläche weiß lassen und keine Grafik dahinter legen. Sobald mehrere bunte Bildchen dort zu sehen sind wird alles schon ausgewogen wirken. Nur mit dunkelblauem, fast schwarzem Text wirkt es natürlich noch etwas steril.
Wir sind nun bereit die neue Version online zu stellen. Ein paar Pixelkorrekturen sind noch zu tun, Art ist mit der Position der manuellen Sprachwahl nicht zufrieden, wir testen dazu mehrere Rahmen um die Site.
Die aktuelle Version wird nun mit Inhalten gefüllt. Da ich weiß, dass Suchmaschinen Text mögen, tippe ich emsig drauf los. Das parallele Übersetzen ins Englische bremst etwas. W3C-Validatoren sind ebenfalls eingebaut - wie ich mit leichter Genugtuung feststellen konnte haben auch die Probleme mit default-Pages.
Dank dem Tip von art hat es mit dem Printscreen von Rammstein als Standbild geklappt.
Eine Browserweiche für Internet Explorer 7 und Versionen darunter ist nun eingebaut. Erstaunlich, dass heutzutage noch mit IE 6 gesurft wird.
Die Hauptnavigation gefällt mir noch nicht: wirkt ohne Images so verloren. Wir probieren einige Versionen auf dem Test-Server. Dazu wurden die fremdgeladenen Validator-Images auf den Produktivserver gelegt, um die Ladezeit zu optimieren ohne von anderen Servern abhängig zu sein, und GZIP-Kompression per PHP aktiviert.
Nach Druck von Art haben wir die Hauptinhaltszelle invertiert, dazu ein wenig den Hintergrund verschönert, Javascript für die Unternavigations-Ebenen von Art eingebaut und einige Inhalte dort eingefügt. Wie zu erwarten hauptsächlich Bilder ... Grafikerin halt.
*Die kompletten Printscreens sind absichtlich inklusive dem GUI, also einem Debian Lenny mit KDE, und den anderen Informationen, wie Datum usw. So können sie ein wenig über mich erfahren. Für die Geeks: erspart mir bitte irgendwelche Tests wie man vielleicht auf irgendeinen Server kommen könnte - schickt mir lieber eine E-Mail.
