Комментарии 63
Спасибо, весьма полезно и достаточно удобно...
Спасибо. Очень полезая штука :)
А помню раньше, когда в dreamveawer верстал, там была функция, которая позволяла подложку делать под макет. Удобно, но к сожалению не совсем то, что надо. А вот ваш сркип в самый раз :)
А помню раньше, когда в dreamveawer верстал, там была функция, которая позволяла подложку делать под макет. Удобно, но к сожалению не совсем то, что надо. А вот ваш сркип в самый раз :)
НЛО прилетело и опубликовало эту надпись здесь
А зачем серьезным компаниям заказывать ручки только у паркер, мышины только мерседес... У таких проектов неточностей не должно быть ;)
НЛО прилетело и опубликовало эту надпись здесь
цвет на странице у тебя будет такой же, как на макете, потому что ты берёшь его именно там, а не где-либо.
соответственно, цвета страницы и макета на одном компутере у всех будут совпадать ;)
соответственно, цвета страницы и макета на одном компутере у всех будут совпадать ;)
НЛО прилетело и опубликовало эту надпись здесь
ну если клиент хочет пиксель в пиксель, то я думаю он будет сравнивать макет и страницу на одном компьютере. или он попросит соседа повернуть к нему свой монитор и включит на его компьютере макет, а на своём — страницу и будет, вертя головой, сравнивать?
хотя, конечно, бывают люди, которые не понимают, почему сайт дома по-другому выглядит. тут надо или объяснить или попросить показать в сравнении с макетом) цвета совпадут, клиент в недоумении, задача выполнена
хотя, конечно, бывают люди, которые не понимают, почему сайт дома по-другому выглядит. тут надо или объяснить или попросить показать в сравнении с макетом) цвета совпадут, клиент в недоумении, задача выполнена
но вообще, я придерживаюсь мнения, что пиксель-пёрфект — недосягаемая утопия. недосягаемая потому что не необходима
Пиксель-перфект - это мелочь. При создании любого продукта таких мелочей сотни. Из сотен мелочей строится продукт. Крупных и сложных вещей немного, ими занимаются серьезные специалисты, они работают, о них много думать не приходится.
Мелочами занимаются джуниоры, мелочи - это то, что увидят пользователи снаружи, и мелочи - это то, как поведет себя сайт внутри.
Невнимательность к визуальным мелочам, это невнимательность к продукту вцелом.
Дизайнер обращал внимание на пиксели, когда создавался макет, дизайнер - специалист в этой области. Серьезные заказчики хотят верстальщиков тоже специалистов, для которых пиксель - не проблема, которые не сведут работу других профессионалов на нет.
Мелочами занимаются джуниоры, мелочи - это то, что увидят пользователи снаружи, и мелочи - это то, как поведет себя сайт внутри.
Невнимательность к визуальным мелочам, это невнимательность к продукту вцелом.
Дизайнер обращал внимание на пиксели, когда создавался макет, дизайнер - специалист в этой области. Серьезные заказчики хотят верстальщиков тоже специалистов, для которых пиксель - не проблема, которые не сведут работу других профессионалов на нет.
А не стоит брать цвета. На самом деле и пиксель заказчика не волновал бы, если бы он был уверен, что версткой занимаются профессионалы. Но он не знает. Пиксели - всего лишь проверка того, что работа выполнена качественно. Просто способ с минимумом затрат - установить жесткие рамки.
НЛО прилетело и опубликовало эту надпись здесь
согласен. как добиться попиксельной точности при «резиновой» вёрстке? и вообще как её в таком случае воспринимать, эту точность. )
Верно подмечено. Требования попиксельной точности можно предъявлять только к "нерезиновым" блокам сайта. И то...
В дополнение: шрифт в photoshop'е и в браузере это вещи разные
Пиксель пикселю рознь. Требование верстать пиксель в писксель мне кажется придумано ленивыми (или не желающими заморачиваться) заказчиками для верстальщиков, которые не ориентируются в дизайне и не могут самостоятельно определить где дизайнер расчитал до пикселя размер, а где взял на глазок. (также случай подходит под вариант когда с к верстальщику нет достаточного доверия и взаимопонимания).
Если есть взаимопонимае и верстальщик понимает что хотел дизайне - пиксель в пиксель - бред чистой воды.
Если есть взаимопонимае и верстальщик понимает что хотел дизайне - пиксель в пиксель - бред чистой воды.
Заказчик или менеджер довольно часто шлётся лесом, когда присылают одну картинку, наложенную поверх другой, т.к. если обычно вглядеться в ТЗ - то там и шрифты в em и вёрстка резиновая... Естественно, какие-то части и при таком ТЗ будут стоять там, где надо, но далеко не все...
Есть ещё один универсальный способ просто наложить окно браузера на окно просмотрщика макета и добавить окну браузера прозрачности. Я делаю это с помощью Compiz удерживая кнопку Alt на клавиатуре и одновременно крутя колесо мыши. Уверен, что подобное решение при желании вы сможете реализовать и на других ОС.
PS второй удобный инструмент в составе Compiz это экранная лупа если покрутить колесо мыши удерживая кнопку "Win", то можно увеличить нужный кусок экрана разглядев каждый нужный пиксел. (Лично я отключил сглаживание точек у этого инструмента, чтобы оно не мешало рассматривать экран попиксельно)
PS второй удобный инструмент в составе Compiz это экранная лупа если покрутить колесо мыши удерживая кнопку "Win", то можно увеличить нужный кусок экрана разглядев каждый нужный пиксел. (Лично я отключил сглаживание точек у этого инструмента, чтобы оно не мешало рассматривать экран попиксельно)
это всё сложно реализовать в M$
не верю :)
не так уж сложно, если погуглить.
Хм.. что сложного, сам делал такую прогу, вешал на хоткеи и скрывал в трей.
10 строчек на дельфине с ВинАПИ.
10 строчек на дельфине с ВинАПИ.
бред. экранная лупа на винде есть, прозрачность окон рулится элементарно(есть куча программ для этого)
требование попиксельной точности - это идиотизм
эмм... я что-то упустил, или body { background-image: url('images/dev/maket.jpg') } является самым простым решением задачи? :) или не катит, потому что контенту надо будет задавать дополнительный контейнер? :)
Этот способ сразу отпадает, как только мы начинаем использовать background у блоков на странице. Как пример — цветная плашка, а на ней определённым образом расположенные элементы.
Я предпочитаю использовать модульную сетку, т. к. в макетах часто используется много "рыбного" материала и сайт может быть резиновым.
Задумка дизайнера тоже должна выполняться, и свёрстаный макет должен выглядеть как макет, т. е. совпадать с ним при заданном разрешении. Естественно, если он должен тянуться — он будет тянуться, иначе как таковой «веб-вёрстки», даже точнее «разметки» бы не существовало.
У модульной сетки несколько иная задача.
У модульной сетки несколько иная задача.
div.innerHTML( '<style> ...' );
style= div.firstChild;
style= div.firstChild;
Да, я почти так делал (только в IE со style'ом в начале div'а не работает, нужно добавить br или form, например).
Но согласитесь, это не красиво. И ради того, чтобы IE обманывали такими банальными хаками MS не стоило городить весь этот огород с «безопасностью».
Но согласитесь, это не красиво. И ради того, чтобы IE обманывали такими банальными хаками MS не стоило городить весь этот огород с «безопасностью».
Кажется, онанизм ухудшает зрение. Картинку плохо видно.
а есть ли возможность проверить дизайнера на "обратное"?
то есть на возможность сверстать его дизайн пиксель в пискель.
причем быстрый.
то есть на возможность сверстать его дизайн пиксель в пискель.
причем быстрый.
Постольку поскольку мы живём в мире иллюзий, то совершенно не нужно делать сайт в точности похожий на макет. Но нужно сделать так (конечно, если макет хорош), чтобы никто с первого взгляда не смог назвать значимых различий между сайтом и макетом.
То есть важно сохранять не точки а пропорции для сохранения художественности. Или нерезинку. Конечно же со временем странички станут совсем векторными (SVG) и тогда никакой отдельной резинистости, только нормальное увеличение. Флэш ввиду неиндексируемости и геморности никак не подходит. Хотя бы за то, что во флэше не пашут кнопки вперёд-назад и нельзя скопировать ссылку, его нельзя считать адекватным для сайтостроения.
То есть важно сохранять не точки а пропорции для сохранения художественности. Или нерезинку. Конечно же со временем странички станут совсем векторными (SVG) и тогда никакой отдельной резинистости, только нормальное увеличение. Флэш ввиду неиндексируемости и геморности никак не подходит. Хотя бы за то, что во флэше не пашут кнопки вперёд-назад и нельзя скопировать ссылку, его нельзя считать адекватным для сайтостроения.
Яндекс и гугл индексируют флэш. Во влэше можно сделать переход по стрелкам браузера вперед назад(тому подтверждения статья Михаила Антипина (Nox Noctis) http://noregret.org/tutor/gentle/). Можно копировать ссылку если ставить форматирование текста как html. И его вполне можно считать адекватным для сайтостроения. И во флэше сразу идет верстка пиксель в пиксель.
Эмм, как-то не ощутил по результатам поиска. Ещё ни разу в жизни не попадал с Яндекса и гугля на нужную страницу флэшевого сайта. Понятно что можно, а делают ли? Да и зачем всё это, если SWF проблемно развернуть в читаемый текст (у меня вот мания в блокнотике фиксить )))) Ну а загонять хтмл во флэш — тот ещё метод.
Темнеменее они обладают алгоритмами поиска во флэш страницах и если человек грамотно подходит к разработке флэш сайта, то он использует все необходимые инструменты чтобы это был сайт а не презентиция. такие сайты и получают FWA. Скоро выход Adobe Flash CS4 где смениться формат исходного файла флэша и который можно будет редактировать ручками, хоть через блокнот.
ммм... а средняя кнопка мышки? )
чем дальше люди уходят от plain html - тем больше страдают простые юзеры )
некоторые моменты внедряются в броузеры и привычки людей быстрее, чем люди пытаются улучшить флеш. все-таки он еще сильно отстает по навигации от html кода.
чем дальше люди уходят от plain html - тем больше страдают простые юзеры )
некоторые моменты внедряются в броузеры и привычки людей быстрее, чем люди пытаются улучшить флеш. все-таки он еще сильно отстает по навигации от html кода.
Откуда такая уверенность про SVG? Top4top был насквозь "профлэшен" и смотрелся отвратительно.
Не факт, что SVG, просто других претендентов пока не ощущаю. SVG можно и в блокнотике поредактировать и под разными платформами в разных утилитах, а со флэшем не катит.
Топфотоп просто унылый. Наверное потому что всё, что ни делает Дибров — сплошное уныние. Он сам какой-то мятый и это отражается на всём, чего он касается. Я помню он ещё певцом быть хотел, я его клип по ящику видел — вот в точности топфотоп.
К тому же флэш слишком слепит возможностями (покрутить, заэффектить, заанимировать) и это мешает клиенту и разработчику больше времени уделить удобству и контенту.
Топфотоп просто унылый. Наверное потому что всё, что ни делает Дибров — сплошное уныние. Он сам какой-то мятый и это отражается на всём, чего он касается. Я помню он ещё певцом быть хотел, я его клип по ящику видел — вот в точности топфотоп.
К тому же флэш слишком слепит возможностями (покрутить, заэффектить, заанимировать) и это мешает клиенту и разработчику больше времени уделить удобству и контенту.
Супер!!
Спасибо
Спасибо
НЛО прилетело и опубликовало эту надпись здесь
Во-первых, из-за этого расширения все заказчики начнут кидать понты, мол у тебя тут пару пикселей не сходиться. И снова придется объяснять, где проходит граница между задумкой дизайнера и слепой уверенностью в собственной правоте.
Во-вторых кто-то будет разъяснять дизайнерам о подготовке макетов к попиксельной верстке? Большинству абсолютно до фени дрязги верстки и лепят неравномерные градиенты, полупрозрачные плашки на графический фон, и чекбоксы из сна наркомана.
Во-вторых кто-то будет разъяснять дизайнерам о подготовке макетов к попиксельной верстке? Большинству абсолютно до фени дрязги верстки и лепят неравномерные градиенты, полупрозрачные плашки на графический фон, и чекбоксы из сна наркомана.
Разрежьте макет в фотошопе слайс-тулом, будет вам пиксел в пиксел. только оно надо?
Согласен с leMar по поводу неадекватных заказчиков, но для себя я нахожу этот аддон очень полезным, хотябы потому что можно представить на одной картинке "как есть" и "как должно быть".
Добавил скрипт — на выходе пустое body…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстаем пиксел в пиксел: кроссбраузерный аналог PixelPerfect