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

<channel>
	<title>/home/antu</title>
	<atom:link href="http://www.antusblog.de/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.antusblog.de</link>
	<description>Linux, Programmierung und andere Dinge die mich interessieren</description>
	<lastBuildDate>Mon, 26 Oct 2009 06:00:37 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Ebeneneffekte (ähnlich Photoshop) mit GIMP</title>
		<link>http://www.antusblog.de/2009/10/26/ebeneneffekte-ahnlich-photoshop-mit-gimp/</link>
		<comments>http://www.antusblog.de/2009/10/26/ebeneneffekte-ahnlich-photoshop-mit-gimp/#comments</comments>
		<pubDate>Mon, 26 Oct 2009 06:00:37 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Bildbearbeitung]]></category>
		<category><![CDATA[Abgeflachte Kante]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[GIMP]]></category>
		<category><![CDATA[Glanz]]></category>
		<category><![CDATA[Kontur]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Relief]]></category>
		<category><![CDATA[Schatten]]></category>
		<category><![CDATA[Schein]]></category>
		<category><![CDATA[Schlagschatten]]></category>
		<category><![CDATA[Überlagerung]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2288</guid>
		<description><![CDATA[Die GIMP-Erweiterung Layer Effects erweitert das Ebenenmenü um 10 Effekte, die auf Ebenen angewendet werden können, so wie man es von Photoshop kennt. Mit dieser Erweiterung lassen sich problemlos Effekte wie beispielsweise Farbüberlagerungen, Schatten oder ein innerer/äußerer Schein auf eine Ebene anwenden. Die einzelnen Effekte haben teilweise auch noch ziemlich viele Einstellungsmöglichkeiten.

Es gibt zwei Varianten [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="attachment wp-att-2289" href="http://www.antusblog.de/2009/10/26/ebeneneffekte-ahnlich-photoshop-mit-gimp/auswahl-klein/"><img class="alignright size-full wp-image-2289" title="Auswahl" src="http://www.antusblog.de/wp-content/uploads/2009/10/Auswahl-klein.png" alt="Auswahl" width="150" height="150" /></a>Die GIMP-Erweiterung <a href="http://registry.gimp.org/node/186">Layer Effects</a> erweitert das Ebenenmenü um 10 Effekte, die auf Ebenen angewendet werden können, so wie man es von Photoshop kennt. Mit dieser Erweiterung lassen sich problemlos Effekte wie beispielsweise Farbüberlagerungen, Schatten oder ein innerer/äußerer Schein auf eine Ebene anwenden. Die einzelnen Effekte haben teilweise auch noch ziemlich viele Einstellungsmöglichkeiten.</p>
<p><span id="more-2288"></span></p>
<p>Es gibt zwei Varianten der Erweiterung, eine in Python geschriebene, und eine Script-Fu-Variante. Die Python-Version hat mehr Funktionen (u.A. eine Vorschau-Funktion) weswegen ich in diesem Artikel nur die Installation der Python-Version erkläre.</p>
<h2>Welche Effekte bietet die Erweiterung?</h2>
<p>Die Erweiterung bietet <strong>10 Ebeneneffekte</strong> an:</p>
<ol>
<li>Bevel and Emboss (Abgeflachte Kante und Relief)</li>
<li>Color Overlay (Farbüberlagerung)</li>
<li>Drop Shadow (Schlagschatten)</li>
<li>Gradient Overlay (Verlaufsüberlagerung)</li>
<li>Inner Glow (Schein nach innen)</li>
<li>Inner Shadow (Schatten nach innen)</li>
<li>Outer Glow (Schein nach außen)</li>
<li>Pattern Overlay (Musterüberlagerung)</li>
<li>Satin (Glanz)</li>
<li>Stroke (Kontur)</li>
</ol>
<p>Außerdem gibt es noch die Option <strong>Reapply Effects</strong>, welche den vorherigen Effekt wiederholt.</p>
<h2>Installation (unter Linux)</h2>
<ol>
<li>Man lädt die Python-Version vom <a href="http://registry.gimp.org/node/186">GIMP Plugin Registry</a> herunter.</li>
<li>Nun sieht man nach, wo sich das Plugin-Verzeichnis von GIMP befindet. Dazu klickt man auf <strong>Bearbeiten</strong> -&gt; <strong>Einstellungen</strong>, und wählt links im Menü <strong>Ordner</strong> -&gt; <strong>Plugins</strong>. Nun sieht man eine Liste von Verzeichnissen in denen GIMP nach Plugins sucht.<br />
<a rel="attachment wp-att-2294" href="http://www.antusblog.de/2009/10/26/ebeneneffekte-ahnlich-photoshop-mit-gimp/einstellungen-2/"><img class="aligncenter size-medium wp-image-2294" title="Einstellungen" src="http://www.antusblog.de/wp-content/uploads/2009/10/Einstellungen-300x204.png" alt="Einstellungen" width="300" height="204" /></a></li>
<li>Nachdem man herausgefunden hat, wo GIMP nach Erweiterungen sucht, verschiebt man die Erweiterung in eines dieser Verzeichnisse.
<p><strong>Beispiel:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">cp</span> ~<span style="color: #000000; font-weight: bold;">/</span>Heruntergeladenes<span style="color: #000000; font-weight: bold;">/</span>layerfx.py ~<span style="color: #000000; font-weight: bold;">/</span>.gimp-<span style="color: #000000;">2.6</span><span style="color: #000000; font-weight: bold;">/</span>plugins<span style="color: #000000; font-weight: bold;">/</span></pre></div></div>

</li>
<li>Nun muss die Datei ausführbar gemacht werden, das kann man mit <code>chmod</code> machen.

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">chmod</span> a+x ~<span style="color: #000000; font-weight: bold;">/</span>.gimp-<span style="color: #000000;">2.6</span><span style="color: #000000; font-weight: bold;">/</span>plugins<span style="color: #000000; font-weight: bold;">/</span>layerfx.py</pre></div></div>

</li>
<li>Wenn GIMP gerade läuft, muss es neu gestartet werden, ansonsten startet man GIMP.</li>
<li>Im Ebenenmenü findet sich nun der Unterpunkt <strong>Layer Effects</strong>. Die Erweiterung kann jetzt benutzt werden.<br />
<a rel="attachment wp-att-2295" href="http://www.antusblog.de/2009/10/26/ebeneneffekte-ahnlich-photoshop-mit-gimp/layer-effects-menu/"><img class="aligncenter size-full wp-image-2295" title="Menü von Layer Effects" src="http://www.antusblog.de/wp-content/uploads/2009/10/Layer.Effects.Menu.png" alt="Menü von Layer Effects" width="300" height="100" /></a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/26/ebeneneffekte-ahnlich-photoshop-mit-gimp/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>4 Verwalter für die Zwischenablage</title>
		<link>http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/</link>
		<comments>http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/#comments</comments>
		<pubDate>Fri, 23 Oct 2009 06:00:41 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[Clipman]]></category>
		<category><![CDATA[Glipper]]></category>
		<category><![CDATA[Gnome]]></category>
		<category><![CDATA[KDE]]></category>
		<category><![CDATA[Klipper]]></category>
		<category><![CDATA[Parcellite]]></category>
		<category><![CDATA[X11]]></category>
		<category><![CDATA[Zwischenablage]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2254</guid>
		<description><![CDATA[Ein kopierter Text bleibt nur so lange in der Zwischenablage, wie das Programm läuft aus dem er kopiert wurde. Diese Arbeitsweise der Zwischenablage von X11 (grafische Oberfläche von Linux) ist für viele Anwender verwirrend und ärgerlich. Ein Verwalter für die Zwischenablage behebt das Problem, und bringt meist noch ein paar andere nützliche Funktionen mit sich, [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-2266" title="Glipper" src="http://www.antusblog.de/wp-content/uploads/2009/10/GlipperKlein.png" alt="Glipper" width="150" height="150" />Ein kopierter Text bleibt nur so lange in der Zwischenablage, wie das Programm läuft aus dem er kopiert wurde. Diese Arbeitsweise der Zwischenablage von X11 (grafische Oberfläche von Linux) ist für viele Anwender verwirrend und ärgerlich. Ein Verwalter für die Zwischenablage behebt das Problem, und bringt meist noch ein paar andere nützliche Funktionen mit sich, beispielsweise eine Liste der zuletzt kopierten Daten/Texte welche es einem ermöglicht mehrere Texte auf einmal zu kopieren und in beliebiger Reihenfolge wieder einzufügen. Zusätzlich gibt es meist noch einige andere praktische Funktionen wie beispielsweise die Synchronisierung der Zwischenablage mit anderen Rechnern im Netzwerk, oder der Speicherung der Zwischenablage beim Herunterfahren.</p>
<p>In diesem Artikel stelle ich 4 Verwalter für die Zwischenablage vor: Glipper, Klipper, Clipman und Parcellite.</p>
<p><span id="more-2254"></span></p>
<h2>Glipper</h2>
<p><a rel="attachment wp-att-2260" href="http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/glipper/"><img class="aligncenter size-full wp-image-2260" title="Glipper" src="http://www.antusblog.de/wp-content/uploads/2009/10/Glipper.png" alt="Glipper" width="500" height="249" /></a></p>
<p><a href="http://glipper.sourceforge.net">Glipper</a> ist, wie sich aus dem Namen vielleicht schon erkennen lässt, ein Zwischenablagenverwalter für <strong>Gnome</strong>. Er bietet neben den Standardfunktionen noch die Möglichkeit Schnipsel zu speichern, die dann bequem aus einer Liste ausgewählt und in die Zwischenablage befördert werden können (auf dem Bild oben nicht sichtbar). Außerdem ist es möglich, Glipper so zu konfigurieren, dass die Zwischenablage sich über das Netzwerk mit anderen Rechnern synchronisiert.</p>
<h2>Klipper</h2>
<h2><a rel="attachment wp-att-2255" href="http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/klipper/"><img class="aligncenter size-full wp-image-2255" title="Klipper" src="http://www.antusblog.de/wp-content/uploads/2009/10/Klipper.png" alt="Klipper" width="500" height="250" /></a></h2>
<p>Klipper ist das KDE-Pendant zu Glipper, es wird direkt mit <strong>KDE</strong> mitgeliefert, und muss nicht extra installiert werden. Klipper bietet neben den Standardfunktionen noch die Möglichkeit Aktionen zu erstellen. Wenn ein Text kopiert wird, und dieser auf einen bestimmten regulären Ausdruck passt, dann öffnet Klipper unten rechts ein kleines Kontext-Menü mit den festgelegten Aktionen. Ein Beispiel: Bei einer URL/Webadresse bietet Klipper das Öffnen im Firefox/Konqueror/Mozilla oder das Verschicken der URL per E-Mail an.</p>
<h2>Parcellite</h2>
<p><a rel="attachment wp-att-2261" href="http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/parcellite/"><img class="aligncenter size-full wp-image-2261" title="Parcellite" src="http://www.antusblog.de/wp-content/uploads/2009/10/Parcellite.png" alt="Parcellite" width="500" height="250" /></a><a href="parcellite.sourceforge.net">Parcellite</a> ist ein auf GTK basierender Verwalter für die Zwischenablage, er ist nicht direkt von einer Arbeitsplatzumgebung abhängig, kann also mit KDE/Gnome/XFCE/Fluxbox oder irgendeiner anderen Oberfläche verwendet werden, eine Systemleiste/Systray ist allerdings erforderlich. Auch Parcellite bietet die Möglichkeit Aktionen festzulegen. Per Strg+Klick auf das Parcellite-Icon wird das Aktionen-Menü angezeigt. Die einzelnen Einträge der Zwischenablage können direkt im Auswahlmenü noch bearbeitet werden, und außerdem kann Parcellite auch auf der Kommandozeile verwendet werden.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Ausgabe von php -v in der Zwischenablage speichern</span>
php <span style="color: #660033;">-v</span> <span style="color: #000000; font-weight: bold;">|</span> parcellite
<span style="color: #666666; font-style: italic;"># Zwischenablage ausgeben</span>
parcellite <span style="color: #660033;">-o</span></pre></div></div>

<h2>Clipman</h2>
<p><a rel="attachment wp-att-2271" href="http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/clipman/"><img class="aligncenter size-full wp-image-2271" title="Clipman" src="http://www.antusblog.de/wp-content/uploads/2009/10/Clipman.png" alt="Clipman" width="500" height="250" /></a><a href="http://goodies.xfce.org/projects/panel-plugins/xfce4-clipman-plugin">Clipman</a> ist für XFCE-Benutzer, und von den hier vorgestellten Verwaltern der wohl am wenigsten umfangreichste. Er bietet die Möglichkeit die Zwischenablage beim Verlassen zu speichern, und eine Schaltfläche zum Löschen der Zwischenablage, weitere besondere Funktionen bietet Clipman nicht.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/23/4-verwalter-fur-die-zwischenablage/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS: DIV-Element mit 100% Höhe</title>
		<link>http://www.antusblog.de/2009/10/22/css-div-element-mit-100-hohe/</link>
		<comments>http://www.antusblog.de/2009/10/22/css-div-element-mit-100-hohe/#comments</comments>
		<pubDate>Thu, 22 Oct 2009 06:00:32 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[100% Höhe]]></category>
		<category><![CDATA[DIV]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webgestaltung]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2229</guid>
		<description><![CDATA[Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen height:100%; ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.

Der Aufbau: [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.antusblog.de/?p=2229"><img class="alignright size-full wp-image-2230" title="100% Hoehe" src="http://www.antusblog.de/wp-content/uploads/2009/10/100.Prozent.Hoehe.png" alt="100% Hoehe" width="150" height="150" /></a>Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen <code>height:100%;</code> ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.</p>
<p><span id="more-2229"></span></p>
<h2>Der Aufbau: HTML</h2>
<p>Der HTML-Quelltext hierzu ist einfach, es wird ein DIV-Element erstellt, welches alle weiteren Inhalte umfasst. Dieses bekommt eine Klasse, oder besser eine ID zugewiesen, damit es leichter per CSS gestaltet werden kann.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;wrapper&quot;</span>&gt;</span>
            [...]
        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></pre></div></div>

<h2>HTML und BODY</h2>
<p>Damit, dem DIV nun einfach eine Höhe von 100% zuzuweisen, ist es noch nicht getan. Die 100% beziehen sich ja auf die Größe des Eltern-Elements, dem <code>BODY</code>, dieser braucht also auch eine Höhe von 100%. Das <code>HTML</code>-Element bekommt ebenfalls eine Höhe von 100%, schließlich ist es ja das Eltern-Element von <code>BODY</code>.</p>

<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;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Viele Browser geben dem <code>HTML</code> oder dem <code>BODY</code>-Element standardmäßig noch einen kleinen Innenabstand, so dass die Inhalte nicht direkt am Rand kleben. In diesem Fall ist das aber unerwünscht, denn einerseits soll das DIV-Element ja die ganze Höhe ausfüllen (ohne andersfarbige Ränder), und andererseits gäbe es sonst Scrollbalken (100% + 5px Innenabstand oben = mehr als 100% -> Scrollbalken).</p>

<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;">&#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: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<h2>DIV-Element auf 100% der Höhe von BODY</h2>
<p>Jetzt wo das BODY- und das HTML-Element auf 100% Höhe sind, muss nur noch das DIV-Element auf 100% Höhe gebracht werden:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#wrapper</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #808080; font-style: italic;">/* Für moderne Browser */</span>
    <span style="color: #000000; font-weight: bold;">min-height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
&nbsp;
    <span style="color: #808080; font-style: italic;">/* Für den Internet Explorer 6 */</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span> !important<span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Das Element soll eine Mindesthöhe von 100% haben, bei längeren Inhalten soll es sich von selbst vergrößern. Eine Mindesthöhe kann mit der CSS-Eigenschaft <code>min-height</code> angegeben werden, würde man hier <code>height</code> verwenden, würden moderne Browser nicht zulassen, dass das DIV-Element mit längeren Inhalten mitwächst, es wäre immer genau 100% hoch. Der Internet Explorer 6 hingegen versteht die <code>height</code>-Eigenschaft als Mindesthöhe, <code>min-height</code> kennt der IE 6 nicht.
<p>Hier kann man sich die Tatsache zu Nutze machen, das der IE 6 <a href="http://www.kk-works.de/2005/10/12/ie-vorurteile/">!important</a> etwas anders interpretiert als andere Browser. Zuerst legt man fest, dass die Höhe des Elements sich dem Inhalt anpassen soll (<code>auto</code>), und das diese Angabe alle anderen Angaben zur Höhe überschreibt (<code>!important</code>). Dann wird dem Element eine Höhe von 100% zugewiesen, was der IE 6 als Mindesthöhe interpretiert. Da der IE 6 das <code>!important</code> in diesem Fall ignoriert, verwendet er die zweite Angabe, und stellt eine Mindesthöhe von 100% ein. Alle anderen Browser beachten das <code>!important</code>, und ignorieren die zweite <code>height</code>-Angabe.</p>
<p>In Aktion sieht das dann so aus: <a href="/demos/12-seite-mit-100-prozent-hoehe/Beispiel.html">Beispiel</a></p>
<h2>Eine Fußzeile?</h2>
<p>Wie erstellt man jetzt eine Fußzeile? Dazu wird ein DIV-Element mit der ID <em>footer</em> erstellt, dieses wird mit CSS wie folgt gestaltet:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#footer</span> <span style="color: #00AA00;">&#123;</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;">bottom</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">2em</span>
 <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Mittels <code>position:absolute;</code> wird festgelegt, dass das Element relativ zum nächsthöheren positionierten Element ausgerichtet wird. Mit <code>bottom:0;</code> bestimmt man, dass das Fußzeilen-Element ganz am unteren Rand vom <code>wrapper</code>-Element positioniert wird.</p>
<p>Nun muss dem <code>wrapper</code>-Element allerdings noch eine relative Positionierung zugewiesen werden, damit das Fußzeilen-Element sich darauf beziehen kann.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#wrapper</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #808080; font-style: italic;">/* Für moderne Browser */</span>
    <span style="color: #000000; font-weight: bold;">min-height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
&nbsp;
    <span style="color: #808080; font-style: italic;">/* Für den Internet Explorer */</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span> !important<span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Der Inhalt selbst bekommt auch ein eigenes DIV-Element, welches einen Innenabstand so hoch wie die Fußzeile bekommt, so dass die Inhalte nicht unter der Fußzeile angezeigt werden.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;wrapper&quot;</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content&quot;</span>&gt;</span>
                [Inhalte]
            <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;footer&quot;</span>&gt;</span>
                [Inhalte der Fußzeile]
            <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></pre></div></div>

<p>Das CSS für das <code>content</code>-DIV sieht so aus:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#content</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">2em</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Fertig sieht das dann so aus: <a href="/demos/12-seite-mit-100-prozent-hoehe/Beispiel2.html">Beispiel</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/22/css-div-element-mit-100-hohe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Farbkombinationen unter Gnome mit Agave</title>
		<link>http://www.antusblog.de/2009/10/21/farbkombinationen-unter-gnome-mit-agave/</link>
		<comments>http://www.antusblog.de/2009/10/21/farbkombinationen-unter-gnome-mit-agave/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 06:00:14 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[Agave]]></category>
		<category><![CDATA[Bildbearbeitung]]></category>
		<category><![CDATA[Farben]]></category>
		<category><![CDATA[Farbkombinationen]]></category>
		<category><![CDATA[Gnome]]></category>
		<category><![CDATA[Harmonische Farben]]></category>
		<category><![CDATA[Webgestaltung]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2149</guid>
		<description><![CDATA[Agave ist ein kleines Gnome-Werkzeug mit dem sich Farbkombinationen finden lassen. Gerade beim Gestalten von Webseiten oder beim Erstellen von Bildern ist ist es wichtig, das Farben zueinander passen bzw. harmonisch wirken. Das Programm bietet mehrere Algorithmen zum Finden von Farben, und auch einen Zufallsgenerator. Die Farben lassen sich exportieren, und in einer Liste von [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="attachment wp-att-2151" href="http://www.antusblog.de/2009/10/21/farbkombinationen-unter-gnome-mit-agave/agave-klein/"><img class="alignright size-full wp-image-2151" title="Farbkombinationen finden mit Agave" src="http://www.antusblog.de/wp-content/uploads/2009/10/Agave.klein.png" alt="Farbkombinationen finden mit Agave" width="150" height="150" /></a><a href="http://home.gna.org/colorscheme/">Agave</a> ist ein kleines Gnome-Werkzeug mit dem sich Farbkombinationen finden lassen. Gerade beim Gestalten von Webseiten oder beim Erstellen von Bildern ist ist es wichtig, das Farben zueinander passen bzw. harmonisch wirken. Das Programm bietet mehrere Algorithmen zum Finden von Farben, und auch einen Zufallsgenerator. Die Farben lassen sich exportieren, und in einer Liste von Favoriten speichern.</p>
<p><span id="more-2149"></span></p>
<p>Die Bedienung von Agave ist ziemlich intuitiv. Mittig links im Fenster ist eine Schaltfläche mittels derer man eine Farbe auswählen kann, die als Grundfarbe der Farbkombination dient. Daneben wird der Algorithmus zum Finden von passenden Farben bestimmt. Hier stehen folgende Möglichkeiten zur Auswahl: <strong>Komplementäre Farben</strong>,<strong> zwei halb-komplementäre Farben</strong>, <strong>Dreiergruppe</strong>, <strong>Vierergruppe</strong>, <strong>sinngemäße Farben</strong> und <strong>Einfarbig</strong>.<a rel="attachment wp-att-2150" href="http://www.antusblog.de/2009/10/21/farbkombinationen-unter-gnome-mit-agave/agave/"><img class="aligncenter size-full wp-image-2150" title="Agave-Fenster" src="http://www.antusblog.de/wp-content/uploads/2009/10/Agave.png" alt="Agave-Fenster" width="590" height="502" /></a></p>
<p>Es ist auch möglich die Grundfarbe aus 4 verschiedenen Paletten auszuwählen, die da wären: Websichere Farben, Tango Icon Palette, Gnome Icon Palette und Visibone. Oben finden sich außerdem Schaltflächen zum Verringern/Erhöhen von Sättigung und Helligkeit der Grundfarbe. Zusätzlich gibt es noch eine Schaltfläche für eine zufällige Grundfarbe.</p>
<p>Hat man eine Farbkombination gefunden, kann man die Farben mittels Doppelklick markieren und in der Favoritenleiste abspeichern. Die Favoriten lassen sich dann auch als GIMP-Farbpalette exportieren.</p>
<p>Die meisten Distributionen bieten Pakete für <a href="http://home.gna.org/colorscheme/">Agave</a> an, unter Ubuntu genügt ein <code>sudo apt-get install</code> um es zu installieren.</p>
<p>(via <a href="http://ubuntublog.ch/applikationen/36-exotische-linux-applikationen">Ubuntublog.ch</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/21/farbkombinationen-unter-gnome-mit-agave/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Konsolen/Bildschirm sperren mit vlock</title>
		<link>http://www.antusblog.de/2009/10/20/konsolenbildschirm-sperren-mit-vlock/</link>
		<comments>http://www.antusblog.de/2009/10/20/konsolenbildschirm-sperren-mit-vlock/#comments</comments>
		<pubDate>Tue, 20 Oct 2009 06:00:02 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[Bildschirmschoner]]></category>
		<category><![CDATA[Sicherheit]]></category>
		<category><![CDATA[Sperren]]></category>
		<category><![CDATA[vlock]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2176</guid>
		<description><![CDATA[Mit dem Kommandozeilen-Programm vlock lässt sich der Bildschirm/die Konsole(n) sperren. So kann man sicherstellen, dass niemand ohne das Kennwort auf den Rechner/eine bestimmte Konsole zugreifen kann, wenn der Rechner mal unbeaufsichtigt ist. Zum Entsperren muss das Benutzerkennwort (oder root-Kennwort) eingegeben werden.
Eine gesperrte Konsole lässt sich, wenn das gewünscht ist, auch mit STRG+ALT+F[1-7] nicht wechseln, nicht [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="attachment wp-att-2177" href="http://www.antusblog.de/2009/10/20/konsolenbildschirm-sperren-mit-vlock/vlock/"><img class="alignright size-full wp-image-2177" title="vlock" src="http://www.antusblog.de/wp-content/uploads/2009/10/vlock.png" alt="vlock" width="150" height="150" /></a>Mit dem Kommandozeilen-Programm <a href="http://cthulhu.c3d2.de/~toidinamai/vlock/vlock.html"><code>vlock</code></a> lässt sich der Bildschirm/die Konsole(n) sperren. So kann man sicherstellen, dass niemand ohne das Kennwort auf den Rechner/eine bestimmte Konsole zugreifen kann, wenn der Rechner mal unbeaufsichtigt ist. Zum Entsperren muss das Benutzerkennwort (oder root-Kennwort) eingegeben werden.</p>
<p>Eine gesperrte Konsole lässt sich, wenn das gewünscht ist, auch mit <code>STRG</code>+<code>ALT</code>+<code>F[1-7]</code> nicht wechseln, nicht durch <code>STRG</code>+<code>C</code> o.Ä. abbrechen und auch die SysRQ-Tasten kann <code>vlock</code> vorübergehend deaktivieren. Somit ist <code>vlock</code> ziemlich sicher.</p>
<p><span id="more-2176"></span></p>
<h2>Benutzung</h2>
<p>Um die aktuelle Konsole zu sperren, gibt man einfach <code>vlock</code> (ohne Parameter) ein.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">vlock</pre></div></div>

<p>Nun ist nur noch der Text &#8220;This TTY is now locked.&#8221; zu sehen, zum Entsperren muss das Kennwort eingegeben werden.</p>
<p><a href="http://www.antusblog.de/2009/10/20/konsolenbildschirm-sperren-mit-vlock/this-tty-is-now-locked/" rel="attachment wp-att-2204"><img src="http://www.antusblog.de/wp-content/uploads/2009/10/This.TTY.is.now.locked.png" alt="This TTY is now locked." title="This TTY is now locked." width="500" height="200" class="aligncenter size-full wp-image-2204" /></a></p>
<p>Möchte man alle virtuellen Konsolen sperren, und das wechseln der Konsole per Tastenkombination (Alt+F1-6) unterbinden, wird der Parameter <code>a/all</code> verwendet.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">vlock <span style="color: #660033;">-a</span></pre></div></div>

<p>Das funktioniert allerdings nur, wenn man sich im Moment auf einer virtuellen Konsole befindet. Ist das nicht der Fall, kann man noch den Parameter <code>n/new</code> verwenden, um vorher auf eine neue virtuelle Konsole zu wechseln.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">vlock <span style="color: #660033;">-an</span></pre></div></div>

<p>Dabei ist es aber noch möglich, die Sperre über die SysRq-Tasten zu umgehen, möchte man das ebenfalls verhindern (ist sinnvoll), verwendet man zusätzlich den Parameter <code>s/disable-sysrq</code>.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">vlock <span style="color: #660033;">-ans</span></pre></div></div>

<p>Für das Sperren der SysRq-Tasten, sowie das Wechseln auf eine neue virtuelle Konsole (<code>n/new</code>) sind allerdings <code>root</code>-Rechte erforderlich.</p>

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

<p><strong>Achtung</strong>: Wird vlock mittels <code>sudo</code> gestartet, muss das <code>root</code>-Kennwort eingegeben werden, das Benutzer-Kennwort wird nicht funktionieren! Gerade Ubuntu-Benutzer müssen hier vorsichtig sein, da <code>root</code> unter Ubuntu standardmäßig kein Kennwort hat, und man die Kommandozeile deshalb nicht entsperren kann (Ubuntu-Benutzer müssen root erst ein Kennwort geben, per <code>sudo passwd</code>).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/20/konsolenbildschirm-sperren-mit-vlock/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Der Trinitäts-Operator</title>
		<link>http://www.antusblog.de/2009/10/19/der-trinitats-operator/</link>
		<comments>http://www.antusblog.de/2009/10/19/der-trinitats-operator/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 11:08:37 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Dreifach konditionaler Operator]]></category>
		<category><![CDATA[Fragezeichenoperator]]></category>
		<category><![CDATA[Ternary-Operator]]></category>
		<category><![CDATA[Trinitäts-Operator]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2087</guid>
		<description><![CDATA[Der Trinitäts-Operator kann verwendet werden, um Zuweisungen/Funktionsaufrufe in Verbindung mit einer Bedingung bzw. Abfrage stark zu verkürzen. Richtig eingesetzt erhöht er die Lesbarkeit des Quelltextes und vermindert die Schreibarbeit.
In diesem Artikel wird erklärt, wie der Trinitäts-Operator (engl. Ternary Operator, auch Fragezeichenoperator oder dreifach konditionaler Operator genannt) funktioniert, und wie man ihn richtig anwendet.

Funktionsweise
Der Trinitäts-Operator stellt [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.antusblog.de/?p=2087"><img class="alignright size-full wp-image-2100" title="Der Trinitaets Operator" src="http://www.antusblog.de/wp-content/uploads/2009/10/Der.Trinitaets-Operator.png" alt="Der Trinitaets Operator" width="150" height="150" /></a>Der Trinitäts-Operator kann verwendet werden, um Zuweisungen/Funktionsaufrufe in Verbindung mit einer Bedingung bzw. Abfrage stark zu verkürzen. Richtig eingesetzt erhöht er die Lesbarkeit des Quelltextes und vermindert die Schreibarbeit.</p>
<p>In diesem Artikel wird erklärt, wie der Trinitäts-Operator (engl. Ternary Operator, auch Fragezeichenoperator oder dreifach konditionaler Operator genannt) funktioniert, und wie man ihn richtig anwendet.</p>
<p><span id="more-2087"></span></p>
<h2>Funktionsweise</h2>
<p>Der Trinitäts-Operator stellt im Grunde eine Fallunterscheidung in Verbindung mit einer Zuweisung oder einem Funktionsaufruf dar. Man möchte einer Variablen entweder Wert 1, oder Wert 2 zuweisen, abhängig von einer Bedingung. Oder: Man möchte, abhängig von einer Bedingung entweder Funktion X oder Funktion Y aufrufen. Dadurch, dass man sich das <code>if/else</code> sparen kann, und den Variablennamen nur einmal schreiben muss, wird das ganze nicht nur kürzer, sondern auch übersichtlicher.</p>
<h3>Abfrage/Zuweisung mit if</h3>
<p>Würde man eine solche Zuweisung mit einer normalen <code>if/else</code>-Abfrage realisieren, bräuchte man 5 Zeilen. Das sähe wie folgt aus:</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">if (&lt;Bedingung&gt;) {
    &lt;Variable&gt; = &lt;Wert 1&gt;;
} else {
    &lt;Variable&gt; = &lt;Wert 2&gt;;
}</pre></div></div>

<h3>Abfrage/Zuweisung mit if (verkürzt)</h3>
<p>Eine solche <code>if</code>-Abfrage lässt sich natürlich noch verkürzen. Die geschweiften Klammern können weggelassen werden, und man kann alles in eine Zeile quetschen.</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">if (&lt;Bedingung&gt;) &lt;Variable&gt; = &lt;Wert 1&gt;; else &lt;Variable&gt; = &lt;Wert 2&gt;;</pre></div></div>

<h3>Abfrage/Zuweisung mit dem Trinitäts-Operator.</h3>
<p>Mit dem Trinitäts-Operator wird die Zuweisung dann noch kürzer, und wenn man den Trinitäts-Operator kennt, ist auch sofort ersichtlich, was diese Zeile tut.</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">&lt;Variable&gt; = (&lt;Bedingung&gt;) ? &lt;Wert 1&gt; : &lt;Wert 2&gt;;</pre></div></div>

<h3>Beispiel</h3>
<p>Und noch ein Beispiel, mit richtigen Werten.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Normale Form</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$antwort1</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">42</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$antwort2</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1337</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$allesrichtig</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$allesrichtig</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Verkürzte Form</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$antwort1</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">42</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$antwort2</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1337</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$allesrichtig</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">else</span> <span style="color: #000088;">$allesrichtig</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Trinitäts-Operator</span>
&nbsp;
<span style="color: #000088;">$allesrichtig</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$antwort1</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">42</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$antwort2</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1337</span><span style="color: #009900;">&#41;</span> ? <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span></pre></div></div>

<p>Man schreibt also zuerst die Bedingung (in Klammern), dann ein Fragezeichen und den Wert den die Variable annehmen soll, wenn die Bedingung wahr ist, dann einen Doppelpunkt, und den Wert für den Fall das die Bedingung unwahr ist.</p>
<h2>Noch kürzer</h2>
<p>Seit PHP 5.3 gibt es noch eine weitere Form des Trinitäts-Operators, mit der sich manche Zuweisungen noch weiter verkürzen lassen.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>Variable<span style="color: #339933;">&gt;</span> <span style="color: #339933;">=</span> <span style="color: #339933;">&lt;</span>Variable<span style="color: #339933;">/</span>Bedingung<span style="color: #339933;">&gt;</span> ?<span style="color: #339933;">:</span> <span style="color: #339933;">&lt;</span>Wert<span style="color: #339933;">&gt;;</span></pre></div></div>

<p>Dabei wird <Variable/Bedingung> ausgewertet ob die Bedingung wahr ist, bzw. die Variable den booleschen Wert <code>true</code> hat (oder dazu umgewandelt werden kann). Ist das der Fall, bekommt die Variable den Wert der Bedingung zugewiesen, ansonsten den anderen Wert.</p>
<p>Hier noch ein Beispiel, welches das ganze vielleicht etwas besser verdeutlicht: </p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$id</span> <span style="color: #339933;">=</span> <span style="color: #339933;">@</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span> ?<span style="color: #339933;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span></pre></div></div>

<p>Wenn <code>$_GET['id']</code> gesetzt, und ungleich <code>0</code> ist, nimmt <code>$id</code> den Wert von <code>$_GET['id']</code> an. Ansonsten bekommt <code>$id</code> den Wert <code>0</code>. Das <code>@</code> steht da, damit PHP nicht über eine undeklarierte Variable meckert, falls <code>$_GET['id']</code> nicht gesetzt ist.</p>
<h2>Funktionen aufrufen</h2>
<p>Der Trinitäts-Operator kann auch in Verbindung mit Funktionsaufrufen verwendet werden. Dabei ist es auch möglich mehrere Funktionen aufzurufen. Von letzterem rate ich allerdings ab, in den meisten Fällen wird das schnell unübersichtlich. Wie es funktioniert erkläre ich allerdings trotzdem: Um mehrere Funktionen im Trinitäts-Operator zu verwenden, müssen diese mittels <code>AND</code> verbunden werden, eine Trennung mittels Semikolon oder <code>&#038;&#038;</code> funktioniert nicht.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$allesrichtig</span> ? <span style="color: #b1b100;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Alle Fragen wurden richtig beantwortet, super!&quot;</span><span style="color: #009900;">&#41;</span> AND
                <span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Das Quiz ist zu Ende.&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #990000;">die</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Leider falsch!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Es ist übrigens auch möglich, den Trinitätsoperator innerhalb von Zeichenketten zu verwenden:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'Bitte '</span> <span style="color: #339933;">.</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$siezen</span> ? <span style="color: #0000ff;">'klicken Sie '</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">'klicke '</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'hier, '</span>
<span style="color: #339933;">.</span> <span style="color: #0000ff;">'um zur vorherigen Seite zurückzukehren'</span><span style="color: #339933;">;</span></pre></div></div>

<h2>So nicht!</h2>
<p>Der Trinitäts-Operator kann zwar verschachtelt werden, davon rate ich aber ab. Solche Zuweisungen werden schnell sehr unübersichtlich.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Unübersichtlich:</span>
<span style="color: #000088;">$allesrichtig</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$antwort1</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">42</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$antwort2</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1337</span><span style="color: #009900;">&#41;</span> ? <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$antwort3</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$antwort4</span><span style="color: #009900;">&#41;</span> ?
                <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span> <span style="color: #339933;">===</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span> ? <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span></pre></div></div>

<h2>Beispiel-Datei</h2>
<p>Eine Beispieldatei, mit allen möglichen Formen der Verwendung des Trinitäts-Operators habe ich auch noch erstellt: <a href="/demos/11-der-trinitaets-operator/Beispiel.phps">Beispiel.phps</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/19/der-trinitats-operator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bildschirmfotos unter Linux</title>
		<link>http://www.antusblog.de/2009/10/08/bildschirmfotos-unter-linux/</link>
		<comments>http://www.antusblog.de/2009/10/08/bildschirmfotos-unter-linux/#comments</comments>
		<pubDate>Thu, 08 Oct 2009 13:07:25 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[Bildschirmfoto]]></category>
		<category><![CDATA[fbgrab]]></category>
		<category><![CDATA[GIMP]]></category>
		<category><![CDATA[Gnome]]></category>
		<category><![CDATA[ImageMagick]]></category>
		<category><![CDATA[import]]></category>
		<category><![CDATA[KDE]]></category>
		<category><![CDATA[KSnapshot]]></category>
		<category><![CDATA[setterm]]></category>
		<category><![CDATA[Shutter]]></category>
		<category><![CDATA[xwd]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2022</guid>
		<description><![CDATA[Hin und wieder muss man ein Bild bzw. &#8220;Foto&#8221; vom Bildschirm machen, beispielsweise um einen besonders guten Spielstand in einem Spiel festzuhalten, ein Problem besser zu beschreiben, beim Schreiben von Anleitungen oder beim Dokumentieren von Abläufen. Bildschirmfotos (engl. Screenshots) sind generell immer nützlich wenn man anderen einen Einblick in das geben möchte, was man selbst [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.antusblog.de/wp-content/uploads/2009/10/ShutterKlein.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/10/ShutterKlein.png" alt="Bildschirmfotos unter Linux erstellen" title="Bildschirmfotos unter Linux erstellen" width="500" height="150" class="aligncenter size-full wp-image-2080" /></a>Hin und wieder muss man ein Bild bzw. &#8220;Foto&#8221; vom Bildschirm machen, beispielsweise um einen besonders guten Spielstand in einem Spiel festzuhalten, ein Problem besser zu beschreiben, beim Schreiben von Anleitungen oder beim Dokumentieren von Abläufen. Bildschirmfotos (engl. <strong>Screenshots</strong>) sind generell immer nützlich wenn man anderen einen Einblick in das geben möchte, was man selbst gerade auf dem Bildschirm sieht.</p>
<p>In dieser Anleitung stelle ich <strong>9 Programme</strong> zum Erstellen von Bildschirmfotos vor, darunter auch solche für Fotos von der <strong>Konsole</strong> (sowohl mit/ohne <strong>Framebuffer</strong>) als auch zum Fotografieren von kompletten <strong>Webseiten</strong>. Außerdem beschreibe ich, wie KDE/Gnome so konfiguriert werden können, das automatisch <strong>auf Tastendruck</strong> ein Bildschirmfoto erstellt und gespeichert wird.</p>
<p><span id="more-2022"></span></p>
<h2>Programme</h2>
<p>Es gibt für Linux unzählige Programme zum Erstellen von Bildschirmfotos, die besten bzw. populärsten sind hier aufgelistet.</p>
<h3>Umfangreich: Shutter</h3>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/Shutter.png"><img class="size-medium wp-image-2058 alignright" title="Shutter" src="http://www.antusblog.de/wp-content/uploads/2009/09/Shutter-300x211.png" alt="Shutter" width="150" height="150" /></a>Shutter ist wohl das bei weitem umfangreichste Programm in dieser Liste. Mit Shutter lassen sich einzelne Fenster, Fenster-Bereiche, Bildschirme/Arbeitsflächen, aber auch ganze Webseiten aufnehmen. Mit dem Auswahl-Werkzeug lässt sich die Aufnahme aber auch auf einen ganz bestimmten Bereich beschränken. Praktischerweise werden die erstellten Bildschirmfotos in Sitzungen gruppiert und in einer Übersicht angezeigt. Shutter enthält auch noch diverse nützliche Erweiterungen, mit denen die Bilder noch weiter verändert werden können, beispielsweise gibt es eine Erweiterung die das Bild aussehen lässt, als wäre es ein Polaroid (mit Rahmen). Auch Wasserzeichen lassen sich auf diesem Weg einfach hinzufügen.</p>
<p style="clear:both;"><a href="http://www.antusblog.de/wp-content/uploads/2009/09/Shutter.DrawingTool.png"><img class="size-thumbnail wp-image-2059 alignright" title="Bildbearbeitung direkt in Shutter" src="http://www.antusblog.de/wp-content/uploads/2009/09/Shutter.DrawingTool-150x150.png" alt="Bildbearbeitung direkt in Shutter" width="150" height="150" /></a>Erstellte Bildschirmfotos können direkt in Shutter weiterbearbeitet werden: Das Shutter DrawingTool bietet viele nützliche Werkzeuge zum Dokumentieren/Verändern des Bildschirmfotos, beispielsweise zum Erstellen von Pfeilen, Textfeldern, einer automatisch hochzählenden Bildnummerierung, zensieren von privaten Daten im Bildschirmfoto, uvm.</p>
<p>Shutter kann die Bilder auch direkt auf einen Imagehoster wie z.B. <a href="http://imagebanana.com/">ImageBanana</a> hochladen, in einem Verzeichnis abspeichern, oder per FTP auf einen Server hochladen. Sogar ein Export ins PDF-Format ist möglich. Für Gnome-Benutzer gibt es noch die Möglichkeit in den Einstellungen globale Tastenkombinationen fürs Erstellen von Bildschirmfotos festzulegen.</p>
<h3>Für KDE-Benutzer: KSnapshot</h3>
<p>Vom Funktionsumfang kommt KSnapshot zwar bei weitem nicht an Shutter ran, aber für die meisten Zwecke dürfte es völlig ausreichen. Es bietet folgende Aufnahmemodi: den gesamten Bildschirm, das Fenster unter dem Mauszeiger, eine Auswahl, einen Teil eines Fensters, und den aktuellen Bildschirm.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/KSnapshot.png"><img class="aligncenter size-full wp-image-2070" title="KSnapshot" src="http://www.antusblog.de/wp-content/uploads/2009/09/KSnapshot.png" alt="KSnapshot" width="416" height="359" /></a></p>
<h3>Gleich weiter bearbeiten: GIMP</h3>
<p>Auch mit dem Bildbearbeitungsprogramm GIMP lassen sich Bildschirmfotos machen. Das hat den Vorteil, dass die Bilder gleich weiterbearbeitet werden können. Um mit GIMP ein Bildschirmfoto zu erstellen, klickt man auf <strong>Datei</strong> -&gt; <strong>Erstellen</strong> -&gt; <strong>Bildschirmfoto &#8230;</strong></p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/GIMP.png"><img class="aligncenter size-full wp-image-2066" title="GIMP" src="http://www.antusblog.de/wp-content/uploads/2009/09/GIMP.png" alt="GIMP" width="418" height="366" /></a></p>
<h3>Auf der Kommandozeile: ImageMagick</h3>
<p>Wenn die ImageMagick-Bibliothek installiert ist, können mit dem <code>import</code>-Kommando Bildschirmfotos erstellt werden.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">import <span style="color: #000000; font-weight: bold;">&lt;</span>Dateiname<span style="color: #000000; font-weight: bold;">&gt;</span></pre></div></div>

<p>Es erscheint ein Fadenkreuz, und das zu fotografierende Fenster kann ausgewählt werden. Möchte man ein Bild vom gesamten Bildschirm erstellen, wird folgender Befehl verwendet:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">import <span style="color: #660033;">-window</span> root <span style="color: #000000; font-weight: bold;">&lt;</span>Dateiname<span style="color: #000000; font-weight: bold;">&gt;</span></pre></div></div>

<p>Wenn <code>import</code> das Bild nicht sofort, sondern erst nach einer bestimmten Anzahl Sekunden erstellen soll, wird die <code>-pause</code> Option verwendet.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">import <span style="color: #660033;">-window</span> root <span style="color: #660033;">-pause</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Sekunden<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Dateiname<span style="color: #000000; font-weight: bold;">&gt;</span></pre></div></div>

<p>Außerdem kann die <code>-geometry</code> Option verwendet werden, um das Bildschirmfoto vor dem Abspeichern noch zu verkleinern (z.B. <code>-geometry 800x600</code>).</p>
<h3>Eine Alternative: scrot</h3>
<p>Scrot ist ebenfalls ein Kommandozeilen-Programm zum Erstellen von Bildschirmfotos. Eine besonders nützliche Funktion: Im Dateinamen können Platzhalter beispielsweise für das Datum/die Zeit, Bildmaße, o.Ä. verwendet werden, was bei der Erstellung von vielen Bildern, oder als Funktion einer Tastenkombination (Druck-Taste) sehr nützlich sein kann.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Bildschirmfoto vom ganzen Bildschirm erstellen, und unter Foto.png abspeichern.</span>
scrot Foto.png
<span style="color: #666666; font-style: italic;"># Bildschirmfoto eines Fensters erstellen (Fenster mit der Maus auswählen)</span>
scrot <span style="color: #660033;">-s</span> Foto.png
<span style="color: #666666; font-style: italic;"># Mit Fensterrahmen (funktioniert unter Compiz nicht)</span>
scrot <span style="color: #660033;">-s</span> <span style="color: #660033;">-b</span> Foto.png
<span style="color: #666666; font-style: italic;"># Bestimmte Anzahl an Sekunden warten, bevor das Bild erstellt wird</span>
scrot <span style="color: #660033;">-d</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Sekunden<span style="color: #000000; font-weight: bold;">&gt;</span> Foto.png
<span style="color: #666666; font-style: italic;"># Dabei in der Kommandozeile die Sekunden runterzählen</span>
scrot <span style="color: #660033;">-d</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Sekunden<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #660033;">-c</span> Foto.png
<span style="color: #666666; font-style: italic;"># Befehl auf die Datei anwenden</span>
scrot <span style="color: #660033;">-e</span> <span style="color: #ff0000;">'mv $f ~/Meine\ Bildschirmfotos/'</span></pre></div></div>

<p>Scrot erkennt einige Platzhalter im Dateinamen bzw. im mittels<code> -e</code> mitgegebenem Befehl und ersetzt diese:</p>
<table>
<thead>
<tr>
<th>Platzhalter</th>
<th>Ersetzung</th>
</tr>
</thead>
<tbody>
<tr>
<td>$f</td>
<td>Dateiname/Pfad des Bildschirmfotos</td>
</tr>
<tr>
<td>$n</td>
<td>Dateiname (ohne Pfad)</td>
</tr>
<tr>
<td>$s</td>
<td>Dateigröße</td>
</tr>
<tr>
<td>\n</td>
<td>Zeilenumbruch</td>
</tr>
<tr>
<td>$p</td>
<td>Anzahl der Pixel</td>
</tr>
<tr>
<td>$w</td>
<td>Breite des Bildes</td>
</tr>
<tr>
<td>$h</td>
<td>Höhe des Bildes</td>
</tr>
<tr>
<td>$t</td>
<td>Bildformat</td>
</tr>
<tr>
<td>$$</td>
<td>$-Zeichen</td>
</tr>
<tr>
<td>%Y</td>
<td>Jahr</td>
</tr>
<tr>
<td>%m</td>
<td>Monat</td>
</tr>
<tr>
<td>%d</td>
<td>Tag</td>
</tr>
<tr>
<td colspan ="2">Weitere das Datum/die Zeit betreffende Platzhalter siehe Hilfeseite zu strftime (<code>man 2 strftime</code>)</td>
</tr>
</tbody>
</table>
<h3>Konsole mit Framebuffer: fbgrab</h3>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/Bildschirmfoto.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/09/Bildschirmfoto-150x150.png" alt="Bildschirmfoto" title="Bildschirmfoto" width="150" height="150" class="alignright size-thumbnail wp-image-2076" /></a>(Mit Konsole sind hier die Konsolen gemeint, die per Alt+F1-6 erreichbar sind, nicht Konsolen die man in der grafischen Oberfläche öffnet.)</p>
<p>Wenn man den Framebuffer verwendet, kann man mit <code>fbgrab</code> ein Bildschirmfoto auf der Konsole machen.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">fbgrab <span style="color: #000000; font-weight: bold;">&lt;</span>Dateiname.png<span style="color: #000000; font-weight: bold;">&gt;</span></pre></div></div>

<p>Es ist sogar möglich <code>fbgrab</code> eine bestimmte Anzahl Sekunden warten zu lassen, bevor es das Bildschirmfoto erstellt.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">fbgrab <span style="color: #660033;">-s</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Sekunden<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Dateiname.png<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight: bold;">&amp;</span></pre></div></div>

<h3>Konsole ohne Framebuffer</h3>
<p>In /dev/vcs (oder /dev/vcs0) ist der Inhalt der aktuellen Konsole gespeichert (die Konsole die über Alt+F1-6 erreichbar ist, nicht die Konsolen die man bekommt wenn man in der grafischen Oberfläche eine Konsole öffnet).</p>
<p>Der Inhalt dieser Konsole lässt sich mit <code>cat</code> auslesen, eventuell sind root-Rechte erforderlich. Mit dieser Methode lässt sich jedoch kein echtes Bildschirmfoto erstellen, schließlich bekommt man die Konsoleninhalte als Text, nicht als Bild.</p>

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

<p>Hier sind allerdings keine Zeilenumbrüche enthalten, die kann man aber mit <code>fold</code> hinzufügen. Dazu muss man allerdings wissen, wie breit die Konsole ist, das findet man mit folgendem Befehl (in der auszulesenden Konsole) heraus:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">echo</span> <span style="color: #007800;">$COLUMNS</span></pre></div></div>

<p>So liest man dann den Konsoleninhalt mit Zeilenumbrüchen aus:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">fold <span style="color: #660033;">-w</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Ergebnis von <span style="color: #7a0874; font-weight: bold;">echo</span> <span style="color: #007800;">$COLUMNS</span> auf der auszulesenden Konsole<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight: bold;">/</span>dev<span style="color: #000000; font-weight: bold;">/</span>vcs
<span style="color: #666666; font-style: italic;"># also z.B.</span>
fold <span style="color: #660033;">-w</span> <span style="color: #000000;">81</span> <span style="color: #000000; font-weight: bold;">/</span>dev<span style="color: #000000; font-weight: bold;">/</span>vcs</pre></div></div>

<h3>Die Notlösung: xwd</h3>
<p>Wenn man keine Zeit hat ein Programm zu installieren, und keines der obigen installiert ist, kann man xwd ausprobieren. Dieses Kommandozeilen-Werkzeug wird direkt mit dem X-Server mitgeliefert, und sollte daher auf fast allen Systemen installiert sein. Das Programm hat allerdings Probleme mit Compiz/Emerald, wenn man Emerald als Fensterverwalter verwendet, wird anstelle der Festerrahmen das was darunter liegt aufgenommen.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Fenster mit der Maus auswählen</span>
xwd <span style="color: #660033;">-out</span> Dateiname.xwd
<span style="color: #666666; font-style: italic;"># Ganzen Bildschirm fotografieren</span>
xwd <span style="color: #660033;">-root</span> <span style="color: #660033;">-out</span> Dateiname.xwd</pre></div></div>

<h3>Bildschirmfoto einer Webseite</h3>
<p>Das Programm <code>gnome-web-photo</code> kann Bildschirmfotos von kompletten Webseiten erstellen, auch die Erstellung von kleinen Vorschaubildern ist möglich.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666; font-style: italic;"># Komplette Seite</span>
gnome-web-photo URL Dateiname
<span style="color: #666666; font-style: italic;"># Vorschaubilder</span>
gnome-web-photo <span style="color: #660033;">-m</span> thumbnail <span style="color: #660033;">-s</span> <span style="color: #000000;">256</span> URL Dateiname</pre></div></div>

<p>Alternativ kann man auch die <a href="http://www.antusblog.de/2009/05/15/8-firefox-erweiterungen-fur-webentwickler/">Firefox-Erweiterung Screengrab</a> verwenden.</p>
<h2>Tastenbelegung</h2>
<h3>Gnome</h3>
<p>Unter System -&gt; Einstellungen -&gt; Tastenkombinationen können einzelnen Befehlen Tastenkombinationen zugewiesen werden. Meistens ist unter Gnome aber schon eine Tastenkombination für Bildschirmfotos vorkonfiguriert (Druck-Taste).</p>
<h3>KDE</h3>
<p>In den KDE-Einstellungen, lassen sich unter Input Actions globale Tastenkombinationen einstellen. Hier fügt man einfach einen neuen Eintrag (per Rechtsklick -> Neu -> Befehl/URL) hinzu, weist diesem eine Tastenkombination zu und schreibt den Befehl zur Erstellung eines Bildschirmfotos in das Eingabefeld <strong>Command/URL</strong> (beispielsweise: <code>scrot ~/Bildschirmfoto-%d.%m.%Y-%H-%M-%S.png</code><br />
<a href="http://www.antusblog.de/wp-content/uploads/2009/10/KDE-Tastenkombination.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/10/KDE-Tastenkombination.png" alt="KDE-Tastenkombination" title="KDE-Tastenkombination" width="550" height="441" class="aligncenter size-full wp-image-2093" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/10/08/bildschirmfotos-unter-linux/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Glänzende Schaltfläche mit GIMP</title>
		<link>http://www.antusblog.de/2009/09/29/glanzende-schaltflache-mit-gimp/</link>
		<comments>http://www.antusblog.de/2009/09/29/glanzende-schaltflache-mit-gimp/#comments</comments>
		<pubDate>Mon, 28 Sep 2009 23:05:41 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Bildbearbeitung]]></category>
		<category><![CDATA[GIMP]]></category>
		<category><![CDATA[Glänzend]]></category>
		<category><![CDATA[Glas]]></category>
		<category><![CDATA[Schaltfläche]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=2018</guid>
		<description><![CDATA[Mit GIMP lassen sich auf einfache Weise glänzende Schaltflächen in allen möglichen Farben und Formen erstellen. Schaltflächen in diesem Stil sind schon seit einiger Zeit sehr populär.
In dieser Anleitung beschreibe ich, wie man solche Schaltflächen erstellt. Dabei stelle ich zwei Methoden vor, eine für abgerundete Schaltflächen, und eine für eckige.

Eckige Schaltfläche erstellen
Die Erstellung einer eckigen [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-2019" title="Glas-Schaltflächen" src="http://www.antusblog.de/wp-content/uploads/2009/09/Glas.Schaltflächen.png" alt="Glas-Schaltflächen" width="500" height="250" />Mit GIMP lassen sich auf einfache Weise glänzende Schaltflächen in allen möglichen Farben und Formen erstellen. Schaltflächen in diesem Stil sind schon seit einiger Zeit sehr populär.</p>
<p>In dieser Anleitung beschreibe ich, wie man solche Schaltflächen erstellt. Dabei stelle ich zwei Methoden vor, eine für abgerundete Schaltflächen, und eine für eckige.</p>
<p><span id="more-2018"></span></p>
<h2>Eckige Schaltfläche erstellen</h2>
<p>Die Erstellung einer eckigen Schaltfläche besteht im Wesentlichen aus 4 Arbeitsschritten.</p>
<h3>Schritt 1: Rahmen erstellen</h3>
<p>Man beginnt damit, eine neue Ebene <em>Rahmen</em> zu erstellen. In dieser neuen Ebene wird mit dem Auswahlwerkzeug eine neue Auswahl mit den Abmessungen der Schaltfläche erstellt. Diese wird anschließend mittels dem Füll-Werkzeug in der gewünschten Farbe des Rahmens eingefärbt.</p>
<p><strong>Wichtig</strong>: Die Auswahl noch nicht wegklicken!</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S1_Rahmen_erstellen.png"><img class="aligncenter size-full wp-image-2023" title="Schritt 1: Rahmen erstellen" src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S1_Rahmen_erstellen.png" alt="Schritt 1: Rahmen erstellen" width="500" height="250" /></a></p>
<h3>Schritt 2: Hintergrund der Schaltfläche</h3>
<p>Für den Hintergrund der Schaltfläche kann man ebenfalls eine neue Ebene <em>Schaltflächen-Hintergrund</em> erstellen, das macht es einfacher ihn im Nachhinein noch zu verändern, falls man mit dem Endergebnis nicht ganz zufrieden ist. Nun geht man im Menü auf <strong>Auswahl</strong> -&gt; <strong>Verkleinern</strong>, und verkleinert die Auswahl um 1 Pixel. Jetzt wird die Auswahl mit dem Hintergrund der Schaltfläche gefüllt,. Ob dabei ein Farbverlauf oder eine einzige Farbe genommen wird ist Geschmackssache. Im Beispiel verwende ich einen kreisförmigen Farbverlauf.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S2_Hintergrund_erstellen.png"><img class="aligncenter size-full wp-image-2026" title="Schritt 2: Hintergrund erstellen" src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S2_Hintergrund_erstellen.png" alt="Schritt 2: Hintergrund erstellen" width="500" height="250" /></a></p>
<h3>Schritt 3: Hervorgehobener Rand</h3>
<p>Jetzt erstellt man wieder eine neue Ebene <em>Hervorgehobener Rand</em>, deren Ebenenmodus auf <strong>Überlagern</strong> gestellt wird. Mit <strong>Auswahl</strong> -&gt; <strong>Rand</strong> wird nun ein 1 Pixel breiter Streifen um den Rahmen herum erstellt.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S3_Rand_erstellen.png"><img class="aligncenter size-full wp-image-2029" title="Auswahl -&gt; Rand ..." src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S3_Rand_erstellen.png" alt="Auswahl -&gt; Rand ..." width="275" height="132" /></a></p>
<p>Dann wird mit dem Farbverlaufswerkzeug ein linearer Farbverlauf von weiß nach transparent von oben nach unten aufgezogen. (Als Vordergrundfarbe weiß, VG nach Transparent als Farbverlauf).</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S3_1_Farbverlauf1.png"><img class="aligncenter size-full wp-image-2036" title="Farbverlauf" src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S3_1_Farbverlauf1.png" alt="Farbverlauf" width="500" height="200" /></a>Anschließend wechselt man die Form des Farbverlaufs auf Kreisförmig, und zieht unten mittig noch einen Farbverlauf auf. Das sieht dann ungefähr so aus:</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S3_2_Ergebnis.png"><img class="aligncenter size-full wp-image-2037" title="Ergebnis" src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S3_2_Ergebnis.png" alt="Ergebnis" width="481" height="134" /></a></p>
<h3>Schritt 4: Glas-Effekt</h3>
<p>Jetzt wird wieder eine neue Ebene <em>Glas-Effekt</em> erstellt, diese bekommt ebenfalls den Ebenenmodus <strong>Überlagern</strong> zugewiesen, die Deckkraft wird auf 30-70%  (je nach dem wie stark der Effekt sein soll) eingestellt. Dann erstellt man eine neue Auswahl über die ober Hälfte der Schaltfläche, und füllt diese mit weißer Farbe (#FFFFFF).</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S4_Auswahl.png"><img class="aligncenter size-full wp-image-2040" title="Auswahl" src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_S4_Auswahl.png" alt="Auswahl" width="419" height="103" /></a></p>
<p>Das Endergebnis sieht so aus:</p>
<p style="text-align: center;"><a href="http://www.antusblog.de/wp-content/uploads/2009/09/RS_Endergebnis.png"><img class="aligncenter size-full wp-image-2041" title="Endergebnis" src="http://www.antusblog.de/wp-content/uploads/2009/09/RS_Endergebnis.png" alt="RS_Endergebnis" width="500" height="250" /></a></p>
<h2>Abgerundete Schaltfläche erstellen</h2>
<p>Die abgerundete Glas-Schaltfläche wird ähnlich erstellt wie die Rechteckige.</p>
<h3>Schritt 1: Rahmen erstellen</h3>
<p>Man beginnt wieder mit dem Rahmen, dazu wird zuerst eine neue Ebene <em>Rahmen</em> erstellt, in der eine Auswahl mit den Abmessungen der Schaltfläche aufgezogen wird. Zum Abrunden wird im Auswahl-Werkzeug die Option <strong>Abgerundete Ecken</strong> aktiviert, der Radius gibt dabei an wie stark die Schaltfläche abgerundet wird. Bei <strong>Kanten glätten</strong> sollte ebenfalls ein Häkchen sein, dadurch sieht der Rahmen später sauberer aus.</p>
<p><strong>Wichtig</strong>: Die Auswahl wird auch bei den nächsten Schritten noch benötigt, also nicht weg klicken!</p>
<p><strong>Andere Möglichkeit</strong>: Man kann auch das Elliptische Auswahl-Werkzeug verwenden, wenn man möchte das die Schaltfläche eine solche Form hat.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S1_Rahmen_erstellen.png"><img class="aligncenter size-full wp-image-2042" title="Rahmen erstellen" src="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S1_Rahmen_erstellen.png" alt="Rahmen erstellen" width="486" height="183" /></a></p>
<p>Die Auswahl füllt man nun mit der gewünschten Rahmenfarbe.</p>
<h3>Schritt 2: Hintergrund erstellen</h3>
<p>Anschließend wird eine neue Ebene <em>Hintergrund</em> erstellt, und die Auswahl per <strong>Auswahl</strong> -&gt; <strong>Verkleinern</strong> um 1 Pixel verkleinert. Die Auswahl wird dann mit dem Farbverlauf-Werkzeug ausgefüllt.</p>
<h3><a href="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S2_Farbverlauf.png"><img class="aligncenter size-full wp-image-2045" title="Farbverlauf" src="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S2_Farbverlauf.png" alt="Farbverlauf" width="277" height="95" /></a></h3>
<h3>Schritt 3: Rand hervorheben</h3>
<p>Danach wird eine neue Ebene <em>Rand-Hervorhebung</em> erstellt. Die Auswahl wird mit dem Fülleimer weiß ausgefüllt, anschließend wird die Auswahl mittels <strong>Auswahl</strong> -&gt; <strong>Verkleinern</strong> um 1 Pixel verkleinert, und deren Inhalt gelöscht (<strong>ENTF</strong> drücken). Es bleibt nur ein weißer Rand übrig.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S3_Fuellung.png"><img class="aligncenter size-full wp-image-2046" title="Füllung" src="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S3_Fuellung.png" alt="Füllung" width="350" height="185" /></a></p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S3_Rand.png"><img class="aligncenter size-full wp-image-2047" title="Rand" src="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S3_Rand.png" alt="Rand" width="350" height="185" /></a></p>
<p>Danach wird noch der Ebenenmodus auf <strong>Überlagern</strong> gesetzt, und die Deckkraft auf <strong>70%</strong> eingestellt.</p>
<h3>Schritt 4: Glas-Effekt</h3>
<p>Man erstellt eine neue Ebene <em>Glas-Effekt</em> und stellt den Ebenenmodus ebenfalls auf <strong>Überlagern</strong>, und die Deckkraft auf 30-80% (je nach Stärke des Effekts). Nun klickt man mit der rechten Maustaste auf die <em>Hintergrund</em>-Ebene (der Schaltfläche) und wählt <strong>Auswahl aus Alphakanal</strong>. Anschließend wählt man wieder die <em>Glas-Effekt</em> Ebene aus.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S4_Auswahl.png"><img class="aligncenter size-full wp-image-2050" title="Auswahl" src="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S4_Auswahl.png" alt="Auswahl" width="409" height="93" /></a></p>
<p>Jetzt wird das Auswahl-Werkzeug verwendet um die Auswahl auf die obere Hälfte der Schaltfläche zu begrenzen. Dazu wird zuerst das Häkchen bei <strong>Abgerundete Ecken</strong> wieder entfernt. Dann wird bei gedrückter <strong>STRG</strong>-Taste eine Auswahl vom unteren Teil der Schaltfläche aufgezogen (mit gedrückter <strong>STRG</strong>-Taste werden Teile einer Auswahl subtrahiert, also entfernt.)</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S4_Auswahl_sub.png"><img class="aligncenter size-full wp-image-2051" title="Neue Auswahl" src="http://www.antusblog.de/wp-content/uploads/2009/09/AS_S4_Auswahl_sub.png" alt="Neue Auswahl" width="422" height="105" /></a></p>
<p>Diese Auswahl wird dann mit weißer Farbe gefüllt. Das Endergebnis sieht so aus:</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/Abgerundete.Schaltfläche.png"><img class="aligncenter size-full wp-image-2052" title="Abgerundete Schaltfläche" src="http://www.antusblog.de/wp-content/uploads/2009/09/Abgerundete.Schaltfläche.png" alt="Abgerundete Schaltfläche" width="500" height="250" /></a></p>
<p>Zum Schluss noch beide Varianten als .xcf:</p>
<p style="padding-left: 30px;"><a href="/demos/10-glass-text/Rechteckige.Schaltfläche.xcf">Rechteckige Schaltfläche</a><br />
<a href="/demos/10-glass-text/Abgerundete.Schaltfläche.xcf">Abgerundete Schaltfläche</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/09/29/glanzende-schaltflache-mit-gimp/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Farbauswahl-Dialog mit ColorPicker</title>
		<link>http://www.antusblog.de/2009/09/27/farbauswahl-dialog-mit-colorpicker/</link>
		<comments>http://www.antusblog.de/2009/09/27/farbauswahl-dialog-mit-colorpicker/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 16:59:33 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Java Script]]></category>
		<category><![CDATA[ColorPicker]]></category>
		<category><![CDATA[Dialog]]></category>
		<category><![CDATA[Farbauswahl]]></category>
		<category><![CDATA[Farben]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=1993</guid>
		<description><![CDATA[ColorPicker ist eine jQuery-Klasse, mit der ein Farbauswahl-Dialog erstellt werden kann, der dem Benutzer die Eingabe/Auswahl von Farben erleichtert. Der Dialog ist ähnlich aufgebaut wie der vieler Bildbearbeitungsprogramme, und hat einen ähnlichen Funktionsumfang.  Die Klasse steht unter der MIT- und der GPL-Lizenz.
Colorpicker in Aktion (Demo)
Webseite vom Colorpicker-Skript

Benutzung
Zuerst werden jQuery und die colorpicker.js eingebunden.

&#60;script src=&#34;js/jquery.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
&#60;script [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/jQuery.Color.Picker.png"><img class="aligncenter size-full wp-image-1994" title="jQuery ColorPicker" src="http://www.antusblog.de/wp-content/uploads/2009/09/jQuery.Color.Picker.png" alt="jQuery ColorPicker" width="500" height="200" /></a>ColorPicker ist eine jQuery-Klasse, mit der ein Farbauswahl-Dialog erstellt werden kann, der dem Benutzer die Eingabe/Auswahl von Farben erleichtert. Der Dialog ist ähnlich aufgebaut wie der vieler Bildbearbeitungsprogramme, und hat einen ähnlichen Funktionsumfang.  Die Klasse steht unter der MIT- und der GPL-Lizenz.</p>
<p style="padding-left: 30px;"><a href="/demos/9-farbauswahl-dialog-mit-colorpicker/colorpicker.xhtml">Colorpicker in Aktion (Demo)</a><br />
<a href="http://www.eyecon.ro/colorpicker/">Webseite vom Colorpicker-Skript</a></p>
<p><span id="more-1993"></span></p>
<h2>Benutzung</h2>
<p>Zuerst werden <code>jQuery</code> und die <code>colorpicker.js</code> eingebunden.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;js/jquery.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;js/colorpicker.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>Anschließend können HTML-Elemente mit dem Aufruf der ColorPicker-Funktion erweitert werden. Die Funktion akzeptiert einige Parameter, die aber alle optional sind. Ruft man die Funktion ohne Parameter auf, öffnet sich der Dialog beim Anklicken des Elements.</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;">'#element'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ColorPicker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Möchte man eine Farbauswahl direkt auf der Seite anzeigen, verwendet man die <code>flat</code>-Option.</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;">'#farbauswahl'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ColorPicker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    flat<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
    color <span style="color: #339933;">:</span> <span style="color: #3366CC;">'#123456'</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>Mit der <code>color</code>-Option lässt sich außerdem eine Farbe vorgeben.</p>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/Input.und.Color.Picker.png"><img class="aligncenter size-full wp-image-2010" title="Input.und.Color.Picker" src="http://www.antusblog.de/wp-content/uploads/2009/09/Input.und.Color.Picker.png" alt="Input.und.Color.Picker" width="370" height="220" /></a></p>
<p>Meistens möchte man die ausgewählte Farbe aber auch noch irgendwie weiterverarbeiten, beispielsweise in ein Formularfeld eintragen. Dazu eignen sich die Optionen <code>onSubmit</code> und <code>onChange</code>, die beim Abspeichern der Farbe (onSubmit) bzw. beim Verändern der Farbe (onChange) aufgerufen werden.</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;">'input'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ColorPicker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    onSubmit <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>hsb<span style="color: #339933;">,</span> hex<span style="color: #339933;">,</span> rgb<span style="color: #339933;">,</span> element<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// hsb = HSB-Farbraum als Objekt ({ 'h' : 100, 'b' : 200, 's' : 300})</span>
        <span style="color: #006600; font-style: italic;">// hex = Hexadezimale Schreibweise (#123456)</span>
        <span style="color: #006600; font-style: italic;">// rgb = RGB-Farbraum als Objekt ({ 'r' : 123, 'g' : 123, 'b' : 123})</span>
        <span style="color: #006600; font-style: italic;">// element = Das Element, an welches der ColorPicker angehangen wurde.</span>
        $<span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> hex<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></pre></div></div>

<p>Das sind die wichtigsten Optionen. Eine ausführlichere Beschreibung aller Optionen findet sich auf der Webseite von ColorPicker.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/09/27/farbauswahl-dialog-mit-colorpicker/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Konfiguration auf Verzeichnisebene mittels .htaccess</title>
		<link>http://www.antusblog.de/2009/09/10/konfiguration-auf-verzeichnisebene-mittels-htaccess/</link>
		<comments>http://www.antusblog.de/2009/09/10/konfiguration-auf-verzeichnisebene-mittels-htaccess/#comments</comments>
		<pubDate>Thu, 10 Sep 2009 21:44:30 +0000</pubDate>
		<dc:creator>Antu</dc:creator>
				<category><![CDATA[Allgemeines]]></category>
		<category><![CDATA[.htaccess]]></category>
		<category><![CDATA[Apache]]></category>
		<category><![CDATA[Fehlerseite]]></category>
		<category><![CDATA[httpd.conf]]></category>
		<category><![CDATA[Kennwort-Schutz]]></category>
		<category><![CDATA[mod_rewrite]]></category>
		<category><![CDATA[Weiterleitung]]></category>

		<guid isPermaLink="false">http://www.antusblog.de/?p=1953</guid>
		<description><![CDATA[Der Apache-Webserver wird normalerweise über die httpd.conf konfiguriert. Wenn man sich den Server noch mit anderen Kunden teilt, wie es bei günstigen Hosting-Angeboten eigentlich immer der Fall ist, hat man normalerweise keinen Zugriff auf diese Datei. Eine aussichtslose Situation? Nein, denn hier kommen .htaccess-Dateien ins Spiel. Mit einer .htaccess-Datei lassen sich einige Apache-Einstellungen für das [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/titel.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/09/titel.png" alt="Authentifizierung mit .htaccess" title="Authentifizierung mit .htaccess" width="500" height="200" class="aligncenter size-full wp-image-1986" /></a>Der Apache-Webserver wird normalerweise über die <code>httpd.conf</code> konfiguriert. Wenn man sich den Server noch mit anderen Kunden teilt, wie es bei günstigen Hosting-Angeboten eigentlich immer der Fall ist, hat man normalerweise keinen Zugriff auf diese Datei. Eine aussichtslose Situation? Nein, denn hier kommen <code>.htaccess</code>-Dateien ins Spiel. Mit einer <code>.htaccess</code>-Datei lassen sich einige Apache-Einstellungen für das Verzeichnis (und dessen Unterverzeichnisse) in der sie liegt überschreiben. Welche Einstellungen getätigt werden können, ist von Anbieter zu Anbieter verschieden.</p>
<p>Meistens ist es möglich für Verzeichnisse/Dateien einen <strong>Kennwort-Schutz</strong> zu versehen, <strong>individuelle Fehler-Seiten</strong> zu definieren oder die <strong>Besucher</strong> u.U. <strong>weiterzuleiten</strong>. Viele Anbieter ermöglichen es auch, über <code>.htaccess</code>-Dateien zwischen verschiedenen <strong>PHP-Versionen</strong> hin- und her zu <strong>wechseln</strong>.</p>
<p><span id="more-1953"></span></p>
<h2>Wie funktionieren .htaccess-Dateien?</h2>
<p>Für die Apache-Konfiguration gibt es eine Direktive namens <code>AllowOverride</code>, mit der festgelegt werden kann, ob es möglich ist bestimmte Einstellungen mittels <code>.htaccess</code>-Dateien zu überschreiben, und wenn ja, welche Einstellungen überschrieben werden können. Diese Direktive wird im Verzeichnis-Kontext (&lt;Directory&gt; &#8230; &lt;/Directory&gt;) verwendet, man kann <code>.htaccess</code>-Dateien also für bestimmte Verzeichnisse erlauben, oder verbieten.</p>
<p>Ist die Benutzung von <code>.htaccess</code>-Dateien erlaubt, sucht der Apache bei jedem Seitenaufruf nach einer solchen Datei. Dabei werden auch übergeordnete Verzeichnisse durchsucht.</p>
<p>Ein Beispiel: Der Benutzer ruft die Seite <code>www.meineseite.example/anleitungen/programmierung/php/klassen.php</code> auf. Apache sucht dann nach folgenden <code>.htaccess</code>-Dateien:</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">/var/www/htdocs/.htaccess
/var/www/htdocs/anleitungen/.htaccess
/var/www/htdocs/anleitungen/programmierung/.htaccess
/var/www/htdocs/anleitungen/programmierung/php/.htaccess</pre></div></div>

<p>Dabei überschreiben Einstellungen in der untersten <code>.htacess</code>-Datei die der Dateien in den übergeordneten Verzeichnissen. Man muss dabei beachten, dass der Apache bei jedem Aufruf nach <code>.htaccess</code>-Dateien sucht, wenn deren Benutzung mittels <code>AllowOverride</code> erlaubt ist. Im Falle des Beispiels wären das 4 zusätzliche Datei-Aufrufe pro Seitenaufruf, wodurch das Ausliefern der Seite länger dauert, bzw. der Server mehr belastet wird. Wenn also die Möglichkeit besteht die Einstellungen direkt in die <code>httpd.conf</code> einzutragen, sollte man das tun, und <code>AllowOverride</code> abschalten.</p>
<h3>Wie werden Einstellungen in die .htaccess eingetragen?</h3>
<p>Wenn man für ein bestimmtes Verzeichnis eine Einstellung verändern möchte, tut man das normalerweise wie folgt:</p>
<p><strong>httpf.conf</strong></p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;">&lt;<span style="color: #000000; font-weight:bold;">Directory</span> /forum/&gt;
    <span style="color: #00007f;">DirectoryIndex</span> forumindex.php
&lt;/<span style="color: #000000; font-weight:bold;">Directory</span>&gt;</pre></div></div>

<p>In einer <code>.htaccess</code>-Datei kann man sich die &lt;Directory&gt;-Zeilen sparen, die Einstellungen gelten immer für das Verzeichnis in dem die <code>.htaccess</code> liegt, sowie für darunterliegende Verzeichnisse (Unterverzeichnisse).</p>
<p><strong>/forum/.htaccess:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #00007f;">DirectoryIndex</span> forumindex.php</pre></div></div>

<h2>Kennwort-Schutz</h2>
<p>Mit ein paar Einträgen in der .htaccess/Apache-Konfiguration lässt sich ein Kennwort-Schutz für bestimmte Verzeichnisse einstellen. Es gibt mehrere Möglichkeiten, einen Kennwort-Schutz zu realisieren. Es muss festgelegt werden, wo der Apache die Zugangsdaten findet (z.B. in einer Datei), wer sich anmelden darf, und wie die Anmeldung vonstatten geht.</p>
<h3>Ein Beispiel</h3>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #00007f;">AuthType</span> Basic
<span style="color: #00007f;">AuthName</span> <span style="color: #7f007f;">&quot;Dieser Bereich der Webseite ist Kennwort-geschuetzt.&quot;</span>
AuthBasicProvider file
<span style="color: #00007f;">AuthUserFile</span> /var/www/kennwoerter/geschuetzter_bereich
<span style="color: #00007f;">Require</span> valid-<span style="color: #00007f;">user</span></pre></div></div>

<p>
Der <strong>AuthType</strong> gibt an, wie die Anmeldung abgewickelt wird. Dabei gibt es zwei Möglichkeiten: Basic und Digest. Bei der <strong>Basic</strong>-Authentifizierung wird das Kennwort allerdings unverschlüsselt (außer man verwendet SSL) vom Browser zum Server übertragen. Das <strong>Digest</strong>-Verfahren ist sicherer, dabei werden Kennwort und Benutzername verschlüsselt übertragen. Der Nachteil des Digest-Verfahrens ist, das es von einigen sehr alten Browsern nicht unterstützt wird.</p>
<p><strong>AuthName</strong> ist der Name des geschützten Bereichs. Der Benutzer gibt das Kennwort ein, und darf danach alle Dateien/Verzeichnisse sehen, die in einem geschützten Bereich mit diesem Namen liegen. Die Zugangsdaten müssen nur einmal eingegeben werden, der Browser merkt sich die Zugangsdaten für jeden Namen. Außerdem wird dieser Name normalerweise vom Browser bei der Abfrage der Zugangsdaten angezeigt.</p>
<p><strong>AuthBasicProvider</strong> gibt an, woher die Zugangsdaten kommen, in diesem Fall aus einer Datei (file). Es ist beispielsweise auch möglich die Zugangsdaten aus einer Datenbank auszulesen.</p>
<p><strong>AuthUserFile</strong> ist der Pfad zu der Datei, in welcher die Kennwörter stehen.</p>
<p><strong>Require</strong> legt die Bedingungen für das Anmelden fest, in diesem Fall: Nur Benutzer die in der Zugangsdaten-Datei stehen, dürfen sich anmelden. Es ist auch möglich hier bestimmte Benutzernamen/gruppen anzugeben, oder vorauszusetzen, das der Benutzer eine bestimmte IP-Adresse/Bereich hat (oder Bereiche auszuschließen).</p>
<p>Damit dieses Beispiel funktioniert, muss die Zugangsdaten-Datei allerdings erst angelegt werden.</p>
<h3>Zugangsdaten-Datei anlegen</h3>
<p>Diese Datei legt man am besten in einem Verzeichnis ab, das außerhalb des Dokumenten-Verzeichnisses (htdocs) des Webservers liegt, so das Besucher der Webseite keine Möglichkeit haben, darauf zuzugreifen. Zum anlegen der Datei kann man das Programm htpasswd verwenden, das normalerweise mit dem Apache mitinstalliert wird. Wenn man kein Linux-System hat, und nicht direkt (Kommandozeile) auf den Server zugreifen kann, wie es bei Webspace-Angeboten der Fall ist, kann man auch einen der vielen htpasswd-Generatoren verwenden.</p>
<h4>htpasswd-Generator (Online)</h4>
<p>Einen htpasswd-Generator gibt es beispielsweise auf <a href="http://www.htaccesstools.com/htpasswd-generator/">htaccesstools.org</a>. Dort trägt man einfach den gewünschten Benutzernamen und das Kennwort ein, und klickt auf <strong>Create .htpasswd file</strong>. Man erhält eine Zeile, die ungefähr so aussieht:</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">benutzername:$apr1$VzN.1...$l/wL1UTXqvxjfU6av4zcw1</pre></div></div>

<p>Diese trägt man nun in die Datei an die per <em>AuthUserFile</em> angegeben ist. Hat man mehrere Benutzer, sollte man darauf achten, das für jede Benutzer/Kennwort-Kombination eine neue Zeile verwendet wird. </p>
<h4>htpasswd</h4>
<p>Mit dem htpasswd-Werkzeug ist es etwas einfacher.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">htpasswd <span style="color: #660033;">-c</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Pfad<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Benutzername<span style="color: #000000; font-weight: bold;">&gt;</span></pre></div></div>

<p>Obiges Kommando erstellt eine neue Zugangsdaten-Datei und speichert sie unter &lt;Pfad&gt; ab. Gleichzeitig wird der erste Benutzer namens &lt;Benutzername&gt; erstellt.<br />
<a href="http://www.antusblog.de/wp-content/uploads/2009/09/Neue.Kennwortdatei.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/09/Neue.Kennwortdatei.png" alt="Neue Kennwortdatei" title="Neue Kennwortdatei" width="500" height="60" class="aligncenter size-full wp-image-1971" /></a><br />
Mittels htpasswd können auch problemlos weitere Benutzer hinzugefügt werden.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">htpasswd <span style="color: #000000; font-weight: bold;">&lt;</span>Pfad zur Datei<span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #000000; font-weight: bold;">&lt;</span>Benutzername<span style="color: #000000; font-weight: bold;">&gt;</span></pre></div></div>

<p>(ohne <code>-c</code>)</p>
<h3>Die Kennwort-Abfrage</h3>
<p>Wenn alles geklappt hat, sollte sich solch ein Fenster beim Aufrufen einer Datei innerhalb des geschützten Verzeichnisses öffnen.<br />
<a href="http://www.antusblog.de/wp-content/uploads/2009/09/Abfrage.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/09/Abfrage.png" alt="Authentifizierung erforderlich" title="Authentifizierung erforderlich" width="500" height="300" class="aligncenter size-full wp-image-1974" /></a><br />
Das ist wirklich nur eine sehr simple Kennwort-Abfrage, der Apache kann noch mehr. Man kann das (sicherere) Digest-Verfahren verwenden, die Zugangsdaten aus einer Datenbank auslesen, etc. Aber das würde den Rahmen dieses Artikels sprengen, daher verweise ich auf die gute (aber englische) <a href="http://httpd.apache.org/docs/2.3/howto/auth.html">Apache-Dokumentation</a>.</p>
<h2>Individuelle Fehler-Seiten</h2>
<p><a href="http://www.antusblog.de/wp-content/uploads/2009/09/404.Nicht.gefunden.png"><img src="http://www.antusblog.de/wp-content/uploads/2009/09/404.Nicht.gefunden.png" alt="404 - Nicht gefunden" title="404 - Nicht gefunden" width="500" height="200" class="aligncenter size-full wp-image-1977" /></a>Wenn ein Fehler auftritt, beispielsweise die angeforderte Seite nicht gefunden wurde (404), gibt der Apache normalerweise eine weiße Seite mit dem Fehlercode und einem kurzen Text aus. Mit der ErrorDocument-Direktive kann man dafür sorgen, dass der Besucher in diesem Fall beispielsweise auf die Startseite weitergeleitet wird, oder man kann eine selbst gestaltete Fehlerseite anzeigen lassen.</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #00007f;">ErrorDocument</span> &lt;Code&gt; &lt;Fehlermeldung oder URL&gt;</pre></div></div>

<p>Die Syntax der ErrorDocument-Direktive ist simpel: Der Code gibt an, für welchen <a href="http://de.wikipedia.org/wiki/HTTP-Statuscode">HTTP-Statuscode</a> die Direktive gilt, und darauf folgt entweder eine benutzerdefinierte Fehlermeldung, oder die URL des Dokuments, welches bei einem Fehler ausgegeben wird. Auch externe URLs können angegeben werden, wenn man den Besucher auf eine andere Webseite weiterleiten möchte.</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">404</span> /fehlermeldungen/404.html
<span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">410</span> <span style="color: #7f007f;">&quot;Wer zu spät kommt...&quot;</span>
<span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">404</span> http://www.google.de</pre></div></div>

<p>Mehr Informationen zu dieser Direktive finden sich in der <a href="http://httpd.apache.org/docs/2.2/mod/core.html#errordocument">Apache-Dokumentation</a>.</p>
<h2>Anfragen umleiten</h2>
<p>Wenn mod_rewrite installiert ist, ist es auch möglich, die aufgerufene Adresse intern &#8220;umzuschreiben&#8221;, also eine ganz andere Seite auszuliefern, ohne das der Besucher davon etwas merkt. So können zum Beispiel <strong>sprechende URLs</strong> erstellt werden.</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #adadad; font-style: italic;"># mod_rewrite aktivieren</span>
<span style="color: #00007f;">RewriteEngine</span> <span style="color: #0000ff;">on</span>
&nbsp;
<span style="color: #adadad; font-style: italic;"># Optional</span>
<span style="color: #00007f;">RewriteCond</span> &lt;Bedingung&gt;
&nbsp;
<span style="color: #adadad; font-style: italic;"># Umleitung</span>
<span style="color: #00007f;">RewriteRule</span> &lt;Suchmuster&gt; &lt;Ziel&gt; &lt;Optionen&gt;</pre></div></div>

<p><code>RewriteEngine on</code> aktiviert mod_rewrite. Mit <code>RewriteRule</code> lassen sich Regeln festlegen, nach denen Besucher umgeleitet werden. Das <code>Suchmuster</code> ist ein regulärer Ausdruck, <code>Ziel</code> ist die Datei/URL die der Besucher in Wirklichkeit zu sehen bekommt. Außerdem lassen sich noch weitere Optionen festlegen. Mit <code>RewriteCond</code> lassen sich zusätzlich weitere Bedingungen, wie beispielsweise eine bestimmte IP-Adresse, festlegen.</p>
<p>
Wenn ein Besucher die Seite aufruft, wird überprüft ob das Suchmuster auf die angeforderte Adresse passt, ist das der Fall, wird die &lt;Ziel&gt;-Seite ausgeliefert. Wenn kein Suchmuster passt, macht mod_rewrite nichts, und der Apache versucht einfach die angeforderte Seite auszuliefern.</p>
<p><strong>Beispiel:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #00007f;">RewriteEngine</span> <span style="color: #0000ff;">on</span>
<span style="color: #00007f;">RewriteRule</span> ^seite_([<span style="color: #ff0000;">0</span>-<span style="color: #ff0000;">9</span>]+).html$ seite.php?id=$<span style="color: #ff0000;">1</span></pre></div></div>

<p>Wenn der Besucher www.webseite.example/seite_123.html aufruft, bekommt er in Wirklichkeit den Inhalt von www.webseite.example/seite.php?id=123 zu sehen. </p>
<p>Mehr zum Thema mod_rewrite kann man bei <a href="http://de.selfhtml.org/servercgi/server/rewrite.htm">SelfHTML</a> nachlesen.</p>
<h2>Startseite festlegen</h2>
<p>Mit der DirectoryIndex-Direktive lässt sich festlegen, welche Seite die Startseite eines Verzeichnisses ist, also aufgerufen wird, wenn der Besucher ein Verzeichnis aufruft. Damit lässt sich auch festlegen, welche Datei aufgerufen wird, wenn der Besucher nur die Domain eintippt.</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-family:monospace;"><span style="color: #00007f;">DirectoryIndex</span> startseite.html index.php index.html</pre></div></div>

<p>Wenn jetzt ein Verzeichnis, in dem die <code>.htaccess</code> gilt, direkt aufgerufen wird, beispielsweise <code>www.antusblog.de/demos/</code>, dann wird der Apache versuchen <code>/demos/startseite.html</code> auszuliefern. Wenn er die Datei nicht findet, sucht er nach <code>index.php</code> und dann nach <code>index.html</code>. Findet er keine Datei, gibt er entweder eine Liste aller Dateien in dem Verzeichnis aus (vorausgesetzt: <code>Options +Indexes</code>), oder eine Fehlermeldung.</p>
<p><em>Ich hoffe, ich konnte euch einen kleinen Überblick darüber geben, wie .htaccess-Dateien funktionieren, und was damit möglich ist. Neben den hier besprochenen Funktionen gibt es allerdings noch viele weitere.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.antusblog.de/2009/09/10/konfiguration-auf-verzeichnisebene-mittels-htaccess/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
