<?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>GOLSER.info BLOG &#187; webdevelopment</title>
	<atom:link href="http://www.golser.info/tag/webdevelopment/feed" rel="self" type="application/rss+xml" />
	<link>http://www.golser.info</link>
	<description>News und Stories von August Florian Golser, BSc</description>
	<lastBuildDate>Fri, 21 Oct 2011 15:35:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Google Analytics und die Krux mit dem Datenschutz</title>
		<link>http://www.golser.info/google-analytics-datenschutz-25012011</link>
		<comments>http://www.golser.info/google-analytics-datenschutz-25012011#comments</comments>
		<pubDate>Tue, 25 Jan 2011 18:33:04 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[WebMarketing]]></category>
		<category><![CDATA[codesnippet]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[pics]]></category>
		<category><![CDATA[software]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[webmarketing]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=737</guid>
		<description><![CDATA[Google Analytics ist wohl das beliebteste und mit Abstand meistverwendete Web-Analysewerkzeug. Wird der kostenlose Dienst eingesetzt, dann werden alle erhobenen Nutzerdaten einschließlich der sogenannten IP-Adresse an einen Google-Server in den USA übertragen und dort gespeichert und verarbeitet. Datenschutzrechtlich betrachtet war Google Analytics daher immer schon sehr umstritten. Google Analytics: Karten-Overlay Der Knackpunkt in diesem Zusammenhang [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://de.wikipedia.org/wiki/Google_Analytics" rel="nofollow" class="liwikipedia">Google Analytics</a> ist wohl das beliebteste und mit Abstand meistverwendete Web-Analysewerkzeug. Wird der kostenlose Dienst eingesetzt, dann werden alle erhobenen Nutzerdaten einschließlich der sogenannten <a href="http://de.wikipedia.org/wiki/IP-Adresse" rel="nofollow" class="liwikipedia">IP-Adresse</a> an einen Google-Server in den USA übertragen und dort gespeichert und verarbeitet. Datenschutzrechtlich betrachtet war Google Analytics daher immer schon sehr umstritten.</p>
<p class="nospace"><img src="http://www.golser.info/wp-content/uploads/2011/01/google-analytics.jpg" alt="Google Analytics: Karten-Overlay" width="468" height="292" /></p>
<p class="small">Google Analytics: Karten-Overlay</p>
<p>Der Knackpunkt in diesem Zusammenhang ist die Frage ob es sich bei IP-Adressen um <strong>personenbezogene Daten</strong> handelt oder nicht. Hier fehlt immer noch eine höchstrichterliche Entscheidung, um endgültig Klarheit zu schaffen. Für die Erhebung personenbezogener Daten wäre eine vorherige Einwilligung erforderlich, die man auch noch protokollieren müsste. Dies lässt sich im Web jedoch kaum vernünftig umsetzen, es sei denn man schaltet seinem Webangebot eine spezielle Einstiegsseite vor, die diese Einwilligung einholt und entsprechend protokolliert.<br />
Im Gegensatz zu Deutschland ist man in Österreich vorherrschend der Meinung, dass eine IP-Adresse aus Sicht eines Websitebetreibers keinen Personenbezug ermöglicht.<br />
<span id="more-737"></span></p>
<h3>Informationspflichten</h3>
<p>Wenn man Google Analytics einsetzt, sollte jedoch auf alle Fälle ein entsprechender Hinweis in die Website eingebunden werden. Das verlangen nämlich die <a href="http://www.google.com/intl/de_ALL/analytics/tos.html" rel="nofollow" class="liexternal">Google Analytics Bedingungen</a>:</p>
<blockquote><p>8.1 (&#8230;) Sie sind ferner verpflichtet, an prominenten Stellen Ihrer Websites eine sachgerechte Datenschutzpolicy zu dokumentieren (und sich an diese zu halten). Auch werden Sie alle zumutbaren Anstrengungen unternehmen, die Aufmerksamkeit der Nutzer Ihrer Website auf eine Erklärung zu lenken, die in allen wesentlichen Teilen wie folgt lautet:</p>
<p class="nospace">&#8220;Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. (&#8220;Google&#8221;).<br />
(&#8230;) Durch die Nutzung dieser Website erklären Sie sich mit der Bearbeitung der über Sie erhobenen Daten durch Google in der zuvor beschriebenen Art und Weise und zu dem zuvor benannten Zweck einverstanden.&#8221;</p>
</blockquote>
<p>Google behält sich auch das Recht vor, die Website jederzeit zu durchsuchen, um zu überprüfen, ob eine geeignete Erklärung eingefügt wurde. Ich integriere diesen Hinweis bevorzugt im <strong>Impressum</strong> meiner Webprojekte, da sich ein Link darauf sowieso schon auf jeder einzelnen Seite befinden sollte &#8211; entweder im Header oder im Footer. </p>
<h3>Google Analytics mit verbessertem Datenschutz</h3>
<p>Google bietet mittlerweile eine Möglichkeit die gesammelten IP-Adressen zu verkürzen und somit zu anonymisieren. Realisiert wird das Ganze durch einen Aufruf der Funktion <code>anonymizeIp</code> im Tracking-Code. Hier ein Beispiel anhand der neuen, asynchronen Variante des Tracking-Codes: </p>
<div class="dean_ch"><span class="kw2">var</span> _gaq = _gaq || <span class="br0">&#91;</span><span class="br0">&#93;</span>;<br />
_gaq.<span class="me1">push</span><span class="br0">&#40;</span><span class="br0">&#91;</span><span class="st0">&#8216;_setAccount&#8217;</span>, <span class="st0">&#8216;UA-XXXXXX-X&#8217;</span><span class="br0">&#93;</span><span class="br0">&#41;</span>;<br />
_gaq.<span class="me1">push</span><span class="br0">&#40;</span><span class="br0">&#91;</span><span class="st0">&#8216;_gat._anonymizeIp&#8217;</span><span class="br0">&#93;</span><span class="br0">&#41;</span>; <span class="co1">// IP-Adresse anonymisieren</span><br />
_gaq.<span class="me1">push</span><span class="br0">&#40;</span><span class="br0">&#91;</span><span class="st0">&#8216;_trackPageview&#8217;</span><span class="br0">&#93;</span><span class="br0">&#41;</span>;<br />
<span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> … <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
<p>Natürlich ist die geographische Zuordnung der Benutzer mit dieser Einstellung nicht mehr so genau möglich wie vorher. Falls man diese Funktion nutzt, dann sollte man auch in der Datenschutzerklärung darauf hinweisen:</p>
<blockquote><p class="nospace">Die Tracking-Codes dieser Website verwenden die Funktion &#8220;anonymizeIp&#8221;. Somit werden IP-Adressen nur gekürzt weiterverarbeitet um eine direkte Personenbeziehbarkeit auszuschließen.</p>
</blockquote>
<p>Einem weiteren Kritikpunkt, der mangelnden Widerspruchsmöglichkeit beim Tracking, wird nun auch durch die Bereitstellung eines <a href="http://tools.google.com/dlpage/gaoptout?hl=de" rel="nofollow" class="liexternal">Browser-Plugins</a> Rechnung getragen. Dieses Plugin wird derzeit für den Internet Explorer, Firefox und Chrome angeboten und unterbindet die Übertragung von Nutzerdaten an Google. Der Nutzer muss dabei nur einmal widersprechen und wird dann auf keiner Website mehr vom Google-Analytics-Tracking erfasst.</p>
<p>Ganz Fleißige können auch den Hinweis auf das Plugin noch in die Datenschutzerklärung aufnehmen:</p>
<blockquote><p class="nospace">Durch den Einsatz eines <a href="http://tools.google.com/dlpage/gaoptout?hl=de" rel="nofollow" class="liexternal">Browser-Plugins</a> können Sie der Datenerhebung durch Google dauerhaft widersprechen.</p>
</blockquote>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://tools.google.com/dlpage/gaoptout?hl=de" rel="nofollow" class="liexternal">Google Analytics Opt-out Browser Add-on</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/google-analytics-datenschutz-25012011/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mit Contao Webseiten erfolgreich gestalten</title>
		<link>http://www.golser.info/mit-contao-webseiten-erfolgreich-gestalten-26112010</link>
		<comments>http://www.golser.info/mit-contao-webseiten-erfolgreich-gestalten-26112010#comments</comments>
		<pubDate>Fri, 26 Nov 2010 15:42:40 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[Pixelution]]></category>
		<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[barrierefreiheit]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[software]]></category>
		<category><![CDATA[web2.0]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[webstandards]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=723</guid>
		<description><![CDATA[Im Sommer letzten Jahres begab ich mich auf eine gründliche CMS-Recherche und fand großen Gefallen am Content-Management-System TYPOlight. Ich arbeitete &#8220;Das offizielle TYPOlight-Handbuch&#8221; des TYPOlight-Entwicklers Leo Feyer durch und wurde bestätigt, dass dieses System optimal für meine Anforderungen und Bedürfnisse geeignet ist. TYPOlight-Website für den WSV St. Johann in Tirol Im Juni dieses Jahres wurde [...]]]></description>
			<content:encoded><![CDATA[<p>Im Sommer letzten Jahres begab ich mich auf eine gründliche <a href="http://www.golser.info/open-source-content-management-systeme-06062009" class="liinternal">CMS-Recherche</a> und fand großen Gefallen am Content-Management-System <strong>TYPOlight</strong>.<br />
Ich arbeitete &#8220;Das offizielle TYPOlight-Handbuch&#8221; des TYPOlight-Entwicklers Leo Feyer durch und wurde bestätigt, dass dieses System optimal für meine Anforderungen und Bedürfnisse geeignet ist.</p>
<p class="nospace"><img src="http://www.golser.info/wp-content/uploads/2010/11/wsv-stjohann.jpg" alt="TYPOlight-Website für den WSV St. Johann in Tirol" width="468" height="363" /></p>
<p class="small">TYPOlight-Website für den WSV St. Johann in Tirol</p>
<p>Im Juni dieses Jahres wurde TYPOlight in <a href="http://de.wikipedia.org/wiki/Contao" rel="nofollow" class="liwikipedia">Contao</a> umbenannt.<br />
Der Entwickler Leo Feyer begründete diesen Schritt damit, dass TYPOlight oft fälschlicherweise mit dem CMS TYPO3 in Verbindung gebracht wurde und dass der Zusatz &#8220;light&#8221; dahingehend missverstanden wurde, dass das CMS nur für kleine Projekte geeignet sei.<br />
<span id="more-723"></span></p>
<p class="left"><img src="http://www.golser.info/wp-content/uploads/2010/11/contao-buch.jpg" width="128" height="129" alt="Mit Contao Webseiten erfolgreich gestalten | &copy; Addison-Wesley" title="Mit Contao Webseiten erfolgreich gestalten | &copy; Addison-Wesley" /></p>
<p>Mit der Namensänderung auf Contao wurden auch einige Neuerungen eingeführt &#8211; z.B. der <em>Theme-Manager</em> oder Möglichkeiten der Anbindung an soziale Netzwerke wie Facebook und Twitter. Um meine Kenntnisse des Systems zu vertiefen und auch wieder neue Kniffe und Techniken kennenzulernen, habe ich mir kürzlich das Buch <a href="http://www.amazon.de/Contao-Webseiten-erfolgreich-gestalten-Beispielprojekte/dp/3827328926" rel="nofollow" class="liexternal">Mit Contao Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte</a> bei Amazon bestellt. Der Autor, Thomas Weitzel, ist Diplom-Designer und setzt in seinem Buch andere Schwerpunkte als der Contao-Entwickler Leo Feyer: </p>
<blockquote><p class="nospace">In diesem Buch führt Sie Diplom-Designer und Contao-Team-Mitglied Thomas Weitzel durch alle Schritte des Entwurfs und Designs einer Contao-basierten Website.<br />
Sie lernen zunächst Techniken und Tools für Planung und Entwicklung kennen, arbeiten sich in das CSS-Framework von Contao ein und erfahren dann anhand zweier Praxisprojekte detailliert, wie Sie eine Website von A bis Z mit Contao gestalten und umsetzen. Checklisten und Tipps &#038; Tricks leisten wertvolle Hilfe bei der erfolgreichen Veröffentlichung der Website.</p>
</blockquote>
<p>Ich freue mich schon auf die Lektüre!</p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.think-contao.de" rel="nofollow" class="liexternal">think.Contao!</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/mit-contao-webseiten-erfolgreich-gestalten-26112010/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Top-Immoplattform für Österreich und München</title>
		<link>http://www.golser.info/immobilien-plattform-oesterreich-muenchen-17092010</link>
		<comments>http://www.golser.info/immobilien-plattform-oesterreich-muenchen-17092010#comments</comments>
		<pubDate>Fri, 17 Sep 2010 09:05:56 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[Pixelution]]></category>
		<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=673</guid>
		<description><![CDATA[Im Auftrag meines langjährigen Kunden Streifzug Media aus Kitzbühel realisierte ich eine Top-Immobilienplattform mit Fokus Österreich und München. Erreichbar unter www.immobilienstreifzug.com bietet die Plattform Top-Maklern und Bauträgern die optimale Möglichkeit, ihre Premium-Immobilien in Österreich bzw. in und um München auf hochwertigem und ansprechendem Niveau zu präsentieren, um somit gezielt eine kaufkräftige Klientel anzusprechen. Die Premium-Plattform [...]]]></description>
			<content:encoded><![CDATA[<p>Im Auftrag meines langjährigen Kunden <em>Streifzug Media</em> aus Kitzbühel realisierte ich eine Top-Immobilienplattform mit Fokus Österreich und München. Erreichbar unter <a href="http://www.immobilienstreifzug.com" class="liexternal">www.immobilienstreifzug.com</a> bietet die Plattform Top-Maklern und Bauträgern die optimale Möglichkeit, ihre Premium-Immobilien in Österreich bzw. in und um München auf hochwertigem und ansprechendem Niveau zu präsentieren, um somit gezielt eine kaufkräftige Klientel anzusprechen.<br />
Die <strong>Premium-Plattform</strong> ist komplett zweisprachig (deutsch und englisch) ausgeführt und stellt nur Immobilien mit einem Mindestkaufpreis von EUR&nbsp;500.000 bzw. einem Mindestmietpreis von EUR&nbsp;2.500 vor.  </p>
<p><img src="http://www.golser.info/wp-content/uploads/2010/09/immoplattform01.jpg" alt="Die unabhängige Plattform für Premium-Immobilien in Österreich und München" width="468" height="400" /><br />
<span id="more-673"></span></p>
<p>Die Website beruht auf der im Mai 2009 online gestellten <a href="http://www.golser.info/pixelution-realisiert-luxus-immobilien-plattform-04052009" class="liinternal">Plattform für die internationale Luxusimmobilie</a>, die aus organisatorischen Gründen in dieser Form nicht mehr weitergeführt wird.<br />
Im Zuge der Überarbeitung wurde die bestehende Plattform noch in vielen Bereichen optimiert und mit neuen Funktionen ausgestattet.<br />
Die Wartungsoberfläche wurde auch komplett aufpoliert und generell die Benutzerfreundlichkeit der Website &#8211; im Frontend und Backend &#8211; erhöht.</p>
<p class="nospace"><img src="http://www.golser.info/wp-content/uploads/2010/09/immoplattform02.jpg" alt="Immobilienstreifzug.com CMS" width="468" height="219" /></p>
<p class="small">Wartungsoberfläche (CMS)</p>
<h3>Anforderungen und Features der Plattform</h3>
<ul>
<li>Einfache Bedienung (Zielgruppe 50+)</li>
<li>Exklusives Screendesign (klare Struktur, Emotionen)</li>
<li>Komplette Administrierbarkeit der Immobilien über eine individuell programmierte Wartungsoberfläche</li>
<li>Eigene Wartungs-Logins für jeden Makler</li>
<li>Übersichtliche und intuitiv bedienbare Suchfunktion</li>
<li>Ansprechende Präsentation der Immobilienbilder mittels Slideshows und Bildergalerien (Thumbnails mit Vergrößerungsfunktion)</li>
<li>Möglichkeit Immobilienfilme einzubetten</li>
<li>Favoritenliste zur Verwaltung der persönlichen &#8220;Favoriten&#8221;<br />
(Versenden per E-Mail möglich)</li>
<li>Auto-Vervollständigungsfunktion für Eingabefelder</li>
<li>Zahlreiche Maßnahmen zur Qualitätssicherung (z.B. Musterbeispiele für die Eingabefelder, Validierung aller Eingaben, Auswahl der besten Bildausschnitte per Positionsrahmen, usw.)</li>
<li>Automatische Benachrichtigungen per E-Mail (z.B. &#8220;Objekt freigeschaltet&#8221;, &#8220;Ihre Objekte auf immobilienstreifzug.com&#8221; an alle Makler am Monatsende, &#8220;Verdacht auf Doppelungen&#8221;, usw.)</li>
<li>Zweisprachig (deutsch, englisch)</li>
</ul>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.immobilienstreifzug.com" class="liexternal">Die Premium-Immobilienplattform für Österreich und München</a></li>
<li><a href="http://www.pixelution.at" class="liexternal">PIXELUTION.AT Multimedia Agentur</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/immobilien-plattform-oesterreich-muenchen-17092010/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Objektorientiertes CSS (OOCSS)</title>
		<link>http://www.golser.info/objektorientiertes-css-oocss-26012010</link>
		<comments>http://www.golser.info/objektorientiertes-css-oocss-26012010#comments</comments>
		<pubDate>Tue, 26 Jan 2010 18:34:23 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[codesnippet]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=581</guid>
		<description><![CDATA[Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines [...]]]></description>
			<content:encoded><![CDATA[<p>Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines &#8220;Kunstwerk&#8221; dar, das mit vertretbarem Zeitaufwand nur vom ursprünglichen Entwickler komplett durchschaut wird.<br />
Diese Tatsache macht es auch sehr schwierig im Team an den Styles einer Website zu arbeiten. Auch eine Wiederverwendung von CSS-Dokumenten für andere Projekte ist nur eingeschränkt möglich.</p>
<h3>Die Lösung: OOCSS</h3>
<p>Die Webentwicklerin <a href="http://www.stubbornella.org" class="liexternal">Nicole Sullivan</a> versucht mit ihrer <strong>Objektorientiertes CSS</strong> (OOCSS) genannten Methode einen Lösungsansatz zu finden.<br />
OOCSS versucht die Idee der Objektorientierung auf CSS zu übertragen. Objektorientiertes CSS ist dabei keine neue Technik, sondern vereint eine Reihe von Regeln für die Gestaltung von CSS-Dateien. Grundgerüst von OOCSS ist eine von Nicole Sullivan auf ihrer <a href="http://wiki.github.com/stubbornella/oocss" class="liexternal">GitHub Projektseite</a> bereitgestellte Code-Bibliothek im Alpha-Stadium. Um das CSS-Framework einsetzen zu können, müssen wie schon erwähnt einige Regeln beachtet werden.<br />
Die zwei wichtigsten:</p>
<ul>
<li>
<p><strong>Trenne Container und Inhalt</strong><br />
Gemäß Sullivans Terminologie bildet ein simpler HTML-Tag (z.B. <code>&lt;h1&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;li&gt;</code>, &#8230;) mit zugehörigem CSS einen <strong>Inhalt</strong>. Komplexere Strukturen bestehend aus mehreren <code>&lt;div&gt;</code>-Elementen werden als <strong>Container</strong> bezeichnet. Ordnet man diesen Containern jetzt noch über mehrere CSS-Klassen Layout und Design (<em>Skins</em>) zu, dann entstehen Sullivans Objekte.</p>
</li>
<li>
<p class="nospace"><strong>Trenne Struktur und Design</strong><br />
Nicole Sullivan bezieht sich hier auf das CSS von Containern und Inhalten. Durch die Verwendung unterschiedlicher Klassen für Layout- und Design-Elemente wird die <strong>Wiederverwendbarkeit von Objekten</strong> in anderen Projekten ermöglicht.<br />
<span id="more-581"></span>
</p>
</li>
</ul>
<p>Generell sollten CSS-Deklarationen vermieden werden, die HTML-Elemente in Abhängigkeit eines Containers bringen. Also keine derartigen Konstrukte:</p>
<div class="dean_ch"><span class="re0">#sidebar</span> h1 <span class="br0">&#123;</span><span class="br0">&#125;</span> <span class="re0">#content</span> ul <span class="br0">&#123;</span><span class="br0">&#125;</span> div<span class="re1">.news</span> p <span class="br0">&#123;</span><span class="br0">&#125;</span></div>
<p>Alle CSS-Anpassungen werden ausschließlich über Klassen vorgenommen, die einander erweitern. Beispiel:</p>
<div class="dean_ch">
<span class="re1">.box</span> <span class="br0">&#123;</span> <span class="kw1">background</span>: <span class="re0">#fff</span>; <span class="kw1">border</span>: <span class="re3">3px</span> <span class="kw2">solid</span> <span class="re0">#<span class="nu0">036</span></span>; <span class="kw1">padding</span>: <span class="re3">5px</span>; <span class="br0">&#125;</span><br />
<span class="re1">.graybox</span> <span class="br0">&#123;</span> <span class="coMULTI">/* extends: .box; */</span><br />
&nbsp; <span class="kw1">background</span>: <span class="re0">#ccc</span>;<br />
<span class="br0">&#125;</span></div>
<p>HTML:</p>
<div class="dean_ch"><span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;box graybox&quot;</span><span class="kw2">&gt;</span></span> &#8230; <span class="sc2"><span class="kw2">&lt;/div&gt;</span></span></div>
<p>Weiters empfiehlt Sullivan bevorzugt Klassen statt IDs zu verwenden und Selektoren ohne Tags zu schreiben (<code>.box</code> statt <code>div.box</code>).<br />
Grund: Einsatzmöglichkeiten erweitern, Redundanzen im Code minimieren.</p>
<h3>OOCSS in der Praxis</h3>
<p>Sullivans <a href="http://wiki.github.com/stubbornella/oocss" class="liexternal">CSS-Framework</a> besteht derzeit aus 12 CSS-Dateien, von denen drei nur zum Debugging verwendet werden. Einen guten Ausgangspunkt für eigene Entwicklungen bildet die Datei <strong>template.html</strong>, die das Grundlayout umsetzt und als Basis für alle weiteren Seiten dient.<br />
Die Breite der linken und rechten Spalte wird beispielsweise durch Erweiterung des Spalten-Objektes gesetzt:</p>
<div class="dean_ch"><span class="re1">.myColumn</span> <span class="br0">&#123;</span> <span class="kw1">width</span>: <span class="re3">400px</span>; <span class="br0">&#125;</span></div>
<p>HTML:</p>
<div class="dean_ch"><span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;leftCol myColumn&quot;</span><span class="kw2">&gt;</span></span> &#8230; <span class="sc2"><span class="kw2">&lt;/div&gt;</span></span></div>
<blockquote><p class="nospace">Don’t think of this as overwriting my classes, but rather <strong>extending</strong> the objects provided by the framework. I give you columns, headings, and other objects. You can extend those objects by adding another class that only specifies the differences between my base object and your implementation of the same. Mixins may be a good analogy here.</p>
</blockquote>
<p>Wichtig dabei ist, dass Sullivans CSS-Deklarationen unberührt bleiben!<br />
Die Klasse <code>.leftCol</code> im Beispiel sollte also keinen eigenen CSS-Code erhalten. Schon allein deshalb nicht um schnell und unkompliziert ein Update des Frameworks durchführen zu können.</p>
<p>Mit <strong>Grids</strong> können die Seiten weiter in kleinere Bereiche unterteilt werden. Beispiel:</p>
<div class="dean_ch">
<span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;line&quot;</span><span class="kw2">&gt;</span></span><br />
&nbsp; <span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;unit size2of3&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;h3&gt;</span></span>2/3<span class="sc2"><span class="kw2">&lt;/h3&gt;</span></span><span class="sc2"><span class="kw2">&lt;/div&gt;</span></span><br />
&nbsp; <span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;unit size1of3 lastUnit&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;h3&gt;</span></span>1/3<span class="sc2"><span class="kw2">&lt;/h3&gt;</span></span><span class="sc2"><span class="kw2">&lt;/div&gt;</span></span><br />
<span class="sc2"><span class="kw2">&lt;/div&gt;</span></span></div>
<p>Sobald das Raster einer Seite aufgebaut ist, können Inhaltsobjekte wie Überschriften, Absätze, Listen, usw. der Datei <strong>content.css</strong> hinzugefügt werden. Die Datei konzentriert sich hauptsächlich auf die Definition von Ausrichtungen, Abständen, Listendarstellungen, Schriftgrößen, Schriftfarben und dem Verhalten von Links.</p>
<h3>Module und Skins</h3>
<p>Besonders interessant ist die Datei <strong>module.html</strong>, die einen Überblick über die mit dem Framework realisierbaren Blockstrukturen gibt. Sullivans HTML-Grundgerüst für alle Arten von Boxen schaut wie folgt aus:</p>
<div class="dean_ch">
<span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;mod&quot;</span><span class="kw2">&gt;</span></span> <br />
&nbsp; <span class="sc2"><span class="kw2">&lt;b</span> <span class="kw3">class</span>=<span class="st0">&quot;top&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;b</span> <span class="kw3">class</span>=<span class="st0">&quot;tl&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;/b&gt;</span></span><span class="sc2"><span class="kw2">&lt;b</span> <span class="kw3">class</span>=<span class="st0">&quot;tr&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;/b&gt;</span></span><span class="sc2"><span class="kw2">&lt;/b&gt;</span></span> <br />
&nbsp; <span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;inner&quot;</span><span class="kw2">&gt;</span></span><br />
&nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;hd&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;h3&gt;</span></span>mod<span class="sc2"><span class="kw2">&lt;/h3&gt;</span></span><span class="sc2"><span class="kw2">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;bd&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;p&gt;</span></span>Mod ist der Basis-Container.<span class="sc2"><span class="kw2">&lt;/p&gt;</span></span><span class="sc2"><span class="kw2">&lt;/div&gt;</span></span><br />
&nbsp; <span class="sc2"><span class="kw2">&lt;/div&gt;</span></span><br />
&nbsp; <span class="sc2"><span class="kw2">&lt;b</span> <span class="kw3">class</span>=<span class="st0">&quot;bottom&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;b</span> <span class="kw3">class</span>=<span class="st0">&quot;bl&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;/b&gt;</span></span><span class="sc2"><span class="kw2">&lt;b</span> <span class="kw3">class</span>=<span class="st0">&quot;br&quot;</span><span class="kw2">&gt;</span></span><span class="sc2"><span class="kw2">&lt;/b&gt;</span></span><span class="sc2"><span class="kw2">&lt;/b&gt;</span></span> <br />
<span class="sc2"><span class="kw2">&lt;/div&gt;</span></span></div>
<p>Durch Kombination dieses Containers mit drei verschiedenen CSS-Klassen entstehen drei <strong>OOCSS-Module</strong>. Für jeden der drei Container gibt es wiederum eigene Skins, die den Rand und die Hintergrundbilder der Boxen definieren. Eine vollständige Komponente besteht aus bis zu vier Klassen, von denen die letzten beiden für Skin und Hintergrund sorgen.</p>
<div class="dean_ch"><span class="sc2"><span class="kw2">&lt;div</span> <span class="kw3">class</span>=<span class="st0">&quot;mod complex flow foo&quot;</span><span class="kw2">&gt;</span></span> &#8230; <span class="sc2"><span class="kw2">&lt;/div&gt;</span></span></div>
<p>würde unsere Box folgendermaßen darstellen:</p>
<p><img src="/wp-content/uploads/2010/01/oocss-box.gif" alt="OOCSS Box" width="468" height="74" /></p>
<p>Mit Sullivans Grundformen lassen sich bereits über 200 verschiedene Boxen generieren. Das CSS-Framework bietet auch schon einige Styles für Tabs und &#8220;Sprechblasen&#8221;.</p>
<h3>Mein Fazit</h3>
<p>OOCSS ist prädestiniert für die gemeinsame Erstellung von CSS-Dateien im Team und fördert die Wiederverwendbarkeit und Strukturierung von CSS-Dokumenten. OOCSS hat auch viele Kritiker, da die Regel &#8220;Trenne Container und Inhalt&#8221; in direktem Widerspruch zum CSS-Grundkonzept der Kaskade steht &#8211; jedoch wird dieses 1994 entwickelte Konzept heutigen Entwicklungsprozessen überhaupt noch gerecht?<br />
Ich finde Sullivans Ansätze jedenfalls sehr interessant und kann mir gut vorstellen ihr Framework bei einem umfangreicheren Teamprojekt einzusetzen.</p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn" class="liexternal">Object Oriented CSS video on YDN</a><br />
Eine der ausführlichsten Quellen zu OOCSS.</li>
<li><a href="http://wiki.github.com/stubbornella/oocss" class="liexternal">OOCSS GitHub Projektseite</a></li>
<li><a href="http://groups.google.com/group/object-oriented-css" class="liexternal">OOCSS Google Group</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/objektorientiertes-css-oocss-26012010/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OpenSource CM-Systeme: Die Qual der Wahl</title>
		<link>http://www.golser.info/open-source-content-management-systeme-06062009</link>
		<comments>http://www.golser.info/open-source-content-management-systeme-06062009#comments</comments>
		<pubDate>Sat, 06 Jun 2009 20:59:32 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[barrierefreiheit]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[software]]></category>
		<category><![CDATA[web2.0]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[webstandards]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=542</guid>
		<description><![CDATA[Persönliches Interesse und auch einige aktuelle Anforderungen bewegten mich kürzlich zu einer Recherche bezüglich der gängigen OpenSource Content-Management-Systeme (CMS). Hintergründe &#038; Status Quo Meine ersten Erfahrungen mit CM-Systemen sammelte ich im 2.&#160;Semester an der FH Hagenberg. Im Rahmen eines Semesterprojektes setzte ich gemeinsam mit einem Studienkollegen ein auf PostNuke basierendes Portal für unseren Jahrgang MTD02 [...]]]></description>
			<content:encoded><![CDATA[<p>Persönliches Interesse und auch einige aktuelle Anforderungen bewegten mich kürzlich zu einer Recherche bezüglich der gängigen OpenSource <a href="http://de.wikipedia.org/wiki/Content-Management-System" rel="nofollow" class="liwikipedia">Content-Management-Systeme</a> (CMS). </p>
<h3>Hintergründe &#038; Status Quo</h3>
<p>Meine ersten Erfahrungen mit CM-Systemen sammelte ich im 2.&nbsp;Semester an der <a href="/studium-in-hagenberg-arbeitsproben-02022005" class="liinternal">FH Hagenberg</a>. Im Rahmen eines Semesterprojektes setzte ich gemeinsam mit einem Studienkollegen ein auf <a href="http://de.wikipedia.org/wiki/PostNuke" rel="nofollow" class="liwikipedia">PostNuke</a> basierendes Portal für unseren Jahrgang MTD02 um.<br />
Im 4. Semester wurde ich dann im Rahmen der Lehrveranstaltung <em>Document Content Management</em> ziemlich ausführlich mit <a href="http://de.wikipedia.org/wiki/TYPO3" rel="nofollow" class="liwikipedia">TYPO3</a> konfrontiert. Es gab auch Klausuren, bei denen das Verfassen von TypoScript-Code auf Papier abverlangt wurde. <img src='http://www.golser.info/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /><br />
Ich hatte jedoch damals keine Anforderung für ein so &#8220;mächtiges&#8221; CMS und meine anfängliche Euphorie ist dann auch schnell wieder verflogen.</p>
<p>Richtig interessant wurde das Thema Content-Management-Systeme dann wieder im Rahmen meiner Selbständigkeit mit <a href="http://www.pixelution.at" class="liexternal">PIXELUTION.AT</a>.<br />
Da griff ich meistens zu unserem selbst programmierten, einfach gestrickten <a href="/wp-content/uploads/2009/06/pxcms01.jpg" rel="lightbox[cms]" title="PXcms v2.5 Screenshot" class="liinternal">PXcms</a> basierend auf <a href="http://de.wikipedia.org/wiki/TinyMCE" rel="nofollow" class="liwikipedia">TinyMCE</a>. Dieses System erlaubt jedoch nur die textuelle WYSIWYG-Bearbeitung eines Bereiches pro Seite und das Einfügen von Bildern und PDF-Dateien über eine einfache Multimedia-Datenbank.<br />
Das ein oder andere Projekt habe ich auch mit <a href="http://de.wikipedia.org/wiki/Joomla" rel="nofollow" class="liwikipedia">Joomla</a> umgesetzt, wobei mich hier die Benutzeroberfläche mit den ganzen Modulen und Verschachtelungen nie richtig überzeugte.<br />
<span id="more-542"></span></p>
<h3>Die Suche beginnt</h3>
<p>Mein zukünftiges CM-System sollte vor allem ein hübsches, intuitiv bedienbares Benutzerinterface aufweisen, suchmaschinenfreundlich sein, validen XHTML-Code produzieren und <a href="http://de.wikipedia.org/wiki/MooTools" rel="nofollow" class="liwikipedia">MooTools</a> als JavaScript-Framework verwenden &#8211; und natürlich nicht zu &#8220;aufgebläht&#8221; sein.<br />
Nach gründlicher Recherche und einigem Feedback über Twitter und Facebook habe ich mich für das CMS <a href="http://de.wikipedia.org/wiki/Contao" rel="nofollow" class="liwikipedia">Contao</a> entschieden, das alle meine Kriterien erfüllt und auf mich von Anfang an einen guten Eindruck machte.</p>
<h3>Contao OpenSource CMS</h3>
<p>Die (für mich) wichtigsten Features im Überblick:</p>
<ul>
<li>Ansprechendes,  benutzerfreundliches Backend</li>
<li>Barrierefreie XHTML-Strict-Ausgabe</li>
<li>Verwendet Web2.0-Technologien auf MooTools-Basis</li>
<li>Browserübergreifendes CSS-Framework</li>
<li>Generiert (automatisch) suchmaschinenfreundliche URLs</li>
<li>Unterstützt Mehrsprachigkeit</li>
<li>Frontend basiert zu 100% auf Templates</li>
<li>Live Update Service</li>
<li>Gute Dokumentation</li>
</ul>
<h3>Update: Aus TYPOlight wurde Contao</h3>
<p>Mit der Veröffentlichung der Vorabversion 2.9. RC1 am 6. Juni 2010 wurde TYPOlight in Contao umbenannt. Der Entwickler Leo Feyer begründete diesen Schritt damit, dass TYPOlight oft fälschlicherweise mit dem CMS TYPO3 in Verbindung gebracht wurde und dass der Zusatz &#8220;light&#8221; dahingehend missverstanden wurde, dass das CMS nur für kleine Projekte geeignet sei.</p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.contao.org" class="liexternal">Contao OpenSource CMS</a></li>
<li><a href="http://www.wsv-stjohann.at" class="liexternal">Wassersportverein St. Johann in Tirol</a><br />
Mein erstes TYPOlight-Projekt.</li>
</ul>
<h3>PIXELUTION.AT PXcms Demos</h3>
<div class="download snap_noshots">
<p><a href="http://www.pixelution.at/cmsdemo/loeffelweis/termine.swf" class="swf" title="PXcms v2.5 Demo 1" rel="lightbox[cms];width=999;height=700">PXcms Demo 1</a></p>
<p><a href="http://www.pixelution.at/cmsdemo/loeffelweis2/login.swf" class="swf" title="PXcms v2.5 Demo 2" rel="lightbox[cms];width=991;height=715">PXcms Demo 2</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/open-source-content-management-systeme-06062009/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>PIXELUTION.AT realisiert Top-Immobilienplattform</title>
		<link>http://www.golser.info/pixelution-realisiert-luxus-immobilien-plattform-04052009</link>
		<comments>http://www.golser.info/pixelution-realisiert-luxus-immobilien-plattform-04052009#comments</comments>
		<pubDate>Mon, 04 May 2009 11:57:20 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[Pixelution]]></category>
		<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=529</guid>
		<description><![CDATA[Der Immobilien Streifzug Exklusiv wird DAS österreichische Magazin für die internationale Luxusimmobilie. Zweisprachig (deutsch und englisch) bietet es eine ideale Plattform für die Crème de la Crème der international operierenden Immobilienmakler. Selbstverständlich gehört zu einem Magazin dieser Klasse auch eine professionelle Online-Präsenz und so wurde nun nach einigen Wochen harter Arbeit und vielen Detailanpassungen &#8220;die [...]]]></description>
			<content:encoded><![CDATA[<p>Der <em>Immobilien Streifzug Exklusiv</em> wird DAS österreichische Magazin für die internationale Luxusimmobilie. Zweisprachig (deutsch und englisch) bietet es eine ideale Plattform für die Crème de la Crème der international operierenden Immobilienmakler.<br />
Selbstverständlich gehört zu einem Magazin dieser Klasse auch eine professionelle Online-Präsenz und so wurde nun nach einigen Wochen harter Arbeit und vielen Detailanpassungen &#8220;die neue Plattform für die internationale Luxusimmobilie&#8221; der Öffentlichkeit zugänglich gemacht.<br />
<del datetime="2010-09-17T09:16:15+00:00">Ab sofort erreichbar unter www.streifzug-exklusiv.com!</del></p>
<p><img src="/wp-content/uploads/2009/05/streifzug-exklusiv01.jpg" alt="Die neue Plattform für die internationale Luxusimmobilie" width="468" height="400" /><br />
<span id="more-529"></span></p>
<p>Konzept, Design, clientseitige Programmierung (HTML, CSS, JS/Ajax), Suchmaschinenoptimierung und Projektmanagement stammen von mir; die Wartungsoberfläche, Datenbank und Datenbankanbindung wurden von einem meiner Partner umgesetzt.</p>
<h3>Anforderungen und Features der Plattform</h3>
<ul>
<li>Einfache Bedienung (Zielgruppe 50+)</li>
<li>Exklusives Screendesign (klare Struktur, Emotionen)</li>
<li>Komplette Administrierbarkeit der Immobilien über eine individuell programmierte Wartungsoberfläche</li>
<li>Eigene Wartungs-Logins für jeden Makler</li>
<li>Übersichtliche und intuitiv bedienbare Suchfunktion</li>
<li>Ansprechende Präsentation der Immobilienbilder mittels Slideshows und Bildergalerien (Thumbnails mit Vergrößerungsfunktion)</li>
<li>Möglichkeit Immobilienfilme einzubetten</li>
<li>Favoritenliste zur Verwaltung der persönlichen &#8220;Favoriten&#8221;<br />
(Versenden per E-Mail möglich)</li>
<li>Auto-Vervollständigungsfunktion für Eingabefelder</li>
<li>Berücksichtigung unterschiedlicher Währungen</li>
<li>Zweisprachig (deutsch, englisch)</li>
</ul>
<h3>Feedback der Makler (Auszug)</h3>
<blockquote><p class="nospace">Herzlichen Glückwunsch zum erfolgreichen Start Ihrer Internetseite! Sehr schönes Design und eine wirklich ansprechende Präsentation. Sehr gelungen.</p>
</blockquote>
<blockquote><p class="nospace">Gratulation! Der Gesamteindruck ist sehr professionell und anspruchsvoll, gefällt mir durchgehend sehr gut.</p>
</blockquote>
<blockquote><p class="nospace">Die Seite sieht sehr schick aus, gefällt uns sehr gut die Aufmachung!</p>
</blockquote>
<blockquote><p class="nospace">Ich habe mir die Seite bereits angesehen und finde sie super!</p>
</blockquote>
<h3>Update 17.09.2010</h3>
<p>Aus organisatorischen Gründen wird das Projekt in dieser Form nicht mehr weitergeführt. Der Nachfolger: <a href="http://www.golser.info/immobilien-plattform-oesterreich-muenchen-17092010" class="liinternal">Die unabhängige Plattform für Premium-Immobilien in Österreich und München</a>.</p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.pixelution.at" class="liexternal">PIXELUTION.AT Multimedia Agentur</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/pixelution-realisiert-luxus-immobilien-plattform-04052009/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PIXELUTION.AT realisiert KNORR Microsite</title>
		<link>http://www.golser.info/pixelution-realisiert-knorr-microsite-25022009</link>
		<comments>http://www.golser.info/pixelution-realisiert-knorr-microsite-25022009#comments</comments>
		<pubDate>Wed, 25 Feb 2009 13:53:36 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[Pixelution]]></category>
		<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.golser.info/?p=508</guid>
		<description><![CDATA[In Kooperation mit meinem Partner D-SE7EN aus Wien war ich für die technische Umsetzung der Microsite für die KNORR Kinder-Suppen verantwortlich. Die Website informierte über die Produkte &#8211; Dino Suppe, Glückskäfer Suppe und Piraten Suppe &#8211; und präsentierte einige Rezeptideen. Weiters fand man auch ein Gewinnspiel und einen Downloadbereich mit Malvorlage, Geburtstagseinladung und Desktop-Hintergrundbildern auf [...]]]></description>
			<content:encoded><![CDATA[<p>In Kooperation mit meinem Partner <em>D-SE7EN</em> aus Wien war ich für die technische Umsetzung der Microsite für die <strong>KNORR Kinder-Suppen</strong> verantwortlich. Die Website informierte über die Produkte &#8211; Dino Suppe, Glückskäfer Suppe und Piraten Suppe &#8211; und präsentierte einige Rezeptideen. Weiters fand man auch ein Gewinnspiel und einen Downloadbereich mit Malvorlage, Geburtstagseinladung und Desktop-Hintergrundbildern auf der Microsite.</p>
<ul class="slides">
<li class="thumbnail"><a href="/wp-content/uploads/2009/02/knorr01.jpg" rel="lightbox[knorr]" title="KNORR Kinder-Suppen" class="liimagelink"><img src="/wp-content/uploads/2009/02/knorr01-thumb.jpg" width="128" height="96" alt="KNORR Kinder-Suppen" /></a></li>
<li class="thumbnail"><a href="/wp-content/uploads/2009/02/knorr02.jpg" rel="lightbox[knorr]" title="KNORR-Memo-Spiel: Startscreen mit fliegendem Glückskäfer" class="liimagelink"><img src="/wp-content/uploads/2009/02/knorr02-thumb.jpg" width="128" height="96" alt="KNORR-Memo-Spiel: Startscreen mit fliegendem Glückskäfer" /></a></li>
<li class="thumbnail"><a href="/wp-content/uploads/2009/02/knorr03.jpg" rel="lightbox[knorr]" title="KNORR-Memo-Spiel: Paare finden" class="liimagelink"><img src="/wp-content/uploads/2009/02/knorr03-thumb.jpg" width="128" height="96" alt="KNORR-Memo-Spiel: Paare finden" /></a></li>
</ul>
<p>Besonderheit: Das vom Spielehersteller Ravensburger als Brettspiel produzierte &#8220;KNORR-Memo-Spiel&#8221; wurde von uns etwas abgespeckt (12&nbsp;Paare) als Flash-Variante umgesetzt.<br />
<span id="more-508"></span></p>
<h3>Kinder-Suppen Microsite v2</h3>
<p>Die Kidssuppen-Promotion war ein unglaublicher Erfolg und daher gab es auch eine zweite Auflage der Microsite. Statt der Glückskäfer Suppe ging die Elefanten Suppe ins Rennen. Dementsprechend war der &#8220;Aufhänger&#8221; dann ein animierter Elefant, der sowohl im Flash-Intro als auch im &#8220;Bravo-Screen&#8221; des &#8220;KNORR-Puzzle-Spiels&#8221; auftauchte. Auch das Gewinnspiel, die Downloads und die Rezepte wurden erneuert.</p>
<ul class="slides">
<li class="thumbnail"><a href="/wp-content/uploads/2009/02/knorr04.jpg" rel="lightbox[knorrv2]" title="Microsite v2: Flash-Intro" class="liimagelink"><img src="/wp-content/uploads/2009/02/knorr04-thumb.jpg" width="128" height="96" alt="Microsite v2: Flash-Intro" /></a></li>
<li class="thumbnail"><a href="/wp-content/uploads/2009/02/knorr05.jpg" rel="lightbox[knorrv2]" title="Microsite v2: KNORR-Puzzle-Spiel" class="liimagelink"><img src="/wp-content/uploads/2009/02/knorr05-thumb.jpg" width="128" height="96" alt="Microsite v2: KNORR-Puzzle-Spiel" /></a></li>
<li class="thumbnail"><a href="/wp-content/uploads/2009/02/knorr06.jpg" rel="lightbox[knorrv2]" title="Microsite v2: KNORR-Puzzle-Spiel Bravo-Screen" class="liimagelink"><img src="/wp-content/uploads/2009/02/knorr06-thumb.jpg" width="128" height="96" alt="Microsite v2: KNORR-Puzzle-Spiel Bravo-Screen" /></a></li>
</ul>
<h3>KNORR Kaiser Teller Microsite</h3>
<p>Bei dieser Flash-Microsite war ich für die Umsetzung des Online-Gewinnspiels verantwortlich. Features: Internet-Gewinncode, Formular-Validierung per <a href="http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29" rel="nofollow" class="liwikipedia">Ajax</a>, Spamschutz, Web2.0-Effekte, passwortgeschützter Login-Bereich zur Einsicht aller Teilnehmer.</p>
<p><img src="/wp-content/uploads/2009/02/knorr-kaiserteller-suppen.jpg" alt="KNORR Kaiser Teller Suppen" width="468" height="323" /></p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.pixelution.at" class="liexternal">PIXELUTION.AT Multimedia Agentur</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/pixelution-realisiert-knorr-microsite-25022009/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Happy CSS Naked Day!</title>
		<link>http://www.golser.info/css-naked-day-09042008</link>
		<comments>http://www.golser.info/css-naked-day-09042008#comments</comments>
		<pubDate>Wed, 09 Apr 2008 21:23:30 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[barrierefreiheit]]></category>
		<category><![CDATA[codesnippet]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[webstandards]]></category>

		<guid isPermaLink="false">http://www.golser.info/css-naked-day-2008-09042008</guid>
		<description><![CDATA[CSS Naked Day ist ein Projekt zur Förderung der Webstandards. Unter der Oberfläche einer Website zeigt sich die wahre Qualität: korrekte Verwendung von (X)HTML, semantisches Markup, gut gegliederter, hierarchischer Aufbau und natürlich hochwertige Inhalte. Am jährlich stattfindenden CSS Naked Day zeigen sich alle teilnehmenden Websites &#8220;nackt&#8221;, entblößen ihren &#60;body&#62; und zeigen was dahinter steckt. Gut [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://naked.dustindiaz.com" class="liexternal">CSS Naked Day</a> ist ein Projekt zur Förderung der Webstandards.<br />
Unter der Oberfläche einer Website zeigt sich die wahre Qualität: korrekte Verwendung von <a href="http://de.wikipedia.org/wiki/Extensible_Hypertext_Markup_Language" rel="nofollow" class="liwikipedia">(X)HTML</a>, semantisches Markup, gut gegliederter, hierarchischer Aufbau und natürlich hochwertige Inhalte.<br />
Am jährlich stattfindenden <strong>CSS Naked Day</strong> zeigen sich alle teilnehmenden Websites &#8220;nackt&#8221;, entblößen ihren <code>&lt;body&gt;</code> und zeigen was dahinter steckt. <img src='http://www.golser.info/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /><br />
Gut strukturierte Websites machen auch bei deaktiviertem &#8220;Design&#8221; (siehe <a href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets" rel="nofollow" class="liwikipedia">Cascading Style Sheets</a>) ein gutes Bild und sind ohne Einschränkung les- und navigierbar.<br />
<span id="more-380"></span></p>
<h3>Warum am 9. April?</h3>
<p>Tja, dafür gibt es scheinbar ein paar ganz plausible Gründe:</p>
<ul>
<li>Der Tag sollte immer auf einen Dienstag, Mittwoch oder Donnerstag fallen (am meisten Traffic)</li>
<li>Möglichst Anfang April, jedoch nie am 1. April (internationaler Scherz- und Streichetag)</li>
<li>Es sollte ausreichend Zeit für die Ankündigung sein</li>
</ul>
<h3>Nackte Tatsachen &#8211; automatisiert</h3>
<p>Damit man den <em>CSS Naked Day</em> nicht versäumt, gibt es eine sehr praktische PHP-Funktion um das Deaktivieren bzw. nicht laden der Styles zu automatisieren:</p>
<div class="dean_ch"><span class="kw2">&lt;?php</span><br />
<span class="kw2">function</span> is_naked_day<span class="br0">&#40;</span><span class="re0">$d</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; <span class="re0">$start</span> = <span class="kw3">date</span><span class="br0">&#40;</span><span class="st0">&quot;U&quot;</span>, <span class="kw3">mktime</span><span class="br0">&#40;</span><span class="nu0">-12</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">04</span>, <span class="re0">$d</span>, <span class="kw3">date</span><span class="br0">&#40;</span><span class="st0">&quot;Y&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
&nbsp; <span class="re0">$end</span> = <span class="kw3">date</span><span class="br0">&#40;</span><span class="st0">&quot;U&quot;</span>, <span class="kw3">mktime</span><span class="br0">&#40;</span><span class="nu0">36</span>, <span class="nu0">0</span>, <span class="nu0">0</span>, <span class="nu0">04</span>, <span class="re0">$d</span>, <span class="kw3">date</span><span class="br0">&#40;</span><span class="st0">&quot;Y&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;<br />
&nbsp; <span class="re0">$z</span> = <span class="kw3">date</span><span class="br0">&#40;</span><span class="st0">&quot;Z&quot;</span><span class="br0">&#41;</span> * <span class="nu0">-1</span>;<br />
&nbsp; <span class="re0">$now</span> = <span class="kw3">time</span><span class="br0">&#40;</span><span class="br0">&#41;</span> + <span class="re0">$z</span>; <br />
&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="re0">$now</span> &gt;= <span class="re0">$start</span> &amp;&amp; <span class="re0">$now</span> &lt;= <span class="re0">$end</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">true</span>;<br />
&nbsp; <span class="br0">&#125;</span><br />
&nbsp; <span class="kw1">return</span> <span class="kw2">false</span>;<br />
<span class="br0">&#125;</span><br />
<span class="kw2">?&gt;</span></div>
<p>Man übergibt der Funktion den entsprechenden Monatstag (z.B. &#8220;9&#8243; für 2009) und bekommt am <em>CSS Naked Day</em> <code>true</code> als Rückgabewert. Ist dies der Fall, muss das Einbinden der CSS-Files verhindert werden.<br />
Hier eine mögliche Anwendung:</p>
<div class="dean_ch">&lt;head&gt;<br />
&#8230;<br />
<span class="kw2">&lt;?php</span> <span class="kw1">if</span> <span class="br0">&#40;</span>!is_naked_day<span class="br0">&#40;</span><span class="nu0">9</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="kw2">?&gt;</span><br />
&nbsp; &lt;link rel=<span class="st0">&quot;stylesheet&quot;</span> type=<span class="st0">&quot;text/css&quot;</span> href=<span class="st0">&quot;layout.css&quot;</span> /&gt;<br />
&nbsp; &lt;link rel=<span class="st0">&quot;stylesheet&quot;</span> type=<span class="st0">&quot;text/css&quot;</span> href=<span class="st0">&quot;default.css&quot;</span> /&gt;<br />
<span class="kw2">&lt;?php</span> <span class="br0">&#125;</span> <span class="kw2">?&gt;</span><br />
&#8230;<br />
&lt;/head&gt;</div>
<h3>Hilfe, ich bin immer noch nackt!</h3>
<p>Das oben gelistete Script setzt die &#8220;starke&#8221; Variante um. Dabei werden alle Zeitzonen berücksichtigt und man ist dann insgesamt 48 Stunden ohne Styles. Die &#8220;schwache&#8221; Version inkludiert nur die eigene Zeitzone, daher 24 Stunden ohne CSS.</p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://naked.dustindiaz.com" class="liexternal">CSS Naked Day Website</a></li>
<li><a href="http://www.ajalapus.com/downloads/css-naked-day" class="liexternal">WordPress Naked Day Plugin</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/css-naked-day-09042008/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Qualitätskriterien für Webseiten</title>
		<link>http://www.golser.info/qualitaetskriterien-fuer-webseiten-09122007</link>
		<comments>http://www.golser.info/qualitaetskriterien-fuer-webseiten-09122007#comments</comments>
		<pubDate>Sun, 09 Dec 2007 15:57:48 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[barrierefreiheit]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[webstandards]]></category>

		<guid isPermaLink="false">http://www.golser.info/qualitaetskriterien-fuer-webseiten-09122007</guid>
		<description><![CDATA[Nachfolgend möchte ich einen kleinen Überblick über ein paar sehr wichtige Qualitätskriterien für Webseiten geben. Alle Kriterien können sehr schnell überprüft werden &#8211; für einige Tests wird jedoch die Web Developer Erweiterung für Mozilla Firefox benötigt. Die Erweiterung steht nach der Installation als eigenständige Toolbar im Browser zur Verfügung und kann jederzeit wieder deaktiviert werden. [...]]]></description>
			<content:encoded><![CDATA[<p>Nachfolgend möchte ich einen kleinen Überblick über ein paar sehr wichtige Qualitätskriterien für Webseiten geben. Alle Kriterien können sehr schnell überprüft werden &#8211; für einige Tests wird jedoch die <a href="http://chrispederick.com/work/web-developer" class="liexternal">Web Developer Erweiterung</a> für <a href="http://www.mozilla-europe.org/de/firefox" class="liexternal">Mozilla Firefox</a> benötigt. Die Erweiterung steht nach der Installation als eigenständige Toolbar im Browser zur Verfügung und kann jederzeit wieder deaktiviert werden.<br />
<span id="more-317"></span></p>
<ul>
<li>
<p><strong>Valider (X)HTML-Quellcode</strong><br />
Ein sehr wichtiges Qualitätskriterium, das auch viel über die &#8220;Sorgfalt&#8221; des jeweiligen Programmierers aussagt.<br />
<span class="grey bold">web developer:</span> <span class="highlight">Tools > Validate HTML</span> <span class="small grey">[Strg+Umschalt+H]</span><br />
<span class="grey bold">alternativ:</span> manuell über <a href="http://validator.w3.org" class="liexternal">validator.w3.org</a></p>
</li>
<li>
<p><strong>Trennung von Struktur/Inhalt und Design</strong><br />
Suchmaschinen sehen kein ansprechendes Design, sondern bevorzugen einen einfachen, gut strukturierten Aufbau und bewerten die Anzahl der Schlüsselwörter in Relation zum Codeumfang.<br />
Vereinfacht gesagt sollten bei einer gut programmierten Seite bei deaktiviertem &#8220;Design&#8221; nur noch die Strukturelemente wie hierarchisch gegliederte Überschriften, Absätze, Aufzählungslisten, Links, Hervorhebungen und einige Content-Bilder übrigbleiben.<br />
<span class="grey bold">web developer:</span> <span class="highlight">CSS > Disable Styles > All Styles</span> <span class="small grey">[Strg+Umschalt+S]</span><br />
Prinzipiell gilt, je einfacher die Darstellung, desto besser!</p>
</li>
<li>
<p><strong>Logische Struktur und Überschriften</strong><br />
Bei deaktiviertem <a href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets" rel="nofollow" class="liwikipedia">CSS</a> sollte auch gut die Struktur der Website erkennbar sein. Besonders wichtig ist hierbei die Verwendung von gut strukturierten, logisch gesetzten und aussagekräftigen Überschriften (<code>&lt;h1&gt;</code> &#8211; <code>&lt;h6&gt;</code>). Überschriften sind auch für die Suchmaschinenoptimierung von zentraler Bedeutung.<br />
<span class="grey bold">web developer:</span> <span class="highlight">Outline > Outline Headings</span></p>
</li>
<li>
<p><strong>Druckfreundlichkeit</strong><br />
Häufig entspricht es dem Wunsch der Besucher, Seiteninhalte auszudrucken. In vielen Fällen werden dabei überflüssige Inhalte (wie z.B. die Navigationselemente) mitgedruckt und der eigentliche Seiteninhalt wird am Rand abgeschnitten &#8211; ärgerlich! Gut strukturierte Webseiten machen auch im Ausdruck ein gutes Bild und ein speziell für den Ausdruck optimiertes <em>Stylesheet</em> ist mit geringem Aufwand realisierbar.<br />
<span class="grey bold">check:</span> <span class="highlight">Datei > Druckvorschau</span></p>
</li>
<li>
<p><strong>Vermeidung von Frames</strong><br />
Die Verwendung von <a href="http://de.wikipedia.org/wiki/Frame_(HTML)" rel="nofollow" class="liwikipedia">Frames</a> bricht etliche Konventionen, an die sich der Webbenützer gewöhnt hat, wie z.B. die Möglichkeit, eine spezifische Website als Favorit zu speichern oder die direkte URL einem Freund zu mailen.<br />
Auch aus Sicht der Suchmaschinenoptimierung sind Frames sehr bedenklich.<br />
<span class="grey bold">web developer:</span> <span class="highlight">Outline > Outline Frames</span></p>
</li>
<li>
<p><strong>Keine Tabellen als Layoutelement</strong><br />
Tabellen sind dazu gedacht Informationen tabellarisch darzustellen. Vielfach werden sie jedoch &#8220;zweckentfremdet&#8221; und für die Positionierung und Ausrichtung von Elementen missbraucht.<br />
Solche tabellen-basierten Layouts bergen jedoch gegenüber reinen CSS-Layouts viele Nachteile. Mit einem CSS-Layout wird nicht nur die Zugänglichkeit (<em>Accessibility</em>) sondern auch die Performance verbessert. Eine Umstellung von einem Tabellen-Layout auf ein CSS-Layout kann durchaus bis zu 70% weniger Quellcode bedeuten, was sich sehr positiv auf die Ladezeiten auswirkt.<br />
<span class="grey bold">web developer:</span> <span class="highlight">Outline > Outline Tables > Table Cells</span></p>
</li>
<li>
<p><strong>Optimierte Seitentitel</strong><br />
Ein sehr wichtiges Qualitätsmerkmal ist auch die Verwendung von präzisen und aussagekräftigen Seitentiteln (<code>&lt;title&gt;</code>-Tag). Titel sollten einen Schluss auf den Textinhalt zulassen und dem Websitebesucher helfen die gesuchte Information einfach aufzufinden. Nach Nielsen (Usability-Guru) sollte ein Titel nicht länger als 60 Zeichen sein. Seitentitel wie z.B. &#8220;Willkommen auf unserer Homepage&#8221; oder &#8220;untitled document&#8221; sind absolut nutzlos.<br />
<span class="grey bold">check:</span> <span class="highlight">Titelzeile des Browserfensters</span></p>
</li>
<li>
<p class="nospace"><strong>Funktionalität bei deaktiviertem JavaScript</strong><br />
Unter Umständen haben einige Besucher z.B. aus Sicherheitsgründen die Ausführung von <a href="http://de.wikipedia.org/wiki/JavaScript">JavaScript</a> deaktiviert.<br />
Eine qualitativ hochwertige Seite sollte so angelegt sein, dass diese auch mit deaktiviertem JavaScript noch korrekt dargestellt wird und navigierbar ist.<br />
<span class="grey bold">web developer:</span> <span class="highlight">Disable > Disable JavaScript > All JavaScript</span></p>
</li>
</ul>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="http://www.qualidator.com" class="liexternal">Qualidator Website Test</a><br />
Der Qualidator überprüft die ersten 5 Seiten einer Website mit ca. 60-70 automatischen Tests auf die Kernpunkte der Bereiche Usability (Benutzungsfreundlichkeit), Accessibility (Zugänglichkeit), SEO (Suchmaschinenoptimierung) und Quality (technische Qualität).</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/qualitaetskriterien-fuer-webseiten-09122007/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Finden und gefunden werden</title>
		<link>http://www.golser.info/suchmaschinenoptimierung-08122007</link>
		<comments>http://www.golser.info/suchmaschinenoptimierung-08122007#comments</comments>
		<pubDate>Sat, 08 Dec 2007 19:41:41 +0000</pubDate>
		<dc:creator>Gusti</dc:creator>
				<category><![CDATA[WebDevelopment]]></category>
		<category><![CDATA[WebMarketing]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[suchmaschinen]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[webmarketing]]></category>

		<guid isPermaLink="false">http://www.golser.info/finden-und-gefunden-werden-08122007</guid>
		<description><![CDATA[In letzter Zeit erreichen mich vermehrt Anfragen bezüglich Suchmaschinenoptimierung von bereits bestehenden Webseiten. Meine Website wird bei Google nicht gefunden und Sie wurden mir empfohlen. Was kann man machen und was kostet das? Eine solche Frage kann man sicher nicht pauschal beantworten, denn das Ausmaß der nötigen Optimierungsarbeiten und die damit verbundenen Kosten sind von [...]]]></description>
			<content:encoded><![CDATA[<p>In letzter Zeit erreichen mich vermehrt Anfragen bezüglich Suchmaschinenoptimierung von bereits bestehenden Webseiten.</p>
<blockquote><p class="nospace">Meine Website wird bei Google nicht gefunden und Sie wurden mir empfohlen. Was kann man machen und was kostet das?</p>
</blockquote>
<p>Eine solche Frage kann man sicher nicht pauschal beantworten, denn das Ausmaß der nötigen Optimierungsarbeiten und die damit verbundenen Kosten sind von einigen wesentlichen Faktoren abhängig:<br />
<span id="more-316"></span></p>
<ul>
<li>
<p>Wie groß ist die <strong>Konkurrenz</strong> für die zu optimierenden Keyword-Phrasen?<br />
Ein gutes (erstes) Indiz hierfür ist die Anzahl der Treffer bei der Suche nach der jeweiligen Keyword-Phrase.</p>
</li>
<li>
<p>Welche <strong>Qualität</strong> hinsichtlich der technischen Umsetzung weist die Website auf?</p>
</li>
<li>
<p class="nospace">Wie hoch ist der <strong>PageRank</strong> der Seiten?<br />
Der (Google) PageRank spiegelt die Meinung von <a href="http://www.google.at" class="liexternal">Google</a> bezüglich der Relevanz von Webseiten auf einer Skala von 0 bis 10 wider.<br />
Eine Anzeige des PageRanks erhält man beispielsweise mit der <a href="http://toolbar.google.com/intl/de/" class="liexternal">Google Toolbar</a></p>
</li>
</ul>
<p>Fakt ist, dass eine professionelle Programmierung und eine gute Strukturierung der Inhalte wesentliche Voraussetzungen für eine erfolgbringende Suchmaschinenoptimierung sind. Auch bei Webseiten zählen die &#8220;inneren Werte&#8221; &#8211; eine optisch ansprechende Website sagt noch gar nichts über die Qualität der technischen Umsetzung aus. Was im Hintergrund &#8211; versteckt für die Besucher &#8211; abläuft, ist entscheidend. </p>
<p>Daher prüfe ich zunächst Ihren Webauftritt auf Herz und Nieren und teile Ihnen dann mit inwieweit eine Suchmaschinenoptimierung Ihrer bestehenden Website für Ihre &#8220;Wunsch-Keywords&#8221; Sinn macht und erfolgsversprechend ist.<br />
In manchen Fällen ist sogar ein suchmaschinenoptimierter Neuaufbau sinnvoller und auch verhältnismäßig kostengünstiger als eine Umstrukturierung und Optimierung aller bestehenden Seiten.</p>
<h3>Weiterführende Links</h3>
<ul>
<li><a href="/qualitaetskriterien-fuer-webseiten-09122007" class="liinternal">Qualitätskriterien für Webseiten</a><br />
Wie kann ich selbst die Qualität meiner Website beurteilen?</li>
<li><a href="/suchmaschinenoptimierung-seo-12052005" class="liinternal">Grundlagen der Suchmaschinenoptimierung</a><br />
Was Suchmaschinen &#8220;lieben&#8221; &#8211; ein kleiner Exkurs.</li>
<li><a href="http://www.pixelution.at" class="liexternal">PIXELUTION.AT Multimedia Agentur</a><br />
Mein auf Suchmaschinenoptimierung spezialisiertes Unternehmen.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.golser.info/suchmaschinenoptimierung-08122007/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

