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

Türme bauen mit Schildbürgern (Webtech Edition)

Embed Size (px)

DESCRIPTION

Wie können wir es Leuten, die keine Ahnung vom Web oder von Redaktionssystemen haben, einfacher machen, Bildergalerien in ihre Webseite einzubauen? Oder Inhalte einzustellen, die Webstandards entsprechen? Die Lösung bieten geeignete Filter.

Citation preview

Page 1: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 2: Türme bauen mit Schildbürgern (Webtech Edition)

Nicolai Schwarzselbstständiger Designer und Webentwicklerwww.textformer.de | twitter.com/textformer

Page 3: Türme bauen mit Schildbürgern (Webtech Edition)

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>

Page 4: Türme bauen mit Schildbürgern (Webtech Edition)

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>

Page 5: Türme bauen mit Schildbürgern (Webtech Edition)

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)

Page 6: Türme bauen mit Schildbürgern (Webtech Edition)

Filter einbinden

$content = “Hallo foo”;

print $content;

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

print mein_filter($content);

Page 7: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 8: Türme bauen mit Schildbürgern (Webtech Edition)
Page 9: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 10: Türme bauen mit Schildbürgern (Webtech Edition)
Page 11: Türme bauen mit Schildbürgern (Webtech Edition)

Daten prüfen

Page 12: Türme bauen mit Schildbürgern (Webtech Edition)

Daten prüfen

hat das Bild das richtige Format?

Page 13: Türme bauen mit Schildbürgern (Webtech Edition)

Daten prüfen

hat das Bild das richtige Format?

Ist der Teaser reiner Text?

Page 14: Türme bauen mit Schildbürgern (Webtech Edition)

Daten prüfen

hat das Bild das richtige Format?

Ist der Teaser reiner Text?

Wie lang ist der Teaser?

Page 15: Türme bauen mit Schildbürgern (Webtech Edition)

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?

Page 16: Türme bauen mit Schildbürgern (Webtech Edition)
Page 17: Türme bauen mit Schildbürgern (Webtech Edition)
Page 18: Türme bauen mit Schildbürgern (Webtech Edition)
Page 19: Türme bauen mit Schildbürgern (Webtech Edition)
Page 20: Türme bauen mit Schildbürgern (Webtech Edition)

:-)B-) ;-)

Page 21: Türme bauen mit Schildbürgern (Webtech Edition)
Page 22: Türme bauen mit Schildbürgern (Webtech Edition)
Page 23: Türme bauen mit Schildbürgern (Webtech Edition)
Page 24: Türme bauen mit Schildbürgern (Webtech Edition)

[email protected]

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

Page 25: Türme bauen mit Schildbürgern (Webtech Edition)
Page 26: Türme bauen mit Schildbürgern (Webtech Edition)
Page 27: Türme bauen mit Schildbürgern (Webtech Edition)
Page 28: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 29: Türme bauen mit Schildbürgern (Webtech Edition)
Page 30: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 31: Türme bauen mit Schildbürgern (Webtech Edition)
Page 32: Türme bauen mit Schildbürgern (Webtech Edition)
Page 33: Türme bauen mit Schildbürgern (Webtech Edition)
Page 34: Türme bauen mit Schildbürgern (Webtech Edition)
Page 35: Türme bauen mit Schildbürgern (Webtech Edition)
Page 36: Türme bauen mit Schildbürgern (Webtech Edition)
Page 37: Türme bauen mit Schildbürgern (Webtech Edition)
Page 38: Türme bauen mit Schildbürgern (Webtech Edition)
Page 39: Türme bauen mit Schildbürgern (Webtech Edition)
Page 40: Türme bauen mit Schildbürgern (Webtech Edition)
Page 41: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 42: Türme bauen mit Schildbürgern (Webtech Edition)

Was ist außerdem sinnvoll?

Links automatisch verlinken.

Automatischer Zeilenumbruch.

Page 43: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 44: Türme bauen mit Schildbürgern (Webtech Edition)

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.

Page 45: Türme bauen mit Schildbürgern (Webtech Edition)
Page 46: Türme bauen mit Schildbürgern (Webtech Edition)
Page 47: Türme bauen mit Schildbürgern (Webtech Edition)
Page 48: Türme bauen mit Schildbürgern (Webtech Edition)
Page 49: Türme bauen mit Schildbürgern (Webtech Edition)

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>

...

Page 50: Türme bauen mit Schildbürgern (Webtech Edition)

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>

Page 51: Türme bauen mit Schildbürgern (Webtech Edition)

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

Page 52: Türme bauen mit Schildbürgern (Webtech Edition)

Feinheiten

auf die Reihenfolge der Filter achten

Page 53: Türme bauen mit Schildbürgern (Webtech Edition)

Feinheiten

auf die Reihenfolge der Filter achten

Ergebnisse cachen

Page 54: Türme bauen mit Schildbürgern (Webtech Edition)

Feinheiten

auf die Reihenfolge der Filter achten

Ergebnisse cachen

Filter zusammenfassen / selbst programmieren

Page 55: Türme bauen mit Schildbürgern (Webtech Edition)

Feinheiten

auf die Reihenfolge der Filter achten

Ergebnisse cachen

Filter zusammenfassen / selbst programmieren

Den Nutzer informieren oder nicht?

Page 56: Türme bauen mit Schildbürgern (Webtech Edition)
Page 57: Türme bauen mit Schildbürgern (Webtech Edition)

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)

Page 58: Türme bauen mit Schildbürgern (Webtech Edition)