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.

Spende

falls du es dir leisten kannst und du schätzt, was ich gemacht habe.

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.