Учимся верстать

[Fu-tai]

Долго у меня напрашивался этот цикл статей и вот наконец изливаюсь. А цикл этот вот о чём. Вёрстка и верстальщик. Основы профессии если хотите и логика действий при вёрстке. Решил разделить пока на две статьи. И предлагаю ознакомится с первой. Верстальщик кто-он? И так поехали.

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

В сети множество примеров статей и вообще материала о принципах вёрстки, инструментах, методиках написания кода, семантике и т.?д. Но я ещё ни-разу не встречал статьи рассказывающей о том с какого бока подойти к этому процессу, с чего лучше начать и по какому пути двигаться. Наблюдая год от года молодых верстальщиков и вебпрограммистов, совершающих одни и те же ошибки, такая статья просто проситься к написанию. Поэтому в следующем наборе букв постараюсь описать принципы и так сказать мыслительные процессы которые надо вырабатывать в себе для того чтобы начать двигаться с мёртвой точки новичка до специалиста в своём деле. Я не претендую на то, что описанные мною алгоритмы мышления и действий являются истиной в первой инстанции и только так и надо делать. Нет ни в коем случае! Для каждого верстальщика или же веб программиста существует своя истина и свои принципы. Всё-таки все мы люди и все ходим по своим дорогам. Но основные алгоритмы у нас всех одинаковые и отличаются только методом изложения и внедрения.

Хотелось бы донести одну не тривиальную мысль к пониманию которой приходишь только с опытом и количеством реальной работы в каждом из этапов проекта. Верстальщика нельзя назвать чем-то самостоятельным в команде, единицей мнением которой можно пренебречь или как говориться сработать в слепую, отдал макет, получил страницу (К сожалению-это самый частый случай на ниве фриланса). Как правило из такой работы ничего хорошего не получается. Потому-что верстальщик работает не зная под что и не понимая идеи проекта, а это ведёт к тому что программист получает сложности с внедрением вёрстки в код, копирайтер обнаруживает нехватку или избыток стилей и элементов усложняющих ему жизнь. Сеошник сталкивается с грязью в коде или же не возможностью выстроить необходимое семантичное ядро на странице. В результате всем участникам проекта приходится либо чем-то жертвовать, либо переделывать кучу не профильной работы. Что в свою очередь ведёт к удорожанию проекта или к увеличению сроков проекта. На верстальщика возлагается очень большая ответственность которой нет ни у дизайнера, ни у программиста. Верстальщик своего рода «серый кардинал» проекта, перехватывающий «эстафетную палочку» у менеджера проекта, на стадии от-рисованного макета и параллельно его работе координирует техническую составляющую. По неволе верстальщику приходиться касаться почти каждого этапа проекта и учитывать получаемые рекомендации в своей работе. Как однажды сказал один мой друг. Верстальщик это руки которые складывают бутерброд, от них зависит в каком порядке будут размещены ингредиенты!©

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

Поэтому думайте, думайте и ещё раз думайте, в этом залог роста. Прежде чем начать что-то делать потратьте хотя-бы пару минут на то чтобы продумать, как это сделать, затем ещё пару минут на то чтобы продумать, как это сделать лучше, чем сделали бы другие и даже после того когда вроде бы вы уже всё придумали и нарисовали себе в голове идеальную разметку, потратьте ещё с десяток минут на то чтобы ясно себе представить процесс и его реализацию. Прогоните через мозг каждый не очевидный и очевидный элемент макета, каждую строчку кон-тента и каждый блок на странице. Выведите общую формулу проекта распределив по своим группам повторяющиеся элементы и части которые эксклюзивные для страницы. Не надо этого делать на бумаге, приучите себя делать это в голове. Оценивать макет и проект в целом с одного лишь взгляда. Приучите себя понимать то, что вам предстоит сделать, подмечая какие подводные камни встретятся на пути, какими техниками вам придётся воспользоваться и что займёт больше всего времени. Вот с этого пожалуй и должна начинаться любая вёрстка, любого макета. С продумывания и оценки своей будущей работы. Простой ли он, или много-колоночный, резиновый, статичный, под какой тип устройств, на какой платформе и какие браузеры будут его рендерить. Прикиньте вес каждой страницы в отдельности и подведите его под критический порог. Соотнесите на сколько удастся соблюсти стандарты и придётся-ли использовать сторонние технологии для реализации интерфейса. Возьмите на заметку под какую CMS необходима вёрстка и какие её особенности надо учесть. Определите основное семантическое видение страницы. Если есть ТЗ, то вооружившись им, составьте карту страницы с описанием главных и второстепенных блоков, основных заголовков и их подзаголовков. Определите, где, какой тип кон-тента расположен и выстроен ли он в логичном с точки зрения семантики порядке. Какие варианты изменения в содержимом должны выдержать контентные блоки, на сколько макет восприимчив к эволюции содержимого, которое может появиться со-временем на страницах, существование каких элементов надо предусмотреть на будущее.

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

