<?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>sBLOGet &#187; Programmieren</title>
	<atom:link href="http://www.sbloget.de/category/programmieren/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sbloget.de</link>
	<description>Yet another waste of time</description>
	<lastBuildDate>Sat, 15 Oct 2011 16:04:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Bilderslideshows als DVD</title>
		<link>http://www.sbloget.de/2008-02-04_bilderslideshows-als-dvd/</link>
		<comments>http://www.sbloget.de/2008-02-04_bilderslideshows-als-dvd/#comments</comments>
		<pubDate>Mon, 04 Feb 2008 21:35:00 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Bilder]]></category>
		<category><![CDATA[Programmieren]]></category>
		<category><![CDATA[dvd]]></category>
		<category><![CDATA[dvd-baker]]></category>
		<category><![CDATA[dvd-menu]]></category>
		<category><![CDATA[dvd-slideshow]]></category>
		<category><![CDATA[gallery2]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/index.php/2008-02-04_bilderslideshows-als-dvd</guid>
		<description><![CDATA[Bilder kann man auf verschiedene Arten pr&#228;sentieren. Auf Papier gedruckt oder belichtet ist irgendwie so analog.  Eine Bildergalerie im Netz setzt nat&#252;rlich immer einen Internetanschluss beim Betrachter voraus. Bilderslideshows auf DVD haben den gro&#223;en Vorteil, dass viele den Platz vor dem Fernseher gem&#252;tlicher eingerichtet haben, als vor dem PC &#8211; Stichwort Couch.  Und [...]]]></description>
			<content:encoded><![CDATA[<p>Bilder kann man auf verschiedene Arten pr&#228;sentieren. Auf Papier gedruckt oder belichtet ist irgendwie so <em>analog</em>.  Eine <a href="http://gallery.sbloget.de/">Bildergalerie im Netz</a> setzt nat&#252;rlich immer einen Internetanschluss beim Betrachter voraus. Bilderslideshows auf DVD haben den gro&#223;en Vorteil, dass viele den Platz vor dem Fernseher gem&#252;tlicher eingerichtet haben, als vor dem PC &#8211; Stichwort <em>Couch</em>.  Und letztendlich wollte ich eh schon immer mal ne eigene DVD produzieren <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Komfortable Programme gibt es ja genug. Aber wenn man das auch &#252;ber die Kommandozeile unter Linux machen kann, schl&#228;gt das Informatikerherz gleich doppelt so hoch. Mit dem Tool <em>dvd-slideshow </em>kommt man <a href="http://jcornuz.wordpress.com/2008/01/22/producing-a-dvd-slideshow/">mit vier Kommandozeilenaufrufen zur fertigen DVD</a> (als ISO-Image).</p>
<p>Noch etwas komfortabler geht es mit dem <a href="http://dvd-baker.sourceforge.net/">DVD-Baker</a>. Mit Men&#252; und allem was man so braucht. Und um den Kreis zu schlie&#223;en, kann dieses Tool auch Bilder aus der Gallery2 in eine DVD verwandeln. Um nicht meinen Rechner stundenlang damit zu besch&#228;ftigen, hab ich mich als erstes Beispiel das <a href="http://gallery.sbloget.de/sonstiges/">Album &#8220;Sonstiges&#8221; aus meiner Gallery</a> in eine DVD verwandelt. Klappt, schaut ganz h&#252;bsch aus und ihr k&#246;nnt es euch <a href="http://rapidshare.de/files/38491771/sonstiges.iso.html">das Ergebnis gerne runterladen</a>. Wer Hilfe beim Brennen braucht, wird z.B beim <a href="http://www.pc-magazin.de/praxis/cm/page/page.php?table=pg&amp;id=4083">PC-Magazin</a> f&#252;ndig.</p>
<p>N&#228;chster Schritt: Meine ganze Gallery als DVD und dann teuer verkaufen <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2008-02-04_bilderslideshows-als-dvd/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Zitat des Tages</title>
		<link>http://www.sbloget.de/2006-09-24_zitat-des-tages/</link>
		<comments>http://www.sbloget.de/2006-09-24_zitat-des-tages/#comments</comments>
		<pubDate>Sun, 24 Sep 2006 21:42:40 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Programmieren]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/index.php/2006-09-24_zitat-des-tages/</guid>
		<description><![CDATA[Programming today is a race between software engineers striving to build  bigger and better idiot-proof programs, and the Universe trying to produce  bigger and better idiots. So far, the Universe is winning. (Rich Cook &#8211; vielleicht dieser hier)
Ist bestimmt schon alt und bekannt, aber zeitlos  
]]></description>
			<content:encoded><![CDATA[<blockquote><p>Programming today is a race between software engineers striving to build  bigger and better idiot-proof programs, and the Universe trying to produce  bigger and better idiots. So far, the Universe is winning.<em> (Rich Cook &#8211; vielleicht <a href="http://blogs.msdn.com/richcook/">dieser hier</a>)</em></p></blockquote>
<p>Ist bestimmt schon alt und bekannt, aber zeitlos <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2006-09-24_zitat-des-tages/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Schleichwerbung</title>
		<link>http://www.sbloget.de/2006-06-10_schleichwerbung/</link>
		<comments>http://www.sbloget.de/2006-06-10_schleichwerbung/#comments</comments>
		<pubDate>Sat, 10 Jun 2006 18:44:54 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Computer]]></category>
		<category><![CDATA[Programmieren]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/index.php/2006-06-10_schleichwerbung/</guid>
		<description><![CDATA[Nur ein wenig und weil ich mich schon langsam schuldi f&#252;hle, ihn so lange nicht verlinkt zu haben. Also, wer schon immer Lust hatte an einem Projekt mitzuarbeiten, hat hier die M&#246;glichkeit. Ein Studienkollege aus Coburger Zeiten entwickelt die c.o.r.v.e.X.-Engine und schreibt dazu das c.o.r.v.e.X.-Blog. Rennt ihm die Bude ein  
Hier noch aus der [...]]]></description>
			<content:encoded><![CDATA[<p>Nur ein wenig und weil ich mich schon langsam schuldi f&#252;hle, ihn so lange nicht verlinkt zu haben. Also, wer schon immer Lust hatte an einem Projekt mitzuarbeiten, hat hier die M&#246;glichkeit. Ein Studienkollege aus Coburger Zeiten entwickelt die c.o.r.v.e.X.-Engine und schreibt dazu das <a href="http://www.demonz.de/corveXblog/">c.o.r.v.e.X.-Blog</a>. Rennt ihm die Bude ein <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><a href="http://www.demonz.de/corveXblog/?p=4">Hier noch aus der Beschreibung des Projekts:</a></p>
<blockquote><p>eine komponentenorientierte engine, welche auf multithreading systeme ausgelegt sein soll. die komponeten (auch <em>agents </em>genannt) sollen dabei parallel spezifische aufgaben &#8211; wie rendering, netzwerk, audio, etc &#8211; abarbeiten. aktiviert, &#252;berwacht und gesteuert werdern alle <em>agents</em> von einem zentralen controller. alle <em>agents</em> arbeiten auf einem hierarchisch angelegtem<font size="-1"> </font>objektraum</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2006-06-10_schleichwerbung/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Sidebar-Geschubse</title>
		<link>http://www.sbloget.de/2006-06-02_sidebar-geschubse/</link>
		<comments>http://www.sbloget.de/2006-06-02_sidebar-geschubse/#comments</comments>
		<pubDate>Thu, 01 Jun 2006 22:29:13 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Programmieren]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/index.php/2006-06-02_sidebar-geschubse/</guid>
		<description><![CDATA[Dem aufmerksamen Leser mag es aufgefallen sein, ich hab die Leiste an der Seite etwas umgestellt. Wollte ich schon lange mal machen, um sie meinen W&#252;nschen anzupassen. Zufallsbild und die Anzeige der letzten Kommentare fand ich einfach pers&#246;nlich interessanter und hab sie nach oben geschoben. Kategorien und Archiv wird eh kaum angeklickt, da k&#246;nnen sie [...]]]></description>
			<content:encoded><![CDATA[<p>Dem aufmerksamen Leser mag es aufgefallen sein, ich hab die Leiste an der Seite etwas umgestellt. Wollte ich schon lange mal machen, um sie meinen W&#252;nschen anzupassen. Zufallsbild und die Anzeige der letzten Kommentare fand ich einfach pers&#246;nlich interessanter und hab sie nach oben geschoben. Kategorien und Archiv wird eh kaum angeklickt, da k&#246;nnen sie auch am unteren Ende der Seite ihr Dasein fristen.</p>
<p>Seit langem stand auch das <a href="http://automattic.com/code/widgets/">Sidebar-Widget-Plugin</a> auf meiner ToDo-Liste. Kurz zusammengefasst: Die Seitenleiste wird in einzelne Widgets/Elemente (Links, Archiv, Kategorien&#252;bersicht, &#8230;) unterteilt, die dann im Adminbereich komfortabel per Drag&#038;Drop rumgeschubst werden k&#246;nnen &#8211; also so ganz ohne Frickeln im Code des Templates.</p>
<p>Die Standardwidgets sind alle schon im Plugin programmiert. Will man eigene Elemente in die Seitenleiste einbinden, macht man dies &#8211; vorrausgesetzt es ist reiner HTML-Code &#8211;  &#252;ber ein Standardelement in das man einfach das gew&#252;nschte Codest&#252;ck einf&#252;gt. F&#252;r komplexere Elemente (also wenn auch mal PHP gefragt ist) muss man sich so ein Widget selbst programmieren. Keine Sorge, ist aber einfach und innerhalb einer Folge Harald Schmidt hab ich so das Zufallsbild eingebunden. Hilfe bietet dabei eine gute <a href="http://automattic.com/code/widgets/plugins/">Beschreibung auf der Homepage</a> des Plugins und das mitgelieferte Beispielwidget.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2006-06-02_sidebar-geschubse/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Techniken des neuen Web: XML-RPC</title>
		<link>http://www.sbloget.de/2006-02-28_techniken-des-neuen-web-xml-rpc/</link>
		<comments>http://www.sbloget.de/2006-02-28_techniken-des-neuen-web-xml-rpc/#comments</comments>
		<pubDate>Tue, 28 Feb 2006 11:46:42 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Programmieren]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/?p=130</guid>
		<description><![CDATA[Web2.0 ist ja weniger eine konkrete Technik sondern eher ein Konzept, eine Art Brei von Begriffen. Ein Thema, das dabei immer wieder vorkommt ist, dass Webanwendungen Programmierschnittstellen (APIs) anbieten. Diese kann man jetzt nutzen, um Desktop-Programme f&#252;r flickr zu schreiben oder auf die Datenbest&#228;nde von amazon zuzugreifen oder die von ebay oder gar google . [...]]]></description>
			<content:encoded><![CDATA[<p><a title="Linksammlung zum Thema Web2.0" href="http://www.drweb.de/weblog/weblog/?p=457">Web2.0</a> ist ja weniger eine konkrete Technik sondern eher ein Konzept, eine Art <a href="http://de.wikipedia.org/wiki/Bild:Web20_en.png" rel="lightbox[130]">Brei von Begriffen</a>. Ein Thema, das dabei immer wieder vorkommt ist, dass Webanwendungen Programmierschnittstellen (APIs) anbieten. Diese kann man jetzt nutzen, um Desktop-Programme f&#252;r flickr zu schreiben oder auf die Datenbest&#228;nde von amazon zuzugreifen oder die von ebay oder gar google . Ne tolle Sache diese Offenheit der Webseitenanbieter.</p>
<p>Aber irgendwie muss das Javaprogramm auf Klausis Computer es schaffen die Funktion z.b. bei flickr aufzurufen. Ans&#228;tze f&#252;r dieses Problem gibt es viele und man kann sie unter dem Begriff <abbr title="Remote Procedure Call">RPC</abbr> zusammenfassen.</p>
<p>Java <abbr title="Remote Method Invocation">RMI</abbr>, <abbr title="Common Object Request Broker Architecture">CORBA</abbr> und  .Net Remoting trifft man eher in der klassischen Anwedungsentwicklung an. In der Webentwicklung haben sich drei Protokolle herauskristallisiert: <abbr title="Representational State Transfer">REST</abbr>, <abbr title="Simple Object Access Protocol">SOAP</abbr> und mein heutiges Thema <a href="http://de.wikipedia.org/wiki/XML-RPC">XML-<abbr title="Remote Procedure Call">RPC</abbr></a>. Die Theorie ist nicht so schwer. Es werden &#252;ber <abbr title="HyperText Transfer Protocol">HTTP</abbr> Anfragen und Antworten in XML-codiert hin- und hergeschickt. Aber nun auf in die Praxis (mit PHP).<span id="more-130"></span></p>
<p>PHP bietet <a href="http://de2.php.net/manual/de/ref.xmlrpc.php">einige Funktionen zu XML-RPC</a>, aber die <a href="http://scripts.incutio.com/xmlrpc/">XML-RPC Library for PHP</a> macht es wesentlich komfortabler. Au&#223;erdem gab es dazu diese <a href="http://www.phpit.net/article/introduction-xml-rpc-php/1/">sch&#246;ne (englische) Anleitung</a>, in der beispielhaft ein Client und ein Server entwickelt werden.</p>
<p>Als kleinen Test hab ich einen XML-RPC-Server geschrieben, der &#252;ber die Methode <code>demo.sayHello</code> die Welt begr&#252;&#223;t &#8211; sorry, muss einfach sein <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Die zweite Methode (<code>gallery.random</code>) liefert den HTML-Code f&#252;r ein zuf&#228;lliges Bild aus <a href="http://gallery.sbloget.de/">meiner Gallery.</a> Den passenden Client, der die Verwendung zeigt, habe ich ebenfalls im implementiert.</p>
<p>Den Server erreicht man unter: <code>http://spocket.sp.funpic.de/4images/xmlrpc.php</code>. Der Client liegt auf <a href="http://www.sunnybluesky.de/blog/">Sebi</a>&#8216;s Heimserver, weil er zum Einen bei funpic nicht funktioniert und es zum Anderen somit auch richtig <em>remote</em> wird (<a href="http://elpr.ath.cx/test/xml-rpc/">Client aufrufen</a>).</p>
<p>Wen der Quellcode interessiert, kann ihn jetzt herunterladen. Beim direkten Einbinden des Codes in den Beitrag gab es Probleme.<br />
<a href="http://www.sbloget.de/wp-content/xmlrpc.zip">Download aller drei Dateien</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2006-02-28_techniken-des-neuen-web-xml-rpc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Netzwerk@night</title>
		<link>http://www.sbloget.de/2006-02-22_netzwerknight/</link>
		<comments>http://www.sbloget.de/2006-02-22_netzwerknight/#comments</comments>
		<pubDate>Wed, 22 Feb 2006 00:23:58 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Freizeit]]></category>
		<category><![CDATA[Programmieren]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/?p=123</guid>
		<description><![CDATA[Der Hinweis auf diese Veranstaltung von Microsoft kam irgendwann &#252;ber den FH-Email-Verteiler. Das Buffet, eventuelle Werbegeschenke haben omm&#228;s und mich dorthin gelockt.
Das Ziel der Vortragenden war es Licht ins Dunkel von Microsofts Produktwelt zu bringen. Be&#228;ngstigend fand ich es sp&#228;testens, als der gute Mensch erz&#228;hlte, es g&#228;be eine extra Pr&#252;fung, die einem die Kenntnis der [...]]]></description>
			<content:encoded><![CDATA[<p>Der Hinweis auf diese Veranstaltung von Microsoft kam irgendwann &#252;ber den FH-Email-Verteiler. Das Buffet, eventuelle Werbegeschenke haben omm&#228;s und mich dorthin gelockt.</p>
<p>Das Ziel der Vortragenden war es Licht ins Dunkel von Microsofts Produktwelt zu bringen. Be&#228;ngstigend fand ich es sp&#228;testens, als der gute Mensch erz&#228;hlte, es g&#228;be eine extra Pr&#252;fung, die einem die Kenntnis der Microsoftschen Lizenzpolitik bescheinigt. <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Es gab viel Information &#8211; mehr als Buffet <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  &#8211; &#252;ber diverse Softwarepakete, die man erwerben kann. Vom klassischen MSDN-Abo bis hin zum Empower ISV f&#252;r Firmengr&#252;nder, wurde alles erkl&#228;rt. Da ich aber dank MSDN &#8211; Academic Alliance eh fast alle Microsoft-Produkte hier rumliegen hab, war es wenig relevant.</p>
<p>Eindeutig am interessantesten war die Einf&#252;hrung in die M&#246;glichkeiten des MSDN-Portals. Ich z&#228;hl mal kurz auf, was ich mir an Stichpunkte notiert habe:</p>
<ul>
<li>Irgendwo unter Experten entdeckte ich den Namen Ralf Westphal. Bekannt von mittlerweile zwei MS Student Technology Conferences, halte ich ihn f&#252;r einen f&#228;higen Menschen und hab beschlossen <a href="http://weblogs.asp.net/ralfw/default.aspx">sein Blog</a> mal durchzuschauen.</li>
<li>Webcasts schauen &#8211; besonders Ajax <a href="http://www.microsoft.com/germany/msdn/webcasts/library.aspx?id=118768100">Teil1</a> und <a href="http://www.microsoft.com/germany/msdn/webcasts/library.aspx?id=118768103">Teil2</a>. Evtl auch das ein oder andere &#252;ber ASP.Net</li>
<li>Personalisierte MSDN-Seite. Kannte ich nicht, aber halte ich f&#252;r sinnvoll, da die Seiten von MS generell sehr &#252;berladen sind. Mal sehen, was es bringt.</li>
<li>empfohlene RSS-Reader anschauen. Grade abgehandelt, war nichts tolles dabei. Auch keine lustigen &#220;berraschungen, wie Empfehlungen f&#252;r Thunderbird oder RSSOwl. Nein, waren alles in C# implementierte Reader und ich bleib auch weiterhin beim Donnervogel.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2006-02-22_netzwerknight/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ajaxify your 4Images-Gallery</title>
		<link>http://www.sbloget.de/2006-02-20_ajaxify-your-4images-gallery/</link>
		<comments>http://www.sbloget.de/2006-02-20_ajaxify-your-4images-gallery/#comments</comments>
		<pubDate>Mon, 20 Feb 2006 00:28:22 +0000</pubDate>
		<dc:creator>spocket</dc:creator>
				<category><![CDATA[Programmieren]]></category>

		<guid isPermaLink="false">http://www.sbloget.de/?p=120</guid>
		<description><![CDATA[Alle schreiben &#252;ber Ajax, jeder verwendet es und &#252;berhaupt, es ist das Tollste, was die Welt momentan zu bieten hat. Grund genug sich auch diesem Hype anzuschlie&#223;en und sich alles mal genauer und praktischer anzuschauen.
Zur Begriffskl&#228;rung: Es geht nicht um Putzmittel und auch nicht um Fussballer aus Amsterdam. Nein, es geht um Programmieren und Webentwicklung. [...]]]></description>
			<content:encoded><![CDATA[<p>Alle schreiben &#252;ber Ajax, jeder verwendet es und &#252;berhaupt, es ist das Tollste, was die Welt momentan zu bieten hat. Grund genug sich auch diesem Hype anzuschlie&#223;en und sich alles mal genauer und praktischer anzuschauen.</p>
<p>Zur Begriffskl&#228;rung: Es geht nicht um Putzmittel und auch nicht um Fussballer aus Amsterdam. Nein, es geht um Programmieren und Webentwicklung. Bezeichnet wird damit ein Konzept zum Austausch von Daten zwischen Browser und Server.</p>
<p>Normalerweise gibt man Daten auf einer Website ein (z.B. einen Kommentar f&#252;r mein Blog), dieser wird dann an den Server geschickt und der schickt die komplette Internetseite mit den ge&#228;nderten Daten zur&#252;ck - dauert laaaange.</p>
<p><a href="http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29">Ajax</a> (<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>a</strong>nd <strong>X</strong>ML) geht einen anderen Weg. Mit <a href="http://de.wikipedia.org/wiki/Extensible_Markup_Language">JavaScript</a>  werden die Daten an den Server geschickt, dieser schickt dann eine <a href="http://de.wikipedia.org/wiki/Extensible_Markup_Language">XML</a>-Datei mit den neuen Daten zur&#252;ck und dann kommt wieder JavaScript ins Spiel, um diese Daten in die Internetseite einzuf&#252;gen. Asynchron hei&#223;t flapsig gesagt, dass man zwischen Abschicken und Empfangen nicht Kaffee trinken muss, sondern weiter rumklicken darf. Dadurch wird alles viel fl&#252;ssiger, besser, toller zu bedienen und &#252;berhaupt ... lieb haben wir uns sowieso <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Mein Ziel: Die Bilder in <a href="http://gallery.sbloget.de/">meiner Gallery</a> sollten auf diese Weise bewertet werden k&#246;nnen. Wer nicht Informatik studiert, will sich das vermutlich nur anschauen, Bilder bewerten und danach was anderes machen. F&#252;r alle anderen beschreibe ich noch, was ich da genau veranstaltet habe. <span id="more-120"></span></p>
<p>Zuerst braucht man etwas am Server, das die Aktion ausf&#252;hrt. Die Daten die &#252;ber Ajax verschickt werden kommen &#252;ber die bekannten Wege (GET oder POST - es ist ja normale HTTP-Kommunikation) beim Server an. Man kann also ganz normal php programmieren. Die Routinen f&#252;r das speichern der Bewertung hab ich mir aus den Quellen der Gallery zusammengesucht. Einziger Unterschied zu ner normalen Webseite...es wird ein kleines XML-Dokument erzeugt.</p>
<div class="igBar"><span id="lphp-5"><a href="#" onclick="javascript:showPlainTxt('php-5'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-5">
<div class="php">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">...</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><a href="http://www.php.net/header"><span style="color:#000066;">header</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">"Content-type: text/xml; charset=iso-8859-1"</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><a href="http://www.php.net/echo"><span style="color:#000066;">echo</span></a> <span style="color:#FF0000;">'&lt;?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?&gt;'</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><a href="http://www.php.net/echo"><span style="color:#000066;">echo</span></a> <span style="color:#FF0000;">"$msg$rating ($votes $stimmen)"</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Auf der Clientseite ist es etwas komplexer, weil hier die Hauptarbeit geschieht. Aber wenn man erstmal durchblickt, dann geht es ganz gut. Zuerst braucht man ein XMLHttpRequest-Objekt, der Dreh- und Angelpunkt von Ajax.</p>
<div class="igBar"><span id="ljavascript-6"><a href="#" onclick="javascript:showPlainTxt('javascript-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">xmlHttp = <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Das hier ist die beispielhafte Instantiierung f&#252;r Mozilla &#038; Co. Mit Browserweiche macht man die Seite auch fit f&#252;r alle neueren Browser. Den Code daf&#252;r findet man z.b. <a href="http://www.get-the-code.de/code/javascript/ajax/ajax-step1.htm">auf dieser Seite.</a></p>
<p>Ein HTML-Formular wo man einen Wert w&#228;hlen kann und einen Knopf zum Abschicken hat, d&#252;rfte jeder bauen k&#246;nnen. Wenn nicht freut sich <a href="http://de.selfhtml.org/">SelfHTML</a> &#252;ber einen Besuch. Erw&#228;hnenswert ist die erste Zeile:</p>
<div class="igBar"><span id="lhtml-7"><a href="#" onclick="javascript:showPlainTxt('html-7'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-7">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">&lt;form</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"frmrating"</span> <span style="color: #000066;">onsubmit</span>=<span style="color: #ff0000;">"bewertemitajax( aktuelleBildId ); return false;"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p><code>action</code> gibt's nicht, weil wir ja keinen normalen Postback haben wollen. <code>name</code>, dass wir nachher das Formular in Javascript finden und auslesen k&#246;nnen. <code>onsubmit</code> wird ausgef&#252;hrt, wenn man auf Abschicken dr&#252;ckt. Wichtig ist das <code>return false;</code>. Ohne dieses w&#252;rde zus&#228;tzlich ein Postback (den wir ja grade nicht haben wollen) ausgef&#252;hrt werden.Und nun kommen wir zur zentralen Methode, die auch wirklich Ajax macht: <code>bewertemitajax(id)</code>:</form>
<form name="frmrating" onsubmit="bewertemitajax( aktuelleBildId ); return false;">
<div class="igBar"><span id="ljavascript-8"><a href="#" onclick="javascript:showPlainTxt('javascript-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div id="javascript-8">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> bewertemitajax<span style="color: #66cc66;">&#40;</span>id<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> rate = document.<span style="color: #006600;">frmrating</span>.<span style="color: #006600;">rating</span>.<span style="color: #006600;">value</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>xmlHttp<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">xmlHttp.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'POST'</span>, <span style="color: #3366CC;">'ajax.php'</span>, <span style="color: #003366; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">xmlHttp.<span style="color: #006600;">setRequestHeader</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'Content-Type'</span>, <span style="color: #3366CC;">'application/x-www-form-urlencoded'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">xmlHttp.<span style="color: #006600;">onreadystatechange</span> = <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>xmlHttp.<span style="color: #006600;">readyState</span> == <span style="color: #CC0000;color:#800000;">4</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">xmlDoc = xmlHttp.<span style="color: #006600;">responseXML</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> msg = xmlDoc.<span style="color: #006600;">getElementsByTagName</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"message"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">firstChild</span>.<span style="color: #006600;">data</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> votetxt = xmlDoc.<span style="color: #006600;">getElementsByTagName</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"votetext"</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;color:#800000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">firstChild</span>.<span style="color: #006600;">data</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"vote_anzeige"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">firstChild</span>.<span style="color: #006600;">data</span> = votetxt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #006600;">frmrating</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">insertBefore</span><span style="color: #66cc66;">&#40;</span>document.<span style="color: #006600;">createTextNode</span><span style="color: #66cc66;">&#40;</span>msg<span style="color: #66cc66;">&#41;</span>, document.<span style="color: #006600;">frmrating</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #006600;">frmrating</span>.<span style="color: #006600;">submit</span>.<span style="color: #006600;">disabled</span> = <span style="color: #003366; font-weight: bold;">true</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #006600;">frmrating</span>.<span style="color: #006600;">rating</span>.<span style="color: #006600;">disabled</span> = <span style="color: #003366; font-weight: bold;">true</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">xmlHttp.<span style="color: #006600;">send</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'action=rateimage&amp;id='</span>+id+<span style="color: #3366CC;">'&amp;rating='</span>+rate<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></form>
<form name="frmrating" onsubmit="bewertemitajax( aktuelleBildId ); return false;">Ich erkl&#228;re es nur kurz, da es genug Tutorials gibt, die die einzelnen Funktionen beschreiben.</form>
<ul>
<li>
<form name="frmrating" onsubmit="bewertemitajax( aktuelleBildId ); return false;">Es wird eine Verbindung ge&#246;ffnet, wobei man angeben kann wie, wohin und ob asynchron (true) oder sychron (false) &#252;bermittelt wird.</form>
</li>
<li>
<form name="frmrating" onsubmit="bewertemitajax( aktuelleBildId ); return false;">Der Content-Type der zu &#252;bermittelden Daten wird gesetzt.</form>
</li>
<li><code>onreadystatechange</code> gibt eine Funktion an, die aufgerufen wird, wenn der asynchrone Transfer fertig ist. Hier ist es als anonyme Funktion (vielleicht aus Java bekannt) implementiert. Man kann auch einfach einen Funktionsnamen angeben.</li>
</ul>
<ul>
<li>Am Ende wird mit <code>send</code> alles abgeschickt, wobei als Parameter die richtig codierten Daten angegeben werden.</li>
<li>Wenn der Server geantwortet hat, wird die oben erw&#228;hnte anonyme Funktion abgearbeitet. Da der Server in meinem Fall echtes XML liefert, bekommt man mit <code>xmlHttp.responseXML</code> ein Objekt des DOM-Baums, dem man mit den JavaScript-&#252;blichen Funktionen Informationen entlocken kann. Diese Informationen bastelt man dann noch an die richtigen Stellen (am besten man markiert die &#252;ber ID's) im DOM-Baum der Seite und fertig ist man.</li>
</ul>
<p>So, ich hoffe das war jetzt einigerma&#223;en verst&#228;ndlich. Abschlie&#223;end noch ein kleiner &#196;nderungslog: Ich hab eine neue php-Datei erstellt, in der die Funktionalit&#228;t am Server implementiert ist (ajax.php). Der Javascript-Code wurde in die bestehende Template-Datei rate_form.html gepackt. Diese zwei Dateien hab gibt's als <a href="http://www.sbloget.de/wp-content/4images-ajax-bild-bewerten.zip">ZIP-Archiv zum Download</a>. Im Template details.html muss noch ein <code>id="vote_anzeige"</code> dort eingef&#252;gt werden, wo die aktuelle Bewertung eines Bildes erscheinen soll.</p>
<p>Das war's und bitte keine Kommentare zu meinem Programmierstil <img src='http://www.sbloget.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.sbloget.de/2006-02-20_ajaxify-your-4images-gallery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

