Eine sehr interessante Aktion, an der ich teilgenommen habe.

Drüben in meinem privaten Blog habe ich einen Artikel zur Aktion Ein ♥ für Blogs geschrieben, in dem ich meine persönlichen deutschen Blogperlen aufliste. Wer Interesse hat kann ja mal vorbei schauen.

—
Foto: The internet 2.0 von monoglot

Hier nun wieder eine kurze Übersicht darüber, welche Sessions ich besucht habe:

• Wie sieht das “nächste” Web aus? von Vitaly Friedman
• Selenium RC: Automated Testing of Modern Web Applications von Thomas Herchenröder
• Zur Evolution des Web – Problemfelder und Wachstum von Jens Grochtdreis
• Top speakers from Ruby, Groovy and PHP
• What’s new in PHP 5.3 von Stefan Priebsch
• Understanding the PHP Object Model von Sebastian Bergmann

Angefangen habe ich mit der Session von Vitaly Friedmann, der eindrucksvoll gezeigt hat, wie das nächste Web aussehen könnte. Könnte deswegen, weil niemand voraussehen kann, was kommen wird und von daher kann ich die Entwicklung auch in eine komplett andere Richtung laufen als man momentan annimmt.

Thomas Herchenröder hat in seiner Session einen Überblick darüber gegeben, was Selenium ist und anschließend wie man mit Selenium RC ausführliche Tests seiner Website durchführen kann, die sogar automatisiert werden können.

Nach einer kurzen Geschichte des Internets ist Jens Grochtdreis darauf eingegangen, welche Probleme wir momentan noch haben und wie diese eventuell verbessert werden könnten, so dass wirklich ein Web für jedermann entsteht.

“Top speakers from Ruby, Groovy and PHP” ist ein interessanter Name und die so genannte Session war das auch. Eigentlich war eine Runde geplant, in der die Zuschauer den Speakern Fragen stellen und auf diese Antworten bekommen. Doch daraus ist eine lustige Stichelei geworden welche Sprache denn nun die Beste sei und warum.

Stefan Priebsch fing mit der Geschichte an, wann denn nun endlich PHP 6 veröffentlicht werden soll. Da sich dies jedoch auf ungewisse Zeit verschoben hat wird demnächst PHP 5.3 mit allen Features von PHP 6 veröffentlicht bis auf die Unicodeunterstützung.

Sebastian Bergmann gab eine Einführung in die Objektorientierung bei PHP und hat Klassen, Interfaces, etc. vorgestellt und wie man mit diesen arbeiten kann. Für mich waren noch einige neue Sachen dabei, die ich bis dato noch nicht kannte, aber mit denen ich mich demnächst beschäftigen werde.

Dieser Artikel beschäftigt sich mit genau diesem Thema und versucht praktische und vor allem praktikable Lösungsvorschläge zu liefern. Ich beginne hier beim Grundlegensten aller Projekte, der Idee, und gehe dann auf alle weiteren nötigen Schritte ein, bis endlich eine funktionsfähige Website entstanden ist.

Am Anfang steht die Idee

Ohne eine gute Idee scheitert jedes Projekt schon im Ansatz. Aber wenn man es geschafft hat eine tolle Idee zu haben, bei der man nicht vor unendlich großen Hürden aufgrund fehlender Kenntnisse o.Ä. steht, kann es endlich losgehen. Der nächste Schritt ist es seinen Einfall weiterzuentwickeln und sich ein Konzept zu schaffen, mit dem man arbeiten kann. Ob dies nun durch massives Brainstorming, Austausch mit anderen oder spontan unter der Dusche entsteht ist egal. Die Hauptsache ist, dass schlussendlich eine Art roter Faden entsteht, an den man sich bei der Entwicklung halten kann.

Design: der Hauptbestandteil eines Templates

Logischerweise sollte man sich bei der Konzeption seiner Idee auch schon diverse Gedanken zum Design machen, denn immerhin ist das der wichtigste Bestandteil bei der Template-Entwicklung. Ohne Design kein Template, so einfach ist das.

Wie man letztendlich sein Design entwickelt ist jedem selbst überlassen. Ob mit Photoshop auf den Pixel genau oder skizzenhaft mit Papier und Bleistift. Der wichtige Teil hierbei ist jedes gewünschte Feature von Anfang an in den Prozess mit einzubeziehen, damit man nicht plötzlich vor einem großen Problem steht und mühselig eine mehr schlechte als rechte Lösung zu praktizieren.

Ist das Design endlich fertig hilft es ungemein das entstandene Bild erst einmal eine Weile auf sich wirken zu lassen und sich direkt Gedanken dazu zu machen, wie man dieses Ungetüm mit allen seinen Details in Quelltext verwandelt. Hierzu gibt es diverse Dienstleister, doch kostengünstiger und spaßbringender ist es, sich selbst an die Arbeit zu machen. Steht das grobe Grundgerüst ist der Moment gekommen sich die Spezifikationen für das gewählte Publishing-System anzusehen. Bei WordPress beispielsweise gibt es bei der Navigation für die Seiten eine CSS-Klasse, die automatisch an die Listenelemente gehängt wird, sollte die aufgeführte Seite aufgerufen werden. Also warum sollte man sich hier selbst eine ausgefeilte Lösung überlegen, wenn man vorhandene Sachen direkt nutzen kann?