Старайтесь упрощать жизнь себе и тем, кто будет работать над проектом в дальнейшем.

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

В следующей части постараюсь более подробно описать логику действий и принцип принятия решений на конкретном примере, будем верстать проект публично)))

[Игорь Ермаков]

Замечательная статья. +)

Год назад не мог написать?

Хотелось бы, чтобы статья получила распространение, т.к по своему опыту знаю, что большинству верстальщиков приходится приходить своей головой к тому, что описано в 5-м параграфе, набивая серьёзные шишки и сбиваясь с пути. А это как раз не то до чего лучше дойти своей головой, об этом должен кто-нибудь рассказать, что собственно и делает статья. +)

[shvv]

Спасибо за советы.

Приучите себя понимать то, что вам предстоит сделать, подмечая какие подводные камни встретятся на пути, какими техниками вам придётся воспользоваться и что займёт больше всего времени.

Интересно, сколько нужно сверстать макетов, чтобы дойти до этого?

Буду ждать продолжения.

[Игорь Ермаков]

Кстати 5-й параграф можно применить к любому делу.

[Fu-tai]

Замечательная статья. +)

Год назад не мог написать?

Хотелось бы, чтобы статья получила распространение, т.к по своему опыту знаю, что большинству верстальщиков приходится приходить своей головой к тому, что описано в 5-м параграфе, набивая серьёзные шишки и сбиваясь с пути. А это как раз не то до чего лучше дойти своей головой, об этом должен кто-нибудь рассказать, что собственно и делает статья. +)

))) Год назад мне было не до статей. А сейчас кризис вносит свои коррективы в распорядок дня )

[mishka]

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

Также еще раз повторю - практика, практика еще раз практика.

Но порой можна десяток страниц сверстать неправильно и толку мало от этого будет, а раз спросить у знающего человека и все становится более понятным. Опять же - чтобы прийти к правильно сформулированному вопросу придется не одну шишку набить.

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

[rus]

Из всей статьи только 5-ый параграф - остальное вода.

Может я пропустил где, но почему ты не упомянул о структуре сайта?

По моему это одно из важных аспектов при верстке, так как тут задействовано юзабилити.

[aseran]

Выскажу свое мнение, после изучения основ html css , чтобы быстрее научиться верстать необходимо

максимально точно знать модель поведения блочных элементов (позиционирование и "обтекание" - игры float-ов ) научиться зрительно представлять каркасы элементов xhtml. и понять принцип

независимых блоков о которых хорошо написал Виталий Харисов.

[Игорь Ермаков]

Выскажу свое мнение, после изучения основ html css , чтобы быстрее научиться верстать необходимо

максимально точно знать модель поведения блочных элементов (позиционирование и "обтекание" - игры float-ов ) научиться зрительно представлять каркасы элементов xhtml. и понять принцип

независимых блоков о которых хорошо написал Виталий Харисов.

Это не мнение, а какой-то ужатый обрывок неполноценного совета.

[aseran]

Это не мнение, а какой-то ужатый обрывок неполноценного совета.

Не знаю почему Вы так решили, я же написал после изучения основ верстки приступать к более детальному изучению

модели поведения блоков, для тех кто начинает изучение верстки на мой взгляд это будет лучшим направлением.

Хотя сколько людей столько и мнений.

[rus]

Выскажу свое мнение, после изучения основ html css , чтобы быстрее научиться верстать необходимо

максимально точно знать модель поведения блочных элементов (позиционирование и "обтекание" - игры float-ов ) научиться зрительно представлять каркасы элементов xhtml. и понять принцип

независимых блоков о которых хорошо написал Виталий Харисов.

Хоть кто-то действительно по теме топика сказал, но действительно отрывок ужатый...

[aseran]

Хоть кто-то действительно по теме топика сказал, но действительно отрывок ужатый...

Если все расписывать то нужно очень много сказать, и можно что то упустить, это останется не понятым

что может довести до полного непонимания. Я к стати на своем сайте *SPAM* постараюсь дать необходимые

рекомендации (уроки) которые дадут необходимый толчек в нужном направлении, для человека который

захотел себя связать с web версткой, к сожалению на сайт времени практически нет, и по этому он в стадии начального наполнения )

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

Edited December 3, 2009 by aseran

[rus]

Если все расписывать то нужно очень много сказать, и можно что то упустить, это останется не понятым

что может довести до полного непонимания. Я к стати на своем сайте csscoder_ru постараюсь дать необходимые

рекомендации (уроки) которые дадут необходимый толчек в нужном направлении, для человека который

захотел себя связать с web версткой, к сожалению на сайт времени практически нет, и по этому он в стадии начального наполнения )

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

