Diary | graphicore.de

Hello Metapolator

2015-07-28T12:45:00+00:00

Hello Metapolator Learn more about Metapolator and visit the project homepage and the github repository. A Short Personal Project History The reason for me not updating my blog for a long while is that I was very busy. I'm still busy now, but yet writing. Something must have changed. Metapolator is a next generation font creation tool. I started working on it roughly more than one year ago. We can consider the Libre Graphics Meeting 2014 in Leipzig in April 2-5 as my initiation into the project and the start of the current phase. More about the project history can be found at metapolator.com. Our Team gathered later that year again at the Automatic Type Design conference at the ANRT in Nancy in May 6-7 2014. In the meantime I was working on the previous prototype of Metapolator and shaped my mind about what it did then and what I thought it should be. It was in Nancy where we laid the foundation for the current incarnation of Metapolator technology. Many people contributed to the project, but at Nancy I met Paul Sladen, whose kind help, being a good listener, and giving valuable advice, helped me to form concepts strong enough to get my hands dirty and start working. I left Nancy with a keen excitement in the project. Things keep changing After more than one year later the Metapolator Project entered an interesting new phase. Some of the old concepts got replaced by better ones but the general direction has proven right. We have a great product vision and a well conceived ux-design through the work of Peter Sikking. Soon we will present a minimal viable product that supports designers with designing font families. To implement all of our plans and to reach version 1.0 will take some more time however. My role in the project is less about the creation of the “Metapolator” interface; instead I am the inventor of the underlying “Metapolator Technology”. There are a couple of modules that I realized will be useful in a vastly broader range of applications and tools than just Metapolator. This led to my decision to take parts out of the repositories of Metapolator, and also ufoJS, a library I began developing some years ago that is a key component of Metapolator. The Plan I hope I can use parts of Metapolator, especially CPS, to teach people how to make exciting new tools for font and graphic design. Taking modules out of Metapolator to create stand-alone projects has primarily didactical reasons. It will be easier to show and explain the technology of Metapolator by looking at one part at a the time, instead of everything at once. It will also be easier to write specific documentation for these projects without having to consider the highly specialized nature of Metapolator. Lastly and most exciting for me: we will be able to create cool little projects with our technology to attract, inspire and teach the community. These projects will form an ecosystem around Metapolator: The developer tool for CPS that I'm working on right now will be available for all CPS based projects as an ad-hoc interface. In the long run we will establish Metapolator technology as a platform to build the next generation of type design tools, or any other domain as well. Metapolator will be positioned as a highly sophisticated application that spawned new core technologies and on the way stimulates and enables new tools. I want to see more people participating in Metapolator technology in the future; particularly because we offer interesting and genuinely new approaches for parametric design applications, and can enable everything between professional type design/engineering tools to ultra creative graphic design tools that are fun both to make and to use. For a FLOSS project like ours it is crucial to gain a diverse community. Each part of the project will profit from discussing and solving issues raised by users from any background. We have topics ranging from computer language design to user interaction. The more people use our tools the more ideas and feedback will be available to further advance our mission. Coming up next Metapolator’s minimal viable product and the CPS Developer Tool are being developed in parallel at the moment. When I have finished the developer tool I will start to decouple some modules, namely: CPS plus the object model basics, MOM (maybe), our IO modules, the pen APIs and a collection of pens, and the CPS Developer Tool itself. I am also planning a series of blog posts to document the workings of these modules on a fairly high level and finally one about Metapolator that builds upon that knowledge. These articles will become part of the Metapolator documentation as well. I also have ideas for up to three fun projects that will prove the claims I made above and attract new people to this ecosystem; I expect one of these will be created soon after the isolation of CPS. Comments I have no comments feature on my blog for several reasons. You can discuss this post at the Metapolator g+ community, write me an email or chat to me on twitter.

Firewall-Configuration-Server for an international Trading-Concern

2014-02-27T14:22:48+00:00

