Blog

Erfahre mehr über unsere Projekte

(… und wie wir arbeiten)

Langsam in Physik und Mathematik eintauchen

, von Frank Hellenkamp

Ich bin immer an Wissenschaft und Physik interessiert gewesen, so lange ich denken kann. Und ich habe immer viele Artikel und Bücher darüber gelesen.


Aber ich habe mich nie getraut tiefer in den mathematischen Teil der Materie einzusteigen. Das hat sich nun seit dem letzten Herbst geändert.


Ich habe nun angefangen, viele Physik-Bücher zu lesen, die die Dinge nicht nur in Textform beschreiben, sondern die sich auch mit den mathematischen Grundlagen beschäftigen.

Und langsam (sehr langsam) bekonmme ich einen weinzig kleinen Einblick in die Tiefe der Beziehung zwischen der mathematischen Beschreibung und unserer physikalischen Realität.

Das ist nur ein erster kleiner Schritt – aber es ist zutiefst befriedigend, das zu Lernen und darüber nachzudenken.


Das interressante daran ist für mich, dass der Impuls, sich damit zu beschäftigen, der gleiche ist, der mich auch motiviert mich mit Design und Programmierung zu beschäftigen.

Ästhetik — Ein tiefes Gefühl Schönheit und (bei aller Komplexität) der Klarheit.

PSI Mobile Prototype und Styleguide

, von Frank Hellenkamp

Angular Prototyp

Zusammen mit Hesse Design betreuen wir schon seit mehreren Jahren die Basisstile der Benutzeroberflächen für PSI. Die klassischen PSI Produkte sind Java Anwendungen, die einen PSI spezifischen Stil haben.

Zukünftig sollen aber mehr Applikationen auch mobil bzw. online im Webbrowser verfügbar sein, weshalb die PSI Stile für die Touch- und die mobile Benutzung neu angepasst werden mussten.

Um diese Entwicklung möglich zu machen, haben wir einen neuen Prototypen auf Basis von Angular entwickelt, der sowohl mobil wie auch am Desktop und am Tablet funktioniert, aber für die Bedienung per Touch optimiert ist:

Alony Relaunch

, von Frank Hellenkamp

Endlich!

Es war lange Zeit, und endlich ist der Relaunch der Website der Sängerin Efrat Alony online:

ScriptDock sticht in See

, von Frank Hellenkamp

ScriptDock ist ein Netzwerk für Drehbuchautoren.

Die Er­zähl­kul­tur geht den nächs­ten Schritt: Im di­gi­ta­len Zeit­al­ter bie­tet scriptDOCK Au­to­ren die Mög­lich­keit zur ge­mein­sa­men Be­wäl­ti­gung von Hin­der­nis­sen.


Wie in an­de­ren Be­rei­chen gibt es auch beim Film den Wunsch nach ei­nem trans­pa­ren­te­ren Wett­be­werb. Da­mit viel­fäl­ti­ge Ide­en und gut aus­ge­ar­bei­te­te Stof­fe ih­ren Weg zur Ent­de­ckung und Rea­li­sie­rung fin­den, knüpft scriptDOCK ein Netz­werk, das Au­to­ren mit Dreh­buch­ver­wer­tern ver­bin­det.


ScriptDock bietet Autoren einen Heimathafen, um sich zu präsentieren, zu vernetzen und ihre Arbeiten gezielt zu vermarkten.

best architects award relaunch

, von Frank Hellenkamp

Der best architects Award zählt zu den renommiertesten Architekturauszeichnungen

Somit braucht es eine Website, die einfach zu bedienen ist, leicht wachsen kann und nicht mit den präsentierten ausgezeichneten Arbeiten in Konflikt gerät.


Die Architektur steht im Vordergrund.

Launching dsv-europa.de

, von Frank Hellenkamp

Die Spit­zen­ver­bände der deut­schen Sozi­al­ver­si­che­rung haben sich mit Blick auf ihre gemein­sa­men euro­pa­po­li­ti­schen Inter­es­sen zur „Deut­schen Sozi­al­ver­si­che­rung Arbeits­ge­mein­schaft Europa e.V.“ zusam­men­ge­schlos­sen.


