<ul>Michael Tamm | optivo GmbH </ul><ul>Fighting Layout Bugs </ul>
Worum geht's? <ul><li>2 Folien Einführung
Drei alte bekannte Gegenmaßnahmen
Neue innovative Gegenmaßnahmen </li></ul>
Wer bin ich? Michael Tamm Systemarchitekt QA Automation Expert Selenium Committer Conference Speaker Autor für die c't und...
Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
Worum geht's? <ul><li>2 Folien Einführung
Drei alte bekannte Gegenmaßnahmen
Neue innovative Gegenmaßnahmen </li></ul>
Idee #1 Layout-Fehler vermeiden,  indem man immer  valides HTML ausliefert.
Wie? <ul><li>Browser Extension </li><ul><li>Funktioniert nur in einem Browser
Läßt den CI-Build nicht fehlschlagen </li></ul></ul>
Wie? <ul><li>Automatische Validierung als Bestandteil des CI-Builds </li><ul><li>Option 1:  Ein separater Test, der die en...
Option2:  Innerhalb bereits existierender Frontend-Tests </li></ul></ul>
W3C Markup Validation Service
W3C Markup Validation Service
W3C Markup Validation Service
W3C Markup Validation Service
Schnelleres Feedback möglich?
Schnelleres Feedback möglich! <ul><li>Mit einem javax.servlet.Filter </li><ul><li>Voraussetzung:  HTML-Entwickler benutzt ...
Funktioniert in allen Browsern </li></ul></ul>
W3CMarkupValidationFilter
Demo
Demo
Demo
Demo
Demo
Ads <ul><li>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. </li></ul>
 
Idee #2 Layout-Fehler vermeiden,  indem man immer  valides CSS ausliefert.
CSS Validation Service
 
 
Idee #3 Layout-Fehler vermeiden,  indem man auf gültige Bild-URLs überprüft.
DetectInvalidImageUrls <ul><li>Ü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 </li></ul>http://fighting-layout-bugs.googlecode.com
 
Worum geht's? <ul><li>2 Folien Einführung
Drei alte bekannte Gegenmaßnahmen
Neue innovative Gegenmaßnahmen </li></ul>
 
 
 
 
 
 
 
 
 
Idee #4 Layout-Fehler entdecken,  indem man die menschliche Wahrnehmung simuliert.
 
 
 
 
 
 
SimpleTextDetector <ul><li>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 </li></ul>http://fighting-layout-bugs.googlecode.com
 
 
 
 
SimpleEdgeDetector <ul><li>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 ä...
 
 
 
 
Demo
 
DetectTextWithTooLowContrast http://fighting-layout-bugs.googlecode.com <ul><li>Textpixel identifizieren (wie bereits gese...
Überprüfen, ob Kontrast zwischen Textpixeln und Hintergrundpixeln groß genug ist </li></ul>
 
http://fighting-layout-bugs.googlecode.com/ <ul><li>DetectInvalidImageUrls
DetectNeedsHorizontalScrolling
DetectTextNearOrOverlappingHorizontalEdge
DetectTextNearOrOverlappingVerticalEdge
DetectTextWithTooLowContrast </li></ul>
Integration in den Entwicklungsprozess <ul><li>Nigthly Build
Option 1:  separater Frontend-Test, der verschiedene wohldefinierte Seiten untersucht
Option 2:  An ausgewählten Punkten in bereits bestehenden Frontend-Tests </li></ul>
Fehlerhafte Texterkennung durch Animation auf der zu analysierenden Seite ...
 
 
 
Nächste SlideShare
Wird geladen in …5
×

Fighting Layout Bugs (webinale 2011)

2.147 Aufrufe

Veröffentlicht am

German presentation about automatic detection of layout bugs in web pages.

