Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?
- Быстрее создается страница, чем когда бегаешь между браузером и PSD.
- Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
- Банально удобнее видеть макет и тут же позиционировать элемент под ним.
Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp
После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.
Вкратце:
При создании нового проекта нужно будет подключать скрипт, и не забывать его удалять при сдаче.
После подключение нужно создавать папку или указать в диалоговом окне имя папки где лежит наша картинка, или же сразу прямой url. Я использую '.ajax' с отключенным кроссдоменном. Так что картинки нужно хранить на том же домене где и сайт.
Далее можно настроить позиционирование и прозрачность картинки так как вы этого хотите.
Скрипт сохраняет каждую манипуляцию с картинкой в cookie, бегая по страницам сайта не нужно будет настраивать все заново.
Во время создания скрипта я представлял как разработчик будет переходить на другую страницу и видеть дизайн предыдущей страницы, тогда появилась идея создать layouts. Используя хот-кеи можно быстро поменять изображение соответствующее текущей странице сайта.
Последней удобной функцией пока стала 'Hover mode', картинка прячется автоматически если вы стараетесь инспектором выбрать какой-то элемент, и показывается снова.
Все хот-кеи тут:
П.С. Скрипт я писал в первую очередь для себя и друзей. Друзья одобрили и сказали делись со всеми. Вот делюсь.
Надеюсь он будет полезен и вам.
Автор: JekFdrv
