A Short Personal Project History

The reason for me not updating my blog for a long while is that I was very busy. I'm still busy now, but yet writing. Something must have changed.
Metapolator is a next generation font creation tool. I started working on it roughly more than one year ago. We can consider the Libre Graphics Meeting 2014 in Leipzig in April 2-5 as my initiation into the project and the start of the current phase. More about the project history can be found at metapolator.com. Our Team gathered later that year again at the Automatic Type Design conference at the ANRT in Nancy in May 6-7 2014. In the meantime I was working on the previous prototype of Metapolator and shaped my mind about what it did then and what I thought it should be. It was in Nancy where we laid the foundation for the current incarnation of Metapolator technology.
Many people contributed to the project, but at Nancy I met Paul Sladen, whose kind help, being a good listener, and giving valuable advice, helped me to form concepts strong enough to get my hands dirty and start working. I left Nancy with a keen excitement in the project.

Things keep changing

After more than one year later the Metapolator Project entered an interesting new phase. Some of the old concepts got replaced by better ones but the general direction has proven right. We have a great product vision and a well conceived ux-design through the work of Peter Sikking. Soon we will present a minimal viable product that supports designers with designing font families. To implement all of our plans and to reach version 1.0 will take some more time however.

My role in the project is less about the creation of the “Metapolator” interface; instead I am the inventor of the underlying “Metapolator Technology”. There are a couple of modules that I realized will be useful in a vastly broader range of applications and tools than just Metapolator. This led to my decision to take parts out of the repositories of Metapolator, and also ufoJS, a library I began developing some years ago that is a key component of Metapolator.

The Plan

I hope I can use parts of Metapolator, especially CPS, to teach people how to make exciting new tools for font and graphic design.

Taking modules out of Metapolator to create stand-alone projects has primarily didactical reasons. It will be easier to show and explain the technology of Metapolator by looking at one part at a the time, instead of everything at once. It will also be easier to write specific documentation for these projects without having to consider the highly specialized nature of Metapolator. Lastly and most exciting for me: we will be able to create cool little projects with our technology to attract, inspire and teach the community. These projects will form an ecosystem around Metapolator: The developer tool for CPS that I'm working on right now will be available for all CPS based projects as an ad-hoc interface.

In the long run we will establish Metapolator technology as a platform to build the next generation of type design tools, or any other domain as well. Metapolator will be positioned as a highly sophisticated application that spawned new core technologies and on the way stimulates and enables new tools.

I want to see more people participating in Metapolator technology in the future; particularly because we offer interesting and genuinely new approaches for parametric design applications, and can enable everything between professional type design/engineering tools to ultra creative graphic design tools that are fun both to make and to use.

For a FLOSS project like ours it is crucial to gain a diverse community. Each part of the project will profit from discussing and solving issues raised by users from any background. We have topics ranging from computer language design to user interaction. The more people use our tools the more ideas and feedback will be available to further advance our mission.

Coming up next

Metapolator’s minimal viable product and the CPS Developer Tool are being developed in parallel at the moment. When I have finished the developer tool I will start to decouple some modules, namely: CPS plus the object model basics, MOM (maybe), our IO modules, the pen APIs and a collection of pens, and the CPS Developer Tool itself. I am also planning a series of blog posts to document the workings of these modules on a fairly high level and finally one about Metapolator that builds upon that knowledge. These articles will become part of the Metapolator documentation as well. I also have ideas for up to three fun projects that will prove the claims I made above and attract new people to this ecosystem; I expect one of these will be created soon after the isolation of CPS.

Comments

I have no comments feature on my blog for several reasons. You can discuss this post at the Metapolator g+ community, write me an email or chat to me on twitter.

Einsatzgebiet

Der Server ist nur Konzern-intern verfügbar und soll für drei unterschiedliche Szenarien verwendet werden:

1. Initial werden alle neuen Firewalls mit der generierten Konfiguration bespielt und dann an die Standorte ausgeliefert.
2. Im Servicefall kann ein Techniker die Konfiguration für das Ersatzgerät ermitteln.
3. Sollten Änderungen an den Konfigurationen nötig werden, ist dies der zentrale Ort, an dem die Änderungen eingepflegt werden.

Schnittstellen

Der Server stellt verschiedene Schnittstellen bereit, über die die Konfigurationsdateien und Metadaten ermittelt werden können:

• Die Webseite eines Standortes mit Konfigurationen und Zusatzinformation wie Öffnungszeiten und Adresse.
• Der Download vieler Konfigurationen auf einmal als ZIP-Archiv, wobei die Eingabe mittels Upload einer simplen CSV-Datei stattfindet.
• Eine HTTP-GET API, über die Konfigurationen und Metadaten direkt ermittelt werden können.
• Ein Maintenance-/Debugging-Interface, das via AJAX und JavaScript eine SNMP-Abfrage stellt und das Ergebnis filterbar darstellt.

Das richtige Werkzeug