Die technische Umsetzung oder das Spiel mit dem Feuer

Hat man es nun endlich geschafft nach Stunden des Fluchens aufgrund zickender Browser, Inkompatibilitäten oder nicht vorhandenen, aber dringend benötigter, Eigenschaften von HTML und CSS endlich einen zufriedenstellenden HTML-Dummy zu erstellen beginnt der Spaß erst richtig, denn nun beginnt die Implementierung.

Der erste Schritt sollte der sein den entstandenen HTML-Dummy in eine Standarddatei (bei WordPress die index.php im Ordner /wp-content/themes/dein-theme) zu kopieren und die CSS-, Javascript- und Bilddateien an die richtige Stelle zu bringen. Anschließend fängt man damit an den zuvor mühselig erstellten Quelltext zu zerlegen und in einzelne Dateien zu packen, die je nach benötigter Anzeige eingebunden werden. Statische Inhalte und dynamische Inhalte sollten ebenfalls strikt voneinander getrennt werden, um nicht zu einem späteren Zeitpunkt den Überblick zu verlieren.

Nach dem Zerlegen des Quelltextes sollte man mit dem existenziellsten Bestandteil der Website anfangen: der Navigation. Hat man diese umgesetzt und im Backend natürlich die entsprechende Struktur der Site angelegt fällt es schon um Meilen leichter zu den Seiten zu kommen, an denen man momentan entwickelt, da man sich umständliches Kopieren von Links, etc. sparen kann.

Nun liegt es im Ermessen des Entwicklers, ob er mit einer Inhaltsseite oder der Startseite weiter macht. Letztere ist in den meisten Fällen bei großen Projekten sehr schwierig umzusetzen, da hier viele Dinge aus dem System gleichzeitig angezeigt werden sollen. Im Großen und Ganzen empfiehlt es sich erst einmal die einfachen Dinge wie normale Inhaltsseiten oder Listentemplates umzusetzen und sich erst dann zu den wirklich schwierigen zu begeben.

Kleiner Tipp noch am Rande: Am Anfang geht alles sehr schnell, da man dank der leicht umzusetzenden Sachen schnell Fortschritte erzielt. Jedoch werden die Aufgaben immer schwieriger und zeitintensiver, je weiter man fortschreitet. Hier also nicht gleich frustrieren

Der eben genannte Tipp gilt natürlich auch dann, wenn mal nicht gleich etwas so funktionieren will, wie es soll. Je umfangreicher die zu bewältigende Aufgabe, desto schleppender geht es voran, aber das was zählt ist das Ergebnis. Und wenn dieses erzielt wird fällt jeder bisherige Stress ab wie Schuppen von den Augen. Ebenfalls eine zeitraubende Angelegenheit sind Dinge, die man beim Design vergessen hat oder neue, zusätzliche Anforderungen und Features. Auch hier gilt dann erst einmal überlegen, wie man dies angeht und dann anfangen Code zu schreiben.

Der Schluss vom Lied: Eine funktionierende Website

Sind alle Features implementiert und Anforderungen umgesetzt kann man sich ruhigen Gewissens zurücklehnen und sein Gesamtwerk betrachten. Jedoch sollte man selbst zu diesem Zeitpunkt das gesamte Projekt noch einmal grundlegend überdenken: Ist wirklich alles eingebaut? Gibt es noch Features, die praktisch wären? Wie sieht es mit der Usability aus? Hier hilft es meist das Projekt anderen Leuten zu präsentieren, die dann sehr oft noch diverse Tipps für Verbesserungen geben können, die man auch noch vor dem Onlinestart umsetzen sollte.

Erst dann, wenn wirklich alles funktioniert und niemanden beim schnellen Überflug etwas ins Auge fällt kann die Site online gehen. Eventuell nimmt man sich aber auch noch kurz vor dem Release etwas Zeit und beachtet meine Tipps zur Optimierung von Quelltext.

Wenn man sich ein wenig weiter durch die Seite bewegt findet man noch diverse andere Generatoren. CD-Cover, Headergrafiken für das WordPress-Theme Kubrick, Puzzles oder sogar Sammelkarten sind mit wenigen Klicks erstellt. Und das scheint nur die Spitze des Eisbergs zu sein.

Der Film dauert ca. 17 Minuten und wurde vom Team des Instituts für Medizinische Lehre der Universität Bern gemeinsam mit der Stiftung Zugang für alle gedreht. Darin zeigen ein blinder und ein stark sehbehinderter Mann, wie sie das Internet nutzen und was eine als barrierefrei gekennzeichnete Seite wieder mit diversen Schwierigkeiten behaftet.

Für einige wird der Film schwer zu verstehen sein, da er in der Schweiz aufgezeichnet wurde und die Sprache demnach schweizerdeutsch ist. Aber ich bin der Meinung, dass es schon eindrucksvoll genug ist nur zuzuschauen.