Firewall-Configuration-Server for an international Trading-Concern Application Area The server is only internally for the concern available and will be used in three different settings: Initially all new firewalls are set up with the generated configuration and then shipped to the location. In case of failure an engineer can generate the configuration for the replacement device. If changes of the configurations are necessary, this is the central place where the changes are incorporated. Interfaces The server provides several interfaces with which configuration-files and metadata can be obtained: The website of a store-location with configurations and additional informations like opening hours and address. The download of many different configurations as ZIP-archive, whereat the input is done by uploading a simple CSV-file. A HTTP-GET API with which configurations and metadata can be obtained directly. A maintenance/debugging user interface, that makes an SNMP-Request via AJAX and JavaScript and displays the result in a filterable fashion. The right Tools The Server is written in Python. As web-framework I used the lightweight Flask. The required data is picked up from several sources: DNS, LDAP, SNMP, a HTTP-PUSH-based system—through that data is received as XML, validated with XSD and updated—as well as further locally availale files. Administration The server-configuration is made by me, too. The Apache2 webserver serves the page using mod_wsgi, mod_authz_ldap and mod_ssl. Access is limited via LDAP-Groups and always encrypted with HTTPS. Screenshot the design is limited to the essentials and explains the available possibilities.

Small business stationery for Sibylle Frank

2014-02-27T11:47:59+00:00

Small business stationery for Sibylle Frank Link to the website: Sibylle Frank The Website is in the form of a profile and informs factually and plainly. The website implementation is responsive, thus the site adopts itself to different screensizes. The Design is based on a thrilling combination of type. On the one hand the modern and very plain webfont “Source Sans Pro” by Adobe is used. It displays the wordmark in its ExtraLight style and delivers the texts with its Light variant. Special emphases and subheadings are displayed with »Magenta Open Cosmetica Bold«—a free version of the “Optima” font by Hermann Zapf and therfore a real classic. The bold “Cosmetica” contrasts the fine “Source Sans” also by its design idiom. A beautiful graphical link between the topics of Sibylle Frank is made—architecture and heritage conservation. The right Tools The static HTML of the Website was realized with Hyde—a static website generator written in Python. This optimizes development times and especially makes the hosting very easy and cost-efficient. The Letterhead is realized in the same design as the website. The pages—beeing designed in accordance to the DIN standard—captivate with their clear appearance and the same thrilling combination of fonts as seen at the website.

The Multitoner arrived

2013-11-13T16:59:11+00:00

The Multitoner arrived Repository Visit the Multitoner at Github and make shure to read README.md at the bottom of the landing page. About Silber & Blei needs a FLOS-Software to create multitone images. More information about this Project and its story can be found here. Call for Help: Color Management I'd really like to see the best possible print preview with the Multitoner. I think Ghostscript has everything we need to get there. I’d love to see some help from people with experience and/or interest in this issue. See the README.md file in the repo and the Roadmap on the right side for more info. Roadmap Here an updated version of the Roadmap. the core functions are implemented loading and saving of projects creation of multitone-EPS-images from black and white images with commandline tool and GUI cleanup, more code comments, licence notices, README publication of the repository current status: public testing and first production uses Color management: (research and implementation) to obtain optimal previews ICC-profiles shall be used in future. See also the option ‑sDeviceNProfile in the Ghostscript manual and GS9_Color_Management.pdf. better batch processing and handling of exceptions there: different curves for the same set of colors Screenshot

silber-und-blei.com

2013-11-12T17:50:43+00:00

silber-und-blei.com Link to the website: Silber & Blei Webdesign The webdesign is made by us, as well as the realization. We relied on current technology and designed a sterling page. Beautiful webfonts are deployed and the site is responsive. It fits itself into the size of the browser window, so that it stays optimally readable on the smartphone as well as on the desktop. Statically generated with Hyde/Python There are completely static pages on the server, just plain HTML-files. The trick: the site is generated with the static website generator Hyde and then uploaded. That has enormous advantages: the site is fast, secure, low-maintenance and still comfortably usable. We didn't want to waive a newsfeed, so this is generated by Hyde in the ATOM-format. For our image gallery we extended Hyde with a plugin, of which more later. The Image Gallery We want to present our images particularly nice, that’s why we went to great effort with the image gallery. The centerpiece of the gallery is the photo album viewer. I summarized here some noticeable properties of the slider. responsive The album viewer is completely responsive and adapts fully to the available space. You can try this yourself on an album page. Just change the size of the browser window and observe what happens. versatile There are different cases in which an album is integrated. On the one hand the page of the album itself, on the other hand an album can be included on every other page. Furthermore all albums have their own address to embed them as Iframe on other webpages. Provided that the browser supports it, an album can even activate full screen mode. embeddable As you see on this page, an album can be embedded on another webpage. Special web pages are genearted for this. An album knows the address of its embed-version and offers a small code-generator. Thanks to the great adaptability of the slider, concerning the format, we took a pass on requiring static sizes. The author of the foreign page can fit in the album just right. Of course we hope to gain bigger reach with this feature and we’d be happy about spottings of our albums in the wilderness. universal Each instance of the album uses the same code, may it be as Iframe or on the album page. Its the progression of code of das Auto. Magazine. The thumbnails and the big display of the images are using the same base. By extending the objects and by different configuration the two forms come into being. To change into full screen mode an album doesn’t even need new initialization. simple For image management we wrote a plugin for Hyde in Python. The plugin generates thumbnails and the big images when the site is processed. An album is a configuration file mainly consisting of a list of images. To include an album its enough to know its internal name: {{make_album( 'Neueste_Bilder', ['autoplay', 'no-thumbs']) }}. The example is taken straight from our homepage.

