<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title type="text">Tagebuch | graphicore.de</title>
  <subtitle type="text">The Graphicore News</subtitle>
  <updated>2015-07-28T18:03:27+00:00</updated>
  <generator uri="http://framework.zend.com" version="1.10.8">Zend_Feed_Writer</generator>
  <link rel="alternate" type="text/html" href="http://graphicore.de/de/diary"/>
  <link rel="self" type="application/rss+xml" href="http://graphicore.de/de/feed/rss"/>
  <link rel="self" type="application/atom+xml" href="http://graphicore.de/de/feed/atom"/>
  <id>http://graphicore.de/diary/atom/</id>
  <author>
    <name>Lasse Fister</name>
    <email>commander@graphicore.de</email>
    <uri>http://graphicore.de</uri>
  </author>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Hello Metapolator]]></title>
    <summary type="html"><![CDATA[Hello MetapolatorLearn more about Metapolator and  ...]]></summary>
    <published>2015-07-28T12:45:00+00:00</published>
    <updated>2015-07-28T12:45:00+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2015-07-28_hello_metapolator"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2015-07-28:/diary/2015072812483855b77a264cda6</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="en" lang="en">
<xhtml:h1>Hello Metapolator</xhtml:h1>
<xhtml:p>Learn more about Metapolator and visit the <xhtml:a href="http://metapolator.com">project homepage</xhtml:a> and the <xhtml:a href="https://github.com/metapolator/metapolator/">github
repository</xhtml:a>.</xhtml:p>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos1">
<xhtml:h2>A Short Personal Project History</xhtml:h2>
<xhtml:p>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.<xhtml:br/>
Metapolator is a next generation font creation tool. I started
working on it roughly more than one year ago. We can consider the
<xhtml:a href="http://libregraphicsmeeting.org/2014/">Libre Graphics
Meeting 2014</xhtml:a> 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 <xhtml:a href="http://metapolator.com">metapolator.com</xhtml:a>. Our Team gathered
later that year again at the <xhtml:a href="http://automatic-type-design.anrt-nancy.fr/index_en.php">Automatic
Type Design conference</xhtml:a> 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.<xhtml:br/>
Many people contributed to the project, but at Nancy I met <xhtml:em>Paul
Sladen</xhtml:em>, 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. <xhtml:strong>I left Nancy with a keen
excitement in the project.</xhtml:strong></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos3">
<xhtml:h2>Things keep changing</xhtml:h2>
<xhtml:p>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 <xhtml:em>Peter Sikking</xhtml:em>. 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.</xhtml:p>
<xhtml:p>My role in the project is less about the creation of the
<xhtml:strong>“Metapolator” interface</xhtml:strong>; instead I am the inventor
of the underlying <xhtml:strong>“Metapolator Technology”</xhtml:strong>. 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 <xhtml:a href="https://github.com/graphicore/ufoJS/">ufoJS</xhtml:a>, a library I began
developing <xhtml:a href="/de/archive/2012-01-17_ufoJS-is-not-a-bird">some years ago</xhtml:a>
that is a key component of Metapolator.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos1">
<xhtml:h2>The Plan</xhtml:h2>
<xhtml:p><xhtml:strong>I hope I can use parts of Metapolator, especially
<xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em>, to teach people
how to make exciting new tools for font and graphic
design.</xhtml:strong></xhtml:p>
<xhtml:p>Taking modules out of Metapolator to create stand-alone projects
has primarily didactical reasons. It will be easier to <xhtml:strong>show
and explain</xhtml:strong> the technology of Metapolator by looking at
one part at a the time, instead of everything at once. It will also
be easier to <xhtml:strong>write specific documentation</xhtml:strong> 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
<xhtml:strong>attract, inspire and teach</xhtml:strong> the community. These
projects will form an ecosystem around Metapolator: The developer
tool for <xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em> that I'm
working on right now will be available for all <xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em> based projects as an ad-hoc
interface.</xhtml:p>
<xhtml:p>In the long run we will establish <xhtml:strong>Metapolator technology
as a platform to build the next generation of type design
tools</xhtml:strong>, 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.</xhtml:p>
<xhtml:p>I want to see more people participating in Metapolator
technology in the future; particularly because we offer
<xhtml:strong>interesting and genuinely new approaches for parametric
design applications</xhtml:strong>, and can enable everything between
professional type design/engineering tools to ultra creative
graphic design tools <xhtml:em>that are fun both to make and to
use</xhtml:em>.</xhtml:p>
<xhtml:p>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. <xhtml:strong>We have
topics ranging from computer language design to user
interaction</xhtml:strong>. The more people use our tools the more ideas
and feedback will be available to further advance our mission.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos3">
<xhtml:h2>Coming up next</xhtml:h2>
<xhtml:p>Metapolator’s minimal viable product and the <xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em> Developer Tool are being
developed in parallel at the moment. When I have finished the
developer tool I will start to <xhtml:strong>decouple some
modules</xhtml:strong>, namely: <xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em> plus the object model
basics, <xhtml:em title="Metapolator Object Model">MOM</xhtml:em> (maybe), our
IO modules, the pen APIs and a collection of pens, and the
<xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em> Developer Tool
itself. I am also planning <xhtml:strong>a series of blog posts</xhtml:strong>
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 <xhtml:strong>fun
projects</xhtml:strong> 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 <xhtml:em title="Cascading Properties Sheets">CPS</xhtml:em>.</xhtml:p>
<xhtml:h3>Comments</xhtml:h3>
<xhtml:p>I have no comments feature on my blog for several reasons. You
can discuss this post at the <xhtml:a href="https://plus.google.com/+LasseFister/posts/9BUVmNzQJCx">Metapolator
g+ community</xhtml:a>, write me an email or chat to me on twitter.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Firewall-Konfigurationsserver für einen internationalen Handelskonzern]]></title>
    <summary type="html"><![CDATA[Firewall-Konfigurationsserver für einen internatio ...]]></summary>
    <published>2014-02-27T14:22:48+00:00</published>
    <updated>2014-02-27T14:22:48+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2014-02-27_firewall-service"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2014-02-27:/diary/20140227142708530f4b3c7eae4</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Firewall-Konfigurationsserver für einen internationalen
Handelskonzern</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:h2>Einsatzgebiet</xhtml:h2>
<xhtml:p>Der Server ist nur Konzern-intern verfügbar und soll für
<xhtml:strong>drei unterschiedliche Szenarien</xhtml:strong> verwendet
werden:</xhtml:p>
<xhtml:ol>
<xhtml:li><xhtml:strong>Initial</xhtml:strong> werden alle neuen Firewalls mit der
generierten Konfiguration bespielt und dann an die Standorte
ausgeliefert.</xhtml:li>
<xhtml:li>Im <xhtml:strong>Servicefall</xhtml:strong> kann ein Techniker die
Konfiguration für das Ersatzgerät ermitteln.</xhtml:li>
<xhtml:li>Sollten <xhtml:strong>Änderungen an den Konfigurationen</xhtml:strong>
nötig werden, ist dies der zentrale Ort, an dem die Änderungen
eingepflegt werden.</xhtml:li>
</xhtml:ol>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h2>Schnittstellen</xhtml:h2>
<xhtml:p>Der Server stellt verschiedene Schnittstellen bereit, über die
die Konfigurationsdateien und Metadaten ermittelt werden
können:</xhtml:p>
<xhtml:ul>
<xhtml:li>Die <xhtml:strong>Webseite eines Standortes</xhtml:strong> mit
Konfigurationen und Zusatzinformation wie Öffnungszeiten und
Adresse.</xhtml:li>
<xhtml:li>Der <xhtml:strong>Download vieler Konfigurationen</xhtml:strong> auf einmal
als <xhtml:em>ZIP-Archiv</xhtml:em>, wobei die Eingabe mittels Upload einer
simplen <xhtml:em>CSV-Datei</xhtml:em> stattfindet.</xhtml:li>
<xhtml:li>Eine <xhtml:em>HTTP-GET API</xhtml:em>, über die Konfigurationen und
Metadaten <xhtml:strong>direkt ermittelt</xhtml:strong> werden können.</xhtml:li>
<xhtml:li>Ein <xhtml:strong>Maintenance-/Debugging-Interface</xhtml:strong>, das via
<xhtml:em>AJAX</xhtml:em> und <xhtml:em>JavaScript</xhtml:em> eine <xhtml:em>SNMP-Abfrage</xhtml:em>
stellt und das Ergebnis filterbar darstellt.</xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:h2>Das richtige Werkzeug</xhtml:h2>
<xhtml:p>Der Server ist in <xhtml:a href="http://python.org/">Python</xhtml:a>
geschrieben. Als Webframework habe ich das leichtgewichtige
<xhtml:a href="http://flask.pocoo.org/">Flask</xhtml:a> verwendet. Die
benötigten Daten werden aus verschiedenen Quellen ermittelt:
<xhtml:em>DNS</xhtml:em>, <xhtml:em>LDAP</xhtml:em>, <xhtml:em>SNMP</xhtml:em>, ein <xhtml:em>HTTP-PUSH</xhtml:em>
basiertes System – über das Daten als <xhtml:em>XML</xhtml:em> empfangen, mit
<xhtml:em>XSD</xhtml:em> validiert und aktualisiert werden – sowie weitere,
lokal vorliegende Daten.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h2>Administration</xhtml:h2>
<xhtml:p>Auch <xhtml:strong>die Serverkonfiguration kommt von mir</xhtml:strong>. Der
<xhtml:em>Apache2</xhtml:em> Webserver liefert die Seite mit <xhtml:em>mod_wsgi</xhtml:em>,
<xhtml:em>mod_authz_ldap</xhtml:em> und <xhtml:em>mod_ssl</xhtml:em> aus. Dabei ist der
<xhtml:strong>Zugriff beschränkt</xhtml:strong> via <xhtml:em>LDAP-Gruppen</xhtml:em> und
<xhtml:strong>stets verschlüsselt</xhtml:strong> mit <xhtml:em>HTTPS</xhtml:em>.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:h2>Screenshot</xhtml:h2>
<xhtml:p>die Gestaltung ist auf das Wesentliche beschränkt und erklärt
die bestehenden Möglichkeiten.</xhtml:p>
<xhtml:p><xhtml:img src="/images/diary/firewall-config-server-home.png" alt="Screenshot der Homepage des Servers" title="Screenshot"/></xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Kleine Geschäftsausstattung für Sibylle Frank]]></title>
    <summary type="html"><![CDATA[Kleine Geschäftsausstattung für Sibylle Frank
Link ...]]></summary>
    <published>2014-02-27T11:47:59+00:00</published>
    <updated>2014-02-27T11:47:59+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2014-02-27_sibylle_frank"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2014-02-27:/diary/20140227115040530f26907c1a8</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Kleine Geschäftsausstattung für Sibylle Frank</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:p>Link zur Website: <xhtml:a href="http://www.sibyllefrank.de/">Sibylle
