<?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>Projekt Schwarz</title>
	<atom:link href="http://projekt-schwarz.de/feed/" rel="self" type="application/rss+xml" />
	<link>http://projekt-schwarz.de</link>
	<description>Webdesign, Web 2.0 und sonstige gestalterische Dinge</description>
	<lastBuildDate>Fri, 30 Jul 2010 07:12:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>bbPress</title>
		<link>http://projekt-schwarz.de/171/bbpress/</link>
		<comments>http://projekt-schwarz.de/171/bbpress/#comments</comments>
		<pubDate>Fri, 30 Jul 2010 07:12:15 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Webanwendungen]]></category>
		<category><![CDATA[bbPress]]></category>
		<category><![CDATA[Forensystem]]></category>
		<category><![CDATA[Forum]]></category>
		<category><![CDATA[Integration]]></category>
		<category><![CDATA[phpBB]]></category>
		<category><![CDATA[phpBB3]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=171</guid>
		<description><![CDATA[Ein Forensystem sollte in den meisten Fällen einen recht guten Funktionsumfang haben, BB-Code unterstützen und viele Werkzeuge für eine gute Administration und Moderation besitzen. Das alles trifft auf bbPress nicht zu, es ist ein extrem schlankes Forensystem das auf Schnörkel wie das Aufteilen von Threads, ein Moderationsprotokoll, Geburtstagserinnerungen und selbst auf die allseits bekannten BB-Code-Buttons [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_176" class="wp-caption alignright" style="width: 191px"><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/bbpress-logo.png" alt="" title="bbPress Logo" width="181" height="52" class="size-full wp-image-176" /><p class="wp-caption-text">bbPress Logo</p></div>
<p>Ein Forensystem sollte in den meisten Fällen einen recht guten Funktionsumfang haben, BB-Code unterstützen und viele Werkzeuge für eine gute Administration und Moderation besitzen. Das alles trifft auf bbPress nicht zu, es ist ein extrem schlankes Forensystem das auf Schnörkel wie das Aufteilen von Threads, ein Moderationsprotokoll, Geburtstagserinnerungen und selbst auf die allseits bekannten BB-Code-Buttons verzichtet. Wozu dann dieser Artikel? Nun, in der Einfachheit liegen auch gewisse Vorteile.<br />
<span id="more-171"></span><br />
Im Grunde ging es darum, dass ich in ein bestehendes Projekt ein Forensystem integrieren wollte. Das Projekt baut auf keinem bekannten Content Management System auf, ist also eine komplette Eigenentwicklung. Die Integration von größeren Forensystemen wie etwa dem phpBB3 wäre enorm aufwendig geworden und große Ansprüche habe ich in diesem Fall nicht, das Forum ist nur eine kleine Zugabe für die Nutzer der Seite: Kategorien, Threads, Posts &#8211; mehr braucht es nicht. Natürlich könnte man ein solches System auch selbst programmieren, das wäre allerdings doch erheblicher Aufwand den ich mir sparen wollte. Also habe ich mir den Aufbau von bbPress genauer vorgenommen und habe dann angefangen eine Integration zu starten. Bitte beachtet, dass in den gezeigten Codebeispielen die Variablen an euer System angepasst werden müssen. Ich übernehme natürlich keine Haftung für Schäden an Datenbanken, Dateien oder Ausfälle eurer Seite. Die Devise lautet: Backup! Backup! Backup!</p>
<p><strong>Passwortprobleme</strong><br />
Das erste Problem ist, dass in meiner Eigenentwicklung die Zugangsdaten als simpler md5-Hash gespeichert sind, bbPress diese allerdings mit einem eigenen System verschlüsselt. Abhilfe schafft hier das Plugin <a href="http://bbpress.org/plugins/topic/md5-insecurity-for-bbpress/">MD5 insecurity for bbPress</a>. Dadurch ist es möglich Zugangsdaten auch als md5 zu speichern. Nun musste ich nur noch die bestehenden Benutzer meiner Seite auslesen und in die Datenbank von bbPress kopieren. </p>
<p><strong>Registrierung</strong><br />
Nun ein neues Theme für bbPress angelegt und die Stellen gesucht, an denen auf die Registrierung verwiesen wird. Dort habe ich nun einfach den Link geändert und auf die Registrierung meiner eigentlichen Seite verwiesen. Zur Sicherheit dann noch in der register.php von bbPress eine Weiterleitung auf meine eigentliche Registrierung eingefügt.</p>
<pre>
<code>header("Location: /meine-registrierung.php");
exit;</code>
</pre>
<p>Nun habe ich mein Script für die Registrierung angepasst, damit beim Anlegen eines neuen Benutzers dieser auch gleich in der Datenbank des Forums angelegt wird. Da ich natürlich prüfe ob die angegebene E-Mailadresse korrekt ist wird der Benutzerstatus für das Forum zunächst auf inaktiv gesetzt. Dies wird dann später behoben.</p>
<pre>
<code>mysql_query("INSERT INTO bb_users
	VALUES (
	'" .  $new_user_id . "',
	'" .  $_POST['username'] . "',
	'" .  md5($_POST['password']) . "',
	'" .  strtolower($_POST['username']) . "',
	'" .  strtolower($_POST['email']) . "',
	'',
	'',
	'0',
	'" .  $_POST['username'] . "')");

mysql_query("INSERT INTO bb_usermeta
	VALUES (
	'',
	'" .  $new_user_id . "',
	'bb_capabilities',
	'a:1:{s:8:"inactive";b:1;}')")</code>
</pre>
<p>Nun noch in das Script um die E-Mailadresse zu überprüfen die Freischaltung des Benutzers im Forum einbauen. Schon sollten neue Benutzer automatisch auch im Forum registriert sein und sich mit den gleichen Zugangsdaten anmelden können.</p>
<pre>
<code>mysql_query("UPDATE bb_usermeta
	SET meta_value = 'a:1:{s:6:"member";b:1;}'
	WHERE user_id = '" . $this_user_id . "'
	AND meta_key = 'bb_capabilities'
	LIMIT 1");</code>
</pre>
<p><strong>Passwort ändern</strong><br />
Der letzte wichtige Schritt ist bei Änderungen des Passworts auf der eigentlichen Seite. Hier muss natürlich auch das Passwort im Forum geändert werden. </p>
<pre>
<code>mysql_query("UPDATE bb_users
	SET user_pass = '" .  md5($_POST['password']) . "'
	WHERE ID = '" . $this_user_id . "'
	LIMIT 1");</code>
</pre>
<p>Im letzten Schritt sollte im Theme des Forums nun auch jeglicher Verweis auf die Benutzerprofile entfernt werden, denn dadurch könnte der Benutzer sein Passwort im Forum ändern und hätte dann das unerwünschte Resultat, dass die Zugangsdaten sich für die eigentliche Seite und das Forum unterscheiden. Dazu habe ich in dem Templates alle Verweise auf Benutzerprofile geändert um sie auf meine eigenen Profile umzuleiten. Hier ist etwas Handarbeit angesagt, dann um an Informationen wie den Benutzernamen ohne Link zu gelangen muss man sich durch den Code von bbPress wühlen. Dieser ist aber recht simpel aufgebaut. </p>
<p>Wichtig ist hier insbesondere die Anpassung der Theme-Datei &#8220;post.php&#8221;. Einige wichtige Befehle für Benutzerdaten sind:</p>
<pre>
<code>get_post_author_id( $post_id ) /* ID des Post-Autors */
get_post_author( $post_id ) /* Name des Post-Autors */
get_post_author_title( $post_id ) /* Rang / Titel des Autors ohne Link */</code>
</pre>
<p>Um sicher zu gehen, dass wirklich keine Änderungen an den Benutzerdaten über das Forum vorgenommen habe ich die profile.php im Hauptverzeichnis von bbPress noch dazu veranlasst Benutzer auf die Account-Seite meines Hauptsystems umzuleiten.</p>
<pre>
<code>header("Location: /mein-account.php");
exit;</code>
</pre>
<p>Zuletzt noch im Template login.php den Bereich <em>Password Recovery</em> löschen, denn sonst entstehen auch hier Probleme mit unterschiedlichen Zugangsdaten. Natürlich muss bei Passwortänderungen über ein ähnliches System auf der Hauptseite auch das Passwort im Forum geändert werden.</p>
<p>Das waren auch schon die wichtigsten Änderungen. Natürlich kann man über das Template-System noch allerlei Anpassungen vornehmen und selbstverständlich muss man auch in die Gestaltung des Forums noch etwas Zeit investieren. Trotzdem habe ich für die vollständige Anpassung meiner Seite (inklusive des Designs) nur drei bis vier Stunden gebraucht, schwer vorstellbar in der gleichen Zeit ein ähnlich gutes, eigenes Forensystem zu schreiben oder eines der großen Systeme so mit einer anderen Seite zu verbinden. Wer für seine Hauptseite WordPress einsetzt kann sich übrigens glücklich schätzen: WordPress und bbPress arbeiten perfekt zusammen und eine Integration ist ohne die oben genannten Änderungen möglich.</p>
<p>Angemerken muss ich noch, dass sich bbPress über einfach zu installierende Plugins deutlich erweitern lässt. BB-Code, Signaturen und ähnliche Dinge lassen sich nachrüsten, auch wenn ich von der Qualität einiger Plugins nicht wirklich überzeugt bin.</p>
<p><a href="http://bbpress.de" class="externallink">bbPress Deutschland</a></p>
<p><a href="http://bbpress.org/plugins/topic/md5-insecurity-for-bbpress/" class="externallink">MD5 insecurity for bbPress</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/171/bbpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Disclaimer</title>
		<link>http://projekt-schwarz.de/163/disclaimer/</link>
		<comments>http://projekt-schwarz.de/163/disclaimer/#comments</comments>
		<pubDate>Wed, 28 Jul 2010 13:43:21 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Interessante Links]]></category>
		<category><![CDATA[Disclaimer]]></category>
		<category><![CDATA[Recht]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=163</guid>
		<description><![CDATA[Auf unzähligen Seiten findet man sie: Disclaimer die von der Haftung für die Inhalte von verlinkten Seiten befreien sollen. Doch braucht man diesen Disclaimer wirklich? Oder besser noch: Hat dieser überhaupt rechtliche Gültigkeit? Dies ist im Artikel Der Disclaimer: Ein modernes Märchen? von e-recht24.de sehr ausführlich erläutert und daher spare ich mir weitreichende Ausführungen. Kurz [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/paragraph-e1280324513987.gif" alt="" title="Paragraph" width="150" height="137" class="alignright size-full wp-image-167" /></p>
<p>Auf unzähligen Seiten findet man sie: Disclaimer die von der Haftung für die Inhalte von verlinkten Seiten befreien sollen. Doch braucht man diesen Disclaimer wirklich? Oder besser noch: Hat dieser überhaupt rechtliche Gültigkeit? Dies ist im Artikel <a href="http://www.e-recht24.de/artikel/haftunginhalte/73.html">Der Disclaimer: Ein modernes Märchen?</a> von e-recht24.de sehr ausführlich erläutert und daher spare ich mir weitreichende Ausführungen. Kurz gesagt ist der Disclaimer in der weit verbreiteten Form </p>
<blockquote><p>Mit Urteil vom 12. Mai 1998 &#8211; 312 O 85/98 &#8211; &#8220;Haftung für Links&#8221; hat das Landgericht (LG) Hamburg entschieden, dass man durch das Setzen eines Links, die Inhalte der gelinkten Seite ggf. mit zu verantworten hat. Dies kann &#8211; so das LG &#8211; nur dadurch verhindert werden, dass man sich ausdrücklich von diesen Inhalten distanziert. </p></blockquote>
<p>oder ähnlich im Grunde weitgehend nutzlos. Einen wesentlich besseren Disclaimer der dem Sachverhalt viel eher gerecht wird findet man kostenlos ebenfalls auf <a href="http://www.e-recht24.de/muster-disclaimer.htm">e-recht24.de</a>. </p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/163/disclaimer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tiled backgrounds designer</title>
		<link>http://projekt-schwarz.de/122/tiled-backgrounds-designer/</link>
		<comments>http://projekt-schwarz.de/122/tiled-backgrounds-designer/#comments</comments>
		<pubDate>Tue, 27 Jul 2010 15:21:18 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Interessante Links]]></category>
		<category><![CDATA[Barock]]></category>
		<category><![CDATA[Hintergrund]]></category>
		<category><![CDATA[kachelbar]]></category>
		<category><![CDATA[Pattern]]></category>
		<category><![CDATA[Tapete]]></category>
		<category><![CDATA[Tiled backgrounds designer]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=122</guid>
		<description><![CDATA[Tapetentexturen, ob im derzeit sehr beliebten barocken Stil oder modern sind ein echter Hingucker auf vielen Seiten. Nur sind die Muster oft schwer zu finden und noch schwerer ist es diese Muster kachelbar und in den richtigen Farben zu finden. Eine einfache Lösung bietet hier der Tiled backgrounds designer von BgPatterns. Das JavaScript-Tool ermöglicht die [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_123" class="wp-caption alignright" style="width: 160px"><a href="http://projekt-schwarz.de/wp-content/uploads/2010/07/tiled-backgrounds-designer.jpg" rel="colorbox"><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/tiled-backgrounds-designer-150x150.jpg" alt="" title="Tiled backgrounds designer" width="150" height="150" class="size-thumbnail wp-image-123" /></a><p class="wp-caption-text">Screenshot vom Tiled backgrounds designer</p></div>
<p>Tapetentexturen, ob im derzeit sehr beliebten barocken Stil oder modern sind ein echter Hingucker auf vielen Seiten. Nur sind die Muster oft schwer zu finden und noch schwerer ist es diese Muster kachelbar und in den richtigen Farben zu finden. Eine einfache Lösung bietet hier der <a href="http://bgpatterns.com/">Tiled backgrounds designer</a> von BgPatterns.</p>
<p>Das JavaScript-Tool ermöglicht die Auswahl aus einer Vielzahl verschiedener Muster die frei gedreht und skaliert werden können. Die Farben für Vorder- und Hintergrund lassen sich frei wählen. Zudem kann aus einer von fünf Tapetenstrukturen ausgewählt werden. Die Größe der Kacheln kann zwischen 25&#215;25 und 190&#215;190 Pixeln eingestellt werden was eine große Bandbreite an zusätzlichen Möglichkeiten erzeugt. Nun, einen Haken hat die Sache leider dann doch: Die Vorschau sieht weit besser aus als die JPEG-Datei die man sich nachdem man mit dem Ergebnis zufrieden ist herunterladen kann. Hier wirkt das Muster deutlich verwaschener was wohl am JPEG-Format liegt. Eine PNG-Datei wäre hier wohl besser geeignet, als gekachelter Hintergrund fällt diese Unschärfe zum Glück nicht mehr so stark auf. </p>
<p><a href="http://bgpatterns.com/" class="externallink">Tiled backgrounds designer</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/122/tiled-backgrounds-designer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML 5 und CSS 3 kommt</title>
		<link>http://projekt-schwarz.de/132/html-5-und-css-3-kommt/</link>
		<comments>http://projekt-schwarz.de/132/html-5-und-css-3-kommt/#comments</comments>
		<pubDate>Mon, 26 Jul 2010 15:01:49 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[abgerundete Ecken]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Schatten]]></category>
		<category><![CDATA[Textschatten]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=132</guid>
		<description><![CDATA[HTML 5 und CSS 3 stehen in den Startlöchern und bieten einige sehr schöne Neuerungen die schon von vielen Browsern weitgehend unterstützt werden. Besonders interessant sind dabei die CSS3-Eigenschaften &#8220;box-shadow&#8221; und &#8220;border-radius&#8221; und &#8220;transform&#8221; die viele Design-Spielereien die derzeit noch mit aufwendigen Hintergrundbildern und verschachtelten Divs gelöst werden mit simplem CSS ermöglicht. Auch Microsoft wird [...]]]></description>
			<content:encoded><![CDATA[<p>HTML 5 und CSS 3 stehen in den Startlöchern und bieten einige sehr schöne Neuerungen die schon von vielen Browsern weitgehend unterstützt werden. Besonders interessant sind dabei die CSS3-Eigenschaften &#8220;box-shadow&#8221; und &#8220;border-radius&#8221; und &#8220;transform&#8221; die viele Design-Spielereien die derzeit noch mit aufwendigen Hintergrundbildern und verschachtelten Divs gelöst werden mit simplem CSS ermöglicht. Auch Microsoft wird sich mit dem Internet Explorer 9 an HTML 5 und CSS 3 heran wagen.<br />
<span id="more-132"></span><br />
Hier einige Beispiele der Möglichkeiten. Zur korrekten Darstellung sollte ein aktueller Firefox verwendet werden.<br />
<strong>Box Schatten</strong><br />
Hier ist keine Bilddatei im Spiel sondern lediglich ein Div und CSS3. Die Farbe des Schattens lässt sich über einen Hexwert festlegen, kann also jede beliebige Farbe haben.</p>
<style type="text/css" media="screen">
#demo_shadowbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-box-shadow: 3px 5px 15px #333; 
	margin: 10px 0;
}
</style>
<div id="demo_shadowbox"></div>
<pre>
<code>&lt;style type="text/css" media="screen"&gt;
#demo_shadowbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-box-shadow: 3px 5px 15px #333;
	margin: 10px 0;
}
&lt;/style&gt;
&lt;div id="demo_shadowbox"&gt;&lt;/div&gt;</code>
</pre>
<p><strong>Text Schatten</strong><br />
Auch Text kann mit Schatten versehen werden.</p>
<style type="text/css" media="screen">
#demo_shadowtext {
	font-size: 20px; 
	text-shadow: 2px 2px 2px #333; 
	margin: 10px 0;
}
</style>
<div id="demo_shadowtext">Dieser Text wirft einen Schatten</div>
<pre>
<code>&lt;style type="text/css" media="screen"&gt;
#demo_shadowtext {
	font-size: 20px;
	text-shadow: 2px 2px 2px #333;
	margin: 10px 0;
}
&lt;/style&gt;
&lt;div id="demo_shadowtext"&gt;Dieser Text wirft einen Schatten&lt;/div&gt;</code>
</pre>
<p><strong>Abgerundete Ecken</strong><br />
Abgerundete Ecken setze ich schon einige Zeit ein, da sie bereits von vielen Browsern korrekt dargestellt werden, ihr Fehler allerdings keine wirklichen Probleme aufwirft.</p>
<style type="text/css" media="screen">
#demo_roundcornerbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin: 10px 0;
}
</style>
<div id="demo_roundcornerbox"></div>
<pre>
<code>&lt;style type="text/css" media="screen"&gt;
#demo_roundcornerbox {
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin: 10px 0;
}
&lt;/style&gt;
&lt;div id="demo_roundcornerbox"&gt;&lt;/div&gt;</code>
</pre>
<p><strong>Transformieren</strong><br />
CSS 3 ermöglicht es auch Texte und Boxen zu transformieren, also beispielsweise zu drehen.</p>
<style type="text/css" media="screen">
#demo_transformbox {
	font-size: 20px; 
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	margin: 10px 0;
}
</style>
<div id="demo_transformbox">Schieflage?</div>
<pre>
<code>&lt;style type="text/css" media="screen"&gt;
#demo_transformbox {
	font-size: 20px;
	width: 200px;
	height: 100px;
	background-color: #CCC;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	margin: 10px 0;
}
&lt;/style&gt;
&lt;div id="demo_transformbox"&gt;Schieflage?&lt;/div&gt;</code>
</pre>
<p>Dies sind nur einige der nützlichen Neuerungen und die Tatsache, dass auch Microsoft mit dem Internet Explorer 9 auf den Zug modernen Webdesigns aufspringt lässt hoffen. Weiterhin wird es allerdings das Problem der Nutzer geben die an ihrem veralteten Browser festhalten, denn noch immer gibt es genug aktive IE6 Nutzer. Diese werden wohl aber in den sauren Apfel beissen müssen: Dank HTML 5 und CSS 3 werden sich viele Webdesigner künftig unnötige Arbeit für diese Gruppe sparen und die Nutzer von veralteten Browsern müssen mit gewaltigen optischen Abstrichen auf vielen Seiten leben müssen &#8211; oder einfach kostenlos einen anständigen Browser installieren. Ich werde künftig auf jeden Fall schon einmal hier und dort ein paar Gimmicks mit den neuen Möglichkeiten einbauen, auch wenn diese noch nicht vom W3C abgesegnet und standardisiert sind.</p>
<p>Weitere interessante Beispiele und Informationen rund um CSS 3 und HTML 5 gibt es bei Dr. Web:<br />
<a href="http://www.drweb.de/magazin/html5-css3-tutorials-tipps-und-referenzen/">HTML 5 &#038; CSS 3: Tutorials, Tipps und Referenzen</a><br />
<a href="http://www.drweb.de/magazin/html5-und-css3-templates-und-tutorials/">HTML5- und CSS3-Templates und -Tutorials</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/132/html-5-und-css-3-kommt/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ButtonBrowser</title>
		<link>http://projekt-schwarz.de/116/buttonbrowser/</link>
		<comments>http://projekt-schwarz.de/116/buttonbrowser/#comments</comments>
		<pubDate>Sun, 25 Jul 2010 17:30:17 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Interessante Links]]></category>
		<category><![CDATA[Antipixel]]></category>
		<category><![CDATA[Banner]]></category>
		<category><![CDATA[Button]]></category>
		<category><![CDATA[ButtonBrowser]]></category>
		<category><![CDATA[Microbanner]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=116</guid>
		<description><![CDATA[Microbanner, auch gerne mal Antipixel genannt, sind eine beliebte Methode um insbesondere in Blogs links einzubauen. Besonders bei der Blogroll, also der Linkliste verwenden viele Blogger gerne die Banner im Format 80&#215;15 Pixel aber auch um auf das eigene RSS-Feed zu verweisen oder mit einem XHTML valid das eigene Technikgeschick anzupreisen werden sie verwendet. Nur [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_118" class="wp-caption alignright" style="width: 90px"><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/antipixel.png" alt="" title="Vier Microbanner" width="80" height="60" class="size-full wp-image-118" /><p class="wp-caption-text">Vier Microbanner</p></div>
<p>Microbanner, auch gerne mal Antipixel genannt, sind eine beliebte Methode um insbesondere in Blogs links einzubauen. Besonders bei der Blogroll, also der Linkliste verwenden viele Blogger gerne die Banner im Format 80&#215;15 Pixel aber auch um auf das eigene RSS-Feed zu verweisen oder mit einem <strong>XHTML valid</strong> das eigene Technikgeschick anzupreisen werden sie verwendet. Nur wie erstellt man solche Banner? Schon das finden einer passenden Schriftart ist nicht unbedingt einfach. Schnell und recht unkompliziert geht das mit <a href="http://www.buttonbrowser.com">ButtonBrowser</a> bzw. dem dort verfügbaren <a href="http://www.buttonbrowser.com/main/index.php?page=antipixel">Buttonmaker</a>.</p>
<p>Es gibt sowohl die Möglichkeit einen zweigeteilten Banner zu erstellen als auch nur ein Feld zu verwenden. Über Eingabefelder können Text, Textfarben und Hintergrundfarben und die Breite der Felder bzw. des Feldes festgelegt werden. Über Auswahlfelder kann zudem die Ausrichtung auf linksbündig, rechtsbündig oder zentriert gesetzt werden. Auch der typische Rahmen lässt sich in der Farbe anpassen. Zur Auswahl stehen sechs Pixelfonts die alle recht gut lesbar sind. Allerdings schränkt oft die Länge des Textes die Auswahl der Schrift stark ein.</p>
<p>Etwas störend fällt teilweise die relativ lange Ladezeit auf, was insbesondere wenn man oft hinter einander eine neue Vorschau erstellen möchte um sein Ergebnis zu perfektionieren nervt. Trotzdem geht es wesentlich einfacher und flinker von der Hand als die Suche nach einer passenden Schrift mit anschließendem Pixelschieben in Photoshop.</p>
<p><a href=<a href="http://www.buttonbrowser.com" class="externallink">ButtonBrowser</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/116/buttonbrowser/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Schulische Ausbildung</title>
		<link>http://projekt-schwarz.de/127/schulische-ausbildung/</link>
		<comments>http://projekt-schwarz.de/127/schulische-ausbildung/#comments</comments>
		<pubDate>Sat, 24 Jul 2010 13:40:12 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[90er]]></category>
		<category><![CDATA[Ausbildung]]></category>
		<category><![CDATA[Dreamweaver]]></category>
		<category><![CDATA[Mediengestalter]]></category>
		<category><![CDATA[Schule]]></category>
		<category><![CDATA[WYSIWYG]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=127</guid>
		<description><![CDATA[Einen mittelschweren Kulturschock bekam ich neulich, als mich ein bekannter bat ihm bei einer Hausaufgabe zu helfen. Er lernt derzeit Mediengestalter (Print) und bekam die Hausaufgabe eben eine Internetseite zu erstellen. Das Problem für ihn war, dass er exakt Null Ahnung von der Materie hat, verständlich, macht er doch eine Ausbildung im Printbereich und nicht [...]]]></description>
			<content:encoded><![CDATA[<p>Einen mittelschweren Kulturschock bekam ich neulich, als mich ein bekannter bat ihm bei einer Hausaufgabe zu helfen. Er lernt derzeit Mediengestalter (Print) und bekam die Hausaufgabe eben eine Internetseite zu erstellen. Das Problem für ihn war, dass er exakt Null Ahnung von der Materie hat, verständlich, macht er doch eine Ausbildung im Printbereich und nicht wie ich damals im Non-Print-Bereich wo HTML und CSS zur Ausbildung gehören. Auch wenn ich nicht begeistert davon war jemandem die Hausaufgaben abzunehmen habe ich mir das Material, das verwendet werden sollte, von ihm zuschicken lassen. Nun, die völlig deplatzierte Aufgabenstellung für einen Print-Mediengestalter war danach nur der kleinste Schock.<br />
<span id="more-127"></span><br />
Denke ich an meine Ausbildung zurück, die schon einige Jahre her ist, fallen mir auch einige Beispiele für Aufgabenstellungen ein, die gestalterisch wohl nicht einmal 1980 viel Anklang beim Kunden gefunden hätten. Zur Verteidigung meiner Lehrer muss ich sagen, dass viele dieser schrecklichen Gestaltungskrücken mehr darauf abzielten uns den Umgang mit den Programmen beizubringen als uns gestalterisch anzusprechen. Was aber im Zip-Archiv lag, das der Lehrer meinem Bekannten und seinen Mitschülern ausgehändigt hat, qualifiziert besagten Lehrer wohl zur Suche eines neuen Jobs.</p>
<p>Da werden Fotos geliefert, wie ich sie nur aus den Fotoalben meiner Eltern kenne: Matte, verfälschte Farben von Stränden, an denen sich Leute tummeln, deren Badebekleidung man ansieht, dass es sich wohl die frühen 90er Jahre waren, als das Foto aufgenommen wurde. Dazu dann ein Logo im EPS-Format. Stolz schwillt die Brust des Lehrers über diese technische Höchstleistung, um anschließend in sich zusammen zu fallen, nachdem klar wird, dass er die verwendete Schriftart weder in Pfade konvertiert hat noch die Schriftart im Archiv enthalten war. Dazu kommen allerlei Buttons und Icons, die ebenfalls wohl kurz nach dem Mauerfall entworfen wurden. Die Frage die sich nun stellt: Wie soll ein Schüler mit diesem Material eine ansprechende Internetseite gestalten? Nicht nur, dass ihm die Ausbildung und die Software dazu fehlt &#8211; selbst mir im Non-Print-Bereich wurde das Programmieren mit Dreamweaver oder anderen WYSIWYG Editoren beigebracht &#8211; sondern, weil es unmöglich ist mit solchem Material zu arbeiten. </p>
<p>Die Tatsache, dass Berufsschullehrer wohl noch allzu gern 20 Jahre in der Vergangenheit leben statt mit der Zeit zu gehen, Themen wie Facebook und Twitter aufzugreifen und ihr Material wenigstens alle fünf Jahre einmal auf einen aktuellen Stand zu bringen, finde ich schockierender als die PISA-Studie. Dabei ist es heute keine Kunst mehr kostenlos und legal an gutes Bildmaterial zu kommen, sich fertige Buttons und Icons herunterzuladen oder, für die ganz engagierten Lehrkräfte: Selbst Buttons und Icons zu basteln, Tutorials gibt es genug im Netz. </p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/127/schulische-ausbildung/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>COLOURlovers</title>
		<link>http://projekt-schwarz.de/12/colourlovers/</link>
		<comments>http://projekt-schwarz.de/12/colourlovers/#comments</comments>
		<pubDate>Thu, 22 Jul 2010 17:22:38 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Interessante Links]]></category>
		<category><![CDATA[COLOURlovers]]></category>
		<category><![CDATA[Farbe]]></category>
		<category><![CDATA[Farbpalette]]></category>
		<category><![CDATA[Hintergrund]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Pattern]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=12</guid>
		<description><![CDATA[Viele kennen das Problem sicherlich: Man möchte eine Seite gestalten, hat aber keine gute Farbkomposition im Kopf oder schlimmer noch, man sucht passende Farben zu einer bereits vorgegebenen Farbe. Hier ist COLOURlovers genau die passende Seite. Eine Unmenge an ansprechenden Farbkombinationen wartet auf einen Webdesigner. Neben einer Hexwert-Suche in die man seinen vorgegebenen Farbwert eingeben [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_110" class="wp-caption alignright" style="width: 310px"><a href="http://projekt-schwarz.de/wp-content/uploads/2010/07/colourlovers1.jpg" rel="colorbox"><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/colourlovers1-300x208.jpg" alt="" title="Screenshot COLOURlovers" width="300" height="208" class="size-medium wp-image-110" /></a><p class="wp-caption-text">Screenshot COLOURlovers</p></div>
<p>Viele kennen das Problem sicherlich: Man möchte eine Seite gestalten, hat aber keine gute Farbkomposition im Kopf oder schlimmer noch, man sucht passende Farben zu einer bereits vorgegebenen Farbe. Hier ist <a href="http://de-de.colourlovers.com">COLOURlovers</a> genau die passende Seite. Eine Unmenge an ansprechenden Farbkombinationen wartet auf einen Webdesigner.</p>
<p>Neben einer Hexwert-Suche in die man seinen vorgegebenen Farbwert eingeben kann um dann passende Paletten zu finden gibt es auch die Möglichkeit über Schlagworte nach einzelnen Farben zu suchen. Hat man eine ansprechende Farbe gefunden reicht ein Klick auf die Farbe und passende Farbkompositionen werden angezeigt. Zudem liefert COLOURlovers auch eine Vielzahl an Patterns, also Hintergrundmustern die man zudem alle mit den gewünschten Farben einfärben kann.<br />
<span id="more-12"></span><br />
Auch ohne konkrete Vorstellungen lohnt sich das Durchstöbern von COLOURlovers, ein Trendbericht zeigt anhand von verschiedenen Internetseiten auf, welche Farbpaletten verwendet wurden. Für mich war COLOURlovers bisher immer ein guter Ausgangspunkt bei einem kleinen Kreativ-Tief und auch wenn es etwas Zeit in Anspruch nehmen kann eine passende Farbpalette zu finden gestaltet es sich so wesentlich einfacher als mit eigenhändigen Versuchen in Photoshop oder anderen Programmen.</p>
<p><a href="http://de-de.colourlovers.com" class="externallink">Zu COLOURlovers</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/12/colourlovers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ColorBox</title>
		<link>http://projekt-schwarz.de/75/colorbox/</link>
		<comments>http://projekt-schwarz.de/75/colorbox/#comments</comments>
		<pubDate>Wed, 21 Jul 2010 21:38:03 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Bilder]]></category>
		<category><![CDATA[ColorBox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Lightbox]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=75</guid>
		<description><![CDATA[Es gibt viele Varianten des ursprünglichen Lightbox-Effekts der Bilder nicht in einem neuen Fenster oder Popup öffnet sondern in einer Ebene über der Seite einblendet, meist mit einem schicken Animationseffekt. Eine auf jQuery basierende Variante und meiner Meinung nach die derzeit beste Lösung ist die ColorBox. Ähnlich der, nicht mehr weiterentwickelten, Thickbox ist die ColorBox [...]]]></description>
			<content:encoded><![CDATA[<p>Es gibt viele Varianten des <a href="http://www.huddletogether.com/projects/lightbox/">ursprünglichen Lightbox-Effekts</a> der Bilder nicht in einem neuen Fenster oder Popup öffnet sondern in einer Ebene über der Seite einblendet, meist mit einem schicken Animationseffekt.<br />
<a href="http://projekt-schwarz.de/wp-content/uploads/2010/07/colorbox-effect.jpg" rel="colorbox"><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/colorbox-effect-150x150.jpg" alt="" title="colorbox-effect" width="150" height="150" class="alignright size-thumbnail wp-image-76" /></a><br />
Eine auf jQuery basierende Variante und meiner Meinung nach die derzeit beste Lösung ist die <a href="http://colorpowered.com/colorbox/">ColorBox</a>. Ähnlich der, nicht mehr weiterentwickelten, Thickbox ist die ColorBox nicht nur in der Lage Bilder in einer solchen Ebene über der Seite darstellen sondern auch iFrames zu laden, Flash-Videos anzuzeigen oder auch nur Text oder sonstige Informationen anzuzeigen.<br />
<span id="more-75"></span><br />
Die ColorBox kommt mit fünf verschiedenen Styles die alle recht ansprechend sind und für die meisten Seiten passen. Natürlich lässt sich aber die Farbgebung und Gestaltung der Box mittels CSS und Bilddateien an die eigenen Vorstellungen anpassen. Zudem gibt es eine Vielzahl an Optionen mit denen das Verhalten der ColorBox beeinflusst werden kann. Angefangen bei der Übersetzung von Texten (bei anderen Effekten muss dazu teilweise die kryptische JavaScript-Datei bearbeitet werden) bis hin zur Festlegung von maximalen Größen &#8211; wer eine geringe Bildschirmauflösung hat wird sich sicher schon gelegentlich über Lightboxen geärgert haben, die größer waren als der eigene Bildschirm &#8211; bis hin zum Festlegen eines Slideshow-Effekts.</p>
<p>Der Grundlegende Einbau der ColorBox ist recht einfach. Natürlich muss jQuery ebenfalls geladen und eingebunden sein, anschließend müssen sowohl die JavaScript-Datei als auch die CSS-Datei der ColorBox im Head der Seite eingebunden werden.</p>
<pre>
<code>&lt;script type="text/javascript" src="jquery.colorbox-min.js"&gt;&lt;/script&gt;
&lt;link media="screen" rel="stylesheet" href="colorbox.css" /&gt;</code>
</pre>
<p>Nun geht es darum den Effekt einzubauen. Das Beispiel unten setzt die maximale Breite und Höhe der ColorBox auf 95% wodurch die Box auch bei sehr großen Bildern nie größer angezeigt wird als der Monitor des Benutzers darstellen kann. Große Bilder werden dadurch kleiner dargestellt, was allerdings weit weniger störend ist als eine Ebene über der Seite zu haben bei der man im schlimmsten Fall nicht mehr an den Button zum Schließen kommt. Zudem wurden die Texte der Box ins Deutsche übersetzt.</p>
<pre>
<code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
	$("a[rel='colorbox']").colorbox({
		maxWidth:"95%",
		maxHeight:"95%",
		close:"schließen",
		next:"nächstes",
		previous:"vorheriges",
		current:"Bild {current} von {total}"
	});
});
&lt;/script&gt;</code>
</pre>
<p>Die Angabe <em>a[rel='colorbox']</em> kann natürlich abgeändert werden um auf andere Kennzeichnungen, etwa bestimmte Klassen, zu reagieren. Für das Beispiel eignet es sich aber am besten. Nun fehlt nur noch die Einbindung von Bildern. Natürlich kann sowohl ein Text als auch ein Thumbnail zur Vorschau verwendet werden, wichtig ist, dass das eigentliche Bild verlinkt wird. Zudem muss natürlich die Kennzeichnung, im Beispiel als <em>rel=&#8221;colorbox&#8221;</em> in den Link integriert werden.</p>
<pre>
<code>&lt;a href="gross.jpg" rel="colorbox"&gt;&lt;img src="thumbnail.jpg" alt="ColorBox" /&gt;&lt;/a&gt;</code>
</pre>
<p>Weitere Beispiele, auch für die Einbindung von anderen Inhalten als Bildern sind auf der Seite der ColorBox zu finden. Im Download-Paket sind zudem ausführliche und hilfreiche Beispiele enthalten.</p>
<p><a href="http://colorpowered.com/colorbox/" class="externallink">ColorBox Website</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/75/colorbox/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mantis Bug Tracker</title>
		<link>http://projekt-schwarz.de/103/mantis-bug-tracker/</link>
		<comments>http://projekt-schwarz.de/103/mantis-bug-tracker/#comments</comments>
		<pubDate>Wed, 21 Jul 2010 17:25:29 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[Webanwendungen]]></category>
		<category><![CDATA[Bug]]></category>
		<category><![CDATA[Bug Tracker]]></category>
		<category><![CDATA[Bugtracker]]></category>
		<category><![CDATA[Fehler]]></category>
		<category><![CDATA[Mantis]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=103</guid>
		<description><![CDATA[Viele werden das Problem kennen: Man betreut mehrere (Kunden-)Projekte, hat selbst Ideen oder bekommt per E-Mail Wünsche und Fehler meldet und muss diese dann möglichst im Kopf behalten oder der prall gefüllten Mailbox wiederfinden. Eine gute Lösung ist hier der Einsatz eines Bugtrackers in den sowohl Fehler als auch Wünsche eingetragen werden und dann nach [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_106" class="wp-caption alignright" style="width: 252px"><img src="http://projekt-schwarz.de/wp-content/uploads/2010/07/mantis_logo.gif" alt="" title="Mantis Logo" width="242" height="102" class="size-full wp-image-106" /><p class="wp-caption-text">Mantis Logo</p></div>
<p>Viele werden das Problem kennen: Man betreut mehrere (Kunden-)Projekte, hat selbst Ideen oder bekommt per E-Mail Wünsche und Fehler meldet und muss diese dann möglichst im Kopf behalten oder der prall gefüllten Mailbox wiederfinden. Eine gute Lösung ist hier der Einsatz eines Bugtrackers in den sowohl Fehler als auch Wünsche eingetragen werden und dann nach und nach abgearbeitet werden können. Wer ordentlich mit dem Bugtracker arbeitet der hat nicht nur selbst eine saubere To-Do-Liste sondern kann auch Kunden und Nutzern über den Bugtracker signalisieren welche Fehler bereits bekannt sind und welche evtl. bereits behoben aber noch nicht hochgeladen sind.<br />
<span id="more-103"></span><br />
Allerdings hat sich die Suche nach einem anständigen PHP-Bugtracker für mich ziemlich schwierig gestaltet. Viele Bugtracking-Anwendungen laufen nicht auf Basis von PHP, etwa das recht bekannte <a href="http://www.bugzilla.org/">Bugzilla</a> das nur auf Perl läuft oder <a href="http://roundup.sourceforge.net/">Roundup</a> und <a href="http://trac.edgewall.org/">Trac</a> die Python nutzen. Was mir auf der Suche nach einem Bugtracker auf PHP-Basis alles untergekommen ist trotz teilweise jeder Beschreibung. Der größte Schock war ein Bugtracker der sich überhaupt nicht installieren lies &#8211; immerhin sind register_globals auf meinem Server &#8211; wie auf jedem anständigen Server &#8211; ausgeschaltet. Ob das nun Selbstironie sein sollte oder einfach ein Anfängerprojekt war habe ich nicht weiter hinterfragt. Letztendlich blieben nur <a href="http://flyspray.org/">Flyspray</a> und <a href="http://www.mantisbt.org/">Mantis</a>. Flyspray darf hier nicht ganz totgeschwiegen werden, ist es doch ein recht solider Bugtracker, allerdings haben mir das Projekthandling und auch die Oberfläche nicht wirklich zugesagt. Bleibt Mantis.</p>
<p>Mantis ist im Grunde das was ich benötige: Ein solider, funktionaler Bugtracker mit eingängiger Oberfläche und der Fähigkeit mehrere Projekte zu handhaben. Insbesondere das Projetkhandling finde ich gelungen, können Projekte als &#8220;privat&#8221; markiert werden und sind somit nur für Benutzer sichtbar die dem Projekt auch zugeordnet sind. Dadurch kann man Kunden ihre Projekte direkt zugänglich machen ohne dass jeder Kunde weiß was in den Projekten anderer Kunden an Anfragen und Fehlern vorliegt. Zwar sind insbesondere die Projekteinstellungen anfangs etwas unübersichtlich und viele Einstellungen von Mantis lassen sich nur über eine PHP-Datei ändern, nach etwas Einarbeitungszeit geht dies aber recht gut von der Hand. Fehler können mit allen nötigen Informationen versehen werden, etwa ob diese reproduzierbar sind und wie diese reproduziert werden können. Zusätzlich ist es möglich Dateien anzuhängen was sich insbesondere bei Darstellungsfehlern anbietet aber auch bei der Arbeit mit mehreren Mitarbeitern an einem Projekt. Einträge in den Bugtracker können natürlich kommentiert werden, so dass bei Bedarf auch ein Dialog mit dem Reporter entstehen kann um den Fehler besser finden zu können. Kritisieren muss ich lediglich die Möglichkeit Mantis an das eigene Corporate Design anzupassen. Reine HTML-Templates oder gar verschiedene Themes fehlen derzeit leider vollständig. Entsprechend ist die Oberfläche von Mantis sehr prakmatisch oder man muss sich tief in den Code einarbeiten um komplexere Anpassungen vorzunehmen. Trotzdem bin ich mit Mantis sehr zufrieden und kann es nur weiterempfehlen. </p>
<p><a href="http://www.mantisbt.org/" class="externallink">Mantis Bug Tracker</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/103/mantis-bug-tracker/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Twitter Integration und Interaktion</title>
		<link>http://projekt-schwarz.de/89/twitter-integration-und-interaktion/</link>
		<comments>http://projekt-schwarz.de/89/twitter-integration-und-interaktion/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 23:38:48 +0000</pubDate>
		<dc:creator>Thomas Heger</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[twitterlibphp]]></category>

		<guid isPermaLink="false">http://projekt-schwarz.de/?p=89</guid>
		<description><![CDATA[Für mein Projekt theHunter HQ bot es sich an auf ein komplett eigenständiges System für Neuigkeiten zu verzichten und dafür eher Twitter zu nutzen. Das Konzept war recht schnell klar: Alles was bei Twitter zu lesen ist sollte auch auf der Startseite des Projekts zu sehen sein. Soweit nicht unbedingt schwierig, die größere Problematik war, [...]]]></description>
			<content:encoded><![CDATA[<p>Für mein Projekt <a href="http://www.thehunter-hq.com">theHunter HQ</a> bot es sich an auf ein komplett eigenständiges System für Neuigkeiten zu verzichten und dafür eher Twitter zu nutzen. Das Konzept war recht schnell klar: Alles was bei Twitter zu lesen ist sollte auch auf der Startseite des Projekts zu sehen sein. Soweit nicht unbedingt schwierig, die größere Problematik war, dass das System das ich für das Projekt geschrieben habe zu bestimmten Anlässen vollautomatisch, also auch während ich nicht am Rechner bin, Tweets erzeugt.</p>
<p>Wie gerufen kam mir die <a href="http://jdp.github.com/twitterlibphp/">twitterlibphp</a> die die Kommunikation mit der Twitter API erheblich erleichtert. Doch bevor man mit der API arbeiten kann benötigt man eine Datenbank um die abgerufenen Daten zu speichern. Ich habe mir eine recht einfache Struktur gebastelt in die ich nur die ID des Tweets, das Datum und den Text speichere. Zusätzlich noch eine Spalte für meine eigenen IDs.<br />
<span id="more-89"></span></p>
<pre>
<code>CREATE TABLE IF NOT EXISTS `dtm_twitter_status` (
  `twitt_id` int(11) NOT NULL auto_increment,
  `twitt_unique` varchar(30) collate utf8_bin NOT NULL,
  `twitt_text` varchar(14) collate utf8_bin NOT NULL,
  `twitt_date` varchar(50) collate utf8_bin NOT NULL,
  PRIMARY KEY  (`twitt_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin;</code>
</pre>
<p>Natürlich könnte man das Datum auch in einem Datumsformat speichern oder als UNIX Timestamp, für mich war es in diesem Fall aber recht angenehm das Datum so zu speichern wie es von der API geliefert wird. Nun geht es daran die eigene Seite mit Twitter kommunizieren zu lassen. Zunächst wird die twitterlibphp eingebunden, Benutzername und Passwort festgelegt und die Verbindung zu Twitter hergestellt.</p>
<pre>
<code>&lt;?php
/*
 * Twitter Library einbinden
 */
require "./inc/twitter.lib.php";
/*
 * Benutzername und Passwort für Twitter
 */
$username = "";
$password = "";

/*
 * Twitter Klasse initiieren
 */
$twitter = new Twitter($username, $password);
?&gt;</code>
</pre>
<p>Somit wäre die Verbindung zu Twitter hergestellt, nun geht es darum zuerst einmal die letzten eigenen Tweets abzuholen.</p>
<pre>
<code>&lt;?php
/*
 * Tweets as JSON abrufen
 */
$status = $twitter-&gt;getUserTimeline(array(), 'json');

/*
 * JSON dekodieren
 */
$status_info = (json_decode($status));
?&gt;</code>
</pre>
<p>So weit, so gut. Nun haben wir also unsere ganzen Tweets, nur wissen wir nicht, welche wir schon in der Datenbank haben und welche nicht. Daher müssen wir nun die Datenbank abfragen um zu überprüfen welches die letzte Twitter ID ist wir abgeholt haben. Vorher muss natürlich eine Verbindung mit der MySQL-Datenbank hergestellt werden.</p>
<pre>
<code lang="php">&lt;?php
/*
 * Überprüfe die Datenbank
 */
$get_latest_twitter = mysql_query("SELECT twitt_unique
	FROM dtm_twitter_status
	ORDER BY twitt_unique DESC
	LIMIT 1");
$latest_twitter = mysql_fetch_assoc($get_latest_twitter);
?&gt;</code>
</pre>
<p>Nun der letzte Schritt für das Abrufen: Das Speichern der neu hinzugekommenen Tweets. Dazu muss aber zuerst einmal vergleichen werden, ob die gefundenen Tweets bereits in der Datenbank sind oder nicht. </p>
<pre>
<code>&lt;?php
/*
 * Verarbeite Tweets und vergleiche die Twitter ID
 */
if(is_array($status_info)) {
	foreach($status_info as $tweet) {
		if($latest_twitter['twitt_unique'] &gt;= $tweet-&gt;id) { continue; }

		mysql_query("INSERT INTO dtm_twitter_status
		VALUES (
		'',
		'" . $tweet-&gt;id . "',
		'" . addslashes(tweet-&gt;text) . "',
		'" . $tweet-&gt;created_at . "')");
	}
}
?&gt;</code>
</pre>
<p>Soweit zum abrufen der Tweets. Nun wollen wir anschließend noch etwas an Twitter senden. Da es zu weit gehen würde das Projekt und den Sinn der Status-Updates hier zu erläutern wollen wir Twitter in diesem Beispiel dazu missbrauchen regelmäßig darüber zu informieren, dass der Server noch läuft. Das Senden eines neuen Tweets ist mehr als simpel:</p>
<pre>
<code>&lt;?php
/*
 * Sende Lebenszeichen an Twitter
 */
$message = 'Es ist ' . date("r") . ' und der Server läuft!';
$twitter-&gt;updateStatus($message, '', 'json');
?&gt;</code>
</pre>
<p>Das würde nun dazu führen, dass Twitter immer wenn das Script ausgeführt wird einen Text wie &#8220;Es ist Thu, 21 Dec 2000 16:01:07 +0200 und der Server läuft!&#8221; bekommt, natürlich mit aktuellem Datum. Natürlich kann man den Status auch vor dem Abrufen der Tweets senden damit der Status gleich mit abgerufen wird, mir erscheint es aber sicherer dies erst mit dem nächsten Aufruf der Scripts durchzuführen. Bleibt die Frage, wie das nun vollautomatisch durchgeführt werden soll. Ich verwende Cronjobs die alle fünf Minuten die Datei ausführen. Wer keine Cronjobs zur Verfügung hat muss sich ein Workaround suchen, etwa das Script in Intervallen in öffentlich zugängliche Seiten einzubauen, was allerdings nur bei ausrechend frequentierten Seiten zum Erfolg führt. Besser und sicherer ist es immer das mit einem Cronjob zu regeln.</p>
<p><a href="/wp-content/uploads/2010/07/twitter-status.zip" class="externallink">Komplettes Script herunterladen</a> <a href="http://jdp.github.com/twitterlibphp/" class="externallink">twitterlibphp</a></p>
]]></content:encoded>
			<wfw:commentRss>http://projekt-schwarz.de/89/twitter-integration-und-interaktion/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
