SlideShare ist ein Scribd-Unternehmen logo
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 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)

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}$
Türme bauen mit Schildbürgern (Webtech Edition)
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Türme bauen mit Schildbürgern (Webtech Edition)
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?
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)
:-)
B-)
;-)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
user@beispiel.de




<span class=”spamspan”>
<span class=”u”>user</span>
[at]
<span class=”d”>beispiel [dot] de</span>
</span>
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
[tip:Pellentesque nisi metus=Lorem ipsum dolor sit amet,…]
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>
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)
[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.
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“.
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.
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)
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>
...
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
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

  Den Nutzer informieren oder nicht?
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)
Türme bauen mit Schildbürgern (Webtech Edition)

Weitere ähnliche Inhalte

Andere mochten auch

Firmas electronicas
Firmas electronicasFirmas electronicas
Firmas electronicas
Olgui Guerrero
 
DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...
DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...
DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...
DNX
 
DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...
DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...
DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...
DNX
 
Präsentation dells 150708_de
Präsentation dells 150708_dePräsentation dells 150708_de
Präsentation dells 150708_de
Christian Alberto Dellsperger Wharwood
 
Guide de-detection-des-mensonges
Guide de-detection-des-mensongesGuide de-detection-des-mensonges
Guide de-detection-des-mensonges
abdelkrim abdellaoui
 
Especializacion
EspecializacionEspecializacion
Especializacion
altertmatic
 
DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...
DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...
DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...
DNX
 
Gcmc. proyecto. tercer foro
Gcmc. proyecto. tercer foroGcmc. proyecto. tercer foro
Gcmc. proyecto. tercer foro
Andres Alfonso
 
joyeux noel à tous
 joyeux noel à tous joyeux noel à tous
joyeux noel à tous
Serge Marlier
 
Imprimante Fargo DTC 550
Imprimante Fargo DTC 550 Imprimante Fargo DTC 550
Imprimante Fargo DTC 550
Visu-ad
 
Von Social Media zu Social Business
Von Social Media zu Social BusinessVon Social Media zu Social Business
Von Social Media zu Social Business
THOMAS KEUP
 
Tableaux
TableauxTableaux
Tableaux
mikou31
 
Ilícitos tributarios.zeidali
Ilícitos tributarios.zeidaliIlícitos tributarios.zeidali
Ilícitos tributarios.zeidali
ZEIDALI
 
11A LAURA CAMILA GAMBOA MORA
11A LAURA CAMILA GAMBOA MORA11A LAURA CAMILA GAMBOA MORA
11A LAURA CAMILA GAMBOA MORA
3195389710
 
Peinture
PeinturePeinture
Peinture
mikou31
 
2010 12 Safety Audit
2010 12 Safety Audit2010 12 Safety Audit
2010 12 Safety Audit
oboe
 
Les logiciels oraliseurs
Les logiciels oraliseursLes logiciels oraliseurs
Les logiciels oraliseurs
Ressources Ecole
 
Module 3
Module 3Module 3
Module 3
ISE
 
Bearstech charpentier thdprez
Bearstech charpentier thdprezBearstech charpentier thdprez
Bearstech charpentier thdprez
alg2801
 
Tecnicas de estudio
Tecnicas de estudioTecnicas de estudio
Tecnicas de estudio
Mariapaz Castillo Alza
 

Andere mochten auch (20)

Firmas electronicas
Firmas electronicasFirmas electronicas
Firmas electronicas
 
DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...
DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...
DNX Workshop ★ Richtig in die digitale Selbstständigkeit starten, Gewerbe - S...
 
DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...
DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...
DNX Workshop ★ Abenteuer Entrepreneurship« oder »Gründe das geilste Business ...
 
Präsentation dells 150708_de
Präsentation dells 150708_dePräsentation dells 150708_de
Präsentation dells 150708_de
 
Guide de-detection-des-mensonges
Guide de-detection-des-mensongesGuide de-detection-des-mensonges
Guide de-detection-des-mensonges
 
Especializacion
EspecializacionEspecializacion
Especializacion
 
DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...
DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...
DNX Workshop ★ Strategien und Techniken zum eigenen erfolgreichen Buch mit Se...
 
Gcmc. proyecto. tercer foro
Gcmc. proyecto. tercer foroGcmc. proyecto. tercer foro
Gcmc. proyecto. tercer foro
 
joyeux noel à tous
 joyeux noel à tous joyeux noel à tous
joyeux noel à tous
 
Imprimante Fargo DTC 550
Imprimante Fargo DTC 550 Imprimante Fargo DTC 550
Imprimante Fargo DTC 550
 
Von Social Media zu Social Business
Von Social Media zu Social BusinessVon Social Media zu Social Business
Von Social Media zu Social Business
 
Tableaux
TableauxTableaux
Tableaux
 
Ilícitos tributarios.zeidali
Ilícitos tributarios.zeidaliIlícitos tributarios.zeidali
Ilícitos tributarios.zeidali
 
11A LAURA CAMILA GAMBOA MORA
11A LAURA CAMILA GAMBOA MORA11A LAURA CAMILA GAMBOA MORA
11A LAURA CAMILA GAMBOA MORA
 
Peinture
PeinturePeinture
Peinture
 
2010 12 Safety Audit
2010 12 Safety Audit2010 12 Safety Audit
2010 12 Safety Audit
 
Les logiciels oraliseurs
Les logiciels oraliseursLes logiciels oraliseurs
Les logiciels oraliseurs
 
Module 3
Module 3Module 3
Module 3
 
Bearstech charpentier thdprez
Bearstech charpentier thdprezBearstech charpentier thdprez
Bearstech charpentier thdprez
 
Tecnicas de estudio
Tecnicas de estudioTecnicas de estudio
Tecnicas de estudio
 

Ähnlich wie Türme bauen mit Schildbürgern (Webtech Edition)

Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
Nicolai Schwarz
 
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im ProjektalltagFür Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
djesse
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Andreas Kalt
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
Michael Jendryschik
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
Michael Jendryschik
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz
 
HTML5
HTML5HTML5
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Yves Hoppe
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Eric Eggert
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
Bastian Grimm
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
Andreas Schiweck
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
Hans Mittendorfer
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Digitalisierung als Dienstleistung
Digitalisierung als DienstleistungDigitalisierung als Dienstleistung
Digitalisierung als Dienstleistung
Stefan Krause
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
djesse
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
Michael Kollmannsberger
 
Suchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für ProfessorenSuchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für Professoren
Pascal Kremp
 
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Timon Hartung
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 

Ähnlich wie Türme bauen mit Schildbürgern (Webtech Edition) (20)

Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
 
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im ProjektalltagFür Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
HTML5
HTML5HTML5
HTML5
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Digitalisierung als Dienstleistung
Digitalisierung als DienstleistungDigitalisierung als Dienstleistung
Digitalisierung als Dienstleistung
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
Suchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für ProfessorenSuchmaschinenoptimierung für Professoren
Suchmaschinenoptimierung für Professoren
 
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 

Mehr von Nicolai Schwarz

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
Nicolai Schwarz
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Nicolai Schwarz
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
Nicolai Schwarz
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
Nicolai Schwarz
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
Nicolai Schwarz
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
Nicolai Schwarz
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Nicolai Schwarz
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
Nicolai Schwarz
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
Nicolai Schwarz
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
Nicolai Schwarz
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
Nicolai Schwarz
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 

Mehr von Nicolai Schwarz (13)

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 

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

  • 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}$
  • 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?
  • 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)