Um etwas Zerstreuung vom Uni-Lernstress zu bekommen, habe ich einen Ausflug in die bunte Node.js-Welt unternommen. Als Mittel zum Zweck diente mir dabei das digitale Notizbrett “Clipboard”. Serverseitig kommt das Application-Framework Express zum Einsatz. Gespeichert werden die Daten in einer MongoDB-Datenbank mithilfe von Mongoose.

Client-seitig kommt die bewährte Kombo aus Underscore, Backbone und jQuery zum Einsatz. Für Ordnung sorgt überdies Require.js, wobei ich auf folgenden Ansatz zurückgegriffen habe: Modular JavaScript & Backbone.js. Außerdem hat jQueryUI einen “Gast-Auftritt” und sorgt für die Draggability der Notizen.

Das Hosting übernimmt dankenswerterweise Nodester, die Daten werden bei MongoHQ abgelegt. Defenitiv zwei sehr praktische Services.

(Clipboard-Code bei GitHub)

Verwandte Beiträge:

• „Backbone Fundamentals“ – Ein fundierter Einstieg in das Thema Backbone.js
• Backbone.js-Tutorial: Die Merkliste
• Studie “Backboned”: AJAX-powered WordPress-Theme mit Backbone.js

Der Deutsche Rollstuhl-Sportverband hat neuerdings eine Android-App, welche ich in meiner Rolle als Frontend-Developer bei w3design. entwickeln durfte. Die App wird zeitnah außerdem auch für das iPhone erscheinen.

Was daran jedoch besonders interessant ist – abgesehen vom Erscheinen der App selbst –, ist die Tatsache, dass ich sowohl von Java, als auch von Objective-C nicht den blassesten Schimmer habe. Vielmehr habe ich mich beim Entwickeln der App auf meine HTML-, CSS- und JavaScript-Kenntnisse verlassen. Möglich ist das durch PhoneGap, ein Framework, das Web-Apps in native Apps umwandelt und dabei ein paar sinnvolle Hardware-APIs zur Verfügung stellt.

Für die App selbst, habe ich auf Backbone.js gesetzt, da es mir gute Möglichkeiten bot, einerseits die Fülle an unterschiedlichen Daten zu verarbeiten, und andererseits ein sehr umfangreichen “One-Pager” zu bauen, welcher aus einer index.html besteht und alle Unterseiten client-seitig rendert.

Ich kann Phonegap jedenfalls nur empfehlen und möchte noch auf LungoJS hinweisen, welches bei kleineren Apps sicher gut mit Phonegap Hand in Hand geht.

Verwandte Beiträge:

• Bilder mit jQuery einblenden, wenn sie fertig geladen sind

1. Es bestehen Abhängigkeiteen zwischen den zu ladenden Daten, so dass sicher gestellt sein muss, dass die Daten vom Typ A fertig geladen sind, bevor das Laden der Daten vom Typ B startet bzw. starten kann.
2. Der Fortschritt des Ladevorgangs soll visualisiert werden, heißt, ist ein Ladevorgang abgeschlossen und es beginnt der nächste, soll ein Ladebalken vorwärts schreiten.

Es wird ersichtlich, dass es nicht damit getan ist, die AJAX-Calls hintereinander aufzurufen. Vielmehr braucht es eine ordnende Instanz, die dafür sorgt, dass die Aufrufe sauber von einander getrennt ablaufen und zwischendurch Callback-Funktionen aufgerufen werden können. Um das zu erreichen, greife ich auf das Pub-Sub-Pattern von Addy Osmani zurück und kombiniere es mit einer InitialDataloader-Funktion. Die AJAX-Funktionalitäten hole ich mir von jQuery.

Im folgenden das Pub-Sub-Pattern:

JavaScript

var mediator = (function () {

	function subscribe(channel, fn) {

		if ( !mediator.channels[channel] ) {
			mediator.channels[channel] = [];
		}

		mediator.channels[channel].push({
			context : this,
			callback : fn
		});

		return this;

	}

	function publish(channel, context) {

		var i = 0,
			len,
			args,
			subscription;

		if ( !mediator.channels[channel] ) {
			return false;
		}

		args = Array.prototype.slice.call(arguments, 2);
		len = mediator.channels[channel].length;

		for ( ; i<len; i += 1 ) {
			subscription = mediator.channels[channel][i];
			subscription.callback.apply((context || subscription.context), args);
		}

		return this;

	}

	return {
		channels : {},
		publish : publish,
		subscribe : subscribe,
		installTo : function (obj) {
			obj.subscribe = subscribe;
			obj.publish = publish;
		}
	}

})();

Auf das Pub-Sub-Pattern möchte ich gar nicht weiter eingehen. Lediglich der Hinweis, dass ich die Publish-Funktion um die Möglichkeit ergänzt habe, einen eigenen Kontext zu übergeben.

Kommen wir als nächstes zur InitialDataloader-Funktion:

JavaScript

var InitialDataloader = function (args) {
	this.args = args;
	this.result = [];

	this.init();
};

InitialDataloader.prototype.init = function () {

	var i = 0,
		len = this.args.length;

	if ( !len ) {
		return;
	}

	for ( ; i<len; i+=1 ) {
		mediator.subscribe(this.args[i], this.load);
	}

	mediator.publish(this.args[0], this, {path : this.args[0], next : 1});

};

InitialDataloader.prototype.load = function (obj) {

	var that = this,
		deferred = $.ajax({url : obj.path});

	deferred.success(function (resp) {
		that.result.push('Data' + obj.next + ' loaded');
	});

	deferred.then( function (resp) {
		if ( obj.next === that.args.length ) {
			console.log(that.result);
		} else {
			mediator.publish(that.args[obj.next], that, {path : that.args[obj.next], next : obj.next+1});
		}
	});

};