Veröffentlicht in: Technologie, Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.147
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Fighting Layout Bugs (webinale 2011)

  1. 1. <ul>Michael Tamm | optivo GmbH </ul><ul>Fighting Layout Bugs </ul>
  2. 2. Worum geht's? <ul><li>2 Folien Einführung
  3. 3. Drei alte bekannte Gegenmaßnahmen
  4. 4. Neue innovative Gegenmaßnahmen </li></ul>
  5. 5. Wer bin ich? Michael Tamm Systemarchitekt QA Automation Expert Selenium Committer Conference Speaker Autor für die c't und iX
  6. 6. Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
  7. 7. Worum geht's? <ul><li>2 Folien Einführung
  8. 8. Drei alte bekannte Gegenmaßnahmen
  9. 9. Neue innovative Gegenmaßnahmen </li></ul>
  10. 10. Idee #1 Layout-Fehler vermeiden, indem man immer valides HTML ausliefert.
  11. 11. Wie? <ul><li>Browser Extension </li><ul><li>Funktioniert nur in einem Browser
  12. 12. Läßt den CI-Build nicht fehlschlagen </li></ul></ul>
  13. 13. Wie? <ul><li>Automatische Validierung als Bestandteil des CI-Builds </li><ul><li>Option 1: Ein separater Test, der die entscheidenen Seiten Ihrer Website überprüft.
  14. 14. Option2: Innerhalb bereits existierender Frontend-Tests </li></ul></ul>
  15. 15. W3C Markup Validation Service
  16. 16. W3C Markup Validation Service
  17. 17. W3C Markup Validation Service
  18. 18. W3C Markup Validation Service
  19. 19. Schnelleres Feedback möglich?
  20. 20. Schnelleres Feedback möglich! <ul><li>Mit einem javax.servlet.Filter </li><ul><li>Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty
  21. 21. Funktioniert in allen Browsern </li></ul></ul>
  22. 22. W3CMarkupValidationFilter
  23. 23. Demo
  24. 24. Demo
  25. 25. Demo
  26. 26. Demo
  27. 27. Demo
  28. 28. Ads <ul><li>Müssen Sie invalides HTML von externen Quellen in Ihre Seiten einbinden?
  29. 29. Option 1: Fügen Sie einen Switch zum Ausschalten aller Ads zu Ihrer Web-applikation hinzu.
  30. 30. Option 2: Erweitern Sie den W3CMarkupValidationFilter so, dass er vor der Validierung alle Ads entfernt. </li></ul>
  31. 32. Idee #2 Layout-Fehler vermeiden, indem man immer valides CSS ausliefert.
  32. 33. CSS Validation Service
  33. 36. Idee #3 Layout-Fehler vermeiden, indem man auf gültige Bild-URLs überprüft.
  34. 37. DetectInvalidImageUrls <ul><li>Überprüft HTML auf sichtbare <img>- Elemente ohne oder mit ungültigen src-Attribut
  35. 38. Überprüft CSS (style-Attribute, <style>-Elemente, eingebundene Stylesheets) auf ungültige Bild-URLs
  36. 39. Überprüft die URL für das Favicon </li></ul>http://fighting-layout-bugs.googlecode.com
  37. 41. Worum geht's? <ul><li>2 Folien Einführung
  38. 42. Drei alte bekannte Gegenmaßnahmen
  39. 43. Neue innovative Gegenmaßnahmen </li></ul>
  40. 53. Idee #4 Layout-Fehler entdecken, indem man die menschliche Wahrnehmung simuliert.
  41. 60. SimpleTextDetector <ul><li>jQuery wird in die zu analysierende Seite injected
  42. 61. jQuery('*').css('color', '#000000');
  43. 62. ein Screenshot wird erstellt
  44. 63. jQuery('*').css('color', '#fffff');
  45. 64. es wird ein zweiter Screenshot erstellt
  46. 65. Vergleich beider Screenshots: unterschiedliche Pixel sind Textpixel </li></ul>http://fighting-layout-bugs.googlecode.com
  47. 70. SimpleEdgeDetector <ul><li>jQuery wird in die zu analysierende Seite injected
  48. 71. jQuery('*').css('color', 'transparent');
  49. 72. ein Screenshot wird erstellt
  50. 73. Bestimmen der Kandidaten für vertikale / horizontale Kanten: alle Pixelpaare mit hohem Kontrast
  51. 74. Bestimmen der vertikale / horizontale Kanten: alle vertikalen / horizontalen Sequenzen in den gefundenen Kandidaten mit ähnlicher Farbe und einer gewissen Mindestlänge </li></ul>http://fighting-layout-bugs.googlecode.com
  52. 79. Demo
  53. 81. DetectTextWithTooLowContrast http://fighting-layout-bugs.googlecode.com <ul><li>Textpixel identifizieren (wie bereits gesehen)
  54. 82. Überprüfen, ob Kontrast zwischen Textpixeln und Hintergrundpixeln groß genug ist </li></ul>
  55. 84. http://fighting-layout-bugs.googlecode.com/ <ul><li>DetectInvalidImageUrls
  56. 85. DetectNeedsHorizontalScrolling
  57. 86. DetectTextNearOrOverlappingHorizontalEdge
  58. 87. DetectTextNearOrOverlappingVerticalEdge
  59. 88. DetectTextWithTooLowContrast </li></ul>
  60. 89. Integration in den Entwicklungsprozess <ul><li>Nigthly Build
  61. 90. Option 1: separater Frontend-Test, der verschiedene wohldefinierte Seiten untersucht
  62. 91. Option 2: An ausgewählten Punkten in bereits bestehenden Frontend-Tests </li></ul>
  63. 92. Fehlerhafte Texterkennung durch Animation auf der zu analysierenden Seite ...
  64. 98. Umgang mit „Fehlalarmen“ <ul><li>Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten </li></ul>
  65. 101. Umgang mit „Fehlalarmen“ <ul><li>Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
  66. 102. Option 2: Bestimmte HTML-Elemente ausschließen </li></ul>
  67. 103. Weitere typische Layoutfehler ...
  68. 106. Idee #5 Layout-Fehler entdecken, indem man den angezeigten Text auf verdächtige Muster prüft.
  69. 115. Idee #6 Layout-Fehler entdecken, indem man Screenshots von verschiedenen Browsern vergleicht.
  70. 117. Idee #7 Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für bekannte Layout-Fehler schreibt.
  71. 124. Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagen automatische Akzeptanztests ableitet.
  72. 125. Danke für Ihre Aufmerksamkeit <ul><li>http://validator.w3.org/
  73. 126. http://w3c-markup-validation-filter.googlecode.com/
  74. 127. http://jigsaw.w3.org/css-validator/
  75. 128. http://selenium.googlecode.com/
  76. 129. http://fighting-layout-bugs.googlecode.com/
  77. 130. [email_address] </li></ul>

×