Curation Module for The ICONIST

2013-11-12T15:53:17+00:00

Curation Module for The ICONIST Link to the Site: The ICONIST although what I did can't be viewed directly online. Import and Synchronization The programm collects product data of many different providers. Therefore an adapter Concept is used. Coming from different provider formats a unified representation is stored in the database. Hundreds of thousands of different products are beeing imported and kept up-to-date. The import is triggered via cron job automatically but it can be started through the webinterface, too. A locking mechanism prevents that the same source is beeing multiply imported at the same time. The import state can be determined at any time, even when the import is run by another process. It can be queried with the web interface and as the admin with the terminal. The importer recognizes updates of the particular products as well as the deletion of products by the provider. Curation Webinterface The editors choose products for a further selection process and for the enrichment of the data. The web interface offers a plenty of filters to master the big amount of data. Besides very simple filtering options like “shop” or “price range” a keyword search and a filter for categories are provided. The differing categories from provider to provider can be mapped to a common category tree in the curating module. The category tree can be created in the web interface. The mapping of foreign category to local categories is done by an editor. Two concepts to represent the category tree are used in the database: an adjacency list, that means every category knows its parent category. With this the implementation of the tree management is easy. Besides that the informatio of the Nested-Set Model are stored with the categories. So querying the tree is performant and easy. For the curation process I wrote a small JavaScript application that reduced loading times distinctly by using AJAX and simplified the server routines a lot. E.g. the management of the application state takes place in the client and needed no server side implementation using sessions. Technology The server code is written with PHP 5. I used Composer with Symphony 2 as a framework and wrote a lot of custom code myself. The webinterface uses RequireJS and jQuery and a whole lot of my own modules.

Under Development: Multitoner Tool

2013-06-13T09:03:43+00:00

Under Development: Multitoner Tool Motivation Silber & Blei will produce exclusively with FLOS-Software. Because it’s important to us to have control over our tools. We’ll make first class print products with free software. The consequence of this decision is that we write missing software ourselves. A program to create multitone images is missing in the free software world so far. The Multitoner Tool will be released under the GPLv3. What is Multitone When offset printing black and white images with just one ink—black in the standard case—the results appear dully and without depth. That’s because one color channel in printing can render ca. 50 differnt shades, see: Gamut. For comparison: a black and white image on a computer monitor is rendered with ca. 256 shades. To print black and white images in high quality, so that they show a depth comparable to a photographic print, multiple inks are used for one image. For instance: black for deep tones and gray for mid-tones. The gamut of the result can be increased depending on the count of the used colors. Terms When one ink is used it’s called “monotone”, with two inks it’s “duotone”, three is “tritone” and four is “quadtone”. The whole topic is summarized with “multitone”. The Tool The core function is setting up the inks that are going to be used (up to ten), where there is a control curve for each ink. The curve assigns for every input value—from black to white–the quantity of the ink to print— from full application to none. There are diffrent curve types to interpolate between the control points: linear, cubic splines, monotone cubic splines. The inks are getting a name, to identify them clearly later in the process. CMYK-values are assigned for the screen preview. The order of the inks can be varied, this is needed because it affects the print result. For preview a color stripe is shown for each ink. It displays the output value after application of the control curve. A further color stripe visualizes the combination of all inks. Also, there is a preview image with the settings applied to it. Technical Notes The tool is written in Python. The GUI implemented with GTK+. The control curves are calculated with SciPy and NumPy. The widget for display and manipulation of the control curves is self-made (as GtkDrawingArea). Color preview and preview image are rendered using Ghostscript. Colormanagement shall be achieved through Ghostscript in the future. Roadmap Here a rough scatch on how I conceive the projects further progression: current status: the core functions are implemented loading and saving of projects creation of multitone-EPS-images from black and white images with commandline tool and GUI cleanup, more code comments, licence notices, README publication of the repository public testing and first production uses Color management: (research and implementation) to obtain optimal previews ICC-profiles shall be used in future. See also the option ‑sDeviceNProfile in the Ghostscript manual and GS9_Color_Management.pdf. better batch processing and handling of exceptions there: different curves for the same set of colors