in der Konstruktor-Funktion werden die Argumente entgegen genommen und der Prozess via der init-Funktion gestartet. Das args-Argument stellt dabei einen Array dar, der die Pfade zu den Daten enthält.

In der init-Funktion wiederum wird für jeden Pfad des args-Array eine Funktion im Pub-Sub-Pattern angemeldet. Anschließend wird das erste Element des Pub-Sub-Patterns “veröffentlicht”, sprich die load-Funktion mit dem ersten Pfad aufgerufen und der Zähler zum nächsten Element des Pfad-Arrays mit übergeben.

Innerhalb der load-Funktion wird ein AJAX-Call auf den übergebenen Pfad gemacht und an ein deferred-Objekt übergeben. Dies wird anschließend genutzt, um eine Callback-Funktion zu starten, wenn der Ladevorgang abgeschlossen ist, und anschließend entweder das nächste Element des Pfad-Array im Pub-Sub-System zu “veröffentlichen” oder – wenn alle AJAX-Calls gemacht sind – eine finale Funktion aufzurufen (console.log(that.result);).

Anschließend noch der Aufruf der Funktion:

JavaScript

var initialDataLoad = new InitialDataloader([
	'http://apple.com/',
	'https://twitter.com/',
	'http://www.spiegel.de/',
	'http://www.flickr.com/'
]);

Die Adressen sind willkürlich gewählt.

Wenn man den Code in ein Skript packt und im Browser laufen lässt, sieht man in der Konsole nacheinander die AJAX-Calls und abschließend die Ausgabe des this.result-Array, der die einzelnen, zu ladenden Elemente mitgezählt hat.

Das war es auch schon. Sollte es Fragen oder Anregungen, nutzt bitte die Kommentar-Funktion. Ich freue mich immer über Feedback!

Verwandte Beiträge:

• Animierte Image-Caption mit jQuery unter WordPress
• Backbone.js-Tutorial: Die Merkliste

Um mir gelegentlich etwas Zerstreuung vom Lernen zu geben, habe ich einen lange gehegten Plan in die Tat umgesetzt: Ein AJAX-betriebenes WordPress-Theme mit Backbone.js zu bauen. Und zwar keine auf “Graceful Degradation” setzende Kompromisslösung. Alle Inhalte werden asynchron geladen und sind per Hashbang URIs ansteuerbar. Ein Blick in den Quellcode offenbart, was ich meine: Ein JSON-Objekt mit allen grundlegenden Daten, eine Handvoll jQuery-Templates und das HTML-Grundgerüst. Das war es an statischem Content - die Darstellung des Inhalts geschieht über Backbone.js.

Damit Suchmaschinen nicht außen vor bleiben und man sich nicht die Mühe machen muss, einen “Headless Browser” à la HtmlUnit auf seinem Server zum laufen bringen zu müssen, werden grundsätzlich alle Inhalte als GET-Anfrage mit dem Parameter “_escaped_fragment_” abgehandelt - die Ausgabe variiert dann je nachdem zwischen statischem HTML oder einem nackten JSON-Objekt. So ist sichergestellt, dass die Inhalte trotzdem indiziert werden können. Die einzigen, die in die Röhre schauen, sind Besucher ohne JavaScript.

Um diesen Workaround zu realisieren, war jedoch ein hohes Maß an Improvisation vonnöten. Mit WordPress-Bordmitteln habe ich es nicht geschafft, das Frontend-seitige URL-Routing von Backbone.js server-seitig abzubilden und entsprechend zu bearbeiten. Ich habe deshalb auf ein simples MVC-Pattern zurück gegriffen und in das eigentliche Theme eine Art Child-Theme integriert. Das ist insgesamt kein Ansatz der mir - besonders in meiner Umsetzung - gefällt. Des weiteren muss man für einen störungsfreien Betrieb des Themes das URL-Rewriting in den WordPress-Einstellungen deaktivieren.

Darüber hinaus bleibt anzumerken, dass das Theme insgesamt eher rudimentär ist. Ich würde von einem Produktiveinsatz abraten. Allerdings bin ich grundsätzlich von der Idee des Themes überzeugt und freue mich natürlich, wenn jemand sich ebenfalls dafür begeistern kann und daran weiterarbeitet. Gerne auch in Kollaboration mit mir. Zu tun gibt es unter anderem noch:

1. die grundsätzliche Verbesserung des PHP-Codes (sicherer machen, besser in das WordPress-Environment integrieren,…)
2. den Funktionsumfang erhöhen (Neueste Kommentare, Tags, Suchfunktion, Sidebar-Widgets(?),…)
3. das JavaScript straffen (Performance, geschmeidigere GUI-Abläufe,…)

…um ein paar Aspekte zu nennen.

Ansonsten freue ich mich wie immer über Anregungen und Verbesserungsvorschläge - gerade bei einem Vorhaben dieser Größenordnung hat man als Entwickler nicht wirklich einen umfassenden Überblick.

PS: Wahrscheinlich werde ich das Teil zeitnah bei GitHub reinladen. Muss mich da aber erst noch anschlauen.

Update: Okay, die Geschichte ist jetzt auch auf GitHub - https://github.com/herschel666/Backboned. Viel Spaß.

Verwandte Beiträge:

• Free WordPress-Theme: “Blue and Grey”
• Backbone.js-Tutorial: Die Merkliste
• Semi-transparente Navigation in WordPress mit CSS