Frank</xhtml:a></xhtml:p>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:h2>Die Website</xhtml:h2>
<xhtml:p>ist in der Form eines Steckbriefes gehalten und
<xhtml:strong>informiert sachlich und schlicht</xhtml:strong>. Die Website ist
responsive umgesetzt, dadurch passt sich die Seite an verschiedenen
Bildschirmgrößen optimal an.</xhtml:p>
<xhtml:p><xhtml:img src="/images/diary/sibylle-frank-web-desktop.png" alt="Breite Ansicht der Website von Sibylle Frank" title="Screenshot breiter Bildschirm"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos0">
<xhtml:h2>Die Gestaltung</xhtml:h2>
<xhtml:p>basiert auf einer <xhtml:strong>spannenden Schriftmischung</xhtml:strong>.
Zum einen wird die moderne und sehr schlichte Webfont »<xhtml:em>Source
Sans Pro</xhtml:em>« 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 »<xhtml:em>Magenta Open Cosmetica Bold</xhtml:em>« dargestellt – eine
freie Version der »<xhtml:em>Optima</xhtml:em>« von Hermann Zapf und dadurch
ein richtiger Klassiker. Die fette »<xhtml:em>Cosmetica</xhtml:em>«
kontrastiert die feine »<xhtml:em>Source Sans</xhtml:em>« auch durch ihre
Formensprache. Es wird ein <xhtml:strong>schöner graphischer
Bogen</xhtml:strong> zwischen den Themen von Sibylle Frank – Architektur
und Denkmalpflege – geschlagen.</xhtml:p>
<xhtml:h3>Die richtige Technik</xhtml:h3>
<xhtml:p>Das statische HTML der Website wurde mit <xhtml:a href="http://hyde.github.io/">Hyde</xhtml:a> – ein in Python geschriebener,
statischer Websitegenerator – umgesetzt. Das optimiert
Entwicklungszeiten und macht vor allem das Hosting sehr einfach und
kostengünstig.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth4 gridPos6">
<xhtml:p><xhtml:img src="/images/diary/sibylle-frank-web-mobile.png" alt="Schmale Ansicht der Website von Sibylle Frank" title="Screenshot schmaler Bildschirm"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:h2>Das Briefpapier</xhtml:h2>
<xhtml:p>Das Briefpapier ist passend zur Website umgesetzt. Die <xhtml:em>nach
DIN gestalteten Seiten</xhtml:em> bestechen durch ihre
<xhtml:strong>aufgeräumte Erscheinung</xhtml:strong> und die gleiche spannende
Schriftmischung wie auf der Website. Das Briefpapier ist als »Open
Office«/»Libre Office« Vorlage verfügbar.</xhtml:p>
<xhtml:p><xhtml:img src="/images/diary/sibylle-frank-letterhead.png" alt="Briefkopf von Sibylle Frank" style="padding-bottom:12px;"/></xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Der Multitoner ist da]]></title>
    <summary type="html"><![CDATA[Der Multitoner ist da




Repository
Ihr findet de ...]]></summary>
    <published>2013-11-13T16:59:11+00:00</published>
    <updated>2013-11-13T16:59:11+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-11-13_it-is-a-multitoner"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-11-13:/diary/201311131703405283b0ecf2532</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Der Multitoner ist da</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos2 gridWidth6">
<xhtml:p><xhtml:img src="/images/diary/multitoner_logo.png" alt="logo des Multitoners"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:h2>Repository</xhtml:h2>
<xhtml:p>Ihr findet den <xhtml:a href="https://github.com/graphicore/multitoner">Multitoner auf
Github</xhtml:a>. Lest euch unbedingt die README.md unten auf der
Landing-Page durch.</xhtml:p>
<xhtml:h2>Über</xhtml:h2>
<xhtml:p><xhtml:a href="https://silber-und-blei.com">Silber &amp; Blei</xhtml:a>
benötigt eine FLOS-Software, um Multiplexbilder herzustellen. Mehr
Information über das Projekt und seine Geschichte gibt es <xhtml:a href="/de/archive/2013-06-13_it-is-a-multitoner">hier</xhtml:a>.</xhtml:p>
<xhtml:h2>Hilferuf: Farbmanagement</xhtml:h2>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h2>Roadmap</xhtml:h2>
<xhtml:p>Hier eine aktualisierte Version der Roadmap.</xhtml:p>
<xhtml:ul>
<xhtml:li><xhtml:del>Die Kernfunktionen sind hergestellt</xhtml:del></xhtml:li>
<xhtml:li><xhtml:del>Laden und Speichern von Projekten</xhtml:del></xhtml:li>
<xhtml:li><xhtml:del>Erstellung von Multitone-EPS-Bildern aus
Schwarzweiß-Bildern mit Commandline Tool und über die
GUI</xhtml:del></xhtml:li>
<xhtml:li><xhtml:del>Aufräumen, mehr Code-Kommentare, Lizenzvermerke,
README</xhtml:del></xhtml:li>
<xhtml:li><xhtml:del><xhtml:strong>Veröffentlichung des
Repositories</xhtml:strong></xhtml:del></xhtml:li>
<xhtml:li><xhtml:strong>aktueller Stand:</xhtml:strong> Öffentliches Testen und erste
Produktiveinsätze</xhtml:li>
<xhtml:li><xhtml:strong>Farbmanagement:</xhtml:strong> (Recherche und
Implementierung) Um eine optimale Vorschau zu erhalten, sollen
zukünftig ICC-Profile verwendet werden. Siehe auch die Option
<xhtml:em>‑sDeviceNProfile</xhtml:em> im <xhtml:a href="http://www.ghostscript.com/doc/current/Use.htm">Ghostscript
Handbuch</xhtml:a> und <xhtml:a href="http://ghostscript.com/doc/current/GS9_Color_Management.pdf">GS9_Color_Management.pdf</xhtml:a>.</xhtml:li>
<xhtml:li>Bessere Stapelverarbeitung und Ausnahmeverwaltung:
unterschiedliche Kurven für das gleiche Set an Farben</xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:h2>Screenshot</xhtml:h2>
<xhtml:p><xhtml:img src="/images/diary/multitoner-screenshot_2013-11-13.png" alt="Screenshot des aktuellen Multitoner"/></xhtml:p>
<xhtml:div class="gridRow"/>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[silber-und-blei.com]]></title>
    <summary type="html"><![CDATA[silber-und-blei.com
Link zur Seite: Silber &amp; B ...]]></summary>
    <published>2013-11-12T17:50:43+00:00</published>
    <updated>2013-11-12T17:50:43+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-11-12_silber-und-blei"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-11-12:/diary/2013111217533652826b2018ca8</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>silber-und-blei.com</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:p>Link zur Seite: <xhtml:a href="https://silber-und-blei.com">Silber
&amp; Blei</xhtml:a></xhtml:p>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth9 gridPos0">
<xhtml:p><xhtml:img src="/images/diary/silber-und-blei-screenshot.png" alt="Screenshot silber-und-blei.com 2 Responsive-Stufen" title="Screenshot der Silber und Blei Website"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth3 gridPos0">
<xhtml:h2>Webdesign</xhtml:h2>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth4 gridPos3">
<xhtml:h2>Statisch generiert mit Hyde/Python</xhtml:h2>
<xhtml:p>Auf dem Server liegt eine komplett statische Seite, nur
HTML-Dateien. Der Trick: die Seite wird mit dem statischen
Websitegenerator <xhtml:a href="http://hyde.github.io/">Hyde</xhtml:a>
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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth3 gridPos7">
<xhtml:h2>Die Bildergalerie</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<!--
<xhtml:p>Hier eingebettet das Album »<xhtml:a href="https://silber-und-blei.com/galerie/Neueste_Bilder.html">Neuste
Bilder</xhtml:a>« von Silber und Blei:</xhtml:p>
-->
</xhtml:div>
</xhtml:div>
<!-- IS OFFLINE
<xhtml:iframe width="100%" height="736px" src="https://silber-und-blei.com/galerie/embed/Neueste_Bilder.html" allowfullscreen="" frameborder="0"/>
-->
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth2 gridPos0">
<xhtml:h3>responsive</xhtml:h3>
<xhtml:p>Der Albumbetrachter ist komplett responsive und stellt sich voll
auf die Bildschirmgröße ein. Das könnt ihr auf einer <xhtml:a href="http://silber-und-blei.com/galerie/Friedhofsengel.html">Albumseite</xhtml:a>
gerne ausprobieren. Einfach an der Größe des Browserfensters
spielen und sehen, was passiert.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth2 gridPos2">
<xhtml:h3>vielseitig</xhtml:h3>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth2 gridPos4">
<xhtml:h3>einbettbar</xhtml:h3>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth2 gridPos6">
<xhtml:h3>universell</xhtml:h3>
<xhtml:p>Jede Instanz eines Albums verwendet den gleichen Code, sei es
nun im Iframe oder auf der Albumwebsite. Er ist eine
Weiterentwicklung des Codes von <xhtml:a href="/de/archive/2013-01-31_big-business">das Auto. Magazine</xhtml:a>. 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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth2 gridPos8">
<xhtml:h3>einfach</xhtml:h3>
<xhtml:p>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: <xhtml:code title="jinja2 ist die verwendete Template Sprache">{{make_album(
'Neueste_Bilder', ['autoplay', 'no-thumbs']) }}</xhtml:code>. Das
Beispiel ist dierekt von unserer Startseite entnommen.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Kurationsmodul für The ICONIST]]></title>
    <summary type="html"><![CDATA[Kurationsmodul für The ICONIST
Link zur Seite: The ...]]></summary>
    <published>2013-11-12T15:53:17+00:00</published>
    <updated>2013-11-12T15:53:17+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-11-12_iconic_imports"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-11-12:/diary/2013111216002052825094cba29</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Kurationsmodul für The ICONIST</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:p>Link zur Seite: <xhtml:a href="http://iconist.de">The ICONIST</xhtml:a>,
obwohl was ich gemacht habe nicht direkt online gesehen werden
kann.</xhtml:p>
</xhtml:div>
<xhtml:h2>Import und Synchronisierung</xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:h2>Kuration Webinterface</xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:p><xhtml:img src="/images/diary/iconic_imports.png" alt="Screenshot Kurationsinterface"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:p>In der Datenbank kommen zwei Konzepte zum Darstellen des
Kategoriebaums gleichzeitig zum Einsatz: eine <xhtml:a href="http://de.wikipedia.org/wiki/Adjazenzliste">Adjazenzliste</xhtml:a>, das
heisst jede Kategorie kennt ihre Elternkategorie. Damit ist die
Verwaltung des Baumes recht einfach umsetzbar. Ausserdem werden
auch die Informationen des <xhtml:a href="http://de.wikipedia.org/wiki/Nested_Sets">Nested-Set Models</xhtml:a>
mit den Kategorien abgelegt. Damit ist die Abfrage des Baumes sehr
performant und einfach möglich.</xhtml:p>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:h2>Technologie</xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:p>Der Servercode ist mit PHP 5 geschrieben. Ich habe Composer mit
Symphony 2 als Framework verwendet und habe einiges selbst
geschrieben. Im Webinterface kommen RequireJS und jQuery zum
Einsatz, und auch eine ganze Hand voll eigener Module.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[In Entwicklung: Multitoner Tool]]></title>
    <summary type="html"><![CDATA[In Entwicklung: Multitoner Tool

Motivation
Silber ...]]></summary>
    <published>2013-06-13T09:03:43+00:00</published>
    <updated>2013-06-13T09:03:43+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-06-13_it-is-a-multitoner"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-06-12:/diary/2013061209052451b839d4ca32b</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>In Entwicklung: Multitoner Tool</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth3 gridPos0">
