Advertisement
Check these out next
Fighting Layout Bugs (webinale 2011)
Jun. 1, 2011•0 likes•1,717 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Design
German presentation about automatic detection of layout bugs in web pages.
Michael TammFollow
System Architect at optivo GmbHAdvertisement
Fighting Layout Bugs (webinale 2011)
- Michael Tamm | optivo GmbH Fighting Layout Bugs
- 2 / 95 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
- 3 / 95 Wer bin ich? Michael Tamm Systemarchitekt QA Automation Expert Selenium Committer Conference Speaker Autor für die c't und iX
- 4 / 95 Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
- 5 / 95 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
- 6 / 95 Idee #1 Layout-Fehler vermeiden, indem man immer valides HTML ausliefert.
- 7 / 95 Wie? • Browser Extension – Funktioniert nur in einem Browser – Läßt den CI-Build nicht fehlschlagen
- 8 / 95 Wie? • Automatische 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
- 9 / 95 W3C Markup Validation Service
- 10 / 95 W3C Markup Validation Service
- 11 / 95 W3C Markup Validation Service
- 12 / 95 W3C Markup Validation Service
- 13 / 95 Schnelleres Feedback möglich?
- 14 / 95 Schnelleres Feedback möglich! • Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
- 15 / 95 W3CMarkupValidationFilter
- 16 / 95 Demo
- 17 / 95 Demo
- 18 / 95 Demo
- 19 / 95 Demo
- 20 / 95 Demo
- 21 / 95 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.
- 22 / 95
- 23 / 95 Idee #2 Layout-Fehler vermeiden, indem man immer valides CSS ausliefert.
- 24 / 95 CSS Validation Service
- 25 / 95
- 26 / 95
- 27 / 95 Idee #3 Layout-Fehler vermeiden, indem man auf gültige Bild-URLs überprüft.
- 28 / 95 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
- 29 / 95
- 30 / 95 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
- 31 / 95
- 32 / 95
- 33 / 95
- 34 / 95
- 35 / 95
- 36 / 95
- 37 / 95
- 38 / 95
- 39 / 95
- 40 / 95 Idee #4 Layout-Fehler entdecken, indem man die menschliche Wahrnehmung simuliert.
- 41 / 95
- 42 / 95
- 43 / 95
- 44 / 95
- 45 / 95
- 46 / 95
- 47 / 95 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
- 48 / 95
- 49 / 95
- 50 / 95
- 51 / 95
- 52 / 95 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
- 53 / 95
- 54 / 95
- 55 / 95
- 56 / 95
- 57 / 95 Demo
- 58 / 95
- 59 / 95 http://fighting-layout-bugs.googlecode.com DetectTextWithTooLowContrast • Textpixel identifizieren (wie bereits gesehen) • Überprüfen, ob Kontrast zwischen Textpixeln und Hintergrundpixeln groß genug ist
- 60 / 95
- 61 / 95 http://fighting-layout-bugs.googlecode.com/ • DetectInvalidImageUrls • DetectNeedsHorizontalScrolling • DetectTextNearOrOverlappingHorizontalEdge • DetectTextNearOrOverlappingVerticalEdge • DetectTextWithTooLowContrast
- 62 / 95 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
- 63 / 95 Fehlerhafte Texterkennung durch Animation auf der zu analysierenden Seite ...
- 64 / 95
- 65 / 95
- 66 / 95
- 67 / 95
- 68 / 95
- 69 / 95 Umgang mit „Fehlalarmen“ • Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
- 70 / 95
- 71 / 95
- 72 / 95 Umgang mit „Fehlalarmen“ • Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten • Option 2: Bestimmte HTML-Elemente ausschließen
- 73 / 95 Weitere typische Layoutfehler ...
- 74 / 95
- 75 / 95
- 76 / 95 Idee #5 Layout-Fehler entdecken, indem man den angezeigten Text auf verdächtige Muster prüft.
- 77 / 95
- 78 / 95
- 79 / 95
- 80 / 95
- 81 / 95
- 82 / 95
- 83 / 95
- 84 / 95
- 85 / 95 Idee #6 Layout-Fehler entdecken, indem man Screenshots von verschiedenen Browsern vergleicht.
- 86 / 95
- 87 / 95 Idee #7 Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für bekannte Layout-Fehler schreibt.
- 88 / 95
- 89 / 95
- 90 / 95
- 91 / 95
- 92 / 95
- 93 / 95
- 94 / 95 Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagen automatische Akzeptanztests ableitet.
- 95 / 95 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/ • mail@michaeltamm.de
Advertisement