Mit Ausgabefiltern Redakteuren dabei helfen,
Webseiten auszubauen.
Einfach, sicher, hübsch & nach Webstandards.
Nicolai Schwarz
selbstständiger Designer und Webentwickler
www.textformer.de | twitter.com/textformer
Ausgabefilter am Beispiel Textile

h3. Dies ist eine Überschrift

Hier folgt der Text, mit einem *betonten Element* und ei...
Ausgabefilter am Beispiel WordPress Bildunterschriften

[caption id=”attachment_796” align=”alignleft” width=”450”
caption...
Wozu Ausgabefilter?


  dem User Dinge ermöglichen, die er eigentlich nicht kann

  das Verfahren soll einfach sein, mögli...
Filter einbinden

$content = “Hallo foo”;

print $content;




function mein_filter($text) {
   $text = str_replace(“foo”,...
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_...
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 d...
:-)
B-)
;-)
user@beispiel.de




<span class=”spamspan”>
<span class=”u”>user</span>
[at]
<span class=”d”>beispiel [dot] de</span>
</s...
[tip:Pellentesque nisi metus=Lorem ipsum dolor sit amet,…]
<code>
<label for=”vollerName”>Vor- und Zuname:</label>
<input id=”vollerName” />
</code>



<code>
&lt;label for=”vollerN...
[Dr]
[BMI]
[ZSD]




<abbr title=”Doktor”>Dr.</abbr>
<abbr lang=”en” title=”Body-Mass-Index”>BMI</abbr>
<acronym title=”Za...
Was ist außerdem sinnvoll?


  Links automatisch verlinken.

  Automatischer Zeilenumbruch.
Was ist außerdem sinnvoll?


  Links automatisch verlinken.

  Automatischer Zeilenumbruch.

  Richtige Schreibweise der F...
Was ist außerdem sinnvoll?


  Links automatisch verlinken.

  Automatischer Zeilenumbruch.

  Richtige Schreibweise der F...
Zum Beispiel: Import aus Word

<h1 class=”MsoNormal” style=”text-align: center; line-height: normal;
margin: 0cm 0cm 0pt;”...
gefiltert mit dem HTML Purifier (default)

<h1 class=”MsoNormal”>
   <span>Patientensymposium Netzhautdegenerationen</span...
HTML Purifier


  bösartigen Code beseitigen

  fehlende End-Tags schließen

  falsch verschachtelte Elemente reparieren

...
Feinheiten


  auf die Reihenfolge der Filter achten
Feinheiten


  auf die Reihenfolge der Filter achten

  Ergebnisse cachen
Feinheiten


  auf die Reihenfolge der Filter achten

  Ergebnisse cachen

  Filter zusammenfassen / selbst programmieren
Feinheiten


  auf die Reihenfolge der Filter achten

  Ergebnisse cachen

  Filter zusammenfassen / selbst programmieren
...
Wozu Ausgabefilter?


  dem User Dinge ermöglichen, die er eigentlich nicht kann

  das Verfahren soll einfach sein, mögli...
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nächste SlideShare
Wird geladen in …5
×

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

2.035 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.035
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
384
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. Mit Ausgabefiltern Redakteuren dabei helfen, Webseiten auszubauen. Einfach, sicher, hübsch & nach Webstandards.
  2. 2. Nicolai Schwarz selbstständiger Designer und Webentwickler www.textformer.de | twitter.com/textformer
  3. 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. 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. 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. 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. 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}$
  8. 8. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  9. 9. Daten prüfen
  10. 10. Daten prüfen hat das Bild das richtige Format?
  11. 11. Daten prüfen hat das Bild das richtige Format? Ist der Teaser reiner Text?
  12. 12. Daten prüfen hat das Bild das richtige Format? Ist der Teaser reiner Text? Wie lang ist der Teaser?
  13. 13. 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?
  14. 14. :-) B-) ;-)
  15. 15. user@beispiel.de <span class=”spamspan”> <span class=”u”>user</span> [at] <span class=”d”>beispiel [dot] de</span> </span>
  16. 16. [tip:Pellentesque nisi metus=Lorem ipsum dolor sit amet,…]
  17. 17. <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>
  18. 18. [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>
  19. 19. Was ist außerdem sinnvoll? Links automatisch verlinken. Automatischer Zeilenumbruch.
  20. 20. 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“.
  21. 21. 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.
  22. 22. 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> ...
  23. 23. 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>
  24. 24. 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
  25. 25. Feinheiten auf die Reihenfolge der Filter achten
  26. 26. Feinheiten auf die Reihenfolge der Filter achten Ergebnisse cachen
  27. 27. Feinheiten auf die Reihenfolge der Filter achten Ergebnisse cachen Filter zusammenfassen / selbst programmieren
  28. 28. Feinheiten auf die Reihenfolge der Filter achten Ergebnisse cachen Filter zusammenfassen / selbst programmieren Den Nutzer informieren oder nicht?
  29. 29. 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)

×