Kennen Sie eine Vergleichsmöglichkeit für das Erscheinungsbild einer Webseite?

Question

Ich brauche ein Werkzeug, um das Design einer Website zu vergleichen. Ich möchte nicht nur den HTML-Code vergleichen, sondern auch das Ausgabedesign.

Ist dies überhaupt möglich? Gibt es auch ein Open-Source-Programm dieser Art?

Ich habe Google durchsucht, aber ich habe bisher nur einen Kandidaten gefunden, der ein HTML-Match ist.

Answer 1

In modernen Webseiten wird das Erscheinungsbild durch verschiedene "Dinge" gesteuert: HTML-Code, CSS-Stile und Bilder (auf manchen Seiten auch Javascript). Einfache textbasierte Vergleichsprogramme reichen nicht aus, da ihre Ausgabe für das Erscheinungsbild der Webseite irrelevant sein kann (z. B. kann die Bereinigung von CSS viele Unterschiede aufzeigen, aber die gerenderte Webseite bleibt dieselbe).

Für einfachere Seiten könnte das oben erwähnte HTML Match die Aufgabe erfüllen. Wenn ich das Design zweier "komplexer" Seiten (einschließlich Layout-, Platz-, Bild- und Textänderungen) vergleichen muss, würde ich einen zweistufigen Ansatz wählen:

1. Führen Sie ein Diff-Tool für die HTML-Quellen aus, um die Unterschiede im Textinhalt hervorzuheben. Dann würde ich eine der Seiten so ändern, dass sie denselben Inhalt wie die andere Seite zeigt (um den nächsten Schritt genauer und "fokussierter" zu gestalten, damit die "echten" Layoutänderungen angezeigt werden). Natürlich funktioniert das nur bei sehr ähnlichem HTML-Code.
2. Laden Sie die Seiten in denselben Webbrowser, machen Sie einige Screenshots von der gerenderten Ausgabe an festen Positionen und vergleichen Sie die Bilder (z. B. mit ImageMagick ). Sie sollte alle visuellen Unterschiede in der gerenderten Ausgabe zeigen.

Sie ist nicht perfekt, sollte aber funktionieren.

[UPDATE] HTML Match scheint tot zu sein, siehe diese Antwort für eine alternative Lösung.

Answer 2

Lösung: "Webseiten vergleichen" Werkzeug. ("Wir machen das schon seit 1999. Es ist kostenlos.")

Beispielausgabe (Vergleich der Seiten für TP-Link USB-Hub-Modell UH700 y UH720 ):

Answer 3

Unter Windows:

http://www.htmlmatch.com/

Answer 4

Wenn Sie KDE verwenden, können Sie Kompare o KDiff3 .

Wenn Sie jedoch sehen möchten, wie Ihre Webseite in verschiedenen Browsern und auf verschiedenen Betriebssystemen aussieht, können Sie dies tun, BrowserShots verwendet werden können.

Answer 5

Es gibt diese Online-Tools - die nicht gerade brillant sind:

http://www.w3.org/2007/10/htmldiff

http://www.aaronsw.com/2002/diff/

Ich mag das Aussehen von daisydiff, habe es aber noch nicht im Zorn verwendet: http://code.google.com/p/daisydiff/