<xhtml:h2>Motivation</xhtml:h2>
<xhtml:p><xhtml:a href="/de/archive/2013-06-06_silber-und-blei">Silber &amp;
Blei</xhtml:a> wird ausschließlich mit <xhtml:a href="http://de.wikipedia.org/wiki/Free/Libre_Open_Source_Software" title="Free/Libre Open Source Software">FLOS-Software</xhtml:a>
produzieren, denn es ist uns wichtig <xhtml:strong>die Kontrolle über
unsere Werkzeuge</xhtml:strong> zu haben. Wir werden <xhtml:strong>erstklassige
Print-Erzeugnisse mit Freier Software</xhtml:strong> 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 <xhtml:a href="http://www.gnu.org/licenses/gpl-3.0.html" title="GNU General Public License Version 3">GPLv3</xhtml:a>
veröffentlicht.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos3 gridWidth4">
<xhtml:h2>Was ist Multiplex</xhtml:h2>
<xhtml:p>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: <xhtml:a href="http://de.wikipedia.org/wiki/Gamut">Gamut</xhtml:a>. Zum Vergleich: ein
Schwarzeißbild am Computermonitor wird mit ca. 256 Tönen
dargestellt. <xhtml:strong>Um Schwarzweißbilder hochwertig zu
drucken</xhtml:strong>, 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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos7 gridWidth3">
<xhtml:h2>Begriffe</xhtml:h2>
<xhtml:p>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
<xhtml:strong>Monotone, Duotone, Tritone, Quadtone, Multitone</xhtml:strong>
sind eindeutiger, da sie nicht mehrfach belegt sind:
<xhtml:strong>Duplex</xhtml:strong> – <xhtml:em>eine Seite im Office-Drucker
beidseitig bedrucken</xhtml:em>; <xhtml:strong>Multiplex</xhtml:strong> –
<xhtml:em>Sperrholz, Kino mit vielen Sälen, Methode zur
Signalübertragung</xhtml:em>.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:h2>Das Tool</xhtml:h2>
<xhtml:p><xhtml:img src="/images/diary/multitoner-tool-screenshot_2013-06-13.png" alt="Screenshot des aktuellen Multitoner Tools"/></xhtml:p>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth4 gridPos0">
<xhtml:p>Die Kernfunktion ist das Anlegen der zu verwendenden Druckfarben
(bis zu 10), wobei es für jede Druckfarbe eine Steuerkurve gibt.
Die Kurve ordnet jedem Eingabewert – von Schwarz bis Weiß – die
Menge der zu druckenden Farbe – von voller Farbauftrag bis kein
Farbauftrag – zu. Es gibt unterschiedliche Kurvenarten, um zwischen
den Kontrollpunkten zu interpolieren: linear, kubische Splines,
monoton kubische Splines.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth6 gridPos4">
<xhtml:p>Die Druckfarben erhalten einen Namen, damit man sie später im
Prozess eindeutig identifizieren kann. Für die Vorschau am
Bildschirm werden CMYK-Werte vergeben. Die Reihenfolge der
Druckfarben kann verändert werden, das ist nötig, weil es
Auswirkungen auf das Druckergebnis hat.</xhtml:p>
<xhtml:p>Für die Vorschau wird je Druckfarbe ein Farbstreifen abgebildet,
der die Ausgabewerte nach der Anwendung der Steuerkurve darstellt.
Ein weiterer Farbstreifen visualisiert die Kombination aller
Farben. Es gibt auch ein Vorschaubild, auf das die Einstellungen
angewendet werden.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth4 gridPos0">
<xhtml:h2>Technisches</xhtml:h2>
<xhtml:p>Das Tool ist in <xhtml:strong>Python</xhtml:strong> geschrieben. Das
<xhtml:em title="General User Interface: grafische Benutzeroberfläche">GUI</xhtml:em> ist
mit <xhtml:strong>GTK+</xhtml:strong> umgesetzt. Die Steuerkurven werden mit
<xhtml:strong>SciPy</xhtml:strong> und <xhtml:strong>NumPy</xhtml:strong> ermittelt. Das
Widget zur Darstellung und Manipulation der Steuerkurven ist selbst
geschrieben (als GtkDrawingArea). Farbvorschau und Vorschaubild
werden mit <xhtml:strong>Ghostscript</xhtml:strong> gerendert. Farbmanagement
soll in Zukunft durch Ghostscript erreicht werden.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth6 gridPos4">
<xhtml:h2>Roadmap</xhtml:h2>
<xhtml:p>Hier eine grobe Skizze, wie ich mir den weiteren Projektverlauf
vorstelle:</xhtml:p>
<xhtml:ul>
<xhtml:li><xhtml:strong>aktueller Stand:</xhtml:strong> Die Kernfunktionen sind
hergestellt</xhtml:li>
<xhtml:li>Laden und Speichern von Projekten</xhtml:li>
<xhtml:li>Erstellung von Multitone-EPS-Bildern aus Schwarzweiß-Bildern
mit Commandline Tool und über die GUI</xhtml:li>
<xhtml:li>Aufräumen, mehr Code-Kommentare, Lizenzvermerke, README</xhtml:li>
<xhtml:li><xhtml:strong>Veröffentlichung des Repositories</xhtml:strong></xhtml:li>
<xhtml:li>Öffentliches Testen und erste Produktiveinsätze</xhtml:li>
<xhtml:li><xhtml:strong>Farbmanagement:</xhtml:strong> (Recherche und
Implementierung) Um eine optimale Vorschau zu erhalten, sollen
zukünftig ICC-Profile verwendet werden. Siehe auch die Option
<xhtml:em>‑sDeviceNProfile</xhtml:em> im <xhtml:a href="http://www.ghostscript.com/doc/current/Use.htm">Ghostscript
Handbuch</xhtml:a> und <xhtml:a href="http://ghostscript.com/doc/current/GS9_Color_Management.pdf">GS9_Color_Management.pdf</xhtml:a>.</xhtml:li>
<xhtml:li>Bessere Stapelverarbeitung und Ausnahmeverwaltung:
unterschiedliche Kurven für das gleiche Set an Farben</xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Refactoring für WeSC]]></title>
    <summary type="html"><![CDATA[Refactoring für WeSCZusammen mit Uli Schöberl erfu ...]]></summary>
    <published>2013-06-10T13:25:33+00:00</published>
    <updated>2013-06-10T13:25:33+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-06-10_refactoring-the-Superlative-Conspiracy"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-06-07:/diary/2013060714011251b1e7a8c1407</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Refactoring für WeSC</xhtml:h1>
<xhtml:p>Zusammen mit <xhtml:a href="http://aplusplus.org/wesc/">Uli
Schöberl</xhtml:a> erfuhr die Seite <xhtml:a href="http://wesc.com">WeSC.com</xhtml:a> eine Renovierung. Hier ist eine
kurze Aufzählung von dem, was ich gemacht habe:</xhtml:p>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth4 gridPos0"><xhtml:img src="/images/diary/WeSC.png" alt="das Logo von WeSC"/></xhtml:div>
<xhtml:div class="gridWidth6 gridPos4">
<xhtml:ul>
<xhtml:li>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.</xhtml:li>
<xhtml:li>Einige Funktionen wurden zusammengefasst und zentral
implementiert. Ganz im Sinne von <xhtml:a href="https://de.wikipedia.org/wiki/DRY" title="Don't Repeat Yourself">DRY</xhtml:a>.</xhtml:li>
<xhtml:li>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.</xhtml:li>
<xhtml:li>Weitere Instandhaltungsarbeiten wurden durchgeführt und neue
Features umgesetzt.</xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Ankündigung: Silber & Blei]]></title>
    <summary type="html"><![CDATA[Ankündigung: Silber&nbsp;&amp;&nbsp;Blei




Anne  ...]]></summary>
    <published>2013-06-06T18:24:39+00:00</published>
    <updated>2013-06-06T18:24:39+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-06-06_silber-und-blei"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-06-06:/diary/2013060618252451b0d41400bf3</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Ankündigung: Silber &amp; Blei</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p style="background:#333;padding:48px 0;text-align:center;">
<xhtml:img src="/images/diary/silber-und-blei.png" alt="Signet: Silber und Blei.png"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:h2>Anne ist Silber und ich bin Blei</xhtml:h2>
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth5">
<xhtml:h2>Die Wortmarke</xhtml:h2>
<xhtml:p>Das Wort <xhtml:strong>Silber</xhtml:strong> ist eine Interpretation der
<xhtml:em>Bodoni Italic</xhtml:em>. Die Buchstaben wirken edel und verspielt.
Der Anstrich von »l« und »b« sowie der Endstrich (Serife) des »r«
bereiten auf die kommende Schriftmischung vor.<xhtml:br/>
<xhtml:strong>&amp; Blei</xhtml:strong> ist gesetzt in der <xhtml:em>Wilhelm
Klingspor Gotisch</xhtml:em> und liefert einen starken Kontrast. Die
wunderbar historisierende Schrift macht deutlich, dass es sich hier
um das Blei der Setzer dreht.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos5 gridWidth5">
<xhtml:h2>Das Signet</xhtml:h2>
<xhtml:p>In unserem Signet verschmelzen die Buchstaben von
<xhtml:strong>Ag</xhtml:strong> und <xhtml:strong>Pb</xhtml:strong>, 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.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Ich bin wieder selbstständig]]></title>
    <summary type="html"><![CDATA[Ich bin wieder selbstständig


Ich habe in den let ...]]></summary>
    <published>2013-01-31T13:58:45+00:00</published>
    <updated>2013-01-31T13:58:45+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2013-01-31_big-business"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2013-01-31:/diary/20130131135955510a78db3e0d6</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Ich bin wieder selbstständig</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p>Ich habe in den letzten zwei Jahren bei <xhtml:a href="http://compuccino.com/">compuccino</xhtml:a> viel Erfahrung gesammelt.