Refactoring for WeSC

2013-06-10T13:25:33+00:00

Refactoring for WeSC Joint with Uli Schöberl, the Site WeSC.com experienced a renovation. Here’s a short list of what I did: A caching-mechanism of the CakePHP Frameworks in use was supplemented by a new approach. Finer control of the cache-invalidation has been established. The automatic clearing of the caches is considerably improved. Some Functions were taken together and implemented centrally. All in the spirit of DRY. The import of product data was simplified. A process running in the background is launched after uploading the data. The progress can be tracked via AJAX. More maintenance work was accomplished and more new features were implemented.

Announcement: Silber & Blei

2013-06-06T18:24:39+00:00

Announcement: Silber & Blei »Silber und Blei« is German for “Silver and Lead” Anne is silver and I am lead Anne is a trained photographer and has a diploma in geography. Silver is the metal of photography. It’s required to make the light-sensitive coating of photographic film. As designer, I devoted myself to type and typography. Lead is the metal of letterpress printing since Johannes Gutenberg employed it to cast his type sorts. Together we are eager to manufacture marvelous books. Beautiful items with love for detail and high demands on craftsmanship. We will deliver the contents, too. It’s about giving a good form to creative subjects. We already have a lot of ideas. Thus we are looking forward to the journey and are curious what's expecting us. The Wordmark The word Silber is an interpretation of Bodoni Italic. The letters appear noble and playful. The instroke of “l” and “b” as well as the terminal (serif) of the “r” prepare for the following combination of typefaces. & Blei is set with Wilhelm Klingspor Gotisch and provides a strong contrast. The wonderfully historicizing typeface emphasizes that this is the lead of the typesetters. The Logo In our logo the letters of Ag and Pb—the chemical symbols of silver and lead—merge to a unit. This is the heart of our work: The compound of photography and printing.

I’m self-employed again

2013-01-31T13:58:45+00:00

I’m self-employed again I gained a lot of experience in the last two years at compuccino. Some of the clients are: Puma, Volkswagen, WWF, Koelnmesse (gamescom, photokina), Allianz, Die Welt, Heinz Ketchup, die Deutsche Bahn. For the most of them I did small to medium sized projects. I did various Facebook apps, applications that interact with Facebook and where users can login with their Facebook account. I presenet here two big projects. Volkswagen – Das Auto.Magazine Compuccino implemented together with Kircher Burkhartd the online version of the Volkswagen brand magazine. The webmag is designed entirely responsive. From smartphone to desktop computer it can be consumed optimally. The mag will be available in 16 languages. My responsibillity was in implementing the JavaScript that controls the more complex behaviors. That is, for instance, the slideshows adapt their look and behavior depending on the screen size. The pages are modular, so that editors have a large degree of freedom in creating and designing articles. Details The JavaScript is loaded with RequireJS and uses jQuery for DOM interaction and event handling. The modules are well maintainable, configureable and implemented objekt orientated—functionallity can be added by inheritance. So, for instance, all slideshow modules share the same base. There is an API that allows iframes to interact smoothly with the parent document. Animations are realized either with CSS3 transitions or with jQuery, depending on the capabilities of the browser. AUSSCHNITT Medienbeobachtung – Social Media Dashboard The clients browse and analyze the data that has been collected by “AUSSCHNITT Medienbeobachtung” on social media websites. In the process they formulate queries on the database trough the graphical user interface. My tasks where to query the database correctly, to visualize the data, the programming of the interactive user interface as well as most of the rest of the server requirements. The results of the queries are each displayed in a “widget”. The widgets can be rearranged and provide a detailed view as well as more filter options. Unique data points can be resolved to their individual members. The current state of the dashboard is saved automatically and restores at the next visit immediately. Here is even more information (in German) … Details The JavaScript is loaded with RequireJS and uses jQuery. The JavaScript is written object orientated. The charts are displayed using the Google Chart Tools. The single requests are done via AJAX to a REST-API. The entire state of the Dashboard is saved on the server, serialized as JSON. The CakePHP framework was used on the server.