Wir hatten die Ehre, die Website umzusetzen und ihnen dafür unser Content Managament System zur Verfügung zu stellen.

Die (fast) gleiche Entwicklungsumgebung über Jahre hegen und pflegen

, von Frank Hellenkamp

VIM für Profis

Ich war letztend sehr überrascht, als ich meine altes PowerBook G4 (noch mit Mac OS X Tiger) gebootet habe und mir plötzlich klar geworden ist, wie lange ich schon eine mehr oder weniger konstante (aber nicht genau gleiche) Entwicklungsumgebung benutze:


  • Mac OS X (jetzt MacOS) plus Linux für Hosting und Services
  • QuickSilver (jetzt OpenSource)
  • tmux (davor screen) und natürlich
  • vim

Ich benutze immer noch OS X mit einer sehr ähnlichen Ordnerstruktur (Ich habe immer alle Daten auf neue Rechner übertragen).

depage-forms: Validierung von html5 Formularen (Part II)

, von Frank Hellenkamp

Validierung von HTML Formularen

Dank des neuen HTML Standards und der WHATWG Group ist es einfacher als jemals zuvor Benutzer innerhalb des Browsers anzuzeigen, wenn er keine validen Daten in ein Eingabefeld eingegeben hat. Leider funktioniert dies allerdings nur in neueren Browsern, und nicht in älteren wie z.B. dem Internet Explorer 8. 

 

Um es für Entwickler einfacherzu machen, stellt depage-forms einen einfachen Weg zur Verfügung, die an allen drei Stellen automatisch funktionert: 

  • auf dem Server
  • im Browser, basierend auf den neuen Standards
  • im Browser, per Javascript

Standardeingabefelder

Getting things done without getting the word out

, von Frank Hellenkamp

Arbeit

Es ist sehr sehr lange her, dass ich es geschafft habe, hier einen Artikel zu veröffentlichen. Der Grund ist nicht, dass es nichts zu erzählen gäbe. Aber wir arbeiten so viel, dass in der Regel leider einfach keine Zeit bleibt, darüber zu schreiben. Weshalb? Nun. Es wartet immer schon das nächste Projekt, das so schnell wie möglich fertig werden möchte. 

 

Ich bin mir auch sicher, dass wir nicht die einzigen sind, denen es so geht: Eine Menge Freelancer und kleinere Agenturen, die ich kenne, schaffen es nicht regelmäßig zu kommunizieren, an was sie gerade arbeiten. Manche schreien statt dessen einfach auf Twitter oder Facebook. Ich muss aber zugeben, dass ich ungern prahle. Nichtsdestotrotz denke ich, das manche Dinge es aber auf jeden Fall wert sind, gesehen zu werden. 

 

Ich wollte darüber schon vor... nun... vor mehr als einem Jahr schreiben. 

Das soll sich ändern – Ab heute! 

Woran arbeiten wir denn nun?

Als erstes, Screen Pitch: 

Die Ideenkonserve

, von Frank Hellenkamp

So sicherst Du Deine Ideen vor dem Verlust.

Zinnobergruen hat das wunderbar gestaltete Notizbuch "Ideenkonserve" für Chromolux gemacht. Man kann es kostenlos auf ideenkonserve.de bestellen. 

Wir haben die Website umgesetzt, die mit Hilfe der kommenden Version von depage-cms und den neuen depage-forms implementiert wurde. 

 

Es gibt sechs wunderschöne Kategorien für Deine Ideen: 

  • Revolutionäre Ideen
  • Profitable Ideen
  • Epochale Ideen
  • Grüne Ideen
  • Erleuchtende Ideen
  • Kleine Ideen

Die Ideenkonserve 

Revolutionäre Ideen 

Profitable Ideen 

Epochale Ideen 

Grüne Ideen 

Erleuchtende Ideen 

Kleine Ideen 

depage-forms: html5 Formulare leicht gemacht (Part I)

, von Frank Hellenkamp / Sebastian Reinhold