Der Server ist in Python geschrieben. Als Webframework habe ich das leichtgewichtige Flask verwendet. Die benötigten Daten werden aus verschiedenen Quellen ermittelt: DNS, LDAP, SNMP, ein HTTP-PUSH basiertes System – über das Daten als XML empfangen, mit XSD validiert und aktualisiert werden – sowie weitere, lokal vorliegende Daten.

Administration

Auch die Serverkonfiguration kommt von mir. Der Apache2 Webserver liefert die Seite mit mod_wsgi, mod_authz_ldap und mod_ssl aus. Dabei ist der Zugriff beschränkt via LDAP-Gruppen und stets verschlüsselt mit HTTPS.

Screenshot

die Gestaltung ist auf das Wesentliche beschränkt und erklärt die bestehenden Möglichkeiten.

Die Website

ist in der Form eines Steckbriefes gehalten und informiert sachlich und schlicht. Die Website ist responsive umgesetzt, dadurch passt sich die Seite an verschiedenen Bildschirmgrößen optimal an.

Die Gestaltung

basiert auf einer spannenden Schriftmischung. Zum einen wird die moderne und sehr schlichte Webfont »Source Sans Pro« von Adobe verwendet. Sie stellt die Wortmarke in ihrer ExtraLight Variante dar und liefert die Texte mit ihrer Light Variante aus. Besondere Betonungen und Zwischenüberschriften werden von der »Magenta Open Cosmetica Bold« dargestellt – eine freie Version der »Optima« von Hermann Zapf und dadurch ein richtiger Klassiker. Die fette »Cosmetica« kontrastiert die feine »Source Sans« auch durch ihre Formensprache. Es wird ein schöner graphischer Bogen zwischen den Themen von Sibylle Frank – Architektur und Denkmalpflege – geschlagen.

Die richtige Technik

Das statische HTML der Website wurde mit Hyde – ein in Python geschriebener, statischer Websitegenerator – umgesetzt. Das optimiert Entwicklungszeiten und macht vor allem das Hosting sehr einfach und kostengünstig.

Das Briefpapier

Das Briefpapier ist passend zur Website umgesetzt. Die nach DIN gestalteten Seiten bestechen durch ihre aufgeräumte Erscheinung und die gleiche spannende Schriftmischung wie auf der Website. Das Briefpapier ist als »Open Office«/»Libre Office« Vorlage verfügbar.

Repository

Ihr findet den Multitoner auf Github. Lest euch unbedingt die README.md unten auf der Landing-Page durch.

Über

Silber & Blei benötigt eine FLOS-Software, um Multiplexbilder herzustellen. Mehr Information über das Projekt und seine Geschichte gibt es hier.

Hilferuf: Farbmanagement

Ich möchte die bestmögliche Druckvorschau mit dem Multitoner erreichen. Ich denke, Ghostscript kann alles, was dazu nötig ist. Über Hilfe von Leuten mit Erfahrung/Interesse in dem Bereich würde ich mich sehr freuen. Mehr Info dazu gibts in der README.md im Repository und in der Roadmap auf der rechten Seite.

Roadmap

Hier eine aktualisierte Version der Roadmap.

• Die Kernfunktionen sind hergestellt
• Laden und Speichern von Projekten
• Erstellung von Multitone-EPS-Bildern aus Schwarzweiß-Bildern mit Commandline Tool und über die GUI
• Aufräumen, mehr Code-Kommentare, Lizenzvermerke, README
• Veröffentlichung des Repositories
• aktueller Stand: Öffentliches Testen und erste Produktiveinsätze
• Farbmanagement: (Recherche und Implementierung) Um eine optimale Vorschau zu erhalten, sollen zukünftig ICC-Profile verwendet werden. Siehe auch die Option ‑sDeviceNProfile im Ghostscript Handbuch und GS9_Color_Management.pdf.
• Bessere Stapelverarbeitung und Ausnahmeverwaltung: unterschiedliche Kurven für das gleiche Set an Farben

Webdesign

Das Webdesign ist von uns, genau wie die Umsetzung. Wir haben dabei auf aktuelle Technologie gesetzt und eine gediegene Seite gestaltet. Es sind schöne Webfonts im Einsatz und die Seite ist responsive. Sie passt sich an die Größe des Browserfensters an, sodass sie mit auf dem Smartphone sowie auf dem Desktop optimal lesbar bleibt.

Statisch generiert mit Hyde/Python

Auf dem Server liegt eine komplett statische Seite, nur HTML-Dateien. Der Trick: die Seite wird mit dem statischen Websitegenerator Hyde generiert und dann hochgeladen. Das hat enorme Vorteile: die Seite ist schnell, sicher, wartungsarm und trotzdem noch komfortabel bedienbar. Auf einen Newsfeed wollten wir nicht verzichten, der wird von Hyde im ATOM-Format generiert. Hyde haben wir mit einem Plugin für unsere Bildergalerien erweitert, dazu aber gleich mehr.

Die Bildergalerie

Da wir unsere Bilder besonders schön präsentieren wollen, haben wir uns mit der Bildergalerie große Mühe gegeben. Das Kernstück der Galerie ist der Albumbetrachter. Ich habe hier ein paar beachtlichen Eigenschaften des Sliders zusammengefasst.

responsive