Unter den Kunden waren: <xhtml:strong>Puma</xhtml:strong>,
<xhtml:strong>Volkswagen</xhtml:strong>, <xhtml:strong title="World Wide Fund for Nature">WWF</xhtml:strong>, <xhtml:strong>Koelnmesse
(gamescom, photokina)</xhtml:strong>, <xhtml:strong>Allianz</xhtml:strong>,
<xhtml:strong>Die Welt</xhtml:strong>, <xhtml:strong>Heinz Ketchup</xhtml:strong>,
<xhtml:strong>die Deutsche Bahn</xhtml:strong>. 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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:h2><xhtml:a href="http://www.dasauto-magazine.com">Volkswagen – Das
Auto.Magazin</xhtml:a></xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth9 gridPos0">
<xhtml:p><xhtml:img src="/images/diary/selbstaendig-vw-das-auto.png" alt="Screenshots der Volkswagen Das Auto.Magazin Website in 3 responsive Stufen" title="Screenshots der Volkswagen Das Auto.Magazin Website in 3 responsive Stufen"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p><xhtml:a href="http://compuccino.com/projekte/vw-magazin-responsive-cms-das-auto">
Compuccino</xhtml:a> hat zusammen mit <xhtml:a href="http://www.kircher-burkhardt.com/#/de/projects/volkswagen/">Kircher
Burkhardt</xhtml:a> die online Version des Volkswagen Markenmagazins
umgesetzt. Das Internetmagazin ist komplett <xhtml:em title="»reaktionsfähig«, das Design passt sich an die Bildschirmgröße an.">
responsive</xhtml:em> gestaltet. Es kann vom Smartphone bis zum
Desktop-Rechner optimal gelesen werden. Das Magazin wird in 16
Sprachen verfügbar sein.</xhtml:p>
<xhtml:p>Meine Verantwortung lag in der Umsetzung des JavaScripts,
welches die komplexeren Verhaltensweisen steuert. So passen
beispielsweise die <xhtml:em title="Bilder und Folien werden wie Dias durch rutschen ausgetauscht.">Slideshow</xhtml:em>-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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h3>Details</xhtml:h3>
<xhtml:p>Das JavaScript wird mit <xhtml:a href="http://requirejs.org/">RequireJS</xhtml:a> geladen und benutzt <xhtml:a href="http://jquery.com/">jQuery</xhtml:a> für <xhtml:em title="»Document Object Model« Programmierschnittstelle für Webseiten">DOM</xhtml:em>
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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:h2><xhtml:a href="http://ausschnitt.de">AUSSCHNITT Medienbeobachtung</xhtml:a>
– Social Media Dashboard</xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p class="scrollX" style="white-space:nowrap;height:864px;">
<xhtml:img title="Das Dashboard mit 6 Widgets, mehrere solcher Seiten können durch Tabs organisiert werden." src="/images/diary/selbstaendig-ausschnitt-dashboard.png" class="gridGap" alt="Ausschnitt Dashboard"/><xhtml:img title="Detailansicht eines Widgets, hier kann auch eine feinere Filterung vorgenommen werden." src="/images/diary/selbstaendig-ausschnitt-detail.png" class="gridGap" alt="Ausschnitt Dashboard Detail"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p>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.</xhtml:p>
<xhtml:p>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. <xhtml:a href="http://compuccino.com/projekte/ausschnitt-social-media-dashboard">Hier
gibts noch mehr Information …</xhtml:a></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h3>Details</xhtml:h3>
<xhtml:p>Das JavaScript wird mit <xhtml:a href="http://requirejs.org/">RequireJS</xhtml:a> geladen und benutzt <xhtml:a href="http://jquery.com/">jQuery</xhtml:a>. Das JavaScript ist
objektorientiert geschrieben. Die Diagramme werden durch die
<xhtml:a href="https://developers.google.com/chart/">Google Chart
Tools</xhtml:a> 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 <xhtml:a href="http://cakephp.org/">CakePHP Framework</xhtml:a>
verwendet.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Die @inpressulum Schrift und ein typografisches Tattoo]]></title>
    <summary type="html"><![CDATA[Die @inpressulum Schrift und ein typografisches Ta ...]]></summary>
    <published>2012-09-02T19:04:49+00:00</published>
    <updated>2012-09-02T19:04:49+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2012-09-02_piece-of-prayer"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2012-09-02:/diary/201209021920375043b185ef245</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Die @inpressulum Schrift und ein typografisches Tattoo</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos2">
<xhtml:p><xhtml:img src="/images/diary/inpressulum-tattoo.png" alt="Bild des Tattoos mit irischem Text: Ní dhoirtfear fuil neamhchiontach choíche. Ach sruthóidh fuil na n-olc mar abhainn. Leathfaidh an triúr a n-eiteoga dubhaithe agus beidh siad ina chasúr buailte Dé."/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow" style="padding-top:48px;">
<xhtml:div class="gridWidth4 gridPos3">
<xhtml:h2>Die Schrift</xhtml:h2>
<xhtml:p>Die Schrift heißt <xhtml:a href="https://twitter.com/inpressulum">@inpressulum</xhtml:a> nach dem
Twitter-Namen von Marc, der sie auf seiner Wade trägt. Sie ist eine
freie Interpretation <xhtml:a href="https://de.wikipedia.org/wiki/Irische_Schrift">irischer
Schrift</xhtml:a>. Die Schrift enthält nur die in dem Entwurf
vorkommenden Zeichen. Einige der Glyphen wurden angepasst, um den
horizontalen Balken des Kreuzes zu formen.</xhtml:p>
<xhtml:h2>Der Inhalt</xhtml:h2>
<xhtml:p>Das Tattoo zeigt einen Vers des »Familiengebets« aus dem Film
<xhtml:a href="https://de.wikipedia.org/wiki/Der_blutige_Pfad_Gottes">Der
blutige Pfad Gottes</xhtml:a>. Es ist eine Übersetzung ins Irische und
bedeutet ungefähr folgendes:</xhtml:p>
<xhtml:p><xhtml:em>»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.«</xhtml:em></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow"><xhtml:img src="/images/diary/inpressulums-legs.png" alt="the tattooed calf"/></xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth4 gridPos3">
<xhtml:p>Die Beine von Marc nach der Anwendung des Tattoos auf seiner
rechten Wade.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Introducing ufoJS]]></title>
    <summary type="html"><![CDATA[Introducing ufoJS

Fork, clone or download: ufoJS  ...]]></summary>
    <published>2012-01-17T14:02:59+00:00</published>
    <updated>2012-01-17T14:02:59+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2012-01-17_ufoJS-is-not-a-bird"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2012-01-17:/diary/201201171404524f15800404a4f</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="en" lang="en">
<xhtml:h1>Introducing ufoJS</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth10">
<xhtml:p>Fork, clone or download: <xhtml:a href="https://github.com/graphicore/ufoJS">ufoJS on gitHub</xhtml:a>.</xhtml:p>
<xhtml:h2>The Project</xhtml:h2>
<xhtml:p>I <xhtml:del>was</xhtml:del> <xhtml:ins>am</xhtml:ins> 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 <xhtml:a href="http://sourceforge.net/projects/fonttools/">FontTools</xhtml:a> and
<xhtml:a href="http://www.robofab.org">RoboFab</xhtml:a> to JavaScript in my
spare time. With the first goal of rendering the path data of
<xhtml:a href="http://unifiedfontobject.org">UFO — Unified Font
Object</xhtml:a> .glif files in a browser. Now, most of the ported code
is based around the pen APIs and I can show you something.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth7"><xhtml:object width="100%" height="1104px" data="/ufoJS/env/glif-renderer.xhtml"/></xhtml:div>
<xhtml:div class="gridPos7 gridWidth3">
<xhtml:h3>Look at it.</xhtml:h3>
<xhtml:p>On the left side you can see the example application included
from the project folder using an <xhtml:del>iframe</xhtml:del>
<xhtml:ins>object</xhtml:ins> 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.</xhtml:p>
<xhtml:h2>Technical</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<xhtml:h3>Loading</xhtml:h3>
<xhtml:p>For Module loading I am using an <xhtml:a href="http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition">AMD
(Asyncronous Module Definition) Loader</xhtml:a>. This nicely helps to
organize code, is standardized and loads the stuff fast. In the
browser facing code I'm using <xhtml:a href="http://bdframework.org/bdLoad/docs/bdLoad-tutorial/bdLoad-tutorial.html">
bdload</xhtml:a>. For nodeJs <xhtml:a href="https://github.com/jrburke/r.js">r.js of the requireJS project</xhtml:a>
is utilized.</xhtml:p>
<xhtml:h3>Testing</xhtml:h3>
<xhtml:p>Check out the <xhtml:a href="http://graphicore.de/ufoJS/env/tests.html">Test Page</xhtml:a>. This is
done using the <xhtml:a href="http://dojotoolkit.org/reference-guide/util/doh.html">D.O.H: Dojo
Objective Harness</xhtml:a> and this is the only thing you can run with
nodeJS as well.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[graphicore Bitmap Font Building – updated]]></title>
    <summary type="html"><![CDATA[graphicore Bitmap Font Building – updated

Es gibt ...]]></summary>
    <published>2010-09-15T16:58:24+00:00</published>
    <updated>2010-09-15T16:58:24+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-09-09_A-Brute-Font-Attack"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-08-31:/diary/201008310024084c7c4ba816ac5</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>graphicore Bitmap Font Building – updated</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth7">Es gibt ein Update unten auf
