<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog.Tocki &#124; Tilman Ockert, Stuttgart &#187; Webdesign</title>
	<atom:link href="http://www.blog.tocki.de/category/webdesign-mediengestaltung/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.blog.tocki.de</link>
	<description>Mediengestaltung &#38; Grenzgebiete</description>
	<lastBuildDate>Thu, 01 Jul 2010 12:14:01 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Goolge&#8217;s Pacman Game</title>
		<link>http://www.blog.tocki.de/2010-05-28/goolges-pacman-game/</link>
		<comments>http://www.blog.tocki.de/2010-05-28/goolges-pacman-game/#comments</comments>
		<pubDate>Fri, 28 May 2010 12:02:21 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Spass]]></category>
		<category><![CDATA[Technologie]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=3454</guid>
		<description><![CDATA[Da hat sich Google für den 30sten Geburtstag von Pacman doch mal was nettes einfallen lassen und das Google Logo in ein Pacman-Spiel verwandelt. Neben dem gesamtwirtschaftlichen Schaden (angeblich wurden 4,8 Millionen Stunden spielend verbracht) gibt es aber auch ein programmiertechnisches Leckerli. Das ganze Spiel wurde mit JavaScript und nur einem Bild (Sprite) umgesetzt. Die [...]]]></description>
			<content:encoded><![CDATA[<p>Da hat sich Google für den 30sten Geburtstag von <a href="http://de.wikipedia.org/wiki/Pac-Man">Pacman</a> doch mal was nettes einfallen lassen und das Google Logo in ein Pacman-Spiel verwandelt.<span id="more-3454"></span> Neben dem gesamtwirtschaftlichen Schaden (angeblich wurden 4,8 Millionen Stunden spielend verbracht) gibt es aber auch ein programmiertechnisches Leckerli. Das ganze Spiel wurde mit JavaScript und nur einem Bild (Sprite) umgesetzt.</p>
<h3>Die Gute Nachricht vorweg: man kann weiter spielen!</h3>
<p>Google macht alle seine Doodles (so heißen die Abwandlungen des Logos) <a href="http://www.google.com/logos/">in einem Archiv erreichbar</a>. Unter anderem eben auch das <a href="http://www.google.com/pacman/">Pacman-Doodle</a>.</p>
<h3>Das Google Logo als Pacman Spiel</h3>
<p><img class="alignnone size-full wp-image-3464" title="Google-Packman-Doodle-Logo" src="http://www.blog.tocki.de/wp-content/uploads/2010/05/Google-Packman-Doodle-Logo.jpg" alt="" width="650" height="320" /></p>
<p>Das sahen die Besucher von google.com am 21.Mai 2010. Es war das erste intarktiv umgesetzte Doodle und ebenfalls das erste, das auf Grund der positiven Reaktionen einen Tag länger online bleiben durfte, als geplant.</p>
<p>Nach einer kurzen Wartezeit in der lediglich ein Bild zu sehen war, startete das JavaScript. Bedenkt man, dass einer <a href="http://matthiasschuetz.com/google-doodle-als-interaktives-pac-man-spiel">Rechnung von Mathias Schütz</a> zufolge das Spiel einen Traffic von etwa 33 TB/Tag erzeugte wundert es nicht, dass die Entwickler versucht haben die Serveranfragen so gering, wie möglich zu halten.</p>
<h3>CSS, JavaScript und HTML</h3>
<p>Die Lösung ist genial und läuft sogar <a href="http://www.pcworld.com/article/196895/googles_pacman_works_on_iphone_ipad_subtle_jab_at_jobs.html">auf iPhone/iPad</a>. Statt für jedes Geräusch ein eigenes Audio File zu laden wurden alle Sounds in ein Flash-File gepackt, ansonsten ist alles JavaScript und CSS. Alle Grafiken, die für das Spiel gebraucht werden sind in einer großen Bilddatei enthalten. Somit reduziert Google die Serveranfragen auf nur 2-3, je nach Browser.</p>

<a href='http://www.blog.tocki.de/?attachment_id=3473' title='Das Vorschaubild, das angezeigt wird, bevor das Spiel startet'><img width="200" height="186" src="http://www.blog.tocki.de/wp-content/uploads/2010/05/pacman10-hp1-200x186.png" class="attachment-thumbnail" alt="Das Vorschaubild, das angezeigt wird, bevor das Spiel startet" title="Das Vorschaubild, das angezeigt wird, bevor das Spiel startet" /></a>
<a href='http://www.blog.tocki.de/?attachment_id=3474' title='Das Sprite, in dem alle Grafiken des Spiels stecken und das per JvaScript und CSS in das Spiel eingesetzt wird'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2010/05/pacman10-hp-sprite-21-200x200.png" class="attachment-thumbnail" alt="Das Sprite, in dem alle Grafiken des Spiels stecken und das per JvaScript und CSS in das Spiel eingesetzt wird" title="Das Sprite, in dem alle Grafiken des Spiels stecken und das per JvaScript und CSS in das Spiel eingesetzt wird" /></a>
<a href='http://www.blog.tocki.de/?attachment_id=3472' title='Das Spiel in Action'><img width="200" height="186" src="http://www.blog.tocki.de/wp-content/uploads/2010/05/Pacman-the-Googel-Game1-200x186.jpg" class="attachment-thumbnail" alt="Das Spiel in Action" title="Das Spiel in Action" /></a>

<h3>Wirtschaflticher Schaden</h3>
<p><a href="http://blog.rescuetime.com/2010/05/24/the-tragic-cost-of-google-pac-man-4-82-million-hours/">Diese Rechnung</a> brachte mich dann aber doch zum Schmunzeln:<br />
Durch das Spiel stieg an diesem Freitag die Verweildauer der Besucher auf Google um durchschnittlich 36 Sekunden. Bedenkt man nun, dass am selben Tag 504.703.000 Besucher auf der Seite waren, von denen geschättz nur jeder vierte bemerkt hat, dass man mit dem Logo spielen kann, dann errechnet sich eine reine Spielzeit von ca. 4.820.000 Stunden. Bei einem Stundenlohn von 25.- Dollar (ca. 20.- Euro) soll sich ein gesamtwirtschaftlicher Schaden von 120.483.800.- Dollar, also 97.684.287.- Euro errechnen lassen.</p>
<h3>Kleiner Tipp: Mrs. Pac Man</h3>
<p>Wie schon bei der Version auf google.com kann man das Spiel durch das zweimalige Klicken auf &#8220;Insert Coin&#8221; mit Pac Man und Mrs. Pac Man spielen. Frau Pac Man steuert man mittels W,A,S und D.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2010-05-28/goolges-pacman-game/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Googles Font API</title>
		<link>http://www.blog.tocki.de/2010-05-20/googles-font-api/</link>
		<comments>http://www.blog.tocki.de/2010-05-20/googles-font-api/#comments</comments>
		<pubDate>Thu, 20 May 2010 14:06:45 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Skripts]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Typografie]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=3431</guid>
		<description><![CDATA[Seit etwa einem Jahr versuchen Web-Entwickler die lästige Begrenzung auf Standardschriftarten zu umgehen. Jetzt greift Google in die Geschichte ein und zeigt wie einfach so etwas sein kann. Die Situation Wir Webdesigner hätten uns schon beinahe daran gewöhnt und die Beschränkung auf die Standardfonts wie Times, Tahoma, Verdana etc. als unumgänglichen Zustand akzeptiert. Dann aber [...]]]></description>
			<content:encoded><![CDATA[<p>Seit etwa einem Jahr versuchen Web-Entwickler die lästige Begrenzung auf Standardschriftarten zu umgehen. Jetzt greift Google in die Geschichte ein und zeigt wie einfach so etwas sein kann.<span id="more-3431"></span></p>
<h3>Die Situation</h3>
<p>Wir Webdesigner hätten uns schon beinahe daran gewöhnt und die Beschränkung auf die Standardfonts wie Times, Tahoma, Verdana etc. als unumgänglichen Zustand akzeptiert. Dann aber zeigte die zunehmende Verbreitung von JavaScript die Möglichkeit Schriftarten temporär im Browser zu laden und für eine bestimmte Website anzuwenden.</p>
<p>Leider waren die Lösungsansätze nicht richtig stabil, erforderten eine Browsererkennung oder waren derart umständlich zu verwenden, dass einem schnell die Lust am Ausprobieren verging.</p>
<h3>Goolges Weg: Google Font API / Google Font Directory</h3>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2010/05/GoogleFontDirectory.jpg" rel="lightbox[3431]"><img class="alignright size-thumbnail wp-image-3436" style="margin-top: 5px;" title="GoogleFontDirectory" src="http://www.blog.tocki.de/wp-content/uploads/2010/05/GoogleFontDirectory-200x200.jpg" alt="" width="200" height="200" /></a>Seit heute biete Google Labs eine sehr smoothe Lösung an:<br />
die <a href="http://code.google.com/intl/de-DE/apis/webfonts/">Google Font API</a>.</p>
<p>Google hostet also auf seinen Servern eine kleine aber schicke Auswahl an Open Fonts, darunter z.B. die Droid, aber auch bereits bekannte Fonts, wie die Vollkorn und Yanone Kaffeesatz. Diese kann man durch eine simple Zeile Code im Header einbinden und dann im CSS ansprechen.</p>
<p>Typisch Google gibt es ein <a href="http://code.google.com/webfonts/preview">Vorschau-Tool</a>, bei dem man sich seine Schriftart aussuchen kann und Parameter, wie Text-Decoration, Spacing und sogar Shadow einrichten kann. Der Code-Schnipsel darunter wird gleich angepasst und muss nur noch in die eigene Seite eingefügt werden.</p>
<h3>Einfacher gehts nicht.</h3>
<p>Keine Ahnung, wie Google die Anfrage serverseitig löst, aber ich hab noch keine bessere, simplere Implementierung von Schriftarten in eine Website gesehen. Momentan ist das ganze noch Beta bei Google Labs, sobald es aber fester Bestandteil der Entwickler Tools von Google wird, muss ich das mal einbauen. Bis dahin muss diese kleine Demo reichen:</p>
<p><a href="http://labs.tocki.de/googlefont/" target="_blank"><img title="Demo Button" src="http://www.blog.tocki.de/wp-content/themes/TOCKI-one/style/css-bilder/demo-btn.gif" alt="Demo" width="632" height="53" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2010-05-20/googles-font-api/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Redesign stbhoch3</title>
		<link>http://www.blog.tocki.de/2010-04-13/redesign-stbhoch3/</link>
		<comments>http://www.blog.tocki.de/2010-04-13/redesign-stbhoch3/#comments</comments>
		<pubDate>Tue, 13 Apr 2010 17:43:16 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Mediengestaltung]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Portfolio]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=3185</guid>
		<description><![CDATA[Redesign der Web-Visitenkarte von Diana Mayer-Bartholmeß (Steuerberaterin)]]></description>
			<content:encoded><![CDATA[<p>Bereits Ende März habe ich für <a href="http://modular-web.de" target="_blank">modular</a> die neue <a href="http://stbhoch3.de/" target="_blank">Web-Visitenkarte der Steuerberaterin Diana Mayer-Bartholmeß</a> fertiggestellt.<span id="more-3185"></span> Als Vorlage galt die alte Website von 1999, die sich optisch abgenutzt hatte.</p>
<p>Das Redesign enthält Wiedererkennungsmerkmale, wie das stilisierte Portrait unten rechts, sowie das Logo und das Grün. Wenn auch das grün jetzt nicht mehr ganz so flächig eingesetzt wird, was die Wirkung aber eher verstärkt. Das Foto, das bisher etwas undefiniert in der rechten Ecke stand wird jetzt durch den Rahmen gefasst. Text läuft jetzt nicht mehr über das Foto und es ist ausreichend platz, um ohne merkwürdige Scrollbalken aus zu kommen.</p>
<p>Als Ergebnis steht eine schicke kleine Web-Visitenkarte, die alle wichtigen Informationen enthält, Kontaktmöglichkeiten bietet und ein frisches Layout mit bekannten Merkmalen verbindet.</p>

<a href='http://www.blog.tocki.de/2010-04-13/redesign-stbhoch3/stb3-alt/' title='die alte Website vor dem Redesign'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2010/04/stb3-alt-200x200.jpg" class="attachment-thumbnail" alt="die alte Website vor dem Redesign" title="die alte Website vor dem Redesign" /></a>
<a href='http://www.blog.tocki.de/2010-04-13/redesign-stbhoch3/stb3-neu/' title='nach dem Redesign'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2010/04/stb3-neu-200x200.jpg" class="attachment-thumbnail" alt="nach dem Redesign" title="nach dem Redesign" /></a>
<a href='http://www.blog.tocki.de/2010-04-13/redesign-stbhoch3/stb3-neu2/' title='nach dem Redesign'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2010/04/stb3-neu2-200x200.jpg" class="attachment-thumbnail" alt="nach dem Redesign" title="nach dem Redesign" /></a>

<p>Ganz links ist die Website vor dem Redesign zu sehen. Daneben die aktuelle Gestaltung. Neben den Veränderungen in der Gestaltung gab es natürlich auch ein aktuelles Foto.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2010-04-13/redesign-stbhoch3/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>goCashmere Relaunch</title>
		<link>http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/</link>
		<comments>http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 13:40:50 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=2725</guid>
		<description><![CDATA[Bereits im Juni 2009 habe ich bei modular eine Webpräsenz für das Stuttgarter Modelabel goCashmere entwickelt. Die wurde jetzt für die Sommerkollektion 2010 überarbeitet und erweitert. jQuery und Prototype Wie ja bekannt sein wird arbeite ich sehr gerne mit jQuery als JavaScript Bibliothek. So kam diesmal das Cycle Script von Mike Alsup zur Verwendung. Allerdings [...]]]></description>
			<content:encoded><![CDATA[<p>Bereits im <a href="http://www.blog.tocki.de/2009-06-16/gocashmere-launch/">Juni 2009</a> habe ich bei <a href="http://modular-web.de/">modular</a> eine Webpräsenz für das Stuttgarter Modelabel <a href="http://www.gocashmere.com">goCashmere</a> entwickelt. <span id="more-2725"></span>Die wurde jetzt für die Sommerkollektion 2010 <a href="http://modulspace.de/2009/12/website-relaunch-von-gocashmere-com/">überarbeitet und erweitert</a>.</p>
<h3>jQuery und Prototype</h3>
<p>Wie ja bekannt sein wird arbeite ich sehr gerne mit <a href="http://jquery.com/">jQuery</a> als JavaScript Bibliothek. So kam diesmal das <a href="http://malsup.com/jquery/cycle/">Cycle Script</a> von Mike Alsup zur Verwendung. Allerdings gibt es kein besseres Lightbox Script, als das <a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox v2 Script</a> von Lokesh Dhakar, welches aber <a href="http://script.aculo.us/">Prototype/Scriptaculous</a> verwendet. Daher hab ich bei diesem Projekt beides verwendet.</p>
<h3>Screenshots</h3>
<p>Natürlich fällt es leicht eine gute Seite zu machen, wenn man auf gutes Fotomaterial zurückgreifen kann.</p>

<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-01/' title='gocashmere-redesign-01'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-01-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-01" title="gocashmere-redesign-01" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-02/' title='gocashmere-redesign-02'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-02-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-02" title="gocashmere-redesign-02" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-03/' title='gocashmere-redesign-03'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-03-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-03" title="gocashmere-redesign-03" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-04/' title='gocashmere-redesign-04'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-04-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-04" title="gocashmere-redesign-04" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-05/' title='gocashmere-redesign-05'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-05-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-05" title="gocashmere-redesign-05" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-06/' title='gocashmere-redesign-06'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-06-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-06" title="gocashmere-redesign-06" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-07/' title='gocashmere-redesign-07'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-07-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-07" title="gocashmere-redesign-07" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-08/' title='gocashmere-redesign-08'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-08-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-08" title="gocashmere-redesign-08" /></a>
<a href='http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/gocashmere-redesign-09/' title='gocashmere-redesign-09'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/12/gocashmere-redesign-09-200x200.jpg" class="attachment-thumbnail" alt="gocashmere-redesign-09" title="gocashmere-redesign-09" /></a>

]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-12-23/gocashmere-website-relaunch/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>WordPress Workshop</title>
		<link>http://www.blog.tocki.de/2009-11-05/wordpress-workshop/</link>
		<comments>http://www.blog.tocki.de/2009-11-05/wordpress-workshop/#comments</comments>
		<pubDate>Thu, 05 Nov 2009 17:25:28 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[in eigener Sache]]></category>
		<category><![CDATA[Support]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=2423</guid>
		<description><![CDATA[Bei den Medientage Passau vom 06.11. bis 08.11.2009 werde ich ja &#8211; wie bereits erwähnt &#8211; eine Workshop über WordPress halten. Dieser Artikel wird Teil des Workshops sein. Die hier verlinkten Plugins und weiterführenden Seiten werden zur Erstellung des Demo-Blogs, den jeder Teilnehmer erstellen wird, verwendet. Ziel ist es einen einfach WordPress Blog wie diesen [...]]]></description>
			<content:encoded><![CDATA[<p>Bei den <a title="http://www.crossmedia-passau.de" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.crossmedia-passau.de/');" href="http://www.crossmedia-passau.de/">Medientage  Passau</a> vom 06.11. bis 08.11.2009 werde ich ja &#8211; <a title="http://www.blog.tocki.de/2009-10-23/medientage-passau-crossmedia-200/" href="http://www.blog.tocki.de/2009-10-23/medientage-passau-crossmedia-200/">wie bereits erwähnt</a> &#8211; eine Workshop über WordPress halten. Dieser Artikel wird Teil des Workshops sein. <span id="more-2423"></span></p>
<p>Die hier verlinkten Plugins und weiterführenden Seiten werden zur Erstellung des Demo-Blogs, den jeder Teilnehmer erstellen wird, verwendet. Ziel ist es einen einfach WordPress Blog <a title="http://www.modulesque.de/wordpress-test/" href="http://www.modulesque.de/wordpress-test/">wie diesen hier</a> zu erstellen.</p>
<h6>WordPress Core</h6>
<p>Das wichtigste ist natürlich das Blogsystem selbst. Die aktuelle Version in Deutsch gibt es unter <a title="http://de.wordpress.org/" href="http://de.wordpress.org/">de.wordpress.org</a>.</p>
<h6>Plugins Multimedia</h6>
<ol>
<li>Darstellung von Bildern mit dem Lightbox-Script: <a title="http://wordpress.org/extend/plugins/lightbox-2/" href="http://wordpress.org/extend/plugins/lightbox-2/">wordpress.org/extend/plugins/lightbox-2</a></li>
<li>Einbindung von mp3s mit dem WPaudio MP3 Player: <a title="http://wordpress.org/extend/plugins/wpaudio-mp3-player/" href="http://wordpress.org/extend/plugins/wpaudio-mp3-player/">wordpress.org/extend/plugins/wpaudio-mp3-player</a></li>
<li>Einbinden von Videos (auch eigene FLVs) mit Viper&#8217;s Video Quicktags: <a title="http://wordpress.org/extend/plugins/vipers-video-quicktags/" href="http://wordpress.org/extend/plugins/vipers-video-quicktags/">wordpress.org/extend/plugins/vipers-video-quicktags</a></li>
</ol>
<h6>Anpassung für eigene FLVs</h6>
<p>In der &#8220;functions.php&#8221; im Ordner &#8220;wp-includes&#8221; werden die Dateiformate geregelt, die von WordPress akzeptiert werden. Standardmäßig werden FLVs nicht akzeptiert. Also muss man sie nachträglich &#8220;erlauben&#8221;. Dazu die functions.php im Texteditor öffnen. Etwa ab Zeile 2228 werden die Dateiformate beschrieben. dort einfach die folgende Zeile einfügen, speichern, wieder hoch laden, fertig.</p>
<pre>'flv' =&gt; 'video/flv',</pre>
<h6>weitere sinnvolle Plugins</h6>
<ol>
<li>Aksimet zur Spam-Abwehr: <a title="http://wordpress.org/extend/plugins/akismet/" href="http://wordpress.org/extend/plugins/akismet/">wordpress.org/extend/plugins/akismet</a></li>
<li>Statistiken Deines Blogs mit WordPress.com Stats: <a title="http://wordpress.org/extend/plugins/stats/" href="http://wordpress.org/extend/plugins/stats/">wordpress.org/extend/plugins/stats</a></li>
<li>Optimierung für Suchmaschinen mit dem All in One SEO Pack: <a title="http://wordpress.org/extend/plugins/all-in-one-seo-pack/" href="http://wordpress.org/extend/plugins/all-in-one-seo-pack/">wordpress.org/extend/plugins/all-in-one-seo-pack</a></li>
<li>Ebenfalls gut für Google ist  der Sitemaps Generator for WordPress: <a title="http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/" href="http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/">arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator</a></li>
<li>Verwaltung von Downloads mit dem Downloads Manager: <a title="http://wordpress.org/extend/plugins/downloads-manager/" href="http://wordpress.org/extend/plugins/downloads-manager/">wordpress.org/extend/plugins/downloads-manager</a></li>
</ol>
<h6>Resourcen zu WordPress</h6>
<ol>
<li>Plugin Directory auf wordpress.com: <a title="http://wordpress.org/extend/plugins/" href="http://wordpress.org/extend/plugins/">wordpress.org/extend/plugins</a></li>
<li>Free Themes Directory auf wordpress.com: <a title="http://wordpress.org/extend/themes/" href="http://wordpress.org/extend/themes/">wordpress.org/extend/themes</a></li>
<li>Kostenlose Alternative zum selbst gehosteten Blog: <a title="http://wordpress.com/" href="http://wordpress.com/">wordpress.com</a></li>
<li>Weiterführende Details zur Programmierung mit wordpress: <a title="http://codex.wordpress.org/Main_Page" href="http://codex.wordpress.org/Main_Page">codex.wordpress.org</a></li>
<li>WordPress Deutschland mit deutschem Support Forum: <a title="http://wordpress-deutschland.org/" href="http://wordpress-deutschland.org/">wordpress-deutschland.org</a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-11-05/wordpress-workshop/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>WP Home in Navi</title>
		<link>http://www.blog.tocki.de/2009-09-16/wp-home-in-navi/</link>
		<comments>http://www.blog.tocki.de/2009-09-16/wp-home-in-navi/#comments</comments>
		<pubDate>Wed, 16 Sep 2009 06:45:38 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Freebie]]></category>
		<category><![CDATA[Mediengestaltung]]></category>
		<category><![CDATA[Skripts]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[dieser Blog]]></category>
		<category><![CDATA[blog.tocki]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Support]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=1998</guid>
		<description><![CDATA[Die Navigation in WordPress hat man ja mittels wp_list_pages ganz gut im Griff und dank &#8220;current_page_item&#8221; kann man sogar die aktive Seite hervorheben. Nun willst Du aber die Startseite ebenfalls in das Menue aufnehmen und dann auch noch hervorheben? Da ist etwas Handarbeit gefragt. Das Menue in WordPress Zunächst solltest du eine Liste erstellen, die [...]]]></description>
			<content:encoded><![CDATA[<p>Die Navigation in WordPress hat man ja mittels <a title="http://codex.wordpress.org/Template_Tags/wp_list_pages" href="http://codex.wordpress.org/Template_Tags/wp_list_pages">wp_list_pages</a> ganz gut im Griff und dank &#8220;current_page_item&#8221; kann man sogar die aktive Seite hervorheben. Nun willst Du aber die Startseite ebenfalls in das Menue aufnehmen und dann auch noch hervorheben? <span id="more-1998"></span>Da ist etwas Handarbeit gefragt.</p>
<h6>Das Menue in WordPress</h6>
<p>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:</p>
<pre>&lt;ul id="menu"&gt;
  &lt;?php wp_list_pages('sort_column=menu_order&amp;depth=1&amp;title_li='); ?&gt;
&lt;/ul&gt;</pre>
<p>Das bedeutet: Mache eine ul-Liste, die den Namen &#8220;Menu&#8221; 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 &lt;li&gt; und &lt;/li&gt; ausgegeben wird (title_li=). Das erzeugt einen Quelltext, der so aussieht:</p>
<pre>&lt;ul id="menu"&gt;
 &lt;li&gt;&lt;a href="http://www.blog.tocki.de/who-is/"&gt;who is?&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.blog.tocki.de/datenschutz/"&gt;Datenschutz&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<p>Das kann man natürlich vorzüglich mit CSS gestalten. Mein CSS zum Menue sieht folgendermasen aus:</p>
<pre>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;
}</pre>
<p>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:</p>
<pre>&lt;ul id="menu"&gt;
 &lt;li class="current_page_item"&gt;&lt;a href="http://www.blog.tocki.de/who-is/"&gt;who is?&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.blog.tocki.de/datenschutz/"&gt;Datenschutz&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h6>Link zur Startseite hinzufügen</h6>
<p>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:</p>
<pre>&lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a href="&lt;?php bloginfo('siteurl'); ?&gt;/" title="Zur Startseite"&gt;Start&lt;/a&gt;&lt;/li&gt;
  &lt;?php wp_list_pages('sort_column=menu_order&amp;depth=1&amp;title_li='); ?&gt;
&lt;/ul&gt;</pre>
<p>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.</p>
<h6>Aktiver Status für die Startseite</h6>
<p>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 <a title="http://www.texto.de/quick-tipps-startseite-in-die-navigation-einbinden-und-wenn-sie-aktiv-ist-hervorheben-594/" href="http://www.texto.de/quick-tipps-startseite-in-die-navigation-einbinden-und-wenn-sie-aktiv-ist-hervorheben-594/">eine Lösung von Texto.de</a>, die ich leicht angepasst habe.</p>
<pre>&lt;?php if(!is_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?&gt;</pre>
<p>Mit dieser Abfrage wird also abgefragt, ob die Seite, auf der wir uns befinden keine &#8220;Seite &#8221; ist (!is_page). Wenn dem so ist, dann wird als Klasse eben das gewünschte .current_page_item ausgegeben. Andernfalls eben nicht. Keine &#8220;Seiten&#8221; sind im Prinzip alle Seiten, außer denen, die tatsächlich extra angelegte Seiten sind. In diesem Blog also <a title="http://www.blog.tocki.de/who-is/" href="http://www.blog.tocki.de/who-is/">who is</a> und <a title="http://www.blog.tocki.de/datenschutz/" href="http://www.blog.tocki.de/datenschutz/">Datenschutz</a>. Bei allen anderen &#8220;Seiten&#8221;, 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.</p>
<p>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:</p>
<pre>&lt;?php if(is_front_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?&gt;</pre>
<p>Eingebaut sieht das Ganze dann folgendermaßen aus:</p>
<pre>&lt;ul id="menu"&gt;
  &lt;li&lt;?php if(!is_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?&gt;&gt;&lt;a href="&lt;?php bloginfo('siteurl'); ?&gt;/" title="Zur Startseite"&gt;Start&lt;/a&gt;&lt;/li&gt;
  &lt;?php wp_list_pages('sort_column=menu_order&amp;depth=1&amp;title_li='); ?&gt;
&lt;/ul&gt;</pre>
<p>Soweit. Viel Spaß damit.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-09-16/wp-home-in-navi/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Portfolio: Kalenderblog</title>
		<link>http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/</link>
		<comments>http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 07:38:24 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[Mediengestaltung]]></category>
		<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=1789</guid>
		<description><![CDATA[Ein weiteres Projekt fürs Portfolio: der Kalender-Blog. Für modular habe ich den Blog des Kalenderverlags Mannheim (Weingarten und Harenberg) realisiert, mit dem sich die Verlagsgruppe zeitgemäß an Presse und Öffentlichkeit wendet. Der Blog ersetzt die jeweiligen Presse-Unterseiten auf den Verlags-Homepages, wo das dort verwendete CMS keine Möglichkeiten zur angemessenen Präsentation und Suchmaschinenoptimierung gab. Besonderes Augenmerk [...]]]></description>
			<content:encoded><![CDATA[<p>Ein weiteres Projekt fürs Portfolio: der <a title="http://www.kalender-blog.de/" href="http://www.kalender-blog.de/">Kalender-Blog</a>.<br />
Für <a title="http://www.modular-web.de" href="http://www.modular-web.de">modular</a> habe ich den Blog des Kalenderverlags Mannheim (<a title="http://www.weingarten-kalender.de/" href="http://www.weingarten-kalender.de/">Weingarten</a> und <a title="http://www.harenberg-kalender.de/" href="http://www.harenberg-kalender.de/">Harenberg</a>) realisiert, mit dem sich die Verlagsgruppe zeitgemäß an Presse und Öffentlichkeit wendet.</p>
<p><span id="more-1789"></span>Der Blog ersetzt die jeweiligen Presse-Unterseiten auf den Verlags-Homepages, wo das dort verwendete CMS keine Möglichkeiten zur angemessenen Präsentation und Suchmaschinenoptimierung gab. Besonderes Augenmerk wurde auf die Präsentation der hervorragenden Bilder gelegt, auf eine unkomplizierte Schnittstelle für Journalisten, die alle Informationen zu den Kalendern eines Artikels direkt herunterladen können und eine (für Blogs unübliche) klare Trennung von Themengebieten.</p>
<h6>Pressemitteilung von Harenberg und Weingarten</h6>
<p>Ein Auszug aus der offiziellen Pressemitteilung von Petra Singer (<a title="https://www.xing.com/profile/Petra_Singer4" href="https://www.xing.com/profile/Petra_Singer4">Xing</a>), bei <a title="http://www.weingarten-kalender.de/" href="http://www.weingarten-kalender.de/">Weingarten</a> und <a title="http://www.harenberg-kalender.de/" href="http://www.harenberg-kalender.de/">Harenberg</a> zuständig für die Presse- und Öffentlichkeitsarbeit:</p>
<blockquote><p>Neuer Onlineservice für Journalisten: <a href="http://www.kalender-blog.de/">www.kalender-blog.de</a><br />
Serviceblog des Kalenderverlags Mannheim bietet Presseinformationen rund um den Kalenderverlag Mannheim und sein Verlagsprogramm.</p>
<p>Der Kalenderverlag Mannheim hat ein neues Serviceangebot für Journalisten eingerichtet. Unter <a href="http://www.kalender-blog.de/">www.kalender-blog.de</a> finden Medienvertreter ab sofort alle Pressematerialien zu den Kalendermarken Harenberg und Weingarten sowie zu den Kalendern des Bibliographischen Instituts (Duden, Brockhaus, Meyers) auf einen Blick. Informationen zum aktuellen Kalenderprogramm, Pressetexte, Coverabbildungen, Bildergalerie mit Kalenderseiten, Meldungen aus dem Kalenderverlag, Interviews, Porträts und vieles mehr können hier abgerufen werden.</p></blockquote>
<h6>Screenshots und Link</h6>

<a href='http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/kalenderblog-06-2/' title='kalenderblog-06'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/09/kalenderblog-061-200x200.jpg" class="attachment-thumbnail" alt="kalenderblog-06" title="kalenderblog-06" /></a>
<a href='http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/kalenderblog-05-2/' title='kalenderblog-05'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/09/kalenderblog-051-200x200.jpg" class="attachment-thumbnail" alt="kalenderblog-05" title="kalenderblog-05" /></a>
<a href='http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/kalenderblog-04-2/' title='kalenderblog-04'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/09/kalenderblog-041-200x200.jpg" class="attachment-thumbnail" alt="kalenderblog-04" title="kalenderblog-04" /></a>
<a href='http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/kalenderblog-03-2/' title='kalenderblog-03'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/09/kalenderblog-031-200x200.jpg" class="attachment-thumbnail" alt="kalenderblog-03" title="kalenderblog-03" /></a>
<a href='http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/kalenderblog-02-2/' title='kalenderblog-02'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/09/kalenderblog-021-200x200.jpg" class="attachment-thumbnail" alt="kalenderblog-02" title="kalenderblog-02" /></a>
<a href='http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/kalenderblog-01-2/' title='kalenderblog-01'><img width="200" height="200" src="http://www.blog.tocki.de/wp-content/uploads/2009/09/kalenderblog-011-200x200.jpg" class="attachment-thumbnail" alt="kalenderblog-01" title="kalenderblog-01" /></a>

<p>Am besten einfach mal anschauen: <a href="http://www.kalender-blog.de/">www.kalender-blog.de</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-09-03/portfolio-kalenderblog/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Shop Plugin für WordPress</title>
		<link>http://www.blog.tocki.de/2009-08-27/shop-plugin-fur-wordpress/</link>
		<comments>http://www.blog.tocki.de/2009-08-27/shop-plugin-fur-wordpress/#comments</comments>
		<pubDate>Thu, 27 Aug 2009 06:46:30 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Mediengestaltung]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=1748</guid>
		<description><![CDATA[Mit Hilfe des Plungin WP e-Commerce von Instinct kann man eine WordPress Installation um einen echten, ausgewachsenen Shop erweitern. Das Plugin ist in zwei Versionen, einer kostenfreien und einer &#8220;Gold&#8221; Version zu haben. Wobei sich mir der Unterschied nicht wirklich erschließt. Ich habe jedenfalls lediglich die kostenfreie Version getestet und bin &#8211; soweit ich das [...]]]></description>
			<content:encoded><![CDATA[<p>Mit Hilfe des Plungin <a title="http://www.instinct.co.nz/e-commerce/" href="http://www.instinct.co.nz/e-commerce/">WP e-Commerce</a> von <a title="http://www.instinct.co.nz/blog/" href="http://www.instinct.co.nz/blog/">Instinct</a> kann man eine WordPress Installation um einen echten, ausgewachsenen Shop erweitern.</p>
<p><span id="more-1748"></span>Das Plugin ist in zwei Versionen, einer kostenfreien und einer &#8220;Gold&#8221; Version zu haben. Wobei sich mir der Unterschied nicht wirklich erschließt. Ich habe jedenfalls lediglich die kostenfreie Version getestet und bin &#8211; soweit ich das jetzt schon beurteilen kann &#8211; überzeugt.</p>
<h6>Was kann WP e-Commerce</h6>
<p>Installiert man das Plugin, so werden 2 zusätzliche Seiten zur WordPress Installation hinzugefügt. Eine, die den eigentlichen Shop beinhaltet und eine, die den Bezahlvorgang beherbergt. Außerdem werden mehrere Widgets bereitgestellt und ein zusätzlicher Menüpunkt im Backend eingefügt, über den man den Shop bearbeiten kann.</p>
<p>Zu den wichtigsten Features gehören:</p>
<ol>
<li>Produkte können mit Tags versehen werden</li>
<li>Produkte können auch mit Variationen verwaltet werden</li>
<li>Produkte können auch Downloads sein</li>
<li>Rabatt Codes können verwendet werden</li>
<li>verwandte Artikel</li>
<li>unterschiedliche Bezahl-Methoden</li>
<li>Steuer und Versandkosten können angepasst werden</li>
<li>Mengenrabatt</li>
<li>Produktübersicht</li>
</ol>
<h6>Anpassung per CSS</h6>
<p>Die Darstellung der Artikel, der Beschreibung und allem anderen im Shop kann mittels CSS angepasst werden. Außerdem gibt es eine <a title="http://www.instinct.co.nz/e-commerce/docs/themes/" href="http://www.instinct.co.nz/e-commerce/docs/themes/">ausführliche Beschreibung des e-Commerce Themes</a> und der <a title="http://www.instinct.co.nz/e-commerce/products_page-php/" href="http://www.instinct.co.nz/e-commerce/products_page-php/">Products_PHP</a> auf den Seiten des Plugins. Aber bereits die Standard-Darstellung verdirbt einem nicht gleich das ganze Template.</p>
<h6>Backend und Verwaltung</h6>
<h6><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_backend1.jpg" rel="lightbox[1748]"><img class="alignright size-medium wp-image-1750" style="margin-bottom: 0px;" title="WP_e-Commerce_backend1" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_backend1-300x139.jpg" alt="WP_e-Commerce_backend1" width="199" height="92" /></a></h6>
<p>Hinter dem neu hinzugefügten Menüpunkt &#8220;Products&#8221; im Backend verbirgt sich eine relativ intuitive Verwaltung des Shops. Zunächst erhält man eine Übersicht des aktuellen Standes, wie viele Produkte in wie vielen Kategorien und Gruppen befinden sich im Shop. Außerdem kann man den aktuellen Stand der Bestellungen sehen und deren Status, wie man es z.B. von Ebay gewohnt ist, der Realität anpassen.</p>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_backend2.jpg" rel="lightbox[1748]"><img class="alignright size-medium wp-image-1755" title="WP_e-Commerce_backend2" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_backend2-300x276.jpg" alt="WP_e-Commerce_backend2" width="200" height="184" /></a>Der Untermenüpunkt, der verwirrender weise ebenfalls &#8220;Products&#8221; genannt wurde, bring einen zu einer sehr ausführlichen Produktbeschreibung. Hier werden alle Angaben zum Artikel gemacht: Name, Artikelnummer, Preis, Beschreibung, Kategorien und Tags, Mengenrabatt und die Möglichkeit limitierte Stückzahlen einzugeben, sowie die Versandkosten. Leider ist es momentan nicht möglich mehr als ein Foto zum Artikel hinzuzufügen, diese Manko lässt sich aber verkraften, wie ich finde.</p>
<p>Die Einstellungen sind sehr übersichtlich und bieten viele Möglichkeiten. Leider hat bei meiner Testinstallation die Umstellung auf die Sprache Deutsch zu Darstellungsfehlern bei Buttons und Beschriftungen geführt, ich habe mir allerdings auch nicht die Zeit genommen dem Fehler auf den Grund zu gehen.</p>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_backend3.jpg" rel="lightbox[1748]"><img class="alignright size-medium wp-image-1757" title="WP_e-Commerce_backend3" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_backend3-300x173.jpg" alt="WP_e-Commerce_backend3" width="200" height="115" /></a>Die Zahlungsarten reichen von Services, wie Paypal und Google Checkout, bis hin zur normalen Vorkasse.</p>
<p>Das Upgrade auf eine bezahlte Version des Shopsystems kann direkt aus dem Backend heraus geschehen und macht keine Neuinstallation des Plugins nötig. Das schützt den Admin vor unnötigen Bauchschmerzen &#8211; gut gelöst.</p>
<h6>Frontend</h6>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_frontend2.jpg" rel="lightbox[1748]"><img class="size-thumbnail wp-image-1760 alignright" title="WP_e-Commerce_frontend2" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_frontend2-216x216.jpg" alt="WP_e-Commerce_frontend2" width="85" height="85" /></a><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_frontend1.jpg" rel="lightbox[1748]"><img class="size-thumbnail wp-image-1759 alignright" title="WP_e-Commerce_frontend1" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/WP_e-Commerce_frontend1-216x216.jpg" alt="WP_e-Commerce_frontend1" width="85" height="85" /></a>Da dieser Shop &#8211; abhängig vom Theme und den Anpassungen &#8211; überall anders aussehen wird, kann ich hier nur die grundsätzliche Funktion des Plugins beschreiben.<br />
Die Produktübersicht ist gut gelöst und das Bestellen eines Artikels wird sofort an das dazu gehörende Sidebar-Widget weiter gegeben. Zur Kasse gelangt man über den entsprechenden Menüpunkt, oder den kleinen Link im Widget.</p>
<p>Die Kasse ist ebenfalls übersichtlich und klar gegliedert. Der Besucher hat die Möglichkeit die Menge der bestellten Artikel einer Sorte anzupassen, oder den Artikel komplett aus der Bestellliste zu löschen. Rechnungs- und Lieferadresse können getrennt eingegeben werden.</p>
<h6>Fazit</h6>
<p>Ich denke, dass dieses Plugin eine clevere Lösung für all die Projekte sein kann,  bei denen der Onlineshop eine eher untergeordnete Rolle spielt. In diesen Fälle sind <a title="http://www.oscommerce.com/" href="http://www.oscommerce.com/">osCommerce</a> oder <a title="http://www.magentocommerce.com/" href="http://www.magentocommerce.com/">Magento</a> in der Regel mehrere Nummern zu umfangreich und komplex. <a title="http://www.instinct.co.nz/e-commerce/" href="http://www.instinct.co.nz/e-commerce/">WP e-Commerce</a> bietet hier eine smarte Alternative und stellt die Website unter WordPress in den Vordergrund.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-08-27/shop-plugin-fur-wordpress/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Blog.Tocki Redesign</title>
		<link>http://www.blog.tocki.de/2009-08-24/blog-tocki-redesign/</link>
		<comments>http://www.blog.tocki.de/2009-08-24/blog-tocki-redesign/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 14:10:06 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[dieser Blog]]></category>
		<category><![CDATA[blog.tocki]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=1624</guid>
		<description><![CDATA[Es ist soweit. Der Blog.tocki hat sein neues Kleidchen. Nachdem ich bereits vor einiger Zeit das Redesign angekündigt hatte und ich mich nun in die Tiefen von WordPress vorgearbeitet habe, ist es also fertig das neue Theme. Das neue Theme: TOCKI-one Neben den Farben Pink und Cyan, die als einzige Vorgabe von meiner Portfolio-Seite tocki.de [...]]]></description>
			<content:encoded><![CDATA[<p>Es ist soweit. Der Blog.tocki hat sein neues Kleidchen.<br />
Nachdem ich bereits vor einiger Zeit <a title="http://www.blog.tocki.de/2009-07-27/redesign-von-blog-tocki/" href="http://www.blog.tocki.de/2009-07-27/redesign-von-blog-tocki/">das Redesign angekündigt</a> hatte und ich mich nun in die Tiefen von WordPress vorgearbeitet habe, ist es also fertig das neue Theme.<span id="more-1624"></span></p>
<h6><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/alt-neu.jpg" rel="lightbox[1624]"><img class="size-medium wp-image-1640 alignright" title="alt-neu" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/alt-neu-300x215.jpg" alt="alt-neu" width="300" height="215" /></a>Das neue Theme: TOCKI-one</h6>
<p>Neben den Farben Pink und Cyan, die als einzige Vorgabe von meiner Portfolio-Seite <a title="http://tocki.de/" href="http://tocki.de/">tocki.de</a> kommen, ist die größte Neuerung natürlich das neutrale Grau. Mich hat das Braun ja schon länger gestört &#8211; irgendwie sehr dominant und vor allem bei Bildern eben nicht neutral genug.</p>
<h6>Aber es gibt auch technisch Neues</h6>
<p>- Lightbox<br />
- Markierung von Suchbegriffen auf der Trefferliste<br />
- Downloads verwalten und erstellen<br />
- Configurable tag Cloud (Schlagwortwolke im Footer)<br />
- der jQuery Contentslider auf der Startseite<br />
- jQuery Effekt bei den Thumbs auf Startseite und Folgeseiten</p>
<p>Besonders freue ich mich über die Zufallsbeiträge, wenn man nach einem Begriff sucht, den es auf diesem Blog nicht gibt &#8211; <a title="http://www.blog.tocki.de/?s=nsmf&amp;x=0&amp;y=0" href="http://www.blog.tocki.de/?s=nsmf&amp;x=0&amp;y=0">einfach mal ausprobieren</a>.</p>
<p>In Kürze wird es einen ausführlichen Artikel über die verwendeten Plugins geben.</p>
<h6>Die Geschichte des Blog.Tocki</h6>
<p>Angefangen hat alles <a title="http://www.blog.tocki.de/2008-01-05/tockiblog/" href="http://www.blog.tocki.de/2008-01-05/tockiblog/">im Januar 2008</a>. Ich hatte wohl mal von &#8220;WordPress&#8221; und &#8220;Bloggen&#8221; gehört, aber wusste nicht so recht was damit anzufangen. Also startete ich den ersten Blog unter <a title="http://tocki.wordpress.com/" href="http://tocki.wordpress.com/">tocki.wordpress.com</a> &#8211; ein guter Einstieg für alle, die &#8220;das mit dem Bloggen&#8221; mal ausprobieren wollen, weil kostenfrei und unkompliziert: <a title="http://wordpress.com/" href="http://wordpress.com/">wordpress.com</a>.</p>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2008/07/10000-besucher1.jpg" rel="lightbox[1624]"><img class="alignleft size-medium wp-image-222" title="10000-besucher1" src="http://www.blog.tocki.de/wp-content/uploads/2008/07/10000-besucher1-300x113.jpg" alt="10000-besucher1" width="200" height="75" /></a>Bereits nach einem halben Jahr erreichte der <a title="http://tocki.wordpress.com/2008/07/13/10000-besucher/" href="http://tocki.wordpress.com/2008/07/13/10000-besucher/">Blog 10.000 Besucher</a>, was mich enorm überraschte, da ich den Blog bis dahin eigentlich nur als persönliches Nachschlagewerk verwendete &#8211; was im Grunde so geblieben ist.</p>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2008/10/logo.jpg" rel="lightbox[1624]"><img class="size-medium wp-image-405 alignright" title="logo" src="http://www.blog.tocki.de/wp-content/uploads/2008/10/logo-300x96.jpg" alt="logo" width="198" height="63" /></a>Im <a title="http://tocki.wordpress.com/2008/10/06/umzug-1/" href="http://tocki.wordpress.com/2008/10/06/umzug-1/">Oktober 2008 war ich dann an die Grenzen</a> der Plattform auf wordperss.com gestoßen und bin mit dem Blog auf <a title="http://www.blog.tocki.de/2008-10-06/umzug-ii/" href="http://www.blog.tocki.de/2008-10-06/umzug-ii/">meinen eigenen Webspace umgezogen</a> &#8211; 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.</p>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/unsleepable-tocki.jpg" rel="lightbox[1624]"><img class="alignright size-medium wp-image-1634" title="unsleepable-tocki" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/unsleepable-tocki-300x215.jpg" alt="unsleepable-tocki" width="200" height="143" /></a>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 <a title="http://www.blog.tocki.de" href="http://www.blog.tocki.de">blog.tocki.de</a>.</p>
<p>Ende Dezember kam dann das <a title="http://www.blog.tocki.de/2008-12-11/neues-theme-fur-blogtocki/" href="http://www.blog.tocki.de/2008-12-11/neues-theme-fur-blogtocki/">individualisierte Theme</a>, eine Bearbeitung des <a title="http://openswitch.org/unsleepable/" href="http://openswitch.org/unsleepable/">Unsleepable Themes</a>, das ich in seiner ursprünglichen Version bereits unter <a title="http://tocki.wordpress.com/" href="http://tocki.wordpress.com/">tocki.wordpress.com</a> verwendete. Das Theme wurde ständig <a title="http://www.blog.tocki.de/2009-01-22/twitter-und-wordpress/" href="http://www.blog.tocki.de/2009-01-22/twitter-und-wordpress/">verbessert und durch Plugins und Scripts</a> auf neue Services, wie z.B. Twitter eingestellt.</p>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/blog-tocki-preview1.jpg" rel="lightbox[1624]"><img class="alignleft size-medium wp-image-1630" title="blog-tocki-preview" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/blog-tocki-preview1-300x218.jpg" alt="blog-tocki-preview" width="200" height="145" /></a>Dieses Theme hat es dann recht lange geschafft, bis ich Anfang Juni 2009 angefangen habe meine lange angekündigte <a title="http://www.tocki.de" href="http://www.tocki.de">Portfolio-Seite tocki.de</a> 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.</p>
<h6>Was noch zu tun bleibt</h6>
<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-08-24/blog-tocki-redesign/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Google Wave</title>
		<link>http://www.blog.tocki.de/2009-08-21/google-wave/</link>
		<comments>http://www.blog.tocki.de/2009-08-21/google-wave/#comments</comments>
		<pubDate>Fri, 21 Aug 2009 07:00:09 +0000</pubDate>
		<dc:creator>Tilman Ockert</dc:creator>
				<category><![CDATA[Computerzeug]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://www.blog.tocki.de/?p=1565</guid>
		<description><![CDATA[Nachdem Google auf der Developer Conference Ende Mai in San Francisco mit Google Wave die Neuerfindung der E-Mail eingeläutet hat, bin ich nun auf diesen Artikel von Pixelsebi gestoßen, der seit einigen Tagen in der geschlossen Developer Alpha Phase aktiv ist. Was ist Google Wave? Google hat sich die frage gestellt, wie E-Mail wohl sein [...]]]></description>
			<content:encoded><![CDATA[<p>Nachdem Google auf der <a title="http://code.google.com/events/io/" href="http://code.google.com/events/io/">Developer Conference</a> Ende Mai in San Francisco mit <a title="http://wave.google.com/help/wave/about.html" href="http://wave.google.com/help/wave/about.html">Google Wave</a> die Neuerfindung der E-Mail eingeläutet hat, bin ich nun auf <a title="http://www.wildpark.de/market-view/it-technologie/google-wave-eindrucke-aus-der-alpha/" href="http://www.wildpark.de/market-view/it-technologie/google-wave-eindrucke-aus-der-alpha/">diesen Artikel von Pixelsebi</a> gestoßen, der seit einigen Tagen in der geschlossen Developer Alpha Phase aktiv ist.<span id="more-1565"></span></p>
<h6>Was ist Google Wave?</h6>
<p>Google hat sich die frage gestellt, wie E-Mail wohl sein würde, wenn wir das System heute erfinden würden. Immerhin ist E-Mail ein Service, der &#8211; bis auf minimale Veränderungen &#8211; in dieser Form noch aus dem Jahr 1980 stammt. Heraus kam eine Mischung aus E-Mail, Instant Massaging, Twitter, Social Media und Colaboration-Plattform.</p>
<p>Die größte Neuerung in Wave ist meiner Meinung nach die Idee, dass die Nachrichten nicht mehr von einem Server zum anderen verschickt werden (E-Mail), sondern auf einem Server gespeichert werden und dort von von den Nutzern eingesehen werden kann. Wir kennen dieses Prinzip ja von Facebook, oder Twitter.</p>
<p>Wichtig ist dabei, dass Wave auf dem <a href="http://www.waveprotocol.org/">Google Wave Federation Protocol</a> basiert und somit jedem zur Verfügung stehen wird. Bedeutet: Jeder kann Wave auf seinem Server laufen lassen und somit zu einem Provider werden. Waves sollen dabei auch von Provider zu Provider geschickt werden können, damit eine Kommunikation über die Grenzen der eigentlichen Wave-Servers hinweg möglich ist.</p>
<h6>Ok, aber was ist &#8220;eine Wave&#8221;?</h6>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/wave-client.gif" rel="lightbox[1565]"><img class="size-medium wp-image-1568 alignleft" title="wave-client" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/wave-client-300x195.gif" alt="wave-client" width="257" height="167" /></a>Schauen wir uns einmal den Wave-Client von Google an. Die Ansicht ähnelt ein wenig Outlook und die Inhalte der Spalten sind auch ganz ähnlich. Ganz links sind verschiedene Ordner, darunter die Kontakte. In der Mitte eine Art Verlauf, hier erscheinen neue, oder gerade geänderte Waves, ähnlich dem Posteingang bei Outlook. Ganz rechts ist dann die eigentliche Wave.</p>
<p>Eine Wave kann an eine, oder mehrere Personen gerichtet sein und ist ähnlich aufgebaut, wie die Timeline in Facebook. Pixelsebi beschreibt eine Wave sehr passend als einem Container, in denen sich unterschiedlichste Dinge befinden können, die dann von einer Gruppe von Leuten in Echtzeit diskutiert und/oder bearbeitet werden können.</p>
<p>Dabei ist die größte Neuerung, dass die Meldungen nicht mehr chronologisch unter einander stehen müssen. Nutzer können Einträge kommentieren, Zwischenbemerkungen einfügen oder eben doch ganz klassisch unten weiter schreiben. Das macht das Ganze natürlich etwas unübersichtlich, soll aber durch eine Funktion, die mir eine Art Playback des Kommunikationsablaufs abspielen kann, geklärt werden.</p>
<h6>Möglichkeiten der Wave</h6>
<p><a href="http://www.blog.tocki.de/wp-content/uploads/2009/08/one-wave.gif" rel="lightbox[1565]"><img class="alignright size-medium wp-image-1573" title="one-wave" src="http://www.blog.tocki.de/wp-content/uploads/2009/08/one-wave-215x300.gif" alt="one-wave" width="215" height="300" /></a>Eine Wave kann alles Mögliche enthalten, also Videos, Fotos und interessanterweise sogar Applikationen. Außerdem wird es eine <a title="http://code.google.com/apis/wave/embed/guide.html" href="http://code.google.com/apis/wave/embed/guide.html">sehr offene API</a> geben, die es z.B. ermöglichen soll Bilder aus einer Wave unkompliziert in einen Blog einzufügen (<a title="http://wordpress.org/extend/plugins/wavr/" href="http://wordpress.org/extend/plugins/wavr/">Wavr</a> ist ein erster Ansatz für WordPress).</p>
<p>Eine Wave kann auch ein Textdokument sein, an dem mehrere Nutzer gleichzeitig arbeiten können.</p>
<p>&#8220;Gleichzeitig&#8221; ist in Wave sowieso ein sehr direkter Begriff. Wenn zwei Nutzer zeitgleich in einer Wave sind, dann könne sie sich förmlich beim Tippen zusehen. Echtzeitiger geht es kaum.</p>
<p>Der Google Client ist momentan lediglich der einzig verfügbare Client und sollte von der Technologie an sich zunächst getrennt bewertet werden.  Da der Code ja offen gelegt wird ist es wahrscheinlich, dass bald weitere Clients entwickelt werden. Die Technologie des serverseitigen hostens von Nachrichten ist die eigentliche Entwicklung.</p>
<p>Die Beta-Phase startet am 30.September mit insgesamt 100.000 Testern, die auf der Testplattform <a title="http://wave.google.com/" href="http://wave.google.com/">wave.google.com</a> rumspielen dürfen. Bis dahin ist dort noch eine Preview-Seite zu sehen und das Video der ersten Vorstellung von Google Wave.</p>
<p>Zum Abschluss noch das Video von der Google I/O conference vom 27. Mai 2009 &#8211; 1h 20min, aber sehr sehenswert!</p>
<p><a href="http://www.blog.tocki.de/2009-08-21/google-wave/">Eingebettetes Video ansehen</a></p>
<h6>Was noch?</h6>
<p>Mit dem Blog <a title="http://wavetank.de/" href="http://wavetank.de/">wavetank.de</a> haben die Autoren Alexander Benker, Jay Martin, Siggi Becker und Tim Bruysten einen Gegenpol zur allgemeinen Begeisterungswelle gestartet und diskutieren sehr gründlich und fundiert nicht gegen Wave, aber sie versuchen sich der Geschichte etwas neutraler und sachlicher zu nähern. Dabei kommen Artikel zustande wie <a title="http://wavetank.de/2009/08/disruption-und-konflikt-audio-und-folien/" href="http://wavetank.de/2009/08/disruption-und-konflikt-audio-und-folien/">Disruption und Konflikt</a>, oder <a title="http://wavetank.de/2009/08/twitter-vs-wave/" href="http://wavetank.de/2009/08/twitter-vs-wave/">Twitter vs Wave</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.blog.tocki.de/2009-08-21/google-wave/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
