Приложение для упрощения pixel perfect верстки

Приветствую!

Вот тут я пообещал написать и выложить для бесплатного использования приложение для упрощения мучительного процесса pixel perfect верстки: посилання.

Обещание выполнено, прошло всего 2 года

Вот частично описание с сайта:

Pxper — небольшое бесплатное приложение, с помощью которого верстать веб-сайты станет намного удобнее и проще. А самое главное, вёрстка станет идеальной («pixel perfect», как говориться)! Если коротко, то Pxper умеет отображать направляющие, похожие на те, что отображает Adobe Photoshop, но только поверх всех остальных приложений и окон. Т. е. алгоритм работы с программой такой:

1. Открываем макет.
2. Набрасываем направляющие так, чтобы получить расположения и размеры основных элементов в макете. Также, можно их загрузить прямо из .PSD-файла, если они там уже есть.
3. Переключаемся в любой браузер (а лучше во все по очереди) и проверяем, все ли находится на своих местах и имеет соответствующий размер.
4. Если необходимо, переключаемся в редактор и вносим правки в HTML / CSS. В настройках приложения можно указать фрагмент заголовка окна, при переключении в которое направляющие пропадают на время его активности. Чтобы не мешали редактировать текст, например.
5. Повторяем п. 3.
6. Повторяем п. 4.
7. Наслаждаемся результатом.

Вот прямой линк (Windows, 516 КБ, мультиязычное):
посилання

Записал видео как использовать кратенькое и сделал пару скриншотов (один из них прикрепляю, остальное на сайте можно глянуть: pxper.com).

Просьба не посчитать рекламой — приложение все-таки бесплатное. Мне нравится, надеюсь вам тоже понравится и поможет в работе.

Ничего так, полезная штука. Будем тестировать)

Да, нужная вещь!
А настройки долго искал, пока случайно в трей не заглянул.

С пиксель-перфектом есть один нюанс - должен быть идеальный макет. А если между блоками разные отступы, заголовки с разной высотой, все криво и косо, то заказчика надо посылать далеко и прямо с требованиями "пиксельперфектной" верстки. Да и вообще, ее значимость преувеличена, конечному юзеру глубоко по барабану, отступы 21 или 22 пикселя, лишь бы было ровно и одинаково во всех подобных блоках, и тогда будет приятно глазу так или иначе. А "пиксельперфектность" - это из разряда "самодурств" заказчика. Плюс-минус пиксель для блоков и плюс-минус два пикселя для текста - это допустимо.

Автор, спасибо, выглядит действительно полезно. Если позволите, то хотелось бы внести несколько предложений/пожеланий по дальнейшему развитию вашей программы:

1. То, чего мне действительно не хватает в фотошопе при разметке областей на макете направляющими - возможности задавать разный цвет разным направляющим, иначе, при их большой концентрации в какой-то одной области относительно близко друг к другу, особенно при зуме, когда не видно листа целиком, бывает очень сложно разобрать, что какая направляющая отделяет, на что указывает. Было бы очень здорово, если бы в вашей программке была такая возможность.
   
2. Возможность включить привязку направляющих к сетке. Тут, правда, я не совсем разобрался. Возможно, это уже реализовано в вашей программе, так как сейчас не очень сложно поставить руками наплавляющую на линию сетки, но нет такого ощущения, как в Фотошопе, будто она сама прилипает.
   
3. Возможность показать и спрятать направляющие, а не удалять их каждый раз.
   
4. Возможность задать сетке цвет и тип линий, отличный от цвета и типа линий направляющих.
   
5. Линейка. В фотошопе есть инструмент "линейка", которая привязывается к сетке и к направляющим, таким образом очень удобно замерять расстояния между какими-то областями на макете. Думаю, в этой программе тоже не помешало бы это реализовать, чтобы сверятся со значениями из графического редактора.
   
6. Увеличительная область.
   посилання
   Так как при изменении масштаба в окне браузера направляющая в вашей программке остаётся на своём месте, то было бы удобно, если бы была возможность увеличить определённый фрагмент на экране такой вот штукой.
   
7. Возможность показать сетку только в увеличительной области.
   
8. Добавить линейки, которые находятся по краям экрана, как в Ворде и всё том же Фотошопе, с возможностью менять точку начала координат.
   

И ещё я заметил, что при раставлении направляющих, они не поспевают за курсором, а когда отпускаешь клавишу мыши, то порой продолжают дальше двигаться самостоятельно. Но, вполне возможно, что это связано с производительностью моей системы.
Ещё раз спасибо. Надеюсь, вы продолжите совершенствовать вашу программу в дальнейшем.

