Fighting-layout-bugs Layout bugs - Wie man sie findet und erfolgreich bekämpft
Gliederung 2 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen
1) Einführung 3 Circa 50% der Entwicklungszeit eines Projekts sind Testing und Bugfixing zuzuordnen Hauptproblem besteht zumeist darin, Bugs ausfindig zu machen Soll vermieden werden, dass der Benutzer die Bugs mitbekommen, bevor sie gefixt werden können Logische und semantische Fehler sind zumeist die schwerwiegendsten, aber auch Layout-Bugs sollten gefixt werden Denn - Impliziert Unprofessionalität - Schränkt Funktionalitäten ggf. ein - Verwirrt Benutzer
1) Einführung: Wodurch kommen Layout-Bugs im Web zustande? 4 Falschinterpretation des HTML-Codes bedingt durch fehlerhaftes, nichtvalides HTML Unterschiedliche Interpretation des HTML-Codes durch verschiedene Browser - Historisch bedingt: 1992 Veröffentlichung der Ursprungsversion von HTML - 1994 Browserentwickler Netscape und Microsoft erkennen Bedeutung des WWW Implementieren browsereigene HTML-Elemente - Versuch neue Sprachelemente in Standard zu fassen scheiterte mehrmals (HTML+, HTML 3.0) Trotz richtiger Interpretation des HTML-Codes erscheint Layout nicht wie angedacht und somit für Benutzer suboptimal und fehlerhaft
1) Einführung: Auch bekannte Seiten kämpfen mit Layout-Bugs 5 [ http://www.microsoft.com/germany/newsletter/default.mspx ]
1) Einführung: Auch bekannte Seiten kämpfen mit Layout-Bugs 6 Firefox 4 Google Chrome [ http://www.zdf.de ]
Gliederung 7 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen
2) Erste Schritte: Code-Validierung gegen Bugs 8 Code-Validierung beugt vielen Layout-Bugs vor, die aufgrund von Falschinterpretation zustande kommen (1) HTML-Validierung [ http://validator.w3.org/ ] HTML 4.01, XHTML 1.0, XHTML 1.1, HTML 5, (2) CSS-Validierung [ http://jigsaw.w3.org/css-validator/ ] CSS Level 1, Level 2, Level 2.1, Level 3,
2) Erste Schritte: Code-Validierung gegen Bugs 9 Demo
Gliederung 10 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen
3) Fighting Layout Bugs - a library for automatic detection of layout bugs 11 Anzeigefehler zu finden, die trotz validem Markup auftreten, ist sehr umständlich 1. Möglichkeit: Jede Seite einzeln nach Layout-Bugs durchsuchen Probleme: Regelmäßige Kontrollen bei Änderungen / Erweiterungen notwendig Seiten müssen in jedem Browser geprüft werden 2. Möglichkeit: Versuchen, häufig auftretende Arten von Layout-Bugs genau zu definieren und nach ihnen zu suchen Möglichkeit, in ganzen Sitemaps regelmäßig und per Software automatisiert nach Layout-Bugs in verschiedenen Browsern zu durchsuchen
3) Fighting Layout Bugs - a library for automatic detection of layout bugs 12 Java-Bibliothek zur automatischen Erkennung von Layout-Bugs Fighting layout bugs - a library for automatic detection of layout bugs in web pages. Entwickler: Michael Tamm Auf der Google Test Automation Conference im Oktober 2009 als Google Code Projekt vorgestellt und online frei zu Verfügung gestellt Bedient sich der drei in Selenium implementierten WebDriver für Google Chrome, Firefox und InternetExplorer Seitdem regelmäßige Updates
3) Fighting Layout Bugs - Überblick über erkannte Bugsorten 13 Bisher fünf Bug-Detectors implementiert: DetectTextWithTooLowContrast DetectTextNearOrOverlappingHorizontalEdge DetectTextNearOrOverlappingVerticalEdge DetectNeedsHorizontalScrolling DetectInvalidImageUrls
3) Fighting Layout Bugs Funktionsweise der Bug-Detection 14 Generelle Funktionsweise: Vergleich von Screenshots der mit jquery bearbeiteten Seite Die Sicht des Nutzers wird simuliert Unterschiedliche Webelemente werden durch verschiedene Vergleiche wie z.b. verschiedene jquery-injections identifiziert $( * ).css( color, #FFFFFF ); $( * ).css( color, #000000 ); Unterschiedliche Pixel sind Text Ähnliche Mechanismen bei Identifikation von Layout-Komponenten: Vergleich von Farbwerten in der Umgebung
Gliederung 15 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen
4) Die Detection-Bibliothek in der Praxis 16 Demo
4) Die Detection-Bibliothek in der Praxis 17 Weitere Möglichkeiten: Quellcode auslesen, interne Links feststellen und umfangreiche Seiten automatisch prüfen Pixelvergleich von Screenshots aus verschiedenen WebDrivern à Erkennung von unterschiedlichen Darstellungen Bekannte Probleme: Hover-Effekte und von Nutzeraktionen abhängige Layout-Elemente können noch nicht ausgewertet werden Animationen und Farbverläufe triggern oft fälschlicherweise BugDetection
Quellen 18 [ http://code.google.com/p/fighting-layout-bugs/ ] [ http://www.slideshare.net/michaeltamm/fighting-layout-bugs ] [ http://webdesign.about.com/ ] [ http://www.w3.org/ ]