The @inpressulum font and a typographic tattoo

2012-09-02T19:04:49+00:00

The @inpressulum font and a typographic tattoo The font The font is called @inpressulum after the twitter name of Marc who wears it on his calf. Its a free interpretation of Gaelic script. The font contains only the characters visible in the artwork. Some of the glyphs where modified to form the horizontal bar of the cross. The Content The tattoo shows a verse of “The Family Prayer” of the movie The Boondock Saints. Its a translation in the Irish language from the following: “Never shall innocent blood be shed. Yet the blood of the wicked shall flow like a river. The three shall spread their blackened wings and be the vengeful striking hammer of god.” The legs of Marc after applying the tattoo on his right calf.

Introducing ufoJS

2012-01-17T14:02:59+00:00

Introducing ufoJS Fork, clone or download: ufoJS on gitHub. The Project I was am tired of platform bound font editors, myself using Linux almost exclusively. Thus, beeing a web-developer most of my time, I naturally liked the idea of doing a font editor in the browser. So, last year I started porting parts of the Python libraries FontTools and RoboFab to JavaScript in my spare time. With the first goal of rendering the path data of UFO — Unified Font Object .glif files in a browser. Now, most of the ported code is based around the pen APIs and I can show you something. Look at it. On the left side you can see the example application included from the project folder using an iframe object to include it here. It discovers the available glyphs by reading the contents.plist file of an UFO font and renders the path data of the selected .glif file using SVG. The font you can see is the DemoFont.ufo taken from the RoboFab package. Technical The library can be used in Gecko and Webkit browsers and in NodeJS. The latter has some external dependencies. The Browser dependent parts are yet only in the sample application but use dojo as well. Loading For Module loading I am using an AMD (Asyncronous Module Definition) Loader. This nicely helps to organize code, is standardized and loads the stuff fast. In the browser facing code I'm using bdload. For nodeJs r.js of the requireJS project is utilized. Testing Check out the Test Page. This is done using the D.O.H: Dojo Objective Harness and this is the only thing you can run with nodeJS as well.

graphicore Bitmap Font Building—updated

2010-09-15T16:58:24+00:00

