Arkanis Development

Die erste "wirkliche" Seite, die man als Arkanis Development bezeichnen kann, ging am 14. Juni 2006 online. Die jenigen, die diese Webseite hier schon länger besuchen, kennen das durch und durch blaue Erscheinungsbild vielleicht noch. Allerdings war weder das Erscheinungsbild (Design) noch das darunter liegende System ausgereift, so dass alles noch einmal von Grund auf neu gemacht wurde. Aber warum der ganze Aufwand…

Alles nochmal… warum?

Nun, das System hinter der ersten Version der Arkanis Development Seite war nichts weiter, als ein schnelles Ruby on Rails Experiment. Dem entsprechend simpel und unausgereift war der Aufbau. Da es schnell gehen sollt, wollte ich mir eine zeitraubende Designphase einsparen und hab eines der vielen Test- und Prototyp-Designs auf meiner Festplatte wieder ausgegraben. Das Konstrukt, das dabei raus kam, hatte einige Schwächen:

• Sehr eintöniges Farbschema, stark vom Monitor und dessen Helligkeits- und Kontrasteinstellung abhängig.
• Komentare, die nach den Weblog-Einträgen standen, waren nur mit Aufwand vom eigentlichen Eintrag zu unterscheiden.
• Es war keine ausreichende Formatierung der Einträge und Kommentare möglich. Man konnte nur einige HTML-Elemente verwenden.
• Der überwiegende Punkt: es erfüllte einfach nicht meine Qualitätsansprüche.

Wenn man mal einen Strich unter die Rechnung macht… das System war nicht gut durchdacht und das Design war ein über ein Jahr alter Prototyp. Für den Anfang ok, aber wohl kaum etwas, womit man sich längere Zeit im Internet identifizieren will.

Neues Design…

Das neue Design war für mich persönlich ein Versuch, aus meinem recht begrenzten "Boxdenken" auszubrechen. Alle meine bisherigen Designs hatten denselben Aufbau gemeinsam: jedes Element war eindeutig durch eine Box gekennzeichnet. Während das natürlich einen gewissen Überblick garantiert, ist es vom Designstandpunkt gesehen doch eine große Einschränkung, die ich nun durchbrechen wollte.

Inspiriert wurde das Layout, also der grundlegende Aufbau und die Positionierung der einzelnen Elemente, hauptsächlich vom CSS Zen Garden Design Cold War. Danach hab ich mich mal auf einigen Weblogs umgeschaut und das übernommen, was mir persönlich sinnvoll erschien: Zähler hinter den Kategorien und beim Archiv, eine Übersicht der Kommentare, die Lesezeichen und XHTML Friends Network -Unterstützung.

Dennoch sollte auch das neue Design einen Teil der Stimmung des alten Designs beibehalten. Da die "Stimmung" der Seite hauptsächlich durch den blauen Farbton hergestellt wurde, wurde blau auch zur Grundfarbe des neuen Designs.

Blau, Flickr, Berge…

Das Cold War Design baut einen Großteil seiner Atmosphäre durch das Photo im Header auf. Deshalb war mein erster Ansatz, ein Photo zu suchen, das als Basis für das neue Design dienen kann. Auf der Seite des Webservers Mongrel wurden einige Photos von Flickr für das Design genutzt, weshalb ich mich bei Flickr umgesehen hab.

Nach dem ich erst einmal von der puren Menge der Photos dort überwältigt war, hab ich mir cruise-07-04-06-0102 von twisesq ausgesucht. Das Photo steht unter der Crative Commons Lizens und kann als Basis für eigene Arbeiten genutzt werden, solange der Photgraph genannt wird. Aus dem oberen Bereich des Photos entsand über einige Tage hinweg das bläuliche Design, das den kurzen Namen "mountain" trägt.

…und ein klein wenig CSS

Technisch habe ich mit diesem Design auch mal einen anderen Weg beschrieben: Einfachheit über flexibilität. Das macht sich am meisten dadruch bemerkbar, dass ein "fixed" Design entstand, d.h. ein Design mit einer festen Pixelbreite. Hauptgrund dafür war die feste Größe des Photos.

Die Breite ist so gewählt, dass selbst unter einer Auflösung von 800 x 600 noch alles sichtbar ist. In Firefox läst sich die Schrift um zwei Stufen vergrößern, und im Internet Exporer geht immer der Schriftgrad "Groß" bevor das Design aus den Fugen gerät. Opera zoomt den gesamten Inhalt, also spielt hier die Textgröße keine rolle. Leider hab ich im Bereich Accessibility bzw. Barrierefreiheit nicht all zu viel Erfahrung, allerdings hoffe ich, dass Personen, die weiter zoomen Spezialsoftware oder Opera verwenden.