Der Albumbetrachter ist komplett responsive und stellt sich voll auf die Bildschirmgröße ein. Das könnt ihr auf einer Albumseite gerne ausprobieren. Einfach an der Größe des Browserfensters spielen und sehen, was passiert.

vielseitig

Es gibt verschiedene Fälle, in denen ein Album eingebunden werden kann. Einerseits die Seite des Albums selbst, andererseits kann ein Album auch immer auf anderen Seiten eingebunden werden. Zusätzlich haben die Alben eine eigene Adresse um sie als Iframe auf anderen Websites einzubetten. Sofern es der Browser unterstützt kann bei uns ein Album sogar in den Vollbildmodus versetzt werden.

einbettbar

Wie hier auf der Seite zu sehen ist, kann ein Album auf einer anderen Website einebettet werden. Dafür werden spezielle html Seiten generiert. Ein Album kennt die Adresse seiner Embed-Version und bietet einen kleinen Code-Generator an. Dank der großen Anpassungsfähigkeit des Sliders in Sachen Format haben wir darauf verzichtet, feste Größen vorzuschreiben. Der Autor der fremden Seite hat dadurch die Möglichkeit, das Album genau richtig einzupassen. Wir hoffen natürlich, mit dieser Funktion eine größere Reichweite zu erzielen, und würden uns sehr über Sichtungen unserer Alben in der freien Wildbahn freuen.

universell

Jede Instanz eines Albums verwendet den gleichen Code, sei es nun im Iframe oder auf der Albumwebsite. Er ist eine Weiterentwicklung des Codes von das Auto. Magazine. Die Thumbnails und die große Ansicht der Bilder werden von der gleichen Basis betrieben. Durch Erweiterung der Objekte und unterschiedliche Konfiguration kommen die verschiedenen Erscheinungsformen zustande. Für den Wechsel in den Vollbild-Modus muss nicht einmal das Album neu initialisiert werden.

einfach

Für die Bildverwaltung haben wir ein Plugin für Hyde in Python geschrieben. Das Plugin generiert Thumbnails und die großen Bilder eines Albums beim Erstellen der Seite. Bei einem Album handelt es sich um eine Konfigurationsdatei, in der die Liste der Bilder zu finden ist. Um ein Album einzubetten reicht es, den internen Namen zu kennen: {{make_album( 'Neueste_Bilder', ['autoplay', 'no-thumbs']) }}. Das Beispiel ist dierekt von unserer Startseite entnommen.

Das Programm sammelt Produktdaten von vielen verschiedenen Anbietern. Dabei kommt ein Adapter-Konzept zum Einsatz, welches aus den unterschiedlichen Anbieterformaten eine einheitliche Repräsentation in der Datenbank ablegt. Es werden hunderttausende verschiedene Produkte importiert und aktuell gehalten. Der Import wird via Cron-Job automatisch angestoßen, kann aber auch über das Webinterface gestartet werden.

Durch einen Locking-Mechanismus wird verhindert, dass die gleiche Quelle zur selben Zeit mehrfach importiert werden kann. Der Importstatus lässt sich jederzeit, auch während des laufenden Imports, ermitteln. Er kann über das Webinterface und für den Administrator mit dem Terminal abgefragt werden. Der Importer erkennt Änderungen an den einzelnen Produkten, sowie die Löschung von Produkten durch den Anbieter.

Die Redakteure wählen Produkte zur weiteren Auswahl und zur Anreicherung der Daten aus. Das Webinterface bietet zahlreiche Filter, um der großen Datenmenge Herr zu werden. Neben sehr einfachen Filteroptionen wie »Shop« oder »Preisspanne« steht eine Stichwortsuche und ein Filter für Kategorien zur Verfügung. Die von Anbieter zu Anbieter verschiedenen Kategorien können auf einem einheitlichen Kategoriebaum im Kurationsmodul abgebildet werden. Der Kategoriebaum kann im Webinterface erstellt werden, die Zuordnung von fremden Kategorien auf eigene Kategorien wird von einem Redakteur durchgeführt.

In der Datenbank kommen zwei Konzepte zum Darstellen des Kategoriebaums gleichzeitig zum Einsatz: eine Adjazenzliste, das heisst jede Kategorie kennt ihre Elternkategorie. Damit ist die Verwaltung des Baumes recht einfach umsetzbar. Ausserdem werden auch die Informationen des Nested-Set Models mit den Kategorien abgelegt. Damit ist die Abfrage des Baumes sehr performant und einfach möglich.

Für den Kurationsprozess habe ich eine kleine JavaScript Anwendung geschrieben, die, durch die Verwendung von AJAX, Ladezeiten deutlich verkürzt und die Serverprogrammierung stark vereinfacht hat. Beispielsweise erfolgt die Verwaltung des Anwendungsstatus im Client und musste daher nicht mit serverseitigen Sessions umgesetzt werden.

Motivation

