Necesito una herramienta para comparar el diseño de un sitio web, no quiero comparar el código HTML solamente, pero el diseño de salida.¿Conoces un comparador de aspecto de página web?
¿Esto es posible? también hay algún programa de código abierto de este tipo?
He buscado en Google, pero solo recibo un candidato hasta el momento, que es una coincidencia de HTML.
En las páginas web modernas, la apariencia está controlada por varias cosas: código html, estilos CSS e imágenes al menos (también JavaScript en algunas páginas). Los programas simples de diferencias basadas en texto no son suficientes porque su resultado puede ser irrelevante para la apariencia de la página web (es decir, la limpieza de css puede mostrar muchas diferencias, pero la página web renderizada sigue siendo la misma).
Para páginas más simples HTML Match mencionado anteriormente podría hacer el trabajo. Si tengo que comparar el diseño de dos páginas "complejas" (incluyendo el diseño, espacio, imagen y texto cambia) Me gustaría hacer un enfoque de dos pasos:
No es perfecto, pero debería funcionar.
[ACTUALIZACIÓN] HTML Match parece estar muerto, consulte this answer para una solución alternativa.
El sitio web de HTML Match está [muerto] (https://archive.is/2016.10.09/http://isup.me/http://www.htmlmatch.com/) ([* 2003, † 2016] (https : //web.archive.org/web/*/http: //www.htmlmatch.com/)), pero acabo de encontrar sitios de descarga supervivientes: [Tucows] (http://www.tucows.com/preview/325919/HTML-Match), [Archivo] (https://archive.org/details/tucows_325919_HTML_Match) y el sitio web de la compañía sobreviviente: [Salty Brine Software] (http://www.saltybrine.com/) ("desde 1993 "). – 7vujy0f0hy
bajo Windows:
El sitio web ahora está [muerto] (https://archive.is/ 2016.10.09/http: //isup.me/http: //www.htmlmatch.com/) ([* 2003, † 2016] (https://web.archive.org/web/*/http://) www.htmlmatch.com/)). Sitios de descarga de trabajo: [Tucows] (http://www.tucows.com/preview/325919/HTML-Match), [Archivo] (https://archive.org/details/tucows_325919_HTML_Match). Sitio web de la compañía que sobrevivió: [Salty Brine Software] (http://www.saltybrine.com/) ("desde 1993"). – 7vujy0f0hy
Si está usando KDE, puede utilizar Kompare o KDiff3.
Sin embargo, si desea ver cómo se ve su página web en diferentes navegadores en diferentes sistemas operativos, puede usar BrowserShots.
La palabra clave que está buscando es "diff".
Un buen programa que puede mostrarle las diferencias entre dos archivos (marcado html u otro) sería ExamDiff para windows.
"la cosa es que no quiero comparar el código html, pero el diseño de salida". - Entonces diff no es querer lo que él/ella está buscando. –
@SashaChedygov podría llamarlo "diff renderizado", debería ser una buena palabra clave (aunque todavía no podría encontrar ninguna ventana gratis independiente para mhtml). – cregox
Hay estas herramientas en línea - que no son brillantes:
http://www.w3.org/2007/10/htmldiff
http://www.aaronsw.com/2002/diff/
me gusta el aspecto de daisydiff pero no lo he utilizado en la ira: http://code.google.com/p/daisydiff/
Solución : “compare web pages” herramienta. ("Lo hemos estado haciendo desde 1999. Es gratis.“)
Ejemplo de salida (comparando páginas para TP-Link modelo concentrador USB UH700 y UH720):
¿Pero muestra la diferencia de metaetiquetas que no se pueden ver? – Pacerier
estoy trabajando en uno y te digo que es difícil y no hay nada en el mercado. Quizás Google y Bing tengan algo interno. Puede usar algunas herramientas de comparación de imágenes que identifican regiones rectangulares de imágenes cambiadas. Esto es, por ejemplo, parte de toda la compresión de video moderna, pero tienes que hacerlo para diferentes regiones de la página web (la sección de la barra de navegación, el artículo principal, la región filtrada por un bloqueador de anuncios, etc.) ya que algunos de ellos pueden cambiar y todavía se considera el mismo contenido en la página.
Como dije, problema muy complejo sin una solución exacta.
La otra va de la manera no visual y simplemente compara los estilos computacionales resultantes de cada elemento html. Tienes que hackear el navegador para obtener acceso al árbol de diseño. Tampoco hay API oficial o biblioteca/programa/hack/parche existente para ello.
Si el segmento html es el mismo, ¿por qué necesitarías modificar la representación de la imagen del mismo? – Pacerier
Puede hacer esto para filtrar la respuesta regular mediante la respuesta cambiando las imágenes de anuncio personalizadas o las otras imágenes de reclamo de elementos recomendados. Si hace una comparación de imágenes de una captura de pantalla completa que se crucen en su camino, tiene que comparar fragmentos. También hay otras cosas personalizadas como contadores view/like, credenciales de inicio de sesión, etc. Y HTML + CSS no es un camino a seguir a menos que esté seguro de que la página no usa javascript para cambiar el DOM. Si compara CSS + DOM puede ir con él. Pero esto puede generar falsos positivos. – Lothar
¿Qué excatly estás buscando? Una herramienta de diferencias o una comparación visual de cómo funcionará su sitio web en diferentes navegadores. –
Parece que está buscando una herramienta de comparación visual. "Lo que pasa es que no quiero comparar el código html, sino el diseño de salida". –
Suena como esta pregunta: http://stackoverflow.com/questions/31722/anyone-have-a-diff-algorithm-for-rendered-html – rjmunro