Icon für RSS-Feed Link zum XING-Profil
Wählen Sie eine Hintergrundfarbe:
Schwarzer Hintergrund Blauer Hintergrund Hellblauer Hintergrund Rose Hintergrund Grüner Hintergrund Grüner Hintergrund Olivfarbener Hintergrund Gelber Hintergrund Sandfarbiger Hintergrund Beiger Hintergrund Weisser Hintergrund
Texthintergrund:
Schwarzer Hintergrund Weisser Hintergrund Transparenter Hintergrund


Ladebild
Brick in the Wall

Kolophon

Anmerkung: Diese Seite wird momentan noch bearbeitet. Daher kann es teilweise zu Darstellungsfehlern kommen (besonders im IE).

Über diese Seite

Im Wesentlichen dient mir diese Seite als Testobjekt für Webtechniken und als Gedankenstütze. Denn wenn ich über ein bestimmtes Thema schreibe, kann ich mir dessen Handhabung wesentlich besser merken. So wird sich mit der Zeit eine private Sammlung von Artikeln entwickeln, die ich für interessant halte.
Schöner Nebeneffekt dabei ist, dass der eine oder andere daran teilhaben und für sich nutzen kann.

“Nur wenn man sein Wissen weitergibt, kann es wirken.”

Entstanden war der Grundgedanke am 1. Januar 2009 auf Basis eines eigenständig programmierten CMS, welches mit PHP umgesetzt wurde (xampp, mySQL, Apache). Ende April 2009 wurde dann alles auf WordPress überführt, da die Realisierung zuviel Zeit verschlang. Es war jedoch eine sehr gute Übung in Bezug auf PHP- und Javascript-Programmierung, mySQL-Datenbank-Verwaltung, Webserver-Konfiguration, AJAX, XHTML, CSS und dem Erstellen von Grafiken mit GIMP.

Das Layout
Die Webseite verwendet ein zweispaltiges Layout mit einem Contentbereich und einer Sidebar, jeweils mit fixer Breite. Entstanden aus einem komplett selbstentwickeltem Theme, das ich monatelang immer wieder verändert hatte, wurde es in das WordPress-Standard-Theme kubrick eingestrickt. Mittlerweile ist von diesem nicht mehr viel übrig. Mir schwebte immer ein kompaktes Gesamtbild der Seite vor, eventuell vergleichbar mit einem Handy (fragt mich nicht warum).
In Bezug auf die Farbwahl konnte ich mich nicht festlegen. Heute gefiel mir dunkelblau, morgen beige und übermorgen wieder schlichtes weiß. Daraus entwickelten sich verschiedene Hintergründen, die der Benutzer frei wählen kann.
Ob dies ein guter Weg ist, wird sich zeigen. So gut wie alle Blogs im Netz nutzen den gesamte Bildschirm. Aber ein neues Theme ist ja schnell integriert … *flöt!

Die Technik
Als Programmierer konnte ich es mir nicht nehmen lassen, auf dieser Seite diverse Javascript-Effekte einzusetzen. Neben den Einstellungen der Hintergrundfarbe, welche über einen Button erreichbar sind, wurde als besonderes Highlight noch ein Videomodus eingebaut, in den ich regelmäßig interessante Videos einstelle.
Dazu werden noch einige weitere auf Javascript basierende Funktionen folgen. Übrigens werden bei deaktiviertem Javascript oder nicht kompatiblen Browsern (<=IE7) die jeweiligen Button nicht angezeigt und die Seite funktioniert als reiner Blog oder aber es wird auf PHP umgeschwenkt (z.B. Datum- und Zeitanzeige).
In PHP wurden neben dem Kontaktformular auch ein Script für die Sessionverwaltung des ausgewählten Hintergrundes programmiert, damit dieser während eines Besuches gespeichert bleibt. Weitere PHP-Scripte sind in Vorbereitung (z.B. Fussballdatenbank).
Die Seite ist auf semantisch strukturiertem und (meist) validem XHTML-Strict ausgelegt und wird mit ebenfalls validem CSS3 gestaltet. Einige Attribute (z.B. 'aria-required'), die nicht dem W3-Concortium entsprechen (invalide), wurden jedoch hinsichtlich Barrierefreiheit belassen.
Die Darstellung wurde ausgiebig in verschiedenen Browsern (IE6, IE7, Firefox, Opera) getestet. Falls dennoch ein Darstellungsfehler oder ähnliches auftreten sollte, würde ich mich über einen kurzen Hinweis freuen.

