<?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>SchmaRs World &#187; Tutorial</title>
	<atom:link href="http://www.schmars-world.de/index.php/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.schmars-world.de</link>
	<description></description>
	<lastBuildDate>Mon, 03 Aug 2009 23:47:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Mal wieder ein Blick auf dev.opera.com &amp; ein neuer Partner</title>
		<link>http://www.schmars-world.de/index.php/blick-auf-dev-opera-com-2008-10-09/</link>
		<comments>http://www.schmars-world.de/index.php/blick-auf-dev-opera-com-2008-10-09/#comments</comments>
		<pubDate>Thu, 09 Oct 2008 17:40:50 +0000</pubDate>
		<dc:creator>SchmaR</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Browser]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Opera]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://www.schmars-world.de/?p=73</guid>
		<description><![CDATA[Es ist schon &#252;ber 2 Monate her das ich das letzte Mal von der "developer – community" des Browserherstellers berichtet habe. Inzwischen scheint das Konzept der Seite gut gefruchtet zu haben, als Opera mit dem Projekt Online ging machte es auf mich den Anschein als wenn es nur eher schleppend in Fahrt kommt, nun Tummeln [...]]]></description>
			<content:encoded><![CDATA[<p>Es ist schon &#252;ber 2 Monate her das ich das letzte Mal von der <em>"developer – community"</em> des Browserherstellers berichtet habe. Inzwischen scheint das Konzept der Seite gut gefruchtet zu haben, als Opera mit dem Projekt Online ging machte es auf mich den Anschein als wenn es nur eher schleppend in Fahrt kommt, nun Tummeln sich jedoch recht <strong>viele Entwickler</strong> auf der Plattform. Das r&#252;hrt sicherlich von den guten und sehr aufschlussreichen Fachartikeln, wie zum Beispiel die Artikelserie <a href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/">„Introduction to The Web Standards Curriculum“</a>.</p>
<p><span id="more-73"></span></p>
<p>Die Artikelserie wurde seit dem ich das letzte Mal <a href="http://www.schmars-world.de/index.php/opera-kurs-auf-standardisiertes-web-2008-07-09/">dar&#252;ber berichtete</a> stark ausgebaut. Inzwischen f&#252;llen <strong>39 Artikel </strong>das Curriculum. In der letzten Zeit wurden viele interessante Artikel zu hauseigenen Technologien von Opera ver&#246;ffentlicht. Darunter fallen zum Beispiel eine Anleitung zur Verwendung von <em>„User JavaScript“</em> oder ein Tutorial zum effizienten <strong>debuggen von Widgets f&#252;r den Opera</strong>.</p>
<p>Der wohl interessanteste aktuelle Artikel d&#252;rfte wohl <strong>„<a href="http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/">Automatic numbering with CSS Counters</a>“ </strong>sein. Dieser bezieht sich auf <strong>CSS 2.1 Allgemein</strong> und zeigt eine sch&#246;ne Methode zum Nummerieren von Elementen (wie z.B. h2-tags) auf. Leider wird diese Methode noch <strong>nicht vom IE unterst&#252;tzt</strong>, aber die Implementierung ist <strong>f&#252;r den IE8 geplant</strong>.</p>
<p><center><a href='http://www.schmars-world.de/wp-content/uploads/2008/10/semantifiziert.jpg' rel='shadowbox[post-73];player=img;'><img src="http://www.schmars-world.de/wp-content/uploads/2008/10/semantifiziert-300x59.jpg" alt="" title="semantifiziert" width="300" height="59" border="0" class="aligncenter size-medium wp-image-75" /></a></center></p>
<p>Soviel zu Opera <img src='http://www.schmars-world.de/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> . Nun noch ein par Worte in eigener Sache. Ich habe in Markus Th&#246;mmes den Betreiber von <a href="http://www.Semantifiziert.de">Semantifiziert.de</a> einen neuen Partner gefunden, und hoffe auf eine gute Zusammenarbeit. Wie der Name schon vermuten l&#228;sst geht es in dem <strong>Blog um xHTML und CSS</strong> wobei das Hauptaugenmerk auf der <em>„semantik“ des xHTML codes</em> liegt.</p>
<img src="http://www.schmars-world.de/?ak_action=api_record_view&id=73&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.schmars-world.de/index.php/blick-auf-dev-opera-com-2008-10-09/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>6 kleine PHP snippets</title>
		<link>http://www.schmars-world.de/index.php/6-php-snippets-2008-09-30/</link>
		<comments>http://www.schmars-world.de/index.php/6-php-snippets-2008-09-30/#comments</comments>
		<pubDate>Tue, 30 Sep 2008 19:21:32 +0000</pubDate>
		<dc:creator>SchmaR</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[scripting/coding]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Webentwicklung]]></category>

		<guid isPermaLink="false">http://www.schmars-world.de/?p=69</guid>
		<description><![CDATA[Heute habe ich mal wieder einen Leckerbissen f&#252;r PHP-Neulinge, der Lead Codesupporter Raph (civa-co.de) von Eurostyle-Webmedia.de hat im Laufe der Zeit eine Reihe von PHP snippets ver&#246;ffentlicht. 6 von diesen snippets werde ich euch kurz in einer Link-Liste vorstellen. Smiley Funktion Die Smiley Funktion dient wie der Name schon vermuten l&#228;sst den ersetzten von Textsmileys [...]]]></description>
			<content:encoded><![CDATA[<p>Heute habe ich mal wieder einen Leckerbissen f&#252;r PHP-Neulinge, der <em>Lead Codesupporter <strong>Raph </strong></em>(<a href="http://www.civa-co.de" target="_blank">civa-co.de</a>) von Eurostyle-Webmedia.de hat im Laufe der Zeit eine Reihe von PHP snippets ver&#246;ffentlicht. 6 von diesen snippets werde ich euch kurz in einer Link-Liste vorstellen.<br />
<span id="more-69"></span></p>
<ol>
<li><a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/php/4546-smiley-funktion/index.html" target="_blank">Smiley Funktion</a><br />
Die Smiley Funktion dient wie der Name schon vermuten l&#228;sst den ersetzten von Textsmileys durch grafische Smileys. Auf den Punkt gebracht ist diese Funktion eine <strong>Anwendungsm&#246;glichkeit </strong>der <strong>PHP-Funktion</strong> <em>str_replace();</em></li>
<li><a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/php/4616-letzte-aktualisierung-einer-datei/index.html" target="_blank">Letzte Aktualisierung einer Datei</a><br />
Hier ein knapper, hin und wieder, n&#252;tzlicher 2 Zeiler. Die Funktion &#252;bernimmt den <strong>Dateinamen </strong>und gibt den<em> Zeitpunkt der letzten Aktualisierung</em> der Datei aus.</li>
<li><a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/php/4642-server-online-offline-anzeige/index.html" target="_blank">Server Online/Offline Anzeige</a><br />
Bei der Server Online/Offline Anzeige handelt es sich um kleines, gut Dokumentiertes <strong>PHP snippet/Tutorial</strong>, welches den <em>Online/Offline Status</em> eines Servers durch das Herstellen einer Socket-Verbindung &#252;berpr&#252;ft.</li>
<li><a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/php/4752-sprache/index.html" target="_blank">Sprache</a><br />
In diesem snippet wird &#252;ber die Servervariable <em>HTTP_ACCEPT_LANGUAGE</em> die bevorzugte Sprache des Users festgestellt. N&#252;tzlich w&#228;re dieser Code zum Beispiel in einem <strong>Templatesystem</strong>.</li>
<li><a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/php/4750-referer/index.html" target="_blank">Referer</a><br />
Auch in diesem Minicode kommt wieder eine Servervariable zum Einsatz, mit welcher festgestellt wird <em>von welchem Script aus das Script aufgerufen wurde.</em></li>
<li><a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/php/4764-vollj%C3%A4hrigkeit/index.html" target="_blank">Vollj&#228;hrigkeit</a><br />
Eine f&#252;r meinen Geschmack etwas kompliziert gehaltene <strong>Funktion zum &#220;berpr&#252;fen der Vollj&#228;hrigkeit </strong>eines Users. Die Funktion nimmt die Variablen: <em>$day, $month und $year</em> entgegen welche Beispielsweise aus einem Formular stammen k&#246;nnten und &#220;berpr&#252;ft durch einige <strong><em>Datumsfunktionen </em></strong>das Angegeben Alter.</li>
</ol>
<img src="http://www.schmars-world.de/?ak_action=api_record_view&id=69&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.schmars-world.de/index.php/6-php-snippets-2008-09-30/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS drop down Navigation</title>
		<link>http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/</link>
		<comments>http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/#comments</comments>
		<pubDate>Wed, 10 Sep 2008 18:28:36 +0000</pubDate>
		<dc:creator>SchmaR</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[scripting/coding]]></category>
		<category><![CDATA[xhtml]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Webentwicklung]]></category>

		<guid isPermaLink="false">http://www.schmars-world.de/?p=65</guid>
		<description><![CDATA[Heute gibt es mal wieder ein kleines Tutorial auf SchmaRs-World.de. Dieses Mal geht es um eine Simple „drop down Navigation“. Die „Inspiration“ zu diesem Tutorial habe ich durch ein Codesnippet zum Thema „Mouseover mit CSS“ von Raph im Eurostyle-Webmedia.de Forum bekommen. Herzlichen Dank an dieser Stelle daf&#252;r . Wir werden die Navigation mit 4 ineinander [...]]]></description>
			<content:encoded><![CDATA[<p>Heute gibt es mal wieder ein kleines Tutorial auf SchmaRs-World.de. Dieses Mal geht es um eine Simple „<em><strong>drop down Navigation</strong></em>“. Die „Inspiration“ zu diesem Tutorial habe ich durch ein Codesnippet zum Thema „<a href="http://board.eurostyle-webmedia.de/wbb/programmierung/coding-showroom/html-und-css/4659-mouseover-mit-css/index.html" target="_blank">Mouseover mit CSS</a>“ von Raph im Eurostyle-Webmedia.de Forum bekommen. Herzlichen Dank an dieser Stelle daf&#252;r <img src='http://www.schmars-world.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<p><span id="more-65"></span></p>
<p>Wir werden die Navigation mit 4 ineinander verschachtelten Listen realisieren. 1 Dieser Listen ist die „Hauptnavigation“ in welche die anderen eingebettet werden. </p>
<p>Dieses Tutorial richtet sich an <strong>Anf&#228;nger/Fortgeschrittene</strong> um es verstehen zu k&#246;nnen sollte man bereits einige <strong>Grundkenntnisse </strong>in <strong>(x)html</strong> und <strong>CSS</strong> haben.</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-1532263722148161";
/* Content */
google_ad_slot = "4237103192";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<p>Hier ist eine <a href="http://www.schmars-world.de/inhalt/tutorials/demos/navi/">Preview unseres Ziels</a></p>
<h3>Das xhtml Grundger&#252;st</h3>
<p>Als erstes Fangen wir mit dem <strong>xhtml- Code</strong> an. Den Anfang bildet wie immer der obligatorische Link zum Stylesheet innerhalb der <em>&lt;head>&lt;/head&gt;</em> tags. </p>
<pre class="html4strict"><ol start="0"><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;style.css&quot;</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">&quot;screen&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">&quot;stylesheet&quot;</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li></ol></pre>
<p>Als n&#228;chstes brauchen wir eine Liste hierf&#252;r eignet sich eine ungeordnete Liste also <em>&lt;ul&gt;&lt;/ul&gt;</em>. Diese liste bekommt nun <strong>3 Eintr&#228;ge f&#252;r die Kategorien</strong> unserer Navigation. Jedem dieser Eintr&#228;ge weisen wir die <em>CSS-Klasse „navi“</em> zu, welche wir sp&#228;ter noch definieren werden. Die <em>list-Items (&lt;li&gt;)</em> bekommen jetzt noch den Inhalt<em> „Kategorie 1-3“</em>. Unser Quellcode sieht nun wie folgt aus.</p>
<pre class="html4strict"><ol start="0"><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul&gt;</span></a></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;navi&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Kategorie 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;navi&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Kategorie 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;navi&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Kategorie 3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li></ol></pre>
<p>Jetzt bekommt <strong>jedes Element</strong> unserer Liste eine weitere Liste als Inhalt, auch hier bietet sich eine wieder eine ungeordnete Liste an. Jeder dieser „<em>Unterlisten</em>“ weisen wir die <em>CSS-Klasse „submenu“</em> zu. Alle Listen mit der „<em>submenu- Klasse</em>“ bekommen jeweils 3 list-tems mit dem Inhalt „<em>link1-3</em>“. </p>
<pre class="html4strict"><ol start="0"><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul&gt;</span></a></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;navi&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Kategorie 1</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;submenu&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;navi&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Kategorie 2</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;submenu&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;navi&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Kategorie 3</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;submenu&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></a></span>link3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li></ol></pre>
<p>So das war es auch schon von der <strong>xhtml </strong>Seite, weiter geht’s mit dem <strong>Cascading Style Sheet</strong>.</p>
<h3>Die style.css</h3>
<p>Der <em><strong>CSS Code</strong></em> ist recht <em>minimalistisch</em>, jedoch sehr <strong>wirkungsvoll</strong>.</p>
<p>Als erstes beginnen wir mit einigen Allgemeinen Eigenschaften.</p>
<pre class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">*,</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">html,</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">body<span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	margin<span style="color: #3333ff;">:<span style="color: #933;">0</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	padding<span style="color: #3333ff;">:<span style="color: #933;">0</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">body<span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #000000; font-weight: bold;">color</span>:<span style="color: #cc00cc;">#<span style="color: #933;">000000</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #000000; font-weight: bold;">background-color</span>:<span style="color: #cc00cc;">#EFEFEF</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	font-family<span style="color: #3333ff;">:Arial</span>, Helvetica, <span style="color: #993333;">sans-serif</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	font-size<span style="color: #3333ff;">:<span style="color: #933;">12px</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<p><em>(Der Code der in der body klasse enthalten ist, dient lediglich dem Layout.)</em></p>
<p>Nun ist die Klasse <em>"Navi"</em> dran. Wir setzen die Eigenschaft <em>display auf inline</em> um aus den (in den meisten F&#228;llen) standardm&#228;&#223;ig als <strong>Block-Elemente</strong> deklarierten <strong>List-items ein Inline-Element</strong> zu formen. Die restlichen Angaben in dieser Klasse sind lediglich f&#252;r das Layout zust&#228;ndig und k&#246;nnen nach belieben gestaltet oder weggelassen werde.</p>
<pre class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.navi</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	display<span style="color: #3333ff;">:inline</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #cc00cc;">#97E1FD</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	font-size<span style="color: #3333ff;">:<span style="color: #933;">16px</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #000000; font-weight: bold;">border</span>:<span style="color: #cc00cc;">#66FFFF</span> <span style="color: #933;">2px</span> <span style="color: #993333;">dotted</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	margin-left<span style="color: #3333ff;">:<span style="color: #933;">100px</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<p>In diesen kleinen aber feinen Schritt definieren wir die Klasse <em>„submenu“</em>. Sie bekommt lediglich die Eigenschaft <strong>„display“</strong> mit dem Wert <strong>„none“</strong> zugewiesen  wodurch alle <em>„submenu-Elemente“</em> nicht angezeigt werden.</p>
<pre class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.submenu</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	display<span style="color: #3333ff;">:none</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<p>Jetzt kommt das <strong>Herzst&#252;ck unserer Navigation</strong>. Die Deklaration des Verhaltens der Klasse <em>„submenu“</em>, wenn sich der Mauszeiger &#252;ber einen <em>„navi“</em> Element befindet. Die Eigenschaft <em>„display“</em> wird auf <em>„inline“</em> gesetzt wodurch die zuvor nicht <strong>sichtbare Liste als inline-Element</strong> dargestellt wird. Das setzen der Eigenschaft <em>„position“</em> auf <em>„absolute“</em> ist neben den eben bei display angewandten verfahren <strong>Elementar</strong>. Das setzen von absolute entfernt die <em>„submenu-Elemente“</em> aus dem normalen Textfluss sodass sie &#252;ber oder unter den anderen Elementen angezeigt werden und nicht das Layout zerst&#246;ren. Mit der Eigenschaft <em><strong>„z-index“</strong></em> wir angeben welches Element &#252;ber welchen liegt. z.B. wird ein Element das einen <em>„z-index“</em> von <strong>1</strong> hat <strong>unter </strong>einem mit einem „z-index“ von <strong>2</strong> dargestellt. Die Eigenschaft „margin-left“ hat in diesem Fall nur Layouttechnische Bedeutung.</p>
<pre class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.navi</span><span style="color: #3333ff;">:hover</span> <span style="color: #6666ff;">.submenu</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	display<span style="color: #3333ff;">:inline</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	position<span style="color: #3333ff;">:absolute</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	z-index<span style="color: #3333ff;">:<span style="color: #933;">2</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	margin-left<span style="color: #3333ff;">:<span style="color: #933;">1px</span></span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<p>Nun ist es fast geschafft jetzt folgt noch eine kleine Definition des Verhaltens von <strong>List-Items</strong> innerhalb eines <em>„submenu“</em> Elements. Hierbei sind die Eigenschaften <em>„display“</em> und <em>„list-style-position“</em> wichtig. Die auf Block gestellte Eigenschaft <em>„display“</em> sorgt daf&#252;r dass die Listenelemente untereinander also als Block Elemente dargestellt werden. l<em>ist-style-position:outside;</em> ist lediglich ein <strong>Fix f&#252;r den IE7</strong> da dieser ansonsten vor den Inhalt der <em>List-Item</em> einen freien platz darstellt.</p>
<pre class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.navi</span><span style="color: #3333ff;">:hover</span> <span style="color: #6666ff;">.submenu</span> li<span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	display<span style="color: #3333ff;">:block</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #000000; font-weight: bold;">background-color</span>:<span style="color: #cc00cc;">#6699FF</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #000000; font-weight: bold;">border</span>:<span style="color: #cc00cc;">#66FFFF</span> <span style="color: #933;">1px</span> <span style="color: #993333;">dotted</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	list-style-position<span style="color: #3333ff;">:outside</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<p>Hier die <a href="http://www.schmars-world.de/inhalt/tutorials/demos/navi/navi.rar">Tutorial Dateien</a>.</p>
<p>So da war es auch schon mit unserem kleinen Turorial ich hoffe es hat euch weitergeholfen und war gut zu verstehen. F&#252;r Kritik positive wie negative bin offen, also lasst eure Meinung in den <strong>Kommentaren </strong>da.</p>
<img src="http://www.schmars-world.de/?ak_action=api_record_view&id=65&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.schmars-world.de/index.php/css-drop-down-navigation-2008-09-10/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Contentslider/Specialbox &#8211; Tutorial</title>
		<link>http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/</link>
		<comments>http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/#comments</comments>
		<pubDate>Mon, 25 Aug 2008 00:50:56 +0000</pubDate>
		<dc:creator>SchmaR</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[scripting/coding]]></category>
		<category><![CDATA[xhtml]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Videotutorial]]></category>
		<category><![CDATA[Webentwicklung]]></category>

		<guid isPermaLink="false">http://www.schmars-world.de/?p=41</guid>
		<description><![CDATA[Da im Eurostyle-webmedia.de Forum in letzter Zeit viele Fragen zu den Thema kursieren wie man eine Specialsbox oder einen Contenslider realisiert, werde ich hier eine einfach gehaltene (mit AJAX realisierte) M&#246;glichkeit vorstellen und in Form eines Tutorials erkl&#228;ren. Als besonderes Schmankerl biete ich das Tutorial Multimedial an, einmal in Textform und einmal als Video. Link [...]]]></description>
			<content:encoded><![CDATA[<p>Da im Eurostyle-webmedia.de Forum in letzter Zeit viele Fragen zu den Thema kursieren wie man eine <em>Specialsbox </em>oder einen <em>Contenslider </em>realisiert, werde ich hier eine einfach gehaltene (mit <strong>AJAX </strong>realisierte) M&#246;glichkeit vorstellen und in Form eines Tutorials erkl&#228;ren. Als besonderes Schmankerl biete ich das <strong>Tutorial </strong>Multimedial an, einmal in <strong>Textform </strong>und einmal als <strong>Video</strong>.<br />
<span id="more-41"></span></p>
<p><center><img src="http://schmars-world.de/inhalt/tutorials/demos/images/Artikel_03.jpg" border="1" alt="Vorschau" /><br /><a href="http://schmars-world.de/inhalt/tutorials/demos/"> Link zum unseren Ziel <img src='http://www.schmars-world.de/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </a><br />
</center></p>
<h3>Am Anfang stand die HTML</h3>
<p>Beginnen wir mit den <strong>xHTML-code</strong> zu den Werde ich nicht viele Worte verlieren, da ich Grundkenntnisse in <strong>xHTML </strong>einfach mal vorrausetze.</p>
<pre class="html4strict"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">&lt;html</span></a> xmlns=<span style="color: #ff0000;">&quot;http://www.w3.org/1999/xhtml&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">&lt;head&gt;</span></a></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">&lt;meta</span></a> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">&quot;text/html; charset=iso-8859-1&quot;</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;style.css&quot;</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">&quot;screen&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">&quot;stylesheet&quot;</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">language</span>=<span style="color: #ff0000;">&quot;javascript&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;functions.js&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">&lt;title&gt;</span></a></span>SchmaRs-World: Contentslider/Specialbox - Tutorial Demo<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">&lt;body</span></a> <span style="color: #000066;">onload</span>=<span style="color: #ff0000;">&quot;sndReq(1)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!-- Contentslider/Specialbox - Tutorial SchmaRs-World.de --&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;wrapper&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;title&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">&lt;h1&gt;</span></a></span>Contentslider/Specialbox - Tutorial <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;contentslider&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">  <span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;">&lt;br</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;clear:both;&quot;</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body&gt;</span></span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/html&gt;</span></span></div></li></ol></pre>
<p>In den Zeilen 5 und 6 werden die Dateien geladen die f&#252;r die Realisierung n&#246;tig sind. Zum einen ist das die "<em>style.css</em>" welche die Angaben zum <strong>Layout </strong>enth&#228;lt. Zum anderen die "<em>functions.js</em>" welche das Herzst&#252;ck unseres Vorhabens darstellt. Das Bodytag ist mit einem <strong>onLoad </strong>Ereignis versehen um beim erstmaligen Laden der Seite die "<em>specialbox</em>" mit Inhalt zu versehen. Soviel nun zu den kleinen <strong>xHTML </strong>Fetzen.</p>
<h3>Javascript meets PHP</h3>
<p>Kommen wir nun zu den Javascriptcode welcher f&#252;r das Nachladen von Inhalten verantwortlich ist. Im Wesentlichen besteht der Code aus 3 Funktionen welche mit dem XMLHttpRequest-Objekt arbeiten bzw. es erzeugen. Alternativ k&#246;nnte man auch eine <strong>AJAX Bibliothek</strong> wie <a href="http://www.prototypejs.org/">Prototype</a> verwenden, ein Beispiel hierf&#252;r erkl&#228;re ich sp&#228;ter.</p>
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// Contentslider/Specialbox - Tutorial SchmaRs-World.de</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// Erzeugen eines HttpRequestObjects samt Browserweiche fuer den IE.</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> genXMLHttpRequestObject<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">   <span style="color: #003366; font-weight: bold;">var</span> resObjekt = <span style="color: #003366; font-weight: bold;">null</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">   <span style="color: #000066; font-weight: bold;">try</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">      resObjekt = <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</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;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">   <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #66cc66;">&#40;</span>Error<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">       <span style="color: #000066; font-weight: bold;">try</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">           resObjekt = <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">&quot;MSXML2.XMLHTTP&quot;</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;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">       <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #66cc66;">&#40;</span>Error<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">           <span style="color: #000066; font-weight: bold;">try</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">               resObjekt = <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #66cc66;">&#40;</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;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">           <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #66cc66;">&#40;</span>Error<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">                <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">&quot;Erzeugung des XMLHttpRequest-Objekts ist nicht m&#246;glich&quot;</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;"><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;"><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;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">   <span style="color: #000066; font-weight: bold;">return</span> resObjekt;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// Senden der Anfrage an den Server.</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> sndReq<span style="color: #66cc66;">&#40;</span>contentnr<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    resObjekt = genXMLHttpRequestObject<span style="color: #66cc66;">&#40;</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    resObjekt.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'get'</span>, <span style="color: #3366CC;">'content.php?content='</span>+contentnr,<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    resObjekt.<span style="color: #006600;">onreadystatechange</span> = handleResponse;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    resObjekt.<span style="color: #006600;">send</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">null</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;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// Warten bis der Datentransfer beendet ist (readystate = 4) und Ausgabe des neuen Contents.</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> handleResponse<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;"><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>resObjekt.<span style="color: #006600;">readyState</span> == <span style="color: #CC0000;">4</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;"><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;">&quot;contentslider&quot;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">innerHTML</span> = resObjekt.<span style="color: #006600;">responseText</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<h4>genXMLHttpRequestObject()</h4>
<p>In der ersten Funktion <em>"genXMLHttpRequestObject()"</em> wird eine <strong>Instanz </strong>von dem XMLHttpRequest-Objekt erzeugt, da die Art der Erzeugung je nach Browser unterschiedlich ist, bedarf es einer Browserweiche. Die Browserweiche ist in diesem Fall in form eines try-catch Konstrukts gel&#246;st. Das <strong>Javascript </strong>Statement try-catch erlaubt es <strong>Code </strong>auszuf&#252;hren und Werte w&#228;hrend der Ausf&#252;hrung zu pr&#252;fen und im gegebenen Fall einen Fehler abzufangen.</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-1532263722148161";
/* Content */
google_ad_slot = "4237103192";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<p>Im ersten try Block wird versucht das <strong>XMLHttpRequest-Objek</strong>t mit einer Funktion f&#252;r den IE zu instanzieren. Sollte dies fehlschlagen wird das Error aufgefangen und es wird versucht eine neuere Version des Objekts f&#252;r den IE zu instanzieren. Wenn dies wiederum fehlschl&#228;gt wird versucht das <strong>Objekt </strong>mit der f&#252;r den Gro&#223;teil der Browser g&#228;ngigsten Methode zu instanzieren. F&#252;r die unwahrscheinliche Annahme das auch dies Fehlschl&#228;gt wird eine Fehlermeldung in Form eines alert()´s ausgegeben.</p>
<h4>sndReq() & handleResponse()</h4>
<p>Die Funtion sndReq ist das eigentlich Herzst&#252;ck des <strong>Javascriptcodes </strong>sie ruft alle notwendigen Funktionen zum Asynchronen Datenaustausch auf. Die Funktion sendet die eigentliche Anfrage an den Server und verarbeitet auch dessen Antwort.</p>
<p>Die erste Zeile instanziert durch den Aufruf von <em>genXMLHttpRequestObject()</em> ein neues <em>XMLHttpRequest-Objekt</em> und speichert es in der Variable <em>resObjekt </em>ab. Die zweite Zeile &#246;ffnet die eigentliche Verbindung zum Server und sendet die Abfrage. Die Methode open des <em>XMLHttpRequest-Objekts</em> &#252;bernimmt in unserem Fall 3 Parameter, die <strong>Methode </strong>(get oder post), Die zu sendenen Daten und das Flag zur bestimmt ob der Datenverkehr <strong>Asynchron </strong>sein soll oder nicht, in unserem Fall true(asynchron). Die dritte Zeile(siehe zus&#228;tzlich die Funktion handleResponse() )  dient dazu sobald der Datenverkehr abgeschlossen ist (resObjekt.readyState == 4) die Daten in das <strong>xHTML Dokument</strong> einzubinden. Dies geschieht mit der Funktion getElementById. Die Funktion &#252;bernimmt einen String der <em>ID </em>des betreffenden Elements innerhalb des <strong>xHTML </strong>codes, f&#252;r unsere Zwecke w&#228;re dies "contentslider". Die Eigenschaft responseText des <em>XMLHttpRequest-Objekt</em> enth&#228;lt die empfangenden Daten.</p>
<p>So Das War’s mit dem Javascriptteil f&#252;rs erste, bei der Variante mit <em>Prototype </em>kommen wir noch einmal kurz auf <strong>Javascript </strong>zu sprechen.</p>
<h4>PHP kurz aber knackig</h4>
<p>Ich finde der <strong>PHP code</strong> erkl&#228;rt sich durch die Kommentare selbst, ich werde zu vorrangeschrittener Stunde die Ausf&#252;hrungen hierzu noch etwas spezifizieren. Was das <strong>Tutorialvideo </strong>betrifft, trifft selbiges zu.</p>
<pre class="php"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">&lt;?php</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">     <span style="color: #808080; font-style: italic;">// Contentslider/Specialbox - Tutorial SchmaRs-World.de</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #808080; font-style: italic;">// Konfiguration</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #0000ff;">$imgpath</span> = <span style="color: #ff0000;">'images/specials'</span>; <span style="color: #808080; font-style: italic;">// Pfad zu den Bildern</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #0000ff;">$type</span> = <span style="color: #ff0000;">'gif'</span>; <span style="color: #808080; font-style: italic;">// Dateityp der Bilder</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #808080; font-style: italic;">// Anwendungscode</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #0000ff;">$toval</span> = <span style="color: #0000ff;">$_REQUEST</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'content'</span><span style="color: #66cc66;">&#93;</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/is_numeric"><span style="color: #000066;">is_numeric</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$toval</span><span style="color: #66cc66;">&#41;</span> &amp;&amp; <a href="http://www.php.net/file_exists"><span style="color: #000066;">file_exists</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;$imgpath/$toval.$type&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #808080; font-style: italic;">// pr&#252;fe ob der &#252;bergebene Wert numerisch ist und eine Datei mit dem Namen existiert</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">        <span style="color: #0000ff;">$img</span> = <span style="color: #0000ff;">$toval</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #b1b100;">else</span> <span style="color: #808080; font-style: italic;">// wenn nicht ist der Name 1</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">        <span style="color: #0000ff;">$img</span> = <span style="color: #cc66cc;">1</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #0000ff;">$next</span> = <span style="color: #0000ff;">$img</span><span style="color: #cc66cc;">+1</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #0000ff;">$back</span> = <span style="color: #0000ff;">$img</span><span style="color: #cc66cc;">-1</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;">&quot;&lt;img src=<span style="color: #000099; font-weight: bold;">\&quot;</span>$imgpath/$img.$type<span style="color: #000099; font-weight: bold;">\&quot;</span> alt=$img /&gt;&lt;br/&gt;&lt;br/&gt;&quot;</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$img</span> &gt; <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span><span style="color: #808080; font-style: italic;">//wenn der &#220;bergebene Wert gr&#246;&#223;er als eins ist werden 2 Navigationspunkte zur&#252;ckgeliefert</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;">&quot;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&lt;div id=<span style="color: #000099; font-weight: bold;">\&quot;</span>buttons<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&lt;input type=<span style="color: #000099; font-weight: bold;">\&quot;</span>button<span style="color: #000099; font-weight: bold;">\&quot;</span> value=<span style="color: #000099; font-weight: bold;">\&quot;</span>&lt;&lt; zur&amp;uuml;ck<span style="color: #000099; font-weight: bold;">\&quot;</span> onclick=<span style="color: #000099; font-weight: bold;">\&quot;</span>sndReq($back)<span style="color: #000099; font-weight: bold;">\&quot;</span> id=<span style="color: #000099; font-weight: bold;">\&quot;</span>btn_left<span style="color: #000099; font-weight: bold;">\&quot;</span> /&gt;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&lt;input type=<span style="color: #000099; font-weight: bold;">\&quot;</span>button<span style="color: #000099; font-weight: bold;">\&quot;</span> value=<span style="color: #000099; font-weight: bold;">\&quot;</span>vorw&amp;auml;rts &gt;&gt;<span style="color: #000099; font-weight: bold;">\&quot;</span> onclick=<span style="color: #000099; font-weight: bold;">\&quot;</span>sndReq($next)<span style="color: #000099; font-weight: bold;">\&quot;</span> id=<span style="color: #000099; font-weight: bold;">\&quot;</span>btn_right<span style="color: #000099; font-weight: bold;">\&quot;</span> /&gt;&lt;/div&gt;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&quot;</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">	<span style="color: #b1b100;">else</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #66cc66;">&#123;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;">&quot;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&lt;div id=<span style="color: #000099; font-weight: bold;">\&quot;</span>buttons<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&lt;input type=<span style="color: #000099; font-weight: bold;">\&quot;</span>button<span style="color: #000099; font-weight: bold;">\&quot;</span> value=<span style="color: #000099; font-weight: bold;">\&quot;</span>vorw&amp;auml;rts &gt;&gt;<span style="color: #000099; font-weight: bold;">\&quot;</span> onclick=<span style="color: #000099; font-weight: bold;">\&quot;</span>sndReq($next)<span style="color: #000099; font-weight: bold;">\&quot;</span> id=<span style="color: #000099; font-weight: bold;">\&quot;</span>btn_right<span style="color: #000099; font-weight: bold;">\&quot;</span> /&gt;&lt;/div&gt;</span></div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #ff0000;">&quot;</span>;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">?&gt;</span></div></li></ol></pre>
<h4>Prototype f&#252;r die ganz fixen</h4>
<p>So hier ist noch die angesprochene alternative M&#246;glichkeit der realisierung mit Prototype. Die Realisierung ist mit der Bibliothek um einiges leichter das sie uns so gut wie alles an Arbeit mit Javascript abnimmt.</p>
<p>functions.js</p>
<pre class="javascript"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div></li><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> sndReq<span style="color: #66cc66;">&#40;</span>contentnr<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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">    <span style="color: #003366; font-weight: bold;">new</span> Ajax.<span style="color: #006600;">Updater</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'contentslider'</span>, <span style="color: #3366CC;">'/content.php?content='</span>+contentnr, <span style="color: #66cc66;">&#123;</span> method: <span style="color: #3366CC;">'get'</span> <span style="color: #66cc66;">&#125;</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;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li></ol></pre>
<p><a href="http://schmars-world.de/inhalt/tutorials/demos/"> Link zum unseren Ziel <img src='http://www.schmars-world.de/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </a></p>
<p><a href="http://www.schmars-world.de/wp-content/uploads/2008/08/pre.rar">Tutorial Dateien</a></p>
<p>Das Video kommt aus Reallife technischen Gr&#252;nden erst Morgen sorry an alle die es schon gerne h&#228;tten.</p>
<p>Soo das wars ersteinmal ich hoffe auf gutes gelingen. Sollte es Ungereimtheiten geben oder sollte ich einen Fehler oder etwas nicht ganz richtig erkl&#228;rt haben, was ich aber eher weniger glaube, oder wenn euch das Tutorial gef&#228;llt lasst einen Kommentar da.</p>
<img src="http://www.schmars-world.de/?ak_action=api_record_view&id=41&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.schmars-world.de/index.php/specialbox-video-tutorial-2008-08-25/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Warum blogge ich?</title>
		<link>http://www.schmars-world.de/index.php/warum-blogge-ich-2008-08-18/</link>
		<comments>http://www.schmars-world.de/index.php/warum-blogge-ich-2008-08-18/#comments</comments>
		<pubDate>Mon, 18 Aug 2008 20:49:57 +0000</pubDate>
		<dc:creator>SchmaR</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Blogparade]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.schmars-world.de/?p=37</guid>
		<description><![CDATA[Als Anlass zu einer Blogparade wurde diese Frage auf seo-news.at gestellt, da mir die Idee die hinter einer Blogparade steht gef&#228;llt werde ich mich hier mal zu den gestellten Fragen &#228;u&#223;ern. Warum bloggt ihr? Um mehr Besucher zu erhalten? Aus Langeweile? Ich Blogge aus zweierlei Gr&#252;nden, entstanden ist die Idee f&#252;r meinen Blog aus langer [...]]]></description>
			<content:encoded><![CDATA[<p>Als Anlass zu einer <em>Blogparade </em>wurde diese Frage auf <a href="http://www.seo-news.at/blog-parade-eure-motivation-zu-bloggen">seo-news.at</a> gestellt, da mir die Idee die hinter einer <a href="http://blog-parade.de/faq/">Blogparade </a> steht gef&#228;llt werde ich mich hier mal zu den gestellten Fragen &#228;u&#223;ern.</p>
<p><span id="more-37"></span></p>
<p><a href="http://www.schmars-world.de/wp-content/uploads/2008/08/blog-parade_324x76.jpg" rel="shadowbox[post-37];player=img;"><img title="blog-parade" src="http://www.schmars-world.de/wp-content/uploads/2008/08/blog-parade_324x76-300x70.jpg" border="0" alt="blog-parade" width="300" height="70" align="middle" /></a></p>
<h3>Warum bloggt ihr? Um mehr Besucher zu erhalten? Aus Langeweile?</h3>
<p>Ich Blogge aus zweierlei Gr&#252;nden, entstanden ist die Idee f&#252;r meinen Blog aus langer Weile. Ich habe bevor ich <em>SchmaRs-World</em> ins Leben gerufen habe, hielt ich <strong>Bloggen f&#252;r Schwachsinn</strong> doch einmal infiziert von den <em>Bloggismus </em>konnte ich nicht mehr aufh&#246;ren. Der <a href="http://www.schmars-world.de/index.php/2008/05/22/">erste Eintrag</a> auf dem Blog passt hierzu auch noch. Ab dem Punkt ist es ganz schnell gegangen einen guten Artikel bei <em>Yigg </em>gelandet und dann war ich mit drauf auf den Zug nach der Jagt nach mehr Besuchern. Soviel zu dem ersten Grund der zweite w&#228;re das ich &#252;ber den Weg meines Blogs den Leuten einiges an wissen vermitteln m&#246;chte haupts&#228;chlich bezogen auf Anf&#228;nger in den Themenfeldern welche mein Blog behandelt. Konkret <strong>PHP, xHTML und CSS</strong> in zuge dessen werde ich demn&#228;chst auch eine<strong> Tutorialserie</strong> starten welche den <em>Werdegang einer Homepage vom .PSD File zu fertigen Seite beschreibt.</em></p>
<h3>Macht es euch Spa&#223;, wenn andere Leute eure Texte lesen bzw. gar kommentieren?</h3>
<p>Diese Frage kann ich nur mit einen einfachen <strong>JA </strong>beantworten.</p>
<img src="http://www.schmars-world.de/?ak_action=api_record_view&id=37&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.schmars-world.de/index.php/warum-blogge-ich-2008-08-18/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>MySQL Backup mit phpmyadmin</title>
		<link>http://www.schmars-world.de/index.php/mysql-backup-phpmyadmin-2008-05-29/</link>
		<comments>http://www.schmars-world.de/index.php/mysql-backup-phpmyadmin-2008-05-29/#comments</comments>
		<pubDate>Thu, 29 May 2008 17:26:41 +0000</pubDate>
		<dc:creator>SchmaR</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[scripting/coding]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://web285.srv12.sysproserver.de/sw/?p=6</guid>
		<description><![CDATA[Da ich Gestern darauf angesprochen wurde wie man ein MySQL Backup mit phpmyadmin erstellt, habe ich mir gedacht, dass ich ein kleines Anf&#228;nger-Tutorial verfassen k&#246;nnte. In diesem Tutorial werde ich nur grob auf die Dinge eingehen, aber soweit das es f&#252;r Niemanden der schon mal phpmyadmin gesehen hat, ein Problem darstellt diese Schritte durchzuf&#252;hren. Dieses [...]]]></description>
			<content:encoded><![CDATA[<p>Da ich Gestern darauf angesprochen wurde wie man ein <a href="http://de.wikipedia.org/wiki/Mysql">MySQL</a> Backup mit <a href="http://de.wikipedia.org/wiki/Phpmyadmin">phpmyadmin</a> erstellt, habe ich mir gedacht, dass ich ein kleines Anf&#228;nger-Tutorial verfassen k&#246;nnte. In diesem Tutorial werde ich nur grob auf die Dinge eingehen, aber soweit das es f&#252;r Niemanden der schon mal <a href="http://de.wikipedia.org/wiki/Phpmyadmin">phpmyadmin</a> gesehen hat, ein Problem darstellt diese Schritte durchzuf&#252;hren. Dieses Tutorial richtet sich an Benutzer von <a href="http://de.wikipedia.org/wiki/Content-Management-System">Content Management Systemen</a> ohne interne Backup Funktion, wie z.b.: <a href="http://de.wikipedia.org/wiki/Webspell">WebSPELL</a>. Hierf&#252;r habe ich eine Datenbank mit 2 Tabellen angelegt.<span id="more-6"></span></p>
<h3>Step1: Datenbank ausw&#228;hlen</h3>
<p><a href="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/1.gif" rel="shadowbox[post-6];player=img;"><img src="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/1.gif" alt="Datenbank mit 2 Tabellen" width="427" height="103" /></a></p>
<p>Auf den Screenshot sieht man die Benutzeroberfl&#228;che von <a href="http://de.wikipedia.org/wiki/Phpmyadmin">phpmyadmin</a>, ich habe die zu Demonstrationzwecken erstellte Datenbank "<em>usr_web285_3</em>" bereits durch einen <strong>Klick</strong> auf derren <strong>Eintrag in dem Listenfeld</strong> links, oben, ausgew&#228;hlt. Bei manchen Webhostern m&#252;ssen Sie die Datenbank nicht mehr ausw&#228;hlen, da dies schon bei ihrem Login Automatisch geschieht. Im gro&#223;en <strong>Hauptfenster</strong> von <a href="http://de.wikipedia.org/wiki/Phpmyadmin">phpmyadmin</a> werden nun einige grundlegende <strong>Daten &#252;ber die Datenbank und deren Aufbau angezeigt</strong>. In unserem Falle 2 Tabellen "<em>foobar</em>" und "<em>Tolle tabelle</em>" mit jeweils 0 Eintr&#228;gen da dies nur eine Testdatenbank ist. Die restlichen, angezeigten Informationen sind f&#252;r dieses Tutorial von keiner gr&#246;&#223;eren Bedeutung und deshalb vernachl&#228;ssige ich diese.</p>
<h3>Step2: Das Exportieren vorbereiten und durchf&#252;hren</h3>
<p><a href="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/2.gif" rel="shadowbox[post-6];player=img;"><img src="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/2.gif" alt="Exportieren" width="428" height="95" /></a></p>
<p>Um ein <a href="http://de.wikipedia.org/wiki/Mysql">MySQL</a> Backup zu erstellen m&#252;ssen sie die Datenbank exportieren. Dazu <strong>klicken</strong> sie auf die <strong>Schaltfl&#228;che <em>"exportieren"</em></strong>. Nun wird im Hauptfenster das Formular zum exportieren einer Datenbank angezeigt. Ich werde die Auswahlm&#246;glichkeiten einzeln erkl&#228;ren. Beginnen wir mit der Auswahl der zu exportierenden Tabellen.</p>
<p><a href="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/3.gif" rel="shadowbox[post-6];player=img;"><img src="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/3.gif" alt="Tabellen Auswahlfeld" /></a></p>
<p class="MsoNormal"><span style="text-decoration: underline;">Markieren sie in diesem Feld die Tabellen welche sie exportieren m&#246;chten</span>, <strong>Standardm&#228;&#223;ig</strong> sind <strong>alle</strong>Tabellen der Datenbank ausgew&#228;hlt. Eine <strong>einzelne Tabelle</strong> k&#246;nnen sie durch <strong>einen Klick</strong> (de)selektieren, um <strong>mehrere Tabellen</strong> zu (de)selektieren <strong>halten sie die linke Maustaste gedr&#252;ckt</strong> und fahren sie &#252;ber die jeweiligen Tabellennamen.</p>
<p><a href="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/5.gif" rel="shadowbox[post-6];player=img;"><br />
<img src="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/5.gif" alt="Kompression" width="488" height="86" /></a></p>
<p>Als n&#228;chstes kommen wir zur Kompression. <strong>W&#228;hlen</strong> sie eine <strong>Kompression</strong> aus wenn es nicht Standartm&#228;&#223;ig so sein sollte und <strong>klicken sie auf OK</strong>. Alternativ k&#246;nnen sie auch keine Kompression verwenden, sollten sie dies tun gibt es eine gute Funktion um kleinere Datenbanken auf einen anderen Server zu portieren. <strong>Deaktivieren</strong> sie die <strong>Checkbox <em>"senden"</em> </strong>dann erhalten sie ein Textfeld mit dem <a href="http://de.wikipedia.org/wiki/Mysql">MySQL</a> dump, dieses k&#246;nnen sie als SQL Befehl in eine andere Datenbank importieren.</p>
<p><a href="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/6.gif" rel="shadowbox[post-6];player=img;"><img src="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/6.gif" alt="SQL dump" width="359" height="517" /></a></p>
<p>Die <strong>restlichen Optionen</strong> k&#246;nnen sie bei <strong>kleineren Projekten</strong>, in ihren <strong>Standarteinstellungen </strong>belassen, sollten sie jedoch <strong>gr&#246;&#223;ere Projekte</strong> planen sollten sie sich <strong>genauer</strong> mit <a href="http://de.wikipedia.org/wiki/Mysql">MySQL</a> <strong>auseinandersetzen</strong>, hierf&#252;r ist das <a href="http://dev.mysql.com/doc/refman/5.1/de/index.html">Manual </a>sehr gut geeignet.<br />
<a href="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/8.gif" rel="shadowbox[post-6];player=img;"><br />
<img src="http://web285.srv12.sysproserver.de/sw/inhalt/tutorials/mysqlbackup_mit_phpmyadmin/8.gif" alt="Andere Optionen" width="438" height="402" /></a></p>
<p>In diesem sinne viel Erfolg und<br />
<strong>Horns Up!</strong></p>
<img src="http://www.schmars-world.de/?ak_action=api_record_view&id=6&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.schmars-world.de/index.php/mysql-backup-phpmyadmin-2008-05-29/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