Etwas mehr Flickr… etwas mehr Designs

Nun, da mich die pure Menge der Photos bei Flickr beeindruckt hat, hab ich dort etwas mehr Zeit verbracht. Dabei bin ich auch auf ein Photo gestoßen, zu dem ich einfach ein Design machen wollte: Red Sky at Night 2 von Sir Frog. Der aller erste Design-Prototyp für Arkanis Development drehte sich auch um den Gedanken "Sonnenuntergang" und davon abgesehen hat mich dieses Photo sehr beeindruckt.

In einem kleinen Inspirationsstoß entstand dann das "sunset" Design. Der größte Unterschied ist vor allem die dunkelgraue Basisfarbe, wodurch sich die gesamte Atmophäre ändert. Das Photo unterliegt jedoch nicht der Creative Commons Lizenz, allerdings habe ich auf Nachfrage von Sir Frog die persönliche Erlaubnis bekommen, das Photo auf der Webseite zu nutzen. An dieser Stelle noch einmal besten Dank an Sir Frog.

Der Styleswitcher

Nun, zwei Designs und nur eine Seite. Das erste, an was man da denkt, ist wohl ein Styleswitcher, mit dem man zwischen den Designs wechseln kann. Eine kurze Suche bei A List Apart später war ich in dieser Bezeihung auch schlauer.

Moderne Browser, d.h. nicht Internet Explorer, bieten Menüs an, um eine Seite auf ein alternatives Stylesheet umzuschalten. Allerdings gilt das immer nur für einen Seitenaufruf und die Menüs sind recht gut versteckt. Leider ist dadurch dieser Mechanismus nur begrenzt nützlich und wird oft nicht wahrgenommen.

Aus diesem Grund habe ich den auf JavaScript basierenden Styleswitcher aus dem A List Apart Artikel eingebaut. Die Auswahl der Styles über einfach Links war mir allerdings zu langweilig, also wurden die Auswahllinks um die kleine Vorschaubilder erweitert. Diese dynamischen Vorschaubilder funktionieren lediglich über CSS, selbst im Internet Exporer. Das hat zwar eine ganze Menge Arbeit gemacht, war es aber auch wert.

Allerdings war ich mit der manuellen Auswahl nicht sehr zufrieden, da sie immer auf die Neugierde des Benutzers angewiesen ist. Kommt er nicht auf die Idee, auf die komischen, farbigen Links zu klicken, weiß er auch nicht, dass es noch einen anderen Style für die Seite gibt.

Das Problem hat sich während einer Zugfahrt aufgelöst: Mir kam die Idee, die Styles abhängig von der Uhrzeit automatisch zu wählen. Am Tag das helle "mountain" Design und am Abend und in der Nacht das dunkle "sunset" Design.

Design Nummer 3

Aus irgend einem Grund brachte mich die zeitliche Einteilung der Styles auf die Idee, dass noch ein Style für den Morgen von nöten sei. Vielleicht war es auch nur ein Vorwand, um noch einmal bei flickr nach Photos zu suchen. An für sich hatte ich eine neblige Landschaft oder einen nebligen Wald im Sinn, da ich dafür allerdings kein passendes Photo gefunden hab, lief es schluss endlich auf einen Kompromiss hinaus: Clearwater River von teejaybee. Dieses Photo steht leider auch nicht unter der Creativ Commons Lizens, allerdings hat mir teejaybee auf Nachfrage ebenfalls gestatte, es auf der Webseite zu verwenden.

Aus diesem Photo entstand das grünliche "forest" Design. Problem dieses Designs ist jedoch, dass man es nicht wirklich mit einem Morgen in Verbindung bringt. Man könnte also frühs das bläuliche "mountain" Design und im Laufe des Tages das grünliche "forest" Design anzeigen, es würde keinen Unterschied machen.

Da allerdings die Designphase auch irgend wann einmal zu Ende sein muss, blieb es dabei. Nichts is perfekt… Zeit um sich technischen Details zu widmen.

Ein neues System