Das CMS
Hin und her gerissen zwischen diversen CMS-Systemen wie Textpattern und Typo3 entschied ich mich für die OpenSource Software WordPress. Hier waren besonders die Vorteile im Bereich des Bloggens und die Verfügbarkeit der vielen Plugins ausschlaggebend.

Ach ja, “währ reschtsreeipfähler vined gannse behaldän” Icon Wink in Kolophon

Fahrplan der Entwicklungsstufen (Webside-Tagebuch)

  • 28.06.2009: Die Buttons für die Farbwahl des Hintergrundes wurden zusätzlich in die Sidebar integriert. Ich denke, meine Besucher haben (genau wie ich selber) keine Zeit für die Einstellungen-Funktion. Diese bleibt aber weiterhin funtionsfähig.
  • 24.06.2009: Die Smiley-Leiste wurde “versteckt”. Diese wird nun erst nach Anklicken sichtbar.
  • 23.06.2009: Im Bereich der Kommentare wurde eine Zeile mit Smileys hinzugefügt. Beim Kommentieren kann nun schnell und einfach ein Smiley per Klick hinzugefügt werden
  • 12.06.2009: Die am 07.06.2009 durchgeführte Änderung des Stylesheets (PHP-Version) wurde abgeändert. Die ursprüngliche starre CSS-Datei wurde wieder eingebaut und der dynamische PHP-Teil (Zufallshintergrund) in einer zweiten CSS-Datei ausgelagert.
    Begründung:
    In der Haupt-CSS-Datei sind Hacks für den IE eingebaut (eine Extra-Datei lohnte sich nicht –> wurde mit ‘!important’ gelöst). Diese haben aber nicht mehr funktioniert und die Darstellung des IE wurde somit teilweise zerissen.
  • 11.06.2009: Update auf Version 2.8 und Upload der deutschen Sprachdatei (wp-content/language). Es traten keine Probleme auf … (das war auch gut so, hatte ich doch ganz vergessen vorher ein Backup zu erstellen Icon Cool in Kolophon )
  • 09.06.2009: Die Webseite wurde bei diversen Blogverzeichnissen angemeldet und die ‘über mich’-Seite wurde überarbeitet. Des Weiteren wurde ein Extra-Icon für den Videomodus in die Sidebar und das Plugin ‘wp-ajax-edit-comments’ integriert.
  • 08.06.2009: Der Webseite wurde eine zusätzliche Page hinzugefügt. Unter der Fussball-Seite können ab sofort die aktuellen Tabellen und Spieltage der 1. sowie 2. Bundesliga eingesehen werden. Das Paket besteht aus einem Backend-Script (ca. 1225 Zeilen Code), einem Frontend-Script (ca. 450 Zeilen Code) und einer mySQL-Datenbank, welche selbstständig programmiert wurden. Die Erstellung dauerte 14 Tage und beinhaltet noch mehr Funktionen. So könnten auch alle Spieler und deren Daten (incl. Foto) von sämtlichen Vereinen angezeigt werden. Des Weiteren könnten neben den schon erwähnten Ligen auch alle weiteren deutschen und nationalen/ internationalen Ligen aufgeführt werden. Aus rechtlichen Gründen und weil ich nicht bedacht habe, das Script cronjobfähig zu machen (was ich bei Gelegenheit nachholen werde), wurde die Auswahl auf Tabelle und Spieltage der 1. und 2. Liga beschränkt. Auf den Einsatz von Ajax habe ich hinsichtlich Barrierefreiheit (schweren Herzens) verzichtet. Obwohl, man könnte es auch kombinieren …
  • 07.06.2009: Die standardmäßige Stylesheet-Datei wurde durch eine dynamische PHP-Version ersetzt. Beim ersten Aufruf der Webseite wird aus einem Pool eine zufällige Hintergrundfarbe ausgewählt und gespeichert (sowie die Schrifthelligkeit angepasst). Natürlich kann der Besucher auch weiterhin unter den Einstellungen frei wählen.
  • 05.06.2009: Das Plugin ‘WP-Landingside’ wurde in die Webseite integriert und ungepasst (z.B. geordnete Liste anstatt ungeordnete für die Linkanzeige)
  • 01.06.2009: Das Plugin ‘WP-Pagenavi’ wurde in die Webseite integriert und angepasst (Farben im Stylesheet)
  • Bis hier bezog sich der Fahrplan der Entwicklungstufen auf das alte selbsterstellte CMS. Ich wollte diese Daten gern mit übernehmen, auch wenn sie mit dieser Seite nicht mehr viel zu tun haben. Alle weiteren Daten oberhalb beziehen sich aktuell auf WordPress!

  • 20.04.2009: In den letzen 3 Tagen wurde ein komplett neues Kontaktformular programmiert und es wurde dabei besonders auf Sicherheit geachtet. Das gesamte Script verwendet die PHPMAILER-Klasse, informiert den Webadmin und generiert eine Bestätigungsmail. Name, Mail, Mitteilung und Captcha-Code sind Pflichtfelder, alle anderen Felder sind optional und können auch leer bleiben. Zur grundlegenden Absicherung gegen XSS-Attacken und Spam werden sämtliche Eingaben durch eine eigene Funktion (Stichwort ‘Regular Expressions’) überprüft/ gefiltert und es kommt (vorerst!) ein selbsterstelltes Captcha als Spamschutz zum Einsatz …(PHP, HTML, CSS)
  • 12.04.2009: Das Layout wurde nochmals komplett überarbeitet
  • 07.04.2009: Es wurde langsam Zeit, mir mal Gedanken über ein eigenes Logo zu machen … hier die ersten (noch einfachen) Entwicklungen: Link deaktiviert
  • 30.03.2009: Implementierung der jquery-scrollTo-Funktion für den Videomodus (nachdem zuerst die “normale” scrollTo- bzw. scrollBy-Funktion benutzt wurde), damit der Video-Bildschirm stets mittig platziert wird und erneute Veränderung des Layouts (jquery, GIMP, CSS, HTML)
  • 29.03.2009: Die Videomodus-Funktion wurde erweitert und ein Hintergrundbild eingepflegt, welches den Videoplayer optisch weiter nach hinten setzt …(GIMP, CSS, JS)
  • 26.03.2009: Die Tutorial-Seite wurde weiter ausgebaut und der Doctype von HTML 4.01 Transitional auf Doctype XHTML 1.0 Strict erhöht, um die Webseite auf den kommenden Standard XHTML 2.0 vorzubereiten
  • 21.03.2009: Implementierung und Anpassung eines “Suckerfish”-Menüs auf der Tutorial-Seite. Damit ist der Grundstein für Tutorials/Anleitungen aller Art gelegt, die nun nach und nach erstellt werden können
  • 14.03.2009: Implementierung eines “Cumulus”-Plugin, welches ich bei meinen endlosen Internet-Recherchen gefunden habe und mir ausgesprochen gut gefiel (Vielen Dank an Roy Tanck) … siehe auch mein Sidemap
  • 26.02.2009: Meinem Bild in der “über_mich”-Seite wurde ein mouseOver-Effekt hinzugefügt (GIMP, Javascript)
  • 25.02.2009: Die Bildanzeigefunktion prettyPhoto (siehe weiter unten 22.01.2009) mußte der slimbox2 weichen, die ebenfalls auf jquery beruht
  • 24.02.2009: Einige URLs (Startseite, Fussball, …) wurden für den User und Suchmaschinen durch mod_rewrite angepasst/optimiert. Dadurch wird z.B. (die eigentliche URL) ‘index1.php?nav=startseite’ durch ’startseite.html’ ersetzt …
  • 18.02.2009: Implementierung eines Buttons zur Schriftgrößenänderung (mit Speicherung der Auswahl)
  • 15.02.2009: Das Layout der Webseite wurde wieder mal überarbeitet …
  • 13.02.2009: Implementierung eines vorläufigen Besucherzähler …
  • 12.02.2009: Die Einstellung der Hintergrundfarbe durch den User wird ab sofort gespeichert (HTML, CSS, Javascript/Ajax)
  • 11.02.2009: Implementierung eines festen FLV-Video-Players. Durch diese Maßnahme können jetzt flv-Dateien abgespielt werden, die lokal auf dem eigenen Webspace vorliegen (HTML, CSS)
  • 08.02.2009: Implemetierung der Funktion “Einstellungen” … die Einstellung/Auswahl des Hintergrundes sowie noch folgenden Einstellmöglichkeiten sind durch Betätigen des “Einstellungen”-Buttons erreichbar (mit automatischer Schliess-Funktion)
  • 06.02.2009: Freut mich, dass Sie immer noch lesen! Als Dankeschön habe ich den Text überarbeitet und einige Schlagwörter mit Links versehen, um Ihnen weitere Informationen zukommen zu lassen.
  • 05.02.2009: Diverse Fehler (insbesondere CSS), welche das Add-one Firebug anzeigte, wurden beseitigt. Erste Anpassungen für die Darstellung im Internet Explorer.
  • 04.02.2009: Das Erscheinungsbild wurde nochmals überarbeitet und um weitere Einzelheiten ergänzt (CSS, GIMP). Des Weiteren wurde die Ajax-Implementierung überarbeitet … der übliche try/catch-Block (welcher XMLHTTPRequest …) konnte gänzlich entfernt werden. Es wird nur noch nach dem IE kontrolliert (Stichwort: ‘bedingte Kompilierung’ Info1, Info2 )
  • 03.02.2009: Zwischenresumee
    Die Webseite liegt in ihren Grundzügen vor und macht hinsichtlich der Darstellung/ Browserkompatibilität im Firefox und Opera bisher keine Probleme. Im IE treten allerdings (wie erwartet) ständig Schwierigkeiten auf, so funktioniert neben kleineren grafischen Geschichten z.B. der Slide-Effekt für den Video-Modus (noch) nicht.
    Doch zunächst werde ich das optische Erscheinungsbild weiter bearbeiten/ verfeinern (was im Grunde an jedem Tag passiert!) und mich um die Speichernmöglichkeit des Hintergrunds kümmern. Und auch wenn es elegant aussieht, dies mit Javasrcipt und Ajax zu realisieren (kein Neustart der Seite nötig), wird es wohl auf eine serverseitige Geschichte (PHP) in Verbindung mit einer Session hinauslaufen … auch um der allerorts geforderten Barrierefreiheit Tribut zu zollen.
    Den besonders in Firmen kommt es oft vor, dass Javascript aus Sicherheitsgründen deaktiviert ist und auch dann soll der Zugriff auf diese Seite und den Funktionalitäten möglich sein.
  • 02.02.2009: Hintergrund (Background) kann durch den User gewechselt werden (Javascript) … noch ohne Speichermöglichkeit
  • 31.01.2009: Entwicklung/ Erstellung verschiedener Hintergründe (Backgrounds) sowie Buttons (GIMP)
  • 29.01.2009: Auswechselung der Datum-/Zeitanzeige (PHP) durch eine erweitere Anzeige mit Sekundenanzeige (Javasrcipt)
  • 28.01.2009: Fertigstellung der “Fußball”-Seite (HTML, CSS, PHP, SQL) … hierbei funktioniert jede Auswahl unabhängig von den anderen
  • 25.01.2009: Implementierung des Backend-Bereiches (PHP)… dieses ca. 1250-zeilige Script stammte aus einem vorigen Projekt und wurde von mir erstellt
  • 24.01.2009: Fertigstellung der Fußball-Datenbank (mySQL)
  • 22.01.2009: Austausch der Bildanzeige-Funktion “slimbox” durch “prettyPhoto” in Folge Inkompatibilität mit jquery (”slimbox” hatte mir aber besser gefallen). Die “slimbox” ist auf ein anderes Javasrcipt-Framework (MooTools) aufgebaut.
  • 21.01.2009: Implementierung des “Video-Modus” mit Slidefunktion (Javascript-Framework jquery)
  • 18.01.2009: Implementierung des “Video-Modus” (Javascript) … noch ohne Slide-Funktion
  • 16.01.2009: Fertigstellung der “kontakt”-Seite (HTML, CSS, PHP)
  • 14.01.2009: Implementierung der Bildanzeige-Funktion “slimbox” (Javascript-Framework)
  • 12.01.2009: Fertigstellung der “über mich”-Seite (HTML, CSS, Photobearbeitung mit GIMP)
  • 10.01.2009: Erste Template-Vorlage incl. barrierefreiem Menü (HTML, CSS)
  • 08.01.2009: Fertigstellung des Grundgerüstes ( Template-Klasse, DBConnect-Klasse, … PHP, mySQL, XAMPP)
  • 01.01.2009: Entwicklung der Grundstruktur (Grobplanung)

Nach oben