dieser Seite.
<xhtml:p class="pre" style="font-weight:bold;line-height:12px;font-size:15px;">
...............................###.....##.........................
......##......................###......##.........................
.....###......................##..................................
..####..###.##..##.##.##.###..#####..###...###...####.###.##..###.
.##.###..##.##.##.###..##.###.###.##..##..##.##.##.###.##.##.##.##
##...##..###..##...##..##..##.##..##..##.##....##...##.###..#####.
###.##...##...##...##..##..##.##..##..##.##....##...##.##...##....
.######..##...###.###..##.##..##..##..##.###.#.###.##..##...##..#.
.....###.##....###.###.####...##..###.###.####..####...##....####.
##....##...............##.........................................
###..##................##.........................................
.#####.................##.........................................</xhtml:p>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth3">
<xhtml:h2>graphicore Bitmap Font</xhtml:h2>
<xhtml:p>ist eine Bitmap Schriftart, die früh von <xhtml:a href="http://www.underware.nl/site2/index.php?id1=sauna&amp;id2=styles&amp;id3=bold_italic_swash">
Underwares Sauna bold italic swash</xhtml:a> inspiriert wurde und
letztlich ihren eigenen Weg gegangen ist. Sie hat bei einer Größe
von 8 px und Vielfachen davon auf dem Bildschirm scharfe Konturen.
Der angedachte Anwendungsfall liegt jedoch eher in Display-Größen.
Diese Schrift zu benutzen, ist ein Bekenntnis für die Kernelemente
der Wahrnehmung unserer Zeit – Pixel. Auflösung ist endlich.
<xhtml:span title="Kantenglättung">Antialiasing</xhtml:span> ist eine Lüge!</xhtml:p>
<xhtml:p>Die Schriftart selbst ist in einem maßgeschneiderten Format
definiert, wobei die Glyphen in Textdateien idiomatisch als Bitmaps
gespeichert werden. Wie in der ASCII-Art (s.o.) steht ein Punkt für
»kein Pixel« und die Raute markiert das Gegenteil. So, meine ich,
sollte eine Bitmapschrift sein – aus Bitmaps gemacht. Die Zeichen
wurden in einem einfachen Texteditor-Programm bearbeitet.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos6 gridWidth4">
<xhtml:h2>graphicore Bitmap Font Building</xhtml:h2>
<xhtml:p>Die Schriften, die ich hier verfügbar mache, wurden aus einem
extra dafür hergestelltem Format »Bitmap Font« (BMF) in das fertig
benutzbare OpenType Format von einem <xhtml:a href="http://www.python.org/">Python</xhtml:a> Programm gebaut: »graphicore
Bimap Font Building« (graphicoreBMFB). Durch das Einsetzen
unterschiedlicher Parameter werden verschiedene Schriften
generiert. Die hier veröffentlichten Schriftdateien sind also eine
Demonstration der Ausgabe von graphicoreBMFB. Wenn die
Möglichkeiten von graphicoreBMFB umfangreicher werden, wird
schließlich auch die graphicore Bitmap Font Familie wachsen.</xhtml:p>
<xhtml:p>Dem Programm sind die Quelldaten der graphicore Bitmap Font im
BMF-Format beigefügt. Das eröffnet dir folgende Möglichkeiten:</xhtml:p>
<xhtml:ul>
<xhtml:li>Du kannst deine eigenen Schriften generieren, falls du die
Einstellungen, die ich gewählt habe, nicht magst.</xhtml:li>
<xhtml:li>Du kannst es als funktionierendes Beispiel studieren und
lernen, wie du deine eigene Schriftart anfertigst.</xhtml:li>
<xhtml:li>Du kannst deinen eigenen Generator schreiben und die Schrift
damit bauen.</xhtml:li>
<xhtml:li>Du kannst deine Erweiterungen der Welt zurückgeben.</xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridPos7 gridWidth3">
<xhtml:h2>Was zu tun ist</xhtml:h2>
<xhtml:h3>Hol dir die Schriften</xhtml:h3>
<xhtml:p>Lade die Schriften herunter und hab’ viel Spaß beim
Schreiben:<xhtml:br/>
<xhtml:a href="http://github.com/downloads/graphicore/graphicoreBMFB/graphicoreBitmapFont_0.0004.tar.bz2">
graphicoreBitmapFont.tar.bz2</xhtml:a> <xhtml:a href="http://github.com/downloads/graphicore/graphicoreBMFB/graphicoreBitmapFont_0.0004.zip">
graphicoreBitmapFont.zip</xhtml:a><xhtml:br/>
<xhtml:a href="http://github.com/graphicore/graphicoreBMFB/downloads">alle
Downloads</xhtml:a></xhtml:p>
<xhtml:h3>Besorge den Code</xhtml:h3>
<xhtml:p>Wirf ein Auge auf den Code und dann, mach alles besser und mehr
– oder benutze ihn einfach: <xhtml:a href="http://github.com/graphicore/graphicoreBMFB">graphicoreBMFB</xhtml:a>.
Er ist in Python geschrieben und benutzt das großartige <xhtml:a href="http://fontforge.sourceforge.net/">FontForge</xhtml:a>-Python Modul, um
Outline-Fonts herzustellen. Du wirst dieses auch brauchen.</xhtml:p>
<xhtml:h3>Komm mit</xhtml:h3>
<xhtml:p>Wenn du dieses Projekt magst, oder wenn die Ideen nicht
aufhören, aus deinem Unterbewusstsein aufzusteigen, <xhtml:a href="/de/page/lasse">lass mir eine Nachricht zukommen</xhtml:a>. Falls es
genug Interesse an einer Zusammenarbeit gibt, werde ich dafür eine
zentrale Stelle einrichten.</xhtml:p>
<xhtml:h3>Mach ernst</xhtml:h3>
<xhtml:p>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.
<xhtml:a href="/de/page/hire-lasse">Mehr Informationen über mein
Angebot.</xhtml:a></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:h2>Alle momentan in der Schrift enthaltenen Glyphen.</xhtml:h2>
<xhtml:table class="bitmapFontCharTable">
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: exclam, Unicode: U+0021">!</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quotedbl, Unicode: U+0022">"</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: numbersign, Unicode: U+0023">#</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: dollar, Unicode: U+0024">$</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: percent, Unicode: U+0025">%</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ampersand, Unicode: U+0026">&amp;</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quotesingle, Unicode: U+0027">'</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: parenleft, Unicode: U+0028">(</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: parenright, Unicode: U+0029">)</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: asterisk, Unicode: U+002A">*</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: plus, Unicode: U+002B">+</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: comma, Unicode: U+002C">,</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: hyphen, Unicode: U+002D">-</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: period, Unicode: U+002E">.</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: slash, Unicode: U+002F">/</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: zero, Unicode: U+0030">0</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: one, Unicode: U+0031">1</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: two, Unicode: U+0032">2</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: three, Unicode: U+0033">3</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: four, Unicode: U+0034">4</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: five, Unicode: U+0035">5</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: six, Unicode: U+0036">6</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: seven, Unicode: U+0037">7</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: eight, Unicode: U+0038">8</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: nine, Unicode: U+0039">9</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: colon, Unicode: U+003A">:</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: semicolon, Unicode: U+003B">;</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: less, Unicode: U+003C">&lt;</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: equal, Unicode: U+003D">=</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: greater, Unicode: U+003E">&gt;</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: question, Unicode: U+003F">?</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: at, Unicode: U+0040">@</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: A, Unicode: U+0041">A</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: B, Unicode: U+0042">B</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: C, Unicode: U+0043">C</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: D, Unicode: U+0044">D</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: E, Unicode: U+0045">E</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: F, Unicode: U+0046">F</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: G, Unicode: U+0047">G</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: H, Unicode: U+0048">H</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: I, Unicode: U+0049">I</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: J, Unicode: U+004A">J</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: K, Unicode: U+004B">K</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: L, Unicode: U+004C">L</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: M, Unicode: U+004D">M</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: N, Unicode: U+004E">N</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: O, Unicode: U+004F">O</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: P, Unicode: U+0050">P</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: Q, Unicode: U+0051">Q</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: R, Unicode: U+0052">R</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: S, Unicode: U+0053">S</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: T, Unicode: U+0054">T</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: U, Unicode: U+0055">U</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: V, Unicode: U+0056">V</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: W, Unicode: U+0057">W</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: X, Unicode: U+0058">X</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Y, Unicode: U+0059">Y</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Z, Unicode: U+005A">Z</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: bracketleft, Unicode: U+005B">[</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: backslash, Unicode: U+005C">\</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: bracketright, Unicode: U+005D">]</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: asciicircum, Unicode: U+005E">^</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: underscore, Unicode: U+005F">_</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: grave, Unicode: U+0060">`</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: a, Unicode: U+0061">a</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: b, Unicode: U+0062">b</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: c, Unicode: U+0063">c</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: d, Unicode: U+0064">d</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: e, Unicode: U+0065">e</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: f, Unicode: U+0066">f</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: g, Unicode: U+0067">g</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: h, Unicode: U+0068">h</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: i, Unicode: U+0069">i</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: j, Unicode: U+006A">j</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: k, Unicode: U+006B">k</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: l, Unicode: U+006C">l</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: m, Unicode: U+006D">m</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: n, Unicode: U+006E">n</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: o, Unicode: U+006F">o</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: p, Unicode: U+0070">p</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: q, Unicode: U+0071">q</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: r, Unicode: U+0072">r</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: s, Unicode: U+0073">s</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: t, Unicode: U+0074">t</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: u, Unicode: U+0075">u</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: v, Unicode: U+0076">v</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: w, Unicode: U+0077">w</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: x, Unicode: U+0078">x</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: y, Unicode: U+0079">y</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: z, Unicode: U+007A">z</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: braceleft, Unicode: U+007B">{</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: bar, Unicode: U+007C">|</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: braceright, Unicode: U+007D">}</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: asciitilde, Unicode: U+007E">~</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: exclamdown, Unicode: U+00A1">¡</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: cent, Unicode: U+00A2">¢</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: sterling, Unicode: U+00A3">£</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: currency, Unicode: U+00A4">¤</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: yen, Unicode: U+00A5">¥</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: brokenbar, Unicode: U+00A6">¦</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: section, Unicode: U+00A7">§</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: dieresis, Unicode: U+00A8">¨</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: copyright, Unicode: U+00A9">©</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ordfeminine, Unicode: U+00AA">ª</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: guillemotleft, Unicode: U+00AB">«</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: logicalnot, Unicode: U+00AC">¬</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: registered, Unicode: U+00AE">®</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: macron, Unicode: U+00AF">¯</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: degree, Unicode: U+00B0">°</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: plusminus, Unicode: U+00B1">±</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: twosuperior, Unicode: U+00B2">²</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: threesuperior, Unicode: U+00B3">³</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: acute, Unicode: U+00B4">´</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: micro, Unicode: U+00B5">µ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: paragraph, Unicode: U+00B6">¶</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: periodcentered, Unicode: U+00B7">·</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: cedilla, Unicode: U+00B8">¸</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: onesuperior, Unicode: U+00B9">¹</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ordmasculine, Unicode: U+00BA">º</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: guillemotright, Unicode: U+00BB">»</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: onequarter, Unicode: U+00BC">¼</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: onehalf, Unicode: U+00BD">½</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: threequarters, Unicode: U+00BE">¾</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: questiondown, Unicode: U+00BF">¿</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Agrave, Unicode: U+00C0">À</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Aacute, Unicode: U+00C1">Á</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Acircumflex, Unicode: U+00C2">Â</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Atilde, Unicode: U+00C3">Ã</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: Adieresis, Unicode: U+00C4">Ä</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Aring, Unicode: U+00C5">Å</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: AE, Unicode: U+00C6">Æ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Ccedilla, Unicode: U+00C7">Ç</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Egrave, Unicode: U+00C8">È</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Eacute, Unicode: U+00C9">É</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Ecircumflex, Unicode: U+00CA">Ê</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Edieresis, Unicode: U+00CB">Ë</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Igrave, Unicode: U+00CC">Ì</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Iacute, Unicode: U+00CD">Í</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Icircumflex, Unicode: U+00CE">Î</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Idieresis, Unicode: U+00CF">Ï</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Eth, Unicode: U+00D0">Ð</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Ntilde, Unicode: U+00D1">Ñ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Ograve, Unicode: U+00D2">Ò</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Oacute, Unicode: U+00D3">Ó</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: Ocircumflex, Unicode: U+00D4">Ô</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Otilde, Unicode: U+00D5">Õ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Odieresis, Unicode: U+00D6">Ö</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: multiply, Unicode: U+00D7">×</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Oslash, Unicode: U+00D8">Ø</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Ugrave, Unicode: U+00D9">Ù</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Uacute, Unicode: U+00DA">Ú</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Ucircumflex, Unicode: U+00DB">Û</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Udieresis, Unicode: U+00DC">Ü</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Yacute, Unicode: U+00DD">Ý</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Thorn, Unicode: U+00DE">Þ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: germandbls, Unicode: U+00DF">ß</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: agrave, Unicode: U+00E0">à</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: aacute, Unicode: U+00E1">á</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: acircumflex, Unicode: U+00E2">â</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: atilde, Unicode: U+00E3">ã</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: adieresis, Unicode: U+00E4">ä</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: aring, Unicode: U+00E5">å</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ae, Unicode: U+00E6">æ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ccedilla, Unicode: U+00E7">ç</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: egrave, Unicode: U+00E8">è</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: eacute, Unicode: U+00E9">é</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ecircumflex, Unicode: U+00EA">ê</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: edieresis, Unicode: U+00EB">ë</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: igrave, Unicode: U+00EC">ì</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: iacute, Unicode: U+00ED">í</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: icircumflex, Unicode: U+00EE">î</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: idieresis, Unicode: U+00EF">ï</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: eth, Unicode: U+00F0">ð</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ntilde, Unicode: U+00F1">ñ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ograve, Unicode: U+00F2">ò</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: oacute, Unicode: U+00F3">ó</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: ocircumflex, Unicode: U+00F4">ô</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: otilde, Unicode: U+00F5">õ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: odieresis, Unicode: U+00F6">ö</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: divide, Unicode: U+00F7">÷</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: oslash, Unicode: U+00F8">ø</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ugrave, Unicode: U+00F9">ù</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: uacute, Unicode: U+00FA">ú</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ucircumflex, Unicode: U+00FB">û</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: udieresis, Unicode: U+00FC">ü</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: yacute, Unicode: U+00FD">ý</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: thorn, Unicode: U+00FE">þ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ydieresis, Unicode: U+00FF">ÿ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: dotlessi, Unicode: U+0131">ı</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: endash, Unicode: U+2013">–</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: emdash, Unicode: U+2014">—</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quoteleft, Unicode: U+2018">‘</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: quoteright, Unicode: U+2019">’</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quotesinglbase, Unicode: U+201A">‚</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quotedblleft, Unicode: U+201C">“</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quotedblright, Unicode: U+201D">”</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: quotedblbase, Unicode: U+201E">„</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ellipsis, Unicode: U+2026">…</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: guilsinglleft, Unicode: U+2039">‹</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: guilsinglright, Unicode: U+203A">›</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: zerosuperior, Unicode: U+2070">⁰</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: foursuperior, Unicode: U+2074">⁴</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: fivesuperior, Unicode: U+2075">⁵</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: sixsuperior, Unicode: U+2076">⁶</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: sevensuperior, Unicode: U+2077">⁷</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: eightsuperior, Unicode: U+2078">⁸</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ninesuperior, Unicode: U+2079">⁹</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: Euro, Unicode: U+20AC">€</xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: telephone, Unicode: U+2121">℡</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: trademark, Unicode: U+2122">™</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: blackstar, Unicode: U+2605">★</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: envelope, Unicode: U+2709">✉</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: bird, Unicode: U+E000"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: bird.alt, Unicode: U+E001"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: tape, Unicode: U+E002"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: ampersand.alt, Unicode: U+E003"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: envelope.alt, Unicode: U+E004"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: hacker, Unicode: U+E005"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: copyleft, Unicode: U+E006"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: vinyl, Unicode: U+E007"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: T_h, Unicode: U+E008"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: T_u, Unicode: U+E009"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: T_y, Unicode: U+E00A"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: c_h, Unicode: U+E00B"></xhtml:span></xhtml:td>
</xhtml:tr>
<xhtml:tr>
<xhtml:td><xhtml:span title="Name: c_k, Unicode: U+E00C"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: f_j, Unicode: U+E00D"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: f_f_j, Unicode: U+E00E"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: l_l, Unicode: U+E00F"></xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: f_f, Unicode: U+FB00">ﬀ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: f_i, Unicode: U+FB01">ﬁ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: f_f_i, Unicode: U+FB03">ﬃ</xhtml:span></xhtml:td>
<xhtml:td><xhtml:span title="Name: s_t, Unicode: U+FB06">ﬆ</xhtml:span></xhtml:td>
</xhtml:tr>
</xhtml:table>
<xhtml:hr/></xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth4">
<xhtml:h2>Die Stile und die Namen</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<xhtml:p>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«.</xhtml:p>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos4 gridWidth6">
<xhtml:p><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 0 Medium" src="/images//diary/graphicoreBitmapFont0Medium.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 1 Medium" src="/images//diary/graphicoreBitmapFont1Medium.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 2 Medium" src="/images//diary/graphicoreBitmapFont2Medium.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 3 Medium" src="/images//diary/graphicoreBitmapFont3Medium.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Medium" src="/images//diary/graphicoreBitmapFont4Medium.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 5 Medium" src="/images//diary/graphicoreBitmapFont5Medium.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 6 Medium" src="/images//diary/graphicoreBitmapFont6Medium.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 7 Medium" src="/images//diary/graphicoreBitmapFont7Medium.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 8 Medium" src="/images//diary/graphicoreBitmapFont8Medium.png"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth6">
<xhtml:p><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Thin" src="/images//diary/graphicoreBitmapFont4Thin.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Extra-Light" src="/images//diary/graphicoreBitmapFont4Extra-Light.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 4 Light" src="/images//diary/graphicoreBitmapFont4Light.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Book" src="/images//diary/graphicoreBitmapFont4Book.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Regular" src="/images//diary/graphicoreBitmapFont4Regular.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 4 Medium" src="/images//diary/graphicoreBitmapFont4Medium.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Demi-Bold" src="/images//diary/graphicoreBitmapFont4Demi-Bold.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Bold" src="/images//diary/graphicoreBitmapFont4Bold.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 4 Heavy" src="/images//diary/graphicoreBitmapFont4Heavy.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Black" src="/images//diary/graphicoreBitmapFont4Black.png"/><xhtml:img class="gridGap" alt="Das g des graphicore Bitmap Font 4 Extra-Black" src="/images//diary/graphicoreBitmapFont4Extra-Black.png"/><xhtml:img alt="Das g des graphicore Bitmap Font 4 Ultra-Black" src="/images//diary/graphicoreBitmapFont4Ultra-Black.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos6 gridWidth4">
<xhtml:h2>Die Gewichte</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<xhtml:p>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.</xhtml:p>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth4">
<xhtml:h2>Alles in Einem</xhtml:h2>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos4 gridWidth6">
<xhtml:p><xhtml:img class="gridGap" alt="Das g der graphicore Bitmap Font 0 Familie" src="/images//diary/graphicoreBitmapFont0.png"/><xhtml:img class="gridGap" alt="Das g der graphicore Bitmap Font 1 Familie" src="/images//diary/graphicoreBitmapFont1.png"/><xhtml:img alt="Das g der graphicore Bitmap Font 2 Familie" src="/images//diary/graphicoreBitmapFont2.png"/><xhtml:img class="gridGap" alt="Das g der graphicore Bitmap Font 3 Familie" src="/images//diary/graphicoreBitmapFont3.png"/><xhtml:img class="gridGap" alt="Das g der graphicore Bitmap Font 4 Familie" src="/images//diary/graphicoreBitmapFont4.png"/><xhtml:img alt="Das g der graphicore Bitmap Font 5 Familie" src="/images//diary/graphicoreBitmapFont5.png"/><xhtml:img class="gridGap" alt="Das g der graphicore Bitmap Font 6 Familie" src="/images//diary/graphicoreBitmapFont6.png"/><xhtml:img class="gridGap" alt="Das g der graphicore Bitmap Font 7 Familie" src="/images//diary/graphicoreBitmapFont7.png"/><xhtml:img alt="Das g der graphicore Bitmap Font 8 Familie" src="/images//diary/graphicoreBitmapFont8.png"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:hr/>
<xhtml:div class="gridRow">Update:
<xhtml:h2>Die fehlenden Schriftmuster</xhtml:h2>
<xhtml:p class="gridWidth7 gridPos0">Manchmal wird ein einfaches
Schriftmuster benötigt, hier sind zwei in verschiedenen Größen. Es
gibt ein <xhtml:a href="http://graphicore.de/downloads/graphicoreBitmapFont-specimen_big.pdf">
PDF</xhtml:a> für das größere Muster, dort kannst du heranzoomen und die
Details studieren.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth7 gridPos0">
<xhtml:p><xhtml:img src="/images//diary/graphicoreBitmapFont-specimen_big.png" alt="graphicoreBitmapFont-specimen_big.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth3 gridPos7">
<xhtml:p><xhtml:img src="/images//diary/graphicoreBitmapFont-specimen_small.png" alt="graphicoreBitmapFont-specimen_small.png"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:p>Alle Beispiele dieser Seite sind als qualitativ hochwertige PDF,
SVG und PNG im »media« Ordner des Schriftpaketes verfügbar. Die
Inhalte des »media« Ordners im Schriftpaket und dieser Text sind
unter der <xhtml:a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
Attribution 3.0 Unported License</xhtml:a> verfügbar.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[graphicore.de ist online.]]></title>
    <summary type="html"><![CDATA[graphicore.de ist online.Freude, Freude,





der  ...]]></summary>
    <published>2010-07-12T01:23:56+00:00</published>
    <updated>2010-07-12T01:23:56+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-07-09_i-live-again"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-07-09:/diary/201007091937074c377a6340b8b</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>graphicore.de ist online.</xhtml:h1>
