9
votes

Connaissez-vous un comparateur d'apparence de page Web?

J'ai besoin d'un outil pour comparer la conception d'un site Web, je ne souhaite pas comparer uniquement le code HTML, mais la conception de sortie.

Est-ce que cela est encore possible? Y a-t-il également un programme OpenSource de ce type?

J'ai recherché Google, mais je n'obtiens qu'un candidat jusqu'à présent, qui est un match HTML.


3 commentaires

Qu'est-ce que vous êtes exactement après? Un outil de diff ou une comparaison visuelle de la manière dont votre site Web fonctionnera dans différents navigateurs


On dirait qu'il cherche un outil de comparaison visuelle. "La chose est que je ne veux pas comparer le code HTML, mais la conception de sortie".


Sonne comme cette question: Stackoverflow.com/Questtions/31722/...


8 Réponses :


1
votes

1 commentaires

Le site Web est maintenant MORT ( * 2003, † 2016 ). Sites de téléchargement de travail: Tucows , Archive . Site web de la société survivante: logiciel de saumure salé ("depuis 1993").



1
votes

Si vous utilisez kde, vous pouvez utiliser Kompare ou kdiiff3 .

Toutefois, si vous souhaitez afficher la manière dont votre page Web regarde dans différents navigateurs dans différents systèmes d'exploitation, BrowserRer"> Navigershots peut utilisé.


0 commentaires

0
votes

Le mot clé que vous recherchez est "diff".

Un bon programme qui peut vous montrer les différences entre deux fichiers (marquage HTML ou autre) serait examindiff pour Windows.


2 commentaires

"La chose est que je ne veux pas comparer le code HTML, mais la conception de sortie". - Donc, DIFF ne veut pas qu'il / elle cherche.


@Sashachedygov Vous pouvez appeler cela "rendu diff", il devrait s'agir à peu près d'un bon mot clé (bien que je ne puisse toujours trouver aucune fenêtre gratuite sans Windows pour MHTML).



6
votes

Dans les pages Web modernes L'apparence est contrôlée par diverses «choses»: code HTML, styles et images CSS au moins (aussi JavaScript dans certaines pages). Les programmes de difforms simples à base de texte ne suffisent pas car leur sortie peut être sans importance pour l'apparence de la page Web (c'est-à-dire un nettoyage CSS peut afficher de nombreuses différences, mais la page Web rendue reste la même).

Pour les pages simples, le match HTML mentionné ci-dessus pourrait faire le travail. Si je dois comparer la conception de deux pages "complexes" (y compris la mise en page, l'espace, les modifications de l'image et du texte), je ferais une approche en deux étapes:

  1. Exécutez un outil diff sur les sources HTML pour mettre en surbrillance les différences de contenu textuel. Ensuite, je modifierais l'une des pages pour afficher le même contenu que l'autre (afin de rendre l'étape suivante plus précise et «ciblée» pour afficher les modifications de la disposition «réelle»). Bien sûr, cela ne fonctionne qu'avec un HTML très similaire.
  2. Chargez les pages dans le même navigateur Web, obtenez des captures d'écran de la sortie rendue à des positions fixes et comparez les images (c'est-à-dire avec ImageMagick ). Il devrait afficher toutes les différences visuelles dans la sortie rendue.

    Ce n'est pas parfait mais devrait fonctionner.

    [update] HTML Match semble mort, voir Cette réponse pour une solution alternative.


1 commentaires

HTML Match Site Web est morte ( * 2003, † 2016 ) Mais je viens de trouver des sites de téléchargement survivants: Tucows , Archive et le site Web de la société survivante: Logiciel de saumure salé ("depuis 1993").



1
votes

Il y a ces outils en ligne - qui ne sont pas brillants:

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

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

J'aime le look de Daisydiff mais ne l'ayez pas utilisé dans la colère: http: // code. google.com/p/daisydiff/


1 commentaires

@Quentin Aaronsw.com/2002/diff fait exactement quel match HTML de OP ne fait que En ligne pendant que HTML Match est un outil hors ligne.



3
votes

solution: "Comparer les pages Web" Outil. («Nous le faisons depuis 1999. C'est gratuit.")

Exemple de sortie (comparaison de pages pour le modèle de hub USB TP-Link UH700 et UH720 ):

 Entrez la description de l'image ici


1 commentaires

Mais montrez-vous Diff of Meta Tags qui ne peuvent pas être vus?



0
votes

Je travaille sur un et je vous dis que c'est difficile et il n'y a rien sur le marché. Peut-être que Google et Bing ont quelque chose d'inhouse. Vous pouvez utiliser certains outils de comparaison d'images identifiant les régions rectangne ​​des images modifiées. Ceci est par exemple une partie de toute la compression vidéo moderne, mais vous devez le faire pour différentes régions de la page Web (la section de barre de navigation, l'article principal, la région filtrée par un annonce, etc.) Comme certains d'entre eux peuvent changer. Et il est toujours considéré comme le même contenu sur la page.

Comme j'ai dit un problème très complexe sans solution exacte.

L'autre est la voie non visuelle et comparez simplement les styles d'ordinateur calculés résultants de chaque élément HTML. Vous devez pirater le navigateur pour avoir accès à l'arbre de mise en page. Il n'y a pas non plus d'API officielle ni de bibliothèque / programme / pack / patch existant pour cela.


2 commentaires

Si le segment HTML est le même pourquoi auriez-vous besoin de différer la représentation de l'image?


Vous pouvez le faire pour filtrer la réponse régulière en modifiant des images publicitaires personnalisées ou les autres articles recommandés. Si vous faites une image comparative d'une capture d'écran complète, vous entrez dans votre chemin, vous devez comparer des fragments. Il existe également d'autres éléments personnalisés comme la vue / comme des comptoirs, des identifiants de connexion, etc. et HTML + CSS n'est pas un moyen d'aller si vous êtes sûr que la page n'utilise pas JavaScript pour changer le DOM. Si vous comparez CSS + DOM, vous pouvez y aller. Mais cela peut générer de faux positifs.



0
votes

Vous pouvez faire une comparaison visuelle avec ARAXIS Fusion Pro en prenant une sortie d'écran avec Systèmes tels que Browserstack , Navigateur croisé , Phantomjs


0 commentaires