Знаете ли вы, что компаратор внешнего вида?

Question

Мне нужен инструмент для сравнения дизайна веб-сайта, я не хочу сравнивать только код HTML, но дизайн вывода.

Возможно ли это? также есть ли какая-либо программа с открытым исходным кодом такого рода?

Я искал google, но пока у меня есть только один кандидат, который соответствует HTML Match.

Answer 1

В современных веб-страницах внешний вид контролируется различными «вещами»: html-код, стили CSS и изображения по крайней мере (также javascript на некоторых страницах). Простых текстовых программ diff недостаточно, потому что их вывод может быть неактуальным для внешнего вида веб-страницы (т. Е. Очистка css может показать много различий, но отображаемая веб-страница остается той же).

Для упрощенных страниц HTML Match, упомянутый выше, может выполнить эту работу. Если я должен сравнить дизайн два «сложных» страниц (в том числе расположения, пространства, изображения и текст изменений) Я хотел бы сделать два шага подход:

1. Выполнить инструмент сравнения на источниках HTML, чтобы выделить различия в текстовом содержании. Затем я бы изменил одну из страниц, чтобы показать тот же контент, что и другой (чтобы сделать следующий шаг более точным и «сфокусированным», чтобы показать «реальные» изменения макета). Конечно, он работает только с очень похожим html.
2. Загрузите страницы в тот же веб-браузер, получите скриншоты с отображаемого вывода в фиксированных положениях и сравните изображения (например, с ImageMagick). Он должен отображать все визуальные различия в рендеринге вывода.

Не совершенен, но должен работать.

[UPDATE] HTML Match кажется мертвым, см. this answer для альтернативного решения.

Answer 2

Под окнами:

http://www.htmlmatch.com/

Answer 3

Если вы используете KDE, вы можете использовать Kompare или KDiff3.

Однако, если вы хотите посмотреть, как ваша веб-страница выглядит в разных браузерах в разных операционных системах, может использоваться BrowserShots.

Answer 4

Ключевое слово, которое вы ищете, это «diff».

Хорошая программа, которая может показать вам различия между двумя файлами (разметка html или другая), будет ExamDiff для окон.

Answer 5

Есть эти онлайн-инструменты - это не блестящий:

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

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

Мне нравится внешний вид daisydiff, но не использовал его в гневе: http://code.google.com/p/daisydiff/

Answer 6

Solution : “compare web pages” инструмент. («Мы делаем это с 1999 года. Это бесплатно.«)

Пример вывода (сравнения страниц для TP-Link USB хаб модели UH700 и UH720):

Answer 7

Я работаю на одном и я скажу вам, что это трудно, и нет ничего на рынок. Возможно, у Google и Bing есть что-то в доме. Вы можете использовать некоторые инструменты сравнения изображений, которые идентифицируют области прямоугольника с измененными изображениями. Это, например, часть всего современного сжатия видео, но вы должны сделать это для разных регионов веб-страницы (раздел навигационной панели, основная статья, область, фильтрованная рекламным блоком и т. Д.), Поскольку некоторые из них могут меняться и он по-прежнему считается одним и тем же контентом на странице.

Как я сказал, очень сложная проблема без точного решения.

Другое происходит не визуальный образ и просто сравнивает полученные вычислимые стили компьютеров каждого элемента html. Вы должны взломать браузер, чтобы получить доступ к дереву макета. Также нет официального API или существующей библиотеки/программы/hack/patch для него.