Aber der Reihe nach

Vor einiger Zeit wurde auf Blogprojekt.de zur Teilnahme an der Blog-WM aufgerufen. Nach einer Qualifikation gibt es 2 Vorrunden in denen zunächst 64 Blogs und dann 32 gegeneinander antreten. Danach duellieren sich die nach dem gleichen Prinzip die Sieger-Blogs im Achte-, Viertel-, Halb- und schließlich in einem Finale.

Abstimmen und Gewinnen!

Nicht nur die teilnehmenden Blogs erhalten Gewinne, auch die Besucher, die ein Voting abgeben werden bedacht:

Insgesamt gibt es über 90 Preise im Gesamtwert von mehr als 4.000,- Euro. Ein Teil davon geht an die erfolgreichen teilnehmenden Blogs. Der andere Teil an die Leser, die sich durch Ihre Abstimmung an der Blog-WM beteiligen.

Also nichts wie hin, für den Blog.Tocki abstimmen und gewinnen!

Clevere Idee mit Win-Win-Effekt

Die Idee ist ein wahrer Geniestreich. Natürlich tut es Blogbetreibern gut, wenn sie in solch einem Wettbewerb mitmachen und vielleicht auch sehen können, ob ihr Blog(design) ankommt, oder ob es abgestraft wird. Und auch die Preise sind natürlich verlockend.

Aber der eigentliche Gewinner ist Blogprojekt.de. Jeder Teilnehmer wird in den nächsten Tagen und Wochen versuchen so viele Leser, Follower wie möglich und seine Facebook-Community dazu zu bringen für seinen Blog auf der entsprechenden Seite abzustimmen. Damit lässt Blogprojekt.de bei anfangs 64 Blogs locker 100 Backlinks generieren. Die Traffic des Blogs wird steigen ebenso die Bekanntheit und Reichweite.

Eine echt clevere und schöne Idee. Und jetzt alle hin und für mich abstimmen (Duell 32, gaaaanz unten)!

Update 1 [18.06.2010]: erste Runde gewonnen

Wie soeben bekannt gegeben wurde, hat der Blog.Tocki die nächste Runde erreicht. Und zwar mit einem tapferen Vorsprung gegenüber dem Duell-Partner.

Jetzt warten alle gespannt auf die neuen Paarungen für die nächste Runde. Danke an alle, die für mich gevotet haben!

Update 2 [18.06.2010]: zweite Runde online

Die Duelle für die zweite Runde sind jetzt online und man kann wieder abstimmen. Diesmal geht es in Duell 16 gegen einen alten Bekannten: farbwolke. Das wird sicher spannend.

Und jetzt alle hin und wieder für mich abstimmen (Duell 16, wieder ganz unten)!

Update 3 [23.06.2010]: Achtelfinale nicht erreicht

Nach einem wirklich harten Duell hat die Farbwolke heute Nacht die nächste Runde erreicht. Mit 402 Stimmen unterliegt der blog.tocki.de stolz und mehr als zufrieden gegen 425 Stimmen für farbwolke.de.

Nochmal vielen Danke an alle, die für mich gevotet haben. Wir hätten mit unseren 402 Stimmen locker jedes andere Duell dominiert. Jetzt wünsche ich Farbwolke viel Spaß mit den weiteren Gegnern, meine Unterstützung habt ihr!

Datenbank-Backup mit MySQLDumper

Ich hoste diesen Blog bei 1und1 und sichere die Datenbank mit MySQLDumper, was ich nur aufs Wärmste empfehlen kann. WordPress verlangt seit 2.9 eine MySQL Datenbank Version5. Da ich diesen Blog aber schon eine ziemlich lange Zeit betreibe, war meine Datenbank noch auf Version4. Daher war ein gründliches Datenbank Backup nötig, um eine Neuinstallation der MySQL unter Version5 vorzubereiten.

Update von MySQL4 auf MySQL5

1und1 bietet lediglich die Möglichkeit die alte Datenbank zu löschen, um danach eine neue, aktuelle einzurichten. Das Löschen dauert erstaunlich lange, dafür geht das Erstellen einer neuen um so schneller.