<xhtml:h2>Freude, Freude,</xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth6">
<xhtml:p>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.</xhtml:p>
<xhtml:p>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.</xhtml:p>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos6 gridWidth4">
<xhtml:p><xhtml:img src="/images//diary/numero-uno-teaser.png" alt="teaser for numero uno, a bitmap font by graphicore.de"/></xhtml:p>
<xhtml:h3>Ankündigung</xhtml:h3>
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!</xhtml:div>
</xhtml:div>
<xhtml:h2>Was unter der Haube steckt,</xhtml:h2>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth4">
<xhtml:p>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.</xhtml:p>
<xhtml:p><xhtml:a href="http://zendframework.com/" class="image"><xhtml:img class="gridGap" alt="Zend Framework Logo" src="/images/diary/ZendFramework.png"/></xhtml:a><xhtml:a href="http://www.dojotoolkit.org/" class="image"><xhtml:img alt="Dojo Logo" src="/images/diary/dojo.png"/></xhtml:a></xhtml:p>
<xhtml:p><xhtml:a href="http://www.doctrine-project.org/" class="image"><xhtml:img class="gridGap" alt="doctrine Logo" src="/images/diary/doctrine.png"/></xhtml:a><xhtml:a href="http://htmlpurifier.org/" class="image"><xhtml:img alt="HTMLPurifier Logo" src="/images/diary/HTMLPurifier.png"/></xhtml:a></xhtml:p>
<xhtml:h3>Markup</xhtml:h3>
<xhtml:p>Graphicore.de validiert <xhtml:a href="http://validator.w3.org/check?uri=referer">hier</xhtml:a> 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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos4 gridWidth6">
<xhtml:h3>Style</xhtml:h3>
<xhtml:p><xhtml:a href="http://de.wikipedia.org/wiki/Progressive_Verbesserung">Progressive
Verbesserung</xhtml:a>: 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.</xhtml:p>
<xhtml:p>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 ;)</xhtml:p>
<xhtml:p>Hier ist es: »<xhtml:img src="http://graphicore.de/style/images/grid10.png" alt="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. <xhtml:a href="javascript:%20dojo.toggleClass(dojo.body(),'grid')">Klicke hier um
es in Aktion zu sehen</xhtml:a>(JavaScript muss an sein).</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridPos0 gridWidth6">
<xhtml:h3>Dynamic</xhtml:h3>
<xhtml:p>Ich habe das Konzept des <xhtml:a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" title="unaufdringliches JavaScript">unobtrusive JavaScript</xhtml:a> umgesetzt.
Das heißt, die Seite funktioniert ohne JavaScript. Ist aber
JavaScript vorhanden, wird der Unterhaltungsfaktor größer.</xhtml:p>
<xhtml:p>Für das dynamische Vehalten der Website mit JavaScript habe ich
erstmals das <xhtml:a href="http://www.dojotoolkit.org/">Dojo Toolkit</xhtml:a>
verwendet. Mit Dojo lässt sich – ähnlich wie mit jQuery –
geschmeidig umgehen. Ich bin mit Dojo sehr zufrieden.</xhtml:p>
<xhtml:h3>graphicore cache</xhtml:h3>
<xhtml:p>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.<xhtml:br/>
Falls das nicht vormals gemacht wurde, möchte ich es gerne
»graphicore cache« nennen ;)</xhtml:p>
</xhtml:div>
<xhtml:div class="gridPos6 gridWidth4">
<xhtml:h3>Backend</xhtml:h3>
<xhtml:p>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 <xhtml:a href="http://zendframework.com/">Zend
Framework</xhtml:a>, <xhtml:a href="http://www.doctrine-project.org/">Doctrine
ORM</xhtml:a> und <xhtml:a href="http://htmlpurifier.org/">HTMLPurifiers</xhtml:a>
das Backend gebaut. Dabei kommen auch eineinhalb Bibliotheken, die
ich zusammengeschustert habe, zum Einsatz.</xhtml:p>
<xhtml:h3>i18n</xhtml:h3>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Cinecita.org]]></title>
    <summary type="html"><![CDATA[Cinecita.orghttp://www.cinecita.org






Umsetzun ...]]></summary>
    <published>2010-05-03T13:38:23+00:00</published>
    <updated>2010-05-03T13:38:23+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-10-18_La_Mirada_de_Ella"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-10-18:/diary/201010181349214cbc5061f0048</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Cinecita.org</xhtml:h1>