Цитата ("nehovaysyatopol"):

С пиксель-перфектом есть один нюанс - должен быть идеальный макет. А если между блоками разные отступы, заголовки с разной высотой, все криво и косо, то заказчика надо посылать далеко и прямо с требованиями "пиксельперфектной" верстки. Да и вообще, ее значимость преувеличена, конечному юзеру глубоко по барабану, отступы 21 или 22 пикселя, лишь бы было ровно и одинаково во всех подобных блоках, и тогда будет приятно глазу так или иначе. А "пиксельперфектность" - это из разряда "самодурств" заказчика. Плюс-минус пиксель для блоков и плюс-минус два пикселя для текста - это допустимо.

Да, конечно. Идеальная верстка нужна в редких случаях, когда общее качество проекта очень высокое. Если дизайн плохой, незачем тратить множество усилий и денег на то, чтобы обеспечить полное соответствие во всех браузерах. Но даже в таких случаях все-таки соблюдаются размеры и положения элементов (пусть и не идеально), поэтому приложение пригодится, чтобы не измерять элементы, а просто верстать в соответствии с сеткой. Набросал направляющие, сверстал, и точно знаешь, что все ровно.

Цитата ("brainlocker"):

Автор, спасибо, выглядит действительно полезно. Если позволите, то хотелось бы внести несколько предложений/пожеланий по дальнейшему развитию вашей программы:

1. То, чего мне действительно не хватает в фотошопе при разметке областей на макете направляющими - возможности задавать разный цвет разным направляющим, иначе, при их большой концентрации в какой-то одной области относительно близко друг к другу, особенно при зуме, когда не видно листа целиком, бывает очень сложно разобрать, что какая направляющая отделяет, на что указывает. Было бы очень здорово, если бы в вашей программке была такая возможность.
   
2. Возможность включить привязку направляющих к сетке. Тут, правда, я не совсем разобрался. Возможно, это уже реализовано в вашей программе, так как сейчас не очень сложно поставить руками наплавляющую на линию сетки, но нет такого ощущения, как в Фотошопе, будто она сама прилипает.
   
3. Возможность показать и спрятать направляющие, а не удалять их каждый раз.
   
4. Возможность задать сетке цвет и тип линий, отличный от цвета и типа линий направляющих.
   
5. Линейка. В фотошопе есть инструмент "линейка", которая привязывается к сетке и к направляющим, таким образом очень удобно замерять расстояния между какими-то областями на макете. Думаю, в этой программе тоже не помешало бы это реализовать, чтобы сверятся со значениями из графического редактора.
   
6. Увеличительная область.
   посилання
   Так как при изменении масштаба в окне браузера направляющая в вашей программке остаётся на своём месте, то было бы удобно, если бы была возможность увеличить определённый фрагмент на экране такой вот штукой.
   
7. Возможность показать сетку только в увеличительной области.
   
8. Добавить линейки, которые находятся по краям экрана, как в Ворде и всё том же Фотошопе, с возможностью менять точку начала координат.
   

И ещё я заметил, что при раставлении направляющих, они не поспевают за курсором, а когда отпускаешь клавишу мыши, то порой продолжают дальше двигаться самостоятельно. Но, вполне возможно, что это связано с производительностью моей системы.
Ещё раз спасибо. Надеюсь, вы продолжите совершенствовать вашу программу в дальнейшем.

Спасибо за отзыв! Продолжать обязательно буду, т. к. сам пользуюсь. Наверное, первое что добавлю — возможность добавлять полупрозрачные изображения поверх всего, чтобы те, кто привык верстать с помощью плагина к ФФ например, могли пользоваться программкой в таком же ключе.

п. 2 — просто у меня сетка это просто те же направляющие, автоматически создаваемые с заданным шагом. А потом к ним можно добавлять дополнительные. Вы натолкнули меня на мысль сделать сетку как бы отдельной от направляющих, блеклого цвета, чтобы она была просто ориентиром. Думаю, это будет круто.

п. 3 — сделаю

п. 4. — да, уже в п. 2 отписал

п. 5. — при перемещении направляющих отображаются расстояния до краев экрана и ближайших направляющих. хотя линейку можно еще добавить дополнительно, подумаю

п. 6. — хм, подумаю

на счет "подтормаживания" — скорее всего из-за скорости железа. программе приходится очень много раз перерисовывать свое окно, чтобы отобразить все направляющие и линейки. особенно, при перетаскивании.