Мда..., поспешил с похвалой.

[Justnewone]

Если все расписывать то нужно очень много сказать, и можно что то упустить, это останется не понятым

что может довести до полного непонимания. Я к стати на своем сайте csscoder_ru постараюсь дать необходимые

рекомендации (уроки) которые дадут необходимый толчек в нужном направлении, для человека который

захотел себя связать с web версткой, к сожалению на сайт времени практически нет, и по этому он в стадии начального наполнения )

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

Интересный сайт. 1 статья и сразу характеризует.

Вопроос, который гуглится за 3 минуты подается почему-то под названием "работа с html", но при этом пишется все про css и ни в одном из терминов облака тегов html и рядом не валялся. Я преклоняюсь перед профессионализмом.

Обратили внимание, что тут на форуме структура несколько поменялась? А ведь неспорста.

Прекраснейший сайт, всем новичкам туда, одно они точно поймут.

[aseran]

Интересный сайт. 1 статья и сразу характеризует.

Вопроос, который гуглится за 3 минуты подается почему-то под названием "работа с html", но при этом пишется все про css и ни в одном из терминов облака тегов html и рядом не валялся. Я преклоняюсь перед профессионализмом.

Обратили внимание, что тут на форуме структура несколько поменялась? А ведь неспорста.

Прекраснейший сайт, всем новичкам туда, одно они точно поймут.

что касается раздела "работа с html" я написал что сайт находится в стадии начального наполнения, нет ни дизайна (используется

стандартная тема Wordpress) и по этому разделы могут не соответствовать представленным урокам.

[Justnewone]

что касается раздела "работа с html" я написал что сайт находится в стадии начального наполнения, нет ни дизайна (используется

стандартная тема Wordpress) и по этому разделы могут не соответствовать представленным урокам.

не не, Вы разве написали что сайт без дизайна?

Стадия начального (подчеркиваю) заполнения и сразу же без видимой структуры (а это ох как важно, не так ли? как вы сами называете сайты по вебмастерству, да еще и обучающие, без структуры?) Я лично употребляю "сапожник без штанов". Вооот.

Upd

И еще, в иллюстрацию Вашего ответа по профессионализм.

Те, кто показывают незаконченные, точнее, даже толком не начатые проекты, как бе предлагая авансом поставить им 5-ку за профессионализм, лично мне (Огромное ИМХО, не проглядите его) сразу же демонстрируют свой непрофессионализм.

Edited December 3, 2009 by Justnewone

[aseran]

не не, Вы разве написали что сайт без дизайна?

Стадия начального (подчеркиваю) заполнения и сразу же без видимой структуры (а это ох как важно, не так ли? как вы сами называете сайты по вебмастерству, да еще и обучающие, без структуры?) Я лично употребляю "сапожник без штанов". Вооот.

Upd

И еще, в иллюстрацию Вашего ответа по профессионализм.

Те, кто показывают незаконченные, точнее, даже толком не начатые проекты, как бе предлагая авансом поставить им 5-ку за профессионализм, лично мне (Огромное ИМХО, не проглядите его) сразу же демонстрируют свой непрофессионализм.

Согласен, считайте мои ответы в данной теме спамом.

Я признаю свою ошибку, о том что не нужно бежать в переди паровоза.

[Fenix]

Хорошая статья. Fu-tai, молодец.

[Колос]

Так в том то и беда, что в жизни нет возможности всё продумать.

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

Показываешь это всё заказчику, а он и говорит: "Хочу, чтобы это было не слева, а справа. А это выровнено не так, а сяк. А это вообще чтобы было не на этой, а на той странице". И весь тщательно продуманная вёрстка говорит: "До свидания".

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

[psywalker]

Так в том то и беда, что в жизни нет возможности всё продумать.

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

Показываешь это всё заказчику, а он и говорит: "Хочу, чтобы это было не слева, а справа. А это выровнено не так, а сяк. А это вообще чтобы было не на этой, а на той странице". И весь тщательно продуманная вёрстка говорит: "До свидания".

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

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

[Колос]

Рад буду, если скинешь в личку, что-нибудь не очень сложное.

....Хотя не верится, что можно сверстать так, чтобы быть готовым к любой просьбе...

[psywalker]

Рад буду, если скинешь в личку, что-нибудь не очень сложное.

....Хотя не верится, что можно сверстать так, чтобы быть готовым к любой просьбе...

Не вопрос.

[JIucky]

....Хотя не верится, что можно сверстать так, чтобы быть готовым к любой просьбе...

Очень даже можно! Когда сверстаешь сам не 1 десяток сайтов, то уже на автомате будешь делать как надо.

[Great Rash]

Вы дату последнего поста видели? К чему это замечание через пол года?

[Shift-Web]

Очень классно написано и чувствуется любовь к делу. Спасибо