<xhtml:p><xhtml:a href="http://www.cinecita.org">http://www.cinecita.org</xhtml:a></xhtml:p>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p><xhtml:img src="/images/diary/cinecita_homepage.png" alt="Bildschirmfoto der the CineCita Webseite auf english den folgenden Text abbildend: CineCita is a travelling cinema and video laboratory, that will be on tour in the Central Andes in the fall of 2010. CineCita aims to improve general access to audiovisual media and to increase media literacy with rural populations in the region. During the tour, a smart travelling “cine-bus” visits villages in Ecuador, Peru and Bolivia, screening a selected programme of international short films and organizing participative video workshops for local communities. Screenings are free of charge and held at public places. The selected programme focuses on female perspectives, giving a voice to women’s narratives, from both Europe and Latin America. In the video workshops, young women learn to shoot their own short documentary video, empowering them with audiovisual skills and inspiring them to tell their own stories. An international team of organizers accompanies the workshop participants, while documenting an excerpt of their everyday lives on video themselves. Together, screenings and workshops provide a means of an exchange and networking between the Central Andean Region and Europe. At the conclusion of each tour stop, the young directors may present their work in form of a public screening. Their films are then sent on the road with CineCita and shown to further audiences in the region."/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:h2>Umsetzung</xhtml:h2>
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:h3>Content Management</xhtml:h3>
<xhtml:p>Die Seite läuft mit einem speziell angefertigtem
Content-Management-System. Ich habe es mit <xhtml:a href="http://php.net/">PHP5</xhtml:a>, <xhtml:a href="http://zendframework.com/">Zend Framework</xhtml:a>, <xhtml:a href="http://www.doctrine-project.org/">Doctrine ORM</xhtml:a> und <xhtml:a href="http://htmlpurifier.org/">HTMLPurifier</xhtml:a> gemacht. Cinecita.org
ist der technische Vorgänger von graphicore.de.</xhtml:p>
<xhtml:h3>Internationalisierung</xhtml:h3>
<xhtml:p>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.</xhtml:p>
<xhtml:h3><xhtml:a href="http://www.cinecita.org/en/index/diary/">Blog</xhtml:a></xhtml:h3>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h3><xhtml:a href="http://www.cinecita.org/en/index/static/static/tour">Eine
interaktive Karte</xhtml:a></xhtml:h3>
<xhtml:p>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.</xhtml:p>
<xhtml:h3>Animationen</xhtml:h3>
<xhtml:p>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 <xhtml:a href="http://jquery.com/">jQuery</xhtml:a>, <xhtml:a href="http://flowplayer.org/tools/index.html">jQuery Tools</xhtml:a> und
natürlich <xhtml:a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0
Strict</xhtml:a></xhtml:p>
<xhtml:h3>Ajax</xhtml:h3>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p><xhtml:img src="/images/diary/cinecita_interactive-map.png" alt="Bildschirmfoto der CineCita-Webseite auf spanisch. Zeigt eine Karte mit einigen Punkten die für Tourstops stehen. Über einem Tourstop ist eine Sprechblase sichtbar, die den Namen und das Datum des Tourstops anzeigt."/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:hr/>
<xhtml:div class="gridWidth4 gridPos0">
<xhtml:h2>Die Mediendaten sind ausgegliedert</xhtml:h2>
<xhtml:h3>Videos</xhtml:h3>
<xhtml:p>sind die Kernmedien von CineCita. Bei <xhtml:a href="http://www.cinecita.org/en/index/static/static/workshops">Workshops</xhtml:a>
werden Videos von lokalen Mädchen und Frauen produziert. Die Videos
werden von den guten und skalierenden Diensten von <xhtml:a href="http://vimeo.com/">Vimeo</xhtml:a> oder <xhtml:a href="http://www.youtube.com">YouTube</xhtml:a> ausgeliefert.</xhtml:p>
<xhtml:h3>Die eingebundenen Diashows</xhtml:h3>
<xhtml:p>laden Fotoalben von <xhtml:a href="http://picasaweb.google.com">Googles Picasa</xhtml:a> und zeigen diese
im Artikel an. Die CineCita-Leute benutzen diese Funktion <xhtml:a href="http://www.cinecita.org/en/index/diary/filter/photo">häufig in
ihren Blog-Artikeln</xhtml:a> um die wundervollen Plätze zu zeigen, die
sie auf ihrer Reise besuchen.</xhtml:p>
<xhtml:p>Der Code ist eine stark modifizierte Version von <xhtml:a href="http://pwi.googlecode.com/">pwi - Picasa Webalbum Integrator</xhtml:a>.
Das Beste: die schwere Arbeit des massiven auslieferns von Bildern
wird von Google gemacht.</xhtml:p>
<xhtml:h2>Das Grafikdesign</xhtml:h2>
<xhtml:p>ist von <xhtml:a href="http://10hoch16.de">10hoch16.de.</xhtml:a></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth6 gridPos4">
<xhtml:p><xhtml:img src="/images/diary/cinecita_embedded-slideshow.png" alt="Teil eines Bildschirmfotos der CineCita Webseite, eine eingebundene Diashow zeigend. Ein großes Bild und darunter eine Zeile Thumbnail-Bilder."/></xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Toytoytoys.de]]></title>
    <summary type="html"><![CDATA[Toytoytoys.dewww.toytoytoys.de


Das Projekt
Die R ...]]></summary>
    <published>2009-11-05T14:38:01+00:00</published>
    <updated>2009-11-05T14:38:01+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-10-12_serious_toys"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-10-12:/diary/201010121448344cb475424313c</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Toytoytoys.de</xhtml:h1>
<xhtml:p><xhtml:a href="http://www.toytoytoys.de">www.toytoytoys.de</xhtml:a></xhtml:p>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth7 gridPos0">
<xhtml:h2>Das Projekt</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<xhtml:p>Dieses Projekt weist mit einzigartigen Spielzeugen auf relevante
gesellschaftliche Themen hin. Mehr Infos dazu werden direkt mit den
Produkten verlinkt.</xhtml:p>
<xhtml:h2>Die Technik</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth3 gridPos7">
<xhtml:h2>Konzept und Grafik</xhtml:h2>
<xhtml:p>Die inhaltliche sowie grafische Gestaltung von Toytoytoys ist
von <xhtml:a href="http://10hoch16.de">Zehn hoch Sechzehn</xhtml:a>.</xhtml:p>
<xhtml:ul>
<xhtml:li><xhtml:a href="http://www.amnesty.de/">www.amnesty.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.unicef.de/">www.unicef.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.kindersoldaten.de/">www.kindersoldaten.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.unhcr.de/">www.unhcr.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.vielfalt-tut-gut.de/">www.vielfalt-tut-gut.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.greenpeace.de/">www.greenpeace.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.helpedia.de/">www.helpedia.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.caritas-international.de/">www.caritas-international.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.nacoa.de/">www.nacoa.de</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.fruehehilfen.de/">www.fruehehilfen.de</xhtml:a></xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p><xhtml:img src="/images/diary/toytoytoys_biafrika_klein.png" alt="toytoytoys_biafrika_klein.png"/></xhtml:p>
<xhtml:p><xhtml:img src="/images/diary/toytoytoys_biafrika_detail.png" alt="Fast eine Milliarde Menschen weltweit leiden unter Hunger. Dabei ist die Ernährungssituation in 33 Ländern, wie z.B. in Afrika und Indien besonders prekär. Für weiterführende Informationen und die Möglichkeit dem Huger etwas entgegenzusetzen, besuchen Sie bitte: www.welthungerhilfe.de"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:p><xhtml:img src="/images/diary/toytoytoys_myLin_klein.png" alt="toytoytoys_myLin_klein.png"/></xhtml:p>
<xhtml:p><xhtml:img src="/images/diary/toytoytoys_myLin_detail.png" alt="Laut ILO (International Labour Organisation) sind weltweit über 200 Millionen Kinder zu Arbeiten, welche ihre mentale, physische und emotionale Entwicklung beeinträchtigen, gezwungen. Davon sind nahezu dreiviertel dieser Kinder in die schlimmsten Formen des Kindesmissbrauchs, wie Kinderhandel, bewaffnete Konflikte, Sklaverei und sexuelle Ausbeutung verwickelt. Für weiterführende Informationen und die Möglichkeit selbst aktiv zu werden, besuchen Sie bitte: www.unicef.de oder www.kindernothilfe.de"/></xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10">
<xhtml:p><xhtml:img src="/images/diary/toytoytoys_ab-6-jahre.png" alt="toytoytoys_ab-6-jahre.png"/></xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Abraum]]></title>
    <summary type="html"><![CDATA[Abraum



Die Ausstellung beschäftigte sich mit de ...]]></summary>
    <published>2009-05-05T16:02:59+00:00</published>
    <updated>2009-05-05T16:02:59+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-10-06_underground_exhibition"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-10-06:/diary/201010061331004cac7a14de999</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Abraum</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth8 gridPos0" style="height:1128px;"><xhtml:img src="/images/diary/abraum-poster.png" alt="abraum-poster.png"/></xhtml:div>
<xhtml:div class="gridWidth2 gridPos8">
<xhtml:p>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.</xhtml:p>
<xhtml:p>Die Plakatwerbung in Marburg war zweistufig angelegt. Erst
sollte die Treppe alleine prangern, wenige Tage später wurden die
Informationen hinzugefügt. <xhtml:img src="/images/diary/abraum-poster_label.png" alt="abraum-poster_label.png"/> In der Zwischenzeit hatten die Leute
zahlreiche Poster mitgenommen – was ich als Kompliment
aufnehme.</xhtml:p>
<xhtml:p>Die Geschichte des Projektes gibt es auf dem <xhtml:a href="http://abraum-marburg.blogspot.com/">abraum Blog</xhtml:a>.</xhtml:p>
<xhtml:p>Das Abraum Logo ist von <xhtml:a href="http://www.station-c.de/">Christina Willkomm</xhtml:a>.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth3 gridpos0">
<xhtml:p><xhtml:img src="/images/diary/abraum-flyer.png" alt="komm mal runter"/> Der Flyer hatte als Ziel die Kühlschranktüren
der Marburger Studenten-WGs.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth7 gridPos3">
<xhtml:div class="scrollX" style="white-space:nowrap;height:456px;">
<xhtml:img class="gridGap" src="/images/diary/abraum-catalog_1.png" alt="abraum-catalog_1.png"/><xhtml:img class="gridGap" src="/images/diary/abraum-catalog_2.png" alt="abraum-catalog_2.png"/><xhtml:img src="/images/diary/abraum-catalog_3.png" alt="abraum-catalog_3.png"/></xhtml:div>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Die Kulturlosen sind da]]></title>
    <summary type="html"><![CDATA[Die Kulturlosen sind da




Konzept

Die Idee ist  ...]]></summary>
    <published>2009-02-15T11:00:00+00:00</published>
    <updated>2009-02-15T11:00:00+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-10-01_metropolis-wilderness"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-10-01:/diary/201010011553324ca603fcc53f3</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Die Kulturlosen sind da</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth6 gridPos0">
<xhtml:p><xhtml:img src="/images/diary/kulturlose-cover.png" alt="kulturlose-cover.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth4 gridPos6">
<xhtml:h2>Konzept</xhtml:h2>
<xhtml:p>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 <xhtml:a href="http://de.wikipedia.org/wiki/Situationistische_Internationale">situationistischen</xhtml:a>
Praxis des <xhtml:a title="nur auf der englischen Wikipedia" href="http://en.wikipedia.org/wiki/D%C3%A9rive">Dérive</xhtml:a>, siehe dazu
auch <xhtml:a href="http://en.wikipedia.org/wiki/Psychogeography">Psychogeography</xhtml:a>.
Das »<xhtml:a href="http://5b4.blogspot.com/2009/08/handbuch-der-wildwachsenden.html">Handbuch
der wildwachsenden Großstadtpflanzen</xhtml:a>« von Helmut Völter schlägt
auch in eine ganz ähnliche Kerbe.</xhtml:p>
<xhtml:p>Das Buch ist meine Diplomarbeit im Fach Visuelle Kommunikation.
Ich habe es konzipiert, geschrieben und gestaltet. Betreut wurde
ich von <xhtml:a href="http://www.czyk.de/">Alexander Branczyk</xhtml:a> und
<xhtml:a href="http://www.uni-weimar.de/gestaltung/cms/struktur/visuelle-kommunikation/prof-jay-rutherford/">
Prof.</xhtml:a> <xhtml:a href="http://www.jayrutherford.net/">Jay
Rutherford</xhtml:a>. Sommersemester 2008, Fakultät Gestaltung, <xhtml:a href="http://www.uni-weimar.de/">Bauhaus-Universität Weimar</xhtml:a>.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p class="scrollX" style="white-space:nowrap;height:360px;">
<xhtml:img src="/images/diary/kulturlose-shot002.png" class="gridGap" alt="kulturlose-shot002.png"/><xhtml:img src="/images/diary/kulturlose-shot003.png" class="gridGap" alt="kulturlose-shot003.png"/><xhtml:img src="/images/diary/kulturlose-shot005.png" class="gridGap" alt="kulturlose-shot005.png"/><xhtml:img src="/images/diary/kulturlose-shot017.png" class="gridGap" alt="kulturlose-shot017.png"/><xhtml:img src="/images/diary/kulturlose-shot019.png" class="gridGap" alt="kulturlose-shot019.png"/><xhtml:img src="/images/diary/kulturlose-shot020.png" class="gridGap" alt="kulturlose-shot020.png"/><xhtml:img src="/images/diary/kulturlose-shot023.png" class="gridGap" alt="kulturlose-shot023.png"/><xhtml:img src="/images/diary/kulturlose-shot024.png" alt="kulturlose-shot024.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h2>Inhalt</xhtml:h2>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p class="scrollX" style="white-space:nowrap;height:360px;">
<xhtml:img src="/images/diary/kulturlose-shot009.png" class="gridGap" title="Die Fledermaus habe ich in Berlin fotografiert." alt="kulturlose-shot009.png"/><xhtml:img src="/images/diary/kulturlose-shot013.png" class="gridGap" title="Quelle: Die Bismaratte ist zur Veranschaulichung und von naturespicsonline.com auch commons.wikimedia.org/wiki/File:Muskrat.jpg" alt="kulturlose-shot013.png"/><xhtml:img src="/images/diary/kulturlose-shot010.png" class="gridGap" alt="kulturlose-shot010.png"/><xhtml:img src="/images/diary/kulturlose-shot011.png" class="gridGap" alt="kulturlose-shot011.png"/><xhtml:img src="/images/diary/kulturlose-shot012.png" class="gridGap" alt="kulturlose-shot012.png"/><xhtml:img src="/images/diary/kulturlose-shot014.png" title="Extra-Material als Platzhalter" alt="kulturlose-shot014.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h2>Zusätzliche Würze</xhtml:h2>
<xhtml:p>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.</xhtml:p>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth5 gridPos0">
<xhtml:p class="scrollX" style="white-space:nowrap;height:360px;">
<xhtml:img src="/images/diary/kulturlose-shot007.png" class="gridGap" alt="kulturlose-shot007.png"/><xhtml:img src="/images/diary/kulturlose-shot022.png" class="gridGap" alt="kulturlose-shot022.png"/><xhtml:img src="/images/diary/kulturlose-shot006.png" class="gridGap" alt="kulturlose-shot006.png"/><xhtml:img src="/images/diary/kulturlose-shot021.png" class="gridGap" alt="kulturlose-shot021.png"/><xhtml:img src="/images/diary/kulturlose-shot018.png" class="gridGap" alt="kulturlose-shot018.png"/><xhtml:img src="/images/diary/kulturlose-shot025.png" class="gridGap" alt="kulturlose-shot025.png"/><xhtml:img src="/images/diary/kulturlose-shot026.png" class="gridGap" alt="kulturlose-shot026.png"/><xhtml:img src="/images/diary/kulturlose-shot031.png" alt="kulturlose-shot031.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth5 gridPos5">
<xhtml:h2>Details</xhtml:h2>
<xhtml:p>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.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Sondermarke zum 200. Geburtstag von Hermann Schulze-Delitzsch.]]></title>
    <summary type="html"><![CDATA[Sondermarke zum 200. Geburtstag von Hermann Schulz ...]]></summary>
    <published>2007-06-15T10:00:00+00:00</published>
    <updated>2007-06-15T10:00:00+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-09-27_a_stamp_chance"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-09-27:/diary/201009272109094ca107f52b79c</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Sondermarke zum 200. Geburtstag von Hermann
Schulze-Delitzsch.</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth2 gridPos1" style="height:120px;padding-top:24px;"><xhtml:img src="/images/diary/stamp_schulze-delitzsch_small.png" alt="stamp_schulze-delitzsch_small.png"/></xhtml:div>
<xhtml:div class="gridWidth6 gridPos4">
<xhtml:p>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.</xhtml:p>
<xhtml:p>Die Schrift ist FF Seria von <xhtml:a href="http://www.martinmajoor.com/">Martin Majoor</xhtml:a>. Betreut wurde der
Entwurf von <xhtml:a href="http://www.uni-weimar.de/gestaltung/cms/struktur/visuelle-kommunikation/prof-jay-rutherford/">
Professor</xhtml:a> <xhtml:a href="http://www.jayrutherford.net/">Jay
Rutherford</xhtml:a> an der <xhtml:a href="http://www.uni-weimar.de/">Bauhaus-Universität Weimar</xhtml:a> im
Sommersemester 2007.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0" style="height:600px;"><xhtml:img src="/images/diary/stamp_schulze-delitzsch_big.png" alt="stamp_schulze-delitzsch_big.png"/></xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Turbine]]></title>
    <summary type="html"><![CDATA[Turbine





Die Dokumentation unserer Arbeit ist  ...]]></summary>
    <published>2007-06-15T09:00:00+00:00</published>
    <updated>2007-06-15T09:00:00+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-09-27_turbo_art_collective"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-09-27:/diary/201009272105474ca1072b79bf6</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Turbine</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth8 gridPos0"><xhtml:a href="http://die-turbine.de/" style="border:none;"><xhtml:img src="/images/diary/turbine_screen1.png" alt="Screenshot der turbine website"/></xhtml:a></xhtml:div>
<xhtml:div class="gridWidth2 gridPos8">
<xhtml:p>Die Dokumentation unserer Arbeit ist auf <xhtml:a href="http://die-turbine.de/">die-turbine.de</xhtml:a>. Dort ist es voll von
spannenden Medien und coolen Ideen.</xhtml:p>
<xhtml:h2>Turbine ist</xhtml:h2>
<xhtml:ul>
<xhtml:li><xhtml:a href="http://benivonalemann.de/">Beni von Alemann</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.vildesvaner.com/">Anne Gorke</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.julianwagner.com">Julian Wagner</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://10hoch16.de/">Kari Wolf</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://ulischoeberl.com/">Uli Schöberl</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.tanjasannwald.de/">Tanja Sannwald</xhtml:a></xhtml:li>
<xhtml:li>Jens Ole Mayer</xhtml:li>
<xhtml:li><xhtml:a href="http://10hoch16.de/">Piet Machat</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://10hoch16.de/">Max Lisewski</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://10hoch16.de/">Simon Kiepe</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.45kilo.com/">Daniel Klapsing</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a href="http://www.wirhabenvielvor.de">Thomas Gnahm</xhtml:a></xhtml:li>
<xhtml:li><xhtml:a rel="me" href="/de/page/lasse">Lasse Fister</xhtml:a></xhtml:li>
</xhtml:ul>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
  <entry xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <title type="html"><![CDATA[Typete – typografische Tapete]]></title>
    <summary type="html"><![CDATA[Typete – typografische Tapete
Ein Buchstabe pro Ta ...]]></summary>
    <published>2005-05-15T10:00:00+00:00</published>
    <updated>2005-05-15T10:00:00+00:00</updated>
    <link rel="alternate" type="text/html" href="http://graphicore.de/de/archive/2010-09-23_Neo-Bourgeois_Grafitti"/>
    <id>http://graphicore.de/diary/tag:graphicore.de,2010-09-23:/diary/201009231107214c9b34e9d0274</id>
    <content xmlns:xhtml="http://www.w3.org/1999/xhtml" type="xhtml">
      <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"><xhtml:div class="diaryEntryContainer" xml:lang="de" lang="de">
<xhtml:h1>Typete – typografische Tapete</xhtml:h1>
<xhtml:div class="gridRow">
<xhtml:h2>Ein Buchstabe pro Tapetenbahn,</xhtml:h2>
<xhtml:div class="gridWidth2 gridPos0">
<xhtml:p>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.</xhtml:p>
<xhtml:p>Die Schrift ist Warnock Pro Regular. Die florale Füllung der
Buchstaben wurde in aufwendiger Handarbeit eingepasst.</xhtml:p>
<xhtml:p>Das kleine g ist eines der schönsten Zeichen geworden.</xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth8 gridPos2"><xhtml:img src="/images/diary/typete-clean-g-big.png" alt="typete-klein-clean.png"/></xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0 scrollX" style="height:360px;">
<xhtml:img height="336" src="/images/diary/typete-klein-clean.png" alt="typete-klein-clean.png"/></xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p>Die unterschwellige Botschaft lässt sich am schönsten im
entlaubten Zustand lesen: »argwohn«.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0 scrollX" style="height:600px;">
<xhtml:img height="600" src="/images/diary/typete-klein.png" alt="typete-klein.png"/></xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth10 gridPos0">
<xhtml:p>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ß.</xhtml:p>
</xhtml:div>
</xhtml:div>
<xhtml:div class="gridRow">
<xhtml:div class="gridWidth7 gridPos0">
<xhtml:p><xhtml:img height="480" src="/images/diary/typete_designmai05.png" alt="typete_designmai05.png"/></xhtml:p>
</xhtml:div>
<xhtml:div class="gridWidth3 gridPos7">
<xhtml:p>Die Typete war zu sehen im Rahmen des <xhtml:a href="http://www.schoene-neue-warenwelt.de">Aldi Huxley, schöne neue
Warenwelt</xhtml:a> auf dem <xhtml:a href="http://dmy-berlin.com/">Design Mai
Youngsters 2005</xhtml:a> und auf dem <xhtml:a href="http://www.czyk.de/bauhaus-uni-weimar/B758462001/C1653933528/E804688907/index.html">
Rundgang 2005</xhtml:a> der <xhtml:a href="http://www.uni-weimar.de">Bauhaus-Universität Weimar</xhtml:a>.</xhtml:p>
<xhtml:p>Sie ist 2005 im Projekt »Schnellmodus International« entstanden.
Wurde betreut durch <xhtml:a href="http://www.czyk.de/">Alexander
Branczyk</xhtml:a> und gestaltet von <xhtml:a href="http://www.tanjasannwald.de/">Tanja Sannwald</xhtml:a>, <xhtml:a href="http://www.johannaschiegnitz.de/">Johanna Schiegnitz</xhtml:a>, Daniel
Graf und <xhtml:a href="http://graphicore.de">Lasse Fister</xhtml:a>.</xhtml:p>
<xhtml:p>Die Typete nahm 2005 am Wettberb “New Walls, Please!” teil und
fand sich löblich erwähnt im Katalog des Wettbewerbes wieder.</xhtml:p>
</xhtml:div>
</xhtml:div>
</xhtml:div>
</xhtml:div>
    </content>
  </entry>
</feed>
