<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" version="2.0">

<channel>
	<title>Blog-Experiment</title>
	
	<link>http://www.blog-experiment.de</link>
	<description />
	<lastBuildDate>Sun, 18 Dec 2011 12:18:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/Blog-experiment" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="blog-experiment" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Python Import Pfad zur Laufzeit erweitern</title>
		<link>http://www.blog-experiment.de/2011-12/python-import-pfad-zur-laufzeit-erweitern/</link>
		<comments>http://www.blog-experiment.de/2011-12/python-import-pfad-zur-laufzeit-erweitern/#comments</comments>
		<pubDate>Sat, 10 Dec 2011 09:51:01 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[Python]]></category>
		<category><![CDATA[Import]]></category>
		<category><![CDATA[Pfad]]></category>
		<category><![CDATA[sys.path.append]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=876</guid>
		<description><![CDATA[Letztlich habe ich nach einer Möglichkeit gesucht, den Import-Pfad innerhalb eines Python-Skripts zur Laufzeit des Skripts zu erweitern. Da Python ja direkt interpretiert wird und nicht vorher kompiliert werden muss, ist das auch möglich. Ausgehend vom aktuellen Pfad erweitert folgendes Skript den Import-Pfad auf ein Unterverzeichnis &#8220;python&#8221;, in dem weitere Skripte liegen. Diese können dann [...]]]></description>
			<content:encoded><![CDATA[<p>Letztlich habe ich nach einer Möglichkeit gesucht, den Import-Pfad innerhalb eines Python-Skripts zur Laufzeit des Skripts zu erweitern. Da Python ja direkt interpretiert wird und nicht vorher kompiliert werden muss, ist das auch möglich.</p>
<p>Ausgehend vom aktuellen Pfad erweitert folgendes Skript den Import-Pfad auf ein Unterverzeichnis &#8220;python&#8221;, in dem weitere Skripte liegen. Diese können dann im Anschluss ebenfalls importiert und verwendet werden.</p>
<p><span id="more-876"></span></p>

<div class="wp_syntax"><div class="code"><pre class="python" style="font-family:monospace;">&nbsp;
<span style="color: #808080; font-style: italic;"># import system packages</span>
<span style="color: #ff7700;font-weight:bold;">import</span> <span style="color: #dc143c;">os</span>
<span style="color: #ff7700;font-weight:bold;">import</span> <span style="color: #dc143c;">sys</span>
&nbsp;
<span style="color: #808080; font-style: italic;"># import local path</span>
exec_path=<span style="color: #dc143c;">os</span>.<span style="color: black;">getcwd</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>                                <span style="color: #808080; font-style: italic;"># aktuelles arbeitsverzeichnis</span>
import_local_path=exec_path+<span style="color: #483d8b;">'/python/'</span>               <span style="color: #808080; font-style: italic;"># unterverzeichnis, in dem weitere skripte liegen</span>
<span style="color: #dc143c;">sys</span>.<span style="color: black;">path</span>.<span style="color: black;">append</span><span style="color: black;">&#40;</span>import_local_path<span style="color: black;">&#41;</span>                   <span style="color: #808080; font-style: italic;"># erweitere system-variable der import-pfade,</span>
                                                     <span style="color: #808080; font-style: italic;"># nach denen gesucht wird</span>
<span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">'import local path: '</span>+import_local_path        <span style="color: #808080; font-style: italic;"># </span>
&nbsp;
<span style="color: #808080; font-style: italic;"># import script                                      # hier jetzt skripte aus lokalen verzeichnis</span>
                                                     <span style="color: #808080; font-style: italic;"># einbinden (import)</span></pre></div></div>

<p>Das Skript importiert also zunächst die beiden Module os und sys, die für die Pfad-Erweiterung benötigt werden. Anschließend wird damit das aktuelle Arbeitsverzeichnis gewonnen. Ausgehend davon wird der neue Pfad festgelegt. Somit sind relativ einfach relative Pfade möglich ohne das aktuelle Arbeitsverzeichnis hardcoden zu müssen. Natürlich wäre letzteres aber auch möglich.<br />
Anschließend wird dann die System-Variable path um den neuen Pfad erweitert. Nun kann man auch alle Module aus diesem Pfad importieren.</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/0huloqrJak6iVlVKKqpkNTNvWQc/0/da"><img src="http://feedads.g.doubleclick.net/~a/0huloqrJak6iVlVKKqpkNTNvWQc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/0huloqrJak6iVlVKKqpkNTNvWQc/1/da"><img src="http://feedads.g.doubleclick.net/~a/0huloqrJak6iVlVKKqpkNTNvWQc/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-12/python-import-pfad-zur-laufzeit-erweitern/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Rückblick Oktober 2011</title>
		<link>http://www.blog-experiment.de/2011-11/rueckblick-oktober-2011/</link>
		<comments>http://www.blog-experiment.de/2011-11/rueckblick-oktober-2011/#comments</comments>
		<pubDate>Thu, 03 Nov 2011 10:11:17 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[Blog-Experiment]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Monatsrückblick]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=861</guid>
		<description><![CDATA[Nach einer erneut recht langen Pause, gibt es nun seit einiger Zeit wieder neue Artikel hier im Blog. Wie auch schon der Pause möchte ich an dieser Stelle natürlich auch wieder regelmäßig zurückblicken und euch ein paar Zahlen präsentieren. Aktuell hat sich zwar noch nicht ganz so viel getan, ich denke aber dennoch, dass so [...]]]></description>
			<content:encoded><![CDATA[<p>Nach einer erneut recht langen Pause, gibt es nun seit einiger Zeit wieder neue Artikel hier im Blog. Wie auch schon der Pause möchte ich an dieser Stelle natürlich auch wieder regelmäßig zurückblicken und euch ein paar Zahlen präsentieren.<br />
Aktuell hat sich zwar noch nicht ganz so viel getan, ich denke aber dennoch, dass so ein Rückblick eine interessante Sache ist. Vor allem auch, weil man dabei selbst feststellen kann, wo man steht und wo man hin möchte.</p>
<p><span id="more-861"></span></p>
<p>An der inhaltlichen Ausrichtung des Blogs soll sich im wesentlichen nichts ändern. Ich möchte an dieser Stelle weiterhin über Themen mit dem Schwerpunkt Webentwicklung schreiben. Das ganze ist ja ein doch sehr lebendiger Bereich, bei dem es auch für mich immer wieder neues zu entdecken gibt. Und so möchte ich hier gerne meine persönlichen Erfahrungen und immer wieder Tipps und Tricks veröffentlichen. Dazwischen soll es aber auch immer wieder Interessantes aus der Blogosphäre geben. Vor der Pause hatte ich ja wöchentlich Link-Tipps veröffentlicht. Das soll es auch weiterhin geben, wenn auch wohl nicht mehr im Wochenrhythmus, sondern vorerst etwas unregelmäßiger. Mal schauen &#8211; vielleicht klappt das mit dem Wochenrhythmus ja auf längere Sicht irgendwann wieder.<br />
Ziel ist, etwa 2 Artikel pro Woche zu bringen. Auch wenn ich durchaus gerne mehr machen würde, so ist das zeitlich einfach recht schwierig. Wer aber Lust und Laune hat einen Gastartikel hier zu platzieren, der ist jederzeit willkommen.</p>
<h3>Besucherstatistik</h3>
<p>Okay, genug der Vorrede, schauen wir uns die Statistik vom Oktober an. Die Zahlen sind von Google Analytics ermittelt.</p>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/11/ga_oct2011.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/11/ga_oct2011.jpg" alt="" title="ga_oct2011" width="247" height="121" class="aligncenter size-full wp-image-873" /></a></p>
<p>Im Monat Oktober gab es immerhin rund 512 Besuche zu verzeichnen. Die meisten Leute sind dabei von Google gekommen. Ein Rückblick auch auf die vergangenen Monate zeigt, dass hierbei vor allem die sehr gute Platzierung einiger früher Artikel hier im Blog verantwortlich ist. So ist das auch aktuell die Haupttraffic-Quelle.<br />
Die wichtigsten Keywords sind dabei <em><a href="http://www.blog-experiment.de/2009-04/abgerundete-ecken-mit-css-border-radius/">css border radius</a></em> und <em><a href="http://www.blog-experiment.de/2010-11/lokalen-webserver-xampp-unter-ubuntu-installieren-und-absichern/">xampp ubuntu</a></em>.</p>
<p>Alles in allem bin ich mit den Zahlen angesichts der langen Pause nicht unzufrieden. Es ist aber auch klar, dass ich natürlich auch daran interessiert bin, die Seite noch bekannter zu machen. Dazu dürfte es vor allem wichtig sein, andere Trafficquellen jenseits von Google zu erschließen. Dabei spielen gute Inhalte zweifellos die Schlüsselrolle, aber Networking dürfte ebenfalls wichtig sein. Diesbezüglich möchte ich mich demnächst vor allem auf Twitter und die Link-Tipps hier im Blog konzentrieren.</p>
<h3>Ziele:</h3>
<p>An verschiedenen Punkten sind die Ziele ja bereits angeklungen. Um es übersichtlicher zu halten, möchte ich diese hier einfach nochmals zusammenfassen.<br />
- etwas stärker um weitere Trafficquellen bemühen<br />
- ca. 2 Artikel pro Woche<br />
- darunter auch Linktipps zu interessanten Artikeln anderer Blogger (Vorschläge gerne per Twitter <a href="http://twitter.com/blogexperiment3" target="_blank">@blogexperiment3</a>)<br />
- ob es für den November bereits klappt, bleibt abzuwarten, aber für Dezember sollten 1000 Besuche pro Monat machbar sein</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/ksfAzLGEB5dTOkBxFXlZDOUihuE/0/da"><img src="http://feedads.g.doubleclick.net/~a/ksfAzLGEB5dTOkBxFXlZDOUihuE/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/ksfAzLGEB5dTOkBxFXlZDOUihuE/1/da"><img src="http://feedads.g.doubleclick.net/~a/ksfAzLGEB5dTOkBxFXlZDOUihuE/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-11/rueckblick-oktober-2011/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>JQuery Plugin-Tipp: slimScroll</title>
		<link>http://www.blog-experiment.de/2011-10/jquery-plugin-tipp-slimscroll/</link>
		<comments>http://www.blog-experiment.de/2011-10/jquery-plugin-tipp-slimscroll/#comments</comments>
		<pubDate>Fri, 28 Oct 2011 10:48:52 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=866</guid>
		<description><![CDATA[Den meisten von euch wird sicherlich die kleine Box oben rechts auf Facebook aufgefallen sein, welche stets die neuesten Aktivitäten anzeigt. Das besondere daran ist jedoch nicht nur, dass diese scheinbar beliebig lang wird, sondern dass diese auch eine sehr feinen Scrollbar mitbringt, die deutlich besser aussieht als die Scrollbar des Systems und vor allem [...]]]></description>
			<content:encoded><![CDATA[<p>Den meisten von euch wird sicherlich die kleine Box oben rechts auf Facebook aufgefallen sein, welche stets die neuesten Aktivitäten anzeigt. Das besondere daran ist jedoch nicht nur, dass diese scheinbar beliebig lang wird, sondern dass diese auch eine sehr feinen Scrollbar mitbringt, die deutlich besser aussieht als die Scrollbar des Systems und vor allem deutlich weniger Platz wegnimmt.<br />
Auf der Suche nach einer entsprechenden Umsetzung dieses Effekts mit JQuery bin ich auf das Plugin <a href="http://rocha.la/jQuery-slimScroll" target="_blank"><em>slimScroll</em> auf rocha.la</a> gestoßen. Dieses bringt genau die gewünschte Funktionalität.</p>
<p>Hier möchte ich euch kurz beschreiben, wie ihr dieses auf eure Webseite einbinden könnt:</p>
<p><span id="more-866"></span></p>
<h3>1. Plugin herunterladen</h3>
<p>Zunächst müsst ihr das Plugin herunterladen und in ein Verzeichnis eurer Wahl packen.<br />
<a href="http://plugins.jquery.com/project/slimScroll" target="_blank">Download von slimScroll</a></p>
<h3>2. JQuery und Plugin einbinden</h3>
<p>An beliebiger Stelle (am besten jedoch im Header- oder Footerbereich) bindet ihr zunächst folgendes ein:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://code.jquery.com/jquery.min.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://code.jquery.com/ui/1.8.16/jquery-ui.min.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://www.euredomain.de/verzeichniseurerwahl/slimScroll.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://www.euredomain.de/verzeichniseurerwahl/main.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>In den ersten beiden Zeilen wird JQuery und JQuery UI direkt von jquery.com eingebunden. Natürlich könnt ihr die beiden JS-Dateien auch auf eurem eigenen Host hinterlegen und die Pfade entsprechend ändern.<br />
In der dritten Zeile wird schließlich das Plugin eingebunden, welches ihr auf eurer Webpräsenz in einem Verzeichnis eurer Wahl hinterlegt habt.</p>
<h3>3. Plugin anwenden</h3>
<p>Nun wollen wir das Plugin auf ein beliebiges Element auf eurer Webseite anwenden und diesem die Scroll-Funktionalität zufügen.</p>
<p>Nehmen wir an, es handelt sich um folgendes DIV-Tag mit der Klasse <em>scrollable</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">'scrollable'</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
  Hier Inhalt der Box einfügen.
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Diese sprechen wir nun mittels JQuery an (wer mit JQuery noch nicht so vertraut ist, findet auf <a href="http://jquery.com" target="_blank">jquery.com</a> einige schöne Einführungen). Folgenden Code fügen wir nun in die <em>main.js</em> ein:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.scrollable&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slimScroll</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		height<span style="color: #339933;">:</span> <span style="color: #3366CC;">'150px'</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Die Klasse <em>scrollable</em> wird hier also mit der slimScroll-Funktion versehen. Hier wird genau ein Parameter verwendet, nämlich die Höhe der Box auf 150px festgesetzt. An dieser Stelle können selbstverständlich Werte eurer Wahl stehen.</p>
<p>Ferner gibt es folgende weiteren Einstellmöglichkeiten:</p>
<ul>
<li>width: Breite der Box. Falls nicht gesetzt, wird dies auf den Wert des Elternelements gesetzt.</li>
<li>size: Größe der Scrollbar.</li>
<li>position: left/right.</li>
<li>color: Farbe der Scrollbar</li>
</ul>
<p><a href="http://rocha.la/jQuery-slimScroll" target="_blank">Anwendungsbeispiele für verschiedene Einstellungen gibt es auf der Seite des Pluginentwicklers</a>.</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/9O3fuqsGOFW5T0AH8WiYk6ozPJs/0/da"><img src="http://feedads.g.doubleclick.net/~a/9O3fuqsGOFW5T0AH8WiYk6ozPJs/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/9O3fuqsGOFW5T0AH8WiYk6ozPJs/1/da"><img src="http://feedads.g.doubleclick.net/~a/9O3fuqsGOFW5T0AH8WiYk6ozPJs/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-10/jquery-plugin-tipp-slimscroll/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Schnelles und einfaches ScrollTo mit JQuery umsetzen</title>
		<link>http://www.blog-experiment.de/2011-10/schnell-und-einfaches-scrollto-mit-jquery-umsetzen/</link>
		<comments>http://www.blog-experiment.de/2011-10/schnell-und-einfaches-scrollto-mit-jquery-umsetzen/#comments</comments>
		<pubDate>Mon, 24 Oct 2011 09:03:19 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[ScrollTo]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=846</guid>
		<description><![CDATA[Manch einem wird es auf verschiedenen Webseiten bereits begegnet sein: ein sanfter Bildlauf hin zu einem beliebigen Element auf der Webseite. Vorteil gegenüber dem normalen direkten Sprung ist, dass man so dem Benutzer auch offenbaren kann, wohin genau ihn die Reise denn führt. Das kann durchaus positive Auswirkungen auf das Zurechtfinden in der Struktur der [...]]]></description>
			<content:encoded><![CDATA[<p>Manch einem wird es auf verschiedenen Webseiten bereits begegnet sein: ein sanfter Bildlauf hin zu einem beliebigen Element auf der Webseite. Vorteil gegenüber dem normalen direkten Sprung ist, dass man so dem Benutzer auch offenbaren kann, wohin genau ihn die Reise denn führt. Das kann durchaus positive Auswirkungen auf das Zurechtfinden in der Struktur der eigenen Seite haben.<br />
Auf jeden Fall ist es ein netter Effekt, der sich recht schnell und praktisch mit wenigen Codezeilen in JQuery umsetzen lässt. </p>
<p><span id="more-846"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#link'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    e.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html,body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
       scrollTop<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#element&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// document.ready</span></pre></div></div>

<p><a href="http://jsfiddle.net/hcVMq/3/" target="_blank" class="demo">
<div class="demo">Demo</div>
<p></a></p>
<p>Was passiert hier?</p>
<p>Zunächst wird mittels</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// document.ready</span></pre></div></div>

<p>gewartet bis das HTML-Dokument vollständig geladen ist. Erst anschließend wird der Code innerhalb dieses Blocks ausgeführt.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#link'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 e.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Hierbei wird dem Link mit der ID <em>link</em> der Eventhandler <em>click</em> zugefügt. Das heißt im Klartext, dass der Codeblock nur ausgeführt wird, wenn auf den Link mit dieser ID geklickt wird. Ist das der Fall wird an dieser Stelle verhindert, dass die standardmäßig mit dem Klick verknüpfte Aktion ausgeführt wird. Hier also der Sprung zum verlinkten Element. Hier wollen wir ja stattdessen unsere ScrollTo-Aktion ansetzen. Das geschieht im folgenden:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html,body'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Nun fügen wir dem HTML und BODY-Tag eine Animationsfunktion zu, die uns von JQuery zur Verfügung gestellt wird. Da nicht alle Browser den HTML-Tag hier richtig erkennen, bedarf es hier zusätzlich des Body-Tags. Die Animation soll hier 1000ms andauern. Hier lassen sich natürlich auch andere Werte einstellen.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">scrollTop<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#element&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">top</span></pre></div></div>

<p>Nun scrollen wir zum Tag mit der zugewiesenen ID <em>element</em>. Die Funktion <em>offset()</em> gibt uns dabei die Position des Elements an. Dabei werden sowohl die Position relativ zum Dokument von oben (top), als auch die von links (left) zurückgegeben. Hier interessiert uns jedoch nur die <em>top</em>-Position.</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/yEGjbirR5eUMPQFoWsNmp3Itt1o/0/da"><img src="http://feedads.g.doubleclick.net/~a/yEGjbirR5eUMPQFoWsNmp3Itt1o/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/yEGjbirR5eUMPQFoWsNmp3Itt1o/1/da"><img src="http://feedads.g.doubleclick.net/~a/yEGjbirR5eUMPQFoWsNmp3Itt1o/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-10/schnell-und-einfaches-scrollto-mit-jquery-umsetzen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rechtschreibprüfung in TeXworks</title>
		<link>http://www.blog-experiment.de/2011-10/rechtschreibpruefung-in-texworks/</link>
		<comments>http://www.blog-experiment.de/2011-10/rechtschreibpruefung-in-texworks/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 11:47:35 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[Tipps & Tricks]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Rechtschreibung]]></category>
		<category><![CDATA[Tex]]></category>
		<category><![CDATA[TexWorks]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=836</guid>
		<description><![CDATA[TeX ist ein Satzprogramm, das vor allem im wissenschaftlichen Bereich für Abschlussarbeiten und ähnliches breite Verwendung findet. Aber nicht nur. Unter Mac OS X habe ich mir vor einiger Zeit das Paket MacTeX installiert, das eigentlich alles mitbringt, was man eben so braucht, um mit TeX zu arbeiten. Ohne, dass man ständig irgendwas nachinstallieren muss. [...]]]></description>
			<content:encoded><![CDATA[<p>TeX ist ein Satzprogramm, das vor allem im wissenschaftlichen Bereich für Abschlussarbeiten und ähnliches breite Verwendung findet. Aber nicht nur.<br />
Unter Mac OS X habe ich mir vor einiger Zeit das Paket <a href="http://www.tug.org/mactex/2011/" target="_blank">MacTeX</a> installiert, das eigentlich alles mitbringt, was man eben so braucht, um mit TeX zu arbeiten. Ohne, dass man ständig irgendwas nachinstallieren muss.<br />
Eine Sache aber bringt das ganze von Haus aus leider nicht mit. Und das ist eine Rechtschreibprüfung. Jedoch ist das ganze bereits vorimplementiert, so dass es im Grunde nicht allzu schwierig ist, dies entsprechend nachzurüsten.<br />
<span id="more-836"></span></p>
<p>Allerdings muss man natürlich erst mal herausfinden, wie das ganze funktioniert. Bei meiner Suche bin ich auf eine <a href="http://code.google.com/p/texworks/wiki/SpellingDictionaries">Google-Hilfeseite</a> gestoßen, die allerdings in Englisch verfasst ist. Daher möchte ich hier kurz die einzelnen Schritte auch auf deutsch darlegen:</p>
<h3>1. Dictionary in deutscher Sprache herunterladen</h3>
<p>TeXworks kann mit den frei verfügbaren Dictionaries von OpenOffice arbeiten. Diese stehen in zahlreichen Sprachen zum freien Download zur Verfügung.<br />
Erster Schritt ist also das gewünschte Paket auf <a href="http://wiki.services.openoffice.org/wiki/Dictionaries">http://wiki.services.openoffice.org/wiki/Dictionaries</a> herunterzuladen. Dabei handelt es sich um <em>.oxt</em>-Dateien. Diese sind gepackt und enthalten die eigentlich interessanten Dateien.</p>
<h3>2. Sprachdateien entpacken</h3>
<p>Am einfachsten lassen sich die Sprachdateien über einen kleinen Trick entpacken. Dazu ergänzt man einfach die Dateiendung <em>.zip</em> und entpackt dieses dann mit einem Programm der Wahl. Anschließend sollte man einen entpackten Ordner vorfinden, der im Ordner <em>de_DE_frami</em> als Beispiel für das deutsche Sprachpaket die beiden interessanten Dateien <em>de_DE_frami.aff</em> und <em>de_DE_frami.dic</em> enthält.</p>
<h3>3. Dictionary-Ordner von TeXworks finden</h3>
<p>Unter Mac OS X lässt sich der Ordner am simpelsten mit Spotlight und einer Suchabfrage wie etwa &#8220;dictionaries art:ordner&#8221; finden. Das Verzeichnis liegt normalerweise im eigenen Homeverzeichnis unter <em>~/Library/TeXworks/dictionaries</em>.</p>
<h3>4. Kopieren der beiden Dateien</h3>
<p>Nun kopiert man die beiden Dateien <em>de_DE_frami.aff</em> und <em>de_DE_frami.dic</em> in das dictionaries-Verzeichnis von TeXworks. Anschließend muss man TeXworks neu startet.<br />
Unter dem Menüpunkt Bearbeiten -> Rechtschreibung sollte dann das deutsche Rechtschreibpaket auswählbar sein.<br />
Das wars <img src='http://www.blog-experiment.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/HfSJbeWaAU6wYCPNbxinc1gbetg/0/da"><img src="http://feedads.g.doubleclick.net/~a/HfSJbeWaAU6wYCPNbxinc1gbetg/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/HfSJbeWaAU6wYCPNbxinc1gbetg/1/da"><img src="http://feedads.g.doubleclick.net/~a/HfSJbeWaAU6wYCPNbxinc1gbetg/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-10/rechtschreibpruefung-in-texworks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Testbericht: Twimbow</title>
		<link>http://www.blog-experiment.de/2011-10/testbericht-twimbow/</link>
		<comments>http://www.blog-experiment.de/2011-10/testbericht-twimbow/#comments</comments>
		<pubDate>Thu, 13 Oct 2011 10:06:06 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[Blogosphäre]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Twimbow]]></category>
		<category><![CDATA[Twitter]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=825</guid>
		<description><![CDATA[Schon seit längerer Zeit bin ich auf der Suche nach einem guten Twitterclient für Mac OS X. Bislang aber noch nicht so recht fündig geworden. Zwar gibt es durchaus nette Programme, allerdings habe ich noch keines gefunden, mit dem ich wirklich völlig glücklich war. TweetDeck ist zwar grundsätzlich in Bezug auf die Funktionalität schon sehr [...]]]></description>
			<content:encoded><![CDATA[<p>Schon seit längerer Zeit bin ich auf der Suche nach einem guten Twitterclient für Mac OS X. Bislang aber noch nicht so recht fündig geworden. Zwar gibt es durchaus nette Programme, allerdings habe ich noch keines gefunden, mit dem ich wirklich völlig glücklich war. TweetDeck ist zwar grundsätzlich in Bezug auf die Funktionalität schon sehr nahe dran, gefällt mir aber wegen der Adobe Air-Basis nicht ganz so.</p>
<p>Durch einen <a href="http://t3n.de/news/tooltipp-twimbow-vielleicht-bunteste-twitterclient-332716/" target="_blank">Artikel bei T3n</a> bin ich letztens auf <a href="http://www.twimbow.com/" target="_blank">Twimbow</a> aufmerksam geworden. Dabei handelt es sich um keinen eigenständigen Client, sondern um ein Webangebot, das sich wie Twitter in jedem beliebigen Browser nutzen lässt. Die Oberfläche ähnelt dabei der von TweetDeck, jedoch setzt man hier durch die Hervorhebung durch Farben. Und gerade das ist auf jeden Fall eine spannende Sache, da sich so definitiv eine bessere und vor allem schnellere Übersichtlichkeit erreichen lässt.</p>
<p><span id="more-825"></span></p>
<h3>Funktionalität</h3>
<p>Zu den wichtigsten Funktionen zählen:</p>
<ul>
<li>Mehrere Accounts gleichzeitig verwalten</li>
<li>Markierung durch Farben zur besseren Übersicht</li>
<li>Medien-Vorschau</li>
<li>3 spaltiges Layout für (a) Alle Tweets, RT über dich, (b) den Twitterstream und (c) Überwachung bestimmter Suchwörter</li>
<li>wahlweise eigenen Reader für externe Webseiten verwenden</li>
<li>Tweets zeitgesteuert absenden</li>
</ul>
<h3>Erfahrungsbericht</h3>
<p>Die Anmeldung klappt schnell und problemlos. Auch das Hinzufügen von Accounts ist denkbar einfach. Danach gehts dann auch schon aktiv los.<br />
Die Bedienoberfläche ist im Grunde recht intuitiv und schnell durchschaut. Es gibt verschiedene Einstellmöglichkeiten, die recht rasch durchgeglickt sind. Verfeinerungen (z.B. hinsichtlich der farbigen Einordnung habe ich erst bei der aktiven Verwendung mit der Zeit vorgenommen.)<br />
Schön ist auf jeden Fall, dass man alle Interaktionen, die einen persönlich betreffen direkt in der linken Leiste dargestellt findet. Hierbei lässt sich dann auch einstellen, was alles angezeigt werden soll. Also z.B. nur Direktnachrichten, nur @Mentions oder diverse Kombinationen.<br />
Ein sehr schönes Feature ist auch das zeitgesteuerte Absenden von Tweets.<br />
Was mir aktuell noch sehr fehlt, ist die Vorschau der Originallinks, wenn man mit der Maus über die Kurzlinks fährt, wie es bei Twitter selbst implementiert ist. Eine wie ich finde sehr nützliche Sache, um zu wissen, ob man den Link vielleicht schon mal geglickt hat oder einfach nur herauszufinden, wohin einen die nächste Reise in etwa führen wird.</p>
<h3>Das Layout</h3>
<p>Einen Screenshot aus meinem Account mit Hervorhebung der wichtigsten Features habe ich hier f&#8221;ur euch bereitgestellt:</p>
<div id="attachment_840" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.blog-experiment.de/wp-content/uploads/2011/10/twimbow_functions.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/10/twimbow_functions-300x159.jpg" alt="" title="twimbow_functions" width="300" height="159" class="size-medium wp-image-840" /></a><p class="wp-caption-text">Twimbow Funktionen</p></div>
<h3>Fazit</h3>
<p>Insgesamt gefällt mir dieses Angebot recht gut und ich werde es testweise auf jeden Fall weiterhin verwenden.<br />
Gibt es sonst noch jemanden, der den Dienst ebenfalls schon mal ausprobiert hat? Oder habt ihr andere Empfehlungen?</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/47NfbLyKjAwoRSg9H_AnI0BN240/0/da"><img src="http://feedads.g.doubleclick.net/~a/47NfbLyKjAwoRSg9H_AnI0BN240/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/47NfbLyKjAwoRSg9H_AnI0BN240/1/da"><img src="http://feedads.g.doubleclick.net/~a/47NfbLyKjAwoRSg9H_AnI0BN240/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-10/testbericht-twimbow/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fixierte Sharebox mit CSS und JQuery realisieren</title>
		<link>http://www.blog-experiment.de/2011-09/fixierte-sharebox-mit-css-und-jquery-realisieren/</link>
		<comments>http://www.blog-experiment.de/2011-09/fixierte-sharebox-mit-css-und-jquery-realisieren/#comments</comments>
		<pubDate>Tue, 27 Sep 2011 11:50:04 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[CSS-Wissen]]></category>
		<category><![CDATA[HTML-Wissen]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[position:fixed]]></category>
		<category><![CDATA[Sharebox]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=817</guid>
		<description><![CDATA[Vielen dürfte eine kleine Box mit Buttons zum Teilen von Inhalten auf Twitter, Facebook oder Google+ links des eigentlichen Inhalts sicherlich schon mal auf diversen Blogs begegnet sein. Für alle, die sich darunter nichts vorstellen, hier mal ein Screenshot von Mashable.com, auf dem eine solche Box zu sehen ist: Das tolle bei Mashable ist, dass [...]]]></description>
			<content:encoded><![CDATA[<p>Vielen dürfte eine kleine Box mit Buttons zum Teilen von Inhalten auf Twitter, Facebook oder Google+ links des eigentlichen Inhalts sicherlich schon mal auf diversen Blogs begegnet sein.<br />
Für alle, die sich darunter nichts vorstellen, hier mal ein Screenshot von Mashable.com, auf dem eine solche Box zu sehen ist:</p>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/sharebox_mashable.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/sharebox_mashable-300x168.jpg" alt="" title="sharebox_mashable" width="300" height="168" class="aligncenter size-medium wp-image-831" /></a></p>
<p>Das tolle bei Mashable ist, dass diese mit dem Inhalt mitscrollt. Man hat also immer die entsprechenden Teilen-Buttons direkt zur Verfügung. Das erhöht die Chance, dass diese auch genutzt werden, sicherlich ein gutes Stück weit. Denn bekanntlich will man es als Leser so bequem wie möglich haben und nicht endlos scrollen und suchen müssen, bis man die entsprechenden Buttons findet. Mag zwar sein, dass der ein oder andere sogar noch Links per Hand kopiert (mache ich selbst teilweise auch noch so), aber die Chance dürfte doch unweit geringer sein.<br />
Insofern ist eine Implementierung der Teilen-Buttons in einer immer sichtbaren Box am linken Contentrand gewiss eine tolle Lösung.</p>
<p>In diesem Artikel möchte ich vorstellen, wie man eine solche umsetzen kann.<br />
<span id="more-817"></span></p>
<p>Als Inspirationsquelle dient dabei folgender englischsprachige Artikel: <a href="http://www.simplebloggertutorials.com/2010/07/add-floating-share-buttons-like.html">http://www.simplebloggertutorials.com/2010/07/add-floating-share-buttons-like.html</a></p>
<h3>Vorabinformationen</h3>
<p>Als Ausgangslage dient ein HTML-Gerüst der folgenden Art: Ein Layout mit Header, 960px weitem und zentriertem Hauptteil sowie einem Footer, der sich über die gesamte Seitenbreite erstreckt. Ich nehme hier nur minimale optische Anpassungen vor, damit der Code übersichtlich bleibt.</p>
<h4>Das HTML-Gerüst</h4>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;">&lt; !DOCTYPE html<span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;html<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;text/html; charset=UTF-8&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">&quot;Content-Style-Type&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;title<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/title<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #808080; font-style: italic;">&lt;!--[if IE]&gt;</span>
<span style="color: #808080; font-style: italic;">	&lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;</span>
<span style="color: #808080; font-style: italic;">	&lt; ![endif]--&gt;</span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;link</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;style.css&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">&quot;screen&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/link<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;body<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;header<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/header<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;site_wrap&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
		<span style="color: #808080; font-style: italic;">&lt;!-- hier kommt spaeter die sharebox hin --&gt;</span>
&nbsp;
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;section<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/section<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> <span style="color: #808080; font-style: italic;">&lt;!-- end site_wrap --&gt;</span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;footer<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/footer<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
        <span style="color: #808080; font-style: italic;">&lt;!-- hier kann man z.b. spaeter die javascript-dateien verlinken --&gt;</span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/html<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<h4>Die dazugehörige CSS-Definitionen: style.css</h4>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">html<span style="color: #00AA00;">,</span> body<span style="color: #00AA00;">,</span> div<span style="color: #00AA00;">,</span> h1<span style="color: #00AA00;">,</span> h2<span style="color: #00AA00;">,</span> h3<span style="color: #00AA00;">,</span> h4<span style="color: #00AA00;">,</span> h5<span style="color: #00AA00;">,</span> h6<span style="color: #00AA00;">,</span> ul<span style="color: #00AA00;">,</span> ol<span style="color: #00AA00;">,</span> dl<span style="color: #00AA00;">,</span> li<span style="color: #00AA00;">,</span> dt<span style="color: #00AA00;">,</span> dd<span style="color: #00AA00;">,</span> p<span style="color: #00AA00;">,</span> blockquote<span style="color: #00AA00;">,</span>  
pre<span style="color: #00AA00;">,</span> form<span style="color: #00AA00;">,</span> fieldset<span style="color: #00AA00;">,</span> table<span style="color: #00AA00;">,</span> th<span style="color: #00AA00;">,</span> td<span style="color: #00AA00;">,</span> input<span style="color: #00AA00;">,</span> textarea <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>  
&nbsp;
&nbsp;
body <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">100.1%</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
&nbsp;
header <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
&nbsp;
<span style="color: #cc00cc;">#site_wrap</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">960px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">0.8em</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#e1e1e1</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
&nbsp;
footer <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<h3>HTML-Code</h3>
<p>Nun kommen wir zum Einbau der eigentlichen Sharebox. Dazu fügen wir den nachfolgenden Code nach &#8230; ein.</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">&lt;!-- fixed scrolling sharebox --&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;sharebox&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;share&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p</span> <span style="color: #000066;">align</span>=<span style="color: #ff0000;">&quot;center&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;https://twitter.com/share&quot;</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;twitter-share-button&quot;</span> <span style="color: #000066;">data-count</span>=<span style="color: #ff0000;">&quot;vertical&quot;</span> <span style="color: #000066;">data-via</span>=<span style="color: #ff0000;">&quot;blogexperiment3&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Tweet<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;//platform.twitter.com/widgets.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;share&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p</span> <span style="color: #000066;">align</span>=<span style="color: #ff0000;">&quot;center&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;https://apis.google.com/js/plusone.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> {lang: 'de'} <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;g:plusone</span> <span style="color: #000066;">size</span>=<span style="color: #ff0000;">&quot;tall&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/g:plusone<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;share&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p</span> <span style="color: #000066;">align</span>=<span style="color: #ff0000;">&quot;center&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;iframe</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;//www.facebook.com/plugins/like.php?href=&lt;?php echo urlencode(get_permalink($post-&gt;</span></span>ID)); ?&gt;<span style="color: #ddbb00;">&amp;amp;</span>send=false<span style="color: #ddbb00;">&amp;amp;</span>layout=box_count<span style="color: #ddbb00;">&amp;amp;</span>width=90<span style="color: #ddbb00;">&amp;amp;</span>show_faces=false<span style="color: #ddbb00;">&amp;amp;</span>action=like<span style="color: #ddbb00;">&amp;amp;</span>colorscheme=light<span style="color: #ddbb00;">&amp;amp;</span>font=verdana<span style="color: #ddbb00;">&amp;amp;</span>height=80&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:90px; height:80px;&quot; allowTransparency=&quot;true&quot;&gt;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/iframe<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> <span style="color: #808080; font-style: italic;">&lt;!-- end sharebox --&gt;</span></pre></div></div>

<p>Hier sind nun die Buttons von Twitter, Facebook und Google+ eingebunden. Den Code für die Buttons findet sich auch auf den jeweiligen Seiten. Wer obigen Code kopiert, sollte beachten, dass dort bei Twitter-via zum Beispiel der Twitteraccount dieses Blogs eingetragen ist. Für die URL, die für den Facebook-Button benötigt wird, kommt ein kurzer PHP-Code zum Einsatz, der jedoch nur für WordPress-Themes funktioniert.</p>
<h3>CSS-Code</h3>
<p>Im Folgenden nehmen wir nun die Ausrichtung mittels CSS-Definitionen vor.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&nbsp;
<span style="color: #808080; font-style: italic;">/* Sharebox */</span>
&nbsp;
<span style="color: #cc00cc;">#sharebox</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-115px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#e1e1e1</span><span style="color: #00AA00;">;</span>
-moz-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">6px</span><span style="color: #00AA00;">;</span>
-webkit-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">6px</span><span style="color: #00AA00;">;</span>
border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">6px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#sharebox</span> <span style="color: #6666ff;">.share</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Die Box wird also mehr oder weniger einfach nach links weg aus dem Contentbereich verschoben.<br />
Diese Sharebox wird sich allerdings noch nicht mitbewegen. Diesen Effekt könnte man recht einfach dadurch erreichen, dass man <em>position:absolute</em> einfach durch <em>position:fixed</em> austauscht. Problem ist aber, dass die Sharebox dann auch in den Footerbereich hineinläuft, was wir aber nicht wollen. Also geht es im folgenden nun an eine Umsetzung mithilfe von JQuery.</p>
<h3>JQuery-Code: sharebox.js</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/* Sharebox */</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> $sharebox   <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#sharebox&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
  $window    <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>window<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
  offset     <span style="color: #339933;">=</span> $sharebox.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
  bottomPos <span style="color: #339933;">=</span>  $sharebox.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
  topPadding <span style="color: #339933;">=</span> <span style="color: #CC0000;">15</span><span style="color: #339933;">;</span>
&nbsp;
  $window.<span style="color: #000066;">scroll</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$window.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> offset.<span style="color: #660066;">top</span> <span style="color: #339933;">&amp;&amp;</span> $window.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> bottomPos<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$sharebox.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		 marginTop<span style="color: #339933;">:</span> $window.<span style="color: #660066;">scrollTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> offset.<span style="color: #660066;">top</span> <span style="color: #339933;">+</span> topPadding
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
     <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	$sharebox.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		 marginTop<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// document ready</span></pre></div></div>

<p>Hier wird nun jeweils die aktuelle Fensterposition mit der Position der Box verglichen und diese entsprechend verschoben. Allerdings nur so lange, bis das Ende des Elternelements (parent) erreicht ist, welches hier dem <em>div</em> mit der <em>id=&#8221;site_wrap&#8221;</em> entspricht.</p>
<p>Dieses Skript muss nun natürlich noch in die HTML-Datei verlinkt werden, damit der Code auch ausgeführt werden kann. Beispielsweise nach dem Footer:</p>
</pre>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://code.jquery.com/jquery.min.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;sharebox.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Fertig!</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/_tNbmp3llzTq3bnbukpzs-GvAdQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/_tNbmp3llzTq3bnbukpzs-GvAdQ/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/_tNbmp3llzTq3bnbukpzs-GvAdQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/_tNbmp3llzTq3bnbukpzs-GvAdQ/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-09/fixierte-sharebox-mit-css-und-jquery-realisieren/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ImageMagick: Die Magie der Bildverarbeitung im Terminal</title>
		<link>http://www.blog-experiment.de/2011-09/imagemagick-die-magie-der-bildverarbeitung-im-terminal/</link>
		<comments>http://www.blog-experiment.de/2011-09/imagemagick-die-magie-der-bildverarbeitung-im-terminal/#comments</comments>
		<pubDate>Wed, 21 Sep 2011 10:13:55 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Unix]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=810</guid>
		<description><![CDATA[Bildverarbeitung in der Komandozeile, das mag sich für einige sicherlich ziemlich merkwürdig anhören. Und es gibt mit Sicherheit eine Menge guter Gründe, ein Programm wie Photoshop oder GIMP zu verwenden. Doch es gibt durchaus auch manche Aufgaben, die sich wesentlich komfortabler über die Shell erledigen lassen. Man denke dabei vor allem an die Massenbearbeitung von [...]]]></description>
			<content:encoded><![CDATA[<p>Bildverarbeitung in der Komandozeile, das mag sich für einige sicherlich ziemlich merkwürdig anhören. Und es gibt mit Sicherheit eine Menge guter Gründe, ein Programm wie Photoshop oder GIMP zu verwenden. Doch es gibt durchaus auch manche Aufgaben, die sich wesentlich komfortabler über die Shell erledigen lassen. Man denke dabei vor allem an die Massenbearbeitung von Dateien. Gerade wenn man zum Beispiel tausende Bilder mal eben verkleinern, komprimieren und/oder in ein anderes Format umwandeln möchte, wird man die schnelle Umsetzung solcher Aufgaben in der Konsole sicherlich schnell zu schätzen lernen.</p>
<p>Ein solches Bildverarbeitungsprogramm, welches innerhalb der Konsole läuft, ist ImageMagick. ImageMagick bringt eine verdammt große Vielfalt an Funktionen mit sich, die ich bislang selbst noch längst nicht alle austesten konnte. Ich möchte an dieser Stelle aber einfach mal ein paar Beispiele für die Nützlichkeit von ImageMagick bei Bildbearbeitung geben.</p>
<p><span id="more-810"></span></p>
<p><!--more--></p>
<p>Dazu sollen folgende Fallbeispiele dienen.</p>
<ol>
<li><a href="#bildformat_umwandeln">1. Bildformat umwandeln</a></li>
<li><a href="#bild_verkleinern">2. Bild verkleinern und zuschneiden</a></li>
<li><a href="#massenbearbeitung">3. Massenverarbeitung von Bildern</a></li>
<li><a href="#bilder_zusammenfuegen">4. Bilder zusammenfügen</a></li>
<li><a href="#animationen">5. Animationen erstellen</a></li>
</ol>
<h3>Installation</h3>
<p>Zunächst muss ImageMagick installiert werden. Im folgenden möchte ich kurz die Installation auf Basis der SourceCode-Version vorstellen.</p>
<h4>1. Download</h4>
<p>Die aktuelle Source-Code-Version von ImageMagick gibt es unter <a href="http://www.imagemagick.org/script/download.php">http://www.imagemagick.org/script/download.php</a></p>
<h4>2. Entpacken</h4>
<p>Je nachdem für welche Archivversion (also z.B. zip oder tar.gz) ihr euch entschieden habt, fällt das Entpacken unterschiedlich aus.<br />
Hier möchte ich nur kurz auf die .tar.gz Variante eingehen. Diese lässt sich über Kommandozeile mit folgenden Befehlen entpacken:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">cd</span> <span style="color: #000000; font-weight: bold;">/</span>verzeichnis<span style="color: #000000; font-weight: bold;">/</span>des<span style="color: #000000; font-weight: bold;">/</span>archivs<span style="color: #000000; font-weight: bold;">/</span>
<span style="color: #c20cb9; font-weight: bold;">gunzip</span> archivname.tar.gz
<span style="color: #c20cb9; font-weight: bold;">tar</span> <span style="color: #660033;">-xvf</span> archivname.tar</pre></div></div>

<h4>3. Konfiguration &#038; Kompilieren</h4>
<p>Jetzt sollte ImageMagick als Quellcode in einem eigenen Ordner vorliegen. Hier nehmen wir nun die Konfiguration vor, um das ganze anschließend mit den zur Verfügung stehenden Routinen zu kompilieren:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">.<span style="color: #000000; font-weight: bold;">/</span>configure
<span style="color: #c20cb9; font-weight: bold;">make</span></pre></div></div>

<p>Das meiste sollte hier eigentlich ziemlich automatisch ablaufen. Wer sich ein wenig besser mit Installationen unter Unix auskennt, kann hier natürlich auch entsprechende Änderungen der Konfiguration vornehmen. Zahlreiche Informationen zu verschiedenen Optionen gibt es in den beigelegten Installationshilfdateien (in Englisch).</p>
<h4>4. Testen und Installieren</h4>
<p>Im Prinzip sollte sich ImageMagick hier bereits verwenden lassen. Allerdings nur innerhalb dieses Ordners. Um es auch systemweit verfügbar zu machen, müssen wir es in ein entsprechendes Systemverzeichnis kopieren. Hierbei verwenden wir folgenden einfachen Befehl:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">make</span> <span style="color: #c20cb9; font-weight: bold;">install</span></pre></div></div>

<p>Dabei wird das innerhalb der Konfiguration gewählte Verzeichnis verwendet.<br />
Nun können wir noch testen, ob alle Bestandteile auch richtig funktionieren oder ob etwas bei der Kompilierung schief gelaufen ist:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> <span style="color: #c20cb9; font-weight: bold;">make</span> check</pre></div></div>

<h3>Beispiele</h3>
<p><a name="bildformat_umwandeln"></a><br />
<h4>1. Bildformat umwandeln</h4>
<p>Zunächst wechseln wir innerhalb des Terminals in das Verzeichnis, in dem die zu bearbeitende Bilddatei liegt:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">cd</span> <span style="color: #000000; font-weight: bold;">/</span>directory<span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span></pre></div></div>

<p>Anschließend wandeln wir das Bild image.jpg zu transfer.png um.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert image.jpg transfer.png</pre></div></div>

<p>Man sieht, dass wir hier die Routine convert aus dem ImageMagick-Paket mit zwei Parametern aufrufen. Der erste gibt die zu bearbeitende Datei an, der zweite den Output. Dies könnte beispielsweise auch ein Fenster des X-Servers sein:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert image.jpg X:</pre></div></div>

<p>Hier findet natürlich keine Umwandlung sondern lediglich die Anzeige des Bildes statt.</p>
<p><a name="bild_verkleinern"></a><br />
<h4>2. Bild verkleinern und zuschneiden</h4>
<p>Jetzt wollen wir das Bild image.jpg um 50% verkleinern. Auch das ist schnell gemacht:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert image.jpg <span style="color: #660033;">-resize</span> <span style="color: #000000;">50</span><span style="color: #000000; font-weight: bold;">%</span> resized.jpg</pre></div></div>

<p>Neu hier ist der Parameter -resize 50%. Statt 50% kann man auch eine fixe Größe eingeben. z.B. 200&#215;200 (px).</p>
<p>Ein Bild zuzuschneiden funktioniert mithilfe der Option <em>-crop</em>. Dort gibt man zunächst an, welche Größe man ausschneiden möchte und anschließend, von welcher Stelle aus dies geschehen soll. Um dies zu verdeutlichen habe ich folgende Grafik erstellt, die euch das untenstehende Beispiel einmal verdeutlicht:</p>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/imagemagick_crop.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/imagemagick_crop.jpg" alt="" title="imagemagick_crop" width="210" height="210" class="aligncenter size-full wp-image-820" /></a></p>
<p>Im folgenden Beispiel schneiden wir ab der Position +10 nach rechts und +10 nach unten eine Fläche von 200&#215;200 Pixel aus unserem Bild aus. Die Ausgabe erfolgt hier über den X-Server.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert image.jpg <span style="color: #660033;">-crop</span> 200x200+<span style="color: #000000;">10</span>+<span style="color: #000000;">10</span> +repage X:</pre></div></div>

<p>Eine solche Aufgabe, wie die zuletzt vorgestellte, wird man vermutlich aber eher mit einem Grafikprogramm bewerkstelligen wollen, das einem auch direkt anzeigt, was man da ausschneidet. Hier lohnt sich der Einsatz von ImageMagick wirklich nur dann, wenn man mehr als eine gleichartige Bilddatei nach demselben Muster bearbeiten möchte. Genau das möchte ich auch im nächsten Beispiel vorstellen:</p>
<p><a name="massenbearbeitung"></a><br />
<h4>3. Massenbearbeitung von Bildern</h4>
<p>Zunächst benötigen wir den Shell-Befehl, mit dem wir Dateien massenweise verarbeiten können. Dies geschieht innerhalb einer Schleife, in die wir anschließend unseren ImageMagick-Befehl einbetten, der dann für alle Dateien immer wieder durchlaufen wird, ohne dass wir noch weiter groß etwas tun müssen.</p>
<p>Shell-Befehl:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">for</span> <span style="color: #c20cb9; font-weight: bold;">file</span> <span style="color: #000000; font-weight: bold;">in</span> <span style="color: #000000; font-weight: bold;">*</span>.jpg; <span style="color: #000000; font-weight: bold;">do</span> <span style="color: #7a0874; font-weight: bold;">echo</span> <span style="color: #007800;">$file</span>; <span style="color: #000000; font-weight: bold;">done</span></pre></div></div>

<p>Innerhalb der Schleife, die hier über alle jpg-Dateien innerhalb des Verzeichnissen läuft, geben wir mithilfe von <em>echo</em> den Dateinamen aus, der hier in der Variable <em>$file</em> gespeichert ist.<br />
An dessen Stelle setzen wir nun den gewünschten ImageMagick-Befehl:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">for</span> <span style="color: #c20cb9; font-weight: bold;">file</span> <span style="color: #000000; font-weight: bold;">in</span> <span style="color: #000000; font-weight: bold;">*</span>.jpg; <span style="color: #000000; font-weight: bold;">do</span> convert <span style="color: #007800;">$file</span> <span style="color: #660033;">-resize</span> <span style="color: #000000;">20</span><span style="color: #000000; font-weight: bold;">%</span> <span style="color: #007800;">$file</span>; <span style="color: #000000; font-weight: bold;">done</span></pre></div></div>

<p><a name="bilder_zusammenfuegen"></a><br />
<h4>4. Bilder zusammenfügen</h4>
<p>Bilder lassen sich in ImageMagick sehr schnell und bequem entweder horizontal oder vertikal zusammenfügen.</p>
<p><strong>Horizontal:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert <span style="color: #660033;">-append</span> 01.jpg 02.jpg out.jpg</pre></div></div>

<p><strong>Vertikal:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert +append 01.jpg 02.jpg out.jpg</pre></div></div>

<p><a name="animationen"></a><br />
<h4>5. Animationen erstellen</h4>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert 001.jpg 002.jpg 003.jpg <span style="color: #660033;">-delay</span> <span style="color: #000000;">50</span> ani.gif</pre></div></div>

<p>Die drei nummerierten Dateien werden hier zu einem animierten GIF zusammengefügt. Zwischen den einzelnen Bildern wird mittels delay noch ein zeitlicher Abstand eingeführt.</p>
<h3>Fazit</h3>
<p>Gerade weil es wirklich sehr einfach zu bedienen ist, wenn man sich einmal an die Funktionsweise gewöhnt hat, verwende ich ImageMagick für verschiedene Aufgaben immer wieder recht gerne. Man kann es auch recht schön in Skripte integrieren. Und da die meisten Webhoster auf Unix-Basis arbeiten, sollte ImageMagick dort ebenfalls funktionieren. Wie man ImageMagick speziell für den Webbereich einsetzen kann, werde ich evtl. später in einem extra Artikel vorstellen.</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/1wpm5RW7LIjbHoaoVSCoWtXCDCY/0/da"><img src="http://feedads.g.doubleclick.net/~a/1wpm5RW7LIjbHoaoVSCoWtXCDCY/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/1wpm5RW7LIjbHoaoVSCoWtXCDCY/1/da"><img src="http://feedads.g.doubleclick.net/~a/1wpm5RW7LIjbHoaoVSCoWtXCDCY/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-09/imagemagick-die-magie-der-bildverarbeitung-im-terminal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Page Speed Optimieren</title>
		<link>http://www.blog-experiment.de/2011-09/page-speed-optimieren/</link>
		<comments>http://www.blog-experiment.de/2011-09/page-speed-optimieren/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 14:53:02 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[CSS-Wissen]]></category>
		<category><![CDATA[HTML-Wissen]]></category>
		<category><![CDATA[Tipps & Tricks]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Page Speed]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=782</guid>
		<description><![CDATA[Die Ladegeschwindigkeit der eigenen Webseite ist seit neuestem nicht nur ein Faktor für das Ranking innerhalb der Google Suchergebnisseiten, sondern auch abseits davon entscheidend. Auch heute in Zeiten von schnellen DSL-Leitungen ist die Ladegeschwindigkeit für Besucher noch immer von hoher Bedeutung. Vielleicht sogar noch mehr als früher. Denn die Erwartungshaltung in Bezug auf die Ladezeiten [...]]]></description>
			<content:encoded><![CDATA[<p>Die Ladegeschwindigkeit der eigenen Webseite ist seit neuestem nicht nur ein Faktor für das Ranking innerhalb der Google Suchergebnisseiten, sondern auch abseits davon entscheidend. Auch heute in Zeiten von schnellen DSL-Leitungen ist die Ladegeschwindigkeit für Besucher noch immer von hoher Bedeutung. Vielleicht sogar noch mehr als früher. Denn die Erwartungshaltung in Bezug auf die Ladezeiten haben sich damit natürlich auch entsprechend geändert. Und so dürfte die Toleranzgrenze für Seiten, die nicht schnell genug auf eine Anfrage reagieren nicht mehr allzu hoch liegen. Lädt eine Seite nicht schnell genug, wird sie eben wieder zugeglickt. Möglicherweise das Vergeben der einzigen Chance einen neuen Stammbesucher zu gewinnen.<br />
Natürlich hängt viel auch noch immer von der Reaktionszeit des Servers selbst ab. Insofern zahlt es sich hier durchaus aus, nicht allein auf den günstigsten Webspace zu setzen, sondern sich vorher hinsichtlich der Performance-Zufriedenheit anderer Kunden im Netz ein wenig umzusehen.<br />
Doch es gibt auch eine Menge weiterer Punkte, die man hinsichtlich des Aufbaus seiner Webseite selbst tun kann. Darum soll es im folgenden nun gehen.</p>
<p><span id="more-782"></span></p>
<h3>Caching verwenden</h3>
<p>Viele Webseiten bestehen heute nicht mehr unbedingt aus statischen HTML-Seiten, sondern aus PHP-Skripten mit entsprechend mehr oder weniger vielen Datenbankabfragen, die dafür sorgen können, dass sich die Reaktionszeit verringert.<br />
Hier setzt das System des Cachings an. Das ganze funktioniert nach folgendem Prinzip. Statt die PHP-Dateien mit den Datenbankabfragen auszuliefern, erstellt man im Vorfeld statische Dateien, die ausgeliefert werden. Nun wird sich der ein oder andere natürlich fragen, wie das ganze denn sinnvoll umzusetzen ist, wenn man interaktive Webseiten anbietet, bei denen sich Inhalte schnell und oft ändern. Darunter könnte man beispielsweise auch Blogs zählen. Für WordPress gibt es verschiedene Cache-Systeme (z.B. <a href="http://wordpress.org/extend/plugins/wp-super-cache/">WP Super Cache</a>), die sich genau darauf spezialisiert haben und diese Schwierigkeiten zu handhaben versuchen.<br />
Ob man wirklich auf Caching setzt, muss man jedoch von Fall zu Fall abwägen.<br />
Ich würde Caching nur einsetzen, wenn es wirklich um Seiten handelt, die sich nicht allzu oft verändern oder stark auf interaktive Funktionen setzen (z.B. Loginfunktionalität). Bei solchen würde man möglicherweise durch das Caching gar eher mehr verlieren als gewinnen.<br />
Auf diesem Blog habe ich derzeit kein Caching-System im Einsatz. Werde ein solches aber evtl. demnächst einmal testen und dann die Erfahrungen in Form eines eigenen Posts beschreiben.</p>
<h3>CSS optimieren</h3>
<h4>Verzicht auf @import</h4>
<p>Bei der Einbindung von CSS gibt es mehrere Möglichkeiten. Recht bequem ist die Methode über @import, allerdings auch langsamer als die andere, da Stylesheets so nicht parallel geladen werden können. Besonders dann wenn man die @import in mehreren CSS-Dateien verschachtelt. Deshalb sollte man nach Möglichkeit einen Code der folgenden Art</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> media<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;screen&quot;</span><span style="color: #00AA00;">&gt;</span>
<span style="color: #a1a100;">@import url( style.css );</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></div></div>

<p>ersetzen durch</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;link rel<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> href<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;style.css&quot;</span> type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> media<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;screen&quot;</span><span style="color: #00AA00;">&gt;</span>
&lt;/link<span style="color: #00AA00;">&gt;</span></pre></div></div>

<h4>Code säubern</h4>
<p>Manchmal sammelt sich bei der Entwicklung doch mancher Müll innerhalb des Codes an, auf dem man in der finalen Version eigentlich verzichten könnte. Daher empfiehlt es sich vor der Anwendung der nächsten Schritte erst einmal selbst zu schauen, ob die eigenen CSS-Dateien auch alle sauber aufgebaut sind.<br />
<a href="http://www.drweb.de/magazin/sieben-prinzipien-fur-sauberes-und-optimales-css/">Einige Tipps für sauberes CSS findet ihr beispielsweise auf DrWeb.de</a>. Das Thema ist vom Umfang her sicherlich auch nochmals für einige Blog-Artikel gut.</p>
<h4>Minimieren</h4>
<p>Bei der Entwicklung ist es übersichtlicher den Quellcode sauber zu strukturieren. Dadurch wächst natürlich auch die Dateigröße durch eigentlich unnötige Leerzeichen und Leerzeilen mit an. Das mag im ersten Moment gering und unbedeutend erscheinen, kann sich aber gerade bei großen Seiten doch stark auswirken. Wenn 1KB mehr geladen müssen und das bei 1000 Besuchern macht das allein schon 1MB mehr an Traffic aus. Hat man zudem noch eine Begrenzung des monatlichen Traffics kann es sich sehr wohl auszahlen hier einzusparen.<br />
Natürlich wäre es absolut unnötige Arbeit per Hand alle unnötigen Zeichen zu entfernen. Am einfachsten ist es, wenn man Tools wie <a href="http://code.google.com/p/minify/">Minify</a> oder den <a href="http://yuilibrary.com/download/yuicompressor/">YUI Compressor</a> verwendet.<br />
Damit man dennoch auch später noch bequem weiterentwickeln kann, empfiehlt es sich sowohl die normale als auch die minimierte Variante beizubehalten und einfach nur die minimierte in die eigene Webseite einzubinden.</p>
<p>Ich habe mich mal für den YUI Compresser entschieden, da dieser aufgrund dessen, dass es sich um eine JAVA-Anwendung handelt, auch über die Kommandozeile angesprochen werden kann und so auch bequem in Shell-Skripte eingebunden werden kann.</p>
<p>Der <a href="http://yuilibrary.com/download/yuicompressor/">YUI Compresser kann als ZIP-Archiv hier heruntergeladen werden</a>.<br />
Nach dem Entpacken ist dieser auch schon einsatzbereit. Nachdem man innerhalb des Terminals in das Verzeichnis gewechselt hat, indem die ausführbare Java-Datei liegt, kann man den Minimierer sowohl für CSS als auch für JavaScript-Dateien anwenden.<br />
Hier mal ein entsprechendes Beispiel. Wie immer gilt: auch hier auf die Pfade achten, in denen sich die Dateien befinden.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">java <span style="color: #660033;">-jar</span> yuicompressor-2.4.6.jar style.css <span style="color: #660033;">-o</span> style_min.css</pre></div></div>

<p>Weitere Informationen dazu auch in der offiziellen <a href="http://developer.yahoo.com/yui/compressor/#work">Anleitung</a>.</p>
<h4>Kombinieren</h4>
<p>Um die Zahl der Requests zwischen Client und Server zu verringern, empfiehlt es sich so wenig verschiedene Dateien wie möglich einzubinden.<br />
Es macht also Sinn, die minimierten CSS-Dateien anschließend noch zu einer einzigen CSS-Datei oder auch zu Dateien zu kombinieren, wobei die erste nur den minimal notwendigen Code für eine saubere Seitenstrukturdarstellung enthält. Auch hier sollte man natürlich die Original-Dateien weiterhin behalten und daraus dann nach Änderungen jeweils neue minimierte und daraus die kombinierte CSS-Datei erstellen, die schließlich eingebunden wird.<br />
Im folgenden eine Möglichkeit unter Einsatz eines kleinen Shell-Skripts verschiedene Dateien zu einer einzigen zusammenzufügen. Damit erspart man sich das lästige ineinander kopieren und kann diesen Prozess auch später schnell und bequem wiederholen:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#!bin/sh</span>
&nbsp;
<span style="color: #007800;">WORKDIR</span>=<span style="color: #ff0000;">&quot;localhost/&quot;</span>
<span style="color: #007800;">CSS_COMBINED_FILE</span>=<span style="color: #007800;">$WORKDIR</span><span style="color: #ff0000;">&quot;css/style_all.css&quot;</span>
&nbsp;
<span style="color: #666666; font-style: italic;"># put css files together</span>
<span style="color: #7a0874; font-weight: bold;">cd</span> <span style="color: #007800;">$WORKDIR</span>
<span style="color: #c20cb9; font-weight: bold;">touch</span> <span style="color: #007800;">$CSS_COMBINED_FILE</span>
<span style="color: #c20cb9; font-weight: bold;">cat</span> <span style="color: #007800;">$WORKDIR</span><span style="color: #ff0000;">&quot;css/style.css&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;&gt;</span> <span style="color: #007800;">$CSS_COMBINED_FILE</span>
<span style="color: #c20cb9; font-weight: bold;">cat</span> <span style="color: #007800;">$WORKDIR</span><span style="color: #ff0000;">&quot;css/style2.css&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;&gt;</span> <span style="color: #007800;">$CSS_COMBINED_FILE</span></pre></div></div>

<p>Die Pfade und Dateinamen müssen in obigem Skript noch entsprechend der eigenen Bedürfnisse angepasst werden.</p>
<h3>Javascript optimieren</h3>
<p>Fast die gleichen Prinzipien, die für CSS gelten, lassen sich auch für JavaScript-Dateien ansetzen. Daher will ich die einzelnen Punkte hier etwas knapper abhandeln.</p>
<h4>Aussortieren</h4>
<p>Je länger ein Webprojekt existent ist, umso mehr Müll sammelt sich meiner Erfahrung nach im Code an. Daher ist es manchmal einfach sinnvoll, mal zu schauen, was man vielleicht gar nicht mehr benötigt oder für welche Aufgaben es vielleicht schon längst schlankere und besser ausgereifte Methoden gibt. Oder man ersetzt selbst geschriebene Skripte durch den Einsatz einer Bibliothek wie <a href="http://jquery.com/">JQuery</a>, was einem garantiert, dass dieses auf zahlreichen Plattformen flüssig läuft und vermutlich auch in vielerlei Hinsicht besser performt als selbst geschriebener Code.</p>
<h4>Dateigröße minimieren</h4>
<p>Auch hier gilt wie bei CSS: Dateien zusammenfügen und zu minimieren kann wertvolle Ladezeit sparen und zudem die Zahl der Requests senken.</p>
<p>An dieser Stelle nochmals als Beispiel der Einsatz des YUI Compressors für eine JavaScript-Datei mit folgendem Inhalt:</p>
<p>Vorher:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> test<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;a&quot;</span> <span style="color: #339933;">+</span>
    <span style="color: #3366CC;">&quot;b&quot;</span> <span style="color: #339933;">+</span>
    <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Nachher:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> test<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #003366; font-weight: bold;">var</span> b<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;abc&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Man sieht, dass man nicht nur bei Leerzeichen spart, sondern dass der Code auch in anderen Punkten optimiert wird (optimiert hier vor allem in Hinblick auf Ladezeit. Bei der Entwicklung legt man ja dahingehend bisweilen erst einmal andere Schwerpunkte).</p>
<h4>Asynchron laden</h4>
<p>Die Reihenfolge beim Laden der einzelnen Elemente spielt durchaus eine Rolle &#8211; vor allem bei der gefühlten &#8211; Schnelligkeit des Ladevorgangs. So sollte man Dinge, die für die Darstellung der Hauptkomponenten der Seite nicht direkt vonnöten sind, möglichst spät laden. Beispielsweise Google Analytics erst im Footer einbinden.<br />
Google bietet zudem inzwischen auch die asynchron ladende Variante seines Analytics Code an. Ein solches Vorgehen hat den Vorteil, dass der Webbrowser nicht warten muss, bis das ganze Skript geladen ist, bevor er weitermachen kann, sondern dieses dann lädt, wenn entsprechende Ressourcen frei werden.</p>
<p>Auch wenn es unter HTML5 die Möglichkeit gibt, das script-Tag durch das Attribut async zu ergänzen</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;yourscript.js&quot;</span> async<span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>so schlägt Google folgende Vorgehensweise vor, da obige Variante nicht von allen Webbrowsern unterstützt wird.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
s.<span style="color: #660066;">type</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'text/javascript'</span><span style="color: #339933;">;</span>
s.<span style="color: #660066;">async</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
s.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'yourscript.js'</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p><a href="http://molily.de/weblog/javascript-asynchron">Mehr zum Thema Asynchrones Javascript im Blog von Molily</a>.</p>
<h4>Externe Quellen nutzen</h4>
<p>Wenn man beispielsweise Bibliotheken wie JQuery einsetzt, dann sollte man zunächst natürlich die minimierte Version einsetzen, zum zweiten kann es sich aber auch empfehlen, die Datei nicht auf dem eigenen Webserver zu lagern, sondern diese aus externen Quellen zu beziehen. So kann man diese beispielsweise direkt von JQuery oder auch von Google einbinden. Vorteil dabei ist, dass die Wahrscheinlichkeit hoch ist, dass die Bibliothek bereits schon auf anderen Seiten geladen wurde und so nicht mehr neu für die eigene Seite vom eigenen Server bezogen werden muss und diesen folglich auch nicht belastet.</p>
<p>Von Google beziehen:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Von JQuery.com beziehen:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-latest.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Nachteil ist natürlich, dass man auf externe Server angewiesen ist. Sollten diese mal nicht verfügbar sein (was jedoch bei diesen beiden Kandidaten wohl unwahrscheinlicher sein dürfte als der Ausfall der eigenen Seite), guckt man natürlich in die Röhre.</p>
<h3>HTML optimieren</h3>
<h4>Sauberes HTML</h4>
<p>Auch für HTML gilt selbstverständlich die Regel, dass der Code so sauber wie möglich gehalten sein sollte. Wichtig ist hierbei inbesondere die klare Trennung von Seitenstruktur und den einzelnen Formatierungen, die man besser in eigenen CSS-Dateien vornimmt. Dieses Vorgehen sorgt für schlanken Code, der auch wesentlich leichter zu warten ist.<br />
Und natürlich lässt sich auch bei HTML durch Einsparen von Leerzeichen, Tabulatoren oder Leerzeilen ein wenig etwas an Bytes einsparen.</p>
<h3>Bilder optimieren</h3>
<p>Viel an übertragenen KB lässt sich erfahrungsgemäß auch bei Bildern einsparen. Früher war dieses Thema sicherlich noch ein deutlich heikleres als heutzutage, aber ganz bedeutungslos ist es dennoch nicht.</p>
<h4>Ist der Einsatz eines Bildes wirklich sinnvoll?</h4>
<p>Manchmal lohnt es sich die Frage zu stellen, ob der Einsatz eines Bildes wirklich immer sinnvoll ist. Nein, damit meine ich jetzt nicht, das man völlig auf Bilder verzichten soll. Vielmehr geht es mir um kleine Grafiken, mit denen bestimmte Effekte erziehlt werden sollen, die heute vielleicht schon viel einfacher mittels CSS3 und HTML5 erreicht werden können. Abgerundete Ecken wurden früher beispielsweise mittels Tricks durch Grafiken erzeugt &#8211; heute würde ich auf ein solches Vorgehen komplett verzichten, selbst wenn man in alten Browsern damit vielleicht nicht die gewünschte Darstellung erreicht. Ein lohnendes Risiko &#8211; imho.</p>
<h4>Skalieren</h4>
<p>Wenn man Bilder an irgendeiner Stelle einbindet, sollte man auf jeden Fall das Bild auch in der Größe einzubinden, in der es wirklich benötigt wird und nicht einfach ein viel größeres Bild durch Angaben von width und height-Angaben zu verkleinern. Ansonsten produziert man einen großen Überschuss an unnötig geladenen KBs.</p>
<h4>Dateigröße minimieren</h4>
<p>Geschickte Komprimierungsverfahren sind heute in der Lage Bilddateien ohne sichtbaren Qualitätsverlust mit einer deutlich kleineren Dateigröße zu speichern. Auch hier ist es am Ende vor allem wieder die Menge, die den Unterschied macht.</p>
<p>Für PNG lässt sich beispielsweise das Tool <a href="http://optipng.sourceforge.net/">OptiPNG</a> einsetzen. Damit kann man auch GIFs in optimale PNGs umwandeln.<br />
Nach dem Download muss das Tool nach dem Entpacken unter Unix (z.B. Ubuntu, aber auch Mac OS X) zunächst vom Quellcode kompiliert werden.</p>
<p>Dazu die Kommandos</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">.<span style="color: #000000; font-weight: bold;">/</span>configure <span style="color: #000000; font-weight: bold;">&amp;&amp;</span> <span style="color: #c20cb9; font-weight: bold;">make</span></pre></div></div>

<p>ausführen. Wenn alles geklappt habt, sollte das Tool im entsprechenden Ordner, in den ihr die Dateien entpackt habt, danach einsatzbereit sein.<br />
Dann könnt ihr das Tool in der Kommandozeile wie folgt benutzen:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">.<span style="color: #000000; font-weight: bold;">/</span>optipng <span style="color: #000000; font-weight: bold;">/</span>imagepath<span style="color: #000000; font-weight: bold;">/</span>filename.png <span style="color: #660033;">-out</span> <span style="color: #000000; font-weight: bold;">/</span>imagepath<span style="color: #000000; font-weight: bold;">/</span>outfilename.png</pre></div></div>

<p>Dabei wird eine neue Datei erzeugt. Lässt man die Option <em>-out</em> weg, wird die Datei überschrieben.<br />
Weitere Information zur Verwendung gibt es, wenn man im Terminal das Programm mittels der <em>-help</em>-Option aufruft:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">.<span style="color: #000000; font-weight: bold;">/</span>optipng <span style="color: #660033;">--help</span></pre></div></div>

<h4>Wahl des richtigen Dateiformats</h4>
<p>Die gängigen Bild-Dateiformate in der Websitegestaltung sind nach wie vor JPG, GIF und PNG. Formate wie BMP oder TIFF sollte man auf jeden Fall nicht verwenden.<br />
JPG empfiehlt sich vor allem für Photos oder sonstige größere Bilder (CD-Cover, Filmplakate, etc.). Kleine Grafiken sind oftmals als PNG am besten aufgehoben. Alternativ auch als GIF, welches sich insbesondere für Animationen empfiehlt. Viele Animationen sind heute aber auch schon mittels CSS3 und HTML5 zu bewerkstelligen.</p>
<h4>Sprites</h4>
<p>&#8230; sind vor allem dann nützlich, wenn man bei Bildern mit dem Hover-Effekt arbeiten will und dabei nervige Verzögerungen beim Nachladen der zweiten Grafik vermeiden möchte.<br />
Das Prinzip ist sehr einfach. Statt zwei extra Grafiken erstellt man eine einzige, die beide Bildvarianten enthält. Diese werden dann mittels der CSS-Eigenschaften <em>background-position</em> so positioniert, dass jeweils nur der interessante Teilbereich zu sehen ist. Ein Vorteil dieser Variante ist wiederum, dass auch nur eine Datei geladen werden muss und somit ein HTTP-Request entfällt.<br />
Auch hier gilt es aber von Fall zu Fall abzuwägen, ob sich der Einsatz von Sprites wirklich lohnt. Es macht wenig Sinn möglichst viele Grafiken in einer zu vereinen, wenn davon jedoch auf der Seite nur ein paar wenige benötigt werden.</p>
<h3>Pagespeed testen</h3>
<p>Es empfiehlt sich die eigene Webseite einmal hinsichtlich der Ladezeit zu testen. Google bietet dazu einen Bewertungsservice an, bei dem es außerdem noch viele Tipps mit Erläuterungen gibt, wie man die Ladegeschwindigkeit seiner Seite verbessern kann:<br />
<a href="http://pagespeed.googlelabs.com/">http://pagespeed.googlelabs.com/</a></p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/6oDcWZNj12zf0vNsKEJO9SJhRCA/0/da"><img src="http://feedads.g.doubleclick.net/~a/6oDcWZNj12zf0vNsKEJO9SJhRCA/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/6oDcWZNj12zf0vNsKEJO9SJhRCA/1/da"><img src="http://feedads.g.doubleclick.net/~a/6oDcWZNj12zf0vNsKEJO9SJhRCA/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-09/page-speed-optimieren/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Was Mac OS X besser macht als Windows und Ubuntu</title>
		<link>http://www.blog-experiment.de/2011-09/was-mac-os-x-besser-macht-als-windows-und-ubuntu/</link>
		<comments>http://www.blog-experiment.de/2011-09/was-mac-os-x-besser-macht-als-windows-und-ubuntu/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 10:06:14 +0000</pubDate>
		<dc:creator>Blog-Experiment</dc:creator>
				<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[Unix]]></category>

		<guid isPermaLink="false">http://www.blog-experiment.de/?p=778</guid>
		<description><![CDATA[Vor etwa einem halben Jahr bin ich nach längerem Mich-Umschauen auf Mac OS X umgestiegen. Zuvor habe ich eigentlich fast immer mit Windows, dann im Verlauf auch desöfteren mit Ubuntu gearbeitet, da ich für verschiedene Tätigkeiten an der Uni einfach gewisse Unix-Funktionalitäten benötigt habe. Ich konnte schon damals bei anderen Komollitonen mal einen Blick auf [...]]]></description>
			<content:encoded><![CDATA[<p>Vor etwa einem halben Jahr bin ich nach längerem Mich-Umschauen auf Mac OS X umgestiegen. Zuvor habe ich eigentlich fast immer mit Windows, dann im Verlauf auch desöfteren mit Ubuntu gearbeitet, da ich für verschiedene Tätigkeiten an der Uni einfach gewisse Unix-Funktionalitäten benötigt habe. Ich konnte schon damals bei anderen Komollitonen mal einen Blick auf deren Macbooks werfen – bin aber im ersten Moment mit der Bedienung nicht so wirklich zurechtgekommen. Dennoch hatte gerade das Macbook Pro einige Dinge, die recht reizvoll sind. Und so habe ich mich dann doch mal noch etwas genauer auch mit Mac OS X auseinandergesetzt und schließlich nach vielfältiger Überlegung beschlossen, mir ebenfalls ein Macbook Pro zuzulegen. Und ich muss sagen, ich bereue den Umstieg nicht – auch wenn es durchaus ein paar Kleinigkeiten gibt, an die man sich erst einmal gewöhnen muss.</p>
<p>Hier die Dinge, die Mac OS X in Verbindung mit dem Macbook Pro für mich nach vor verdammt attraktiv und damit zu meinem Wahlarbeitssystem Nr. 1 machen:</p>
<p><span id="more-778"></span></p>
<h3>Vorzüge von Mac OS X</h3>
<h4>Der Unix-Unterbau</h4>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_terminal.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_terminal-300x62.jpg" alt="" title="macosx_terminal" width="300" height="62" class="aligncenter size-medium wp-image-785" /></a></p>
<p>Ein Aspekt, der mir vor allem bei Windows einfach gefehlt hat. Wer öfters über SSH arbeitet und dabei immer wieder mit Shell-Skripten hantiert, der wird das Terminal schnell schätzen lernen. Natürlich gibt’s auch für Windows Möglichkeiten das ganze nachzurüsten. Allerdings ist es schlicht nicht dasselbe, da man eben längst nicht so tief unter die Oberfläche des gesamten Systems einsteigen kann. Manch einer wird das vielleicht gar nicht wollen – und für die gibt es durchaus genauso gute Nachrichten: man kann, man muss allerdings nicht.<br />
Ebenfalls mit integriert ist unter Mac Os X ein X-Server, der es dann auch problemlos möglich macht, per Fernzugriff auf anderen Unixsystem zu arbeiten. Und bislang gefällt mir die Implementierung hier sogar besser als bei Ubuntu.</p>
<h4>Spotlight</h4>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_spotlight.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_spotlight-300x22.jpg" alt="" title="macosx_spotlight" width="300" height="22" class="aligncenter size-medium wp-image-786" /></a></p>
<p>Wer suchet der findet. Das kann mal schneller gehen, mal weniger schnell. Bei Mac OS X geht es normalerweise superschnell (sobald die Dateien erst einmal indiziert sind, was Mac OS X aber anfangs ganz automatisch und nebenher bewerkstelligt). Der Grund liegt nicht nur darin, dass die Suchmaske sehr prominent platziert ist und auch bequem per Tastaturkürzel erreichbar ist, sondern auch daran, dass die Dateien und deren Inhalte in einer Datenbank gespeichert sind. So wird einem schon während der Suche eine Liste mit Dateien angezeigt. Und man kann nicht nur nach Dateinamen suchen, sondern auch den Inhalt von kompletten Textdateien. Damit lässt sich – das kann ich aus eigener Erfahrung sagen &#8211; wirklich eine Menge Zeit sparen. Und selbstverständlich lässt sich die Suche mit diversen kleinen Kniffen noch verfeinern. Nett ist auch das Dictionary, welches in der Suche mit integriert ist. Ich habe mir dieses noch so erweitert, dass ich nun beispielsweise auch schnell nach Wörtern in anderen Sprachen suchen kann und direkt die Übersetzung vorliegen habe. Achja: einfache Kalkulationen kann man in der Suchmaske natürlich auch durchführen. Alles in allem dürfte Spotlight neben dem Terminal bei mir gewiss eine der am häufigsten verwendeten OS X Spezialitäten sein.</p>
<h4>Das Trackpad, Exposé</h4>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/macbookpro_trackpad.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/macbookpro_trackpad.jpg" alt="" title="macbookpro_trackpad" width="195" height="151" class="aligncenter size-full wp-image-787" /></a></p>
<p>Lange habe ich nicht gebraucht, mich an das Macbook Pro Trackpad zu gewöhnen. Nicht jeder wird diese Bedienungsweise mit mehreren Fingern und Gesten mögen. Aber ich für meinen Teil finde sie doch sehr praktisch und intuitiv. Anfangs muss man sich auch hier erst mal etwas eingewöhnen, hat man das aber erst einmal getan, dann vereinfacht dies die Arbeitsabläufe doch schon sehr. Vor allem, da man noch auf solch kleine Helfer wie Exposé zurückgreifen kann, die einem eine Übersicht der geöffneten Fenster zeigt.</p>
<h4>TimeMachine</h4>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_timemachine.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_timemachine-300x218.jpg" alt="" title="macosx_timemachine" width="300" height="218" class="aligncenter size-medium wp-image-788" /></a></p>
<p>Backups sind wichtig. Doch meist will man sich ehrlich gesagt nicht viele Gedanken darum machen. Da kommt TimeMachine gerade richtig, denn damit werden Backups fast vollautomatisch auf einer externen Festplatte vorgenommen. Und das tollste: man kann auch recht bequem durch die verschiedenen gespeicherten Versionen scrollen. Wie der Name schon sagt, lässt sich sehr einfach in der Zeit zurückreisen und die gesamte Rechnerdateistruktur zu einem bestimmten Backupzeitpunkt darstellen. Natürlich auch durchsuchen und einzelne Dateien oder gar der komplette Zustand wiederherstellen. Viel komfortabler kann man einem das Backupen eigentlich gar nicht machen.</p>
<h4>Windows und Ubuntu trotzdem verwenden</h4>
<p>Okay zugegeben, mit Virtualisierungssoftware ist z.B. das Verwenden von Ubuntu auf Windowsrechnern auch kein großes Problem. Ebensowenig wie eine Parallelinstallation beider Systeme. Schwierig wird’s allerdings dann, wenn man dort auch Mac OS X noch verwenden wollen würde. Das kann man natürlich jetzt durchaus als Nachteil von OS X auslegen – denn letztlich ist es ja auch einer. Trotzdem ist es zumindest praktisch, dass man auf einem Macbook auf keines der Systeme verzichten muss und alle drei gleichzeitig verwenden kann. Somit habe ich auf einem Rechner eigentlich alles dabei, was man braucht. So man es denn wirklich alles braucht <img src='http://www.blog-experiment.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<h4>Vorschau</h4>
<p><a href="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_vorschau.jpg"><img src="http://www.blog-experiment.de/wp-content/uploads/2011/09/macosx_vorschau.jpg" alt="" title="macosx_vorschau" width="147" height="165" class="aligncenter size-full wp-image-789" /></a></p>
<p>Mit Vorschau meine ich nicht die Vorschau innerhalb des Finders (dem Dateimanager unter OS X), die man mittels Leertaste aufrufen kann. Die ist zweifellos auch klasse, wenn man einfach mal kurz Dateien durchsuchen will ohne diese in einem externen Programm öffnen zu müssen. Klasse natürlich auch, dass sich Musik und Videodateien ebenfalls innerhalb des Finders direkt abspielen lassen.<br />
Nein, mit Vorschau meine ich hier das Programm, mit dem standardmäßig PDF- oder Bilddateien geöffnet werden. Hinter dem Programm steckt mehr als man ihm auf den ersten Blick ansieht. Als PDF-Betrachter gold wert, vor allem da man recht schnell und einfach Hervorhebungen anbringen kann. Auf diese Weise kann man dann auch wissenschaftliche Paper durchaus mal am Bildschirm durcharbeiten. Oder wie wäre es eine Textdatei einfach als PDF abzuspeichern? Nichts leichter als das. Es ist vor allem die Vielzahl dieser praktischen Kleinigkeiten, welche die Vorschau zumindest für mich zu einem mächtigen Tool werden lässt.</p>
<h4>Leichte Konnektivität</h4>
<p>Mac OS X macht es einem nicht schwer sich zu vernetzten. Die Freigabeoptionen übers Netzwerk sind spielend leicht und allemal praktisch. Ein VPN-Client ist von Haus aus vorintegriert und muss eigentlich nur noch durch das entsprechende Zertifikat konfiguriert werden. Und SSH, Telnet oder ähnliches sind mit dem Terminal die leichteste Übung. Sorgen um Druckertreiber und ähnliches musste ich mir bislang kaum machen. In den meisten Fällen hat das bislang anstecken und direkt losdrucken geklappt (ich kann aber nicht garantieren, dass das wirklich immer so klappt – dazu fehlt mir diesbezüglich etwas die Erfahrung).</p>
<h4>Stabilität</h4>
<p>Früher sicherlich noch ein gewichtigeres Kriterium als heute, wo auch Windows längst nicht mehr so leicht zum Absturz zu bewegen ist. Normalerweise kann man Mac OS X problemlos auch über Tage, Wochen und länger laufen lassen (nur wenige größere Updates bedürfen mal eines Neustarts) – dafür ist Unix ja auch ausgerichtet. Allerdings habe ich es durchaus auch schon mal geschafft (natürlich nicht absichtlich), das System zum Absturz zu bringen. Auch Mac OS X ist also nicht unzerstörbar, aber normalerweise eben doch sehr stabil.</p>
<h4>Macbook Pro</h4>
<p>Auch wenn dieser Punkt jetzt nicht direkt etwas mit dem Betriebssystem zu tun hat, möchte ich den Punkt Hardwareausstattung des Macbook Pros doch kurz ansprechen. Das Innenleben mag für den Preis vielleicht nicht gerade spottbillig sein, dennoch überzeugt mich die äußere Verarbeitung bislang absolut. Schlank, leicht, und dank des Unibody-Gehäuses ziemlich robust. Die Batterielaufzeit stellt (mit Ausnahme meines Netbooks vielleicht) bislang jedes andere Notebook, das ich besessen habe, in den Schatten. Bei normalen Arbeiten mit halber Bildschirmhelligkeit sind 9 Stunden durchaus mal drin. Und gerade wenn man länger ohne Steckdose unterwegs ist, ein nicht gerade unwichtiges Kriterium. Wer auch schon beinahe mal sein komplettes Notebook durch Stolpern übers Ladekabel auf den Boden gezogen hätte, der wird die Magsafe-Variante sicherlich zu schätzen wissen.</p>
<p>Dann gibt es da noch viele weitere Kleinigkeiten, die das Betriebssystem für mich recht attraktiv machen. So klappt Drag&#038;Drop hier an erstaunlich vielen Stellen, die man bei Windows oder Ubuntu so nicht gewohnt ist.</p>
<h3>Verbesserungsbedarf</h3>
<p>Natürlich gibt’s aber auch Punkte, die nicht ganz optimal sind:</p>
<h4>NTFS wird nicht von Haus aus voll unterstützt.</h4>
<p>Das dürfte gerade Windows-Umsteiger sicherlich etwas ärgern. Lesen klappt zwar, Schreiben aber nur mit etwas Manipulation oder dem Kauf einer kommerziellen Lösung.</p>
<h4>Tastaturbelegung gewöhnungsbedürftig</h4>
<p>Gerade Anfangs dürften Umsteiger länger auf der Suche nach gewissen Sonderzeichen sein. Da bedarf es doch schon einer ganzen Zeit, bis man das alles im Kopf hat.</p>
<h4>Mac OS X geht nur auf Mac</h4>
<p>Ja, ich weiß, es gibt durchaus gewisse Wege das Betriebssystem auch auf Rechnern mit entsprechender Hardwarezusammenstellung zum Laufen zu bekommen. Von Haus aus aber ist Mac OS X nicht dafür vorgesehen – und so sind solche Basteleien natürlich nichts für den Otto-Normal-Nutzer. Wobei an der oft gebrachten Argumentation vieler Mac-Anhänger, dass das volle Mac-Erlebnis eben nur mit einem Mac möglich ist, ja durchaus ein wenig was dran ist.</p>
<h3>Fazit</h3>
<p>Nicht alles an Mac OS X mag perfekt sein. Das perfekte Betriebssystem gibt es für mich bislang noch nicht. Aber am nähesten kommt derzeit auf jeden Fall dasjenige aus dem Hause Apple für mich da ran. Natürlich ist dies auch immer eine Frage der eigenen Bedürfnisse.<br />
Sollte Apple enes Tages auf die Idee kommen, den Unix Unterbau zu verabschieden, würde das sicherlich dazu führen, dass das dann neue Betriebssystem bei mir deutlich an Attraktivität einbüßen würde. Bleibt zu hoffen, dass das nie passieren wird.</p>
<p><center>by http://www.blog-experiment.de</center></p>
<p><a href="http://feedads.g.doubleclick.net/~a/AZE4tenDJPn-5NXYyhl9IQH29uY/0/da"><img src="http://feedads.g.doubleclick.net/~a/AZE4tenDJPn-5NXYyhl9IQH29uY/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/AZE4tenDJPn-5NXYyhl9IQH29uY/1/da"><img src="http://feedads.g.doubleclick.net/~a/AZE4tenDJPn-5NXYyhl9IQH29uY/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.blog-experiment.de/2011-09/was-mac-os-x-besser-macht-als-windows-und-ubuntu/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