Beim Wieder-Einspielen der gesicherten Dateien via MySQLDumper hatte ich noch ein kleines Problem, da die alte Datenbank als Character Set “german1″ hatte, was bei 1und1 unter MySQL Version5 nicht mehr angeboten wurde. Aber eine Änderung in der Backup-Datei auf UTF8 hat das Problem gelöst.

Erneutes Backup nicht vergessen

Da das aktuelle WordPress die Datenbank etwas umschreibt darf man nachdem alles schön neu eingerichtet ist nicht vergessen das aktuelle System nochmals zu sichern, damit man jederzeit wieder auf den “heilen” Zustand zurücksetzen kann.

Google Wave

Das “wir-erfinden-die-eMail-neu”-Projekt, das Google Ende Mai vorgestellt hat, steht noch in der Beta-Phase. Im Laufe der Entwicklung von Wave werden immer mehr Interessierte eingeladen wave zu testen. Somit kann Google zusätzlich zur Entwicklung von neuen Features den Dienst unter zunehmender Auslastung testen.

Wer sich an der nur teilweise zur Verfügung stehenden Feature-Liste und zeitweisen Aussetzern nicht stört, der kann bereits jetzt mittesten.

Was muss ich tun

Ich habe noch 5 Invites zu vergeben, die Vorgehensweise ist denkbar einfach: Postet bis Nikolaus (06.12.2009) einen Kommentar unter diesen Eintrag. Alle Kommentare nehmen an der Verlosung teil. Und los…

Blog Action Day

Der diesjährige Blog Action Day hat sich das Thema “Climate Change” vorgenommen. Die Idee am Bloag Action Day ist, dass an einem bestimmten Tag (dieses Jahr am 15.Oktober) die Bloglandschaft über ein Thema schreibt: den Klimawandel.

Das Mannahatta Projekt

Kurz gesagt geht es bei dem Projekt des “Landscape Ecologist” Eric Sanderson darum, wie die Landschaft, die heute von New York bedeckt ist, vor 400 Jahren ausgesehen haben könnte. 1609 nämlich erkundete Henry Hudson als erster Europäer die Landzunge, die von den Eingeborenen “Mannahatta” oder so ähnlich genannt wurde.

573 Hügel, 55 ökologische Nischen, 233 Vogelarten, 85 Sorten Fisch, 32 Reptilien- und Amphibienarten und 24 Versionen Säugetier in Wäldern, Wiesen, Teichen, Sümpfen und Flüssen.

Sanderson erstellte mit seinem Team eine interaktive Karte, mit deren Hilfe Topographie, Pflanzen- und Tierwelt von 1609 als einzelne Layer über Google Maps eingeblendet werden können. Somit lässt sich nachvollziehen, wie es an Orten, wie beispielsweise dem Time Square ausgesehen haben könnte. 10 Jahre hat er die ökologische Geschichte der Stadt – oder besser dessen, was da vorher war – erforscht. Seine Informationen bezog er dabei aus historischen Berichten und Landkarten, vor allem aber auch aus ökologischen Gesetzmäßigkeiten und Computermodellen.

Animationen New York 1609

Auf Grundlage dieser Erkenntnisse erstellte Markley Boyer Computersimulationen, die uns das verloren gegangene Stück Natur näher bringen.

Eric Sandersons TED-Talk

Hier die Präsentation von Sanderson bei TED “Eric Sanderson pictures New York’s natural history”:

Eingebettetes Video ansehen

Weiterführende Links

themannahattaproject.org
nationalgeographic.de/…/das-wilde-new-york
faz.net/…Ecommon~Scontent.html

Wie geht das?

Es ist einfach: Auf der Website vom Blog Action Day anmelden, den eigenen Blog registrieren und dann am 15.10. einfach etwas zum Thema beitragen. Wer möchte kann als Fleißarbeit den Blog Action Day auch auf Twitter verfolgen: @blogactionday.

Ich will dieses Mal auf jeden Fall dabei sein.

Eingebettetes Video ansehen

Das Menue in WordPress

Zunächst solltest du eine Liste erstellen, die du dann mittels CSS zu einem Menue formst. Hier auf dem Tocki-Blog verwende ich etwa das hier:

<ul id="menu">
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

Das bedeutet: Mache eine ul-Liste, die den Namen “Menu” hat. Sortiere die Einträge nach der Reihenfolge, die ich im Backend von WordPress angegeben habe (sort_column=menu_order), zeige dabei lediglich die Hauptseiten in der Liste an (depth=1) und sorge dafür, dass jeder Menue-Eintrag zwischen <li> und </li> ausgegeben wird (title_li=). Das erzeugt einen Quelltext, der so aussieht:

<ul id="menu">
 <li><a href="http://www.blog.tocki.de/who-is/">who is?</a></li>
 <li><a href="http://www.blog.tocki.de/datenschutz/">Datenschutz</a></li>
</ul>

Das kann man natürlich vorzüglich mit CSS gestalten. Mein CSS zum Menue sieht folgendermasen aus:

ul#menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
float: right;
}

ul#menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a {
display:block;
float:left;
color: #333333;
text-decoration:none;
padding:8px 12px 0 12px;
height:22px;
}

ul#menu li a:hover {
color: #ff01d8;
height:22px;
}

ul#menu .current_page_item a, ul#menu .current_page_parent a {
color: #0098ff;
display:inline;
height:22px;
float:left;
margin:0;
}

Dabei kann man sehen, dass ich eine Formatierung für den Zustand .current_page_item vorgesehen habe, um die jeweils aktive Seite im Menue hervorzuheben. Befindet man sich nämlich z.B. auf der Seite who is, dann wird als Quellcode folgendes ausgegeben:

<ul id="menu">
 <li class="current_page_item"><a href="http://www.blog.tocki.de/who-is/">who is?</a></li>
 <li><a href="http://www.blog.tocki.de/datenschutz/">Datenschutz</a></li>
</ul>

Link zur Startseite hinzufügen

Leider sieht WordPress nicht vor, dass die Startseite in dieses Menue eingebunden werden kann. Daher muss man sich mit einem Trick behelfen. Man vor den von den wp_list_pages einen Listeneintrag mit dem Link zur Startseite ein. Also so:

<ul id="menu">
  <li><a href="<?php bloginfo('siteurl'); ?>/" title="Zur Startseite">Start</a></li>
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

Damit haben wir einen Link zur Startseite, der auf die selbe CSS Gestaltung hört, wie der Rest des Menues. Im nächsten Schritt geht es nun an die eigentliche Kunst, dass der Status der Startseite abgefragt wird.

Aktiver Status für die Startseite

Der oben hinzugefügte Link zur Startseite bringt leider nicht das Attribut .current_page_item im aktiven Zustand mit. Und hier kommt die angedrohte Handarbeit. Man ist ja mit solchen Ideen selten alleine und so gibt es auch für dieses Problem bereits eine Lösung von Texto.de, die ich leicht angepasst habe.