HTML Formulare: Leicht und schwer zugleich

HTML-Formulare sind leicht zu erstellen – aber sie wirklich gut und benutzerfreundlich zu machen, das ist keine einfache Aufgabe. 

Es gibt dabei eine Reihe von Dingen, die man immer wieder und wieder machen muss: 

  • Den HTML-Source für die Form schreiben
  • Die Stylesheets dafür festlegen
  • Die eingegeben Daten im Browser validieren (optional)
  • Die eigegebenen Daten auf dem Server validieren (niemals optional – das bitte nie vergessen!)
  • Und zusätzlich noch dafür sorgen, dass der Benutzer nicht mit dem Browser kämpfen muss: Beispielsweise bei unverständlichen Meldungen über das erneute Senden von Daten immer dann, wenn die Seite neu geladen wird oder der Benutzer den Vor- oder Zurück-Button benutzt.

Nicht mehr ständig kämpfen müssen!

schwarz auf weiß: uebele.com

, von Frank Hellenkamp

Das büro uebele ist mit depage::cms online

Die Website des in Stuttgart ansässigen büro uebele wurde nun auf der Basis von depage::cms umgesetzt. Die Gestaltung der Seite entspricht weitesgehend der Variante, die auch schon vorher online war. Konzept und Design sind von Andreas Uebele und Tristan Schmitz. 

Wir haben die Seite aber technisch überarbeitet: 

Viel freier Raum für Text

, von Frank Hellenkamp

Weil Text Liebe braucht:

textfreiraum.de ist online! 

 

textfreiraum ist ein Redaktionsbüro, das sich die Freiheit nimmt, weitgehend unabhängig von Vorgaben Artikel, Features und Kommentare zu schreiben. Wir durften für textfreiraum die Website gestalten. Da textfreiraum von Text lebt und durch Text atmet, war ein Layout vonnöten, das den Texten ebenfalls den benötigten Raum bietet. 

Der Inhalt: Texte über Design

Rekursives CSS

, von Frank Hellenkamp

Cascading Stylesheets und Rekursion

In der wenigen übrig bleibenden Zeit, teste ich gerne kurz verschiedene Ideen und Konzepte aus, über die ich während des Arbeitens stolpere. Eines davon ist, Stylesheets für Elemente rekursiv anzuwenden bzw. grafische Strukturen, die sich in Programmiersprachen mit rekursiven Strukturen ergeben, mit Hilfe von CSS zu simulieren. 

 

Das geht in dieser Form, da alle mit CSS (Cascading!) formatierten Elemente Eigenschaften ihrer Elternelemente erben und weil relativ und absolut positionierte Elemente ihren Fixpunkt an dem jeweiligen relativ oder absolut positionierten Elternelement festmachen. 

