Fighting Layout Bugs

1,226 views

Published on

Vortrag von Michael Tamm am 12. Oktober 2011 vor der JUG Berlin-Brandenburg zum Thema Layoutfehler in Webseiten.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,226
On SlideShare
0
From Embeds
0
Number of Embeds
198
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fighting Layout Bugs

  1. 1. Michael Tamm | optivo GmbHFighting Layout Bugs
  2. 2. 2 / 117 Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
  3. 3. 3 / 117Wer bin ich? Michael Tamm Systemarchitekt QA Automation Expert Selenium Committer Conference Speaker Autor für die ct und iX
  4. 4. 4 / 117Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
  5. 5. 5 / 117 Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
  6. 6. 6 / 117 Idee #1Layout-Fehler vermeiden, indem man immer valides HTML ausliefert.
  7. 7. 7 / 117 Wie?• HTML während des Builds überprüfen – Funktioniert nicht für dynamisch erzeugtes HTML.
  8. 8. 8 / 117 Wie?• Browser Extension – (Funktioniert nur in einem Browser.) – (Muss manuell getriggert werden.) – Läßt den CI-Build nicht fehlschlagen.
  9. 9. 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
  10. 10. 10 / 117W3C Markup Validation Service
  11. 11. 11 / 117W3C Markup Validation Service
  12. 12. 12 / 117W3C Markup Validation Service
  13. 13. 13 / 117W3C Markup Validation Service
  14. 14. 14 / 117Schnelleres Feedback möglich?
  15. 15. 15 / 117Schnelleres Feedback möglich!• Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
  16. 16. 16 / 117W3CMarkupValidationFilter
  17. 17. 17 / 117How it works: – Inside the doFilter method: responseWrapper = new TeeHttpServletResponse(response); filterChain.doFilter(request, responseWrapper); – The TeeHttpServletReponse writes the reponse a) immediatly back to the browser and b) 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.
  18. 18. 18 / 117Demo
  19. 19. 19 / 117Demo
  20. 20. 20 / 117Demo
  21. 21. 21 / 117Demo
  22. 22. 22 / 117Demo
  23. 23. 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.
  24. 24. 24 / 117
  25. 25. 25 / 117 Idee #2Layout-Fehler vermeiden, indem man immer valides CSS ausliefert.
  26. 26. 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 CSS zu überprüfen ist besser als gar kein CSS zu überprüfen.
  27. 27. 27 / 117 Wie?• Browser Extension – (Funktioniert nur in einem Browser.) – (Muss manuell getriggert werden.) – Läßt den CI-Build nicht fehlschlagen.
  28. 28. 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
  29. 29. 29 / 117CSS Validation Service
  30. 30. 30 / 117Hinweise zum CSS Validation Service – Beschwert sich über einige CSS-Hacks wie: ... { *display: ... } – Beschwert sich nicht über: * html ... { ... } – Beschwert sich über unbekannte CSS-Properties / -Werte wie beispielsweise: ... { -moz-border-radius: ... } ... { filter: progid:DXImageTransform.... } ... { ...: expression(...) }
  31. 31. 31 / 117
  32. 32. 32 / 117
  33. 33. 33 / 117Schnelleres Feedback möglich!• Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
  34. 34. 34 / 117
  35. 35. 35 / 117
  36. 36. 36 / 117 Idee #3Layout-Fehler vermeiden, indem man auf gültige Bild-URLs überprüft.
  37. 37. 37 / 117 http://fighting-layout-bugs.googlecode.com DetectInvalidImageUrls• Überprüft HTML auf sichtbare <img>- Elemente ohne oder mit ungültigen src-Attribut• Überprüft CSS (style-Attribute, <style>-Elemente, eingebundene Stylesheets) auf ungültige Bild-URLs• Überprüft die URL für das Favicon
  38. 38. 38 / 117
  39. 39. 39 / 117
  40. 40. 40 / 117 Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
  41. 41. 41 / 117
  42. 42. 42 / 117
  43. 43. 43 / 117
  44. 44. 44 / 117
  45. 45. 45 / 117
  46. 46. 46 / 117
  47. 47. 47 / 117
  48. 48. 48 / 117
  49. 49. 49 / 117
  50. 50. 50 / 117 Idee #4 Layout-Fehler entdecken,indem man die menschliche Wahrnehmung simuliert.
  51. 51. 51 / 117
  52. 52. 52 / 117
  53. 53. 53 / 117
  54. 54. 54 / 117
  55. 55. 55 / 117
  56. 56. 56 / 117
  57. 57. 57 / 117 http://fighting-layout-bugs.googlecode.com 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
  58. 58. 58 / 117
  59. 59. 59 / 117
  60. 60. 60 / 117
  61. 61. 61 / 117
  62. 62. 62 / 117 http://fighting-layout-bugs.googlecode.com 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 den gefundenen Kandidaten mit ähnlicher Farbe und einer gewissen Mindestlänge
  63. 63. 63 / 117
  64. 64. 64 / 117
  65. 65. 65 / 117
  66. 66. 66 / 117
  67. 67. 67 / 117Demo
  68. 68. 68 / 117
  69. 69. 69 / 117 http://fighting-layout-bugs.googlecode.comDetectTextWithTooLowContrast • Textpixel identifizieren (wie bereits gesehen) • Überprüfen, ob Kontrast zwischen Textpixeln und Hintergrundpixeln groß genug ist
  70. 70. 70 / 117http://fighting-layout-bugs.googlecode.com/ • DetectInvalidImageUrls • DetectTextNearOrOverlappingHorizontalEdge • DetectTextNearOrOverlappingVerticalEdge • DetectTextWithTooLowContrast
  71. 71. 71 / 117http://fighting-layout-bugs.googlecode.com/ • Wird bereits eingesetzt bei AOL, 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
  72. 72. 72 / 117 Integration in den Entwicklungsprozess• Nigthly Build• Option 1: separater Frontend-Test, der verschiedene wohldefinierte Seiten untersucht• Option 2: An ausgewählten Punkten in bereits bestehenden Frontend-Tests
  73. 73. 73 / 117Fehlerhafte Texterkennung durch Animation auf derzu analysierenden Seite ...
  74. 74. 74 / 117
  75. 75. 75 / 117
  76. 76. 76 / 117
  77. 77. 77 / 117
  78. 78. 78 / 117
  79. 79. 79 / 117 Umgang mit „Fehlalarmen“• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
  80. 80. 80 / 117
  81. 81. 81 / 117
  82. 82. 82 / 117 Umgang mit „Fehlalarmen“• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten• Option 2: Bestimmte HTML-Elemente ausschließen
  83. 83. 83 / 117Weitere typischeLayoutfehler ...
  84. 84. 84 / 117
  85. 85. 85 / 117
  86. 86. 86 / 117
  87. 87. 87 / 117 Idee #5 Layout-Fehler entdecken,indem man den angezeigten Text auf verdächtige Muster prüft.
  88. 88. 88 / 117
  89. 89. 89 / 117
  90. 90. 90 / 117
  91. 91. 91 / 117
  92. 92. 92 / 117
  93. 93. 93 / 117
  94. 94. 94 / 117
  95. 95. 95 / 117
  96. 96. 96 / 117
  97. 97. 97 / 117 Idee #6 Layout-Fehler entdecken, indem man Screenshots vonverschiedenen Browsern vergleicht.
  98. 98. 98 / 117
  99. 99. 99 / 117
  100. 100. 100 / 117
  101. 101. 101 / 117 Idee #7Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für bekannte Layout-Fehler schreibt.
  102. 102. 102 / 117
  103. 103. 103 / 117
  104. 104. 104 / 117
  105. 105. 105 / 117
  106. 106. 106 / 117
  107. 107. 107 / 117
  108. 108. 108 / 117 Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagenautomatische Akzeptanztests ableitet.
  109. 109. 109 / 117 Beispiele• Ist das Logo / die Hauptnavigation auf 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?
  110. 110. 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
  111. 111. 111 / 117One more thing ...
  112. 112. 112 / 117 One more thing ... Usability-Fehlerdurch automatische Tests erkennen.
  113. 113. 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
  114. 114. 114 / 117
  115. 115. 115 / 117
  116. 116. 116 / 117
  117. 117. 117 / 117Danke 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/• mail@michaeltamm.de

×