Bis dahin könnt ihr euch die Zeit mit unserem kleinen HTML5-Weihnachtsspiel vertreiben – wir hoffen es gefällt!
WOOMERA X-Mas Game

Schöne Feiertage und auf ein großartiges 2012!
Ruben Böhler, Manuel Jacob und Andreas Vierheller

Folgendes ist eine kleine Spielerei, die ohne jegliche align-Funktion und mit den einfachen Zeichenfunktionen (Rechteck und abgerundetes Rechteck) von Adobe Edge entstanden ist: (Hinweis: Edge-Animationen werden am besten in Webkit-Browsern wie Chrome oder Safari dargestellt und laufen daher im Firefox nicht korrekt.)

Der von Edge generierte Code ist momentan noch etwas unelegant, so wird eingebundener Text z.B. einfach in div-Boxen verpackt und bekommt leider keine üblichen Tags wie etwa h1, h2, p etc. Wir sind gespannt, wie die finale Version von Adobe Edge aussieht und ob oder in wie weit sich das Tool in unseren Workflow einbinden wird.
Wer sich genauer Informieren oder Edge kostenlos herunterladen möchte, der werfe einen Blick in die Adobe Labs.
edit: Adobe hat Edge Preview 2 veröffentlicht. Ein Update zu den Neuerungen kommt…

Von Zeit zu Zeit ist es spaßig bei kleinen Community Projekten mitzumachen. Dabei wird einem ein Thema vorgegeben, welches man dann nach Lust und Laune umsetzen kann. In welcher Laune ich mich bei diesem Bild befunden hab … hm.
Community Project: Vectortuts+ Character Jam

Auch wenn die Illustration für die dritte Runde nicht akzeptiert wurde, wollte ich sie euch nicht vorenthalten.

Solange es eine solche Maschine noch nicht gibt ist die Entwicklung z.B. für ein Logo ein längerer Prozess. Ich habe mal in dem Ordner-Nirvana meines Computers nachgeschaut und eine kleine Kollektion der Logoentwürfe von WOOMERA zusammengestellt.

Übrigens bin ich auch sehr erleichtert, dass wir WOOMERA heißen und uns nicht für einen schwäbischen Namen entschieden haben … ich sag nur “Bebb 2.0″. Wer kein schwäbisch versteht und/oder nicht weiß was Web 2.0 bedeutet, hier die links zum recherchieren.Bebb und Web 2.0.

Den Anfang machen wir mit einer Browserweiche für WordPress. Jeder Developer kennt das Problem – da glaubt man, dass die Webseite fertig zum launchen ist, öffnet das Ganze im IE und stellt mal wieder fest, dass der gute alte Explorer die Hälfte nicht darstellen kann … kein Problem, denn man lagert die nötigen Styles einfach in ein weiteres Stylesheet aus.

Wie bindet man das Ganze jetzt aber am bequemsten in WordPress ein?

Hier werden wir Euch in drei Teilen verschiedene Möglichkeiten vorstellen.

Part1.: CONDITIONAL TAGS

<?php

function ie_style_fix() {
  global $wp_styles;
  $tmpl_url = get_bloginfo('template_directory');

  if (!is_admin()) {
    wp_enqueue_style('ie6-style', $tmpl_url . '/css/ie6.css');
    wp_enqueue_style('ie7-style', $tmpl_url . '/css/ie7.css');
    wp_enqueue_style('ie8-style', $tmpl_url . '/css/ie8.css');
  }

   $wp_styles->add_data( 'ie6-style', 'conditional', 'IE 6' );
   $wp_styles->add_data( 'ie7-style', 'conditional', 'IE 7' );
  $wp_styles->add_data( 'ie8-style', 'conditional', 'IE 8' );
}
add_action('init', 'ie_style_fix');

?>

Wir schreiben uns eine kleine Browserweichenfunktion in die functions.php, in unserem Beispiel nennen wir sie einfach einmal “ie_style_fix” (Zeile 3-16).
Damit wir die Conditional Tags in den WP-Header schreiben können, benötigen wir die Klasse wp_styles (Zeile 4). Danach stellen wir unsere Styles für den IE6-8, WordPress mit Hilfe der “wp_enqueue_style” Funktion zur Verfügung. Das ganze in eine IF-Abfrage verpackt, um zu verhindern das die Styles im Back-End geladen werden (Zeile 7-11).
In Zeile 13-15 fügen wir die Conditional Tags in den WP-Header ein.
Zu guter Letzt müssen wir mittels “add_action” dafür sorgen, dass die Funktion beim Aufruf der Seite initalisiert wird (Zeile 16).

Wenn alles läuft sollte etwa folgendes im Header stehen:

<!--[if IE 6]>
<link rel='stylesheet' id='ie6-style-css' href='http://www.domain.de/wp-content/themes/customtheme/css/ie6.css?ver=3.1.2' type='text/css' media='all' />
<![endif]-->

Da nur der IE diese Conditional Tags versteht, wird in obigem Beispiel das ie6.css verwendet, wenn die Seite im IE6 angezeigt wird.

Was tut man aber, wenn es beispielsweise Probleme mit anderen Browsern gibt?
In Part 2 gehen wir darauf ein, wie wir das Ganze mittels Browserdetection lösen können.

… to be continued!

Jetzt werden sich wohl einige noch Fragen was es denn mit dem “quasi Indianer” im Logo auf sich hat.
Also: WOOMERA ist eine Schleuder, welche die Aborigines (Australien) dazu benutzt haben, um Speere weiter werfen zu können, was im Umkehrschluss effektiveres Jagen bedeutet. Höher, weiter, besser – WOOMERA eben. Wer noch mehr wissen möchte, hier der Wikipedia Link.

Für einen ersten Blogeintrag dürfte das ausreichen. Sollte es noch Fragen geben: Kontaktformular nutzen oder Kommentar hinterlassen.

By the way ich (Ruben) habe heute Geburtstag … also feiert mich!