Retina CSS-Sprites</h1> <article> <h1>Retina CSS-Sprites</h1> <p>Andreas Dantz — Mon, 02 Apr 2012 16:00:58 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p> Wo möglich setzen wir <a href="http://de.wikipedia.org/wiki/CSS-Sprites">CSS-Sprites</a> ein, um Requests an den Server zu reduzieren. Alle Pixelgrafiken sehen jetzt auf dem iPad natürlich ziemlich schwammig aus, wenn sie nicht auch noch einmal in der doppelten Auflösung vorliegen. Nun sind CSS-Sprites in der Regel Pixelgrafiken und damit genau dieser Problematik unterworfen.</p> <p>Die Lösung für normale Grafiken wäre dann die Hintergrundgrafik in doppelter Auflösung einzubauen und auf die halbe Größe zu skalieren. Das sähe dann wie folgt aus:</p> <pre><code>.selektor { background: url('bildname.png'); background-size: 50%; } </code></pre> <p>Damit wir bei der Umsetzung einer Website nicht zwei Sprites mit den entsprechenden Positionierungen pflegen müssen, ist die Antwort eigentlich ganz einfach. Wir bauen unsere Sprite wie bisher, und legen einfach eine doppelt so hoch aufgelöste Sprite dazu, die wir für Geräte mit Retina-Display ausliefern. Die Position der einzelnen Grafiken verdoppelt sich dabei einfach. Da die Retina-Grafik aber ohnehin auf 50% der Größe skaliert wird, um die doppelte Auflösung zu bieten, bleiben die Positionen gleich.</p> <p></p> <p>Das einzige Problem: eine einzelne Grafik lässt sich mit <code>background-size: 50%;</code> einfach herunter skalieren. Bei einer Sprite wird aber die ganze Grafik auf 50% des Elements skaliert und damit unbrauchbar. Mit <code>background-size: cover;</code> lässt sich dies umgehen, solange alle Grafiken in einer Dimension gleich groß sind und nur in der jeweils anderen Dimension nebeneinander platziert werden.</p> <p>Das klingt jetzt vielleicht ein wenig verwirrend. Zum Glück ist es nicht wert weiter darüber nachzudenken, denn die viel einfachere Lösung ist es, die Retina-Fassung mit Pixelangaben auf die größe der „normalen“ Sprite zu schieben. Das ganze dann noch in den entsprechenden Media-Query verpackt und fertig.</p> <pre><code>@media only screen and (-webkit-min-device-pixel-ratio: 2) { .icon { background: url('../images/sprite@2x.png'); background-size: 256px 64px; } } </code></pre> <p>Diese wenigen Zeilen CSS (und natürlich die entsprechend hochaufgelöste Sprite, die bei älteren Projekten das weit größere Problem sein wird) genügen um sämtliche Grafiken aus der Sprite auf der Website zu schärfen. Hier gibt es eine <a href="http://lab.vortrieb.net/retina/sprite.html">kleine Demo</a>.</p> </article> <article> <h1>Frohe Weihnachtskarte 2011!</h1> <p>vortrieb — Wed, 21 Dec 2011 13:34:11 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div>  </article> <article> <h1>IE7 & ein Weihnachtsgeschenk</h1> <p>vortrieb — Mon, 19 Dec 2011 14:22:32 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p> Als Ausgangspunkt für zukünftige Vergleiche hat PPK den Stand vom November aus den StatCounter-Statistiken <a href="http://www.quirksmode.org/blog/archives/2011/12/ie_market_share.html">vorgelegt</a>.</p> <p>Dem entnehmen wir, dass in Deutschland im November 1% der Besuche mit dem IE6 zustande kamen und 2% mit dem IE7. Umgekehrt bedeutet das, dass wir einen wirklich großen Teil der Features neuerer Browser nur eingeschränkt nutzen können, weil uns 3% der Besucher zurückhalten.</p> <p>Als der Internet Explorer 6 unter die 3%-Marke gefallen ist, haben wir ihn aus unseren Angeboten herausgenommen und er war Standardmäßig nicht mehr Teil unserer Frontend-Entwicklung und wurde nur noch mit einem einfachen, typografischen Layout bedacht. Ab sofort zieht der Internet Explorer 7 mit ihm gleich und wird nur noch mit dem Design der Website bedacht, wenn es explizit gewünscht ist.</p> <p>Willkommen schöne neue Welt des Jahres 2012.</p> </article> <article> <h1>PHP-Deployment mit Capistrano und Git</h1> <p>Nils Riedemann — Mon, 12 Dec 2011 11:47:19 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div>  <p>Wer den Titel gelesen hat, oder sich in Ruby/Rails-Gefilden auskennt, weiss, dass die Antwort <a href="https://github.com/capistrano/capistrano">Capistrano</a> ist: <code>cap deploy</code> in die Kommandozeile, fertig.</p> <h3><abbr title="Too long; didn't read">TL;DR</abbr></h3> <p><a href="https://github.com/capistrano/capistrano">Capistrano</a> ist ein Kommandozeilen-Werkzeug für Deployments und ist so flexibel, dass es für fast jede Umgebung geeignet ist. Unsere Umgebung hier: Drupal, Github, Uberspace.</p> <ul> <li>Wir benötigen <a href="http://www.ruby-lang.org/de/">Ruby</a> und <a href="http://rubygems.org/">RubyGems</a>.</li> <li>Capistrano via RubyGems installieren: <code>$ gem install capistrano</code>.</li> <li>Im Projekt-Ordner: <code>$ capify .</code>.</li> <li>Inhalt der <code>config/deploy.rb</code> mit dem <a href="https://gist.github.com/1443355">fertigen Rezept</a> austauschen, Pfade, Zugangsdaten usw. anpassen.</li> <li>Deployment auf dem Server vorbereiten: <code>$ cap deploy:setup</code>.</li> <li>Server ggf. Konfigurieren. Das Verzeichnis <code>current</code> beinhaltet die aktuelle Version der Seite.</li> <li>Weiterarbeiten und deployen: <code>$ cap deploy</code>.</li> </ul> <h3>Was ist Capistrano?</h3> <blockquote> <p>„Capistrano is a developer tool for deploying web applications.“</p> </blockquote> <p>Und ein sehr flexibles noch dazu. Seinen Ursprung hat es in der Rails/Ruby-Gemeinde und es ist so flexibel, dass es ohne Probleme in fast jeder Umgebung eingesetzt werden kann. In unserem konkreten Fall ist das <a href="http://drupal.org">Drupal 6</a>, <a href="http://github.com">Github</a> und ein Live-Server bei <a href="http://uberspace.de/">Uberspace</a>.</p> <h3>Vorraussetzungen und Einrichtung</h3> <p>Für unsere Vorgehensweise gehen wir davon aus, dass wir SSH-Zugriff auf den Server haben und uns mit SSH-Keys dort einloggen.</p> <p>Capistrano selbst ist am einfachsten als RubyGem zu installieren: </p> <pre><code>$ gem install capistrano </code></pre> <p><em>Anmerkung</em>: Zeilen, die mit einem <code>$</code> beginnen sind für die Kommando-Zeile bestimmt. </p> <p>Natürlich muss dafür <a href="http://www.ruby-lang.org/de/">Ruby</a> und auch <a href="http://rubygems.org/">RubyGems</a> auf dem System installiert sein. Ruby ist glücklicherweise auf vielen UNIXoiden Systemen (bei uns MacOS X) bereits installiert, und <a href="http://rubygems.org/pages/download">RubyGems sind fix installiert</a>. Das installiert dann auch gleich alles Andere mit, was von Capistrano benötigt wird. Auf dem Server ist weder RubyGems noch Ruby erforderlich.</p> <p>Allerdings werde ich nicht groß auf irgendwelche syntaktischen Eigenarten von Ruby eingehen, bei fragen, schreibt mir einfach auf <a href="http://twitter.com/nerdismus">Twitter (@nerdismus)</a>. Zum Glück ist ruby eine sehr leserliche Sprache und Vieles ist selbsterklärend.</p> <p>Falls noch nicht geschehen, wechseln wir nun in das Verzeichnis, in dem unsere Webseite liegt und initialisieren Capistrano:</p> <pre><code>$ cd ~/sites/beispielSeite $ capify . [add] writing './Capfile' [add] making directory './config' [add] writing './config/deploy.rb' [done] capified! </code></pre> <p>Capistrano legt also eine Datei <code>Capfile</code> im aktuellen Verzeichnis und eine Datei <code>deploy.rb</code> im Unterordner <code>config</code> an. Die <code>deploy.rb</code> ist die Datei, für die wir uns jetzt besonders interessieren. Die löschen wir nämlich erstmal.</p> <h3>Capistrano Rezept</h3> <p>Denn das Meiste aus der <code>deploy.rb</code> brauchen wir nicht. Also legen wir eine neue an und konfigurieren Capistrano:</p> <pre><code>set :domain , "vortrieb.net" set :user , "vortrieb" set :repository , "git@github.com:Vortrieb/Vortrieb.net.git" set :scm , :git # git statt svn benutzen set :branch , "master" # der git-branch, der deployt werden soll set :use_sudo , false # auf uberspace dürfen wir natürlich kein # sudo benutzen. </code></pre> <p>Das dürfte ziemlich selbsterklärend sein. Zu beachten ist allerdings, dass <code>:domain</code> und <code>:user</code> zum Verbindungsaufbau per SSH benutzt werden.</p> <p>Da wir uns mit unseren SSH-Keys einloggen wollen, um nicht bei jedem Deployment ein Passwort eingeben zu müssen, sagen wir Capistrano, dass es die Keys benutzen soll:</p> <pre><code>ssh_options[:forward_agent] = true </code></pre> <p>Und natürlich muss Capistrano noch wissen wo es die Dateien hinschieben soll.</p> <pre><code>set :deploy_to, "/var/www/virtual/#{user}/" role :website, domain, :primary => true </code></pre> <p>Die zweite Zeile lässt bereits vermuten wie mächtig Capistrano ist. Es ist nämlich überhaupt keine großes Sache Capistrano in komlexeren Umgebungen mit verschiedenen Servern und/oder Datenbanken einzusetzen. Da wir es hier aber mit nur einem Server zu tun haben, reicht es eine Rolle <code>:website</code> zu definieren und als Standard festzulegen.</p> <p>Als nächstes bereiten wir das Deployment auf dem Server vor. </p> <h4>Deployment vorbereiten</h4> <p>Capistrano arbeitet mit 3 Ordnern auf dem Server: <code>current</code>, <code>shared</code> und <code>releases</code>. Naja nicht so ganz. <code>current</code> ist ein Symlink auf den aktuellsten bzw. aktiven Release im <code>releases</code>-Ordner. Das hat den unglaublichen Vorteil, dass beim deployment die Ausfall-Zeit der Seite praktisch auf 0 reduziert wird.</p> <p>Das eigentliche Deployment erfolgt in den <code>releases</code>-Ordner. Für jede veröffentliche Version wird darin ein weiterer Ordner mit dem aktuellen Datum als Namen angelegt. Erst wenn alle Daten vollständig hochgeladen wurden, wird der Symlink auf das neue Release geändert.</p> <p>Ein weiterer Vorteil durch diese Arbeitsweise, der wirklich Gold wert ist, sind Rollbacks. Gibt es irgendwelche Probleme mit der neuen Version, kann man schnell zum vorherigen Release zurückspringen. Wieviele Releases gespeichert werden sollen, könnten wir mit <code>set :keep_releases, 5</code> festlegen. <code>5</code> ist der Default-Wert und für uns völlig ausreichend.</p> <p>Der <code>shared</code>-Ordner ist für gemeinsame Daten unter den Releases gedacht. Also zum Beispiel die User-Uploads, die bei Drupal in <code>sites/default/files</code> liegen und vom Deployment unangestatstet bleiben sollen.</p> <p>Darum kümmern wir uns aber erst später.</p> <pre><code>$ cap deploy:setup * executing `deploy:setup' * executing "mkdir -p /var/www/virtual/vortrieb/test /var/www/virtual/vortrieb/test/releases /var/www/virtual/vortrieb/test/shared /var/www/virtual/vortrieb/test/shared/system /var/www/virtual/vortrieb/test/shared/log /var/www/virtual/vortrieb/test/shared/pids" servers: ["vortrieb.net"] [vortrieb.net] executing command command finished in 80ms * executing "chmod g+w /var/www/virtual/vortrieb/test /var/www/virtual/vortrieb/test/releases /var/www/virtual/vortrieb/test/shared /var/www/virtual/vortrieb/test/shared/system /var/www/virtual/vortrieb/test/shared/log /var/www/virtual/vortrieb/test/shared/pids" servers: ["vortrieb.net"] [vortrieb.net] executing command command finished in 88ms </code></pre> <p>Mit diesem Befehl lassen wir uns von Capistrano die notwendigen Ordner anlegen und prüfen gleichzeitig, ob wir bisher alles richtig gemacht haben. Auf dem Server müssten nun die Ordner <code>shared</code> und <code>releases</code> existieren.</p> <p>Ist dies der Fall, könnten wir eigentlich schon fröhlich unsere Seite mit <code>$ cap deploy</code> auf den Server schieben. Das sollte auch funktionieren und wer mag, kann das auch mal ausprobieren.</p> <p>Aber wie bereits angemerkt, müssen wir uns noch um die gemeinsamen Dateien kümmern – und ein wenig vom Standard-Verhalten eliminieren.</p> <h4>Capistrano Tasks</h4> <p>Das Herzstück von Capistrano sind die Tasks, mit denen wir das Deployment an unsere Umgebung anpassen können. Ein Deployment lässt sich in kleine Schritte aufteilen: "Neues Release herunterladen", "Zugriffsrechte einstellen", "Datenbank migrieren", "Symlinks aktualisieren", "Server Neustarten", "Cache leeren" und was nicht noch alles.</p> <p>Capistrano hat einige Standard-Tasks, die vor allem für Rails gedacht sind. Das ist eigentlich kein Problem, erzeugt für uns aber ein paar unschöne Fehlermeldungen. Wir überschreiben diese Tasks also:</p> <pre><code>namespace :deploy do task :set_permissions, :except => { :no_release => true } do # noop end task :restart do # noop end task :start do # noop end end </code></pre> <p>Wer nicht so vertraut mit Ruby ist, wird das hier vermutlich etwas ungewöhnlich finden. Die <code>do … end</code>-Teile liessen sich auch <code>{ … }</code> schreiben. Das sind sind sogenannte Blöcke, ein mächtiges Werkzeug aus der funktionalen Programmierung, das in Ruby quasi allgegenwärtig ist (Stichwort: Closures).</p> <p>Ich erkläre hier jetzt mal nicht genauer, wie die Blöcke funktionieren, wir wollen ja heute auch noch fertig werden. Was wir hier machen ist dagegen ziemlich simpel: wir überschreiben die Default-Tasks, die zu Fehlern führten und lassen sie einfach gar nichts machen. </p> <p>Unsere speziellen Tasks für Drupal fassen wir in einem eigenen Namespace zusammen:</p> <pre><code>namespace :drupal do end </code></pre> <p>Zunächst fügen wir einen Task ein, der uns einen Unterordner <code>files</code> im <code>shared</code>-Ordner anlegt.</p> <pre><code>namespace :drupal do task :setup do run "mkdir -p #{shared_path}/files" end end </code></pre> <p><code>shared_path</code> enthält den Pfad zum <code>shared</code>-Ordner. Diesen Befehl können wir nun ausführen:</p> <pre><code>$ cap drupal:setup * executing `drupal:setup' * executing "mkdir -p /var/www/virtual/vortrieb/test/shared/files" servers: ["vortrieb.net"] [vortrieb.net] executing command command finished in 80ms </code></pre> <p>Wir können uns übrigens die verfügbaren Befehle mit <code>$ cap -T</code> anzeigen lassen. Jetzt kümmern wir uns noch um den <code>sites/default/files</code>-Ordner. </p> <p>Wir müssen nach jedem Deployment einen Symlink in <code>sites/default</code> des aktuellen Releases anlegen, der auf den <code>shared/files</code>-Ordner zeigt. Das klingt zum Glück komplizierter als es ist:</p> <pre><code>task :symlink do run "ln -s #{shared_path}/files #{latest_release}/sites/default/files" end </code></pre> <p>Natürlich wollen wir das nicht jedesmal von Hand eintippen, sondern das soll automatisch bei jedem Deployment erfolgen. Dazu fügen wir ausserhalb von <code>namespace :drupal do … end</code> folgende Zeilen ein:</p> <pre><code>after 'deploy:symlink' , 'drupal:symlink' after 'deploy:setup' , 'drupal:setup' </code></pre> <p>Nach jedem <code>deploy:symlink</code>, soll also auch ein <code>drupal:symlink</code> gemacht werden. Man kann es sich fast denken, <code>before</code> gibt es natürlich auch. </p> <p>Fertig.</p> <h4>Bonus Level: Drupal Cache Leeren</h4> <p>Es liegt auf der Hand, dass man mit Capistrano auch andere Aufgaben, die nicht zwingend zum Deployment gehören, automatisieren lassen kann. Wir haben gesehen, dass wir mit <code>run "command"</code> ganz einfach Befehle auf dem Server ausführen können – warum nicht einen Schritt weiter gehen und zum Beispiel mit <a href="http://drush.ws/">Drush</a> den Cache auf dem Server leeren? </p> <p><strong>Achtung</strong>: wenn Du noch nie von <code>$PATH</code> gehört hast und nicht weisst, was es damit auf sich hat, dann könnte der folgende Teil etwas schwer zu verstehen sein. Oder gehe direkt zur <a href="#zusammenfassung">Zusammenfassung</a></p> <p>Wenn Drush auf dem Server eingerichtet ist, geht das ganz einfach:</p> <pre><code>task :clear_cache do run "drush cc all" end </code></pre> <pre><code>$ cap drupal:clear_cache * executing \`drupal:clear_cache' * executing "drush cc all" servers: ["vortrieb.net"] [vortrieb.net] executing command *** [err :: vortrieb.net] sh: drush: command not found command finished in 82ms failed: "sh -c 'drush cc all'" on vortrieb.net </code></pre> <p>Hoppla. <code>drush</code> wurde nicht gefunden. Ganz so einfach ist es also doch nicht?</p> <p>Das Deployment soll natürlich möglichst schnell gehen, deswegen wird eine <code>.bashrc</code> oder <code>.zshrc</code> nicht geladen, sodass unser <code>$PATH</code> eventuell ziemlich leer ist und <code>drush</code> folglich nicht gefunden werden kann.</p> <p>Aber zum Glück haben die Capistrano-Leute auch daran gedacht. </p> <pre><code>set :default_environment, { 'PATH' => "$HOME/bin/:/package/host/localhost/php-5/bin/:$PATH:" } </code></pre> <p>Die Drush-bin liegt bei uns in <code>~/bin/</code> und wir brauchen für Drush mindestens PHP 5.2.0. Wir fügen also zusätzlich noch den Pfad zur aktuellen PHP-Version hinzu, die bei Überspace in <code>/package/host/localhost/php-5/bin/</code> liegt.</p> <p>Das reicht leider noch immer nicht. <code>drush</code> muss im Root-Ordner einer Drupal-Instanz ausgeführt werden und das Working-Directory ist das, was wir unter <code>:deploy_to</code> angegeben haben. Also müssen wir noch ins Verzeichnis des aktuellen Releases wechseln.</p> <p>Also noch einmal:</p> <pre><code>task :clear_cache do run "cd #{latest_release} && drush cc all" end </code></pre> <pre><code>$ cap drupal:clear_cache * executing `drupal:clear_cache' * executing "ls -x /var/www/virtual/vortrieb/test/releases" servers: ["vortrieb.net"] [vortrieb.net] executing command command finished in 80ms * executing "cd /var/www/virtual/vortrieb/test/releases/20111208131850 && drush cc all" servers: ["vortrieb.net"] [vortrieb.net] executing command ** [out :: vortrieb.net] *** [err :: vortrieb.net] 'all' cache was cleared [success] </code></pre> <p>Und um das ganze abzuschliessen, leeren wir den Cache nun nach jedem Deployment.</p> <pre><code>after 'deploy', 'drupal:clear_cache' </code></pre> <h3 id="zusammenfassung">Zusammenfassung</h3> <p>Wir können nun ganz normal mit unserer Versionsverwaltung weiterarbeiten und mit <code>$ cap deploy</code> die aktuelle Version unserer Drupal-Seite aus dem Master-Branch auf unseren Server schieben lassen.</p> <p>Bei jeder neuen Drupal-Seite müssen wir nun lediglich ein paar Werte in unserer <code>deploy.rb</code> anpassen und schon können wir Capistrano auch dort benutzen. Und wir haben gesehen, dass es überhaupt kein Problem ist das Deployment so anzupassen, dass wir <strong>Capistrano praktisch mit jedem CMS, Framework oder dergleichen einsetzen können</strong>. </p> <p>Die komplette <code>deploy.rb</code> mit erklärenden Kommentaren gibt es auf <a href="https://gist.github.com/1443355">gist.github</a>.</p> <h4>Weiterführende Links</h4> <ul> <li><a href="https://github.com/capistrano/capistrano">Capistrano auf Github</a></li> <li><a href="https://gist.github.com/1443355">Das fertige Recipe</a></li> <li><a href="https://github.com/leehambley/railsless-deploy/">Railsless Capistrano</a>: entfernt alle Railsisms von Capistrano.-</li> <li><a href="https://github.com/mpasternacki/capistrano-documentation-support-files/raw/master/default-execution-path/Capistrano%20Execution%20Path.jpg">Default Behaviour</a> visualisiert.</li> <li><a href="https://github.com/capistrano/capistrano/wiki/">Capistrano Dokumentation</a></li> <li><a href="http://www.ruby-lang.org/de/">Ruby</a></li> <li><a href="http://rubygems.org/">RubyGems</a></li> <li><a href="http://drush.ws/">Drush: Command-Line shell für Drupal</a></li> </ul> </article> <article> <h1>Rezension: Drupal 7 – Das Praxisbuch für Ein- und Umsteiger</h1> <p>Andreas Dantz — Tue, 08 Nov 2011 13:05:19 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p> Drupal ist für Anfänger schon eine Herausforderung. Viele Dinge funktionieren anders, als bei anderen Content-Management-Systemen und Module braucht man im Prinzip immer. Nur welche und wofür?</p> <p>Das Buch schneidet alle wichtigen Themen für Drupal-Einsteiger an und stellt die für die häufigsten Anwendungsfälle benötigten Module und Einstellungen ausführlich vor. Ich würde das Buch daher jedem Empfehlen, der seine ersten Schritte in Drupal wagt. Ein wenig Vorkenntnis im Umgang mit Websites schadet dabei sicher nicht.</p> <p>Mein einziger Kritikpunkt ist, dass dem Leser zwar manchmal verschiedene Lösungsansätze für ein Problem aufgezeigt werden, aber zu wenig Hilfestellung bei der Entscheidung gegeben wird. Hier hätte es geholfen kurz Beispiele anzureißen oder die entsprechenden Passagen mit mehr eigener Meinung zu würzen. Ansonsten bekommt der Leser alle wichtigen Punkte vorgekaut und kann sich schon während des Lesens gut an einer eigenen Testinstallation versuchen. Wer nach dem Lesen des Buchs den Sprung geschafft, sich selbst durch den Drupal-Modul-Dschungel zu schlagen, den sehen wir dann hoffentlich im <a href="http://dce12.drupaletics.de/">Februar in Essen</a>.</p> </article> <article> <h1>Digitale Rechnungen jetzt auch ohne Signatur</h1> <p>vortrieb — Wed, 28 Sep 2011 11:43:01 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p> Bisher war es in Deutschland notwendig Rechnungen, die zum Vorsteuerabzug berechtigen sollen, digital zu signieren und als Empfänger diese Signatur zu überprüfen. Das entfällt nun alles. Ein einfaches PDF genügt. Wir haben bisher der Einfachheit halber jede Rechnung ausgedruckt, frankiert, eingetütet, weggetragen, von kleinen gelben Autos abholen und von fremden verteilen lassen. Das neue Gesetz sollte einigen Bäumen das Leben retten und unser Vorrat an Briefumschlägen und -papier wird nun eine ganze Ecke länger halten.</p> </article> <article> <h1>Was bisher geschah</h1> <p>Andreas Dantz — Thu, 25 Aug 2011 15:19:07 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p>Seit dem letzten Beitrag hier ist eine Menge Wasser die Weser herabgeflossen. Wir hatten wirklich viel zu tun. Zugegeben eine bescheidene Ausrede, aber immerhin ist sie wahr.</p> <p>Um wieder anzuschieben, dass hier Regelmäßig etwas passiert, möchte ich kurz die vergangenen Monate zusammenfassen. </p> <h3>Unternehmensphilosophisches</h3> <p>Wir haben unseren Umgang mit uns und mit unseren Projekten geändert. Wir sind jetzt selektiver bei der Auswahl unserer Projekte. Aufträge abzulehnen war noch nie einfach und mehr Aufträge abzulehnen ist nicht einfacher. So können wir aber die Dinge, die wir machen, besser Planen und haben sogar mehr Spaß dabei. Wir werden das in Kürze noch genauer Ausführen. Ehrlich.</p> <h3>Arbeitstechnisches</h3> <p>Wir wollen in Kürze diese Seite auch mal einem mittelschweren Update unterziehen, damit die Referenzen mal wieder auf einem aktuellen Stand sind.</p> <p>In der Zwischenzeit mal eine kleine Zusammenfassung: Neben den üblichen Auftragsarbeiten und dem Freelancing für Agenturen haben wir im Frühjahr einmal die Website von kingdom of sports gerelaunched (das ist in Agenturen tatsächlich ein Wort!). Im gleichen Atemzug haben wir ihnen auch noch die Kampagnenmicrosite zur Sommeraktion „Beweg den faulen Sack“ umgesetzt, die von einer jungen, aufstrebenden Hamburger Agentur entsonnen wurde.</p> <p>Außerdem war da noch unser Ausflug zu den Landschaftsbearbeitungsmaschinen für die Firma ISEKI, deren Website in einer größeren Aktion erneuert (nein, ich schreibe nicht noch einmal »relaunchen«) wurde.</p> <h3>Zukünftiges</h3> <p>Neben der Tatsache, dass wir mit einem Zeh (dem großen Onkel) das Wasser der iPhone-Entwicklung testeten, freuen wir uns natürlich weiterhin auf großartige Projekte, nette Konferenzen, liebe Kunden und regelmäßige Blogposts.</p> <p>Außerdem wollen wir diese Website, wie bereits erwähnt, mit neuen Fotos, Referenzen, Profilseiten, aktuellen Texten und etwas Spielkram erweitern. Aber ihr wisst ja: des Schusters Kinder haben die ungepflegtesten Websites.</p> <p>Bis bald.</p> </article> <article> <h1>Drupal Sieben.</h1> <p>Andreas Dantz — Wed, 05 Jan 2011 14:12:56 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p>Wir haben uns etwas länger gedulden müssen, als uns lieb war. Aber soeben ist Drupal 7 in der ersten offiziellen Version erschienen.</p> <p>Natürlich haben wir schon ein wenig mit den Vorabversionen herumgespielt und wissen, was uns zukünftig erwartet. Eine kurze Zusammenfassung der Punkte, die uns am meisten überzeugt haben. </p> <h3>Administration</h3> <p>Das neue Navigationskonzept für den Administrationsbereich macht die Pflege der Website für unsere Kunden noch einfacher.</p> <h3>Drupal Fields</h3> <p>Es wurden wieder einige Funktionen in den Drupal-Kern übernommen, die bislang von Hand installiert werden mussten. In erster Linie springen die Drupaleignen Felder ins Auge, die sehr große Teile des Content Construction Kit übernehmen und Drupal somit von Haus aus deutlich flexibler und leistungsfähiger machen.</p> <h3>Neuer Datenbanklayer</h3> <p>Ohne hier zu weit in Nerdgeschwafel abschweifen zu wollen, aber es werden jetzt mehr Datenbanken unterstützt, aktuellere Funktionen können genutzt werden. So wird das Ganze Leistungsfähiger und dabei noch einfacher. Ein Vorteil zum Beispiel, wenn Ihre Website Daten von anderer Stelle importiert.</p> <h3>Semantic Web (RDFa)</h3> <p>Drupal bringt jetzt ebenfalls im Kern die Möglichkeiten mit, die Inhalte Ihrer Website semantisch auszuzeichnen. Das bedeutet, dass Datenzusammenhänge auch von Maschinen erfasst werden können. Damit ergeben sich unzählige neue Möglichkeiten und die Tatsache, dass Suchmaschinen besser verstehen können, was auf Ihrer Website passiert, ist nur der Anfang.</p> <h3>Technisches Zeug</h3> <p>Auch sonst wurde viel am technischen Unterbau geschraubt. Neue Versionen von jQuery werden mitgeliefert, jQuery UI ist jetzt ebenfalls dabei, viele Funktionen sind flexibler und mächtiger geworden und auch für das Entwickeln von Themes wurde vieles erleichtert und verbessert.</p> <h3>Das große aber</h3> <p>So schön Drupal 7 daherkommt und so sehr wir uns darüber freuen, gilt es auch zu beachten, dass Drupal 7 noch etwas grün hinter den Ohren ist. Trotz einer langen Testphase, wird es sicher gerade am Anfang häufiger Updates geben. Außerdem sind noch längst nicht alle Module für die neue Version angepasst. Hier scheint das Tempo aber wesentlich höher zu sein, als damals bei der Umstellung von Drupal 5 auf Version 6. In den nächsten Monaten sollten aber die meistbenutzten Module in einer stabilen Version für Drupal 7 zur Verfügung stehen.</p> <p>Für bestehende Seiten auf Basis von Drupal 6 gibt es ebenfalls zu beachten, dass neue Drupal-Versionen inkompatibel zueinander sind. Es gibt zwar Importscripte, um eine Seite zu aktualisieren. Wie gut das automatisch klappt, hängt aber stark von der Website ab.</p> <p>Wir freuen uns auf viele spannende Projekte mit dem neuen System und warten gespannt auf Ihre Anfrage, <a href="http://drupal.org/drupal-7.0/de">Drupal 7</a> für Sie einsetzen zu dürfen.</p> </article> <article> <h1>Optimierte Website statt App</h1> <p>Andreas Dantz — Thu, 18 Nov 2010 10:14:30 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p>Aktuell versucht nahezu jede Website eine iPhone- und/oder iPad-App bei Apple hinter die virtuelle Theke zu bekommen. Ich halte das in vielen Fällen für Kurzsichtig. </p> <p>Zweifellos können Apps in vielen Fällen sinnvoll sein und eine gute Ergänzung darstellen. Aber ein Großteil der Benutzer solcher Geräte benutzt kaum oder keine Apps und ein noch größerer Teil benutzt andere Geräte. Gibt es da nicht eine bessere Alternative?</p>  <p>Gerade mit einem beschränkten Budget wäre es doch sinnvoller dieses Geld zu investieren, um die Website zu optimieren. Man erreicht mit den Änderungen eine deutlich breitere Masse und auch die Besucher, die nur den Browser ihres iPads benutzen.</p> <p>Gerade für die neue Welle an Tablet-Computern, die auf uns zuschwappt, ist eine optimierte Website deutlich mächtiger als eine durchschnittliche App. Ich persönlich sehe auch nicht ein für gelegentliches Aufrufen einer Website, das einmalige Buchen eines Hotels oder das Abrufen aktueller Sportergebnisse mein iPad mit unzähligen Apps zuzumüllen.</p> <p>Die Zeit <a href="http://blog.zeit.de/zeitansage/2010/11/17/finger-statt-maus-www-zeit-de-jetzt-auch-fur-das-ipad-und-weitere-tablets-optimiert_542">zeigt heute vorbildlich</a>, wie so etwas auch aussehen kann. So steht ab sofort für Tablet-PCs eine angepasste Website zur Verfügung. Man muss dafür nichts weiter tun, als die Seite mit einem solchen Gerät aufzurufen.</p> <p>Die Gestaltung ist noch reduzierter, die Lesbarkeit des Textes genau für diese Gerätekategorie angepasst, Bildergalerien lassen sich per Wischgeste bewegen und viele weitere Anpassungen. Außerdem funktioniert das ganze auch, wenn man einem Link auf einer anderen Website oder aus einer anderen App folgt.</p> <p>Es ist schön zu sehen, dass es auch deutsche Zeitungen gibt, die sich innovativ und mit dem Leser im Blick weiter entwickeln.</p> </article> <article> <h1>Vortrieb 3.0</h1> <p>Andreas Dantz — Tue, 09 Nov 2010 17:06:20 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div>  <h3>Konzept</h3> <p>Die neue Seite war schon lange überfällig, gerade die Texte waren so sehr veraltet, dass sie noch nicht mal die Tatsache berücksichtigten, dass wir inzwischen schon eine ganze Weile zu zweit hier sitzen. Außerdem wollten wir auch in der Gestaltung der einzelnen Unterseiten freier sein und uns so in Zukunft stärker auf der Website auszuleben.</p> <h3>Erste Mockups</h3> <p>Die ersten Skizzen für das neue Design entstanden auf der diesjährigen Webinale in Berlin. Neben einigen kleinen Experimenten, wie problemlos sich eine Google Map beispielsweise mit CSS drehen lässt. Leider kam dann massenhaft Arbeit dazwischen und die eigene Website blieb etwas auf der Strecke.</p> <h3>Illustrationen</h3> <p>Um ein einheitliches Erscheinungsbild – gerade bei der Leistungsübersicht – zu gewährleisten, fiel die Wahl auf eigene Illustrationen, die aber auch mit dem gebührenden Mangel an Seriösität daher kommen sollten. Die Wahl fiel auf <a href="http://shortriver.de/blog/">Mme Ruisseau à Court</a> als Illustratorin, die unsere Ideen perfekt visualisierte.</p> <h3>Finales Design</h3> <p>Mit den fertigen Illustrationen ging es dann an das finale Design, das wir in einer Kombination von Photoshop und HTML & CSS erstellten und welches dem entspricht, was hier um diesen Blogbeitrag herum zu sehen ist.</p> <h3>Drupal</h3> <p>Zu guter Letzt haben wir das Design dann nur noch in ein Drupal-Template verzaubern, die alten Blogbeiträge importieren und noch ein bisschen Code-Magie hier und da anwenden müssen – fertig ist die neue Website.</p> <p>Wir hoffen sie gefällt?</p> </article> <article> <h1>Des Schusters Kinder… Vortrieb 3.0</h1> <p>Andreas Dantz — Wed, 21 Jul 2010 11:42:36 +0000</p> <p>Zwischen der ganzen Arbeit, die im Moment ansteht (von wegen Sommerloch), haben wir mit der Arbeit an unserer eigenen Seite angefangen. Vielmehr mit der Planung unserer neuen Website. Es gibt einige Gründe, warum wir uns das jetzt auch noch auferlegen.</p>  <h3>Inhalt</h3> Die jetzige Website drückt nicht aus, was wir wirklich machen und wir wollen schärfer definieren, was wir machen und was nicht. „Wir“ ist der nächste Punkt. Seit wir zu zweit sind müssten eigentlich alle Texte entsprechend angepasst werden. Außerdem ist Nils außer mit <a href="http://vortrieb.net/journal/gestatten-nils-riedemann">einem Blogpost</a> nicht auf der Seite erwähnt. Eine „Teamdarstellung“ ist also ebenfalls dringend notwendig. <h3>Design</h3> Die jetzige Gestaltung ist eine umgefärbte Fassung der alten Website, die noch vor der aktuellen CI entstanden ist. Sie passt nicht mehr zu unserem aktuellen Auftritt. Auch hier besteht also Handlungsbedarf. <h3>Technik</h3> Die jetzige Seite läuft mit Drupal 6 und das wird auch für die neue Website beibehalten bleiben. Auf der neuen Seite wollen wir allerdings mehr Funktionen des CMS nutzen und bei der Gelegenheit auch das Frontend auf HTML5 umstellen. <h3>Unter Druck entstehen Websites</h3> Warum wir das jetzt hier im Blog breittreten? Einerseits wollen wir einige der Entscheidungen, die wir im Rahmen des Redesigns treffen werden hier vorstellen und diesen Beitrag als Einleitung benutzen. Auf der anderen Seite haben interne Projekte oft das Problem zugunsten von Kundenprojekten zurückgestellt zu werden. Mit diesem Beitrag wollen wir uns selbst ein bisschen unter Druck setzen weiter an der neuen Website zu arbeiten. </article> <article> <h1>Wir haben einen Gewinner</h1> <p>Andreas Dantz — Fri, 02 Jul 2010 09:52:12 +0000</p> <p> Der 5 Kommentar war der von Florian, dem ich hiermit herzlich gratuliere.</p> </article> <article> <h1>Sonnenseiten bei den Webkrauts</h1> <p>Andreas Dantz — Mon, 14 Jun 2010 09:18:41 +0000</p> <p> Als erster Artikel erscheint heute ein Beitrag von mir zum Thema <a href="http://www.webkrauts.de/2010/06/14/sonnenseiten-ansprache/">Ansprache der Websitebesucher</a>.</p> </article> <article> <h1>Intellibook zu verschenken</h1> <p>Andreas Dantz — Mon, 14 Jun 2010 08:25:33 +0000</p>  <p>Ich habe das Gerät einmal eingeschaltet (<a href="http://twitter.com/Vortrieb/status/15095641457">Quelle</a>), das WLAN nicht zum laufen bekommen und wieder in den Karton verpackt. Ich muss fairerweise dazu schreiben, dass sich meine Begeisterung stark in Grenzen hält (<a href="http://twitter.com/Vortrieb/status/15104846736">Quelle</a>). Darum habe ich eine Weile überlegt, ob ich wirklich ein Gerät verlosen soll, von dem ich wenig begeistert bin.</p> <p>Allerdings gibt es ja vielleicht Menschen da draußen, die das komplett anders sehen und sich über ein Intellibook freuen. Bevor es hier also im Regal verstaubt, verlose ich es trotzdem.</p> <p><strong>Update 30.06.2010</strong></p> <p>Das Gewinnspiel ist beendet. Die Auslosung erfolgt am Freitag Vormittag.</p> <p class="footnote">Das Gewinnspiel endet am 30.6.2010 um 12:00 Uhr. Der Rechtsweg ist ausgeschlossen. Copyright d. Bildes: S&S Media Group</p> </article> <article> <h1>Gestatten, sein Name ist Nils</h1> <p>Andreas Dantz — Fri, 11 Jun 2010 09:20:26 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div> <p>Es ist soweit. Zum 21.6. explodiert die Vortrieb-Belegschaft. Das wird der erste Arbeitstag von Nils Riedemann unter dem cyanfarbenen Adler sein. In genau 10 Tagen ändert sich hier also einiges. Aus dem ich wird ein <a href="http://vortrieb.net/journal/aussendarstellung-warum-ich-nicht-wir-bin">wir</a>, aus dem Einzelkämpfer eine kleine Webagentur.</p>  <p>Nils bringt einen Haufen Vorkenntnisse bei der Programmierung in PHP und Ruby on Rails mit. Umgekehrt bedeutet das für mich, dass ich mich zukünftig noch stärker aufs Front-End konzentrieren kann. Die Gesamtexpertise Vortriebs wächst also deutlich an.</p> <p>Ich bin einigermaßen aufgeregt und gespannt, was die Zukunft bringt.</p> <p>Herzlich willkommen, Nils.</p> </article> <article> <h1>Die Woche in Links: KW 20</h1> <p>Andreas Dantz — Fri, 21 May 2010 10:21:15 +0000</p> Im Laufe einer Woche stolpert man ja über den ein oder anderen Artikel im Internet. Ich habe diese Woche die Interessanten gesammelt. <h3>Das Problem des vielen Geldes</h3> <p>Jason Fried über Diaspora, ein geplantes Projekt für ein dezentrales, offenes Social-Network und die Probleme die der überwältigende Spendenerfolg mit sich bringt. — <a href="http://37signals.com/svn/posts/2330-diasporas-curse">Signal vs. Noise</a></p> <h3>First Person UI am Beispiel der Navigationssoftware</h3> <p>Wann kann es sinnvoll sein, abstraktionsebenen aus Benutzeroberflächen zu entfernen und wann ist es sinnvoll aus der Ego-Perspektive darzustellen? — <a href="http://www.lukew.com/ff/entry.asp?1101">LukeW</a></p> <h3>Minimalistisches Webdesign mit Beispielen</h3> <p>Das Smashing Magazine zeigt Beispiele von sehr reduziertem Design. — <a href="http://www.smashingmagazine.com/2010/05/13/principles-of-minimalist-web-design-with-examples/">Smashing Magazine</a></p> <h3>Das neue Tweetie Icon</h3> <p>Tim Van Damme über das Icon von Twitter für's iPhone und warum die erste Intention eines Designers nicht immer gutes Design sein muss. — <a href="http://maxvoltar.com/archive/about-an-icon">Maxvoltar</a></p> <h3>Werkzeuge und Gedanken für Entwickler</h3> <p>Christian Heilmanns Vortrag auf der FOWA Dublin. — <a href="http://www.wait-till-i.com/2010/05/16/fowa-dublin-powerful-tools-that-you-need-and-probably-dont-know-about/">wait-till-i.com</a></p> <h3>Zeit in Webagenturen</h3> <p>Die Jungs von OnWired (er-)klären die Zeit in Webagenturen und den Unterschied zwischen Mann-, Frau- und Arbeitsstunden. — <a href="http://onwired.com/blog/time-keeps-on-tickin-tickin-tickin/">onwired</a></p> <h3>HTML5 Unterstützung in Browsern erkennen</h3> <p>Ziel ist nicht zu erkennen, ob ein Browser HTML5 unterstützt, sondern welche Teile des HTML5-Standards. — <a href="http://diveintohtml5.org/detect.html">Dive into HTML5</a></p> <h3>Die erste tiefschürfende Analyse von VP8</h3> <p>Unmittelbar nach Googles Ankündigung, VP8 offen zu legen, die erste Analyse mit dem traurigen Ergebnis: „VP8 is not ready for prime-time; the spec is a pile of copy-pasted C code and the encoder’s interface is lacking in features and buggy.“ — <a href="http://x264dev.multimedia.cx/?p=377">x264dev</a></p> <h3>Piwik stellt seine neue Oberfläche zur Diskussion</h3> <p>Die Open-Source-Statistik Piwik stellt jetzt auch offiziell das geplante Design zur Diskussion und zeigt eine deutliche Verbesserung. — <a href="http://piwik.org/blog/2010/05/piwik-user-interface-new-design-give-your-feedback/">Piwik</a></p> <h3>iPhone App-Verkäufe aufgeschlüsselt</h3> <p>Für alle, die immer noch vom schnellen Reichtum träumen. — <a href="http://techcrunch.com/2010/05/16/iphone-app-sales-exposed/">Techcrunch</a></p> <h3>Warum nicht Apple gegen HTML5?</h3> <p>Warum kämpft Apple gegen Flash aber für HTML5, wenn sich damit der AppStore genauso umgehen lässt? — <a href="http://www.appleoutsider.com/2010/05/18/cocoa-flash-and-html5/">Appleoutsider</a></p> </article> <article> <h1>Auch Webdesigner verschicken Briefe</h1> <p>Andreas Dantz — Fri, 09 Apr 2010 11:24:28 +0000</p> <div class="field field-type-filefield field-field-blog-image"> <div class="field-items"> <div class="field-item odd"> </div> </div> </div>  </article> <article> <h1>Kleine Änderungen und die Folgen</h1> <p>Andreas Dantz — Wed, 07 Apr 2010 08:11:11 +0000</p> Ich habe vor kurzem angefangen einige Veränderungen an dieser Website zu planen und die ersten Kleinigkeiten auch schon umzusetzen. Am 23. März habe ich hier nicht nur die Farben umgestellt auf das neue Cyan, sondern auch den Inhalt der Startseite erweitert. Neben der Box zum Umzug, steht auf der Startseite nun eine kleine Box mit den letzten Einträgen hier im Journal. Die Idee war, dem Journal etwas mehr Aufmerksamkeit zukommen zu lassen. Nach den ersten zwei Wochen veröffentliche ich die Ergebnisse, um den Bogen zum <a href="http://vortrieb.net/journal/das-maerchen-vom-relaunch">Beitrag über Website-Pflege</a> zu schlagen. <h2>Das Ergebnis</h2> Für die letzten zwei Wochen lässt sich eine deutliche Verbesserung feststellen. Nicht nur haben sich die Besucherzahlen insgesamt in den letzten zwei Monaten deutlich verbessert. Seit der Änderung ruft der Besucher dieser Website im Schnitt 3,88 Seiten auf. Im Vergleich zu den 2,81 Seiten vorher eine <strong>Verbesserung um knapp 38%</strong>. Außerdem ist die Absprungrate um ca. 10% gesunken. <h2>Fazit</h2> Mir ist durchaus klar, dass diese Änderung nicht sonderlich spektakulär ist und die Werte auch hinterher nicht überragen. Mir geht es in erster Linie an einem anschaulichen Beispiel zu zeigen, wie man mit kleinen, gezielten Änderungen Websites weiterentwickelt und die Statistiken nutzt um den Erfolg einzelner Änderungen zu bewerten. </article> <article> <h1>Vortrieb im facebook</h1> <p>Andreas Dantz — Tue, 06 Apr 2010 08:21:49 +0000</p> Seit einigen Wochen gibt es für Vortrieb eine eigene Seite im Facebook. Seit gestern hat sie die Seite die Marke von 50 Fans erreicht. Dadurch qualifiziert sie sich für eine eigene URL. So wird aus <a href="http://www.facebook.com/pages/Bremen-Germany/Vortrieb/327894451827" title="http://www.facebook.com/pages/Bremen-Germany/Vortrieb/327894451827">http://www.facebook.com/pages/Bremen-Germany/Vortrieb/327894451827</a> ab sofort <a href="http://facebook.com/vortrieb" title="http://facebook.com/vortrieb">http://facebook.com/vortrieb</a>. Wenn das mal keine Steigerung der Lebensqualität ist. Wer mag ist herzlich eingeladen, die kleinen Notizen und Diskussionen aus dem Büro dort zu verfolgen. </article> <article> <h1>Das Märchen vom Relaunch</h1> <p>Andreas Dantz — Mon, 29 Mar 2010 10:20:18 +0000</p> Kunden finden sich häufig in der Situation, dass ihnen ein Relaunch nahezu aufgezwungen wird. Egal ob man sich als Neukunde an die Agentur wendet oder Bestandskunde ist. Das Märchen vom Relaunch mit dem alles besser wird, ist ein häufig Erzähltes. <h3>Das Problem</h3> In regelmäßigen Abständen wird der alte Ballast über Bord geworfen und eine völlig neue Website konzipiert. Schmeißt man bei der Neuauflage aber jedes Mal die Komplette Website über Bord, kann man – zumindest theoretisch – alles besser machen als vorher. In der Praxis sieht das aber anders aus. Denn man wirft auch die Dinge weg, die sich bewährt haben. Jede neue Website hat ein paar Ecken und Kanten. <h3>Die Alternative: regelmäßige Pflege</h3> Pflegt und verbessert man seine Internetpräsenz dagegen regelmäßig, ist der Erfolg deutlich größer. Voraussetzung ist natürlich die regelmäßige Analyse der bestehenden Website. Welche Unterseiten werden häufiger aufgerufen? Wo gehen Besucher verloren? Welche Inhalte sind veraltet? Wo muss die Darstellung etwas zeitgemäßer werden? Es sind viele kleine Stellschrauben, an denen sich jederzeit drehen lässt. Auch kleine Änderungen, zum Beispiel die Umbenennung von Menüpunkten kann man testen, mit der bisherigen Variante vergleichen und dann die bessere Variante einsetzen. Gern genommenes Beispiel ist die <a href="http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page">Veränderung der Überschrift auf der Registrierungsseite</a>, die Highrise 30% mehr Neuabschlüsse brachte. Neben der Optimierung der eigentlichen Website hat die regelmäßige Pflege noch einen anderen Vorteil. Interesse des Besuchers. Erweitert sich der Inhalt regelmäßig, oder verbessert sich das Angebot mit der Zeit, wird auch das Interesse der Besucher zunehmen, mal wieder vorbei zu schauen. Nicht erst zum nächsten Relaunch. <h3>Klarstellung</h3> Damit das nicht falsch verstanden wird, in vielen Fällen ist ein kompletter Neuaufbau durchaus richtig und ohne Alternative. Aber da draußen sind jede Menge Websites die eine gute Basis für Weiterentwicklung sind. Oft genügen vielleicht ein paar kleine Verbesserungen (optisch wie inhaltlich) und regelmäßige Wartung. Preislich hält sich die Pflege meistens mit regelmäßigen Relaunches in etwa die Waage. Beim Erfolg allerdings nicht. </article> <article> <h1>Vortrieb-Logo 2010</h1> <p>Andreas Dantz — Mon, 08 Mar 2010 09:29:25 +0000</p> Vortrieb bekommt ein neues Logo. Passend zum Umzug am 1.4. wird sich der gesamte Auftritt optisch ändern. Der alte Schriftzug hat seinen Dienst getan und damit in den Ruhestand verabschiedet. Auch in Anbetracht der Veränderungen und Neuerungen, die in den nächsten Monaten auf dem Plan stehen, mussten die alten Zöpfe ab. Pünktlich zum Umzug und der damit verbundenen Neuauflage der Geschäftsausstattung wollte ich diese Überarbeitung abgeschlossen haben. Insgesamt köchelte diese Idee eines Signets eine ganze Weile. Noch vor der Gründung Vortriebs im Herbst/Winter 2008 gab es erste Scribbles des Adlers. <h3>Inhalt</h3> Warum der Adler? Ich könnte mir jetzt etwas philosophieren, mit der Angriffsstellung des Adlers, konzentrierter und zielgerichteter Kommunikation, und so weiter. Im Wesentlichen gab es fünf Punkte, die für den Adler sprachen: <ul> <li>Adler haben einen ordentlichen Vortrieb</li> <li>die Pose, in der wir den Adler hier beobachten ist eher unüblich in einem Logo und bietet Wiedererkennungswert</li> <li>er greift die Form des V wieder auf</li> <li>ich nutze einen Adler auch als mein privates Logo</li> <li>er ist in Bewegung</li> </ul> <h3>Technik/Handwerk</h3> Typografisch hat die bisherige Sauna/Univers-Kombination ausgedient. Stattdessen wird die Neo Sans in Bold und Light den Firmennamen schmücken. Auch farblich gibt es Änderungen hin zu mehr Klarheit. Statt des Dunkelblau setzt das neue Logo auf eine Kombination aus Cyan/Schwarz. Dies ist mehr oder weniger die Weiterentwicklung der bisherigen von Hell- und Dunkelblau. <h3>Ausblick</h3> Visitenkarten und Briefpapier sind soeben in die Presse gegangen und sollten rechtzeitig zum Umzug bereit stehen. Die Website wird vorerst nur ein leichte Überarbeitung mit den neuen Farben und dem Logo erfahren. Zum Schluss möchte ich mich noch bei <a href="http://www.silberpuls.de">Ben</a> bedanken, der mir bei der Ausarbeitung des Logos und der Geschäftsausstattung geduldig zur Seite stand. Ich bin gespannt auf Meinungen und Kritik zum neuen Logo. </article> <article> <h1>Umzug: Alles neu macht der April</h1> <p>Andreas Dantz — Fri, 26 Feb 2010 12:14:19 +0000</p> Traditionell ist der 1. April ein unterhaltsamer Tag. In diesem Jahr freue ich mich neben durchsichtigen Scherzen vor allem auf mein neues Büro. Gestern unterzeichnete ich den Mietvertrag für die neuen Vortrieb'schen Hallen. Die neue Adresse lautet ab April: <div class="address"> <p><strong>Vortrieb – Büro für Netzpräsenz</strong><br /> Bremer Medienbüro<br /> Elsasser Straße 27<br /> 28211 Bremen</p> </div> Das neue Büro ist in erster Linie deutlich größer als die Abstellkammer aus der ich das vergangene Jahr arbeitete. In zweiter Linie ist es Teil einer wesentlich größeren <a href="http://www.bremer-medienbuero.de/">Bürogemeinschaft</a> als zuvor. Somit gibt es auch um mich herum etwas mehr Bewegung. Ich freue mich nicht nur über das neue Büro und das Mehr an Platz, auch eine neue Geschäftsausstattung wird fällig. Die alte kann ich auch nicht mehr sehen. Dazu kommen noch ein paar kleinere Änderungen, die in dem Zuge noch geplant sind. Mehr dazu gibt es in den verbleibenden knapp 5 Wochen aus dem alten Büro. </article> <article> <h1>vortrieb.net</h1> <p>Andreas Dantz — Thu, 07 Jan 2010 12:15:51 +0000</p> Mit dem heutigen Tag ist endlich Schluss mit dem ewig langen <a href="http://vortrieb.net/">www.vortrieb-webdesign.de</a> in der Adresszeile. Vor allem aber auch mit den entsprechend langen E-Mail-Adressen. Denn mit der erfolgreichen Übernahme der Domain <a href="http://vortrieb.net/">vortrieb.net</a> werden zukünftig bei jeder Eingabe satte 9 Zeichen gespart. Vier weitere wenn man das www. mitzählt, welche in Zukunft ebenfalls aus der offiziellen Schreibweise verschwindet. Die alten Adressen funktionieren natürlich noch und leiten entsprechend weiter. Ich hoffe, dass die Umstellung bei niemandem Probleme verursacht. Ansonsten bitte ich um einen kurzen Kommentar oder eine <a href="/kontakt">Nachricht per Mail</a>. Zusätzlich zur kürzeren Domain ermöglicht mir die neue Adresse auch URL-Spiele wie <a href="http://vortrieb.net/zpraesenz" title="http://vortrieb.net/zpraesenz">http://vortrieb.net/zpraesenz</a>. </article> <article> <h1>Relaunch: Vortrieb 2.0</h1> <p>Andreas Dantz — Mon, 28 Dec 2009 08:00:00 +0000</p> <p>Es hat etwas verzögert, aber nun ist es geschafft. Vortrieb 2.0 ist online und wartet darauf zukünftig ausgebaut und weiterentwickelt zu werden.</p> <p> Es gab eine (sehr lange) Reihe von verworfenen Ideen, wie es bei der Arbeit für sich selbst wohl immer vorkommt. Die neue Version sehe ich aber als Basis für eine flexible und zukunftssichere Website. Technisch ist weitgehend alles beim Alten geblieben. Unter der Haube werkelt Drupal 6, einige neue Module sind hinzugekommen. Den Modulen werde ich noch mal einen eigenen Eintrag widmen. Jetzt geht es erstmal darum, in den nächsten Tagen die letzten Kanten abzuschleifen und ein paar Projekte bei den <a href="/referenzen">Referenzen</a> vorzustellen.</p> <p>Das Ziel der neuen Website soll es sein, dem Inhalt eine größere Bedeutung zukommen zu lassen. Außerdem ist die Flexibilität bei der Darstellung der Inhalte noch größer geworden, so das die Website für zukünftige Erweiterungen bestens vorbereitet ist.</p> <p>Ich hoffe die neue Seite gefällt und freue mich im Journal endlich Kommentare empfangen zu können und bin gespannt auf die hoffentlich auftretenden Diskussionen.</p> </article> <article> <h1>Frohe Weihnachten und vielen Dank für 2009</h1> <p>Andreas Dantz — Wed, 23 Dec 2009 08:00:00 +0000</p> <p>Das erste Jahr Vortrieb neigt sich dem Ende. Genau am 9. Januar erfolgte die Gewerbeanmeldung. Ich möchte allen Geschäftspartnern, Kunden, Ratgebern, Freunden und meiner Familie für ein großartiges Jahr 2009 danken, in dem ich mehr arbeiten durfte (und darf) als erhofft.</p> <p>Ich wünsche allen ein schönes Weihnachtsfest, Entspannung und natürlich einen guten Rutsch in ein interessantes und erfolgreiches Jahr 2010.</p> </article> <article> <h1>This ain't no Disco</h1> <p>Andreas Dantz — Wed, 19 Aug 2009 08:19:36 +0000</p> Wir arbeiten in einer kreativen Branche und verbringen einen Großteil unseres Lebens im Büro. Leider wird in Deutschland viel zu selten Wert darauf gelegt, sich in den Arbeitsräumen wirklich wohlzufühlen. Die Atmosphäre wird von spartanischen Einrichtungen, funktionalen Gegenständen und gerne auch Unordnung bestimmt. Von inspirierend möchte ich dabei gar nicht sprechen. Google hat mit der Inneneinrichtung des Züricher Europaquartiers gezeigt, wie es besser geht. Auch das Blog „This Ain't No Disco“ stellt regelmäßig großartige Büroinneneinrichtungen vor. Sicher sind das Dimensionen, in denen nur wenige planen können. Aber ein bisschen Anregung für eine inspirierende Gestaltung gibt das Ganze schon, oder? <a href="http://picasaweb.google.com/zurich.office.images/ZurichOfficePhotos">Google Zürich</a> <a href="http://www.thisaintnodisco.com/">Blog: This Ain't No Disco</a> </article> <article> <h1>Vier einfache Schritte für effektiveres Arbeiten</h1> <p>Andreas Dantz — Tue, 30 Jun 2009 17:52:24 +0000</p> In der letzten Zeit habe ich mich verstärkt mit dem Zeitmanagement beschäftigt. Ausgelöst wurde das Ganze von zwei Sessions von Christian Ebert auf dem BarCamp Cologne 3 (Videomitschnitte: <a href="http://make.tv/barcampcologne3/show/23917">Session 1</a> & <a href="http://make.tv/barcampcologne3/show/23954">Session 2</a>). Im Anschluss habe ich mich durch David Allens Buch „Getting Things Done“ und einige Fachartikel im Netz und in Zeitschriften gelesen. Leider habe ich längst noch nicht alle Möglichkeiten für eine effektiveres und effizienteres Arbeiten ausgenutzt. Aber die vier Punkte, die bei mir bisher den größten Einfluss auf die Produktivität hatten möchte ich kurz zusammenfassen: <h3>1. Benachrichtigungen ausschalten</h3> Ich habe wirklich alle visuellen und akustischen Benachrichtigungen vom Mailprogramm, RSS-Reader, etc. ausgemacht. Selbst Skype gibt nur bei Anrufen ein direktes Feedback. Es klingt so banal, aber man wird nicht mehr von jeder Mail aus der aktuellen Tätigkeit gerissen und bisher ist auch noch niemand gestorben wenn er Antworten auf seine Mails erst nach einer oder zwei Stunden bekommen hat. Denn jetzt bestimme ich, wann ich diese lese und wann eine natürliche Unterbrechung in meinem Arbeitsfluß erreicht ist. <h3>2. Es gibt genau ein System mit Aufgaben</h3> Es muss ein System her, in das wirklich restlos alle Aufgaben eingetragen werden. Es gibt keine Post-Its am Monitor, einen Zettel mit Aufgaben, eine To-Do-Liste im Rechner. Es muss genau ein System sein, dem man vertraut und man muss es Nutzen. Nur wenn wirklich alle Aufgaben in diesem System eingetragen sind, hat man den Kopf beim arbeiten frei. Solange noch irgendwas im Hinterkopf hat, kann man nicht 100%ig bei der Sache sein, die man eigentlich gerade machen will. <h3>3. Erledige kleine Dinge sofort</h3> Aufgaben, die in weniger als 2 Minuten erledigt sind, werden gar nicht erst in das System aufgenommen, sondern sofort erledigt. <h3>4. Prioritäten beachten</h3> Nur weil gerade jemand angerufen hat und irgendwas erledigt haben will, darf man nicht seine Prioritäten komplett umwerfen. Dieser Punkt ist relativ komplex und wird in den Videos von Christian Ebert m.E. ganz gut angerissen. Ich kann das Befassen mit Zeitmanagement nur empfehlen, es hat mir schon nach kurzer Zeit mehr Zeit eingebracht, als das Lesen gekostet hat. Außerdem führt es dazu, dass ich konzentrierter Arbeiten und dann auch konzentrierter Feierabend machen kann. </article> <article> <h1>Standard CSS-Dateien unter Drupal entfernen</h1> <p>Andreas Dantz — Sat, 30 May 2009 16:20:17 +0000</p>  <ol> <li>nur meine Styles sollen im Front-End angewendet werden</li> <li>die Anzahl der CSS-Dateien reduzieren</li> </ol> <p>Ersteres hängt damit zusammen, dass ich gerne die volle Kontrolle habe, was so passiert. Im Backend kann Drupal gerne machen, was es will. Hier sind die fertigen CSS- und JavaScript-Dateien sogar sehr hilfreich, da sie dafür sorgen, dass alles einigermaßen gut aussieht und funktioniert.</p> <p>Also ist für mich der erste Schritt Front-End und Back-End optisch zu trennen, in dem ich unter admin/settings/admin ein optisch modifiziertes Garland-Theme auswähle.</p> <h3>Die Drupal-Dateien entfernen</h3> <p>Treffender wäre eigentlich: Sie mit nichts überschreiben. Dafür füge ich in der .info-Datei im Theme jede System- und Modul-Datei hinzu, die ich entfernen möchte:</p> <div class="blockcode"><code>stylesheets[all][] = css/node.css stylesheets[all][] = css/defaults.css stylesheets[all][] = css/system.css stylesheets[all][] = css/user.css stylesheets[all][] = css/content-module.css stylesheets[all][] = css/fieldgroup.css stylesheets[all][] = css/system-menus.css</code></div> <p>Das bewirkt, dass Drupal die Systemdateien jetzt mit denen im Ordner <code>css</code> meines Themes ersetzt. Da diese dort nicht vorhanden sind, werden keine Dateien eingebunden und da diese Informationen gecached werden, muss man sich auch nicht um unnötige Dateizugriffe sorgen. Allerdings muss einmal der Cache geleert werden, damit die Änderungen aktiv werden.</p> <p>Alternativ kann man die Ursprungsdateien natürlich auch in das entsprechende Verzeichnis kopieren und anpassen. Dann sollte aber unter admin/settings/performance unbedingt nach der Entwicklung das CSS-Caching aktiviert werden, damit im Produktiveinsatz nur noch eine einzige CSS-Datei geladen und die Anzahl der Anfragen an den Server reduziert wird.</p> </article> <article> <h1>Außendarstellung: Warum ich nicht wir bin</h1> <p>Andreas Dantz — Thu, 12 Feb 2009 10:00:00 +0000</p> In den letzten Jahren habe ich gelernt, dass ein weit verbreiteter Glaube ist, sich selbst möglichst groß verkaufen zu müssen. Einzelpersonen versuchen auf der Website den Eindruck zu erwecken, ein halber Konzern zu sein. Firmen versuchen sich mit abstrusen Mitarbeiterzahlen zu vervielfachen. Die große Frage ist aber: Warum? Oft hat ein solches Bild mit der anzutreffenden Wirklichkeit nichts zu tun. Ich weiß noch wie ich zu meinen ersten Vorstellungsgesprächen in Werbeagenturen ging und riesige Bürokomplexe erwartete. Was bei einem angehenden Mitarbeiter vielleicht noch kein Problem ist, stellt bei Kunden bereits den ersten Glaubwürdigkeitsverlust dar. Dazu kommt noch: Was kann ich gewinnen, wenn Vortrieb jetzt in seiner Außendarstellung 10 Angestellte hat? Ich kann die Situation doch umgekehrt zu meinem Vorteil nutzen und mich als kleiner flexibler Dienstleister verkaufen, der keine riesige Verwaltung zu finanzieren hat. Immer der gleiche Ansprechpartner und alle Teilaufgaben aus einer Hand. Klingt die Wahrheit denn so schlimm? Vortrieb bleibt so lange eine Person, wie wir nur ich sind. </article> <article> <h1>Standard Drupal Module</h1> <p>Andreas Dantz — Wed, 28 Jan 2009 15:24:26 +0000</p> Zur Umsetzung von Websites greife ich häufig zum <abbr title="Content Management System">CMS</abbr> Drupal. Durch seinen strikt modularen Aufbau ist Drupal mit ein wenig Anpassung sehr vielseitig einsetzbar. Eine große Hürde gerade für Anfänger mit Drupal ist das zusammensuchen von den richtigen Modulen. Um anderen den Einstieg ein wenig zu erleichtern, hier eine Auflistung von gut zwei Händen voll Modulen, die von nahezu jeder meiner Drupal-Installationen verwendet werden: Zur Umsetzung von Websites greife ich häufig zum <abbr title="Content Management System">CMS</abbr> Drupal. Durch seinen strikt modularen Aufbau ist Drupal mit ein wenig Anpassung sehr vielseitig einsetzbar. Eine große Hürde gerade für Anfänger mit Drupal ist das zusammensuchen von den richtigen Modulen. Um anderen den Einstieg ein wenig zu erleichtern, hier eine Auflistung von gut zwei Händen voll Modulen, die von nahezu jeder meiner Drupal-Installationen verwendet werden: Zur Umsetzung von Websites greife ich häufig zum <abbr title="Content Management System">CMS</abbr> Drupal. Durch seinen strikt modularen Aufbau ist Drupal mit ein wenig Anpassung sehr vielseitig einsetzbar. Eine große Hürde gerade für Anfänger mit Drupal ist das zusammensuchen von den richtigen Modulen. Um anderen den Einstieg ein wenig zu erleichtern, hier eine Auflistung von gut zwei Händen voll Modulen, die von nahezu jeder meiner Drupal-Installationen verwendet werden: <h3>Content Construction Kit (CCK)</h3> <p>Ein Standard-Modul, dass wahrscheinlich auf fast allen Drupal-Installationen zu finden ist. Hiermit lassen sich bequem neue Inhaltstypen anlegen und bearbeiten.<br> Das <a href="http://drupal.org/project/cck" title="Content Construction Kit (CCK) | drupal.org">CCK</a> kann wiederum mit eigenen Modulen um neue Feldtypen erweitert werden.</p> <h3>Devel</h3> <p><a href="http://drupal.org/project/devel" title="Devel | drupal.org">Devel</a> ist ein Modul mit vielen nützlichen Funktionen für die Entwicklung einer Drupal-Website. Außerdem wird der <a href="http://drupal.org/node/209561">Theme Developer</a> mitgeliefert, der gerade bei den ersten Schritten im <strong>Drupal-Theming</strong> eine große Hilfe ist. Leider kommt es gerade durch die Benutzung des Theme-Developers aber gerne mal zu Problemen auf den Websites. Nach der Entwicklung des Themes bzw. der Website kann das Modul deaktiviert werden.</p> <h3>Google Analytics</h3> <p>Okay, den Google-Analytics-Code kann man auch von Hand einbauen, aber mit dem <a href="http://drupal.org/project/google_analytics" title="Google Analytics | drupal.org">Google-Analytics-Modul</a> ist man unabhängig vom Template und außerdem gibt es noch einige nette Funktionen wie die Möglichkeit, den JavaScript-Code auf dem eigenen Server zu cachen, oder nur bestimmte Nutzergruppen zu tracken.</p> <h3>Meta Tags</h3> <p>Wie der Name schon sagt, gibt das <a href="http://drupal.org/project/nodewords" title="Meta tags | drupal.org">Meta-Tag-Modul</a> detaillierte <strong>Kontrolle über die Meta-Tags</strong> der einzelnen Inhalte</p> <h3>Page Title</h3> <p>Auch bei Page Title ist der Name Programm: Mehr Kontrolle über den Eintrag im <code><title></code>-Tag mit <a href="http://drupal.org/project/page_title" title="Page Title | drupal.org">Page Title</a>. Unerlässlich für jede Suchmaschinenoptimierung</p> <h3>Pathauto</h3> <p><a href="http://drupal.org/project/pathauto" title="Pathauto | drupal.org">Pathauto</a> erstellt automatisch URL-Aliase für jede neu angelegte Seite. So sind Inhalte beispielsweise unter <a href="http://vortrieb.net/leistungen" title="http://vortrieb.net/leistungen">http://vortrieb.net/leistungen</a> zu finden anstatt unter <a href="http://vortrieb.net/node/2" title="http://vortrieb.net/node/2">http://vortrieb.net/node/2</a>. <strong>Benötigt das Token-Modul</strong>.</p> <h3>Submenu Tree</h3> <p><a href="http://drupal.org/project/submenutree">Submenu Tree</a> erweitert die Möglichkeiten mit einer hirachischen Seitenstruktur zu arbeiten.</p <h3>Token</h3> <p><a href="http://drupal.org/project/token" title="Token | drupal.org">Token</a> ist ein Modul, dass Platzhalter-Funktionen für andere Module zur Verfügung stellt.</p> <h3>Views</h3> <p><a href="http://drupal.org/project/views" title="Views | drupal.org">Views</a> ist ein weiteres Modul, dass wahrscheinlich auf den meisten Drupal-Installationen zum Einsatz kommt. Mit Views können nahezu alle Inhalte aus der Datenbank abgerufen und in die Seite integriert werden. Zusammen mit dem CCK ergeben sich eigentlich unbegrenzte Möglichkeiten für die Ein- und Ausgabe von Daten.</p> <h3>WYM Editor</h3> <p>Der <a href="http://drupal.org/project/wymeditor">WYM Editor</a> ist leider noch in einer sehr frühen Entwicklungsphase, verspricht aber im Vergleich zu den WYSIWYG-Editoren wesentlich saubereren Quelltext zu liefern und ist von der Bedienung trotzdem recht simpel. <h3>XML Sitemap</h3> <p><a href="http://drupal.org/project/xmlsitemap" title="XML Sitemap | drupal.org">XML Sitemap</a> erzeugt für Suchmaschinen eine XML-Datei, in der die Links zu den einzelnen Inhalten einer Website enthalten sind.</p> <p>Ich werde diese Liste in Zukunft erweitern, falls diese Website neue Funktionen erhält und dabei auch noch weitere Module zum Einsatz kommen.</p> </article> <article> <h1>Ein Büro für Netzpräsenz</h1> <p>Andreas Dantz — Fri, 09 Jan 2009 10:00:00 +0000</p> In Kürze geht es also los. Mit "vortrieb" starte ich das „Büro für Netzpräsenz“. Aber was ist das Ziel? Eine wichtige Frage, die im Zusammenhang mit Internetauftritten leider viel zu selten gestellt wird ist "Warum?". Jeder weiß mittlerweile, dass sein Unternehmen eine gute Website braucht. Kaum einer weiß wirklich warum. Eine Website kann vieles leisten. Sie kann der Imagepflege dienen, sie kann Neukunden akquirieren, sie kann Bestandskunden binden und vieles mehr. Das funktioniert aber nur, wenn man sich vorher auch die Frage gefallen lässt: „Was wollen wir eigentlich?“ und „Wie erreichen wir das?“. Die alternative ist eine weitere SÜK-Website, die keinen interessiert. SÜK sind Websites, die man erstellen lässt, wenn man gar nicht weiß, was man will. Sie bestehen meistens aus den namensgebenden Menüpunkten „Startseite“, „Über uns“ und „Kontakt“. Die Website hat meist keinerlei für den Besucher relevanten Inhalt und nur mit Glück ist unter Kontakt mehr als ein Formular zu finden. Die Beratung und das gemeinsame Herausfiltern mit dem Kunden, was in seinem konkreten Fall benötigt wird, wird dabei selbst von größeren Werbeagenturen leider oft vernachlässigt. Mein Ziel mit vortrieb ist es, genau diese Maßanfertigung von Websites zu erreichen. Dabei sollen die vielen einzelnen Bausteine (z.B. Design, Text, Struktur, Suchmaschinenfreundlichkeit, Technik, etc.), die für eine funktionierende Website benötigt werden jederzeit als ganzes betrachtet werden um ein gut funktionierendes Endprodukt liefern zu können. </article> </main></body></html>