graphicore.de ist online.

Lasse ist froh, die Fertigstellung der neusten Version von graphicore.de bekannt zu geben. Im Folgenden wird er einige der Designentscheidungen besprechen …

Freude, Freude,

der Relaunch meiner Website ist fertig. Ich werde hier meine Arbeiten präsentieren. Ich denke, die Seite ist zu einem Großteil selbsterklärend, also werde ich mehr die nicht so offensichtlichen Dinge fokussieren.

Ich habe mich entschieden, das Archiv zu Beginn leer zu lassen. Also, nicht wundern. Denn ich möchte mir etwas Zeit nehmen, um die Projekte angemessen aufzuarbeiten. Die Seite wird sich auf natürliche Weise entwickeln. Schließlich weist sich ein Designer durch die Dokumentation seiner Werke aus – also durch sein Portfolio.

Es wird hier keine Kommentarfunktion geben. Ich freue mich aber immer über eure Emails und werde mich, falls es unvermeidbar wird, zum Nachbessern hinreißen lassen. Das Anliegen hier ist die Präsentation meiner Arbeit, nicht die Diskussion darüber. Auch möchte ich nicht moderieren müssen, was mit Kommentaren unvermeidbar wäre.

teaser for numero uno, a bitmap font by graphicore.de

Ankündigung

Als Geschenk zum Geburtstag von graphicore.de werde ich als nächste Aktion die Pixelschrift aus dem graphicore Logo sowie den Code der sie gebaut hat – den ich gebaut habe – unter einer freien Lizenz veröffentlichen. Der Font hat momentan ca. 220 Zeichen und deckt unsere westlichen Sprachen ab. Der Code ist aber eher was für Bastler. Wiederkommen lohnt sich!

Was unter der Haube steckt,

muss ich hier auch erwähnen. Denn das Content Management System habe ich selbst gebaut. Wer für das Technische nicht zu haben ist, darf jetzt gehen.

Zend Framework LogoDojo Logo

doctrine LogoHTMLPurifier Logo

Markup

Graphicore.de validiert hier als XHTML 1.0 Strict, was mir sehr wichtig ist. Zugegeben, der Content-type ist text/html, trotzdem habe ich den Vorteil einer strikten Syntax, und es ist mir möglich, andere XML-Tools mit meinem Output zu verwenden. Ein Beispiel in diesem Fall ist der Atom-Feed.

Style

Progressive Verbesserung: Ich habe es mir nicht nehmen lassen, einige der neuen CSS3 Eigenschaften zu nutzen. Dazu zählen Farbverläufe, Pseudoelemente und natürlich @font-fontface. Wichtig war mir dabei, dass auch in Browsern, die diese Eigenschaften nicht unterstützen, die Anzeige funktioniert. Je besser der Browser, desto besser die Anzeige, ganz einfach.

Die Seite ist mit 1000px – relativ zu unserer Bildschirmtechnologie – eher breit. Zudem laden alle Inhalte untereinander, sind also gleichzeitig zu sehen und dadurch direkt vergleichbar. Um die gestalterische Kohärenz zu wahren, habe ich ein Gestaltungs- sowie ein Grundlinienraster eingerichtet. Die Ausführung ist im Vergleich zu den verfügbaren CSS-Frameworks eher primitiv, passt dafür aber auf großzügige 130 Zeilen und genügt meinen Ansprüchen. Das Grundlinienraster funktioniert in allen modernen Browsern ;)

Hier ist es: »das Element des Grundlinienrasters«. Das Raster ist ein 24px hohes und 99px breites Bild, das ständig wiederholt wird. Als ich das CSS geschrieben habe, hatte ich das Bild gelegentlich im Hintergrund, um damit das Raster zu vergleichen. Klicke hier um es in Aktion zu sehen(JavaScript muss an sein).

Dynamic

Ich habe das Konzept des unobtrusive JavaScript umgesetzt. Das heißt, die Seite funktioniert ohne JavaScript. Ist aber JavaScript vorhanden, wird der Unterhaltungsfaktor größer.

Für das dynamische Vehalten der Website mit JavaScript habe ich erstmals das Dojo Toolkit verwendet. Mit Dojo lässt sich – ähnlich wie mit jQuery – geschmeidig umgehen. Ich bin mit Dojo sehr zufrieden.

graphicore cache

Eine Sache, auf die ich besonders Stolz bin, ist meine Art Ajax-Requests zu cachen. Eine Anfrage wird stets zwischen der voherigen Anfrage und dem Hauptmenü geladen. Bevor eine Anfrage abgeschickt wird, falls das Ergebnis schon geladen ist, wird direkt an diese Stelle gesprungen – der Inhalt wird nicht erneut geladen.
Falls das nicht vormals gemacht wurde, möchte ich es gerne »graphicore cache« nennen ;)

Backend

Ich werde mich hier kürzer fassen, als es die Dichte des Themas möglicherweise erfordert. Aber auch dieses Post muss zu einem Ende kommen. Ich habe mit dem Zend Framework, Doctrine ORM und HTMLPurifiers das Backend gebaut. Dabei kommen auch eineinhalb Bibliotheken, die ich zusammengeschustert habe, zum Einsatz.

i18n

Ein Grund für mich, das Backend selbst zu bauen, war die eher schlechte Unterstützung existierender Lösungen für Internationalisierung. Es ist mir möglich, alle Bereiche der Webseite zu lokalisieren, und das habe ich gemacht.

Montag, 12. Juli 2010 03:23:56 Europe/Berlin