Silber & Blei wird ausschließlich mit FLOS-Software produzieren, denn es ist uns wichtig die Kontrolle über unsere Werkzeuge zu haben. Wir werden erstklassige Print-Erzeugnisse mit Freier Software herstellen. Die Konsequenz dieser Entscheidung ist, dass wir fehlende Software selbst schreiben. Ein Programm für die Herstellung von Multiplex-Bildern fehlt bislang in der freien Software-Welt. Das Multitoner Tool wird unter der GPLv3 veröffentlicht.

Was ist Multiplex

Druckt man Schwarzweißbilder im Offset mit nur einer Druckfarbe – Schwarz im Normalfall – so erscheinen die Ergebnisse stumpf und ohne Tiefe. Das liegt daran, dass ein Farbkanal im Druck nur ca. 50 verschiedene Töne wiedergeben kann, Stichwort: Gamut. Zum Vergleich: ein Schwarzeißbild am Computermonitor wird mit ca. 256 Tönen dargestellt. Um Schwarzweißbilder hochwertig zu drucken, sodass sie eine Tiefe vergleichbar mit Fotoabzügen zeigen, verwendet man mehrere Druckfarben für ein Bild. Beispielsweise Schwarz für die tiefen Farbtöne und Grau für die mittleren Farbtöne. Der Gamut des Ergebnisses kann je nach Anzahl der verwendeten Farben gesteigert werden.

Begriffe

Wird eine Farbe verwendet, nennt man das »Simplex«, bei zwei Farben »Duplex«, drei Farben ist »Triplex« und vier ist »Quadruplex«. Der ganze Komplex könnte als »Multiplex« zusammengefasst werden. Die analogen englischen Begriffe Monotone, Duotone, Tritone, Quadtone, Multitone sind eindeutiger, da sie nicht mehrfach belegt sind: Duplex – eine Seite im Office-Drucker beidseitig bedrucken; Multiplex – Sperrholz, Kino mit vielen Sälen, Methode zur Signalübertragung.

Technisches

Das Tool ist in Python geschrieben. Das GUI ist mit GTK+ umgesetzt. Die Steuerkurven werden mit SciPy und NumPy ermittelt. Das Widget zur Darstellung und Manipulation der Steuerkurven ist selbst geschrieben (als GtkDrawingArea). Farbvorschau und Vorschaubild werden mit Ghostscript gerendert. Farbmanagement soll in Zukunft durch Ghostscript erreicht werden.

Roadmap

Hier eine grobe Skizze, wie ich mir den weiteren Projektverlauf vorstelle:

• aktueller Stand: Die Kernfunktionen sind hergestellt
• Laden und Speichern von Projekten
• Erstellung von Multitone-EPS-Bildern aus Schwarzweiß-Bildern mit Commandline Tool und über die GUI
• Aufräumen, mehr Code-Kommentare, Lizenzvermerke, README
• Veröffentlichung des Repositories
• Öffentliches Testen und erste Produktiveinsätze
• Farbmanagement: (Recherche und Implementierung) Um eine optimale Vorschau zu erhalten, sollen zukünftig ICC-Profile verwendet werden. Siehe auch die Option ‑sDeviceNProfile im Ghostscript Handbuch und GS9_Color_Management.pdf.
• Bessere Stapelverarbeitung und Ausnahmeverwaltung: unterschiedliche Kurven für das gleiche Set an Farben

• Ein Caching-Mechanismus des verwendeten CakePHP Frameworks wurde durch einen neuen Ansatz ergänzt. Feinere Kontrolle der Cache-Invalidierung konnte damit erreicht werden, das automatische Leeren der Caches ist deutlich verbessert.
• Einige Funktionen wurden zusammengefasst und zentral implementiert. Ganz im Sinne von DRY.
• Der Import von Produktdaten wurde erleichtert. Nach dem Upload der Daten wird ein im Hintergund laufender Prozess angestoßen. Der Fortschritt kann via AJAX verfolgt werden.
• Weitere Instandhaltungsarbeiten wurden durchgeführt und neue Features umgesetzt.

Anne ist gelernte Fotografin und Diplom-Geografin. Silber ist das Metall der Fotografie. Es wird benötigt, um die lichtempfindliche Schicht der Filme herzustellen. Als Designer habe ich mich der Schrift und der Typografie verschrieben. Blei ist das Metall des Buchdrucks. Schon Johannes Gutenberg hat es verwendet, um seine Lettern zu gießen.

Gemeinsam wollen wir fabelhafte Bücher herstellen. Schöne Werke mit Liebe zum Detail und handwerklichem Anspruch. Die Inhalte wollen wir auch selbst liefern, es geht uns darum, kreativen Themen eine gute Form zu geben. Ideen haben wir schon viele und darum freuen wir uns auf die Reise und sind gespannt, was uns erwartet.

Die Wortmarke

Das Wort Silber ist eine Interpretation der Bodoni Italic. Die Buchstaben wirken edel und verspielt. Der Anstrich von »l« und »b« sowie der Endstrich (Serife) des »r« bereiten auf die kommende Schriftmischung vor.
& Blei ist gesetzt in der Wilhelm Klingspor Gotisch und liefert einen starken Kontrast. Die wunderbar historisierende Schrift macht deutlich, dass es sich hier um das Blei der Setzer dreht.

Das Signet

