Interessanter ist, dass meine Daten bei der AZ Direct GmbH vorliegen (scheinbar habe ich irgendwann im Netz ein Häkchen zu wenig weg gemacht…) und ich deshalb in den Genuss regelmäßiger Postwurfsendungen durch Kabel Deutschland gekommen bin. Kuriose Angelegenheit, dachte ich bei mir. Wenn sie sicherstellen wollen, dass ich niemals Kunde bei ihnen werden, können sie sich wohl damit rühmen, die nötigen Schritte unternommen zu haben.

Und um dem Terror Einhalt zu gebieten, habe ich mich an den Kundenservice gewandt und darum gebeten, meine Daten zu löschen. Schließlich haben sie ausreichend sichergestellt, dass ich keinen Vertrag mehr bei ihnen unterschreiben werden - jede weitere Postwurfsendung wäre somit verschwendetes Geld. Außerdem interessierte mich, was hinter der markigen Ansage im Kleingedruckten der Werbebriefe steckte:

Wir bieten volle Transparenz über die Verarbeitung ihrer Daten und ihr Recht auf Werbewiederspruch: …

Dazu noch Internet- und Email-Adresse, sowie Telefonnummer des Kundenservice, wo man den Werbe-Schwachsinn zu beiderseitigem Vorteil beenden kann. Obendrein der Hinweis, wo die Daten erworben wurden und dass alles rechtmäßig und im Sinne des Datenschutzes stattgefunden hat.

Die Antwort kam auch keine 12 Stunden später um 7 Uhr in der Frühe: Meine genauen Daten würden fehlen und…

Unser Vorschlag: Bitte schicken Sie uns Ihre Anfrage noch einmal mit diesen Daten. Dann kümmern wir uns selbstverständlich sofort darum. Vielen Dank!

"Shame on me!" dachte ich mir, ich muss den guten Leuten natürlich auch was geben, womit sie arbeiten können. Also hurtig - zwei Stunden später - eine Antwort verfasst und meine genauen Daten hingeschickt. Etwas mulmig war mir zwar schon dabei zumute, da sie jetzt wissen würden, dass die Werbebriefe auch wirklich ankommen, aber ich beruhigte mich damit, dass ich an ein Unternehmen mit Sitz in Deutschland schreibe und nicht an das RBS oder an einen drittklassigen Spammer mit Sitz auf Honululu (No Offense!).

Es kam dann auch nichts mehr zurück, weshalb ich davon ausging, dass sie meine Daten zwar gelöscht hätten, aber aufgrund meines Unwillens eingeschnappt seien und deshalb auf eine abschließende Email verzichten und mich mit Ungnade und Nichtbeachtung strafen würden. Sind ja schließlich auch nur Menschen dort bei Kabel Deutschland.

Doch hatte ich mich zu früh gefreut. Heute kam wieder der Standard-Werbebrief reingeflattert:

Kabel Deutschland, bla bla, alles doppelt so schnell und gratis für 22,90 Euro, bla blub, Gratis-Installation, sülz, kostenloser Anruf, fasel, Sparen und Susanne May. Kundenkommunikation!

Man kann sich vorstellen, dass ich einigermaßen überrascht war. Ich muss auch zugeben, dass ich diesen Artikel schreibe, bevor ich mich ein drittes mal an den Kundenservice wende und höflichst um das klein gedruckte Bisschen Transparenz bitte. Ich muss zu meiner Verteidigung allerdings sagen, dass ich nicht davon ausgehe, dass Kabel Deutschland es dieses mal schaffen wird, der Bitte um Löschung meiner Daten nachzukommen. Von daher habe ich keine Eile.

Nur ein paar offene Worte an Frau Susanne May möchte ich an dieser Stelle loswerden:

Erschütternd schlechte Arbeit, die sie und ihr Team da leisten. Hängen sie von mir aus dem Luftschloss nach, mit Brief-Werbe-Terror könnte man Kunden gewinnen, aber vergraulen sie doch nicht so fahrlässig Neukundschaft. Oder ist mir entgangen, dass Kabel Deutschland längst mit Abstand Marktführer ist und sie durch diese Flut an sinnlosen Briefen lediglich versuchen ihre Stelle zu rechtfertigen und so der Arbeitslosigkeit zu entgehen?

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
• Animierte Navigation mit jQuery
• Navigation mit JavaScript

Gefunden bei Minimalissimo

Verwandte Beiträge:

• Schindelhauer – Fahrräder mit Zahnriemenantrieb
• Fotografie: New York City 2010
• Die Butter-Statuen von New York

