airgraph
Сообщение
16/02/2009 09:20
Копия темы
Верстальщик- виртуоз . Однажды Миша Квакин обозвал меня «Верстальщиком – виртуозом» за что ему премного благодарен.
Виртуоз (от лат. virtus — доблесть, талант) – человек, достигший в работе высшей степени мастерства.
Мастерски владеть техникой верстки умеют (или думают, что умеют) некоторые из нас, но вряд ли кто-то рискнет утверждать, что он знает все и учиться нечему. В нашем деле нет предела совершенству, и чем больше верстаешь, тем больше в этом убеждаешься.
Мы можем лишь приближаться к званию «Верстальщика-виртуоза», но для этого надо много работать, решать нестандартные задачи и очень любить свое дело. В связи с этим у меня появилась идея нового конкурса, который поможет всем нам оттачивать мастерство верстки «молотком, а где надо и перышком»
Верстальщик- виртуоз . Однажды Миша Квакин обозвал меня «Верстальщиком – виртуозом» за что ему премного благодарен.
Виртуоз (от лат. virtus — доблесть, талант) – человек, достигший в работе высшей степени мастерства.
Мастерски владеть техникой верстки умеют (или думают, что умеют) некоторые из нас, но вряд ли кто-то рискнет утверждать, что он знает все и учиться нечему. В нашем деле нет предела совершенству, и чем больше верстаешь, тем больше в этом убеждаешься.
Мы можем лишь приближаться к званию «Верстальщика-виртуоза», но для этого надо много работать, решать нестандартные задачи и очень любить свое дело. В связи с этим у меня появилась идея нового конкурса, который поможет всем нам оттачивать мастерство верстки «молотком, а где надо и перышком»
airgraph
Сообщение
12/02/2009 23:23
Копия темы
Верстальщик – виртуоз .
Запускается новый конкурс «Верстальщик – виртуоз» webmolot.com/virtus/
Тот, кто считает себя продвинутым верстальщиком, мастером блочной верстки, кто не боится сложных задач и стремится к совершенству – этот конкурс для Вас.
Однажды Миша Квакин обозвал меня «Верстальщиком – виртуозом» за что ему премного благодарен.
Виртуоз (от лат. virtus — доблесть, талант) – человек, достигший в работе высшей степени мастерства.
Мастерски владеть техникой верстки умеют (или думают, что умеют) некоторые из нас, но вряд ли кто-то рискнет утверждать, что он знает все и учиться нечему. В нашем деле нет предела совершенству, и чем больше верстаешь, тем больше в этом убеждаешься.
Мы можем лишь приближаться к званию «Верстальщика-виртуоза», но для этого надо много работать, решать нестандартные задачи и очень любить свое дело. В связи с этим у меня появилась идея нового конкурса, который поможет всем нам оттачивать мастерство верстки «молотком, а где надо – и пёрышком»
Решаем интересные задачки, отвечаем на сложные вопросы и получаем знак качества в виде штампа «Верстальщик-виртуоз» с Вашим именем. Оттиск можно сделать у себя на сайте или в блоге со ссылкой на задачу конкурса.
В розыгрыше побеждает тот, кто первым пришлет правильное решение примера или ответ на вопрос. Ответы присылайте мне на e-mail с пометкой ответ «Верстальщик – виртуоз»
Если у Вас есть интересная задачка или вопрос для конкурса, присылайте его мне на e-mail с пометкой вопрос «Верстальщик – виртуоз» и, возможно, он будет озвучен в одном из конкурсов со ссылкой на автора.
Верстальщик – виртуоз .
Запускается новый конкурс «Верстальщик – виртуоз» webmolot.com/virtus/
Тот, кто считает себя продвинутым верстальщиком, мастером блочной верстки, кто не боится сложных задач и стремится к совершенству – этот конкурс для Вас.
Однажды Миша Квакин обозвал меня «Верстальщиком – виртуозом» за что ему премного благодарен.
Виртуоз (от лат. virtus — доблесть, талант) – человек, достигший в работе высшей степени мастерства.
Мастерски владеть техникой верстки умеют (или думают, что умеют) некоторые из нас, но вряд ли кто-то рискнет утверждать, что он знает все и учиться нечему. В нашем деле нет предела совершенству, и чем больше верстаешь, тем больше в этом убеждаешься.
Мы можем лишь приближаться к званию «Верстальщика-виртуоза», но для этого надо много работать, решать нестандартные задачи и очень любить свое дело. В связи с этим у меня появилась идея нового конкурса, который поможет всем нам оттачивать мастерство верстки «молотком, а где надо – и пёрышком»
Решаем интересные задачки, отвечаем на сложные вопросы и получаем знак качества в виде штампа «Верстальщик-виртуоз» с Вашим именем. Оттиск можно сделать у себя на сайте или в блоге со ссылкой на задачу конкурса.
В розыгрыше побеждает тот, кто первым пришлет правильное решение примера или ответ на вопрос. Ответы присылайте мне на e-mail с пометкой ответ «Верстальщик – виртуоз»
Если у Вас есть интересная задачка или вопрос для конкурса, присылайте его мне на e-mail с пометкой вопрос «Верстальщик – виртуоз» и, возможно, он будет озвучен в одном из конкурсов со ссылкой на автора.
airgraph
Сообщение
01/12/2008 08:29
Копия темы
Верстка с закрытыми глазами .
Заказчик дает задание на верстку, и его всегда интересуют 2 основных вопроса: стоимость и время. Начинающий верстальщик не может сам оценить работу и, как правило, смотрит сколько за нее просят другие. Опытный же верстальщик знает себе цену и оценивает верстку исходя из затраченного времени.
Но как определить точное время на разработку, ведь клиент хочет знать его до того, как выберет исполнителя. От чего зависит время верстки?
1.Профессиональный опыт верстальщика.
Однозначно можно сказать, что опытный верстальщик будет верстать быстрее, т.к. многие элементы макета он уже не раз делал и ему нужно только время на то, чтобы набрать код. Но и здесь можно сэкономить время, если вместо того, чтобы писать код с нуля использовать фреймворки функциональных блоков.
Необходимо отметить, что по показателю времени верстки очень сложно что то сказать о профессиональном уровне верстальщика. Этот показатель необходимо брать в совокупности с показателем качества кода, его семантики. Кстати, заметил один интересный момент – семантическая верстка занимает меньше времени. Это объясняется тем, что в ней больше смысла и меньше кода.
2.”Прозрачность” макета
Бывают такие макеты, что после одного взгляда на него у Вас не возникает вопросов и Вы можете незамедлительно приступить к верстке. Не поленитесь и согласуйте его более детально! Очень часто заказчик забывает, что “это не окончательная версия дизайна” или “меню должно быть выпадающим, на макете оно не нарисовано, но его надо сделать в стиле сайта”.
Если есть ТЗ, очень внимательно его прочтите и уточните все сомнения по функционированию элементов.
Мне удобнее всего составлять ТЗ в диалоге с заказчиком, задавая интересующие меня вопросы. Заказчик часто пишет очень много “воды” в своем ТЗ, которая мне, как верстальщику, не нужна или кажется очевидной. Например: “Блок слева должен тянуться вниз при увеличении текста…” Над теми же вопросами, которые я у него спрашиваю, он иногда долго думает, т.к. при разработке своего мега-дизайна он не предвидел, что “горизонтальное меню не вместится в одну строку при разрешении 800px по ширине, хотя у него на дизайне в 1024px все ОК”.
Не экономте времени на этом этапе, к нему надо относиться очень серьезно! Доработка макета и его исправление не приносит много радости, особенно, когда у Вас “висит” новый суперский заказ с большим бюджетом.
3.Эксперименты
Неопытный верстальщик оценивает время верстки макета в днях, опытный – в часах. Происходит это из-за того, что в верстке нужно много экспериментировать. Пока своими ручками не напишешь код и не убедишься в том, что он работает корректно во всех браузерах, то сложно давать четкие временные прогнозы.
Если какие то элементы Вы не делали на практике, но знаете, что в теории они точно делаются, то лушче взять с запасом время на их разработку.
Если в макете есть какие то элементы, с которыми Вы никогда не сталкивались ни на практике, ни в теории, то нужно хорошо подумать, прежде чем соглашаться на такой заказ. Потому что невыполение заказа в срок, это еще пол беды, а отказ от разработки после согласия на нее – незамедлительно принесет Вам плохой отзыв от заказчика и подпортит репутацию. Хотя, с другой стороны, можно еще накинуть некоторое время на разработку и рискнуть взяться за такой заказ с полной ответственностью за его выполнение. На себе проверено, что очень много полезной инфонмации и новых приемов узнаешь, когда время поджимает, и работа ведется в ускоренном темпе.
4.Форс-мажор и житейские соблазны
Конечно, никто не застрахован от того, что Вы пораните руку, или у Вас прорвет водопровод. Все эти форс-мажорные обстоятельства замедлят разработку. Можно “накинуть” время на житейские соблазны. Увидели по телеку, что Зенит ведет со счетом 2:0 у Баварии – как же перед таким устоишь, или девушка пришла в гости и сегодня год как вы познакомились, а ты совсем забыл :)
Вывод
Eсли Вы верстальщик с большим опытом, если Вы умеете “сканировать” макеты своим профессиональным взглядом и задать нужные вопросы заказчику, если Вы хотели бы поэкспериментировать, да не с чем – относитесь серьезно к Вашему призванию и заказчики будут Вами дорожить :)
Верстка с закрытыми глазами .
Заказчик дает задание на верстку, и его всегда интересуют 2 основных вопроса: стоимость и время. Начинающий верстальщик не может сам оценить работу и, как правило, смотрит сколько за нее просят другие. Опытный же верстальщик знает себе цену и оценивает верстку исходя из затраченного времени.
Но как определить точное время на разработку, ведь клиент хочет знать его до того, как выберет исполнителя. От чего зависит время верстки?
1.Профессиональный опыт верстальщика.
Однозначно можно сказать, что опытный верстальщик будет верстать быстрее, т.к. многие элементы макета он уже не раз делал и ему нужно только время на то, чтобы набрать код. Но и здесь можно сэкономить время, если вместо того, чтобы писать код с нуля использовать фреймворки функциональных блоков.
Необходимо отметить, что по показателю времени верстки очень сложно что то сказать о профессиональном уровне верстальщика. Этот показатель необходимо брать в совокупности с показателем качества кода, его семантики. Кстати, заметил один интересный момент – семантическая верстка занимает меньше времени. Это объясняется тем, что в ней больше смысла и меньше кода.
2.”Прозрачность” макета
Бывают такие макеты, что после одного взгляда на него у Вас не возникает вопросов и Вы можете незамедлительно приступить к верстке. Не поленитесь и согласуйте его более детально! Очень часто заказчик забывает, что “это не окончательная версия дизайна” или “меню должно быть выпадающим, на макете оно не нарисовано, но его надо сделать в стиле сайта”.
Если есть ТЗ, очень внимательно его прочтите и уточните все сомнения по функционированию элементов.
Мне удобнее всего составлять ТЗ в диалоге с заказчиком, задавая интересующие меня вопросы. Заказчик часто пишет очень много “воды” в своем ТЗ, которая мне, как верстальщику, не нужна или кажется очевидной. Например: “Блок слева должен тянуться вниз при увеличении текста…” Над теми же вопросами, которые я у него спрашиваю, он иногда долго думает, т.к. при разработке своего мега-дизайна он не предвидел, что “горизонтальное меню не вместится в одну строку при разрешении 800px по ширине, хотя у него на дизайне в 1024px все ОК”.
Не экономте времени на этом этапе, к нему надо относиться очень серьезно! Доработка макета и его исправление не приносит много радости, особенно, когда у Вас “висит” новый суперский заказ с большим бюджетом.
3.Эксперименты
Неопытный верстальщик оценивает время верстки макета в днях, опытный – в часах. Происходит это из-за того, что в верстке нужно много экспериментировать. Пока своими ручками не напишешь код и не убедишься в том, что он работает корректно во всех браузерах, то сложно давать четкие временные прогнозы.
Если какие то элементы Вы не делали на практике, но знаете, что в теории они точно делаются, то лушче взять с запасом время на их разработку.
Если в макете есть какие то элементы, с которыми Вы никогда не сталкивались ни на практике, ни в теории, то нужно хорошо подумать, прежде чем соглашаться на такой заказ. Потому что невыполение заказа в срок, это еще пол беды, а отказ от разработки после согласия на нее – незамедлительно принесет Вам плохой отзыв от заказчика и подпортит репутацию. Хотя, с другой стороны, можно еще накинуть некоторое время на разработку и рискнуть взяться за такой заказ с полной ответственностью за его выполнение. На себе проверено, что очень много полезной инфонмации и новых приемов узнаешь, когда время поджимает, и работа ведется в ускоренном темпе.
4.Форс-мажор и житейские соблазны
Конечно, никто не застрахован от того, что Вы пораните руку, или у Вас прорвет водопровод. Все эти форс-мажорные обстоятельства замедлят разработку. Можно “накинуть” время на житейские соблазны. Увидели по телеку, что Зенит ведет со счетом 2:0 у Баварии – как же перед таким устоишь, или девушка пришла в гости и сегодня год как вы познакомились, а ты совсем забыл :)
Вывод
Eсли Вы верстальщик с большим опытом, если Вы умеете “сканировать” макеты своим профессиональным взглядом и задать нужные вопросы заказчику, если Вы хотели бы поэкспериментировать, да не с чем – относитесь серьезно к Вашему призванию и заказчики будут Вами дорожить :)
airgraph
Сообщение
28/11/2008 11:24
Копия темы
Как я верстаю .
Для начала, подготовим рабочее место. Большой стол, на который можно положить руки, чтобы было удобно, монитор от 19′ и выше, чтобы можно было тестировать страницы под разные разрешения. Мягкое кресло, чашка зеленого чая без сахара и вперед…
Запускаем компьютер, на рабочем столе видим иконки наших любимых браузеров Firefox, Safari, Opera, IE. Они нам как дети родные, все разные, со своими капризами, но всеравно самые любимые и всегда рядом с нами. Под рукой так же должен быть верный друг и товарищ — Photoshop, редактор HTMLPad и всякие мелочи, о которых я расскажу по ходу работы. Для полного счастья включаем любимую музыку.
Открываем psd макет в Photoshop, пока он грузиться, мы можем вспомнить как хорошо вчера сидели с друзьями в баре и пили пиво, обсуждали девченок и машины… Все, шаблон у нас перед глазами, сразу же мы забываем обо всем и погружаемся в него с головой. Наш мозг начинает мыслить совсем по другому, у нас в голове только блоки, рамки и отступы. Мы расчленяем мысленно творение дизайнера на части, и словно через рентген просматриваем его, замечая детали, скрытые от глаз обычного человека. Важно выделить основные блоки header, content и footer, все остальное рассмотрим более внимательно по ходу…
Теперь мы можем загрузить наиболее подходящий framework в редактор.
В 90% случаев необходимо прижимать footer к низу страницы. Как это сделать, читайте в ближайшей статье. На этой стадии нужно учесть верстка будет резиновой или фиксированной. В любом случае, создаем главный блок с id=’content’, и прописываем нужные параметры ширины. Если резиновая — не забываем указать минимальную ширину, чтобы блоки не «съезжали». Как это сделать кроссбраузерно я тоже расскажу подробно в одной из своих статей.
Я обычно начинаю верстать скелет, пропуская детали, т.к. глобальные проблемы (появление горизонтального скролла, неправильное размещение блоков и др.), которые потом могут возникнуть, чаще всего связаны с ним. Вот мы видим, что на экране вырисовывается что то похожее на наш макет — шапка, основной контент, футер. Сейчас начинаем «разукрашивать» его сверху вниз, ничего не пропуская, учитывая все мелкие детали. Не забываем после внесения небольших изменений в код просматривать его в браузере. Сперва я тестирую в “правильных браузерах”, а затем, после того как блок сверстан, проверяю, что бы он так же правильно смотрелся и в IE. Иногда приходится применить хаки для него. Но прежде, чем это сделать, нужно убедиться действительно ли они здесь нужны.
Вот так шаг за шагом, минута за минутой мы двигаемся к нашей цели — оживить задумку дизайнера. Иногда это занятие занимает довольно много времени, поэтому не забываем делать перерывы. Можно пробежаться в магазин за соком и фруктами, позвонить друзьям, главное не думать некоторое время о верстке. Особенно это помогает, когда вы на чем то застопорились и не можете найти правильное решение. На свежую голову думается куда лучше :)
Ну вот и все, о чем я хотел сегодня поделиться с Вами. В заключение хочу сказать, что верстать сайты — очень интересное занятие! Для меня каждый сайт, каждый макет — как новая страница в большой энциклопедии. Это как компьютерная игра, где нужно пройти много уровней. Десятки, сотни макетов за плечами — вот гарантия того, что следующий уровень ты пройдешь быстрее и с минимальными «потерями».
Как я верстаю .
Для начала, подготовим рабочее место. Большой стол, на который можно положить руки, чтобы было удобно, монитор от 19′ и выше, чтобы можно было тестировать страницы под разные разрешения. Мягкое кресло, чашка зеленого чая без сахара и вперед…
Запускаем компьютер, на рабочем столе видим иконки наших любимых браузеров Firefox, Safari, Opera, IE. Они нам как дети родные, все разные, со своими капризами, но всеравно самые любимые и всегда рядом с нами. Под рукой так же должен быть верный друг и товарищ — Photoshop, редактор HTMLPad и всякие мелочи, о которых я расскажу по ходу работы. Для полного счастья включаем любимую музыку.
Открываем psd макет в Photoshop, пока он грузиться, мы можем вспомнить как хорошо вчера сидели с друзьями в баре и пили пиво, обсуждали девченок и машины… Все, шаблон у нас перед глазами, сразу же мы забываем обо всем и погружаемся в него с головой. Наш мозг начинает мыслить совсем по другому, у нас в голове только блоки, рамки и отступы. Мы расчленяем мысленно творение дизайнера на части, и словно через рентген просматриваем его, замечая детали, скрытые от глаз обычного человека. Важно выделить основные блоки header, content и footer, все остальное рассмотрим более внимательно по ходу…
Теперь мы можем загрузить наиболее подходящий framework в редактор.
В 90% случаев необходимо прижимать footer к низу страницы. Как это сделать, читайте в ближайшей статье. На этой стадии нужно учесть верстка будет резиновой или фиксированной. В любом случае, создаем главный блок с id=’content’, и прописываем нужные параметры ширины. Если резиновая — не забываем указать минимальную ширину, чтобы блоки не «съезжали». Как это сделать кроссбраузерно я тоже расскажу подробно в одной из своих статей.
Я обычно начинаю верстать скелет, пропуская детали, т.к. глобальные проблемы (появление горизонтального скролла, неправильное размещение блоков и др.), которые потом могут возникнуть, чаще всего связаны с ним. Вот мы видим, что на экране вырисовывается что то похожее на наш макет — шапка, основной контент, футер. Сейчас начинаем «разукрашивать» его сверху вниз, ничего не пропуская, учитывая все мелкие детали. Не забываем после внесения небольших изменений в код просматривать его в браузере. Сперва я тестирую в “правильных браузерах”, а затем, после того как блок сверстан, проверяю, что бы он так же правильно смотрелся и в IE. Иногда приходится применить хаки для него. Но прежде, чем это сделать, нужно убедиться действительно ли они здесь нужны.
Вот так шаг за шагом, минута за минутой мы двигаемся к нашей цели — оживить задумку дизайнера. Иногда это занятие занимает довольно много времени, поэтому не забываем делать перерывы. Можно пробежаться в магазин за соком и фруктами, позвонить друзьям, главное не думать некоторое время о верстке. Особенно это помогает, когда вы на чем то застопорились и не можете найти правильное решение. На свежую голову думается куда лучше :)
Ну вот и все, о чем я хотел сегодня поделиться с Вами. В заключение хочу сказать, что верстать сайты — очень интересное занятие! Для меня каждый сайт, каждый макет — как новая страница в большой энциклопедии. Это как компьютерная игра, где нужно пройти много уровней. Десятки, сотни макетов за плечами — вот гарантия того, что следующий уровень ты пройдешь быстрее и с минимальными «потерями».
airgraph
Сообщение
27/11/2008 09:12
Копия темы
Производительность работы Долгое время работал за обычной 17-кой Sumsung SynsMaster. Сталкивался с множеством проблем при верстке, которые очень затрудняли работу. А некоторые вещи в таких условиях и вовсе невозможно было сделать. Я понял, надо что то менять!
Долго думал, какой монитор купить и случайно наткнулся на статью, где автор описывал удобство работы с двумя мониторами. Да, это то что надо! Сейчас у меня 2 профессиональных монитора Dell 19′ и HP 20′.
Кому как не верстальщику нужно 2 монитора при работе?
Многие верстальщики пытаются сэкономить время работы над проектом, используют заготовленные шаблоны, куски кода и скриптов. Вырабатывают технику слепой печати, боятся сделать перерывы в работе, чтобы быстрее ее закончить. Но редко когда задумывались, что продуктивность и качество работы верстальщика можно значительно увеличить, если увеличить рабочую область. Что это дает?
Во-первых, можно разместить на одном мониторе окно Photoshop, а на другом писать код и тестировать страницу в браузерах. При этом можно будет меньше нажимать Alt + Tab. Причем если страница макета большая и инструменты Photoshop мешают ее просматривать при масштабе 100%, можно их перенести на другой монитор.
Во-вторых, помогает визуально тестировать соответствие нашего творения задумке дизайнера, загрузив одновременно макет и верстку.
Ну и в конце концов, можно в маленьком окошке на одном из мониторов загрузить TV-tuner и краем глаза посмотреть новости, потомучто часто верстальщики-фанатики так погружаются в свой мир, что не знают что происходит в реальном :)
В общем, мой Вам совет, верстальщики, работайте за 2-мя мониторами, как это делаю я, и вы получите кучу сэкономленного времени, удовольствие от работы и благодарность от заказчика.
0
Производительность работы Долгое время работал за обычной 17-кой Sumsung SynsMaster. Сталкивался с множеством проблем при верстке, которые очень затрудняли работу. А некоторые вещи в таких условиях и вовсе невозможно было сделать. Я понял, надо что то менять!
Долго думал, какой монитор купить и случайно наткнулся на статью, где автор описывал удобство работы с двумя мониторами. Да, это то что надо! Сейчас у меня 2 профессиональных монитора Dell 19′ и HP 20′.
Кому как не верстальщику нужно 2 монитора при работе?
Многие верстальщики пытаются сэкономить время работы над проектом, используют заготовленные шаблоны, куски кода и скриптов. Вырабатывают технику слепой печати, боятся сделать перерывы в работе, чтобы быстрее ее закончить. Но редко когда задумывались, что продуктивность и качество работы верстальщика можно значительно увеличить, если увеличить рабочую область. Что это дает?
Во-первых, можно разместить на одном мониторе окно Photoshop, а на другом писать код и тестировать страницу в браузерах. При этом можно будет меньше нажимать Alt + Tab. Причем если страница макета большая и инструменты Photoshop мешают ее просматривать при масштабе 100%, можно их перенести на другой монитор.
Во-вторых, помогает визуально тестировать соответствие нашего творения задумке дизайнера, загрузив одновременно макет и верстку.
Ну и в конце концов, можно в маленьком окошке на одном из мониторов загрузить TV-tuner и краем глаза посмотреть новости, потомучто часто верстальщики-фанатики так погружаются в свой мир, что не знают что происходит в реальном :)
В общем, мой Вам совет, верстальщики, работайте за 2-мя мониторами, как это делаю я, и вы получите кучу сэкономленного времени, удовольствие от работы и благодарность от заказчика.