graphicore Bitmap Font Building—updated There’s an update at the bottom of this page. ...............................###.....##......................... ......##......................###......##......................... .....###......................##.................................. ..####..###.##..##.##.##.###..#####..###...###...####.###.##..###. .##.###..##.##.##.###..##.###.###.##..##..##.##.##.###.##.##.##.## ##...##..###..##...##..##..##.##..##..##.##....##...##.###..#####. ###.##...##...##...##..##..##.##..##..##.##....##...##.##...##.... .######..##...###.###..##.##..##..##..##.###.#.###.##..##...##..#. .....###.##....###.###.####...##..###.###.####..####...##....####. ##....##...............##......................................... ###..##................##......................................... .#####.................##......................................... graphicore Bitmap Font is a bitmap typeface that was early inspired by Underwares Sauna bold italic swash and eventually went on its own way. It’s crisp on the screen at a size of 8 px and multiples thereof. However the intended use case lies rather in display sizes. Using these fonts is a statement towards the core elements of perception of our times—pixels. Resolution is finite. Anti-aliasing is a lie! The typeface itself is defined in a custom format where the glyphs are stored in text-files idiomatically as bitmaps. Like in the ASCII art above a dot stands for “no pixel” and the number sign marks the opposite. This is what I believe a bitmap font should be like—made out of bitmaps. Character editing was done in a simple text editor program. graphicore Bitmap Font Building The fonts I make available here are build from a custom format “Bitmap Font” (BMF) into ready to use OpenType format by a Python program: “graphicore Bimap Font Building” (graphicoreBMFB). By using different parameters varying fonts are generated. The font files released here are thus a demonstration of the output of graphicoreBMFB. When the possibilities of graphicoreBMFB get more comprehensive the graphicore Bitmap Font family will eventually grow. Attached to the program is the source data of graphicore Bitmap Font in the BMF format. This opens following chances to you: You can generate your own fonts if you don’t like the settings I chose. You can study it as a working example and learn how to make your own typeface design. You can write your own generator and built the typeface with that. You can give your enhancements back to the world. What to Do Download the Fonts Download the fonts package and enjoy writing with them: graphicoreBitmapFont.tar.bz2 graphicoreBitmapFont.zip all downloads Obtain the Code Have an eye on the code and then make everything better and more—or just use it: graphicoreBMFB. It’s written in Python and uses the great FontForge Python module to create outline fonts. You’ll need that, too. Join Me If you like this project or if the ideas keep on bubbling up from your subconsciousness leave me a message. If there’s enough interest in cooperation I’ll set up a central site for that. Get Serious If you need a custom typeface or special format that makes reading on your special matrix of special things pleasing, I’m your guy. Furthermore I’m good in internet issues and printed matter. If you value my work we might fit together. More information about my offer. All Currently Contained Glyphs in the Typeface. ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı – — ‘ ’ ‚ “ ” „ … ‹ › ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ € ℡ ™ ★ ✉                 ﬀ ﬁ ﬃ ﬆ The Styles and the Names Each family of the graphicore Bitmap Font has its own characteristics. Because there is no system in the development of these characteristics I decided to number them—of course, I started counting at zero. Furthermore, it is easy to add new variants to the collection when new generators evolve. The drawback is that the name doesn’t describe what the font looks like. The styles differ in their corner radius and where the corners are rounded. In the first three families all corners of each “pixel” are handled the same. The corner radius of the third family makes the pixels to circles and the family therefore to a “dot matrix”. In the latter styles an algorithm decides where to draw rounded cornes. Number Three and Four have rounded corners where they should be. Five and Six add corners outside of the pixels, where actually is no content in the matrix. Seven and Eight got “outer” and “inner” rounded corners. The Weights I did twelve different weights for each family. Weight means that the aperture of the pixel-elements differs between the fonts, while the center doesn’t move. Within the range of Thin to Regular the underlying grid becomes clearly visible, because of the gap that emerges between the items. Medium is the weight where the elements match exactly the grids width. The weights beyond Medium grow above the boundaries of the grid units and make the font bold. Finally, with Extra-Black, one pixel is more than double of the size of a grid unit and Ultra-Black goes even one step further. The families with “outer” rounded corners initially receive no weights lighter than Medium, because I’m not pleased with the outcome now. To write on a screen at 8 px the Regular or the Book fonts are best suited, because the pixels are a little bit smaller than a grid unit thus preventing rounding errors. Medium should as well work good and be crisp. The bolder weights have their use cases at display sizes. All-in-One Because it looks so great I stacked all the fonts of a family combined on a pile. The bolder fonts become the outlines of lighter ones, that creates an All-in-One family overview. Update: The Missing Type Specimens Sometimes a simple type specimen is needed. Here are two in different sizes. There’s a PDF for the bigger specimen where you can zoom in and study the details. All examples on this page are available as high quality PDF, SVG and PNG in the “media”-folder of the font package. The contents of the “media”-folder in the font-package and this text are available under the Creative Commons Attribution 3.0 Unported License.

graphicore.de is online.

2010-07-12T01:23:56+00:00

graphicore.de is online. Joy, Joy, the relaunch of my website is done. I will present my works here. I think the website is pretty much self-explanatory, so I will focus more the not so obvious things. I decided to let the archive be empty at the beginning. So, dont't be surprised. That's because I want to take some time to process the projects appropriately. The page will evolve in a natural manner. After all a designer identifies himself with the documentation of his works—thus his portfolio. There will be no comment feature. But I'm always excited about your emails and if its inevitable I'll let myself be carried away to fix it. The concern here is the presentation of my work and not the discussion about it. As well I don't want to moderate, what would be unavoidable with comments. Announcement As a birthday present of graphicore.de, as next action I'll publish the pixel font of the graphicore logo alongside with the code that built it, that I built, under a free license. The font now has ca. 220 glyphs and covers our western languages. The code is rather for tinkerers. Coming back pays off! What's under the hood? I have to answer this here. Because I built the Content Management System myself. Those who aren't up for the technics may leave now. Markup Graphicore.de validates here as XHTML 1.0 Strict. That's important to me. Granted, the content-type is text/html, but I have still the advantage of a strict syntax and its possible for me to use other XML tools on my output. An example in this case is the Atom-Feed. Style Progressive enhancement: I insisted on using some of the new CSS3 properties. Including gradients, pseudo elements, and naturally @font-fontface. It was important to me that the display works even in browsers that don't support these features. The better the browser the better the display, quite simple. With 1000px the page is rather wide relative to our screen technology. In addition all contents load among one another and are therefore visible at the same time and directly compareable to each other. To keep the coherency of the layout I set up both a layout grid as well as a baseline grid. The execution is rather primitive compared to the available CSS-Frameworks. But in exchange it fits into 130 generous lines and meets my requirements. The baselinegrid works in all modern browsers ;) Here it is: the grid is a 24px high and 99px wide image that gets repeated over and over again. When I wrote the CSS I had the image occasionally in the background to check against it. click here to see it in action(JavaScript must be enabled). Dynamic I implemented the concept of unobtrusive JavaScript. That means the page works without JavaScript. However, if JavaScript is available the entertainment factor rises. For the dynamic behavior of the website with JavaScript I used the Dojo Toolkit for the first time. The handling of Dojo is similarly sleek as the handling of jQuery. I'm very satisfied with Dojo. graphicore cache One thing I'm particularly proud of is my way of caching Ajax-Requests. A request gets always loaded in between the previous request and the main-menu. Before a request is made, if the result is loaded already, the page directly jumps to that location—the content is not loaded again. If nobody made that before, I'd like to call it "graphicore cache" ;) Backend I will make it shorter than the denseness of topic propably demands. But this post must come to an end, too. I built the backend using Zend Framework, Doctrine ORM and HTMLPurifier. Besides that one and a half Libraries that I cobbled together are employed. i18n One reason for me to build the backend myself was the rather bad support of existing solutions for internationalization. It's possible for me to localize all areas of the website and so I did.