In unserem Signet verschmelzen die Buchstaben von Ag und Pb, den chemischen Symbolen für die Elemente Silber und Blei, zu einer Einheit. Dies ist das Herzstück unserer Arbeit: Die Verbindung von Fotografie und Buchdruck.

Ich habe in den letzten zwei Jahren bei compuccino viel Erfahrung gesammelt. Unter den Kunden waren: Puma, Volkswagen, WWF, Koelnmesse (gamescom, photokina), Allianz, Die Welt, Heinz Ketchup, die Deutsche Bahn. Für die meisten habe ich kleine bis mittelgroße Projekte umgesetzt. Ich habe mehrere Facebook Anwendungen erstellt, also Anwendungen die mit Facebook interagieren und bei denen sich die Benutzer mit ihrem Facebook-Konto anmelden können. Zwei große Projekte stelle ich hier vor.

Compuccino hat zusammen mit Kircher Burkhardt die online Version des Volkswagen Markenmagazins umgesetzt. Das Internetmagazin ist komplett responsive gestaltet. Es kann vom Smartphone bis zum Desktop-Rechner optimal gelesen werden. Das Magazin wird in 16 Sprachen verfügbar sein.

Meine Verantwortung lag in der Umsetzung des JavaScripts, welches die komplexeren Verhaltensweisen steuert. So passen beispielsweise die Slideshow-Module je nach Bildschirmgröße ihr Aussehen und Verhalten an. Die Seite ist modular, sodass die Redaktion große Freiheit beim Erstellen und Gestalten der Artikel hat.

Details

Das JavaScript wird mit RequireJS geladen und benutzt jQuery für DOM Interaktionen und Eventhandling. Die Module sind gut wartbar, konfigurierbar und objektorientiert umgesetzt – sie können durch Vererbung erweitert werden. So teilen zum Bespiel alle Slideshow-Module dieselbe Basis. Es gibt eine API, die es Iframes erlaubt mit dem Elterndokument reibungslos zu interagieren. Animationen werden entweder mit CSS3 transitions oder jQuery realisiert, je nach Fähigkeit des Endgerätes.

Die Kunden durchstöbern und analysieren mit dem Dashboard die Daten, die von der »AUSSCHNITT Medienbeobachtung« auf Social Media Websites gesammelt wurden. Dabei formulieren sie über die Benutzeroberfläche individuelle Anfragen an die Datenbank. Meine Aufgaben waren vor allem das korrekte Abfragen und Darstellen der Daten, die Programmierung der interaktiven Benutzeroberfläche und die Entwicklung der Serversoftware.

Die Ergebnisse der Abfragen werden jeweils in einem »Widget« angezeigt. Die Widgets können neu angeordnet werden und bieten eine Detailansicht sowie weitere Filtermöglichkeiten. Einzelne Datenpunkte können auf ihre individuellen Meldungen zurückgeführt werden. Der aktuelle Zustand des Dashboards wird automatisch gespeichert und steht beim nächsten Besuch sofort wieder zur Verfügung. Hier gibts noch mehr Information …

Details

Das JavaScript wird mit RequireJS geladen und benutzt jQuery. Das JavaScript ist objektorientiert geschrieben. Die Diagramme werden durch die Google Chart Tools dargestellt. Die einzelnen Abfragen werden via AJAX an eine REST-API gestellt. Der komplette Zustand des Dashboards wird serialisiert, als JSON auf dem Server gesichert. Serverseitig wurde das CakePHP Framework verwendet.

Die Schrift

Die Schrift heißt @inpressulum nach dem Twitter-Namen von Marc, der sie auf seiner Wade trägt. Sie ist eine freie Interpretation irischer Schrift. Die Schrift enthält nur die in dem Entwurf vorkommenden Zeichen. Einige der Glyphen wurden angepasst, um den horizontalen Balken des Kreuzes zu formen.

Der Inhalt

Das Tattoo zeigt einen Vers des »Familiengebets« aus dem Film Der blutige Pfad Gottes. Es ist eine Übersetzung ins Irische und bedeutet ungefähr folgendes:

»Niemals soll unschuldig Blut vergossen werden, doch das Blut der Gottlosen soll fließen in Strömen. Die Drei sollen ihre schwarzen Flügel spreizen und werden der Hammer sein der Rache Gottes.«

Die Beine von Marc nach der Anwendung des Tattoos auf seiner rechten Wade.

Fork, clone or download: ufoJS on gitHub.

The Project

I was am tired of platform bound font editors, myself using Linux almost exclusively. Thus, beeing a web-developer most of my time, I naturally liked the idea of doing a font editor in the browser. So, last year I started porting parts of the Python libraries FontTools and RoboFab to JavaScript in my spare time. With the first goal of rendering the path data of UFO — Unified Font Object .glif files in a browser. Now, most of the ported code is based around the pen APIs and I can show you something.

Look at it.

On the left side you can see the example application included from the project folder using an iframe object to include it here. It discovers the available glyphs by reading the contents.plist file of an UFO font and renders the path data of the selected .glif file using SVG. The font you can see is the DemoFont.ufo taken from the RoboFab package.