Backbone.js ist ein interessantes JavaScript-MVC, mit welchem ich mich seit etwa zwei Wochen beschäftige. Und nun möchte ich ein kleines Tutorial dazu präsentieren - wir bauen uns ein Merkliste. Das Konzept sieht wie folgt aus: Ständig laufen einem tolle Filme, Bücher und Spiele über den Weg, die man unbedingt noch sehen/lesen/spielen möchte, aber man merkt sie sich nie. Das ist der Punkt, wo die Merkliste ins Spiel kommt.

Bei der Programmierung habe ich mich stark an der Todo List Application orientiert, allerdings ist die Merkliste vom Funktionsumfang her schmaler, beinhaltet dafür aber einen Controller für das URL-Routing.

Aber nun zur Sache:

Als erstes benötigen wir den HTML-Teil.

HTML

<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Backbone.js-Tutorial - Merkliste</title>
	<link rel="stylesheet" href="style.css" />

</head>

<body>

	<ul id="nav"></ul>
	<input type="text" placeholder="Gib einen Titel ein&hellip;" id="list_input" />
	<ul id="list"></ul>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
	<script src="js/backbone-localstorage.js"></script>
	<script src="js/list.min.js"></script>

	<script type="text/template" id="list-item-template">
		<strong><%= title %></strong>
		<span class="delete_item">x</span>
	</script>

	<script type="text/template" id="nav-template">
		<a href="#/category/<%= title %>"><%= title %></a>
	</script>

</body>
</html>

Für die Merklisten-App benötigen wir jQuery, Underscore.js, Backbone.js und die Backbone-Erweiterung Local-Storage, damit die Einträge im Browser gespeichert werden können. Des weiteren werden die Container für die Navigation und die Listeneinträge, sowie das Eingabefeld angelegt. Schlussendlich brauchen wir noch zwei Templates - eins für die Navigation, eins für die Liste.

Kommen wir nun zum JavaScript-Teil. Als erstes benötigen wir hier unser Model:

JavaScript

window.List = Backbone.Model.extend();

Als nächstes erstellen wir zwei Collections, eine für die Navigation, eine für die Listeneinträge:

JavaScript

window.NavCollection = Backbone.Collection.extend({
	model : List
});

window.ListCollection = Backbone.Collection.extend({				

	model : List,				

	localStorage : new Store('List'),

	getByCategory : function ( category )
	{
		return this.filter( function (item)
		{
			return item.get('category') == category;
		});
	}
});

In der Collection für die Listen-Einträge wird der Local Storage angemeldet und eine Funktion eingefügt, die es ermöglicht, die Einträge der Collection nach ihrer Kategorie zu filtern.

Kommen wir nun zum Controller der App:

JavaScript

window.ListController = Backbone.Controller.extend({

	_navModel : new NavCollection([
		{title : 'Filme'},
		{title : 'Buecher'},
		{title : 'Spiele'}
	]),
	_navViews : [],
	_categoryModel : new ListCollection,
	_inputView : null,

	routes : {
		'' : 'init',
		'/category/:category' : 'getItems',
	},

	initialize : function ()
	{
		this._navModel.each( function ( item, i )
		{
			this._navViews[i] = new NavigationView({
				model : item
			});
		}, this);

		Backbone.history.start();
	},

	init : function ()
	{
		window.location.hash = '/category/Filme';
	},

	getItems : function ( category )
	{
		for ( view in this._navViews )
		{
			this._navViews[view]
				.render()
				.setClass();
		};

		if ( this._inputView == null )
		{
			this._inputView = new ListInputView({
				model : this._categoryModel,
				category : category
			});
		}
		else
		{
			this._inputView.options.category = category;
			this._inputView.model.trigger('refresh');
		}
	}

});

Als erstes werden - jeweils für die Navigation und die Liste - neue Instanzen der zugehörigen Collection erstellt und Platzhalter für die jeweiligen Views angemeldet. Danach werden die relevanten Pfade mit Funktionen verknüpft. In diesem Fall wird die Funktion init() ausgeführt, wenn kein Hash vorhanden ist, und die Funktion getItems(), wenn ein Kategorie-Hash vorhanden ist.

Als nächstes folgt die initialize-Funktion, welche als erstes beim Aufrufen des Controllers ausgeführt wird. Dabei wird das Navigation-Model mit den nötigen Einträgen versehen, danach für jeden Eintrag der Navigation-Collection eine View-Instanz erstellt und im _navView-Array gespeichert, sowie die Backbone.history-Funktion gestartet.

Als nächstes wird die init-Funktion definiert. Diese sorgt einfach nur dafür, dass die Kategorie "Filme" gewählt wird, indem der entsprechende Kategorie-Hash gesetzt wird. Die Kategorie ist hierbei willkürlich von mir gewählt.

Danach folgt die Definition der getItems-Funktion. In dieser werden als erstes die Views für die Navigationspunkte ge-rendert. Daraufhin folgt entweder die Initialisierung des Views für die Listeneinträge, oder - falls dies schon geschehen ist - das Überschreiben der aktuellen, dem View übergebenen Kategorie und das Neu-Aufbauen der Liste mit den entsprechenden Einträgen. Dabei kommt die Filter-Funktion der Listen-Collection zum Einsatz.

Nachdem nun Model, Collection und Controller vorhanden sind, geht es an die Views. Davon benötigen wir drei - einen für das Eingabefeld, einen für die Liste und einen für die Navigation. Fangen wir mit dem Eingabefeld an:

JavaScript