(Es ist auch eine Live-Vorschau der Beispiele verfügbar: http://sandbox.depage.net/css-recursion/ — man braucht aber einen modernen Browser, um einige Beispiele korrekt dargestellt zu bekommen.) 

iPhone Optimierung und »mobile web«

, von Frank Hellenkamp

Mobiles Internet

Ebenso wie das Mediums "Internet" in den 90ern durch die Verbreitung von PCs immer wichtiger geworden ist, tritt heute der mobile Zugriff auf das Internet immer stärker in der Vordergrund. Auch wenn Apple mit dem iPhone nur einen recht kleinen Marktanteil an allen Mobiltelefonen hat, dominiert es doch zusammen mit Google Android den mobilen Internettraffic

Dies liegt vor allem daran, dass man am iPhone und unter Android dank Webkit eine recht gute Darstellung von normalen, nicht für die mobile Darstellung optimierten Internetseiten hat — was unter anderen mobilen Browsern nur sehr schlecht gelöst war.  

depage.net in der mobilen Darstellung im iPhone 

Da das iPhone bisher noch das wichtigste bzw. bekannteste Mobile Endgerät ist, haben wir uns entschieden, depage.net und depagecms.net für die Darstellung am iPhone zu optimieren. 

depage blogged

, von Frank Hellenkamp

Unser depage blog ist online — mit News und Innenansichten umgesetzter Projekte. Sie sind ebenfalls auch herzlich eingeladen, unseren Atom-Feed zu abonnieren, damit wir sie immer auf dem Laufenden halten können.  

depage::cms goes opensource

, von Frank Hellenkamp

Dieses Jahr ist endlich die offizielle Entscheidung gefallen: Die kommende Version von depage::cms werden wir unter einer OpenSource-Lizenz zur Verfügung stellen und so einer breiteren Basis von Benutzern und Entwicklern verfügbar machen.  

 

Da dieser Prozess einige Zeit erfordert (Dokumentation, gemeinsame Source-Verwaltung auf Basis von git, etc.) müssen wir sie leider noch um etwas Geduld bitten. Wenn Sie Interesse haben und über weitere Entwicklung informiert bleiben wollen, können Sie sich gerne bei unserem Newsletter anmelden — wir halten Sie dann auf dem Laufenden. 

 

You are welcome to fork us at GitHub. 

Immer das Gleiche.

, von Frank Hellenkamp

Lesen? Im Internet?

Es wird wahnsinnig viel am Bildschirm gelesen: Emails, News, Blogs, Nachschlagewerke. Doch Literatur am Bildschirm ist immer noch ein Stiefkind im Internet (obwohl es schon einige Versuche dazu gegeben hat). 

 

Doch die Dinge, die sich einigermaßen erfolgreich sind, gehören vielfach dem Genre "Fan-Fiction" an, der vom gestandenen Kulturbetrieb klassischerweise nicht ernst genommen wird. »Literaturtechnisch« ist dies korrekt, als gesellschaftliches Phänomen wohl eher nicht. 

 

Die Zeit hat kürzlich in einem Dossier lamentiert, dass zu wenig gelesen wird, und dazu noch die Lesekompetenz schwinden würde. Sogar Bücher von Astrid Lindgren müssten vereinfacht werden, um in manchen Schulen noch gelesen werden zu können.  

 

Man kann das ernst nehmen oder übertrieben als Kulturkrieg abtun, der schon zu jeder Zeit in irgendeiner Form geführt wurde. Oder man macht einfach das, was pragmatisch am sinnvollsten sein mag. Lesen und Schreiben, etwas für die eigene Sprachkompetenz tun und wenn möglich auch noch ein wenig auf andere dabei abfärben. 

Es ist immer das Gleiche.

Mit immerdasgleiche.de nun also mein eigener bescheidener Versuch, Menschen dazu zu bringen, sich Zeit zu nehmen, einen Moment zu verweilen und nicht nur schnell überfliegbare Information, sondern wirkliche Sprache wahrzunehmen, zu lesen und zu empfinden. 

 

Die Texte: In der Regel kurz (ich nenne sie »shorties«) bis zu maximal mittellang wie in »Das Hospiz«

 

Das Layout: Möglichst einfach, schwarz auf weiß, mit einer zurückhaltenden Navigation, komplett skalierbar und versehen mit speziellem Print-Stylesheet, so dass sich die einzelnen Texte auch bequem ausdrucken lassen. 

 

Dazu ein paar online-spezifische Features: 

alony // lights on/off video

, von Frank Hellenkamp

Für die gleiche Band, für die wir schon die Ehre hatten, das Packaging zu machen, haben wir nun auch ein Video umgesetzt. Das Video basiert komplett auf Fotomaterial und den Illustrationen, die auch schon im Booklet verwendet wurden. Die Animation selbst wurde in Flash umgesetzt und von dort als Video exportiert. 

Die Startsequenz

Alony Lights On/Off Startsequenz

Der Anfang des Videos auf Basis des Covers für Dismantling Dreams 

Das Video startet mit einer 16:9-Variante des Coverbildes des Albums. Dann fangen die illustrierten Traumelemente an zu leben, die weiße Fläche ersetzt den "realen" Hintergrund und der "Protagonist" des Videos macht sich auf den Weg durch die Traumwelt: 

Er begegnet mehreren anderen Charakteren (einem Nachbar; einem Mann, der einem Kind die Leviten ließt; mehrern Kamelen; Oskars Blechtrommel; seiner großen Liebe, die er schweren Herzens verlassen muß etc.). Auf dem Weg fällt er mehrmals, bis er zum Schluß endlich lernt zu fliegen. 

 

Pop-Up-The-Bathroom

, von Frank Hellenkamp

10 Badtrends

Bei Pop-Up-The-Bathroom geht es um die Visualisierung von 10 Badtrends. Das Projekt entstand zur ISH im Auftrag des VDS in Zusammenarbeit mit FAR_consulting, Karsten Jipp und Verena Landgraf

Verena Landgraf hat die 10 Badtrends in Einzelbildern illustriert. Auf dieser Basis war unsere Aufgabe, diese interaktiv für die Verwendung im Internet und zur automatischen Präsentation auf der ISH aufzubereiten. 

Um den 2D-basierten Illustrationen etwas mehr Räumlichkeit zu verleihen, fiel die Entscheidung, diese Räume in "Quasi"-3D-Räume umzusetzen. Eine richtige 3D-Umsetzung wäre innerhalb des Zeitrahmes nicht möglich gewesen, hätte vor allem aber auch den zweidimensionalen Charakter der Illustrationen zerstört. 

 

Folgende Trends wurden illustriert: 

Die Umsetzung

alony // dismantling dreams

, von Frank Hellenkamp

Songs and Soundscapes

Alony ist eine Band bestehend aus Efrat Alony (Gesang), Mark Reinke (Piano, Electronics) und Christian Thome (Schlagzeug, electronics), für die ich die Ehre hatte, Cover und Booklet ihrer neuen CD Dismantling Dreams zu gestalten. 

 

Zunächst war das Booklet als eine Art »kleines Buch« geplant. 

Das Booklet der CD war zunächst als kleines Buch angedacht. Es sollte den Hörer — parallel zur Musik — auf eine kleine Reise in eine andere Welt mitnehmen (Dismantling Dreams), wobei dies als Freilegen mehrerer Ebenen geschehen sollte. Als Basis für die einzelnen Ebenen waren jeweils die Songs gedacht.  

 

Jede Ebene sollte den Hörer ein wenig weiter mit in neue Erfahrungsräume nehmen und den Rahmen einer eigenen »Erzählung« bilden. Das Booklet sollte die Musik auf optischer und haptischer Ebene erfahrbar machen. Insofern war es uns sehr wichtig, dass das Booklet fühlbar und spürbar und als wirklicher Gegenstand wahrgenommen würde, den man in der Hand halten oder sich aufstellen kann. 

 

Dies scheint uns aus zweierlei Gründen sehr wichtig: 

Every Day is Exactly the Same.

, von Frank Hellenkamp

Wir leben in einer Box.

Oder besser — wir leben in mehreren Boxen. Klein und groß, offen und geschlossen, manche von ihnen haben Löcher und andere sind finster, wie in einem Maulwurfshügel. 

Eine dieser Boxen ist mein Computer. Er hat ein kleines Loch durch das man die Welt sehen kann — manche nennen es das World Wide Web — aber wenn man darüber nachdenkt, dann ist es in Wirklichkeit nur eine Anzahl weiterer Boxen, in die man schaut. 

Meine Box.

Everydayisexactlythesame.net ist ein Versuch meine eigene Box zu visualisieren. Alle fünf Minuten wird automatisch ein Screenshot erstellt. Und am Ende eines Tages wird dann das Durchschnittsbild für den jeweiligen Tag errechnet.  

 

Hier als Beispiel der Durschnitt für den 01. Januar 2009 — ein Tag voller Arbeit in Flash (Animation) und an mehreren Webseiten und zusätzlich noch ein wenig Zeit in dem Spiel The World of Goo

 

Da nur der Durschnitt (average) wenig aussagekräftig wäre — es wäre einfach nur ziemlich mittelgrau — werden zusätzlich noch weitere Versionen des gleichen Bildes berechnet: