Türme bauen mit Schildbürgern

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

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>

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>

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)

Filter einbinden

$content = “Hallo foo”;

print $content;

function mein_filter($text) { $text = str_replace(“foo”, “Welt”, $text); return $text; }

print mein_filter($content);

Reguläre Ausdrücke

Irgendein Buchstabe[a-z]

gif oder jpg oder png(gif|jpg|png)

[email protected]^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$

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

Daten prüfen

Daten prüfen

hat das Bild das richtige Format?

Daten prüfen

hat das Bild das richtige Format?

Ist der Teaser reiner Text?

Daten prüfen

hat das Bild das richtige Format?

Ist der Teaser reiner Text?

Wie lang ist der Teaser?

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?

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

[email protected]

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

:-)B-) ;-)

<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>

[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>

Was ist außerdem sinnvoll?

Links automatisch verlinken.

Automatischer Zeilenumbruch.

Richtige Schreibweise der Firma gewährleisten.

Die Größe von Bildern beschränken.

Nicht benötigtes HTML, JavaScript ausfiltern.

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;”>PatientensymposiumNetzhautdegenerationen</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>

...

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>

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

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)