Die erste Version der Arkanis Development Seite war wie gesagt nur ein Experiment. Das gesamte Konzept war nicht ausgereift und aus diesem Grund wurde die zweite Version von Grund auf neu Entwickelt. Da das ganze eine sehr umfangreiche Sache war (118 Revisions in der Versionsverwaltung) gehe ich hier nur auf einige Hauptpunkte ein.

Text zu XHTML, Textilize und Markdown

Eine der Hauptschwächen der alten Seite war es, dass man die Einträge und Kommentare nicht formatieren konnte. Es waren nur einige XHTML-Codes möglich und XHTML ist für normale Menschen nicht wirklich umgänglich. Für Kommentare ist das zwar noch zu einem gewissen Maß vertretbar, aber beim schreiben der Einträge währe es schon ganz praktisch, wenn man Listen, Codeblöcke, Zitate, usw. verwenden könnte.

Der erste, wenn auch nur kurze, Gedanke war, selbst etwas zu schreiben, womit man über spezielle Codes aus einfachem Text gültiges XHTML erstellen kann. Allerdings habe ich bei einem anderen Projekt (DHLP²) mit diesem Ansatz ehr schlechte Erfahrungen gesamelt. Einfach Codes, wie z.B. ein Wort als kursiv markieren, sind kein Problem, aber sobald es komplexer wird (z.B. verschachtelte Listen), ist es zu zeitaufwändig und komplex um es nebenbei in der Freizeit zu programmieren.

Nach einigen kleineren Ausschweifen (z.B. SimpleMarkup oder Textilize für PHP) bin ich dann auf die RedCloth-Bibliothek gestoßen. Zum einen ist RedCloth bereits ein wenig in Ruby on Rails integriert (der textilize-Helper) und zum anderen verarbeitet RedCloth Textilize- und auch einige Markdown-Codes. Während Textilize mehr auf Webseiten ausgelegt ist, verwendet Markdown den in eMails gbräuchlichen Syntax, wodurch es relativ einsteigerfreundlich ist. Die Schwächen des einen werden durch die Stärken des anderen ausgeglichen.

Nach einer kürzen Einarbeitungszeit kann man dank RedCloth eigentlich jeden Webseiteninhalt auch als einfachen Text schreiben (so wie diese Seite), ohne sich sorgen über irgend welche XHTML-Sachen zu machen.

Da ich allerdings mit RedCloth nicht wunschlos glücklich war, wurde das Ganze um drei kleine Features erweitert. Namentlich die code backtick quotes und die eMail-Maskierung von Markdown, als auch die benutzbaren Links zu einzelnen Überschriften.

Von RSS 2.0 zu Atom Newsfeeds

Bis jetzt hatte ich mir eigentlich nicht wirklich viel Gedanken über die verschiedenen Newsfeed-Formate gemacht. Ich hab schon vor Jahren angefangen, Newsfeeds zu bauen, allerdings hab ich mich gleich zu Anfang (Atom war noch sehr neu) dazu entschieden, RSS zu verwenden. Zum einen hatte ich einige unangenehme Erfahrungen mit Atom 0.3 gesamelt und zum anderen haben sich die Leute bei A List Apart auch für RSS 2.0 entschieden.

Allerdings hatte ich auch schon in der Vergangenheit Probleme mit RSS 2.0. Vor allem als ich XHTML-Code in den Feed integrieren wollte, so dass der Aufbau des Dokuments auch im Feed erhalten bleibt. Anscheinend ist es bei RSS 2.0 üblich, einfach den XHTML-Quelltext zu maskieren und als normalen Text zu schicken. Der Feedreader soll dann entschieden, wie er es darstellt. Ich persönlich würde sowas als nicht wirklich optimal bezeichnen, denn wenn der Feadreader mit dem maskierten Quelltext nichts anfangen kann, sieht der Benutzer recht komische Dinge. Eine andere Methode ist es, den XML Namespace von XHTML zu verwenden, allerdings prangert der Feed Validator das mit einer Warnung an. Wie dem auch sei, ich hatte eigentlich dennoch vor, den Newsfeed der Version 2 über RSS 2.0 zu realisieren.

Den Ausschlag für das Atom-Format gab dann letzten Endes eine Kleinigkeit: Der name des Autors, den man für jeden Eintrag hinterlegen kann.

Im RSS-Format gibt es lediglich ein Element für die eMail-Adresse des Autors, die man optional mit einem Namen versehen kann. Da ich allerdings nicht vor hatte, die eMail-Adressen im Newfeed zu veröffentlichen (besonders bei den Kommentaren), musste eine andere Lösung her. A List Apart verwendet Fake-Adressen, aber ich hatte schon vor, einen inhaltlich korrekten Newsfeed zu erstellen. Also hab ich mich doch über Atom Newsfeeds informiert…

