fighting layout bugs (jug-bb 2011)
DESCRIPTION
German presentation about automatic detection of layout bugs in web pages.TRANSCRIPT
![Page 1: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/1.jpg)
Michael Tamm | optivo GmbH
Fighting Layout Bugs
![Page 2: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/2.jpg)
2 / 117
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
![Page 3: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/3.jpg)
3 / 117
Wer bin ich?
Michael Tamm
SystemarchitektQA Automation ExpertSelenium CommitterConference SpeakerAutor für die c't und iX
![Page 4: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/4.jpg)
4 / 117
Drei-Schichten-Architektur
Presentation Layer
Business Logic Layer
Persistence Layer
![Page 5: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/5.jpg)
5 / 117
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
![Page 6: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/6.jpg)
6 / 117
Idee #1
Layout-Fehler vermeiden, indem man immer
valides HTML ausliefert.
![Page 7: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/7.jpg)
7 / 117
Wie?• HTML während des Builds überprüfen
– Funktioniert nicht für dynamischerzeugtes HTML.
![Page 8: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/8.jpg)
8 / 117
Wie?• Browser Extension
– (Funktioniert nur in einem Browser.)– (Muss manuell getriggert werden.)– Läßt den CI-Build nicht fehlschlagen.
![Page 9: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/9.jpg)
9 / 117
Wie?• Automatische HTML-Validierung
als Bestandteil des CI-Builds– Option 1: Ein separater Test, der die
entscheidenen Seiten Ihrer Website überprüft.
– Option2: Innerhalb bereits existierender Frontend-Tests
![Page 10: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/10.jpg)
10 / 117
W3C Markup Validation Service
![Page 11: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/11.jpg)
11 / 117
W3C Markup Validation Service
![Page 12: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/12.jpg)
12 / 117
W3C Markup Validation Service
![Page 13: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/13.jpg)
13 / 117
W3C Markup Validation Service
![Page 14: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/14.jpg)
14 / 117
Schnelleres Feedback möglich?
![Page 15: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/15.jpg)
15 / 117
Schnelleres Feedback möglich!
• Mit einem javax.servlet.Filter– Voraussetzung: HTML-Entwickler
benutzt Tomcat oder Jetty– Funktioniert in allen Browsern
![Page 16: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/16.jpg)
16 / 117
W3CMarkupValidationFilter
![Page 17: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/17.jpg)
17 / 117
How it works:– Inside the doFilter method:
responseWrapper = new TeeHttpServletResponse(response);filterChain.doFilter(request, responseWrapper);
– The TeeHttpServletReponse writes the reponsea) immediatly back to the browser andb) into an internal buffer.
– After doFilter returns, the HTML is fetched from, the buffer and send to the W3C Markup Validation Service.
– A small JavaScript snippet is appended to the response (after the closing </html> tag), which displays either a green or a red box, depending on the validation result.
![Page 18: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/18.jpg)
18 / 117
Demo
![Page 19: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/19.jpg)
19 / 117
Demo
![Page 20: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/20.jpg)
20 / 117
Demo
![Page 21: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/21.jpg)
21 / 117
Demo
![Page 22: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/22.jpg)
22 / 117
Demo
![Page 23: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/23.jpg)
23 / 117
Ads
• Müssen Sie invalides HTML von externen Quellen in Ihre Seiten einbinden?
• Option 1: Fügen Sie einen Switch zum Ausschalten aller Ads zu Ihrer Web-applikation hinzu.
• Option 2: Erweitern Sie den W3CMarkupValidationFilter so, dass er vor der Validierung alle Ads entfernt.
![Page 24: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/24.jpg)
24 / 117
![Page 25: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/25.jpg)
25 / 117
Idee #2
Layout-Fehler vermeiden, indem man immer
valides CSS ausliefert.
![Page 26: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/26.jpg)
26 / 117
Wie?• CSS während des Builds überprüfen
– CSS ist nicht nur in *.css-Dateien,sondern auch in HTML-Templates in <style>-Elementen und/oder style-Attributen.
– Trotzdem:Nur eine Teilmenge des CSSzu überprüfen ist besser alsgar kein CSS zu überprüfen.
![Page 27: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/27.jpg)
27 / 117
Wie?• Browser Extension
– (Funktioniert nur in einem Browser.)– (Muss manuell getriggert werden.)– Läßt den CI-Build nicht fehlschlagen.
![Page 28: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/28.jpg)
28 / 117
Wie?• Automatische CSS-Validierung
als Bestandteil des CI-Builds– Option 1: Ein separater Test, der die
entscheidenen Seiten Ihrer Website überprüft.
– Option2: Innerhalb bereits existierender Frontend-Tests
![Page 29: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/29.jpg)
29 / 117
CSS Validation Service
![Page 30: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/30.jpg)
30 / 117
Hinweise zum CSS Validation Service– Beschwert sich über einige CSS-Hacks wie:... { *display: ... }
– Beschwert sich nicht über:* html ... { ... }
– Beschwert sich über unbekannteCSS-Properties / -Werte wie beispielsweise:... { -moz-border-radius: ... }... { filter: progid:DXImageTransform.... } ... { ...: expression(...) }
![Page 31: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/31.jpg)
31 / 117
![Page 32: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/32.jpg)
32 / 117
![Page 33: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/33.jpg)
33 / 117
Schnelleres Feedback möglich!
• Mit einem javax.servlet.Filter– Voraussetzung: HTML-Entwickler
benutzt Tomcat oder Jetty– Funktioniert in allen Browsern
![Page 34: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/34.jpg)
34 / 117
![Page 35: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/35.jpg)
35 / 117
![Page 36: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/36.jpg)
36 / 117
Idee #3
Layout-Fehler vermeiden, indem man auf gültigeBild-URLs überprüft.
![Page 37: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/37.jpg)
37 / 117
DetectInvalidImageUrls
• Überprüft HTML auf sichtbare<img>- Elemente ohne oder mit ungültigen src-Attribut
• Überprüft CSS (style-Attribute,<style>-Elemente, eingebundeneStylesheets) auf ungültige Bild-URLs
• Überprüft die URL für das Favicon
http://fighting-layout-bugs.googlecode.com
![Page 38: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/38.jpg)
38 / 117
![Page 39: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/39.jpg)
39 / 117
![Page 40: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/40.jpg)
40 / 117
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
![Page 41: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/41.jpg)
41 / 117
![Page 42: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/42.jpg)
42 / 117
![Page 43: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/43.jpg)
43 / 117
![Page 44: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/44.jpg)
44 / 117
![Page 45: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/45.jpg)
45 / 117
![Page 46: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/46.jpg)
46 / 117
![Page 47: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/47.jpg)
47 / 117
![Page 48: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/48.jpg)
48 / 117
![Page 49: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/49.jpg)
49 / 117
![Page 50: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/50.jpg)
50 / 117
Idee #4
Layout-Fehler entdecken, indem man die menschliche
Wahrnehmung simuliert.
![Page 51: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/51.jpg)
51 / 117
![Page 52: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/52.jpg)
52 / 117
![Page 53: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/53.jpg)
53 / 117
![Page 54: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/54.jpg)
54 / 117
![Page 55: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/55.jpg)
55 / 117
![Page 56: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/56.jpg)
56 / 117
![Page 57: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/57.jpg)
57 / 117
SimpleTextDetector
• jQuery wird in die zu analysierende Seite injected• jQuery('*').css('color', '#000000');• ein Screenshot wird erstellt• jQuery('*').css('color', '#fffff');• es wird ein zweiter Screenshot erstellt• Vergleich beider Screenshots:
unterschiedliche Pixel sind Textpixel
http://fighting-layout-bugs.googlecode.com
![Page 58: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/58.jpg)
58 / 117
![Page 59: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/59.jpg)
59 / 117
![Page 60: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/60.jpg)
60 / 117
![Page 61: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/61.jpg)
61 / 117
![Page 62: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/62.jpg)
62 / 117
SimpleEdgeDetector• jQuery wird in die zu analysierende Seite injected• jQuery('*').css('color', 'transparent');• ein Screenshot wird erstellt• Bestimmen der Kandidaten für vertikale / horizontale
Kanten: alle Pixelpaare mit hohem Kontrast• Bestimmen der vertikale / horizontale Kanten:
alle vertikalen / horizontalen Sequenzen in dengefundenen Kandidaten mit ähnlicher Farbe undeiner gewissen Mindestlänge
http://fighting-layout-bugs.googlecode.com
![Page 63: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/63.jpg)
63 / 117
![Page 64: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/64.jpg)
64 / 117
![Page 65: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/65.jpg)
65 / 117
![Page 66: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/66.jpg)
66 / 117
![Page 67: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/67.jpg)
67 / 117
Demo
![Page 68: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/68.jpg)
68 / 117
![Page 69: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/69.jpg)
69 / 117
DetectTextWithTooLowContrast
http://fighting-layout-bugs.googlecode.com
• Textpixel identifizieren (wie bereits gesehen)• Überprüfen, ob Kontrast zwischen Textpixeln
und Hintergrundpixeln groß genug ist
![Page 70: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/70.jpg)
70 / 117
http://fighting-layout-bugs.googlecode.com/
• DetectInvalidImageUrls• DetectTextNearOrOverlappingHorizontalEdge• DetectTextNearOrOverlappingVerticalEdge• DetectTextWithTooLowContrast
![Page 71: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/71.jpg)
71 / 117
http://fighting-layout-bugs.googlecode.com/
• Wird bereits eingesetzt beiAOL, eBay, Google, und Yahoo
• Soll(te) mal so etwas wie FindBugs werden:– FindBugs: typische Programmierfehler
in Java-Klassen finden– FLB: typische Layoutfehler
in Webseiten finden• Freue mich über jede Form
von Feedback und/oder Mitarbeit
![Page 72: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/72.jpg)
72 / 117
Integration in den Entwicklungsprozess
• Nigthly Build• Option 1: separater Frontend-Test,
der verschiedene wohldefinierteSeiten untersucht
• Option 2: An ausgewählten Punktenin bereits bestehenden Frontend-Tests
![Page 73: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/73.jpg)
73 / 117
Fehlerhafte Texterkennungdurch Animation auf der
zu analysierenden Seite ...
![Page 74: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/74.jpg)
74 / 117
![Page 75: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/75.jpg)
75 / 117
![Page 76: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/76.jpg)
76 / 117
![Page 77: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/77.jpg)
77 / 117
![Page 78: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/78.jpg)
78 / 117
![Page 79: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/79.jpg)
79 / 117
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
![Page 80: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/80.jpg)
80 / 117
![Page 81: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/81.jpg)
81 / 117
![Page 82: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/82.jpg)
82 / 117
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
• Option 2: Bestimmte HTML-Elemente ausschließen
![Page 83: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/83.jpg)
83 / 117
Weitere typische Layoutfehler ...
![Page 84: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/84.jpg)
84 / 117
![Page 85: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/85.jpg)
85 / 117
![Page 86: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/86.jpg)
86 / 117
![Page 87: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/87.jpg)
87 / 117
Idee #5
Layout-Fehler entdecken, indem man den angezeigten Text
auf verdächtige Muster prüft.
![Page 88: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/88.jpg)
88 / 117
![Page 89: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/89.jpg)
89 / 117
![Page 90: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/90.jpg)
90 / 117
![Page 91: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/91.jpg)
91 / 117
![Page 92: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/92.jpg)
92 / 117
![Page 93: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/93.jpg)
93 / 117
![Page 94: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/94.jpg)
94 / 117
![Page 95: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/95.jpg)
95 / 117
![Page 96: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/96.jpg)
96 / 117
![Page 97: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/97.jpg)
97 / 117
Idee #6
Layout-Fehler entdecken,indem man Screenshots von
verschiedenen Browsern vergleicht.
![Page 98: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/98.jpg)
98 / 117
![Page 99: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/99.jpg)
99 / 117
![Page 100: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/100.jpg)
100 / 117
![Page 101: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/101.jpg)
101 / 117
Idee #7
Zukünftige Layout-Fehler vermeiden, indem man automatische Tests fürbekannte Layout-Fehler schreibt.
![Page 102: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/102.jpg)
102 / 117
![Page 103: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/103.jpg)
103 / 117
![Page 104: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/104.jpg)
104 / 117
![Page 105: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/105.jpg)
105 / 117
![Page 106: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/106.jpg)
106 / 117
![Page 107: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/107.jpg)
107 / 117
![Page 108: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/108.jpg)
108 / 117
Idee #8
Layout-Fehler vermeiden, indem man aus Designvorlagen
automatische Akzeptanztests ableitet.
![Page 109: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/109.jpg)
109 / 117
Beispiele
• Ist das Logo / die Hauptnavigationauf jeder Seite an der gleichen Stelle?
• Läuft Text über die Spalten des für die Seite definierten Grids hinaus?
• Wird an irgendeiner Stelle ein falscher Font benutzt?
![Page 110: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/110.jpg)
110 / 117
Lange Rede, kurzer Sinn:
• Layout-Fehler können mittels automatischer Tests bekämpft werden:– HTML validieren– CSS validieren– Common Detectors von FLB einsetzen– Automatische Tests für erkannte
Layout-Fehler / Designvorlagen schreiben
![Page 111: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/111.jpg)
111 / 117
One more thing ...
![Page 112: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/112.jpg)
112 / 117
One more thing ...
Usability-Fehlerdurch automatische Tests erkennen.
![Page 113: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/113.jpg)
113 / 117
Beispiele
• Man kann einem grafischen Button nicht ansehen, ob er den Fokus hat.
• Ein Button kann nicht via Tabulator-Taste erreicht werden
• Unerwartete Fokus-Reihenfolge beim Elementwechsel via Tabulator-Taste
![Page 114: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/114.jpg)
114 / 117
![Page 115: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/115.jpg)
115 / 117
![Page 116: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/116.jpg)
116 / 117
![Page 117: Fighting Layout Bugs (JUG-BB 2011)](https://reader034.vdocuments.mx/reader034/viewer/2022042715/5594341c1a28ab961a8b4663/html5/thumbnails/117.jpg)
117 / 117
Danke für Ihre Aufmerksamkeit• http://validator.w3.org/• http://w3c-markup-validation-filter.googlecode.com/• http://jigsaw.w3.org/css-validator/• http://selenium.googlecode.com/• http://fighting-layout-bugs.googlecode.com/• http://web-accessibility-testing.googlecode.com/