Cinecita.org

2010-05-03T13:38:23+00:00

Cinecita.org http://www.cinecita.org Realisation Content Management The site is running a custom made content management system. I made it with PHP5, Zend Framework, Doctrine ORM and HTMLPurifier. Cinecita.org is the technical predecessor of graphicore.de. Internationalisation English and Spanish where necessary. The most ready-to-use CMSs have mean support for Internationalisation. This CMS was planned from the beginneng with multiple languages in mind. Translation is the only thing to do, but if one translation is missing an available one is taken as fallback. Technically the number of languages is not limited. Blog The site has a totally integrated blog with built in ATOM and RSS newsfeed. Some parts of the website are altered by the staff of CineCita while they are on tour. They can use a WYSIWYG-editor and don’t have to mess around with HTML so much. An Interactive Map is providing a quick overview on the CineCita tour plan and lets the user navigate through the tourstops. The results of the workshops held by CineCita will be availabe there. Animations are transporting Emotions. You have to see this on the life site. The header is animated everywhere and when a submenu is loaded the little girl in the upper right corner is opening the curtain. No Flash was used at all, we tested how far we could go without it. Frontend tools where jQuery, jQuery Tools and of course XHTML 1.0 Strict Ajax Progressive enhancement ensures that the page works good without Javascript. However — when Javascript is running — the contents are cached and the page-frame must not be requested every time. This keeps the feeling of the page intact and improves the control over the animated curtain. The Media Data is Outsourced Videos are the core media of CineCita. At workshops videos are produced by local girls and women. The videos are delivered by the good and scaleable services of Vimeo or YouTube. The Embedded Slideshows are loading image albums from Googles Picasa and displaying them in the article. The CineCita people are using this feature a lot in their blog articles to show the wonderful places they visit on their journey. The code It is a very modified version of pwi - Picasa Webalbum Integrator. Best Thing: the heavy lifting of massive image delivery is done by Google. The Graphic Design is by 10hoch16.de.

Toytoytoys.de

2009-11-05T14:38:01+00:00

Toytoytoys.de www.toytoytoys.de The Project The reality has landed in the toy shop. The collected cruelty of the world packet into puppet form. Now, the very little ones can learn through play in what a world they live in. This project points with unique toys on relevant social topics. More Information on that is linked directly with the Products. The Technique The whole site is static, but generated by a PHP script. We have decided so because the site had to be very portable—it had to work from a thumb drive. At the same time the most advantages of a dynamic solution are kept—one can make updates fast and centrally. I have made the realization of the website. Therefor I used PHP5, HTML, CSS and JavaScript. The site validates as XHTML 1.0 Strict. Concept and Graphics The design of the content and graphics of Toytoytoys was made by Zehn hoch Sechzehn. www.amnesty.de www.unicef.de www.kindersoldaten.de www.unhcr.de www.vielfalt-tut-gut.de www.greenpeace.de www.helpedia.de www.caritas-international.de www.nacoa.de www.fruehehilfen.de