window.ListInputView = Backbone.View.extend({

	el : $('#list_input'),

	list : $('#list'),

	events : {
		'keypress' : 'createListItem'
	},

	initialize : function ()
	{
		_.bindAll(this, 'addListItem', 'addAllListItems');

		this.model.bind('add', this.addListItem);
		this.model.bind('refresh', this.addAllListItems);

		this.model.fetch();
	},

	createListItem : function (e)
	{
		if ( e.keyCode == 13 )
		{
			this.model.create({
				category : this.options.category,
				title : this.el.val()
			});

			this.el.val('');
			this.el.blur();
		}
	},

	addListItem : function ( item )
	{
		var view = new ListItemView({model : item});

		!view.model.length && this.list.append( view.render().el );
	},

	addAllListItems : function ()
	{
		this.list.empty();

		_.each(this.model.getByCategory(this.options.category), function(item)
		{
			this.addListItem(item);
		}, this);
	}

});

Der ListInputView nimmt die Eingabe entgegen, erstellt eine neue Instanz des Listen-Eintrag-View und fügt füllt die Liste mit Einträgen. Die Funktion createListItem() erstellt einen neuen Eintrag in der Collection, wenn das Eingabefeld abgefeuert wurde. Über die Angabe this.model.bind('add', this.addListItem); in der initialize-Funktion wird gesorgt, dass daraufhin die Funktion addListItem() aufgerufen wird, die für den neuen Eintrag in der Collection eine Instant des Listen-Eintrag-View erstellt und diesem den Befehl render() mit auf den Weg gibt. Über die Funktion addAllListItems() wird einerseits sichergestellt, dass die Liste geleert wird, bevor neue Einträge nach einem Kategorie-Wechsel reingladen werden, und andererseits, bei Übergabe einer Collection mit mehreren einträgen, für jeden Eintrag die Funktion addListItem() ausgeführt wird.

Als nächstes kommen wir zum Listen-Eintrag-View:

JavaScript

window.ListItemView = Backbone.View.extend({

	tagName : 'li',

	className : 'list_item',

	tmpl : _.template( $('#list-item-template').html() ),

	events : {
		'click .delete_item' : 'removeItem'
	},

	render : function ()
	{
		$(this.el).html( this.tmpl( this.model.toJSON() ));

		return this;
	},

	removeItem : function ()
	{
		this.model.destroy();
		$(this.el).fadeOut( function()
		{
			$(this).remove();
		});
	}

});

Hier wird das Element vom Standard (div) auf li gesetzt, die gewünschte CSS-Klasse gesetzt, das Template für den Eintrag angemeldet, ein Klick-Event mit der Funktion removeItem() verknüpft und anschließend die Funktionen render() und removeItem() definiert. Erstere fügt die Daten des Collection-Eintrags in das Template ein, letztere löscht den View und den dazugehörigen Collection-Eintrag.

Schlussendlich benötigen wir noch einen View für die Navigation:

JavaScript

window.NavigationView = Backbone.View.extend({

	tagName : 'li',

	tmpl : _.template( $('#nav-template').html() ),

	hash : function ()
	{
		return window.location.hash.replace('#/category/', '');
	},

	render : function ()
	{
		$('#nav').append($(this.el).html( this.tmpl( this.model.toJSON() ) ));

		return this;
	},

	setClass : function ()
	{
		var curHash = this.hash();

		this.el.className = ( curHash == $(this.el).find('a').text() ) ? 'current' : '';
	}

});

Neu und interessant ist hier die Funktion setClass(). Diese sorgt nach dem Rendern der Navigation, dass der aktuelle Reiter die Klasse "current" bekommt.

Um die Listen-App nun zum Laufen zu bringen, erstellen wir eine neue Instanz des Controllers:

JavaScript

var listApp = new ListController();

Der ganze Spaß wird in eine anonyme jQuery-Funktion geschrieben, damit die App gestartet wird, sobald das DOM geladen ist.

Das war es auch schon. Ich hoffe, meine Erklärungen sind einigermaßen nachvollziehbar. Falls nicht, nutzt auf jeden Fall die Kommentar-Funktion. Des weiteren würde ich mich natürlich über Anregungen und Verbesserungsvorschläge freuen, da ich ja doch ein Neuling in Sachen Backbone.js bin. Ansonsten noch der Hinweis, dass bei Gefallen natürlich gerne regen Gebrauch von den unten stehenden Social-Media-Buttons gemacht werden kann.

Vielen Dank!

Verwandte Beiträge:

• Studie “Backboned”: AJAX-powered WordPress-Theme mit Backbone.js
• Animierte Image-Caption mit jQuery unter WordPress
• "Social Icon Bar" mit jQuery

Beginnen wir wie gewohnt mit dem HTML-Teil:

HTML
<div id="nav">
  <ul>
    <li class="top">
      <a href="index.html">
        <strong>Home</strong>
      </a>
      <div class="sub">
        <div>
          <ul>
            <li>
              <a href="#">Sub-Item 1</a>
            </li>
            <li>
              <a href="#">Sub-Item 2</a>
            </li>
            <li>
              <a href="#">Sub-Item 3</a>
            </li>
            <li>
              <a href="#">Sub-Item 4</a>
            </li>
            <li>
              <a href="#">Sub-Item 5</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="top">
      <a href="#">
        <strong>About</strong>
      </a>
      <div class="sub">
        <div>
          <ul>
            <li>
              <a href="#">One Sub-Item</a>
            </li>
            <li>
              <a href="#">Another Sub-Item</a>
            </li>
            <li>
              <a href="#">Still a Sub-Item</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#">
        <strong>Contact</strong>
      </a>
    </li>
  </ul>
</div>

