<?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>Fabian Letscher - Blog + Portfolio &#187; Tipps</title>
	<atom:link href="http://fabianletscher.de/tipps/feed" rel="self" type="application/rss+xml" />
	<link>http://fabianletscher.de</link>
	<description>WordPress, Webdesign, HTML5, CSS</description>
	<lastBuildDate>Sun, 12 Feb 2012 10:52:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Mit Piwik umziehen &#8211; Webspace-Wechsel</title>
		<link>http://fabianletscher.de/tipps/mit-piwik-umziehen-webspace-wechsel.html</link>
		<comments>http://fabianletscher.de/tipps/mit-piwik-umziehen-webspace-wechsel.html#comments</comments>
		<pubDate>Fri, 02 Apr 2010 14:28:04 +0000</pubDate>
		<dc:creator>Fabian</dc:creator>
				<category><![CDATA[Tipps]]></category>
		<category><![CDATA[Piwik]]></category>

		<guid isPermaLink="false">http://fabianletscher.de/?p=432</guid>
		<description><![CDATA[Wenn man seinen Webhoster wechselt, möchte man in der Regel auch mit dem Statistik-Tool umziehen. Daher hier eine kurze Erklärung wie dies mit Piwik funktioniert. Dazu wird folgendes benötigt: FTP-Zugriff mit Client phpMyAdmin Zuerst kümmern wir uns um ein Backup der Datenbank. Ich beschreibe hier nur den Weg für phpMyAdmin &#8211; andere Datenbank-Tools funktionieren natürlich [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://fabianletscher.de/wordpress_k4pJ/wp-content/uploads/2010/04/piwik-umzug.png" alt="Webspace-Wechsel mit Piwik" title="piwik-umzug" width="600" height="300" class="center size-full wp-image-435" /></p>
<p><strong>Wenn man seinen Webhoster wechselt, möchte man in der Regel auch mit dem Statistik-Tool umziehen. Daher hier eine kurze Erklärung wie dies mit Piwik funktioniert.</strong></p>
<p>Dazu wird folgendes benötigt:</p>
<ul>
<li>FTP-Zugriff mit Client</li>
<li><a  class="extern" title="Hauptseite von phpMyAdmin" href="http://www.phpmyadmin.net">phpMyAdmin</a></li>
</ul>
<p>Zuerst kümmern wir uns um ein Backup der Datenbank. Ich beschreibe hier nur den Weg für phpMyAdmin &#8211; andere Datenbank-Tools funktionieren natürlich auch. Zuerst wird die entsprechende Datenbank in der linken Spalte ausgewählt. Dann reicht ein Klick auf &#8220;Exportieren&#8221; und mit OK bestätigen. Wenn gewünscht können hier noch Voreinstellungen gemacht werden &#8211; ist aber prinzipiell nicht nötig.</p>
<p>Nun sollte von <a  class="extern" title="Projektseite Piwik" href="http://piwik.org/">Piwik</a> die neueste Version heruntergeladen werden und in das entsprechende Verzeichnis auf dem neuen Webspace kopiert werden. Es ist <em>keine Installation</em> erforderlich! Die <code>config/config.ini.php</code>-Datei vom alten Webspace sollte nun erstmal in den gleichen Ordner auf dem neuen Webspace verschoben werden. Hier nehmen wir einige Einstellungen vor. Dazu die Datei mit einem geeigneten Editor öffnen und bearbeiten:</p>
<pre>[superuser]
login = &quot;Name&quot;
password = &quot;kryptische Ziffern&quot;
email = &quot;Email-Adresse&quot;
salt = &quot;kryptische Ziffern&quot;

[database]
host = &quot;localhost&quot;
username = &quot;Benutername&quot;
password = &quot;Passwort&quot;
dbname = &quot;Datenbankname&quot;
tables_prefix = &quot;piwik_&quot;
adapter = &quot;PDO_MYSQL&quot;
port = 3306</pre>
<p>Im ersten Block sollte nichts verändert werden. Hier sind die Zugangsdaten des Administrators angegeben. Der nächste Block bezieht sich auf die Datenbank. Hier nehmen wir nun die entsprechenden Veränderungen vor. Das Tabellenpräfix sollte behalten werden, da nun gleich das Backup auf dem neuen Server eingespielt wird.</p>
<p>Also phpMyAdmin öffnen und via &#8220;Importieren&#8221; die entsprechende Datei hochladen. Hier sollte man aber sagen, dass es sowohl beim Backup erstellen als auch beim Importieren zu Schwierigkeiten kommen kann, wenn die Datei zu groß ist. Dann müsste diese vorher in kleine Stücke zerlegt werden.</p>
<p>Somit sind wir auch fertig. Zum Abschluss aber noch ein <em>Hinweis</em>: Piwik selbst ist nicht an eine bestimmte URL gebunden &#8211; allerdings der Tracking Code schon. Daher Domain wieder richtig setzen oder Tracking Code im Backend aktualisieren und in die Webseite neu einfügen.</p>
]]></content:encoded>
			<wfw:commentRss>http://fabianletscher.de/tipps/mit-piwik-umziehen-webspace-wechsel.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>WordPress &#8211; mehr Suchergebnisse</title>
		<link>http://fabianletscher.de/tipps/wordpress-mehr-suchergebnisse.html</link>
		<comments>http://fabianletscher.de/tipps/wordpress-mehr-suchergebnisse.html#comments</comments>
		<pubDate>Thu, 18 Jun 2009 14:21:38 +0000</pubDate>
		<dc:creator>Fabian</dc:creator>
				<category><![CDATA[Tipps]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Lösung]]></category>

		<guid isPermaLink="false">http://fabianletscher.de/?p=191</guid>
		<description><![CDATA[In diesem Beitrag geht es um einen kleinen Mehrwert, den ich am Beispiel der Template-Datei search.php zeigen werde. Zunächst soll die Anzahl der Suchergebnisse, sowie das gesuchte Wort ausgegeben werden. Zusätzlich soll die Anzahl der Suchergebnisse auf 10 erhöht werden. Die WordPress-Suche ist nicht gerade die effektivste Lösung, wenn es um das Suchen auf der [...]]]></description>
			<content:encoded><![CDATA[<p>In diesem Beitrag geht es um einen kleinen Mehrwert, den ich am Beispiel der Template-Datei <code>search.php</code> zeigen werde. Zunächst soll die Anzahl der Suchergebnisse, sowie das gesuchte Wort ausgegeben werden. Zusätzlich soll die Anzahl der Suchergebnisse auf 10 erhöht werden.</p>
<p>Die WordPress-Suche ist nicht gerade die effektivste Lösung, wenn es um das Suchen auf der eigenen Plattform geht. Um trotzdem eine kleine Verbesserung zu erzielen und <em>keine</em> Plugins zu nutzen, zeige ich ein paar Funktionen. Zunächst einmal soll in der Überschrift der Seite die Anzahl der Suchergebnisse und das Suchwort mit ausgegeben werden. Dazu findet man in der <a  href="http://codex.wordpress.org/The_Loop" class="extern" title="WP-Codex: The Loop">Loop</a> die Überschrift der Seite. Man ersetzt mit folgendem:
<pre>&lt;code&gt;
&lt;h2&gt;&lt;?php echo $wp_query-&gt;found_posts; ?&gt; Suchergebnisse für &quot;&lt;?php echo the_search_query(); ?&gt;&quot;&lt;/h2&gt;
&lt;/code&gt;</pre>
<p>Der erste Teil fragt die Anzahl der Suchergebnisse ab und mit <code>the_search_query()</code> wird das gesuchte Wort ausgegeben.</p>
<p>Die Anzahl der auszugebenden Suchergebnisse wird grundlegend über das Backend bestimmt. Die Einstellung findet man über &#8220;Einstellungen &rarr; Ausgabe &rarr; Blogseiten zeigen maximal&#8221;. Jedoch bewirkt eine Änderung hier, dass jedes Mal beim Aufruf der Loop genau diese Anzahl an Posts dargestellt wird. Das Problem lässt sich auch wieder direkt in der <code>search.php</code> des Templates lösen mit der <code>query_posts()</code>-Funktion.
<pre>&lt;code&gt;
&lt;?php query_posts($query_string . &#039;&amp;post_type=any&amp;showposts=10&#039;); ?&gt;
&lt;/code&gt;</pre>
<p> Diese Zeile sollte vor Beginn der Loop stehen. Zur Erklärung der Parameter: Die Variable <code>$query_string</code> ist sehr wichtig, da sie dafür sorgt, dass die eigentliche Intention beibehalten wird. Dadurch wird also zunächst einmal der Suchvorgang nicht unterbrochen. Weiterhin wird sowohl in den Artikeln als auch in den Seiten gesucht und die Anzahl der herausgegebenen Suchergebnisse pro Seite auf 10 erhöht.</p>
<p>Bei mir findet die <code>query_posts()</code>-Funktion auch in der <code>archive.php</code> Anwendung, da ich hier auch mehr Posts ausgeben möchte, als grundlegend im Backend eingestellt. Der Einsatz dieser Funktion ist dabei ziemlich vielfältig, wenn es um die Loop geht. Daher lohnt sich ein Blick in die <a  class="extern" title="WP-Codex: query_posts" href="http://codex.wordpress.org/Template_Tags/query_posts">Funktionsreferenz</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://fabianletscher.de/tipps/wordpress-mehr-suchergebnisse.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>WordPress: Das title-Tag für Suchmaschinen optimieren</title>
		<link>http://fabianletscher.de/tipps/wordpress-das-title-tag-fuer-suchmaschinen-optimieren.html</link>
		<comments>http://fabianletscher.de/tipps/wordpress-das-title-tag-fuer-suchmaschinen-optimieren.html#comments</comments>
		<pubDate>Tue, 09 Jun 2009 14:41:33 +0000</pubDate>
		<dc:creator>Fabian</dc:creator>
				<category><![CDATA[Tipps]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[SEO]]></category>

		<guid isPermaLink="false">http://fabianletscher.de/?p=158</guid>
		<description><![CDATA[Gerade habe ich auf CSS-Tricks eine interessante Frage gelesen: Wie geht man am besten mit dem Titel um? Ich möchte hier jetzt keine einmalige Lösung vorschlagen, da das Thema Suchmaschinenoptimierung schwierig genug ist. Jedoch sollte man sich trotzdem über die Bedeutung des Titels bewusst sein. Was man auf jeden Fall meiden sollte, ist ein statischer [...]]]></description>
			<content:encoded><![CDATA[<p>Gerade habe ich auf <a  title="CSS-Tricks" class="extern" href="http://css-tricks.com">CSS-Tricks</a> eine interessante Frage gelesen: <a  class="extern" title="What’s The Best Way To Handle Page Titles?" href="http://css-tricks.com/whats-the-best-way-to-handle-page-titles/">Wie geht man am besten mit dem Titel um?</a><br />
Ich möchte hier jetzt keine einmalige Lösung vorschlagen, da das Thema Suchmaschinenoptimierung schwierig genug ist. Jedoch sollte man sich trotzdem über die Bedeutung des Titels bewusst sein. Was man auf jeden Fall meiden sollte, ist ein statischer Titel. Wenn jede Unterseite den gleichen Titel erhält wie die Startseite, ist das fernab von jeglicher Optimierung.<br />
Wenn man sich die Möglichkeiten auf CSS-Tricks anschaut, kann man für sich selbst sehr gut entscheiden, was die bestmögliche Lösung ist. Die Umsetzung erfolgt dann in der header.php des Templates:</p>
<p>Dabei kann man auch wieder auf die <a  class="extern" title="WP Docs - Conditional Tags" href="http://codex.wordpress.org/Conditional_Tags">Conditional Tags</a> von WordPress zurückgreifen, was ich schon in einem <a  href="http://fabianletscher.de/wordpress/wordpress-und-die-conditional-tags.html" title="WordPress und die Conditional Tags">anderen Beitrag</a> beschrieben habe. Meine Version des title-Tags sieht so aus:
<pre>&lt;code&gt;
&lt;title&gt;
&lt;?php bloginfo(&#039;name&#039;); ?&gt; | &lt;?php bloginfo(&#039;description&#039;); ?&gt;
&lt;?php if ( is_single() ) { ?&gt; &raquo; Blog &lt;?php } ?&gt; &lt;?php wp_title(); ?&gt;
&lt;/title&gt;
&lt;/code&gt;</pre>
<p>Zuerst wird der Blog-Name ausgegeben und dahinter abgetrennt mit &#8220;|&#8221; die Blog-Beschreibung. Beides lässt sich über das WP-Backend festlegen über Einstellungen &rarr; Allgemein. Falls es sich um einen Artikel handelt wird &#8220;&raquo; Blog&#8221; noch dazwischen eingefügt, bevor der Titel der Seite kommt.<br />
In der Gestaltung des Titels ist man relativ frei. Möchte man beispielsweise, dass die Blog-Beschreibung nur auf der Startseite kommt, kann man dies mithilfe von <a  class="extern" title="Info zu is_home()" href="http://codex.wordpress.org/Conditional_Tags#The_Main_Page">is_home()</a> tun.</p>
]]></content:encoded>
			<wfw:commentRss>http://fabianletscher.de/tipps/wordpress-das-title-tag-fuer-suchmaschinen-optimieren.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dynamische 404er Seiten</title>
		<link>http://fabianletscher.de/tipps/dynamische-404er-seiten.html</link>
		<comments>http://fabianletscher.de/tipps/dynamische-404er-seiten.html#comments</comments>
		<pubDate>Mon, 25 May 2009 14:56:04 +0000</pubDate>
		<dc:creator>Fabian</dc:creator>
				<category><![CDATA[Tipps]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Code]]></category>

		<guid isPermaLink="false">http://fabianletscher.de/?p=114</guid>
		<description><![CDATA[Gestern habe ich von meiner neuen 404er-Fehlerseite berichtet. Heute gibt es eine ausführliche Anleitung zu dem &#8220;Vorschläge&#8221;-Prinzip. Doch zunächst noch einmal, was geleistet werden soll: Was soll geleistet werden? Falls ein Nutzer die Adresse einer bestimmten Seite falsch in Erinnerung hat, sollen beim Erscheinen der Fehlerseiten mögliche Kandidaten als Vorschläge erscheinen. Diese sollen einen Hyperlink [...]]]></description>
			<content:encoded><![CDATA[<p>Gestern habe ich von meiner <a  title="Neue 404-Fehlerseite" href="http://fabianletscher.de/gebloggt/neue-404-fehlerseite.html">neuen 404er-Fehlerseite</a> berichtet. Heute gibt es eine ausführliche Anleitung zu dem &#8220;Vorschläge&#8221;-Prinzip. Doch zunächst noch einmal, was geleistet werden soll:</p>
<h3>Was soll geleistet werden?</h3>
<p>Falls ein Nutzer die Adresse einer bestimmten Seite falsch in Erinnerung hat, sollen beim Erscheinen der Fehlerseiten mögliche Kandidaten als Vorschläge erscheinen. Diese sollen einen Hyperlink herausgeben zum gewünschten Artikel oder Seite. Die Datenbank soll dabei durchsucht werden. Das zur Suche verwendete Stichwort ist im Falle einer Trennung mit Backslash (&#8220;/&#8221;) das zuletzt verwendete Wort, bei einer Trennung mit Punkt (z.B. bei einer Dateiangabe wie .html oder .jpg) das Wort vor dem Punkt.</p>
<h3>Die Umsetzung</h3>
<p>Im folgenden Teil wird zunächst die aktuelle Adresse ausgelesen. Dann wird sie in ein Array gepackt welches nach &#8220;/&#8221; abgetrennt wird. Es wird das letzte Wort ermittelt nach einem Backslash. Falls kein Wort mehr dort steht wird das Wort davor weiterverarbeitet.<br />
Dann kommt eine Untersuchung auf Datei-Endungen. Es wird wieder das Wort getrennt, bei einem Punkt. Das Wort vor dem Punkt ist ausschlaggebend und wird als Suchwort benutzt. In dem Array $liste2 befindet sich das Suchwort an &#8220;Platz&#8221; Null.</p>
<pre>&lt;code&gt;
&lt;?php $string = $_SERVER[&#039;REQUEST_URI&#039;];
		$liste = explode(&quot;/&quot;,$string);
		$count = (count($liste)-1);
		if ($liste[$count] == &quot;&quot;) {$string2 = $liste[($count-1)];} else {$string2 = $liste[$count];}
		$liste2 = explode(&quot;.&quot;,$string2);
		// Bis hierin wird der letzte Begriff ausgewählt, welcher in der Adresszeile steht, da dieser höchst wahrscheinlich sinnvoll ist.
&lt;/code&gt;</pre>
<p>Nun geht es weiter mit der Suchanfrage auf die Datenbank.  Es wird dabei im Titel und in einem &#8220;Post&#8221; selbst nach dem Begriff gesucht. Es muss sich um eine Seite oder ein Artikel handeln und darf kein Entwurf sein. Letztlich wird ein Link in einer ungeordneten List ausgegeben. Falls keine Ergebnisse gefunden wurden, erscheint eine Mitteilung.</p>
<pre>&lt;code&gt;
//Nun soll die Suche gestartet werden!
$abfrage = &quot;SELECT * FROM $wpdb-&gt;posts WHERE (post_content LIKE &#039;%&quot;.addslashes(strip_tags($liste2[0])).&quot;%&#039; OR post_title LIKE &#039;%&quot;.addslashes(strip_tags($liste2[0])).&quot;%&#039;) AND (post_type = &#039;page&#039; OR post_type = &#039;post&#039;) AND NOT(post_status = &#039;draft&#039;) GROUP BY post_title ASC&quot;;
$posts = $wpdb-&gt;get_results($abfrage);?&gt;
&lt;?php if (!empty($posts)) { ?&gt;
&lt;p&gt;&lt;em&gt;Hier könnte was passendes dabei sein:&lt;/em&gt;&lt;/p&gt;
&lt;ul&gt;
	&lt;?php foreach($posts as $the_post) { ?&gt;
  	&lt;?php $post = get_postdata($the_post-&gt;ID); ?&gt;
	&lt;li&gt;
	&lt;a href=&quot;&lt;?php echo get_permalink($post[&#039;ID&#039;]); ?&gt;&quot; title=&quot;&lt;?php echo $post[&#039;Title&#039;]; ?&gt;&quot;&gt;
	&lt;?php echo $post[&#039;Title&#039;]; ?&gt;&lt;/a&gt;
      	&lt;/li&gt; &lt;?php } ?&gt;
&lt;/ul&gt;

		&lt;?php } else { ?&gt;
		&lt;p&gt;&lt;em&gt;Leider konnten keine möglichen Ergebnisse angezeigt werden! Benutze bitte die Suche und achte auf die Rechtschreibung!&lt;/em&gt;&lt;/p&gt;
		&lt;?php } ?&gt;

&lt;/code&gt;</pre>
<p>Bei der Suchanfrage ist dem ein oder anderen vielleicht aufgefallen, dass es nicht die übliche Anfrage ist. Diese Version lässt es offen welches Präfix man für seine Tabellen benutzt. Bei der herkömmlichen Methode muss man das mitangeben. Somit ist diese Version unabhängig von der WP-Installation. Diese Art der Abfrage habe ich auf i-jeriko gefunden als ich nach einer Möglichkeit gesucht habe die <a  title="Letzte WordPress-Kommentare anzeigen" class="extern" href="http://www.i-jeriko.de/2006/08/09/wordpress-letzte-kommentare-ausgeben/">letzten WordPress-Kommentare anzuzeigen</a>.</p>
<h3>Was gibt es noch zu bemängeln?</h3>
<p>Ja &#8211; Es ist nicht perfekt! Vieles bleibt bei dieser Art unberücksichtigt. Zum einen muss der Nutzer bereitwillig die vollständige Adresse eintippen (die jedoch nicht existiert). Er darf dabei keine Rechtschreibfehler machen (sofern ich nicht selbst welche dabei habe). Dies wird in den wenigsten Fällen der Fall sein, da wenn man sich schon eine Adresse merkt, dann wird man sie höchstens falsch schreiben. Zudem wird es bei WP-Blogs dann schwierig, wenn sowieso keine sprechenden URLs verwendet werden.<br />
Keine sinnvollen Ergebnisse erhält man bei einer Angabe wie &#8220;/die/&#8221;, da dies letztlich wohl alle Beiträge anzeigt. Die Sortierung ist auch nicht gerade ausgefeilt. Es wird nicht nach Priorität ausgegeben sondern alphabetisch. Somit könnte ein wesentlich besserer Artikel weiter unten stehen und ein unpassender ganz vorne. Jedoch ist es schwierig dies umzusetzen. Man könnte gegebenenfalls die Häufigkeit der Suchwörter als Merkmal benutzen, ob aber dies wirklich viel effektiver ist, bezweifle ich noch.</p>
<p><em>Weitere Tipps, Kritik und Ideen werden gern angenommen.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://fabianletscher.de/tipps/dynamische-404er-seiten.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Komprimierer im Test</title>
		<link>http://fabianletscher.de/css/css-komprimierer-im-test.html</link>
		<comments>http://fabianletscher.de/css/css-komprimierer-im-test.html#comments</comments>
		<pubDate>Sun, 17 May 2009 13:54:53 +0000</pubDate>
		<dc:creator>Fabian</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tipps]]></category>

		<guid isPermaLink="false">http://fabianletscher.de/?p=51</guid>
		<description><![CDATA[Gerade bei der Erstellung des Stylesheets für dieses WP-Theme habe ich festgestellt, dass mein Quelltext sehr aufgebläht ist. Durch Zufall bin ich letztlich auf diverse Webseiten gestoßen, die anbieten den CSS-Code zu komprimieren. Im Folgenden habe ich nun mein Stylesheet dazu verwendet drei solcher CSS-Komprimierer zu testen. Zudem habe ich selbst einige Veränderungen an dem [...]]]></description>
			<content:encoded><![CDATA[<p>Gerade bei der Erstellung des Stylesheets für dieses WP-Theme habe ich festgestellt, dass mein Quelltext sehr aufgebläht ist. Durch Zufall bin ich letztlich auf diverse Webseiten gestoßen, die anbieten den CSS-Code zu komprimieren.<br />
Im Folgenden habe ich nun mein Stylesheet dazu verwendet drei solcher CSS-Komprimierer zu testen. Zudem habe ich selbst einige Veränderungen an dem Stylesheet vorgenommen und werde nun die Ergebnisse präsentieren. In der folgenden Tabelle ist die Dateigröße vor der Komprimierung nicht aufgeführt. Sie beträgt <strong>12283 Bytes</strong>. Die ursprüngliche Datei kann man sich <a  href="http://fabianletscher.de/wp-content/uploads/2009/05/style.css" title="Download stye.css">hier</a> ansehen.</p>
<table>
<thead>
<tr>
<th>Quelle:</th>
<th><a  href="http://www.cleancss.com/" title="CleanCSS" class="extern">CleanCSS</a></th>
<th><a  href="http://www.cssdrive.com/index.php/main/csscompressor/" title="CSS Compressor" class="extern">CSS Compressor</a></th>
<th <a  href="http://www.cssoptimiser.com/" title="CSS Optimiser" class="extern">CSS Optimiser</th>
<th>Eigenarbeit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dateigröße in Byte</td>
<td>11688</td>
<td>11529</td>
<td>13260</td>
<td>10238</td>
</tr>
<tr>
<td>Kompression um</td>
<td>5,09%</td>
<td>6,54%</td>
<td class="red">-7,36%</td>
<td>19,97%</td>
</tr>
<tr>
<td>Darstellung</td>
<td>gleich</td>
<td>gleich</td>
<td>gleich</td>
<td>geringfügig anders</td>
</tr>
<tr>
<td>CSS-Datei</td>
<td><a href="http://fabianletscher.de/wp-content/uploads/2009/05/cleancss.css" title="Download CleanCSS">Ansehen</a></td>
<td><a  href="http://fabianletscher.de/wp-content/uploads/2009/05/cssdrive.css" title="Download CSSDrive">Ansehen</a></td>
<td><a  href="http://fabianletscher.de/wp-content/uploads/2009/05/cssoptimiser.css" title="Download CSS Optimiser">Ansehen</a></td>
<td><a  href="http://fabianletscher.de/wp-content/uploads/2009/05/restyle.css" title="Download bearbeitetes CSS">Ansehen</a></td>
</tr>
<tr>
<td>Beschreibung</td>
<td>Hier werden die Attribute stets untereinander angeordnet (siehe Datei), Elemente mit den gleichen Attributen und Werten werden zusammengefasst und die Leerzeichen zwischen Attribut und Wertzuweisung entfernt. Das Entfernen des letzten Semikolons in einer Klammer ist möglich, genauso wie das Entfernen der Kommentare.</td>
<td>Elemente und Attribute werden in einer Zeile zusammengefasst. Leerzeichen zwischen Attribut und Wert wird entfernt. Keine Zusammenfassung bei gleichen Wertinhalten. Entfernen des letzten Semikolons in der Klammer.</td>
<td>Komplette Zuweisungen erfolgen in einer Zeile. Ein Attribut mit Wertzuweisung wird mehreren Elementen zugeordnet. Semikolon entfällt. Keine Leerzeichen bei der Aufzählung der Elemente. Entfernen der Kommentare.</td>
<td>Logische Neuordnung der Elemente, dazu <a  href="#tipps" title="Tipps zur Optimierung">siehe Tipps</a>.</td>
</tr>
</tbody>
</table>
<h3>Fazit</h3>
<p>In der Tabelle erkennt man deutlich, dass eine Optimierung des Stylesheets sich als schwierig erweist. Die drei benutzen &#8220;Optimierer&#8221; bieten drei verschiedene Ansätze an. Davon vergrößert einer sogar die Datei. Grundlegend hängt diese Optimierung stark vom Aufbau der Datei ab, kann also immer verschiedene Ergebnisse erzielen. Ich würde daher empfehlen, erst mal selbst über den eigenen Code zu schauen. Vieles kann man erst mal selbst verbessern, immerhin kennt der Ersteller sich damit am besten aus. Danach kann man immernoch einen dieser CSS-Verbesserer nutzen und vergleichen welcher den größten Erfolg verbucht.</p>
<h3 id="tipps">Tipps zur Optimierung des eigenen Stylesheets</h3>
<ol>
<li>
<h4>Mehrere IDs sind nicht immer günstig</h4>
<p>Mir ist aufgefallen, dass ich beim Erstellen des Stylesheets viele IDs hintereinander benutze um eine Struktur zu bewahren. Dies ist dann immer unnötig, wenn die ID in keinen Zusammenhang mit einer anderen steht. <em>Beispiel:</em>
<pre>&lt;code&gt;
#wrapper form#searchform {...}
/* Dies lässt sich so vereinfachen */
#searchform {...}
&lt;/code&gt;
</pre>
<p>Die ID &#8220;searchform&#8221; soll immer gleich auf der Seite aussehen, egal welche andere ID davorsteht. Zudem ist klar, dass es sich um eine &#8220;form&#8221; handelt.</li>
<li>
<h4>Gleiche Inhalte zusammenfassen</h4>
<p>Oft kommt es vor, dass man das gleiche Attribut mit dem gleichen Wert im Stylesheet öfters benutzt. Die kann man ganz einfach zusammenführen, indem man die verschieden Elemente mit Kommata abtrennt.
<pre>&lt;code&gt;
#searchform {display:none}
.hide {display:none}
/* Dies lässt sich so vereinfachen */
#seachform, .hide {display:none}

&lt;/code&gt;</pre>
</li>
<li>
<h4>Grundlegende Formatierung vornehmen</h4>
<p>Darunter verstehe ich, dass beispielsweise bei einem Hyperlink das Attribut &#8220;text-decoration&#8221; auf &#8220;none&#8221; gesetzt wird. Falls man dies nicht am Anfang des Stylesheets schon festlegt, muss man jedes &#8220;a&#8221;, dass darin vorkommt mit diesem Wert zuweisen. Das verbraucht unnütz viel Speicherplatz. Einige empfehlen ein Reset-Stylesheet immer einzufügen, das solche grundlegenden Sachen übernimmt.
</li>
<li>
<h4>Kurzschreibweise</h4>
<p>Wirklich effizient ist es die <a  title="neontrauma.de - CSS-Kurzschreibweise" class="extern" href="http://neontrauma.de/xhtml-css/css-kurzschreibweise.php">Kurzschreibweise</a> zu benutzen. Da spart man sich sehr viel Tipparbeit und es spart Platz. Dies funktioniert mit einigen Attributen sehr gut. Hierdurch kann allerdings auch einiges an Übersichtlichkeit verloren gehen. <em>Beispiel:</em>
<pre>&lt;code&gt;
font-family: helvetica, arial, sans-serif;
font-size: 10px;
/* Dies lässt sich so vereinfachen */
font: 1px helvetica, arial, sans-serif;

&lt;/code&gt;</pre>
</li>
<li>
<h4>Das Semikolon vor dem Schließen weglassen</h4>
<p>Wenn die Wertezuweisung zu Ende ist, kann man das Semikolon getrost weglassen. Ich mache dies allerdings nicht, da einer meiner häufigsten Fehlerquellen darin liegt ein Semikolon zu vergessen. Wenn man jedoch fertig ist kann man gerne nochmal drüber schauen und die unnötigen entfernen. <em>Beispiel:</em>
<pre>&lt;code&gt;
a {text-decoration:none;}
/* Dies lässt sich so vereinfachen */
a {text-decoration:none}

&lt;/code&gt;</pre>
</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://fabianletscher.de/css/css-komprimierer-im-test.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress und die Conditional Tags</title>
		<link>http://fabianletscher.de/tipps/wordpress-und-die-conditional-tags.html</link>
		<comments>http://fabianletscher.de/tipps/wordpress-und-die-conditional-tags.html#comments</comments>
		<pubDate>Thu, 14 May 2009 12:24:48 +0000</pubDate>
		<dc:creator>Fabian</dc:creator>
				<category><![CDATA[Tipps]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Code]]></category>

		<guid isPermaLink="false">http://fabianletscher.de/?p=45</guid>
		<description><![CDATA[Das Wort Kondition kommt aus dem lateinischen condicio und bedeutet so viel wie Bedingung. Also geht es hier um Bedingungen! Bei der Gestaltung eines Themes benötigt man solche Bedingungen häufig, da sie zumal auf der Seite des Servers ausgeführt werden und damit den Inhalt dynamisch anpassen. Hier findet man auch genug solcher Bedingungen. Ich habe [...]]]></description>
			<content:encoded><![CDATA[<p>Das Wort Kondition kommt aus dem lateinischen <em>condicio</em> und bedeutet so viel wie Bedingung. Also geht es hier um Bedingungen! Bei der Gestaltung eines Themes benötigt man solche Bedingungen häufig, da sie zumal auf der Seite des Servers ausgeführt werden und damit den Inhalt dynamisch anpassen.</p>
<p>Hier findet man auch genug solcher Bedingungen. Ich habe mich beispielsweise dafür entschieden, die Sidebar so zu gestalten, dass bei einem Artikel die Informationen über den Autor, die Kategorie und Datum der Veröffentlichung in dieser erscheinen. Dies gestaltet sich mit den <a  title="Conditional Tags" class="extern" href="http://codex.wordpress.org/Conditional_Tags">Conditional Tags</a> sehr einfach:</p>
<pre>&lt;code&gt;
&lt;?php if (is_single () ) {
      //Hier erscheint die Anweisung, wenn es ein Artikel ist
   }
&lt;/code&gt;</pre>
<p>Dies ist beliebig erweiterbar. Statt &#8220;single&#8221; kann man, wie die Dokumentation zeigt, eine Vielzahl anderer Bedingungen aufstellen. Es erlaubt einem auch den Titel der Webseite speziell anzupassen und findet in vielen Formen eine Anwendung.</p>
]]></content:encoded>
			<wfw:commentRss>http://fabianletscher.de/tipps/wordpress-und-die-conditional-tags.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