Zu meiner großen Überraschung ist Atom 1.0 RSS 2.0 sehr ähnlich. Allerdings bietet Atom an diversen Stellen sehr praktische Möglichkeiten, die RSS nicht bietet. So kann man bei Namen (z.B. Autor) Anzeigename, eMail, usw. getrennt von einander angeben. Als Bonus kam für mich dazu, dass man den Inhalt des Newsfeeds direkt als XHTML angeben kann. Damit waren im Prinzip all meine Anforderungen perfekt erfüllt.

Aus lauter Freude hab ich den Newsfeed gleich noch ein neues, angepasstes Stylesheet verpasst. Falls sich mal jemand einen Newsfeed im Browser ansehen sollte, sieht er keinen Zeichensalat, sondern eine brauchbar formatiert Seite.

Diverse Kleinigkeiten

Da der neuaufbau der Arkanis Development Seite natürlich kein komerzielles Produkt war, habe ich mich aus Lust an der Freude bei diversen Bereichen etwas verkünstelt. Zum einen das oben bereits erwähnte Stylesheet für die Newsfeeds, aber auch Dinge, die noch weniger auffallen.

So verfügt z.B. die "Datei nicht gefunden" Fehlerseite über ungewöhnlich viel Intelligenz, ganz im Stiele des A List Apart Artikels The Perfect 404. Anhand des Referer-Headers wird bestimmt, ob der Benutzer die Adresse eingetippt hat bzw. über ein Lesezeichen geöffnet hat, er über eine Suchmaschiene (Google, Yahoo oder MSN) auf eine falsche Adresse verlinkt wurde oder ob ich selbst einen falschen Link auf die Seite gestellt hab. Je nach dem werden passende Fehlermeldungen angezeigt.

Eine hoffentlich praktische Erweiterung sind die Verweise, die direkt neben den Überschriften auftauchen, wenn man sie mit der Maus überquert. Zumindest erscheinen sie in modernen Browsern (also nicht IE 6 oder älter). Das Ganze basiert auf der netten CSS-Spielerrei, bei der das ID-Attribut angezeigt wird, sobald der Mauszeiger sich über einer Überschrift befindet. Allerdings konnte man diese Dinger weder anklicken noch markieren, wodurch sie für normale Benutzer nutzlos wurden. Mit etwas serverseitiger Unterstützung werden aus dieser kleinen Spielerrei richtige Links, die dadurch hoffentlich auch nützlich sind.

Ebenfalls etwas mehr Zeit habe ich an den Textboxen verbracht, an denen man Komentare, Einträge und Artikel eingeben kann. Dank JavaScript, jQuery und viel Zeit verändern diese Textboxen ihre Höhe je nach dem eingegebenen Inhalt. Da man leider nicht nach den Zeichen pro Zeile gehen kann wird ein unsichtbarer DIV-Bereich mit dem Inhalt der Textbox gefüllt und anschließend die Höhe dieses DIV-Bereichs zurück auf die Textbox übertragen. Da die Berechnung allerdings etwas umständlich ist wird sie nur alle zwei Sekunden ausgeführt. Leider ist die Berechnung noch etwas ungenau und kann von Browser zu variieren.

Abschließende Worte

Alles in allem bin ich mit der zweiten Version von Arkanis Development sehr zufrieden. Sie ist zwar nicht perfekt, aber was ist das schon? Alle Probleme der ersten Version wurden behoben und das Design wird nun endlich meinen eigenen Ansprüchen gerecht… ich würde sogar sagen, dass es das beste Design ist, das ich bis jetzt gemacht habe.

Mit dem darunter liegenden System bin ich zwar noch nicht so wirklich zufrieden, allerdings funktioniert es. Hier möchte ich vielleicht noch sagen, dass diese Webseite ohne Ruby on Rails niemals entstanden währe. Es macht wirklich Spaß, in Rails zu programmieren und das ist auch der einzige Grund, warum ich diese Zeilen hier gerade schreibe.

Zum anderen habe ich bei diesem Projekt auch sehr viel gelernt. Eine ganze Menge über Ruby on Rails, RedCloth, Newsfeeds, Design, JavaScript und jQuery. Ich hoffe, dass mein nächstes privates Projekt wieder so viel Spaß macht.