Das Dokument beschreibt die Verwendung von Ausgabefiltern zur Unterstützung von Redakteuren beim Ausbau von Webseiten, wobei der Fokus auf Einfachheit, Sicherheit und ästhetischem Design liegt. Es erläutert, wie Filter in die Programmierung eingebunden werden, um unnötige Inhalte zu entfernen und Daten zu validieren, sowie spezifische Beispiele für HTML-Optimierungen und reguläre Ausdrücke. Darüber hinaus werden Funktionen des HTML Purifiers zur Beseitigung von bösartigem Code und zur Sicherstellung von Webstandards besprochen.

1. Mit Ausgabefiltern Redakteuren dabei helfen,
Webseiten auszubauen.
Einfach, sicher, hübsch & nach Webstandards.

2. Nicolai Schwarz
selbstständiger Designer und Webentwickler
www.textformer.de | twitter.com/textformer

3. Ausgabefilter am Beispiel Textile
h3. Dies ist eine Überschrift
Hier folgt der Text, mit einem *betonten Element* und einem
“Link zu Textile”:http://de.wikipedia.org/wiki/Textile.
<h3>Überschrift</h3>
<p>Hier folgt der Text, mit einem <strong>betonten Element
</strong> und einem <a href=”http://de.wikipedia.org/wiki/
Textile”>Link zu Textile</a>.</p>

4. Ausgabefilter am Beispiel WordPress Bildunterschriften
[caption id=”attachment_796” align=”alignleft” width=”450”
caption=”Die ZEIT vor dem Relaunch…”]
<img src=”http://www.webkrauts.de/wp-content/uploads/2010/07/zeit-
artikel-alt.jpg” alt=”Die ZEIT vor dem Relaunch…” title=”zeit-artikel-alt”
width=”450” height=”396” class=”size-full wp-image-796” />
[/caption]
<div id=”attachment_796” class=”wp-caption alignleft” style=”width:
460px;”>
<img src=”http://www.webkrauts.de/wp-content/uploads/2010/07/zeit-
artikel-alt.jpg” alt=”Die ZEIT vor dem Relaunch…” title=”zeit-artikel-alt”
class=”size-full wp-image-796” width=”450” height=”396”>
<p class=”wp-caption-text”>Die ZEIT vor dem Relaunch…</p>
</div>

5. Wozu Ausgabefilter?
dem User Dinge ermöglichen, die er eigentlich nicht kann
das Verfahren soll einfach sein, möglichst narrensicher
der Code soll auf der Webseite einheitlich erscheinen
es soll hübsch aussehen / das Design nicht zerstören
der Filter soll Webstandards liefern
er soll dem Webworker auf Dauer Arbeit ersparen
(er sollte einfach zu implementieren sein / im Budget)

6. Filter einbinden
$content = “Hallo foo”;
print $content;
function mein_filter($text) {
$text = str_replace(“foo”, “Welt”, $text);
return $text;
}
print mein_filter($content);

7. Reguläre Ausdrücke
Irgendein Buchstabe
[a-z]
gif oder jpg oder png
(gif|jpg|png)
someone@example.com
^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*
[@]
[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$

9. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

11. Daten prüfen

12. Daten prüfen
hat das Bild das richtige Format?

13. Daten prüfen
hat das Bild das richtige Format?
Ist der Teaser reiner Text?

14. Daten prüfen
hat das Bild das richtige Format?
Ist der Teaser reiner Text?
Wie lang ist der Teaser?

15. Daten prüfen
hat das Bild das richtige Format?
Ist der Teaser reiner Text?
Wie lang ist der Teaser?
Enthält der weitere Text HTML?

20. :-)
B-)
;-)

24. user@beispiel.de
<span class=”spamspan”>
<span class=”u”>user</span>
[at]
<span class=”d”>beispiel [dot] de</span>
</span>

28. [tip:Pellentesque nisi metus=Lorem ipsum dolor sit amet,…]

30. <code>
<label for=”vollerName”>Vor- und Zuname:</label>
<input id=”vollerName” />
</code>
<code>
&lt;label for=”vollerName”&gt;Vor- und Zuname:&lt;/label&gt;
&lt;input id=”vollerName” /&gt;
</code>

41. [Dr]
[BMI]
[ZSD]
<abbr title=”Doktor”>Dr.</abbr>
<abbr lang=”en” title=”Body-Mass-Index”>BMI</abbr>
<acronym title=”Zapfen-Stäbchen-Dystrophie”>ZSD</acronym>

42. Was ist außerdem sinnvoll?
Links automatisch verlinken.
Automatischer Zeilenumbruch.

43. Was ist außerdem sinnvoll?
Links automatisch verlinken.
Automatischer Zeilenumbruch.
Richtige Schreibweise der Firma gewährleisten.
Überflüssige Ausrufezeichen „!!!“ filtern.
„ Euro“ und „ €“ vereinheitlichen zu „&nbsp;Euro“.

44. Was ist außerdem sinnvoll?
Links automatisch verlinken.
Automatischer Zeilenumbruch.
Richtige Schreibweise der Firma gewährleisten.
Überflüssige Ausrufezeichen !!! filtern.
„ Euro“ und „ €“ vereinheitlichen zu „&nbsp;Euro“.
Absätze mit Minuszeichen in <ul> umwandeln.
Die Größe von Bildern beschränken.
Nicht benötigtes HTML, JavaScript ausfiltern.

49. Zum Beispiel: Import aus Word
<h1 class=”MsoNormal” style=”text-align: center; line-height: normal;
margin: 0cm 0cm 0pt;”><span style=”font-family:
&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;
mso-ansi-language: DE;”>Patientensymposium
Netzhautdegenerationen</span></h1><h1 class=”MsoNormal” style=”text-
align: center; line-height: normal; margin: 0cm 0cm 0pt;”><span
style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size:
12pt; mso-ansi-language: DE;”>&nbsp;</span><span style=”font-family:
&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-ansi-
language: DE;”>Einblicke - Ausblicke</span></h1><p class=”MsoNormal”
style=”line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-
family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-
ansi-language: DE;”>&nbsp;</span></p><h2 class=”MsoNormal”
style=”line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-fa-
mily: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;
mso-ansi-language: DE;”>Moderation</span>
...

50. gefiltert mit dem HTML Purifier (default)
<h1 class=”MsoNormal”>
<span>Patientensymposium Netzhautdegenerationen</span>
</h1>
<h1 class=”MsoNormal”>
<span> </span>
<span>Einblicke - Ausblicke</span>
</h1>
<p class=”MsoNormal”>
<span> </span>
</p>
<h2 class=”MsoNormal”>
<span>Moderation</span>
</h2>

51. HTML Purifier
bösartigen Code beseitigen
fehlende End-Tags schließen
falsch verschachtelte Elemente reparieren
veraltetete Tags konvertieren
CSS validieren
leere Elemente ausfiltern
festlegen, welche Elemente und Attribute erlaubt sind
ids festlegen, die nicht erlaubt sind

52. Feinheiten
auf die Reihenfolge der Filter achten

53. Feinheiten
auf die Reihenfolge der Filter achten
Ergebnisse cachen

54. Feinheiten
auf die Reihenfolge der Filter achten
Ergebnisse cachen
Filter zusammenfassen / selbst programmieren

55. Feinheiten
auf die Reihenfolge der Filter achten
Ergebnisse cachen
Filter zusammenfassen / selbst programmieren
Den Nutzer informieren oder nicht?

57. Wozu Ausgabefilter?
dem User Dinge ermöglichen, die er eigentlich nicht kann
das Verfahren soll einfach sein, möglichst narrensicher
der Code soll auf der Webseite einheitlich erscheinen
es soll hübsch aussehen, das Design nicht zerstören
der Filter soll Webstandards liefern
er soll dem Webworker auf Dauer Arbeit ersparen
(er sollte einfach zu implementieren sein / im Budget)