<?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>Onlineabteilung &#187; Entwicklung</title>
	<atom:link href="http://www.onlineabteilung.de/blog/category/entwicklung/feed" rel="self" type="application/rss+xml" />
	<link>http://www.onlineabteilung.de/blog</link>
	<description>Die Onlineabteilung informiert über Web-Themen</description>
	<lastBuildDate>Thu, 14 Jan 2010 13:52:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Request-Handling in Webanwendungen</title>
		<link>http://www.onlineabteilung.de/blog/request-handling-in-webanwendungen/63</link>
		<comments>http://www.onlineabteilung.de/blog/request-handling-in-webanwendungen/63#comments</comments>
		<pubDate>Thu, 05 Mar 2009 20:35:18 +0000</pubDate>
		<dc:creator>Jens Arps</dc:creator>
				<category><![CDATA[Entwicklung]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Requests]]></category>
		<category><![CDATA[Webanwendung]]></category>

		<guid isPermaLink="false">http://www.onlineabteilung.de/blog/?p=63</guid>
		<description><![CDATA[Das Verwalten der Requests (also der Anfragen über die Methoden GET und POST; andere Methoden wie PUT oder HEAD spielen hier keine Rolle) ist eine immer wiederkehrende Aufgabe in Rich Internet Applications.
Der direkte Zugriff auf die Requests unter PHP auf die Variablen $_POST und $_GET ist nicht nur unschön, sondern vor Allem unhandlich und unflexibel. [...]]]></description>
			<content:encoded><![CDATA[<p>Das Verwalten der Requests (also der Anfragen über die Methoden GET und POST; andere Methoden wie PUT oder HEAD spielen hier keine Rolle) ist eine immer wiederkehrende Aufgabe in Rich Internet Applications.</p>
<p>Der direkte Zugriff auf die Requests unter PHP auf die Variablen $_POST und $_GET ist nicht nur unschön, sondern vor Allem unhandlich und unflexibel. Allein dass Überprüfen der abzufragenden Variablen mit <span class="codeContainer"><code>empty($_POST['key'])</code></span> oder <span class="codeContainer"><code>isset(...)</code></span> ist unübersichtlich und verbraucht unnötig Code. Vorsicht beim Zugriff über $_REQUEST; zu den oben genannten Problemen kommt hinzu, dass in $_REQUEST auch Cookie-Daten enthalten sind.</p>
<p>Aus diesem Grund arbeiten viele Programmierer mit einer Komponente, die das Lesen und Setzen dieser Variablen vereinfacht und vereinheitlicht. Leider haben viele dieser Komponenten Fehler oder sind unhandlich aufgebaut, so dass der Umgang mit ihnen die Arbeit letzendlich doch nicht vereinfacht.</p>
<p><span id="more-63"></span></p>
<p>Daher möchte ich an dieser Stelle die Request-Komponente vorstellen, die ich schon seit geraumer Zeit benutze, und die mich noch nie im Stich gelassen hat. Es ist ein einfacher, grundlegender Requester, der nach Belieben erweitert werden kann, aber alle grundlegenden Anforderungen an eine solche Komponente erfüllt. Der Code ist in PHP geschrieben, dürfte sich aber in kürzester Zeit in jede andere Sprache portieren lassen.</p>
<p>Der Requester implementiert das Singleton-Designpattern – was für diese Aufgabe wie geschaffen ist. Man muss im bootstrapping-Prozess der Applikation einmal die Methode collectRequests() aufrufen:</p>
<div class="codeContainer"><code><br />
// file: bootstrap.php<br />
// (...)<br />
// start your autoloader oder require the file directly</code></p>
<p><code>YourProjectName_Requests::getInstance()-&gt;collectRequests();<br />
// (...)</code></div>
<p>Später dann stehen die Methoden zum bequemen Umgang mit POST und GET Variablen zur Verfügung:</p>
<div class="codeContainer"><code><br />
// file: YourProjectName_SomeClass.php</code></p>
<p><code>$key = YourProjectName_Requests::getInstance()-&gt;getIfPost('key');</code></p>
<p><code>if(!$key)<br />
// (...)</code></p>
<p><code>switch($key)<br />
{<br />
// (...)<br />
}</code></div>
<p>Oder, je nach Anwendungsfall, eben direkt über eine Referenz:</p>
<div class="codeContainer"><code><br />
$this-&gt;requests = YourProjectName_Requests::getInstance();<br />
// (...)<br />
$result = $this-&gt;requests-&gt;set('otherKey','newValue','post');<br />
</code></div>
<p>Im wesentlichen stehen alle grundlegenden Methoden für den Umgang mit Requests zur Verfügung (get, set, conditional get, method check). Außer einer unset-Methode: eine Requests-Variable zu &#8216;unsetten&#8217; ist schlechter Stil – der bessere Weg ist es, ihren Wert auf null zu setzen.</p>
<p>Darauf aufbauend, kann man den Requester dann mit Allem ausstatten, was man für sein eigenes Projekt benötigt. Der Code ist dokumentiert und einfach zu erweitern.</p>
<p>Und so funktioniert&#8217;s: Einfach herunterladen, die Dateiendung .txt entfernen, einen passenden Klassen-Namen auswählen und loslegen.</p>
<p>Download: <a href="http://www.onlineabteilung.de/blog/wp-content/uploads/2009/03/requests.php.txt">requests.php.txt</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.onlineabteilung.de/blog/request-handling-in-webanwendungen/63/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Content Kontrolle durch CSS</title>
		<link>http://www.onlineabteilung.de/blog/content-kontrolle-durch-css/47</link>
		<comments>http://www.onlineabteilung.de/blog/content-kontrolle-durch-css/47#comments</comments>
		<pubDate>Mon, 22 Dec 2008 01:04:33 +0000</pubDate>
		<dc:creator>Jens Arps</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Entwicklung]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Markup]]></category>
		<category><![CDATA[Webseitenpflege]]></category>

		<guid isPermaLink="false">http://www.onlineabteilung.de/blog/?p=47</guid>
		<description><![CDATA[Ein wichtiges Ziel bei der Erstellung einer Webseite ist es, validen und auch semantischen Code zu produzieren. Dies hat viele Gründe, auf die ich aber hier nicht näher eingehen will.
Der erste Schritt, dies zu erreichen, ist die Erstellung des Templates. Hier gibt es Hilfsmittel, die einen bei dieser Aufgabe unterstützen: sei es direkt bei der [...]]]></description>
			<content:encoded><![CDATA[<p>Ein wichtiges Ziel bei der Erstellung einer Webseite ist es, validen und auch semantischen Code zu produzieren. Dies hat viele Gründe, auf die ich aber hier nicht näher eingehen will.</p>
<p>Der erste Schritt, dies zu erreichen, ist die Erstellung des Templates. Hier gibt es Hilfsmittel, die einen bei dieser Aufgabe unterstützen: sei es direkt bei der Erstellung in einer Entwicklungsumgebung, die das Markup live auf Fehler überprüft, oder den W3C Validator, durch den man das fertige Template jagt um abschließend zu schauen, ob man nicht doch etwas übersehen hat.</p>
<p>Auch beim Schreiben des CSS ist es nicht anders: Die Entwicklungswerkzeuge verhindern Tippfehler, und der W3C Validator macht die Abschlusskontrolle.</p>
<p>Aber was ist mit dem Inhalt, den das CMS später in das Template einfügt?<br />
Zum Einen können auch im Inhalt fehlerhafte Tags die Validität der Seite zerstören. Sei es ein &lt;img&gt;-Tag, das sich nicht selbst schließt, oder ein fehlendes „summary“ Attribut in einer Daten-Tabelle. Dies lässt sich noch mit Hilfe des Validators überprüfen. Zum Anderen gibt es aber auch unerwünschtes Markup: zum Beispiel ein leeres „alt“ Attribut in einem Bild, oder ein fehlendes „title“ Attribut in einem Link. Hier hilft der Validator nicht weiter, da das Markup ja valide ist.<br />
<span id="more-47"></span><br />
Außerdem gibt man die Kontrolle der Inhalte der Seite aus der Hand, sobald man das Projekt an den Kunden übergibt; sofern die Agentur nicht mit dem Einpflegen neuer Inhalte beauftragt wurde.</p>
<h2>Ist es also möglich, den Inhalt einer Seite schnell zu überprüfen, auch auf unerwünschtes Markup – und das dauerhaft?</h2>
<p>Ja! Die Lösung: CSS. Wir bedienen uns hierfür der Pseudoklasse :not und der Attribut-Selektoren, um unerwünschtes Markup in der Seite zu finden und optisch hervorzuheben. So können wir auf den ersten Blick feststellen, ob es Probleme gibt, und wo diese sind – ohne den Quelltext der Seite untersuchen zu müssen. Zum Markieren benutze ich hier die Eigenschaft „outline“; natürlich kann man stattdessen auch beliebige andere Eigenschaften verwenden.</p>
<h3><strong>Veraltete / unerwünschte Tags finden</strong></h3>
<p>Eine einfache Aufgabe, man stelle ein Liste zusammen, auf die man überprüfen will. In diesem Beispiel &lt;font&gt;, &lt;center&gt; und &lt;style&gt;. &lt;style&gt; ist zwar nicht veraltet, kann aber zu Layout-Problemen führen, wenn der Kunde im Inhaltsbereich Styles nachlädt.</p>
<div class="codeContainer"><code>font,<br />
center,<br />
style {<br />
&nbsp;&nbsp;outline: solid 3px #FF0000;<br />
}</code></div>
<h3>Veraltete / unerwünschte Attribute finden</h3>
<p>Hier benutzen wir erstmals Attribut-Selektoren. Wir suchen nach „align“ und „style“. „style“ ist besonders problematisch, da inline-styles die Anweisungen aus dem Stylesheet überschreiben.</p>
<div class="codeContainer"><code>*[align],<br />
*[style] {<br />
&nbsp;&nbsp;outline: solid 3px #C00000;<br />
}</code></div>
<h3>Fehlende Attribute finden</h3>
<p>&lt;table&gt;-Tags brauchen in XHTML ein „summary“ Attribut, &lt;img&gt;-Elemente ein „alt“-Attribut. Und Links sollten immer ein „title“-Attribut haben. Wir benutzen hier die Pseudoklasse :not, mit der wir die Anweisungen in der Klammer negieren können.</p>
<div class="codeContainer"><code>img:not([alt]),<br />
img:not([title]),<br />
a:not([title]),<br />
a:not([href]),<br />
table:not([summary]) {<br />
&nbsp;&nbsp;outline: solid 3px #A00000;<br />
}</code></div>
<h3>Leere Attribute finden</h3>
<p>Ein Klassiker: &lt;img&gt;-Tags mit leerem „alt“. Aber solche Attribute sind dazu da, Informationen zu tragen, und nicht nur den Validator zufrieden zu stellen!</p>
<div class="codeContainer"><code>*[alt=""],<br />
*[title=""],<br />
table[summary=""] {<br />
&nbsp;&nbsp;outline: solid 3px #800000;<br />
}</code></div>
<h3>Sonstiges</h3>
<p>Die Beispiele hier sind nur einige grundsätzliche Dinge, die Möglichkeiten gehen noch viel weiter. Sei es das Auffinden von relativen URLs in Links, mit dem „beginnt-mit“-Attribut-Selektor: <span class="codeContainer"><code>a:not([href^="http"])</code></span>. Oder ob der erste Link in einem Menü eine geforderte Klasse hat: <span class="codeContainer"><code>ul &gt; li:first-child + a:not([class~="first"])</code></span>. Oder fehlende „longdesc“ Attribute, wenn die Seite dies erfordert. Oder, oder, oder&#8230; Es lohnt sich, hier einen Blick in die CSS-Spezifikation zu werfen – und natürlich in die Dokumentation des zum Testen verwendeten Browsers.</p>
<h2>Und wenn der Kunde neue Inhalte einpflegt?</h2>
<p>Wenn man die Möglichkeit dieser Kontrolle auch noch nach der Übergabe des Projektes an den Kunden haben möchte, gibt es mehrere Möglichkeiten:</p>
<h3>Dynamisch generiertes Stylesheet</h3>
<p>Man generiert das Stylesheet dynamisch, und kann dann, abhängig zum Beispiel von einem gesetzten Parameter, die Kontroll-Regeln anhängen. Wichtig hier: Caching bei Skript-Sprachen. Dynamische Ressourcen werden häufig nicht gecacht, so dass man die vom Browser gesendeten E-Tag- oder Modified-Since-Header selbst überprüfen und gegebenenfalls einen „304 Not-Modified“ senden muss.</p>
<h3>Dynamisch generierter &lt;head&gt;</h3>
<p>Ähnlich wie letztere Methode, nur dass man im &lt;head&gt;-Bereich des Quellcodes das Kontroll-Stylesheet zusätzlich über ein &lt;link&gt;-Tag referenziert.</p>
<h3>Nachladen per Javascript</h3>
<p>Die Referenz zum Kontroll-Stylesheet wir nach dem Laden der Seite per Javascript in das DOM geschrieben.</p>
<h3>User Stylesheet</h3>
<p>Man erstellt für die URL der Seite ein User-Stylesheet. Nachteil: das Kontroll-Stylesheet muss sich dann auf dem Rechner befinden, von dem aus kontrolliert wird. Vorteil: Dafür muss kein Eingriff in die Seite vorgenommen werden.</p>
<p>Es lohnt sich sicherlich, mit dieser Möglichkeit der Inhalts-Kontrolle zu experimentieren. CSS ermöglicht es, visuelle Hinweise für Szenarien zu bekommen, die über die reine Validitäts-Überprüfung hinausgehen. Zudem kann man auch seine persönlichen Anforderungen überprüfen.</p>
<p>Hinweis zur Kompatibilität: Die hier genannten Selektoren werden von allen W3-konformen Browsern erkannt (Gecko-, Webkit-, KHTML-Engine), und von IE 7+.</p>
<p><em><br />Weitergehende Lektüre:</em></p>
<p>Eric Meyer hat für 24ways.org einen ausführlichen Artikel zur Kontrolle mit CSS geschrieben:<br />
<a title="http://24ways.org/2007/diagnostic-styling" rel="nofollow" href="http://24ways.org/2007/diagnostic-styling" target="_blank">http://24ways.org/2007/diagnostic-styling</a></p>
<p>Übersicht über CSS 2.1 Selektoren bei thestyleworks.de:<br />
<a title="http://thestyleworks.de/ref/index_se.shtml" rel="nofollow" href="http://thestyleworks.de/ref/index_se.shtml" target="_blank">http://thestyleworks.de/ref/index_se.shtml</a></p>
<p>W3C CSS 2.1 Selektoren Spezifikation:<br />
<a title="http://www.w3.org/TR/CSS21/selector.html" rel="nofollow" href="http://www.w3.org/TR/CSS21/selector.html" target="_blank">http://www.w3.org/TR/CSS21/selector.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.onlineabteilung.de/blog/content-kontrolle-durch-css/47/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