Technical

The library can be used in Gecko and Webkit browsers and in NodeJS. The latter has some external dependencies. The Browser dependent parts are yet only in the sample application but use dojo as well.

Loading

For Module loading I am using an AMD (Asyncronous Module Definition) Loader. This nicely helps to organize code, is standardized and loads the stuff fast. In the browser facing code I'm using bdload. For nodeJs r.js of the requireJS project is utilized.

Testing

Check out the Test Page. This is done using the D.O.H: Dojo Objective Harness and this is the only thing you can run with nodeJS as well.

Es gibt ein Update unten auf dieser Seite.

...............................###.....##......................... ......##......................###......##......................... .....###......................##.................................. ..####..###.##..##.##.##.###..#####..###...###...####.###.##..###. .##.###..##.##.##.###..##.###.###.##..##..##.##.##.###.##.##.##.## ##...##..###..##...##..##..##.##..##..##.##....##...##.###..#####. ###.##...##...##...##..##..##.##..##..##.##....##...##.##...##.... .######..##...###.###..##.##..##..##..##.###.#.###.##..##...##..#. .....###.##....###.###.####...##..###.###.####..####...##....####. ##....##...............##......................................... ###..##................##......................................... .#####.................##.........................................

Was zu tun ist

Hol dir die Schriften

Lade die Schriften herunter und hab’ viel Spaß beim Schreiben:
graphicoreBitmapFont.tar.bz2 graphicoreBitmapFont.zip
alle Downloads

Besorge den Code

Wirf ein Auge auf den Code und dann, mach alles besser und mehr – oder benutze ihn einfach: graphicoreBMFB. Er ist in Python geschrieben und benutzt das großartige FontForge-Python Modul, um Outline-Fonts herzustellen. Du wirst dieses auch brauchen.

Komm mit

Wenn du dieses Projekt magst, oder wenn die Ideen nicht aufhören, aus deinem Unterbewusstsein aufzusteigen, lass mir eine Nachricht zukommen. Falls es genug Interesse an einer Zusammenarbeit gibt, werde ich dafür eine zentrale Stelle einrichten.

Mach ernst

Falls du eine individuelle Schrift brauchst oder ein Spezialformat, welches das Lesen auf deiner Spezialmatrix spezieller Dinge ansprechend macht – ich bin dein Mann. Des Weiteren bin ich gut in Internetangelegenheiten und Drucksachen. Wenn du meine Arbeit wertschätzt, passen wir vielleicht zusammen. Mehr Informationen über mein Angebot.

Die Stile und die Namen

Jede Familie des graphicore Bitmap Font hat eigene Charakteristiken. Weil es kein System in der Entwicklung dieser Charakteristiken gibt, habe ich entschieden, diese zu nummerieren – natürlich habe ich das Zählen bei Null begonnen. Außerdem ist es einfach, der Sammlung neue Varianten hinzuzufügen, wenn neue Generatoren auftauchen. Der Nachteil liegt darin, dass der Name nicht beschreibt, wie die Schrift aussieht.

Die Stile unterscheiden sich in ihrem Eckenradius und darin, wo die Ecken abgerundet sind. In den ersten drei Familien werden alle Ecken jedes »Pixels« gleich behandelt. Der Eckenradius der dritten Familie macht die Pixel zu Kreisen und die Familie daher zu einer »Dot-Matrix«.

In den letzteren Stilen entscheidet ein Algorithmus, wo abgerundete Ecken gezeichnet werden. Nummer Drei und Vier haben abgerundete Ecken, wo sie sein sollten. Fünf und Sechs fügen abgerundete Ecken außerhalb der Pixel hinzu, wo in der Matrix eigentlich kein Inhalt ist. Sieben und Acht haben »äußere« und »innere« abgerundete Ecken.

Die Gewichte

Ich habe für jede Familie zwölf verschiedene Gewichte vorbereitet. Gewicht heißt, dass sich zwischen den Pixelelementen der Durchmesser unterscheidet, ohne dass sich das Zentrum bewegt.

Im Bereich von Thin bis Regular wird das zugrundeliegende Raster klar sichtbar, weil sich zwischen den Objekten eine Lücke auftut. Medium ist das Gewicht, bei dem die Elemente genau die Rasterweite treffen. Die auf Medium nachfolgenden Gewichte wachsen über die Grenzen der Rastereinheiten hinaus und machen die Schrift fett. Zum Schluß ist bei Extra-Black ein Pixel mehr als doppelt so groß wie eine Rastereinheit, und Ultra-Black geht sogar einen Schritt weiter. Die Familien mit »äußeren« abgerundeten Ecken erhalten zunächst keine Gewichte leichter als Medium, weil ich mit dem Ergebnis bis jetzt noch nicht zufrieden bin.

Um auf einem Bildschirm bei 8 px zu schreiben, sind die Regular- und Book-Schnitte am besten geeignet, denn die Pixel sind ein wenig schmaler als eine Rastereinheit und beugen daher Rundungsfehlern vor. Medium sollte ebenfalls gut funktionieren und scharf sein. Die fetteren Gewichte habe ihren Einsatzbereich in den Display-Größen.