Abraum

2009-05-05T16:02:59+00:00

Abraum The exhibition concerned with the topic basement — more precise, the discovery and interpretation of different semantic dimensions of basement rooms — and took place in the basement and thus the advertising had to invite to the basement. An audacious basement staircase visualizes the step into the underworld. The poster advertising in Marburg was applied double-staged. First the stairs should hang resplendent alone, a few days later the information was added. In the meantime the people had taken with them numerous posters — which I take for a compliment. The story of the project is at the abraum blog. The Abraum-logo is made by Christina Willkomm. The flyer had as an aim the fridge doors of the Marburger students’ shared flats. »komm mal runter« can mean both “come down” and “calm down”. Building the bridge from basement to White Cube the catalog was a plainly designed, quadratic booklet. It explanatorily led the visitors through the exhibits.

The Cultureless are here

2009-02-15T11:00:00+00:00

The Cultureless are here Concept The Idea is to send people in their city with a distinct task—the search for wild animals. As a result they have to perceive their environment in a different manner – as habitat for wild animals. This was inspired by the situationist praxis of Dérive, see also psychogeography. The »Handbuch der wildwachsenden Großstadtpflanzen« by Helmut Völter takes a similar line, too. The Book is my »Diplom« thesis. I have conceived, written and designed it. I was supervised by Alexander Branczyk and prof Jay Rutherford. Summer term 2008, Faculty Design, Bauhaus-University Weimar. Content The Book is introducing in general tactics of tracking down wild metropolitans at the beginning. Later, the peculiarities of the animal species themselves are scrutinised. In the rear part of the book the habitats in the city are gone into. Concluding a list of all wild mamals that occur in the city is to be found. Additional Spice is given to the idea of the field trip, because the reader has to snap the appropriate animal pictures himself. Merely the pages are prepared so that images on standard 4 × 6 inch photo paper can be inserted. In order that the book doesn’t diverge—in its capacity as photo album—extra material had to be brought into the spine as a placeholder. The spine is broad enough to take all pictures. Details There is a matching cross-reference between the animals and their habitats, so one doesn’t lose the way in the book. A running head had to be there, too. The design of the pages complies with a layout grid and the baseline grid.

Commemorative Stamp to the 200th Birthday of Hermann Schulze-Delitzsch.

2007-06-15T10:00:00+00:00

Commemorative Stamp to the 200th Birthday of Hermann Schulze-Delitzsch. The chance of the attendance at a design competition of postage stamps one seldom gets. I sent a fancy layout even though the advisory council for art of the German ministry of finance often favors conventional design. The layout wasn't chosen—I still like it. The typeface is FF Seria by Martin Majoor. The design was supervised by professor Jay Rutherford at the Bauhaus-University Weimar in the summer term 2007.

Turbine

2007-06-15T09:00:00+00:00

Turbine The documentation of our works is at die-turbine.de. There it’s full of thrilling media and cool ideas. Turbine is Beni von Alemann Anne Gorke Julian Wagner Kari Wolf Uli Schöberl Tanja Sannwald Jens Ole Mayer Piet Machat Max Lisewski Simon Kiepe Daniel Klapsing Thomas Gnahm Lasse Fister

Typete—Typographic Wallpaper

2005-05-15T10:00:00+00:00

Typete—Typographic Wallpaper One Letter per Length of Wallpaper, that would make it possible to write in an elegant floral garment on the walls of your home. As illustration of that idea we’ve made this image back then in 2005. The font is Warnock Pro Regular. The floral filling of the characters was fitted in elaborate manual work. The small g has become one of the most beautiful chars. The subliminal message is read prettiest in defoliated state: »argwohn«. That’s German for “suspicion”. In the finished artwork the type steps back but is denser overgrown than the it surrounding similar pattern. So the wallpaper is less obtrusive—in turn more homelike. The original design is 5,58 meter to 2,56 meter in size. The Typete was exhibited in the course of Aldi Huxley, schöne neue Warenwelt (brave new product-world) at the Design Mai Youngsters 2005 and at the Rundgang 2005 of the Bauhaus-Universiy Weimar. It originated 2005 in the projekt »Schnellmodus International«. It was supervised by Alexander Branczyk and designed by Tanja Sannwald, Johanna Schiegnitz, Daniel Graf and Lasse Fister. The Typete attended the 2005 competition “New Walls, Please!” and appeared commendatory alluded in the catalog of the competition.