<?php if(!is_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>

Mit dieser Abfrage wird also abgefragt, ob die Seite, auf der wir uns befinden keine “Seite ” ist (!is_page). Wenn dem so ist, dann wird als Klasse eben das gewünschte .current_page_item ausgegeben. Andernfalls eben nicht. Keine “Seiten” sind im Prinzip alle Seiten, außer denen, die tatsächlich extra angelegte Seiten sind. In diesem Blog also who is und Datenschutz. Bei allen anderen “Seiten”, also z.B. der Suche, Archiven, Artikeln und natürlich der Startseite, wird für den Startseiten-Eintrag im Menue der Status .current_page_item ausgegeben.

Natürlich kann man die Abfrage auch anpassen , sodass tatsächlich ausschließlich die Startseite als aktiver Status ausgegeben wird. Dann muss die Zeile so heißen:

<?php if(is_front_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>

Eingebaut sieht das Ganze dann folgendermaßen aus:

<ul id="menu">
  <li<?php if(!is_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>><a href="<?php bloginfo('siteurl'); ?>/" title="Zur Startseite">Start</a></li>
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

Soweit. Viel Spaß damit.

Kein Plugin, eine Lösung!

Die Vorgehensweise ist einfach. Man ließt einen Artikel und findet ihn erwähnenswert. Was früher noch bedeutet hat, dass man einen Blog-Eintrag schreiben muss wird heute oftmals nur noch über Twitter verbreitet. Es ist also zeitgemäß und benutzerfreundlich als Blogbetreiber einen Link am Ende eines Artikel anzubieten, mit dem Leser den Beitrag ohne Umwege direkt über ihren Twitter Account veröffentlichen können.

Viele WordPress Plugins, wie TweetSuite, oder andere gehen zu Lasten der Performance, da bei jedem Aufruf der Artikelseite eine verkürzte URL des Permalinks erzeugt wird, wozu eine externe Schnittstelle aufgerufen wird.

Die Lösung von Sergej heißt folglich: Speicherung der Short-URL. Der URL-Kürzungs-Dienst – in seinem Skript bit.ly wird lediglich einmal angerufen. Die übermittelte Kurz-URL wird zwischen gespeichert und kann beim nächsten Aufruf des Artikels direkt verwendet werden.

Das nenn ich mal eine smarte Lösung.

Anpassung und Einbau

Der von Sergej angebotene Code-Schnipsel muss in die funktions.php des eigenen WordPress Themes eingebaut werden. Der hier angezeigte Code ist nur zur Darstellung gedacht. Da Sergej den Code auf der entsprechenden Seite immer wieder anpasst, ist es dringend zu empfehlen den  Code dort zu kopieren!

<?php
if (!function_exists('save_tweet_link')) {
  function save_tweet_link($id) {
    $url = wp_remote_retrieve_body(
      wp_remote_get(
        'http://bit.ly/api?url=' .get_permalink($id)
      )
    );
    if (!$url) {
      return sprintf(
        '%s?p=%s',
        get_bloginfo('url'),
        $id
      );
    }
    add_post_meta(
      $id,
      '_tweet_trim_url',
      $url
    );
    return $url;
  }
}

if (!function_exists('the_tweet_link')) {
  function the_tweet_link() {
    if (!$url = get_post_meta(get_the_ID(), '_tweet_trim_url', true)) {
      $url = save_tweet_link(get_the_ID());
    }
    echo sprintf(
      'http://twitter.com/home?status=%s%s%s',
      urlencode('Lese grade: '),
      $url,
      urlencode(' (via @wpSEO)')
    );
  }
}
?>

Die einzige Anpassung, die ich vorgenommen habe ist, dass ich die unteren 3 Zeilen von

      urlencode('Lese grade: '),
      $url,
      urlencode(' (via @wpSEO)')

in geändert habe.

      urlencode('Lese grade: '),
      $url,
      urlencode(' (via @Tocki)')

Das Script läuft bei mir ganz hervorragend und ich bin mit der Performance sehr zufrieden.

Video-Flash.de

Dies ist der Blog von Florian Plag, auf dem er regelmäßig Tipps und Tricks zu den Themen Flash, Air und Flex veröffentlicht. Außerdem ist der Florian uach der entwickler der wundervollen Tools SWF Screensaver for Mac, FLV Flash Fullscreen Video Player und des Flex Video Players, die er ebenfalls ehrenvoll auf seinem Blog zum freien Download anbietet.

Min-Style.de/blog

Der Blog des “Digital Media Designers” Jann De Vries. Janns Blog mag ich, weil er mich immer wieder auf Dinge aufmerksam macht, zu denen ich sonst keinen Zugang habe. Ebenfalls ist sein Twitter-Stream wärmstens zu empfehlen.

DerSven.de

Der Blog von Sven Ludenau kommt regelmäßig in meine Lieblingsbloglisten und somit ist es müßig weiter über ihn zu schreiben. Einfach sehenswert.

montrealmusic.tv

MONTREALmusic ist ein Projekt von Andreas Krätschmer (blicfilm) mit dem er der Musikszene von Montreal eine Plattform geschaffen hat. Künstler werden vorgestellt, oder können selbst Videos einschicken.

Nach Dienstschluss

Rezeptidee gefällig? Florian Siepert kocht jeden Tag nach Dienstschluss ein Abendessen und stellt das Rezept und ein schmackhaftes Bild ins Netz. Mahlzeit!

Das neue Theme: TOCKI-one

Neben den Farben Pink und Cyan, die als einzige Vorgabe von meiner Portfolio-Seite tocki.de kommen, ist die größte Neuerung natürlich das neutrale Grau. Mich hat das Braun ja schon länger gestört – irgendwie sehr dominant und vor allem bei Bildern eben nicht neutral genug.

Aber es gibt auch technisch Neues

- Lightbox
- Markierung von Suchbegriffen auf der Trefferliste
- Downloads verwalten und erstellen
- Configurable tag Cloud (Schlagwortwolke im Footer)
- der jQuery Contentslider auf der Startseite
- jQuery Effekt bei den Thumbs auf Startseite und Folgeseiten

Besonders freue ich mich über die Zufallsbeiträge, wenn man nach einem Begriff sucht, den es auf diesem Blog nicht gibt – einfach mal ausprobieren.

In Kürze wird es einen ausführlichen Artikel über die verwendeten Plugins geben.

Die Geschichte des Blog.Tocki

Angefangen hat alles im Januar 2008. Ich hatte wohl mal von “WordPress” und “Bloggen” gehört, aber wusste nicht so recht was damit anzufangen. Also startete ich den ersten Blog unter tocki.wordpress.com – ein guter Einstieg für alle, die “das mit dem Bloggen” mal ausprobieren wollen, weil kostenfrei und unkompliziert: wordpress.com.

Bereits nach einem halben Jahr erreichte der Blog 10.000 Besucher, was mich enorm überraschte, da ich den Blog bis dahin eigentlich nur als persönliches Nachschlagewerk verwendete – was im Grunde so geblieben ist.

Im Oktober 2008 war ich dann an die Grenzen der Plattform auf wordperss.com gestoßen und bin mit dem Blog auf meinen eigenen Webspace umgezogen – dank der vorbildlichen Export/Importfunktion von WordPress ein Kinderspiel. Auf der eigenen WordPress-Installation konnte jetzt fleißig mit Plugins, Themes und Widgets experimentiert werden.

Bereits nach etwas weniger als 2 Monaten waren dann erneut 10.000 Besucher auf diesem Blog. Nachdem ich den Besucherzähler beim Umzug natürlich nicht mit übernehmen konnte waren es die ersten 10.000 Besucher auf blog.tocki.de.

Ende Dezember kam dann das individualisierte Theme, eine Bearbeitung des Unsleepable Themes, das ich in seiner ursprünglichen Version bereits unter tocki.wordpress.com verwendete. Das Theme wurde ständig verbessert und durch Plugins und Scripts auf neue Services, wie z.B. Twitter eingestellt.

Dieses Theme hat es dann recht lange geschafft, bis ich Anfang Juni 2009 angefangen habe meine lange angekündigte Portfolio-Seite tocki.de tatsächlich mal umzusetzen. Im Zuge des Entwurfes kam die Idee den Blog Formal an das Portfolio anzupassen. Der Entwurf war zunächst eine farblich komplett invertierte Version von tocki.de, letztendlich ist von dieser Idee lediglich das Grau geblieben. Zunächst war auch eine stärkere Integration meines Twitter-Streams vorgesehen, was zum jetzigen Zeitpunkt noch nicht umgesetzt ist.

Was noch zu tun bleibt

In der nächsten Zeit wird es für mich darum gehen allen Beiträgen hübsche große Bilder für dn Kopfbereich und Thumbnails für die Übersichtsseiten zu verpassen. Außerdem muss ich bei etlichen noch Artikeln den Excerpt, also den Textauszug, den man auf den Übersichtsseiten sehen kann anzupassen. Alles das soll in den nächsten paar tagen geschehen.

Ausgang des ersten Entwurfs ist das Layout und Raster von tocki.de. Der Hintergrund ist der invertierterte tocki.de Hintergrund und die Farben Cyan und Magenta stehen auf dem hellen grau ebenso gut. An der Aufteilung wird sich bestimmt noch einiges tun, aber die Grundidee gefällt mir schon ganz  gut. Vorschau gibts hier: labs.tocki.de/blog-redesign.