Wie gewohnt eine ungeordnete Liste für die Haupt-Navigation und jeweils eine für die Sub-Navigationen. Um die charakteristischen Ecken hinzubekommen, müssen zwei Elemente ineinander verschachtelt und gegeneinander verschoben werden. Das macht den Quelltext Tag-intensiver. In meinen Augen jedoch noch in einem vertretbaren Rahmen und weit entfernt von klassischer "Diveritis".

Als nächstes kommen wir zum CSS:

CSS
@font-face {
  font-family: 'SilkscreenNormal';
  src: url('slkscr-webfont.eot');
  src: local('☺'), url('slkscr-webfont.woff') format('woff'), url('slkscr-webfont.ttf') format('truetype'), url('slkscr-webfont.svg#webfontUx1SMfhe') format('svg');
  font-weight: normal;
  font-style: normal;
}

ul {
  list-style: none;
}

body {
  background-color: #FFF;
  color: #333;
  font: normal 13px SilkscreenNormal, sans-serif;
}

#nav,
#nav > ul,
#nav > ul > li {
  float: left;
  display: inline;
}

#nav,
#nav > ul {
  width: auto;
  _width: 1%; /* IE6 Hack */
  height: 32px;
}

#nav {
  margin: 50px;
  position: relative;
  border-width: 2px 0;
  border-style: solid;
  border-color: #666;
}

#nav > ul {
  position: relative;
  left: -2px;
  margin-right: -4px;
  padding: 0 10px;
  border-width: 0 2px;
  border-style: solid;
  border-color: #666;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///73n/yH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile1.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li {
  _width: 1%; /* IE6 Hack */
  margin: 3px 5px;
  position: relative;
}

#nav > ul > li > a {
  display: block;
  position: relative;
  width: auto;
  height: 22px;
  border-width: 2px 0;
  border-style: solid;
  border-color: #999;
  background-color: #FFF;
}

#nav > ul > li > a:link,
#nav > ul > li > a:visited {
  color: #999;
  text-decoration: none;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP/////fvSH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile2.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li > a:hover,
#nav > ul > li > a:focus,
#nav > ul > li > a:active {
  color: #666;
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP/////MmSH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=');
  *background-image: url('img/tile3.gif'); /* IE6 and IE7 can't handle data uris */
				}

#nav > ul > li > a strong {
  display: block;
  position: relative;
  width: auto;
  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  left: -2px;
  margin-right: -4px;
  border-width: 0 2px;
  border-style: solid;
  border-color: #999;
}

#nav > ul > li.top > a > strong {
  padding-left: 21px;
  background: url('data:image/gif;base64,R0lGODlhBgAEAIABAJmZmf///yH5BAEAAAEALAAAAAAGAAQAAAIHhI8WocuwCgA7') 5px center no-repeat;
  *background: url('img/arrow.gif') 5px center no-repeat; /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li > a:hover,
#nav > ul > li > a:hover strong,
#nav > ul > li > a:focus,
#nav > ul > li > a:focus strong {
  border-color: #666;
}

#nav > ul > li.top > a:hover strong,
#nav > ul > li.top > a:focus strong {
  background-image: url('data:image/gif;base64,R0lGODlhBgAEAIABAGZmZv///yH5BAEAAAEALAAAAAAGAAQAAAIHhI8WocuwCgA7');
  *background-image: url('img/arrow_hv.gif'); /* IE6 and IE7 can't handle data uris */
}

#nav > ul > li > a:active {
  top: 1px;
}

.sub {
  position: absolute;
  width: auto;
  top: 24px;
  left: 0;
  padding-top: 9px;
  display: none;
}

