Extension PerfectPixel par WellDoneCode. Apprendre à connaître Pixel Perfect Un guide rapide sur l'utilisation du script pixLayout
Bonjour les amis. L'autre jour, Dima Shuleshov m'a contacté et m'a proposé un sujet pour un article intéressant (Dima, bonjour !). Eh bien, pour moi, c'est intéressant et pertinent, j'espère que cela vous sera utile aussi, pour quelqu'un. Voici quelques lignes de code qui vous aideront à mettre en page votre page de destination exactement avec la mise en page.
De plus, vous réduirez considérablement le temps passé à mesurer les distances et à basculer entre Photoshop, la fenêtre du navigateur et un éditeur de texte.
Le résultat final se résume au fait que vous avez un bouton dans votre projet, fixé dans le coin supérieur gauche (n'importe où), lorsque vous cliquez dessus, une mise en page (image) avec une certaine transparence se superpose à votre mise en page, et vous pouvez évaluer la précision de vos retraits, vos dimensions et votre positionnement correspondent au design. Pour comprendre, il faut essayer. Je vous recommande de télécharger la source et de voir comment elle fonctionne, ou de visionner cette courte vidéo :
Donc, si vous avez eu des problèmes avec des clients méticuleux qui vérifient chaque pixel, un tel problème ne devrait plus se produire. Réalisons enfin cet effet.
Tout d'abord, comme cela arrive souvent, nous connectons la bibliothèque jQuery :
Étant donné que dans la plupart des projets, il est déjà connecté, assurez-vous de ne pas recommencer. Cela peut provoquer des conflits et il vous faudra beaucoup de temps pour comprendre exactement pourquoi ils surviennent.
Maintenant, ajoutons quelques balises dans notre projet. Pour moi, cela ressemble à ceci :
Pixel parfait
Où le premier div est le bloc responsable du bouton, et le second est la superposition de notre mise en page. Pour qu'il soit appliqué correctement, vous devez effectuer quelques réglages simples :
P ( arrière-plan : url(../images/maket.jpg) no-repeat ; /* Votre mise en page */ largeur : 1255px;/* largeur de la mise en page */ hauteur : 750px;/* hauteur de la mise en page */ gauche : calc(50 % - 627,5px);/* deuxième valeur - la moitié de la largeur de la mise en page */ position : absolue ; opacité : 0,4 !important z-index : 97);
Voici 4 paramètres accompagnés d'un commentaire et qui doivent être remplacés par le vôtre. Tout est simple !
Maintenant, stylisons le bouton. Si l'apparence est importante pour vous, modifiez-la, sinon vous pouvez la laisser telle quelle.
#p ( position : fixe ; gauche : 0 ; haut : 0 ; largeur : 200 px ; hauteur : 75 px ; arrière-plan : #c36c2c ; z-index : 99 ; curseur : pointeur ; alignement du texte : centre ; taille de la police : 25 px ; hauteur de ligne : 0px ; couleur : #c36c2c ; alignement vertical : milieu ; transition : .3s ) #p:hover ( gauche : 0 ; hauteur de ligne : 80px ; arrière-plan : #88d3c2 ;
Bon, il ne reste plus qu'à ajouter une réaction à un clic sur le bouton. Nous allons simplement ajouter/supprimer une classe et modifier la transparence du bloc avec la disposition en arrière-plan :
$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));
Revue des plugins et scripts pour travailler avec la technique Pixel Perfect.
Tout d’abord, qu’est-ce que la technique Pixel Perfect ? Tout est simple et vous pouvez le deviner par le nom - il s'agit d'une technique de mise en page dans laquelle la mise en page du modèle HTML correspond exactement (pixel pour pixel) à la mise en page PSD d'origine.
En d’autres termes, si vous superposez « l’image » du modèle HTML conçu sur l’image de la mise en page PSD d’origine, alors les deux images doivent correspondre. Tous les éléments des images doivent être combinés : texte, images, éléments graphiques.
Selon les exigences modernes en matière de mise en page, Pixel Perfect est presque un standard de facto. Il est donc vital d'étudier cette question si vous avez l'envie et l'envie d'avoir de nombreuses commandes et clients.
Au moment de la rédaction, la technique Pixel Perfect est mise en œuvre à l'aide de plugins de navigateur appropriés ou à l'aide de scripts spécialisés. Deux plugins et deux scripts seront brièvement abordés ci-dessous, mais dans tous les cas, les étapes pour tester Pixel Perfect sont les mêmes.
Initialement, dans Photoshop, la mise en page PSD originale est enregistrée sous forme d'image au format
| 1 | .png |
Il s’agit de toute la procédure simple Pixel Perfect pour vérifier la mise en page de la page. Lorsque les éléments de la page ne correspondent pas à l'original, les valeurs des fichiers de style sont corrigées.
Pixel parfait pour FirefoxPour le navigateur Firefox, il existe un plugin Pixel Perfect permettant de vérifier la mise en page du même nom.
Après avoir installé le plugin Pixel Perfect, son icône apparaîtra dans la barre d'outils du navigateur Firefox. Il faut dire que le plugin Pixel Perfect Ne prend en charge que les dernières versions du navigateur Firefox(par exemple, dans la version v.31 ce plugin ne fonctionnera pas).
Vous devez maintenant ouvrir la mise en page PSD originale dans Photoshop et l'enregistrer entièrement en tant qu'image au format
| 1 | .png |
Important! Avant d'exporter vers une image PNG, la mise en page PSD doit être ramenée à sa taille d'origine ! A cet effet, la combinaison de touches de raccourci est réservée dans Photoshop : Ctrl+1 - pour Windows\Linux, Cmd+1 - pour Mac OS X.
Dès que la copie PNG de la mise en page PSD est préparée et enregistrée, ouvrez la page HTML basée sur cette mise en page dans la fenêtre du navigateur Firefox.
Lancez le plugin Pixel Perfect en cliquant sur son icône dans la barre d'outils du navigateur. Une fenêtre de plugin apparaîtra immédiatement dans laquelle elle nous demandera de sélectionner une image PNG pré-préparée (une copie de la mise en page PSD) :
Cliquez sur le bouton « Ajouter un calque », sélectionnez l'image PNG préparée et obtenez le résultat - la superposition de deux calques (conçus et originaux) :
Nous voyons comment le texte et le bouton de la page HTML ne correspondent pas à l'original PNG. Par conséquent, ouvrez l'onglet styles dans Firebug (ce plugin est activé automatiquement lorsque vous lancez le plugin Pixel Perfect) et commencez à éditer/ajuster :
Faites attention au mode "Inverser" du plugin Pixel Perfect - avec lui, vous pouvez ajuster très précisément les éléments de la page HTML.
Le processus décrit ci-dessus consiste à travailler avec le plugin Pixel Perfect, ainsi qu'avec la mise en page Pixel Perfect en tant que telle. Tout est extrêmement simple.
Vous trouverez ci-dessous une vidéo qui montre le processus de travail avec le plugin Pixel Perfect (la vidéo n'est pas la mienne, je ne suis donc pas responsable de la qualité dans tous les sens du terme) - pour plus de clarté du travail, cela ira :
La revue du plugin Pixel Perfect pour le navigateur Firefox est terminée.
PerfectPixel pour Google ChromePour vous connecter à la page en cours de test, vous devez écrire un ensemble de lignes de base :
$ (function ()( $ . pixlayout ( "/path_to_picture/picture.ext" ); ));Vous pouvez compléter l'ensemble de base en spécifiant des paramètres dans le script ( extrait du site officiel):
$ (function ()( $ . pixlayout (( src : "/img/layout.jpg" , opacité : 0,8 , haut : 50 , centre : true , clip : true , show : true ), ".wrapper" ); ) );Référence rapide à l'utilisation du script pixLayout Une référence rapide à l'utilisation du script pixLayout est fournie dans les deux paragraphes ci-dessous ():
également tiré du site officiel- Mobile
- boutons : « gauche », « droite », « haut », « bas »
- boutons : W , A , S , D lorsque l'image est visible
- Opérations supprimer tout le code html et css de pixLayout de la page) - une croix dans le coin supérieur droit du panneau ;
- Épinglez le panneau - icône dans le coin supérieur droit du panneau ;
- Référence rapide - point d'interrogation dans le coin supérieur droit du panneau ;
- Paramètres de réduction - flèche « vers le haut » en bas du panneau ;
- Afficher/masquer l'image - le bouton central du panneau de navigation ou Shift + E.
Vous trouverez ci-dessous la vidéo officielle montrant comment travailler avec le script pixLayout :
ConclusionDans cette brève revue, nous nous sommes familiarisés avec quatre outils pour une mise en page parfaite au pixel près. Deux d’entre eux sont des plugins de navigateur gratuits. Les deux autres sont des scripts JavaScript permettant de se connecter à une page HTML.
Que choisir pour votre travail dépend de chacun de décider.
La meilleure chose à propos des plugins de navigateur est qu’ils sont gratuits, faciles à installer et à utiliser.
L'inconvénient du script X-Precise est qu'il est payant (5 $), nécessite une connexion à la page HTML en cours de vérification et dépend de la bibliothèque jQuery. L'inconvénient de pixLayout peut également être dit que pour que cela fonctionne, il nécessite des « tracas » supplémentaires lors de la connexion à la page HTML.
Cependant, l'avantage des deux scripts est le fait incontestable qu'il s'agit d'une solution multi-navigateurs, absolument indépendante de tout navigateur (Firefox, Chrome, Opera, Safari) ou de la version d'un navigateur particulier. Les scripts fonctionneront de la même manière dans tous les cas.
L'extension PerfectPixel pour Google Chrome aide les concepteurs de mise en page et les développeurs Web à créer des mises en page de sites Web qui correspondent le mieux à la conception approuvée par le client.
Vous ouvrez la page que vous développez dans Chrome, lancez PerfectPixel, ajoutez un nouveau calque - une image de tâche, et vous pouvez désormais superposer l'image sur le résultat en temps réel, comparer et corriger les défauts. Vous pouvez voir comment fonctionne l'extension en regardant cette vidéo :
Plusieurs couches par page sont prises en charge et l'ensemble des couches est différent selon les domaines. Les calques ajoutés et leurs attributs sont enregistrés si vous fermez le navigateur et éteignez l'ordinateur.
Pour la commodité des développeurs, il existe une fonction de verrouillage - lorsqu'elle est activée, vous pouvez interagir avec les éléments de la page situés sous le calque actif. Vous pouvez également modifier la transparence du calque, lui donner des coordonnées explicites, modifier l'échelle (utile pour tester les images Retina).
Pour ceux qui souhaitent travailler avec l'outil le plus efficacement possible, les raccourcis clavier et les modes de fonctionnement de la souris sont pris en charge, dont une liste complète est disponible sur le site officiel du projet : www.welldonecode.com/perfectpixel/shortcuts.
Le panneau de contrôle peut être réduit sur le bord droit de l'écran en double-cliquant sur le titre. Le mode Mini est utile pour tester des conceptions réactives sur de petites tailles d’écran.
L'extension est régulièrement mise à jour, de nouvelles fonctions et raccourcis clavier sont ajoutés et des bugs sont corrigés. Nous sommes ouverts à tous commentaires et suggestions, veuillez nous écrire par email : [email protégé]. Dans un avenir proche, il est prévu de sortir des versions pour d'autres navigateurs : Firefox, Safari, IE, et de mettre en œuvre la synchronisation des couches et des paramètres via le cloud. Abonnez-vous à la newsletter pour rester informé des dates de sortie des nouvelles fonctionnalités sur le site officiel : www.welldonecode.com/perfextpixel.
Il me fera plaisir de répondre à vos questions ici dans les commentaires ou par email.
Heureux de vous rencontrer dans la communauté Chrome.RF !
13/01/2017Je vais commencer de loin. Il n'y a pas si longtemps, j'ai rejoint HTML Academy en tant que mentor. En plus du fait que le mentorat aide à organiser vos connaissances, il stimule étonnamment le développement de diverses choses utiles, car au cours du processus apparaissent des tâches intéressantes, dont la solution peut être facilement automatisée.
Les étudiants reçoivent un modèle pédagogique de trois pages, chacune avec des mises en page pour trois états : mobile, tablette et ordinateur de bureau, pour un total de neuf mises en page. Lors du processus de mise en page d'une page adaptative, il est logique de modifier périodiquement la taille de la fenêtre et de vérifier que lors de l'ajout de styles pour la version de bureau, par exemple, la version mobile ne s'est pas cassée. Quelle est la meilleure façon de vérifier la conformité à l’aménagement ?
Les captures d'écran, qui sont utilisées dans les grands projets, sont trop lourdes pour une telle tâche ; nous avons besoin de quelque chose de très simple pour que tout débutant puisse l'utiliser.
La première chose à laquelle j’ai pensé, bien sûr, c’est le plugin Pixel Perfect (au moins il est disponible pour Chrome et Firefox), mais il n’est pas adapté pour plusieurs raisons. Par exemple, les mises en page chargées ne peuvent pas changer lors du basculement entre les pages et lors du changement de fenêtre du navigateur, et les changer manuellement à chaque fois deviendra rapidement ennuyeux. De plus, il existe des expressions médiatiques qui peuvent parfaitement changer de mise en page pour nous.
Ma toute première solution ressemblait à ceci :
CORPS (répétition d'arrière-plan : pas de répétition ; position d'arrière-plan : 50 % 0 ; image d'arrière-plan : url("img/index-mobile.png"); ) @media (largeur min : 768 px) ( CORPS (arrière-plan- image: url("img/index-tablet.png"); ) ) @media (largeur minimale : 1024px) ( CORPS (image d'arrière-plan : url("img/index-desktop.png"); ) )
Ce code est inséré dans chaque page. Il définit les expressions multimédias nécessaires et les liens vers les images sont remplacés par les mises en page actuelles pour chaque page spécifique.
Les mises en page changent lors du basculement entre les pages et lors du redimensionnement de la fenêtre, cela peut déjà être utilisé et c'est très pratique. Les mises en page se trouvent directement sous le balisage ; vous n'avez pas besoin d'aller constamment dans l'éditeur graphique pour les obtenir, donc même une conception aussi simple peut faire gagner beaucoup de temps.
Mais au fur et à mesure que les styles sont écrits, la page apparaît avec ses propres arrière-plans et images, et les mises en page du calque inférieur deviennent invisibles. Que dois-je faire?
Ma solution suivante était une extension Chrome qui crée une couche translucide avec des mises en page sur chaque page. Lorsque vous redimensionnez la fenêtre, les mises en page sont modifiées à l'aide d'expressions multimédias, comme dans le cas précédent. En prime, nous avons ajouté un contrôle sur la transparence du calque de mise en page et la possibilité d'activer le mode de fusion des différences pour faciliter la recherche des différences.
Cela s’est avéré être une chose merveilleuse. Mais cela ne fonctionne que dans Chrome, les points clés pour changer de mise en page et les chemins d'accès aux images doivent être définis dans les configurations de l'extension elle-même, les images de mise en page doivent être à l'intérieur de l'extension et il y avait toutes sortes d'autres restrictions. En général, ce n'est pas universel, chaque nouveau projet nécessitera une configuration manuelle et cela ne convient pas du tout aux débutants.
Je voulais trouver une solution très, très simple pour que n'importe qui puisse gérer la configuration et l'installation, et en même temps, il comprenne au moins approximativement ce qu'il faisait.
Pour comparer le balisage avec les mises en page, vous avez besoin de deux calques : un calque avec le balisage et un calque avec les mises en page. D'une part, vous pouvez insérer manuellement un calque avec des mises en page dans la mise en page, d'autre part, il y a un risque élevé de l'oublier là lorsqu'il n'est plus nécessaire, l'option suivante consistait donc à utiliser les éléments de page existants comme couches.
Si vous définissez des mises en page comme arrière-plan pour , lorsque vous modifiez la transparence, les mises en page deviendront également translucides, il est donc préférable d'utiliser l'élément comme calque avec des mises en page :
HTML ( background-repeat : pas de répétition ; background-position : 50 % 0 ; background-image: url("img/index-mobile.png"); ) @media (min-width : 768px) ( HTML ( background- image: url("img/index-tablet.png"); ) ) @media (largeur minimale : 1024px) ( HTML ( image d'arrière-plan : url("img/index-desktop.png"); ) )
Comme dans le cas précédent, les mises en page se trouveront sous le balisage, mais désormais, si un arrière-plan est spécifié, elles ne seront pas visibles. Rendons le calque de balisage semi-transparent en ajoutant de l'opacité pour :
/* Utiliser comme couche avec les mises en page */ HTML ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min - largeur : 768px) ( HTML ( image d'arrière-plan : url("img/index-tablet.png"); ) ) @media (largeur min : 1024px) ( HTML ( image d'arrière-plan : url("img/index- desktop .png"); ) ) /* Rendre le calque de balisage semi-transparent */ BODY ( opacité : .5; )
Cela peut également être utilisé d'une manière ou d'une autre, mais cette solution manquait de contrôles de transparence pratiques, j'ai donc écrit un petit script qui ajoute le panneau suivant à la page :
Il vous permet de contrôler la transparence (dans ce cas, au lieu de mises en page, il y a simplement un fond rayé), il peut être glissé sur la page et peut être désactivé s'il n'est pas nécessaire.
J'ai décidé de ne pas créer d'extension de navigateur afin de ne pas limiter le nombre de navigateurs dans lesquels elle peut être utilisée.
L'installation finit par ressembler à ceci :
À mon avis, il s'est avéré être un outil assez pratique, mais quelque chose pourrait certainement être amélioré. Si vous avez des idées à ce sujet, écrivez-les-moi dans les commentaires. Je serai également intéressé par la manière dont vous résolvez ces problèmes et par les outils que vous utilisez pour cela.
UPD : la bibliothèque a déménagé vers npm, merci à tous les participants
Si vous commencez tout juste à maîtriser l'ordinateur et à utiliser divers logiciels et que vous avez besoin d'un programme pour visualiser des images, téléchargez Pixel Perfect. Cette visionneuse est implémentée si simplement que même un utilisateur inexpérimenté peut facilement la maîtriser, malgré le fait que les développeurs ne voulaient pas se soucier de la localisation du produit pour les utilisateurs russophones (et ont généralement abandonné leur idée il y a dix ans).
À propos de l'interfaceComme mentionné précédemment, Pixel Perfect a des fonctionnalités plutôt maigres. Cela peut sembler très limité aux utilisateurs habitués aux visionneuses multitâches qui peuvent non seulement afficher des photographies et des images, mais aussi les éditer, les imprimer ou même les publier en ligne. Par conséquent, si vous avez besoin de nombreuses fonctions, nous vous recommandons de contourner ce logiciel en trouvant un analogue, par exemple -.
Pixel Perfect vous permet d'ouvrir et d'afficher des images aux formats JPEG, PNG, GIF et BMP. Cependant, le programme ne prend pas en charge le passage d'une image à une autre et, du fait qu'il n'y a pas de bouton « retourner », chaque image devra être ouverte séparément. Lors de l'ouverture d'un fichier, la visionneuse en bas de l'écran affiche toutes les informations techniques sur l'objet, ce qui est très pratique. Lors de la visualisation, les utilisateurs peuvent centrer l'image et l'étirer.
Caractéristiques du travailPixel Perfect est distribué dans un format portable, ce qui simplifie encore l'expérience utilisateur. Vous n'avez pas à vous soucier de l'installation, décompressez simplement l'archive téléchargée et exécutez le fichier exécutable. Le visualiseur identifie les exigences non essentielles pour le matériel du PC et pour la version de Windows qui y est installée.
Résultats- manque d'interface russifiée ;
- distribué en format portable;
- Les outils du programme sont basés sur l'exécution d'une fonction : l'affichage de fichiers graphiques ;
- démonstration des données techniques lors de la visualisation de l'image ;
- le produit logiciel n'est plus pris en charge par les développeurs.