Zwar bietet goneo einen DNS-Editor, doch der ist relativ nutzlos, da man keine neuen Domains anlegen kann und deshalb auf die beschränkt ist, die man in seinem goneo-Paket hat. Da stand ich also mit der schönen, kurzen Domain und hatte keinen Platz, um den URL-Shortener zu installieren.

Geholfen hat mir dann zum Glück Robert, der mir Platz auf seinem HostEurope-Webspace freigeschaufelt hat. Dafür nochmal vielen Dank!

Was die technischen Details anbelangt, habe ich mich ganz an Herrn Cario gehalten und yourls genutzt. Dazu kann ich allerdings noch nicht viel sagen, da ich es erst heute morgen aufgespielt habe. Das wiederum hat aber gut funktioniert und auch sonst bin ich guter Dinge, dass das Tool seinen Dienst verrichten wird.

Also habe ich das Anmelde-Prozedere hinter mich gebracht, einen lächerlich geringen Betrag auf mein Flattr-"Konto" überwiesen, den HTML5-Search-Input-Beitrag von Peter Kroener geFlattr't und daraufhin die drei besucherstärksten Beiträge dieses Blogs bei Flattr gepostet. Den Button habe ich mithilfe von Frank Bueltges Anleitung in die Einzelansicht der Beiträge eingebaut und jetzt warte ich, was bei der ganzen Nummer rumkommt.

Mit den dreistelligen Beträgen vom lawblog oder von netzpolitik.org werde ich ganz sicherlich nicht mithalten können, aber Kleinvieh macht bekanntlich ja auch Mist. Und der Teufel scheißt sowieso nur auf die größten Haufen. Und hätt' der Hund nicht, hätt' er den Hasen…

Verwandte Beiträge:

• Die Butter-Statuen von New York
• De Vetpan Studios – Herrliche Fotografie mit geringer Schärfentiefe
• Feine Fahrräder von Bertelli aus New York

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
• IKEA, Facebook und der Segen des “Photo Tagging”
• Animierte Image-Caption mit jQuery unter WordPress

Verwandte Beiträge:

• Minimalismus – Messe/Ost
• Schlaflos in Hannover-Linden
• Auf dem Weg zum Lindener Hafen

Bei Kyle Conroy gibt es eine schöne Tabelle, die die theoretischen Gewinne anzeigt, die man hätte realisieren können, wenn man anstatt eines Apple-Produkts für das gleiche Geld Apple-Aktien gekauft hätte. Wer den Aktienkurs von Apple in den letzten Jahren im Blick hatte, kann sich vorstellen, dass da ganz ordentliche Wachstumsraten zu erzielen gewesen wären.

Andererseits muss man dazu sagen, dass jemand, der etwas bei Apple kauft, ganz sicher nicht auf der Suche nach einem Investment oder einer Wertanlage ist. Genauso gut kann man durchrechnen, welchen Wert das Aktien-Portfolio hätte, wenn man die letzten vier Jahre nichts gegessen, und das dabei gesparte Geld in Apple-Aktien angelegt hätte. Die Zahlen wären sicher beeindruckend, aber die Sinnhaftigkeit bleibt einfach der Strecke.

Trotzdem sind die Zahlen in der Tabelle von Kyle Conroy durchaus interessant, da sie verdeutlichen, welch rapides Wachstum Apple in den letzten Jahren hingelegt hat.

via @NathanMilford

Bild: Green Apples unter einer CC-Lizenz

Verwandte Beiträge:

• Apple iPhone OS auf einem Mac Pro mit 24"-Multitouch Screen
• Die Apple-Religion und ihre Missionare

(directRide)

Dieses Doku-Video über den hannoverschen DIY-Skatepark ist sehr gut gemacht und ich kann jedem nur empfehlen, sich das anzugucken. Außerdem war ich überrascht, was dort los ist. Zwar bin ich schon ein paar mal dort vorbei gekommen, doch genau habe ich mir den Platz nie angeguckt. Ich war fälschlicherweise davon ausgegangen, dass dort nur eine verrottete Betonfläche ist, die gelegentlich von den Skatern frequentiert wird, die keinen Bock mehr auf den Küchengarten haben. Doch weit gefehlt!

Übrigens kann man dem dazugehörigen Blog entnehmen, dass der 2er Skateboarding e.V., der sich gegründet hat, um den Platz längerfristig und offiziell nutzen zu können, erfolgreich war, von der Metro ein befristetes Hausrecht bekommen hat und der Fortbestand des DIY-Skateparks so bis auf weiteres gesichert ist.

via Kraftfuttermischwerk

Verwandte Beiträge:

• Entsättigter Herbst