Alles in Einem

Weil es so großartig aussieht, habe ich alle Schnitte einer Familie gemeinsam auf einen Haufen gestapelt. Die fetteren Schriften werden die Umrandungen der leichteren. Dadurch entsteht eine Alles-In-Einem-Familienübersicht.

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.

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!

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.

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 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.

Content Management

Die Seite läuft mit einem speziell angefertigtem Content-Management-System. Ich habe es mit PHP5, Zend Framework, Doctrine ORM und HTMLPurifier gemacht. Cinecita.org ist der technische Vorgänger von graphicore.de.

Internationalisierung

Englisch und Spanisch waren notwendig. Die meisten fertig benutzbaren CMSe haben mittelmäßige Unterstützung für Internationalisierung. Dieses CMS war von Beginn an mit mehreren Sprachen im Hinterkopf geplant. Die Übersetzung ist das einzige was zu tun ist, falls aber eine Übersetzung fehlt, wird auf eine verfügbare zurück gegriffen. Die Anzahl der Sprachen ist technisch nicht begrenzt.

Blog

Die Seite hat einen komplett integrierten Blog mit eingebautem ATOM und RSS Newsfeed. Einige Teile der Webseite werden vom CineCita-Personal während sie auf Tour sind verändert. Sie können einen WYSIWYG-Editor benutzen und müssen nicht so viel mit HTML herumbasteln.

Eine interaktive Karte

bietet eine schnelle Übersicht des CineCita Tourplans und lässt den Benutzer durch die Tourstops navigieren. Die Ergebnisse der von CineCita abgehaltenen Workshops werden dort verfügbar sein.

Animationen

transportieren Emotionen. Das müsst ihr euch auf der Life-Seite anschauen. Die Kopfleiste ist überall animiert und wenn ein Untermenü geladen wird öffnet das kleine Mädchen in der linken oberen Ecke den Vorhang. Überhaupt kein Flash wurde benutzt, wir haben ausprobiert wie weit wir ohne gehen konnten. Frontend-Tools waren jQuery, jQuery Tools und natürlich XHTML 1.0 Strict

Ajax

Progressive Verbesserung gewährleistet, dass die Seite gut ohne Javascript funktioniert. Jedoch – falls Javascript läuft – werden die Inhalte zwischengespeichert und das Seitengerüst muss nicht jedes mal neu angefragt werden. Das lässt intakt, wie sich die Seite anfühlt, und verbessert die Kontrolle über den animierten Vorhang.

Die Mediendaten sind ausgegliedert

Videos

sind die Kernmedien von CineCita. Bei Workshops werden Videos von lokalen Mädchen und Frauen produziert. Die Videos werden von den guten und skalierenden Diensten von Vimeo oder YouTube ausgeliefert.

Die eingebundenen Diashows

laden Fotoalben von Googles Picasa und zeigen diese im Artikel an. Die CineCita-Leute benutzen diese Funktion häufig in ihren Blog-Artikeln um die wundervollen Plätze zu zeigen, die sie auf ihrer Reise besuchen.

Der Code ist eine stark modifizierte Version von pwi - Picasa Webalbum Integrator. Das Beste: die schwere Arbeit des massiven auslieferns von Bildern wird von Google gemacht.

Das Grafikdesign

ist von 10hoch16.de.

Das Projekt

Die Realität ist im Spielzeugladen gelandet. Die gesammelten Grausamkeiten der Welt werden hier in Puppenform gepackt. Da können die ganz Kleinen spielend lernen in was für einer Welt sie leben.

Dieses Projekt weist mit einzigartigen Spielzeugen auf relevante gesellschaftliche Themen hin. Mehr Infos dazu werden direkt mit den Produkten verlinkt.

Die Technik

Die ganze Seite ist statisch, wird aber von einem PHP-Script generiert. Wir haben uns dazu entschieden, da die Seite sehr portabel sein sollte – sie musste von einem USB-Stick aus funktionieren. Gleichzeitig bleiben die meisten Vorteile einer dynamischen Lösung erhalten – man kann Änderungen schnell und zentral einpflegen.

Ich habe die Umsetzung der Webseite gemacht. Dafür habe ich PHP5, HTML, CSS und JavaScript verwendet. Die Seite validiert als XHTML 1.0 Strict.

Konzept und Grafik

Die inhaltliche sowie grafische Gestaltung von Toytoytoys ist von Zehn hoch Sechzehn.

• www.amnesty.de
• www.unicef.de
• www.kindersoldaten.de
• www.unhcr.de
• www.vielfalt-tut-gut.de
• www.greenpeace.de
• www.helpedia.de
• www.caritas-international.de
• www.nacoa.de
• www.fruehehilfen.de

Die Ausstellung beschäftigte sich mit dem Thema Keller – genauer, der Entdeckung und Interpretation verschiedener Bedeutunsdimensionen von Kellerräumen – und fand im Keller statt und deshalb musste auch die Werbung in den Keller einladen. Eine waghalsige Kellertreppe visualisiert den Schritt in die Unterwelt.