.sub div {
  position: relative;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

.sub div ul {
  position: relative;
  left: -2px;
  margin-right: -4px;
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///+7u7iH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile4.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

.sub div ul li {
 border-top: 2px solid #666;
}

.sub div ul li:first-child {
  border-top: none;
}

.sub div ul li a {
  display: block;
  padding: 0 10px;
  line-height: 22px;
  font-size: 12px;
  white-space: nowrap;
}

.sub div ul li a:link,
.sub div ul li a:visited {
  color: #666;
}

.sub div ul li a:hover,´
.sub div ul li a:focus {
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///93d3SH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile5.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

.sub div ul li a:active {
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///8zMzCH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile6.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

Als erstes binde ich den Pixel-Font "SilkScreen von Jason Kottke ein. Danach folgen die Angaben für die Navigation.

Interessant ist dabei, dass selbst das äußere Element <div id="nav"> die Angabe float: left hat, damit es sich der Breite des Inhalts anpasst. Das kann zu Layout-Problemen führen, weshalb man im praktischen Einsatz darauf achten muss, das Element direkt unterhalb der Navigation mit einem clear: left zu versehen.

Des weiteren kann man sehen, wie die charakteristischen Ecken zustande kommen: Das äußere Element hat jeweils unten und oben eine zwei-Pixel-starke border und das innere jeweils links und rechts. Das innere Element wird dann per left: -2px und margin-righ: -4px um jeweils zwei Pixel nach links und rechts aus dem umgebenden Element hinaus gezogen. Schon ist der gewünschte Effekt da.

Ebenfalls erwähnenswert sind die Grafiken. Da diese nur 4x4 Pixel bzw. 4x6 Pixel groß sind, lohnt es sich, sie in Form von Data URIs einzubinden und so unnötige HTTP Requests zu sparen. Blöderweise können IE6 und IE7 damit nicht umgehen, weshalb die richtigen Grafiken ebenfalls eingebunden werden müssen. Diese werden dann mithilfe des Star-Hack den beiden Browsern zugewiesen.

Bilder in Data URIs umwandeln könnt ihr übrigens mit diesem Online-Tool.

Zum Schluss noch etwas jQuery um die Fly-Out-Menu-Funktionalität zu realisieren:

JavaScript
$(document).ready( function() {
  $('#nav li.top').hover( function() {
    $(this).find('div').stop(true, true).fadeIn('slow');
  }, function() {
    $(this).find('div').stop(true, true).fadeOut('slow');
  });
});

Ich denke, das ist die spartanischste Lösung und bedarf keiner weiteren Erläuterung.

Das war es auch schon. Die Navigation ist beliebig per Copy&Paste erweiterbar, denkt nur daran, den li-Elementen, die eine Sub-Navigation beinhalten, die Klasse top zu verpassen, damit die Fly-Out-Menu-Funktionalität gewährleistet ist.

Ansonsten wünsche ich viel Spaß mit der Navigation. Bei Fragen bitte wie immer die Kommentar-Funktion nutzen. Und bei Gefallen fleißig via Twitter und Facebook verbreiten. Vielen Dank

Verwandte Beiträge:

• Navigation im Googlemail-Style mit jQuery
• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery
• Semi-transparente Navigation in WordPress mit CSS

Als erstes braucht ihr eure User-ID und eine Application-ID für die Seite, auf der ihr den Like-Button einbauen möchtet. Die User-ID bekommt ihr, indem ihr folgendes in die Adress-Zeile eures Browsers eingebt:

graph.facebook.com/euer.name

Vereinfacht gesagt: Geht auf euer Facebook-Profil und ersetzt das www in der Adresse durch "graph". Auf der dann erscheinenden Seite, findet ihr eure User-ID.

Die Application-ID wiederum könnt ihr generieren, indem ihr auf folgender Seite euren Blog eintragt:

http://developers.facebook.com/setup/

Nun sind die Grundvoraussetzungen erfüllt, der Like-Button kann eingebunden werden. Im folgenden Beispiel zeige ich, wie man das in der Einzelansicht eines Artikels macht. Dafür müssen wir im Kopf- und Fußbereich, sowie unterhalb des Artikels etwas Code eingeben.

Fangen wir mit dem Kopfbereich an:

HTML/PHP
<?php if ( is_single() ) : ?>
  <meta property="fb:admins" content="eure_user_id" />
  <meta property="fb:app_id" content="eure_app_id" />
  <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
  <meta property="og:title" content="<?php echo get_the_title(); ?>" />
  <meta property="og:type" content="article" />
<? endif; ?>

Diese fünf speziellen Facebook-Meta-Angaben müssen in der header.php innerhalb der head-Tags gesetzt werden. Sie verraten Facebook wem der Blog gehört, um welchen Blog es sich handelt, wie er heißt, welchen Titel die aktuelle Seite hat und um welchen Inhaltstyp es sich handelt. Natürlich müsst ihr eure_user_id und eure_app_id durch die entsprechende ID ersetzen.

Als nächstes binden wir den nötigen JavaScript-Kram im Fußbereich ein:

HTML/JavaScript
<?php if ( is_single() ) : ?>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
  <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({appId: 'eure_app_id', status: true, cookie: true, xfbml: true});
    }
  </script>
<?php endif; ?>

Das wird in die footer.php direkt über dem abschließenden body-Tag eingefügt. eure_app_id ist auch hier entpsrechend zu ersetzen.

Nun muss der Button selbst noch auf der Artikelseite eingebunden werden:

HTML
<fb:like href="<?php the_permalink() ?>" layout="standard" show_faces="false" width="xyz" action="like" colorscheme="light" font="trebuchet ms"></fb:like>

Dies tragt ihr in der single.php da ein, wo der Button hin soll. Die Attribute könnt ihr in gewissem Maße euren Präferenzen anpassen. Hier erfahrt ihr, was möglich ist.

Hat man das alles eingetragen, werden auf der Einzelansicht eines Artikels die nötigen Meta-Angaben angezeigt, das entsprechende JavaScript für den Like-Button wird eingebunden und der Like-Button selbst erscheint ober- oder unterhalb des Artikels - je nachdem, wo ihr ihn eingefügt habt.

Sollte euch das alles zu tricky sein, könnt ihr entweder die iframe-Variante einbinden oder auf das WordPress-PlugIn von Bottomless zurückgreifen: Like.

Noch ein paar Worte zur Performance. Das Einbinden des Like-Button verlängert natürlich die Ladezeit eures Blogs. Allerdings sprechen wir hier von WordPress - hier ist es normal, dass auf jeder Seite drei zusätzliche JavaScript-Dateien und zwei zusätzliche Stylesheets eingebunden werden, weil irgendwo im Blog mal eine Lightbox aufgehen soll. Will heißen: Denkt darüber nach, ob ihr den Button einbauen wollt, aber bedenkt, dass euer System sowieso nicht Performance-optimiert ist.

Es sei denn, ihr seid bezüglich dieses Themas sensibilisiert und habt entsprechende Schritte unternommen, eurem Blog auf die Sprünge zu helfen.

Ansonsten wie immer: Bei Fragen schreibt einen Kommentar. Bei Gefallen bookmarkt den Artikel. Danke!

Verwandte Beiträge:

• Fancy Login-/Logout-Button für deinen WordPress-Blog
• Animierte Image-Caption mit jQuery unter WordPress
• IKEA, Facebook und der Segen des “Photo Tagging”

Hinweis:

Die CSS-Eigenschaft background-position-x bzw. background-position-y ist eine Erfindung von Microsoft und funktioniert leider nur im Internet Explorer und in Webkit-Browsern. Deshalb gibt es im jQuery-Skript eine Browser-Weiche. Im Firefox und im Opera verschwindet die Grafik einfach nur, der "Rising Curtain"-Effekt findet also nicht statt.

Kommen wir aber zum eigentlichen Tutorial:

Heute möchte ich zeigen, wie man input-Felder in Formularen mithilfe des "Rising Curtain"-Effekts und jQuery interessanter gestalten kann, wenn der Fokus auf ihnen liegt. Alles was man dafür braucht, ist eine kleine Hintergrundgrafik mit einem Farbverlauf und ein paar Zeilen jQuery. Als erstes aber wenden wir uns dem HTML-Teil zu:

HTML
<div>
   <span>
      <input type="text" id="input1" />
   </span>
   <label for="input1">Input 1</label>
</div>

Dieser bedarf wohl keiner großen Erklärung. Es gibt ein input-Feld plus dem dazugehörigen Label. Das input-Feld ist in span-Tags eingefasst, welche für den Rand sorgen.

Als nächstes der CSS-Teil:

CSS
div {
   height: 24px;
   margin-bottom: 10px;
   clear: left;
}

   span {
      height: 24px;
      float: left;
      display: inline;
      margin-right: 10px;
      border: 1px solid #999;
}

   span.active {
      border-color: #063050;
   }

      input {
         display: block;
         width: 200px;
         height: 18px;
         padding: 2px 4px;
         line-height: 18px;
         background: #FFF url('img/gradient.jpg') 0 0 repeat-x;
         border: 1px solid #FFF;
         color: #063050;
      }

   label {
      height: 24px;
      float: left;
      display: inline;
      line-height: 24px;
      cursor: pointer;
   }

span und label werden mit float: left nebeneinander angeordnet. Das input-Feld bekommt einen weißen Rand, damit der dunkle Hintergrund nicht an den dunklen Rand des span-Elements klatscht. Der Hintergrund wiederum stellt einen Farbverlauf von dunkelblau zu weiß dar, der mehr als doppelt so hoch wie das input-Feld ist.

Kommen wir nun zum jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
   $('input').focus( function() {
      $(this).parent().addClass('active');
      if ( jQuery.browser.webkit || jQuery.browser.msie ) {
         $(this).animate({'background-position-y' : '-28px'}, 500, 'linear');
      } else {
         $(this).animate({'background-position' : '0 -28px'}, 0, 'linear');
      }
   });
   $('input').blur( function() {
      $(this).parent().removeClass('active');
      if ( jQuery.browser.webkit || jQuery.browser.msie ) {
         $(this).animate({'background-position-y' : '0'}, 500, 'linear');
      } else {
         $(this).animate({'background-position' : '0 0'}, 0, 'linear');
      }
   });
});

Liegt der Fokus auf einem input-Feld, bekommt das umschließende span-Element die Klasse "active" zugewiesen und der Rand wird dunkelblau. Außerdem verschiebt sich der Hintergrund des input-Feldes nach oben mithilfe der animate()-Funktion von jQuery. Das ist der so genannte "Rising Curtain"-Effekt, durch den der Hintergrund des input-Feldes heller wird. Gesteuert wird das ganze über die CSS-Eigenschaft background-position-y.

So einfach ist das. Das ganze lässt sich natürlich auch bei einer textarea anwenden. Denkt aber daran, dass die Hintergrund-Grafik entsprechend groß sein muss. Auch ist es denkbar, die Hintergrund-Grafik ganz aus dem sichtbaren Bereich fahren zu lassen, so dass das input-Feld weiß wird. Der Kreativität sind kaum Grenzen gesetzt.

Das war es auch schon. Bookmark setzen oder dieses Tutorial via twitter durch den Äther jagen, wird wie immer gern gesehen. Bei Fragen und Anregungen steht die Kommentar-Funktion zur Verfügung. Nichts neues also.

Verwandte Beiträge:

• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery
• "Social Icon Bar" mit jQuery
• Animierte Image-Caption mit jQuery unter WordPress

So entwickeln sich CSS-Transitions von der Spielerei zur ernsten Alternative zu JavaScript, wenn es um Animationen im Webdesign geht. Deshalb habe ich 7 Tutorials rausgesucht, die einen Überblick über die Möglichkeiten von CSS-Transitions geben.

1. CSS: Transition Timing Functions

Der Artikel behandelt die Eigenschaften transition-duration und transition-timing-function, und beschreibt, wie man Dauer und Geschwindigkeit von Animationen beeinflusst.

2. CSS Transforms and Transitions - The OSX Dock example

Chris Walker zeigt, wie man den Mac OSX-Dock nur mithilfe von CSS3 nachbauen kann.

3. Going Nuts with CSS Transitions

Natalie Downe demonstriert, wie man eine Polaroid-Galerie mithilfe von CSS-Transitions baut.

4. Nicer Navigation with CSS Transitions

Schöne Anleitung, wie man Website-Navigationen schöner gestalten kann mit CSS3.

5. Create the accordion effect using CSS3

Der Akkordeon-Effekt nur mit CSS3 und Transitions realisiert.

6. CSS3 Hover Tabs ohne JavaScript

Hover Tabs ohne JavaScript. Über die Praxistauglichkeit dieser Lösung kann man streiten, aber nichtsdestotrotz veranschaulicht sie sehr schön die Möglichkeiten von CSS3.

7. CSS Transitions 101

Zum Abschluss eine schöne Gesamtübersicht zum Thema CSS-Transitions auf Webdesigner Depot.

Ich hoffe, ihr habt ein paar hilfreiche Sachen gefunden. Zwar surfen viele Leute noch immer mit einem veralteten Browser, der keine CSS-Transitions unterstützt, doch trotzdem gibt es Möglichkeiten, diese Technik bereits jetzt einzusetzen. Es sind eben die Details, wenn bspw. ein Link nicht schlagartig beim Hover die Farbe ändert, sondern das langsam tut, die eine moderne Website ausmachen. Hat man keinen modernen Browser, kommt man nicht in den Genuss, kann die Seite aber trotzdem nutzen.

Verwandte Beiträge:

• Weichgezeichnete Schrift mit CSS3
• "Social Icon Bar" mit jQuery
• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery

Allerdings spielt das title-Attribut auch in Sachen Usability eine Rolle. Es bietet die Möglichkeit, dem Nutzer (tiefergehende) Informationen bezüglich eines Bildes oder eines Links zu geben.

Das title-Attribut bei Verweisen

Links sind immer in ihrer Wortzahl begrenzt, da nur in den wenigsten Fällen ein ganzer Textabschnitt zum Link umfunktioniert wird. Eher sind es Teile von Sätzen oder - außerhalb von Textabschnitten - einzelne Begriffe, die auf andere Seiten verweisen. Auf jeden Fall kriegt man in der Link-Beschriftung nie den Namen der Seite, auf die verwiesen wird, deren Beschreibung, sowie eine kurze Beschreibung des Inhalts der Unterseite - falls nicht auf die Startseite verwiesen wird - unter. Mithilfe des title-Attributs ist das jedoch möglich.

Angenommen, man möchte auf eine Unterseite der Website des deutschen Dackel-Clubs verweisen, die sich mit dem Thema Aufzucht befasst. Erste Möglichkeit ist es, den Link im Text unterzubringen:

HTML
<p>… bei der <a href="dackel-club.tld/path/to/aufzucht/" title="Deutscher Dackel-Club - Informationen zur Aufzucht von Dackeln">Aufzucht</a> von Dackeln …</p>

Ohne das title-Attribut weiß man nicht, wohin der Begriff "Aufzucht" führt. Durch Setzen des title-Attributs kann der Leser es jedoch herausfinden, indem er den Cursor etwas länger über dem Link ruhen lässt.

Eine weitere Möglichkeit ist es, den Link unterhalb des Textabschnitts zu setzen:

HTML
<a href="dackel-club.tld/path/to/aufzucht/" title="Deutscher Dackel-Club - Informationen zur Aufzucht von Dackeln">Deutscher Dackel-Club</a>

Der Leser sieht, dass es weitergehende Informationen beim deutschen Dackel-Club gibt, doch worum es sich genau handelt, kann er aus der Link-Beschriftung "Deutscher Dackel-Club" nicht herauslesen. Das title-Attribut gibt hier mehr Aufschluss.

Nun wird der eine oder die andere vielleicht einwerfen, dass man den Inhalt des Link-Ziels doch aus dem Thema des Textes ableiten kann. Das ist sicherlich richtig, doch will man seine Besucher immer raten lassen oder lieber klar definierte Informationen liefern?!

Das title-Attribut bei grafischen Verweisen

Als erstes zwei Beispiele, die mich überhaupt dazu bewogen haben, diesen Text zu schreiben:

1. Thinking for a Living
2. Interview with Tom Hoops

Bei beiden Seiten tauchen links und rechts des Inhalts zwei große Pfeile auf, die einen mehr oder weniger verfolgen und geklickt werden wollen, jedoch nicht preisgeben, welchen Zweck sie haben. Das ist äußerst irritierend und sollte auf jeden Fall vermieden werden. Das gleiche ist es mit Icons und Piktogrammen. Klar weiß ich, wenn ich ein kleines Stift-Symbol auf einer Seite sehe, dass da was bearbeitet werden kann. Doch was genau, sagt mir die Grafik nicht.

Möchte man also vermeiden, dass Nutzer unnötig klicken müssen, um den genauen Zweck des Links zu ergründen, dann sollte man sich des title-Attributs befleißigen und so unnötiges Herumraten und möglicherweise Frust vermeiden.

Das title-Attribut bei Bildern

Neben dem alt-Attribut, kann man zur Beschreibung von Bildern auf Webseiten auch das title-Attribut benutzen. Dies kann durchaus sinnvoll sein, denn nur die wenigsten Bilder sprechen für sich und den Inhalt des alt-Attributs bekommt der durchschnittliche Besucher nicht zu sehen, es sei denn der Pfad zum Bild ist falsch gesetzt.

Allerdings muss man in diesem Fall etwas relativieren. In letzter Zeit haben sich immer mehr die so genannten Image-Captions durchgesetzt, bei denen die Beschreibung des Bildes direkt unterhalb des selben stehen. Das ist für den Besucher sicherlich sinnvoller, da die Beschreibung so direkt ersichtlich ist, und man nicht erst den Cursor auf dem Bild "parken" muss. Bedient man sich der Image-Captions, wird das Setzen des title-Attributs wirklich zu einer reinen SEO-Aktion.

Verzichtet man jedoch auf Image-Captions, sollte man den Besuchern, die noch über ihr Augenlicht verfügen, den Gefallen tun und das title-Attribut befüllen.

So, das war mein kleiner Diskurs am Morgen. Ich freue mich natürlich immer auf andere Ansichten zu diesem Thema. Wenn ihr also bei dem ein oder anderen Punkt der Meinung seid, das stimmt so nicht, wie ich es geschrieben habe, dann nutzt die Kommentar-Funktion und ergreift das Wort.