Projektwerkstatt: Wireframe Checker

Lesetipps

1. Projektwerkstatt: Journaling-Proxy
2. Projektwerkstatt: Status Quo
3. Projektwerkstatt: Testing Company

Nachdem wir gestern einen kleinen Abstecher – ich hoffe ihr habt den Tag ausgehalten – in die Politik gemacht haben, wollen wir uns heute wieder der Webentwicklung widmen. Vorab nur noch ein kleiner Tipp: Schaut euch mal Ralf Eggerts neuen Blog an. Könnte interessant sein, wenn ihr ein wenig mit dem Zend Framework rumhantiert.Heute geht es mal wieder um eine Projektidee, bei der ich mir noch nicht ganz so sicher bin, ob es eine gute Idee ist, aber ich denke mal zusammen werden wir schon was Schönes daraus machen. So erstmal zu dem Problem, dass wir lösen wollen. Wir haben eine Webseite, die bekommt Teile des Inhalts aus einem CMS und auch Teile werden einfach berechnet. Jetzt wollen wir feststellen, ob die Webseite alle wichtigen Inhalte auch anzeigt oder ob vielleicht eine Kommentarbox fehlt oder der Title-Tag nicht gefüllt ist. Funktionale Tests zum Beispiel mit Selenium sind nicht immer nützlich, denn manchmal hat man keine stabilen Seiten und muss sehr unscharfe Tests entwerfen. Ein Test wie “der Artikel muss mindestens 500 Zeichen lang sein” ist mit Selenium nicht so einfach, besonders, wenn man den Testfall dann später nach PHP exportiert (da fällt mir übrigens spontan ein Artikel für Montag ein). Ein weiterer Test könnte heißen “ist das Wireframe - also das Grundgerüst- korrekt aufgebaut”. Mit Selenium die Hölle, da ich wirklich viele Tests schreiben muss.

Meine Idee wäre jetzt eine Sprache zu nehmen, die eine Webseite mit ihren Eigenschaften beschreibt. Als Grundlage dient natürlich HTML, erweitert mit ein paar Attributen. Ich versuche mich einmal aneiner Definition:

<div id="menu" wfc:optional="true">
 <div class="menu_element" wfc:minOccur="4">
 </div>
</div>
<div id="content" wfc:minLength="500">
</div>

Jetzt könnte man ganz einfach das Tool so aufbauen, dass hinter jedem Attribut ein Test steht, der dann prüft, ob die gewünschte Bedingung erfüllt wird. Als Parameter bekommt der Test dann – wie beim PHP_CodeSniffer- einen Zeiger auf das aktuelle “div” (oder was auch immer). Jetzt wo ich so darüber nachdenke, könnte man bestimmt auch sehr viel über XSDs erledigen. Wobei ich glaube, dass dort die Syntax zu komplex bei wird, um es wirklich zu genießen.

Auf jeden Fall würde man dann so ein Schema nehmen können und gegen jede beliebige Webseite validieren. Leider wäre das System ähnlich instabil, wie funktionale Tests mit Selenium, da sich so ein Wireframe heutzutage gerne mal ändert. Aber vielleicht muss man da dann strenger mit Änderungen umgehen.

Ich denke, es kann schon nützlich sein, so ein Tool zur Verfügung zu haben. Besonders würde es an vielen Stellen Selenium ersetzen, das ich für eines der besten und auch gleichzeitig schrecklichsten Tools der letzten Zeit (und zu der Aussage will ich mindestens einen Kommentar sehen, der Autor weiß schon, dass er gemeint ist) halte.

7 Kommentare »

• 
  

  Bastian

  am 25. September 2009 um 08:20 Uhr

  Ich denke die Prüfung einer wie in deinem Beispiel angedachten Datei ließe sich am Besten mit XSL erledigen.

• 
  

  Nils Langner

  am 25. September 2009 um 08:51 Uhr

  @Bastian: Ja? Wie würdest du sowas in XSL angehen? XSD wäre mein Ansatz hier gewesen, weil man wirklich validieren kann. Ich hab mit XSL noch nicht wirklich gearbeitet. Wie würdest du z.B. definieren, wie dass ein Element mindestens 500 Zeichen lang sein muss?

• 
  

  Bastian

  am 25. September 2009 um 10:00 Uhr

  @Nils: ist bei mir auch ein paar Jährchen her, leider. XSD ist prinzipiell gut dafür geeignet die Struktur eines Dokumentes zu validieren. “Minoccur” gibt es da ja sogar bereits als Definition. Du müsstest allerdings dein Komplettes Dokument durch definieren und könntest IMHO nicht einfach an ein paar Elemente Attribute hängen, die definieren, dass hier was validiert werden soll.

  Bei XSL kannst du einfach dein fertiges Dokument nehmen und auf deine Attribute prüfen und dann validieren. Funktionen wie count und length und sowas gibts dank XPath auch in XSL, so dass du eigentlich alles machen könntest was du willst.

  Als Ergebnis des XSL-Dokumentes kannst du ähnlich dem W3C-Validator eine Auswertung ausgeben lassen in der alle notwendigen Hinweise stehen.

• 
  

  Stefan Graupner

  am 25. September 2009 um 10:45 Uhr

  Also, mal abgesehen davon, dass die Aufgabe sowohl mit XSD, als auch mit XSL gut lösbar ist, finde ich beide Ansätze nicht wirklich begeisternd. Lieber wäre mir da eine Möglichkeit in wirklich einfacher Form Regelsätze definieren zu können, die dann für beliebig Viele Dokumente geparst werden.
  Markup-Dokumente werden ja doch in der Regel recht schnell recht unübersichtlich, daher kann ich mir da ein schnuckliges kleines (PHP-)Framework als mittler zwischen Regelsatz (zum Beispiel auch als PHP-Dokument, oder in relativ einfacher YAML-Struktur, irgendwas, was schnell erstellbar ist eben) und zu prüfendem Code vorstellen.

• 
  

  Don

  am 25. September 2009 um 12:14 Uhr

  “Artikel muss mindestens 500 Zeichen lang sein”
  Was ist denn das für ein Artikel, der 500 Zeichen lang ist.
  Gibt es einen Shop, in dem man Sätze kaufen kann?
  

• 
  

  Nils Langner

  am 25. September 2009 um 12:54 Uhr

  @Don: Naja das sind einfache redaktionelle Vorgaben. Haben wir hier bei phphatesme ja auch oder haste hier mal einen Artikel gesehen, der kürzer war als 100 Zeichen?

• 
  

  Martin

  am 25. September 2009 um 13:26 Uhr

  Vermutlich muss man auch auf Frontend Seite eine Testcascade aufbauen wie auf php-Seite (Unit-Tests für HTML&CSS (und ich meine nicht den htmlunit Pseudobrowser)und Selenium für Functional Tests). Finde übrigens Selenium als das Beste Tool der letzten Zeit . Es ist halt nur noch nicht sehr stabil. Und ja man kann es für HTML&CSS Testing missbrauchen und dann kann man den Eindruck des Autors gewinnen.
  Der einfachste Weg zu einer guten Webseite ist IMHO ein solider HTML&CSS struktureller Wireframe. Mein Positivbeispiel ist immer http://www.bbc.co.uk/ (gerne auch mal mit HTML Validator prüfen).

RSS Feed für Kommentare zu diesem Artikel. TrackBack URL

Hinterlasse einen Kommentar