Die Plakatwerbung in Marburg war zweistufig angelegt. Erst sollte die Treppe alleine prangern, wenige Tage später wurden die Informationen hinzugefügt. In der Zwischenzeit hatten die Leute zahlreiche Poster mitgenommen – was ich als Kompliment aufnehme.

Die Geschichte des Projektes gibt es auf dem abraum Blog.

Das Abraum Logo ist von Christina Willkomm.

Den Bogen zwischen Keller und White Cube spannend, war der Katalog zur Austellung ein schlicht gestaltetes, quadratisches Heft. Er führte die Besucher erläuternd durch die Exponate.

Konzept

Die Idee ist Menschen mit einer bestimmten Aufgabe in ihre Stadt zu schicken – der Suche nach wilden Tieren. Das führt dazu, dass sie ihre Umgebung anders wahrnehmen müssen – als Lebensraum für wilde Tiere. Inspiriert wurde das von der situationistischen Praxis des Dérive, siehe dazu auch Psychogeography. Das »Handbuch der wildwachsenden Großstadtpflanzen« von Helmut Völter schlägt auch in eine ganz ähnliche Kerbe.

Das Buch ist meine Diplomarbeit im Fach Visuelle Kommunikation. Ich habe es konzipiert, geschrieben und gestaltet. Betreut wurde ich von Alexander Branczyk und Prof. Jay Rutherford. Sommersemester 2008, Fakultät Gestaltung, Bauhaus-Universität Weimar.

Inhalt

Das Buch führt Anfangs in generelle Taktiken des Aufspürens wilder Großstadtbewohner ein. Später werden die Eigenheiten der Tierarten selbst unter die Lupe genommen. Im hinteren Teil des Buches wird auf die Lebensräume der Stadt eingegangen. Abschließend findet man eine Artenliste aller in der Großstadt vorkommenden wilden Säugetiere.

Zusätzliche Würze

erhält die Idee der Exkursion, denn die passenden Tierbilder muss der Leser selbst knipsen. Es sind lediglich die Seiten so vorbereitet, dass Bilder auf standard 10 × 15 cm Fotopapier eingefügt werden können.

Damit das Buch – in seiner Eigenschaft als Fotosammelalbum – nicht auseinendergeht, musste Extra-Material als Platzhalter in den Buchrücken eingebracht werden. Der Buchrücken ist breit genug um alle Bilder aufzunehmen.

Details

Es gibt jeweils passende Querverweise zwischen den Tieren und ihren Lebensräumen, damit man sich in dem Buch nicht verirrt. Ein lebender Kolumnentitel durfte auch nicht fehlen. Die Gestaltung der Seiten richtet sich nach einem Gestaltungsraster und dem Grundlinienraster.

Die Möglichkeit der Teilnahme an einem Entwurfswettbewerb für Briefmarken bekommt man selten. Ich schickte einen ausgefallenen Entwurf, obwohl der Kunstbeirat des Finanzministeriums oft konventionelle Gestaltung favorisiert. Der Entwurf wurde nicht genommen – ich mag ihn immer noch.

Die Schrift ist FF Seria von Martin Majoor. Betreut wurde der Entwurf von Professor Jay Rutherford an der Bauhaus-Universität Weimar im Sommersemester 2007.

Die Dokumentation unserer Arbeit ist auf die-turbine.de. Dort ist es voll von spannenden Medien und coolen Ideen.

Turbine ist

• Beni von Alemann
• Anne Gorke
• Julian Wagner
• Kari Wolf
• Uli Schöberl
• Tanja Sannwald
• Jens Ole Mayer
• Piet Machat
• Max Lisewski
• Simon Kiepe
• Daniel Klapsing
• Thomas Gnahm
• Lasse Fister

das würde es möglich machen in elegant-floralem Gewand an die Wände deines Heims zu schreiben. Als Illustration dieser Idee haben wir damals, 2005, dieses Bild gemacht.

Die Schrift ist Warnock Pro Regular. Die florale Füllung der Buchstaben wurde in aufwendiger Handarbeit eingepasst.

Das kleine g ist eines der schönsten Zeichen geworden.

Die unterschwellige Botschaft lässt sich am schönsten im entlaubten Zustand lesen: »argwohn«.

Im fertigen Werk tritt die Schrift zurück, ist aber dichter bewuchert als das sie umgebende gleichartige Muster. Damit ist die Tapete weniger aufdringlich – dafür wohnlicher. Der Entwurf ist im Orginal 5,58 Meter mal 2,56 Meter groß.

Die Typete war zu sehen im Rahmen des Aldi Huxley, schöne neue Warenwelt auf dem Design Mai Youngsters 2005 und auf dem Rundgang 2005 der Bauhaus-Universität Weimar.

Sie ist 2005 im Projekt »Schnellmodus International« entstanden. Wurde betreut durch Alexander Branczyk und gestaltet von Tanja Sannwald, Johanna Schiegnitz, Daniel Graf und Lasse Fister.

Die Typete nahm 2005 am Wettberb “New Walls, Please!” teil und fand sich löblich erwähnt im Katalog des Wettbewerbes wieder.