Путь верстальщика

Основано на реальных событиях…

Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты. 

В этой статье я решил исправить ситуацию и описать свой путь обучения, который считаю наиболее правильным и эффективным.

Верстальщик или веб-мастер?

Перед тем, как начать прокладывать свой путь верстальщика, нужно определиться, какого уровня вы планируете достичь, и что для этого вообще предстоит изучать. Многие, конечно, скажут: «Что значит «какого уровня»? Конечно же, самого высокого! Что за вопрос?». Но на практике это, как правило, не так. Здесь всё сводится к тому, как и насколько глубоко вы планируете погрузиться в этот мир и через что готовы пройти ради достижения своей цели. К сожалению, большинство предпочитает выпить пивка вместо того, чтобы почитать книжку, но при этом считают себя великими мастерами. Но — не будем о грустном и перейдём сразу к делу.

Лично для себя я могу выделить две категории верстальщиков — «обычный верстальщик» и «веб-мастер». 

Обычный верстальщик

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

  • HTML;
  • CSS
  • jQuery (всякие плагинчики);
  • возможно ещё что-то по мелочи.    

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

Мы не будем уделять много времени этой категории, потому что она того не стоит. Во-первых, она мне не симпатизирует, а во-вторых, в этой статье мы подготавливаем настоящего бойца, так что не будем здесь задерживаться, и перейдём к «веб-мастеру».

Веб-мастер

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

Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера:

  • HTML5;
  • XHTML;
  • HTML 4.01;
  • XML;
  • AJAX;
  • CSS 2.1;
  • CSS3;
  • CSS-фреймворки;
  • JavaScript ;
  • JS-фреймворки (в первую очередь jQuery);
  • системы управления версиями (GitSVN и т.д.);    

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

Кроме того, веб-мастер обязан уметь работать с различными популярными CMS. Это умение не обязательно должно быть на глубоком уровне (написание плагинов к CMS или кардинальное изменение или расширение её функционала). Но, например, создавать адаптированные к CMS шаблоны из обычных HTML-страниц настоящий веб-мастер, без сомнений, должен уметь.

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

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

Ну что, вы всё ещё желаете стать верстальщиком? Подумайте, я подожду вас, правда:)

Английский язык

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

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

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

Ну и, конечно же, не стоит забывать, что все спецификации по технологиям написаны именно на английском языке.

Что читать?

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

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

Стандарты веб-технологий

Как говорят умные и матёрые дядьки: «Лучшая литература — это спецификация». И я лично с ними полностью согласен. Спецификация — это последняя инстанция и главный авторитет, который описывает поведение и логику всех свойств, методов или элементов в зависимости от технологии. Можно сказать, что спецификация — это закон, которому должны следовать все браузеры без исключения. Если поведение описано в спецификации, каким бы странным оно ни казалось — то это фича, а не баг (и у этой фичи наверняка есть своя логика), а если в спецификации написано одно, а в браузерах получается другое — значит, косяк именно в браузерах, и нужно штурмовать их разработчиков баг-репортами.

Книги

Несмотря на то, что книгам я отдал вторую по важности позицию, это отнюдь не означает, что им можно предпочесть спецификации и только. Напротив, я считаю, что книги являются отличным и, главное, очень важным дополнением к первым. Из книг можно многое взять и почерпнуть. По книгам можно легко изучать технологии, смотреть на то, как их авторы (а среди них часто встречаются и великие гуру) объясняют на примерах и раскладывают по полочкам даже самые сложные задачи и механизмы. Конечно же, полезность той или иной книги зависит от качества её материала и содержания, но если вы выбираете правильные книги, то не сомневайтесь, что они принесут вам только пользу! 

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

"Какие книги посоветуете?"

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

  • Заходим на ozon.ru.
  • Вбиваем в поиске «CSS3», жмём кнопку «Найти» и попадаем в книжный раздел по CSS3.
  • В горизонтальном списке ссылок нажимаем «по новинкам».
  • Идём сверху вниз, отсеивая книги по другим технологиям (да, такие попадаются), открываем и читаем информацию и комментарии по каждой книге. А также советуемся со старшими товарищами (можно даже на форумах), забрасываем понравившуюся литературу в корзину, чтобы в дальнейшем сделать заказ.      

Стоит заметить, что ozon.ru я выбрал ради примера. Само собой, вы можете выбрать любой хороший магазин на ваш взгляд. Главное — учесть мой простой алгоритм.

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

Сайты и блоги

Спецификации и книжки — это, конечно же, здорово, но не меньшее внимание стоит уделять сайтам и блогам. Именно на них, как правило, появляется самая новая и актуальная информация. Причина этого проста: сайт или блог — прекрасный и быстрый способ поделиться с миром своими мыслями или идеями. В абсолютном большинстве случаев почти у каждого опытного разработчика есть свой блог.

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

От себя же, пожалуй, посоветую некоторые из качественных веб-сайтов по нашим любимым технологиям:

Из русскоязычных сайтов — htmlbook.ruweb-standards.ruhabrahabr.ru, ну и, конечно же, не рекламы ради, а пользы для — css-live.ru:)

Практика

Как говорил когда-то мой учитель по шахматам: «Максим, запомни! Должно быть 30% теории и 70% практики». Вот и вёрстка требует примерно такого же соотношения. Я считаю, что время, потраченное на изучение вёрстки, должно быть распределено в примерном соотношении 20-30/70-80%, где 20-30% времени должна занимать теория, а 70-80% — практика. Заметьте, что практике я отдал намного больше времени, чем теории, потому как именно практика может закрепить все полученные знания и опыт. Правильная практика является отличной тренировкой, набиванием шишек и получением уроков жизни, благодаря которым уровень ваших знаний и умений, несомненно, будет расти.

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

Работа: фриланс или офис?

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

Фриланс, в отличие от офиса, имеет свои плюсы, которые, в целом, сводятся к свободе в распоряжении своим временем и отсутствию постоянного контроля начальства над головой. Тем не менее, в этом кроется и свой дьявол. Например, у фрилансера могут развиться плохие качества, которые будут мешать ему в дальнейшем обучении. Из-за отсутствия чёткого графика работы трудолюбие может перерасти в лень, как произошло с вашим покорным слугой (здесь стесняющийся смайлик). Или же, например, работа на фрилансе может превратиться в конвейерную рутину, которая будет похожа на круглосуточную цепочку: взял-сверстал-отдал, взял-сверстал-отдал и т.д. В последнем случае вы, возможно, даже не сможете успевать обдумывать, как сверстать тот или иной блок, поскольку вашей основной задачей будет поскорее сдать проект и тут же взять новый. Про чтение литературы я вообще молчу, так как в этом случае время на неё уже не останется. 

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

Наверное, здесь было бы логичным начать перечисление минусов работы в офисе, но я не стану этого делать. Это уже выходит за рамки статьи, а краткое обсуждение фриланса было, на мой взгляд, вполне в тему. Поэтому отдам эти вещи на откуп комментаторам, а сам с удовольствием перейду к более важным вещам.

Честно говоря, в этом пункте я хотел подчеркнуть одну очень полезную вещь, которая присутствует в работе в офисе и, к сожалению, отсуствует в работе на фрилансе. Она называется «коллективный разум», или «работа в коллективе». Человек, который работает дома — один, поэтому ему очень часто приходится полагаться на собственное мнение и опыт. Напротив, человек, работающий в коллективе, ежедневно волей-неволей участвует в коллективных дискуссиях, обсуждениях вёрстки, каких-то моментов, которые касаются рабочего проекта. У такого веб-разработчика постоянно есть возможность выслушать мнение более опытных коллег, увидеть их решения, попросить совета. Всё это, безусловно, даёт положительный эффект, особенно если задачи, которые вы решаете совместно, сложны и интересны, а работа протекает среди матёрых разработчиков.

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

Форумы

Форумы — это одно из тех мест, где можно совмещать много полезных вещей. На них можно найти братьев по разуму, опытных коллег и, возможно, даже друзей. На форумах можно задавать необходимые вопросы, решать трудные для вас задачи (как свои, так и чужие). Самое главное — всё это можно делать не в одиночку, а вместе с большим коллективом. Разве это не то, о чём мы мечтали?  Но как использовать эти возможности эффективно? Пожалуй, стоит поделиться своей небольшой историей.

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

В итоге, я поселился на форуме, и можно смело сказать, что он стал моим вторым домом. Я прекрасно помню, как задавал глупые вопросы (да и сейчас не стесняюсь этого делать), помню, как старался не пропустить ни одной новой темы, чтобы поучаствовать в ней, и сам старался помогать по мере возможности. Больше всего на форуме я любил набрасываться с коллегами на какой-нибудь интересный и сложный вопрос и дружно искать пути его решения. Таким образом, день за днем я узнавал для себя кучу новых и полезных решений. И поверьте, этот бесконечный цикл является отличной практикой!

Вывод из всего вышеописанного очевиден: форум является отличным местом, где вы сможете ежедневно получать море задач, обмениваться опытом с более мудрыми коллегами и делиться своими накопленными знаниями, помогая другим. Главное — использовать форум правильно.

Выставление своих работ на обсуждение

Ещё один важный совет из моей собственной практики, которым я хотел бы поделиться — выставление своих работ на всеобщий «суд». Например, на те же форумы. В качестве «подсудимого» может выступать всё, что угодно, будь то собственное решение какой-нибудь интересной задачи или даже вёрстка бесплатного макета. Смысл заключается в том, чтобы услышать о своей работе как можно больше полезных мнений и конструктивной критики.

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

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

Когда я брал очередной макет в руки, я старался поставить перед собой очень высокую планку в виде разных сложностей, которые сам для себя и придумывал. Например, я всегда считал, что макет с резиновой шириной верстать сложнее, поэтому часто верстал фиксированные макеты, как резиновые, даже если явно видел, что «резиной» там и не пахло. То же самое касалось и других вещей, типа вёрстки различных блоков и т.д. Даже браузеры я выбирал так, чтобы было сложно. Поэтому IE6+ для меня хоть и было страшным мучением, но оказалось очень полезной школой!

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

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

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

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

Эксперименты

В конце 2011 года мне довелось попасть на встречу WebStandardsDays, где свой доклад под названием «Бесчеловечные эксперименты над CSS» читал выдающийся веб-разработчик Роман Комаров. В этом докладе речь шла, собственно, об экспериментах и их пользе. Идея Ромы мне показалось настолько интересной и толковой, что я решил выделить для неё отдельный пункт. Более того, она тесно переплеталась с тем, к чему я когда-то пришёл сам.

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

Как правило, на основной работе у нас нет времени на исследования. Там перед нами стоят чёткие задачи, а время на их решение, к сожалению, ограничено. Поэтому на работе мы стараемся решать  задачи уже проторенными путями, т.е. способами, в которых мы уверены на 100%. Например, если нам необходимо сверстать блок, который мы уже верстали на прошлом проекте, то мы, не задумываясь, копируем код этого блока и вставляем в текущую работу. Тем самым, с одной стороны мы решаем нашу проектную задачу, но с другой — лишаем себя возможности получить новые знания и опыт. В итоге выходит, что мы просто стоим на месте. Для того, чтобы такого не происходило, нужны эксперименты, о которых рассказывал Рома.

Если мы не можем экспериментировать на работе, то где мы можем это делать? Правильно — дома, после работы.

Как правильно экспериментировать?

Я лично любил делать так. Открывал хорошую книжку или какой-нибудь известный сайт по веб-разработке, высматривал всякие примеры, трюки, уроки по CSS, читал условие задачи и приступал к её решению. Т.е. пытался решить задачу сам, не подглядывая в рабочий код. Причём моей целью было не просто отгадать уже существующее решение, а постараться найти своё, более простое и правильное, и желательно не одно.

Почему это эффективно сказывается на опыте?

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

Вывод из всего этого напрашивается сам собой — обязательно находите время для экспериментов. Это очень полезное и, однозначно, эффективное занятие.

Видео

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

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

У web-standards.ru есть собственный канал, где они выкладывают различные видео со своих докладов WebStandardsDays. Там собрано уже более 50-и видео файлов и их количество постоянно растёт.

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

Российские интернет-технологии (РИТ) тоже славятся своими звёздными докладчиками и полезными встречами. Их видео можно найти на вышеупомянутом канале web-standards.ru, а также есть возможность смотреть онлайн-трансляции их конференций.

Смело можно занести в свой список и конференции HTML5 Camp, где проходит множество очень интересных докладов о HTML5 и его будущем. Их видео вы можете поглядеть на их сайте, если пройдёте по этой ссылке

И, конечно, не стоит забывать, что зачастую в интернете можно найти много интересного, главное — сделать правильный выбор.

Доклады, мероприятия, конференции, сходки

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

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

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

Обычный редактор — в качестве HTML-редактора

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

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

Конечно, у вас могут возникнуть вопросы: «Зачем такие трудности? На свете такое множество HTML-редакторов, которые могут облегчить нам жизнь, а ты советуешь нам какую-то фигню!».

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

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

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

Наставник

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

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

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

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

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

Безусловно, польза от наставника вполне очевидна. Но где найти такого гуру-альтруиста, который возьмёт вас в свои подопечные и будет тратить на вас своё драгоценное время? Возможно, мне просто повезло, и я оказался в нужном месте, в нужный час. Но, на мой взгляд, отчаиваться не стоит. Нужно просто пытаться, как когда-то делал ваш покорный слуга. Если люди будут видеть ваше старание и целеустремлённость — незамеченными вы не останетесь!

Заключение

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

Я безумно рад, что наконец-то смог развёрнуто описать всё то, что мне не удавалось за долгое время. Но, несмотря на это, очень надеюсь, что в комментариях вы поведаете мне и читателям и свои полезные советы. С радостью приму любую критику и замечания. Ведь всё-таки я мечтаю стать настоящим «веб-мастером»;)

Благодарности

Хочу поблагодарить моих коллег Илью Стрельцына (SelenIT) и Рашида Берёзкина (Great Rash) за помощь в написании этой статьи. 

А также выражаю отдельную благодарность Александру Старцеву (hypnocolor) за иллюстрированное оформление статьи и корректировку моего великого и могучего русского языка.

 

P.S. Это тоже может быть интересно:

275

Комментарии

  1. Evgeny

    Отличная статья, узнал несколько новых моментов на которые стоит обратить внимание. У меня одна проблема, это работа верстальщиком, опыт и знания есть, но пока ни куда не удалось устроиться (говорю про Москву). Может быть кому требуется верстальщик в офис или есть задания для фриланса?

    1. Адъ

      Привет!
      Стукнись 414443807

  2. Алексей

    Спасибо за увлекательную статью, даже добавил ее в закладки. Я и сам только недвно ступил на тот путь, что вы проделали. Причем пришел на фриланс копирайтером, не очень скромно конечно говорить, но стал очень востребованным и довольно дорогим, но изначально стремился к тому чтобы стать именно web-мастером (именно в том понятии, что вы дали выше). И если еще год назад я впадал в ступор от CSS, то сейчас уже верстаю бесплатно шаблоны (деньги нужно брать за качественную работу). Пока для себя, в поиске ошибок помогают друзья — специалисты верстки. Усиленно учусь, хотя фрилансерская лень тоже пытается победить все начинания, пока я выигрываю)

  3. alexriz

    Да! Наконец-то ты корректно отозвался о фрилансе и офисной работе. Я очень рад) 

    Отличная статья, мне понравилась, во многом увидел себя в прошлом. Путь хардкора в редакторе без подсветки, автокомплитов, отбивки и других полезностей, тоже в свое время прошел. Скажу больше первые странички уровня "Hello world", map'ов и iframe, я написал в далекие времена, когда у меня небыло своего компьютера, а только мой верный мобильник SEk610=>w660. Смотрел результат в его же встроенном NetFront. Потом, как и большинство, переболел таким заболеванием, как DW, благо это как краснуха, болеешь лишь раз в жизни. Да там уже был автокомплит, но я подошел к этому с умом. В то время я уже кое-что знал, но путал написание тех или иных свойств. Автокомплит мне помог запомнить свойства именно так как они должны писаться. Писал все равно руками, лишь немного подсматривая в эту подсказку. Потом естественно пересел на нормальные редакторы. Должен отметить, что бы там не говорили, это очень полезный опыт, который спасает в ситуациях, когда нету под руками моего любимого редактора. 

    1. psywalker (Автор записи)

      Ага) Я ещё хотел написать про слепой метод набора, но решил оставить этот момент:)

  4. Kool

    Тьфу, напутал с отправкой)

    С определением "Веб-мастер" не согласен, дано описание фронтендера, а веб-мастер — это тот, что на все руки мастер в вебе, занимается чем угодно и кое-как и непонятно где, соответственно. Никто так никого уже не называет.

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

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

    1. psywalker (Автор записи)

      С определением "Веб-мастер" не согласен, дано описание фронтендера, а веб-мастер – это тот, что на все руки мастер в вебе, занимается чем угодно и кое-как и непонятно где, соответственно. Никто так никого уже не называет. 

      На самом деле я долго подбирал подходящий термин, были и другие варианты: "Веб-технолог", "Мастер веба" и т.д. Но  в итоге мой выбор пал именно на "Веб-мастера". Дело не в названии, не стоит делать на этом акцент. Суть статьи в другом. Нужно прикладывать много усилий и стараний, чтобы стать настоящим мастером своего дела. А как вы будете при этом называться, это уже второстепенное. Вся сила в знаниях, которые находятся у вас в голове!=) 

      На счёт фриланса и работы в офисе, если живёшь не в Москве или Питере, то всё становится иначе и печально, не там родился, чтобы вебом заниматься, но если хочется, то можно, конечно. Иногда вижу, что удалённую постояну предлагают, но что там как уж не знаи и совсем это редкость. Ну а ехать из далёкого Кукуева в Москву или Питер многого стоит.
      По поводу поиска первой работы какую-нибудь информацию написать, допустим есть все знания, верстал макеты, делал ещё что-то, но нет ни одного действующего сайта, который был бы тобой сделан, а без портфолио ты никому не стался. Куда смотреть? Расширения для браузеров делать, чтобы показать хоть что-то? Что-то там на Гитхабе показывать? В итоге всё равно не сайт выходит, несколько иные вещи получаются. 

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

  5. Сергей

    Занимаюсь разработкой более 6-ти лет, за плечами более 200 проектов различной сложности и тем не менее нашёл для себя статью полезной и интересной. Большое спасибо за полезный материал и желаю вам творческого и профессионального роста. В общем пишите ещё :)

  6. Лысенко Евгений

    Огромное спасибо за эту статью. Имею цель изучить дело верстальщика, а в последствии вебмастера. Тоже вот пробую, эксперементирую, но пока только по мелочи. А вот благодарая таким статьям о собственном пути становления как раз появляется вера в себя. Хотя пока это только на уровне хобби. 

  7. Иван

    Веб – мастер, мне кажется, немного устаревшее понятие. Те навыки, что вы включили в эту категорию, думаю, лучше объединить под названием «веб – разработчик» или «front — end разработчик».

    1. psywalker (Автор записи)

      Чуть выше я дал ответ на этот вопрос:)

      Кстати, все эти названия тоже имеют свои отличия и не факт, что какое-то из них точно впишется в статью.

  8. Макс

    Спасибо за статью.
    Почему вообще не затронуты вопросы сео, юзабилити, конверсии и дизайна? Создается такое впечатление что надо уметь только писать код, и больше ничего. Все остальное сделают другие люди? Может и так, но тогда им придется переделывать часть работы.
     По моему мнению, верстальщик должен хоть что-то понимать в этих сферах. Иначе на выходе получаем хоть и функциональный сайт, сделанный "как книжка пишет" однако совсем не годный для своих целей. Именно это, на жаль и можно увидеть на многих сайтах. Если дизайнер, вообще ничего не знает о верстке, он тем самым значительно ухудшает сайт. Если верстальщик, не знает основ СЕО, он верстает сайты негодные для поисковых систем. А часто ли мы видим нормально сделанные ссылки на сайтах? Которые бы нажимались, подсвечивались при наведении и т.п. Практически никогда. Такая простая, удобная вещь как a:active вообще не используется. Почему? Потому что дизайнер об этом вообще не знает, а верстальщик вообще не дизайнер и понятия не имеет о юзабилити и конверсии. 
    По моему, в современной разработке уже нельзя быть просто дизайнером или просто верстальщиком. Надо реально, на опыте, разбираться в смежных областях. Иначе конечный продукт, хоть и будет вроде правильно создан, на деле не будет выполнять своих функций.

    1. psywalker (Автор записи)

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

      Не стал добавлять SEO, потому что это отдельная большая, запутанная и полная мифов тема, и вообще SEO — зло для веба. 

      1. Макс

        СЕО бывает разным. Не зря ведь поисковые системы сами дают советы по сео-оптимизации сайтов? Штука в том, что качественно подать контент, без сео, теперь невозможно. Поисковики вводят свои правила в верстку, и если это отрицать, сайт всегда будет где-то в конце выдачи, хоть и с качественным контентом.

        1. Sam Dark

          Это ещё один миф, который уже неактуален для поисковика Google, который теперь смотри исключительно на контент и удобство использования. 

          1. Макс

            Миф? Да, да, сео это сплошной миф и развод на деньги. Как и конверсия, юзабилити и a/b тестирование  Это все чушь полнейшая, ни в коем случае этого не используйте и даже ничего не читайте на эти темы! Самое главное это валидность верстки и верстка под ИЕ5! 

            1. Sam Dark

            2. Sam Dark

              Я ничего не говорил про a/b и улучшение конверсии и юзабилити. Я исключительно про «продвижение в поисковиках» и «вывод в топ» путём наращивания ссылочной массы.

              1. Макс

                А я ничего не говорил про продвижение в поисковиках и вывод в топ, и про ссылочную массу тоже ничего не говорил. И все это как работало, так и дальше работает. Проверено на практике, а не в теории. Вот, почитайте то что говорит сам Гугл, а не какая-то очередная команда проффесионалов с многолетним опытом работы бла бла бла: https://sites.google.com/site/webmasterhelpforum/ru/stati/rukovodstvo-po-poiskovoj-optimizacii-dla-nacinausih-ot-google/rukovodstvo-po-poiskovoi-optimizatsii-dlya-nachinayushchikh-ot-google

                1. Sam Dark

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

            3. Tatiana

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

              1. Макс

                Это был стеб. Стебался потому что народ вообще не обращает внимание на юзабилити, конверсию и сео.

                1. Tatiana

                  Согласна на счет юзабилити оно отсутствует очень часто и густо, наткнулась на не плохой сайт дизигнеров,  кнопку RSS не нашла за счет множества цветастых элементов а может ее вообще не было, канул в лету.

              2. Sam Dark

                Юзабилити не миф и не развод, только занимаются им не SEO-шники, а юзабилитисты.

      2. Hixer

        +1. В сети должны быть и цензура и SEO-ограничения на законодательном уровне, иначе ведь не доходит. А жаль.

  9. MrSullen

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

  10. fromanywhere

    А я бы сказал, что список для веб-мастера необоснованно раздут. Давайте мы туда еще фотошоп-люстру-индизайн-флеш впишем? (на самом деле нет).
    Мне кажется, логика для html неизменна. Версии отражают лишь добавление справочных знаний, а справочные знания не в полной мере отражают компетентность специалиста. Да, они важны, но не определяют ее всецело.
    То же относится и к css, и к выделению ajax в js.

    1. Kool

      Да, ФШ надо уметь использовать и Иллюстратор тоже, нарезка, оптимизация изображений, тут правда одним ФШ не обойтись и просто так "сохранить для Веб" не выйдет, если нормально делать.

      Вот весьма нужная программа http://x128.ho.ua/color-quantizer.html

      Советую почитать блог Чикуенка и книги http://speedupyourwebsite.ru/

    2. zmeika

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

      1. fromanywhere

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

      2. psywalker (Автор записи)

        Я бы действительно добавила владение графическим редактором. И какие-то базовые представления о веб-дизайне

        Графический редактор решил не добавлять, чтобы не быть капитаном очевидность (граф. редактор для нарезки очевидно что нужен, макеты от дизайнеров обычно в PSD приходят) 

        1. klierik

           

          Графический редактор решил не добавлять, чтобы не быть капитаном очевидность (граф. редактор для нарезки очевидно что нужен, макеты от дизайнеров обычно в PSD приходят) 
          у меня перед глазами исходник нарисованый в Индизайне )
          второй — просто HTML
          порой и JPEG бывает )
           
          то что в статье нету фотошопа — тут его и не надо. как по мне это следующий уровень опыта и знаний, которые себя проявляет в случаях когда нету качественного исходника, и надо уметь воссоздать тот или иной элемент своими силами. а тут уже потребуется больше навыков, нежели просто нарезка. да и нарезать правильно отнюдь не каждый умеет (

           

  11. Nejik

    Спасибо за статью, довольно интересно было почитать.
    P.S. сам версткой увлекаюсь года два, работать верстальщиком устроился месяца 4 назад, активно изучаю разные блоги\форумы, ищу сенсея, может кто хочет\может научить) если вдруг кто-то откликнется, nejikrofl @ gmail.com

  12. Serge RNR

    Максим,
    спасибо за советы!

  13. Имя (обязательно)

     
    Учите еще adobe fireworks, товарищи, проще и дешевле чем photoshop. Очень полезный продукт web-master'a. 

    1. mnXucFa

      А где его учить? На русском информации практически нет, даже в Сети (по крайней мере, я не нашел). А на английском для новичка это делать тяжело! Хотя бы были основы по-русски, а дальше уже можно и по-аглицки продолжить.

      1. Kool

        Да для вёрстки там мало что знать нужно, тупо посидел, потыкал везде — разобрался.
        Можно ФШ изучить, по нему-то инфы валом на русском. Схожие инструменты у них имеются, да и просто все продукты Эдоба очень похожи друг на друга всем, чем только можно, в зависимости от задачи продукта.

        1. mnXucFa

          Да, я еще раньше догадался, что Fireworks на данный момент можно выучить только по аналогии с Photoshop! Но это еще надо Photoshop выучить! )))
          Но вот пока с элементарной нарезкой макета в Fireworks не разобрался. Хотя эта прога мне нравиться больше, чем Фотошоп, однозначно!

    2. Имя (обязательно)

      Когда желания нет отговорки всегда найдутся. Балаболит на инглише, не понятно. Визуально подсвечивается каждое его действие, если  повторять за ним то все становиться ясно. И так выходит гораздо быстрее, чем тыркать по всем кнопкам самому. http://rutracker.org/forum/viewtopic.php?t=4061256

  14. mnXucFa

    Да, Статья очень и очень хорошая! Для себя нашел моменты: действительно, практика и теория — это разные вещи. Изучать было трудно, но выучил. Почитал много книг, и видео (резка макета). Но вот попробовал на практике — как будто не учил ничего! И подзабросил я HTML&CSS… ((( Образно говоря, "надорвался". Сейчас опять начинаю посматривать в эту сторону — все-таки нравиться! ))
    Насчет наставника — это просто великолепно! Очень тяжело просто с моральной точки зрения все "поднимать" самому. Вот только где его найти?

    1. psywalker (Автор записи)

      Насчет наставника – это просто великолепно! Очень тяжело просто с моральной точки зрения все "поднимать" самому. Вот только где его найти

      Дык ведь я же нашёл! В статье я даже описал, как это произошло.

    2. klierik

      Очень тяжело просто с моральной точки зрения все "поднимать" самому.
      ой да ну ладно. есть желание — есть цель, остальное не имеет значение.
      ну повезло Максу в своё время, но это скорее исключение из правил, а большая часть грызёт и потеет на сим днями и ночами, в то время пока остальные ждут пока к ним снезойжет )
      ты хочешь верстать — так верстай ;)

      1. psywalker (Автор записи)

        ну повезло Максу в своё время

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

        1. klierik

          прогрес был. скорее понедельно, но был.

          1. psywalker (Автор записи)

            Ну да, согласен:)

  15. Владислав

    Спасибо за статью Psywalker! Появилась новая пища для ума)Все правильно написал! Как раз такие качества как  ответственность, трудолюбие и  конечно любовь к своему делу характеризуют настоящих профессионалов.

  16. amelice

    Макс, спасибо огромное за познавательную статью!  

  17. shapta

    Спасибо огромное, придали ясности совсем начинающему! 

  18. Tatiana

    Большое спасибо Psywalker за статью, вашу биографию также интересно было прочитать. Полезно было для размышлений.

  19. nerv

    > Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера:

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

    — не понятно, почему в списке нет ActionScript;

    — почему HTML и CSS разделяются по версиям, а тот же JS нет. К слову, сейчас JS уже нужно знать на уровне 5-ой спецификации ECMA (да и 3-ю никто не отмнял). Готовиться 6-ая;

    — PHP (если уж речь зашла о нем). Где версии?

    — почему PHP? Ruby, Perl, Python, [Node]JS у нас уже не серверные языки?

     

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

    даже врагу не посоветовал бы : ) Ну, только если надобно отбить желание к разработке.

    1. psywalker (Автор записи)

      — не понятно, почему в списке нет ActionScript;

      — почему HTML и CSS разделяются по версиям, а тот же JS нет. К слову, сейчас JS уже нужно знать на уровне 5-ой спецификации ECMA (да и 3-ю никто не отмнял). Готовиться 6-ая;

      — PHP (если уж речь зашла о нем). Где версии?

      — почему PHP? Ruby, Perl, Python, [Node]JS у нас уже не серверные языки?

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

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

      даже врагу не посоветовал бы : ) Ну, только если надобно отбить желание к разработке.

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

    2. GreatRash

      даже врагу не посоветовал бы : ) Ну, только если надобно отбить желание к разработке.

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

      Это потом, когда человек уже будет плавать в коде как рыба в воде, можно и нужно задумываться над выбором подходящего редактора.

      не понятно, почему в списке нет ActionScript;

      Вероятно, потому, что это довольно специфическая технология, которая косвенно относится к вебу, иначе сюда можно приплести еще Silverlight, Java-апплеты, Unity в конце концов, и еще кучу всего, что работает в браузере в виде плагина.

      1. nerv

        начну с: уведомление о комментарии Макса не пришло на мыло, только Rash'а.

        > Ты не забывай, что речь идёт о клиентской части, а не о серверной. Поэтому тот же PHP я упоминул в самом конце, уже после перечисления всех основных технологий. И то, сказал про его начальный уровень. 

        Нет, нет и еще раз нет :) Речь идет о "веб-мастере":

        > Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера:

         

        Про редактор.

        Далеко ходить не буду: преподаватели Центра "Специалист" рекомендуют начинать с редактора, в котором есть как минимум нумерация строк и подсветка синтаксиса. Просто потому, что это помогает избежать опечаток и разного рода ляпов, проще ориентироваться в коде. И я с ними полностью согласен. Знаю, о чем говорю, т.к. сам начинал с обычного блокнота винды. Этот редактор не позволяет писать больше "Hello world". То, что надо знать правильное написание тегов, стилей и пр. никто не отменял. А вот почему не следует использовать примитивные редакторы обозначенные выше, очевидно — одна опечатка и человека превращается в сканер чб символов от начала файла и до конца. После того, как он проверит весь файл и не найдет опечатку, он не может быть уверен, что ее там нет, т.к. человеку свойственно ошибаться и глаз попросту может замылиться. Подобные редакторы только тормозят прогресс. Вообщем, не надо занимться тем, чем должна заниматься машина.

         

        > что это довольно специфическая технология, которая косвенно относится к вебу

        т.е. весь youtube — это косвенно? ) На сегодняшний день Flash никто не отменял.

        1. GreatRash

          Ютуб тут вообще не при чем. Флеш изначально создавался не для потокового видео. Просто исторически так сложилось, что, при отсутствии других вменяемых кроссплатформенных решений, чуть ли не основной задачей флеша стало воспроизводство видео. С этой задачей прекрасно бы справились Java-апплеты (но под них нужно ставить целую Java-машину) или, например, QuickTime (не будь он таким закрытым). Заставить юзера установить флеш-плеер оказалось проще, чем заставить его установить QuickTime или Java-машину. Так что да, ютуб — это целиком и полностью продукт побочный, который к флешу относится косвенно. Появись технология Canvas лет на 10 пораньше никто бы и не ассоциировал ютуб с флешом.

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

        2. psywalker (Автор записи)

           

          > Ты не забывай, что речь идёт о клиентской части, а не о серверной. Поэтому тот же PHP я упоминул в самом конце, уже после перечисления всех основных технологий. И то, сказал про его начальный уровень. 

          Нет, нет и еще раз нет :) Речь идет о "веб-мастере":

          > Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера

          Очевидно же, что статья не готовит программистов. А потом, в русско-язычных странах значение слова "Веб-мастер" может отличаться от западных. Не нужно придираться к этому. Хочешь подбавить себе ещё технологий? Нет проблем, разве кто запрещает)

           

          Про редактор.

          Далеко ходить не буду: преподаватели Центра "Специалист" рекомендуют начинать с редактора, в котором есть как минимум нумерация строк и подсветка синтаксиса. Просто потому, что это помогает избежать опечаток и разного рода ляпов, проще ориентироваться в коде. И я с ними полностью согласен. Знаю, о чем говорю, т.к. сам начинал с обычного блокнота винды. Этот редактор не позволяет писать больше "Hello world". То, что надо знать правильное написание тегов, стилей и пр. никто не отменял. А вот почему не следует использовать примитивные редакторы обозначенные выше, очевидно – одна опечатка и человека превращается в сканер чб символов от начала файла и до конца. После того, как он проверит весь файл и не найдет опечатку, он не может быть уверен, что ее там нет, т.к. человеку свойственно ошибаться и глаз попросту может замылиться. Подобные редакторы только тормозят прогресс. Вообщем, не надо занимться тем, чем должна заниматься машина.

          Начинать учёбу нужно постепенно, потихонечку, а не сразу брасаться в омут с головой. Изначально я тоже писал в блокноте, но  заходил чуть подальше "Hello world". Согласен с Рашидом. Тема достаточно холиварная и спорить об этом можно бесконечно. Я рассказывал свой путь, а не идеальный. Идеальный у каждого свой;)

  20. Svatov

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

  21. kosunit

    Спасибо автору, очень интересная  статья. Согласен со Svatov,  попробую поискать работу в офисе.

  22. Cypher

    Спасибо за статью.
    Добавил пару новых блогов в ридер :)
    У фриланса, кстати, есть еще один большой плюс: это работа с разными людьми и разными задачами. В маленьких и средних компаниях, как правило, один — два дизайнера. После верстки десятка их работ понимаешь, что раз за разом верстаешь одно и то же только в  разной обертке. У бэкэндщиков раз за разом одни и те же требования к верстке. Берешь что-нибудь с фриланса и бам! Что-то новенькое :)

    1. 4ega

      наверное это смотря где работать ) у меня так наоборот, приходится создавать такие вещи, которые ни то что на фриланс-биржах, на просторах рунета днем с огнем не ссышешь)

    2. klierik

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

  23. roma.matusevich

    Отличная статья, спасибо. В моем понимании понятие веб-мастер некорректное и для приведенных технологий больше подходит front-end developer.

  24. RusAndreev

    Спасибо автору за подробную статью!
    Есть желание создавать свои веб-приложения, но без знаний front-end'a на "голом" python'e далеко тоже не уедешь. Придется учиться с азов. Будем руководствоваться советами из статьи.
    Кстати, автор услуги наставника-учителя не предоставляет? :)

    1. psywalker (Автор записи)

      Кстати, автор услуги наставника-учителя не предоставляет? :)

      Кто бы самому автору их представил :)

  25. 4ega

     
    Статья мне понравилась)
    Только возникли некоторые разногласия, в основном из-за "верстальщик" и "веб-мастер", возможно стоило добавить (именно добавить а не заменить) третью ипостась Front-end developer. Если первые два больше "зеленый новичок" и "мастер на все руки", то фронт-эндер это настоящий джедай, который не просто владеет средствами (языки разметки или программирования), а мыслит на совершенно другом уровне. Одно дело перевести psd макет в html эквивалент, а другое создать ту часть сайта, которая у всех на виду. Тут уже простым знанием html5 и css3 не обойтись =) Тем более что на западе существует именно такая профессия, а это основной ориентир.
    От себя хочу добавить, чтобы стать настоящим профи нужно больше чем просто желание, необходимо полностью погрузиться в web и главное получать от этого удовольствие! Если вы не впадаете в экстаз при виде чистой, красивой, валидной, семантической разметки (забудьте слово верстка), то это не ваша работа. Чтобы стать профи, надо быть сумасшедшим =)
    Ах да! Забыл добавить, забудьте русский язык!  Если вы будете учиться по русским учебникам вы будете отставать на пару лет (в лучшем случае), а также получать низкокачественные переводы (недавно купил книгу Дугласа Кроуфорда на русском, так пришлось скачать англ. версию и свериться с ней, потому что в переводе написано черти-что!  )
    p.s. в наставники не гожусь, но если что подсказать пишите всегда помогу, чем смогу.

  26. Nick

    Статья очень понравилась.
    Все таки хотелось бы услышать результаты в денежнем эквеваленте. Если становиться на этот путь, то к чему это выведет. Если не секрет в каком городе живешь и сколько получаешь?

    1. psywalker (Автор записи)

      сколько получаешь?

      Простите, а вам в какой валюте сообщить? :)

      1. Nick

        Говори хоть в чем-то, я както да переведу :)

        1. psywalker (Автор записи)

          Хаха, оуукей, напишу отдельный пост, где приведу всю статистику по своей зарплате :)

          1. klierik

            Макс, помниш наш разговор 2-3х летней давности о пределах зарабатка в верстке и о том что скоро вёрстка будет автоматизированна.
            так вот, пределов заработка нет — я ошибался.
            верстка не будет автоматизированна машинами — ты ошибался )
            в целом я рад и тому и другому :P

            1. psywalker (Автор записи)

              Ага). Но согласись, что верстальщик порой неблагодарная "профессия"? Знаний нужно вагон, а платят копейки(. Поэтому и говорю, здесь надо учиться, учиться и учиться, иначе браться за это дело смысла нет, имхо.

  27. Дмитрий

    Мне тоже очень понравилось. Отличный обзор для новичков.
    Вопрос: не считаете, что веб-мастеру помимо прочего необходимо обладать базовыми(+/-) навыками MySQL?

    1. psywalker (Автор записи)

      Имхо, если хватит сил, то можно, но уже после освоения всех перечисленных технологий в статье. Охх… бедные верстальщики :) 

    2. SelenIT

      SelenIT

      Конкретно MySQL — имхо, необязательно (это почти исключительно серверная сторона, и напрямую, без «прослойки», с базой сейчас почти не работают). Но иметь представление об SQL и реляционных БД вообще — весьма полезно (даже для фронтенда, в этих новых браузерах чего только не понапихано..:–).

  28. scarzie

    Уважаемый гуру веб-верстки psywalker , Вы смотрели на свой сайт в IE6 ? На вопрос: "а зачем IE6?", ответ: "а почему бы и нет" ? Это ж ведь Ваш личный сайт, где Вы учите всех — качественной, кроссбраузерной верстки. Это бы сошло только на быструю верстку, для сдачи на фрилансе. Допустим когда я просмотрел Ваш сайт на кроссбраузерность (особенно в чуть более страых версиях разных браузерах), что-то перестал верить что вы женились на css…

    1. SelenIT

      SelenIT

      Пожалуйста, уточните, что именно вы понимаете под «кроссбраузерностью» применительно к IE6. Попиксельное соответствие? А в IE5? А в NS3 (а почему бы и нет?;–)? Или… всё-таки где-то есть разумный предел, ниже которого достаточно простой читаемости текста?

    2. psywalker (Автор записи)

      На счёт "гуру веб-вёрстки" понравился прикол)) поржал, спасибо :)

      Вы смотрели на свой сайт в IE6 ? 

      Не поверите, не смотрел и даже не собираюсь и мало того, никому не советую! Динозавры давноо уже приносят больше убытка и вреда чем пользы и мне очень жаль, что вы и многие другие этого ещё не понимают :( 

      Это ж ведь Ваш личный сайт, где Вы учите всех – качественной, кроссбраузерной верстки. Это бы сошло только на быструю верстку, для сдачи на фрилансе. Допустим когда я просмотрел Ваш сайт на кроссбраузерность (особенно в чуть более страых версиях разных браузерах), что-то перестал верить что вы женились на css

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

      1. scarzie

         Или… всё-таки где-то есть разумный предел, ниже которого достаточно простой читаемости текста?

        Там даже читаемости нету, вообще никакой. Там font-size примерно 2px (обо всем остальном я вообще молчу). Я считаю, что разумный предел, это IE6-7.

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

        К сожалению IE6 еще не вымер, так как он идет в комплект к XP. Даже сейчас, еще очень часто у офисных работников можно встретить IE6 (даже не IE7, где Ваш сайт также выглядит не чудесным образом). Не зря на free-lance, часто к требованиям верстальщика пишут IE6+ (ну или IE7, он далеко не ушел), FF3+, Opera 9.2+, и т.д. На крупных фирмах, создающих сайты, также стоят такие требования.
        Вы не подумайте что я хотел Вас оскорбить, или еще чего, просто на своем сайте могли бы и постараться, чтобы показать уровень. А то когда я посмотрел, аж обидно стало. Также не подумайте что я фанат шестого, я также мечтаю чтобы он умер, но к сожалению этого не произошло. По этому все мои сайты, идут от IE6+ (ради которого кстати, еще и стоит виртуальная машина).
        Кстати верстка под IE6 ооочень развивает, придает огромнейшего, неповторимого опыта. Новичкам я б особенно рекомендовал верстать под этот браузер. 
        P.S. недавно по каналу discovery видел, как какие-то американские военные запускали какую-ту фигню (беспилотник вроде), так вот у них там был открытый работающей IE6 (программа 2011).

        1. psywalker (Автор записи)

          scarzie

          Статистика css-live.ru показывает, что количество пользователей IE6-7 равно 0%, а IE8 около 1%. Отсюда возникает вопрос "Ну и нахрена нам нужно верстать под IE6-7 и даже 8?". Какой смысл от этого? Зачем жертвовать  доступностью, чистатой кода, скоростью и т.д, ради 0%?

          Мало того, к вашему сожалению, огорчю вас. Когда на сайте будет новый дизайн, то вёрстка будет делаться с учётом IE9+, а возможно и IE10+. Для IE8 будет минимальная деградация, абсолютно без заморочек.

          1. Анатолий

            За этот ответ я аплодирую стоя.

        2. SelenIT

          SelenIT

          На крупных фирмах, создающих сайты, также стоят такие требования.

          Есть обоснованное мнение, что подобным, наоборот, страдают нищебро мелкие фирмочки с комплексом Наполеона. А гиганты типа Гугла (и его дочерних/подчиненных контор типа Ютуба), напротив, шлют лесом не только IE6-7, но даже IE8.

          Лично моя позиция — динозавры должны получать лаконичную и максимально быструю страницу без любых визуальных наворотов, наравне с архаичными мобильниками, а все вкусности должны навешиваться через media queries для тех, кто их понимает.

          1. Sam Dark

            Крупные конторы смотрят статистику и действуюи исходя из неё. Если у Amazon 3% пользователей IE6, которые приносят прибыль в год, достаточную для оплаты десяти разработчиков, Amazon будет поддерживать IE6.

        3. 4ega

          Не сочтите за грубость но может вы еще верстаете с объвлением декларации 4-го HTML (или XHTML) ? Ведь это тоже придает неповторимого опыта при прохождении валидации? :)
          Старые технологие будут жить пока мы их поддерживаем, лично я никогда не буду поддерживать ИЕ6 и использовать заведомо устаревшие технологии )

          1. scarzie

            Да, конечно использую 4.01 strict. Или Вы считаете что уже можно смело прописывать <!DOCTYPE html> в коммерческих проэктах?
            to All, кстати, вот реальная статистика браузера IE6 http://www.ie6countdown.com/ !!!

    3. Svatov

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

    4. 4ega

      scarzie
      А давайте в городе на дорогах поставим корыта с водой и сено для лошадей вдруг с деревни кто приедет а коня поставить то негде!?
      а вообще потенциальные посетители данного сайта должны использовать ие только для того чтобы скачать и установить хром или фф =)

    5. klierik

      А случаем в Нетскейпе не пробывал посмотреть? там то как?
      2012 на дворе — ИЕ8+ *(и то восьмерку по блату так сказать)

  29. Tatiana

    4ega если все таки понадобиться подсказка куда можно постучаться?

    1. 4ega

      newboon(собако)ya.ru

      1. Tatiana

        Ок Сп

  30. nerv

    К сожалению IE6 еще не вымер, так как он идет в комплект к XP

    А IE4 идет в комплекте к Windows 98. Дальше что? Вы пробовали открывать свои сайты в IE4? Думаете Win98 вымер? Ошибаетесь.

    Кстати верстка под IE6 ооочень развивает, придает огромнейшего, неповторимого опыта.

    О каком опыте Вы говорите? Видимо о головной боли от исправления чужих (microsoft) ошибок.

    Не зря на free-lance, часто к требованиям верстальщика пишут IE6+

    На заборе тоже пишут, но не будем об этом :)

    По этому все мои сайты, идут от IE6+

    Не вижу ссылок.

    Вы смотрели на свой сайт в IE6 ? На вопрос: "а зачем IE6?", ответ: "а почему бы и нет" ?

    школьник что ли? Прыгни с моста. "На вопрос: "зачем", ответ: "а почему бы и нет"".

    Допустим когда я просмотрел Ваш сайт на кроссбраузерность (особенно в чуть более страых версиях разных браузерах), что-то перестал верить что вы женились на css…

    Давай ссылки. Посмотрим, как твои творения ведут себя в Netscape Navigator 1.0. Продемонстрируешь всем свой "огромнейший и неповторимый опыт".

    1. scarzie

       
      nerv,
       

      А IE4 идет в комплекте к Windows 98. Дальше что? Вы пробовали открывать свои сайты в IE4? Думаете Win98 вымер? Ошибаетесь.

      Не будем сравнивать Windows 98, и XP . Где сейчас можно встретить 98? Почти нигде (если вообще можно). Где сейчас можно встретить Windows XP? В 90% офисных работников СНГ. А с IE6-7 на борту? В 40% тех офисных работников XP.

      О каком опыте Вы говорите? Видимо о головной боли от исправления чужих (microsoft) ошибок.

      Опыта дает много, допустим если верстка работает в IE6, то она и автоматом работает во всех остальных старых браузерах. IE6 ошибок не прощает (не закрывание тегов, ошибки в JavaScript, и много другого), как это делают новые браузеры. Допустим, где бы я еще догадался что вместо right:0px;width:20px; можно сделать margin-left:100%;left:-20px; (на практике современных браузерах это не нужно, но все же)? Также, учит таким мелочам, что в JavaScript правильнее писать: var asd = {"class": "left" } , а не var asd = {class: "left" } (второй вариант тоже будет работать, но не в старых IE). Отлично учит expression, фильтрам, и т.п. (если потом кто скажет об expression не будешь смотреть как баран на новые ворота). И это всего лишь 1/1000 примеров. Это я об опыте который дает 6.

      Не вижу ссылок.

      Сюда их выкладывать не буду (не хочу услышать тонну не обоснованного говна, всего лишь из-за того — что я написал про верстку для таких браузеров как IE6-7), но они работают во всех старых браузерах, просто поверьте.

      школьник что ли? Прыгни с моста. "На вопрос: "зачем", ответ: "а почему бы и нет"".

      Забыл дописать, "а почему бы и нет, если ты хороший верстальщик".  Про школьника промолчу, так как вряд ли бы не школьник написал про Windows 98 или Netscape Navigator 1.0, кроме как для выпендрежа.

      Давай ссылки. Посмотрим, как твои творения ведут себя в Netscape Navigator 1.0. Продемонстрируешь всем свой "огромнейший и неповторимый опыт".

      Мы уже перешли на ты? Выше писалось о разумном пределе, я считаю это IE6-7+ . 

      На счёт "гуру веб-вёрстки" понравился прикол)) поржал, спасибо

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

      Статистика css-live.ru показывает, что количество пользователей IE6-7 равно 0%, а IE8 около 1%. 

      Это скорее всего из-за тематики Вашего сайта. Подумал, согласен, Вашему сайту, а также личным блогам — возможно и не нужна поддержка столь старых браузеров. Но для сайтов-визиток, фирм , интернет-магазинов, я считаю просто необходимо делать сайт доступным всем пользователям сети, а не лишь тем кто будет обладать последним хромом, или ff. Ссылка на статистику IE6-7, http://www.liveinternet.ru/stat/ru/browsers.gif?id=49;id=50;id=55;id=54;period=month;relgraph=yes;graph=yes пока будет тех 2% пользователей IE6-7 , мои сайты будут их поддерживать (не во всей красе ествественно, но на уровне работоспособности точно). А то так из-за браузера можно и клиента потерять.

      1. Макс

        Просто верстать под ИЕ6 очень сложно. А новоявленные верстальщики этого делать вообще не умеют. Вот они и будут находить миллион причин почему этого не стоит делать, какие они умные а все остальные глупые, переходить на личности и т.п. 
        И статистика под ИЕ6 для разных сайтов бывает очень разной. На некоторых сайтах до сих пор сидит около 5% пользователей с ИЕ6. В основном это старшие люди, которым все новые технологии побоку. Так что мне, просто забить на 5% посетителей среди которых вполне могут быть ваши родители и бабушки с дедушками?
        И зря говорят что ИЕ6 тормозит сейчас веб. Веб он тормозил раньше, сейчас это в прошлом. На данный момент есть невероятное количество javascript которые добавляют новые возможности html5 и css3 в ИЕ6.

        1. SelenIT

          SelenIT

          …javascript которые добавляют новые возможности html5 и css3 в ИЕ6.

          Нет таких, не обманывайте себя, чудес не бывает. Все эти скрипты добавляют лишь ограниченную имитацию возможностей HTML5 и (особенно) CSS3 ценой кучи глюков и тормозов. А поскольку старые IE и так живут, как правило, на старом же железе, юзер, скорее всего, тупо не дождется, пока его несчастный браузер отвиснет после энной минуты инициализации этих красивостей, плюнет и уйдет с сайта, так и не заполнив ни единой формы заказа. Т.е. такая горе-поддержка старья с практической точки зрения немногим лучше их полного игнора. В отличие от аккуратной «изящной деградации», позволяющей юзеру, пусть не супер-пупер-мегаудобно и гламурно, зато быстро, без лишних красивых слов и розовых соплей, перейти-таки к этой форме заказа и заполнить ее. Особенно как раз людям, далеким от технологий и не способным оценить их (иначе они не сидели бы на старых IE), которым нелегко менять старые привычки.

          Возможно, этим и отличаются мастеров от «мастеров»: вторые тратят время на героическое и порой поистине виртуозное преодоление трудностей, которых вполне можно было бы избежать, а первые просто решают задачи, зарабатывая деньги и помогая заказчику зарабатывать их. И тем самым экономят время на изучение действительно нового и полезного.

          Сама философия HTML5 призывает нас решать реальные задачи доступными средствами, не отвлекаясь на пускай прикольные, но по факту мало- или вообще бесполезные чисто вспомогательные штуковины.

          1. Макс

            Я постоянно использую IE9.js и иногда PIE. Никаких глюков, тормозов и прочаяя не наблюдаю уже более чем на 20 сверстаных с их помощью сайтах. Я говорю из личного опыта, а не теории. JS добавляют те возможности, которые поддерживаются другими браузерами но не поддерживаются старыми ИЕ и работают только на старых ИЕ. Также IE9.js устраняет кучу ошибок старых ИЕ, и значительно облегчает верстку. Это реальный опыт меня как верстальщика, а не теоретика. Если руки ростут из правильного места, то js работает как надо. Если у Вас есть конкретные указания на глюки IE9.js или PIE укажите на них, иначе это пустая болтовня очередного великого специалиста.
            Вы правильно написали: некоторые просто зарабатывают деньги, совершенно не понимая того что они делают, втюхивая клиенту некачественный продукт и беря за это высокую оплату. А другие постоянно улучшают свои знания и стараются сделать продукт качественным. Обычно, после таких зарабатывателей приходится очень много всего переделывать. И клиенты обычно уходят очень быстро от таких вот зарабатывателей к нормальным веб-мастерам.
            В теме кстати вообще не рассмотрена проблема некачественной верстки. А ее просто невероятное количество. Все эти школьники которые кричат о командах великих специалистов с большим опытом уже реально задолбали.

            1. SelenIT

              SelenIT

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

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

              1. Макс

                Попробуйте поюзайте их в деле. Думаю понравиться и не сможете отказаться до тех пор пока ИЕ не вымрет как динозавры.

                1. SelenIT

                  SelenIT

                  Спасибо за совет. Если нужда заставит делать нехитрую «визитку» для глухого к доводам разума заказчика, упирающегося рогом в круглые уголки с тенями начиная от IE5.5 во что бы то ни стало — воспользуюсь обязательно.

                  Но всё же, с какими заказчиками выгоднее иметь дело — с зацикленными на том, чтобы навязать 5–7% аудитории то, что ей непривычно и не нужно (вместо скорости и доступности), или с теми, кто рассчитывает получить отдачу и от >12% пользователей «Оперы Мини»? Конечно, где-то тут рядом упомянутый Амазон может себе позволить и одно, и другое, да еще и свои планшеты выпускать — но для этого ему сперва надо было стать Амазоном (и кстати, тени на нем сделаны картинками:–).

                  1. Макс

                    С зацикленными заказчиками лучше вообще не иметь дел. Я просто уже на автомате вставляю IE9.js в верстку. Сначала боялся, пробовал, искал глюки. Но после того как опробовал на разных сайтах, убедился что можно использовать. А поддержку 7-й версии делаю на минимуме. Главное чтобы не разлазилось, читалось и почти все функции работали. Делать попиксельную верстку для старых ИЕ это конечно идиотизм который должен оплачиваться очень дорого. Но если заказчик хороший человек, нормально платит то почему нет? Любой каприз за деньги клиента.

            2. klierik

              если разговор о 20ти сайтов-хомяков то конечно, там IE9.js в самый раз :D
              во всех остальных случаях где проекты поболе будут (хотя бы одна верстка займет порядка 160 часов) — там эти приблуды идет лесом, ибо убьют желание клиента приобрести что либо.
              Так что да — для мелочи это спасает, в более серьезных проектах они делают только зло.
              И это проверенно опытом. И надеюсь за сим не последует слов про руки, ноги и мозги :)
              учитывая опыт за последний год с клиентами из европы, сша, канады, австралии, голандии и т.д. не было ни одного прицедента где бы graceful degradation был отвергнут.
              так что если браузер чего-то не умеет — это не значит что его учить этому надо. 
              FF,Chrome, Opera — отнюдь далеко не блещат отлиным рендерингом, но почему то на ИЕ больше всего шишек? елси в случае когда надо сделать полюбому — под ИЕ сделать реально, то под Оперу, к примеру, хренушки.

              1. Макс

                Верстка на 160 часов? Месье знает толк в извращениях. О CMS не слышали? Почитайте, будет полезно.
                160 часов это 22 рабочих дня. Тут или Вы преувеличиваете, или вообще не умеете верстать. У Вас что, все странички это сплошной html+css и никакого php? Тогда да, сайт можно верстать 22 дня.
                Давайте факты в студию. Конкретные случаи, примеры и глюки. А то все это просто пустая болтовня. Проверено опытом? Показывайте свой опыт, обсудим. Вы тут постоянно утверждаете что он очень большой. Ну так покажите его, похвастайтесь. А мы позавидуем.
                 

                1. klierik

                  хмъ, кажется теперьв се стало на свои места.
                  мы ведем диалог на абсолютно разных уровнях. в данный момент изза того что у тебя нету опыта работы с большими проектами.
                   
                  по поводу того умею ли я верстать аль нет, могут говорить мои работодатели.
                   
                  по поводу часов. 160 часов — да, это 1 месяц.
                  Буду более предметным. Расмотрим 2 ситуации:
                  1. Задача: создать тему под Magento CMS. На входе имеем, допустим, PSD. На выходе должны получить рабочую тему со всеми статичными блоками и настройками в админке. Колво старниц обычное (привожу для примера только освновные, дочерние расписывать долго):

                  Главная
                  Подкатегория
                  Страница продукта
                  Карчина
                  Чекаут
                  Мой акаунт

                  Верстка проводится на базе существующего функционала и на базе существующих темплейтов.
                  Если быть очень кратким то как-то так.
                  2. Вариант 2. Создание разметки, которая состоит из совокупности блоков, для Back-end UI интерфейса. Среди главных особеностей это:

                  Максимальная производительность и минимальный общий вес станицы
                  На этапе разработки не известно как будет выглядеть конечный результат
                  Не известно какой блок в какой части страницы может быть.
                  Не известно какой блок может попасть во-внутрь какого блока
                  Каждый блок может иметь N-ое кол-во внешних видов
                  Каждый блок и/или его элемен может и будет использован внутри другого блока
                  Учитывая все выше сказанное верстка не должна ломатся и/или как-то ломать рядомстоящие блоки
                  Каждый блок должен быть самодостаточным, его видоизменение или изменение его свойст/параметров/возможностей не должно влиять на окружающие его блоки
                  Ну и как бонус — надо предусматреть режим отображения всех блоков в режиме RTL

                  Я почти уверен что с чем-то подобным тебе не доводилось сталкиватся. То что тебя так пугает 160 часов говорит лишь о том что на данный момент ты верстал только мелкие проекты.
                  Я искренне желаю тебе рости выше и повышать квалификацию ;)

                  1. Макс

                    Бла-бла-бла.
                    После того как ВЫ перешли на ТЫ, и не ответили на мои вопросы, мне тоже все стало ясно.
                    Рассказывать байки, это любимое дело в инете.

                    1. klierik

                      да я как бы нискем на вы и не говорю. с чего бы это? яникому ничего не обязан.
                      дело в том то я описал откуда берутся эти 160 часов, но в силу узкого груговора тебе, на текущем этапе, не понятно очем вообще идет речь )
                      и где ты выдишь тут байки?

                    2. 4ega

                      мы на прошлый проект потратили более 200 часов (только фронт-енд) так что 160 эт норм))

                2. SelenIT

                  SelenIT

                  В 2012 году веб ограничивается сферой шаблонных сайтов-визиток и каталожиков на типовых CMS? Или иногда бывает необходимость перейти от простого к сложному?

      2. nerv

        to scarzie:
        да, я заметил, что начал с Вы, а потом перешел на Ты. Исправляться не стал. Буду БЕСкултурно тыкать : )

        если верстка работает в IE6, то она и автоматом работает во всех остальных старых браузерах

        сказочник )

        IE6 ошибок не прощает

        xml ошибок не прощает ;)

         Также, учит таким мелочам, что в JavaScript правильнее писать: var asd = {"class": "left" } , а не var asd = {class: "left" }

        вообще бред

         Отлично учит expression, фильтрам,

        которые нах. не нужны, есть только в IE и в скором времени уйдут в небытие
         
        С другом что ль пришел? :D
         
        to Макс:

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

        т.е. автор статьи — "новоявленный верстальщик"?

        И зря говорят что ИЕ6 тормозит сейчас веб. Веб он тормозил раньше, сейчас это в прошлом.

        ребята, Вы меня каждым предложением умудряетесь удивлять :) Как раз раньше он был "свежей струей" (в какой то степени)

        На данный момент есть невероятное количество javascript которые добавляют новые возможности html5 и css3 в ИЕ6.

        это называется "ставить заплатки". Далеко не всегда и не везде их можно поставить. Попробуй добавь FileReader в IE6.
         
         
         

        1. scarzie

          да, я заметил, что начал с Вы, а потом перешел на Ты. Исправляться не стал. Буду БЕСкултурно тыкать : )

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

          если верстка работает в IE6, то она и автоматом работает во всех остальных старых браузерах

          >>>сказочник )
          как раз таки не сказочник.  проверено не одноразово.

          xml ошибок не прощает 

          теперь буду верстать на xml ;)

          С другом что ль пришел? 

          а ты думал))
          Да хрен с ним, с шестым, но для 7-ого то можно сделать хоть минимальную читаемость? Я вот не понимаю, часто чтобы хоть БАЗОВО исправить ошибки для старых IE достаточно поставить zoom:1; position:relative; или просто выставить font-size , почему бы этого не сделать?

  31. Александр

    В статье вы упомянули базу с шаблонами, можете дать ссылку на неё?

    1. psywalker (Автор записи)

      Вы имеете ввиду вёрстку под CMS?

      1. Александр

        Ну вы писали что главное практика. Может  вы знаете где найти базу с шаблонами на которой можно тренироваться?

        1. psywalker (Автор записи)

          Берите бесплатные макеты в сети, верстайте и выставляйте свои работы на обсуждения на форумы.

  32. Sam Dark

    Веб-мастер — это всё-таки немного не то. Тот, кто описан как «веб-мастер» на самом деле clientside-разработчик.

    Кстати, на западе вообще нет понятия «верстальщик». Такая квалификация редко бывает востребована. Оно и понятно: зачем нанимать двух человек, которые ещё и будут бороться друг с другом, когда можно обойтись одним и получить приличную экономию времени.

    В США и европе есть clientside-разработчики и есть верстающие дизайнеры. Как правило, они уровнем не сильно хуже clientside-разработчиков.

    Про английский согласен. Про то, что первоисточники всегда на английском — нет. Если посмотреть на тот же Smashing Magazine, довольно часто русские авторы шокируют давно известными в рунете вещами англоязычное сообщество. Это, конечно, не отменяет того, что материала на английском действительно больше.

    Также стоит отметить, что культура ведения бизнеса в США и европе формировалась гораздо дольше, поэтому ситуации вроде «кидалова» встречаются редко. Ну и платят получше.

    Про редактор странный совет. Я никогда не работал без подсветки и дополнения кода. Тем не менее, скорость печати и знания нормально так подросли.
     
    Kool
    Ничего не становится печально. Я родился и живу в Воронеже. Тем не менее, с удалённой веб-разработкой тут всё нормально. Удалённая постоянка не такое редкое явление. Особенно если выучить английский.
    На гитхабе показывать — это хорошо. Контент для своего сайта найти легко. Достаточно писать о том, что тебе интересно, выкидывая при этом явно личное.

    1. Макс

      А может не надо использовать чужие слова? Суть в том, что на русском, больше знают что такое веб-мастер а не clientside или фронтенд. Так зачем усложнять жизнь себе и другим? Рунет очень сильно отличается от запада и востока, так что надо использовать то что ближе к рунету а не другим регионам, если Вы обащаетесь с рунетом.
      А Вы хоть раз видели верстку шаблона для движка, которую делал программист и которую сделал нормальный верстальщик? Разницу видели? После того как шаблон верстает программист, там практически ничего невозможно нормально исправить, такой бред иногда пишут что просто поражаешься. Вот например, запихнуть css в php-файл! Файл styles.php, в котором кроме стилей ничего нет. ЗАЧЕМ? Или любимое так всеми программистами !important, которое они всюду пихают. Или безсмысленное вложение десятков div-тегов друг в друга. Или использование html5 тегов не по назначению. Каждый должен делать свою работу. И если дизайном занимается не дизайнер, версткой не верстальщик то естественно что конечный продукт получается плохого качества.

      1. Sam Dark

        Какие-то плохие программисты вам попадались. Сочувствую.

        1. Макс

          А Вы посмотрите на шаблоны и расширения для joomla. Там такое почти везде. Самое интересное что даже платные шаблоны и те сделаны  программистами неумеющими верстать. Даже картинку и ту не могут ужать нормально, что уж тут говорить про верстку. А как долго потом сие чудо грузиться и сколько ошибок показывает при валидации…

          1. Sam Dark

            Вообще и сама Joomla этим страдает.

  33. Chew

    psywalker, выражаю вам огромную благодарность за эту статью. Кое-что встало на свои места. Некоторые метания в плане "фриланс? или офис?" поутихли — спокойно занимаюсь тем, что есть. И разрешился вопрос о встречах с коллегами. Дело в том, что я живу в небольшом провинциальном городке и как таковых веб-мастеров тут никому не нужно (а кто есть в моём городе так и не удалось обнаружить, может, получится отыскать их на вышеупомянутом форуме:) ), а пока ты не приблизился хотя бы к младшему разработчику, нечего и делать в более крупных городах. Спасибо за идею с просмотром видео и решению задачек в рамках форума :) Теория теорией и практика практикой, а (чисто по-человечески) кому-то показать хочется, хочется командного обсуждения.
    Как ни странно, для меня самой большой трудностью является состояние спокойствия — не гнать себя впереди несущегося локомотива. Пока ты зелен, видишь вокруг множество интересного, а тут ещё и технологии шагают семимильными шагами — и ты зашиваешься, как будто боишься не успеть. Ты ещё только учишься ходить, а другие уже делают добротные вещи. Пока вижу один выход — игнорить эту свою жажду лететь со скоростью света, по возможности планировать.
    К тому, что уже есть в данной статье, хотелось бы посоветовать от себя несколько ресурсов, которые тоже очень люблю и рою время от времени)
    Ещё один неплохой форум для разработчиков под названием VINGRAD.
    Две обучаловки, в которых и теории и практики хватает — первая и вторая. Я прокачиваю свой скилл в javascript, помимо css и прочего необходимого, поэтому эти обучалки больше для джаваскриптеров. В первой и второй достаточно краткая теория и интересные задачки. В каких-то главах рассмотрены важные моменты, о которых узнаёшь только в процессе (от более опытных коллег, по следам от влетевших неожиданно граблей). По второй ссылке кроме js, есть еще HDOM, AJAX, CSS, HTML и их разветвления. Во второй ещё есть очень удобные таблички в справочниках, где можно отыскать необходимые свойства, методы.
    В плане изучения скриптовых языков я бы посоветовала английский источник, по которому и занимаюсь. Ребята предлагают BSL (Beginning Student Language) и программку DrRacket. Написано весьма доступным языком, не без шуток, постоянные примеры и задачки, на которых можно ставить эксперименты и становиться сильнее.
    Хочу пожелать всем новичкам усидчивости, хороших наставников и самое главное — увлечённости тем, что вы делаете. А мастерам — не останавливаться и совершенствоваться дальше:)

  34. Андрей

    Если у кого-то есть макеты в psd (особенно резиновые),  отправьте мне на почту. downhill@xakep.ru
    Заранее премного благодарен!!!

  35. klierik

    хмъ… учится мне еще да и учится, а то за рамки 
    Обычный верстальщик
    я толком не выхожу (
    спасибки, Макс, за стетайку ) пробежалося взглядом… Думается мне надо бы расширять свои знания :)

    1. psywalker (Автор записи)

      хмъ… учится мне еще да и учится, а то за рамки 

      Обычный верстальщик

      я толком не выхожу (

      Такая же фигня :)

  36. klierik

    ах да, по поводу сабжа,
    хочешь научится качественно верстать — верстай (с)

  37. Tatiana

    В очередной раз не дает покоя вопрос, как правильно организовать процесс обучения объемной информации. Тот же js,  лучше одним блоком изучать или разбавлять чем то еще?

    1. psywalker (Автор записи)

      Не знаю. Я например, не могу перейти к изучению второй технологии, не познав как следует первую. Т.е. я не могу браться сразу за несколько дел. Одним такой подход не нравится, а другим наоборот. Так что тут выбирать тебе:)

      1. Tatiana

        Речь о том что глубоко зарывшись в одну область не уделяешь время другой той же верстке, если месяц не писать код немного что ли навык теряется, а этих областей вагон, лично для меня это является проблемой ;)

        1. klierik

          я уже много лет кручусь в рамках HTML/CSS и толком за их рамки не вылажу, без надобности, и знаешь, меня это особо не напрегает.
          спустя много лет сейчас беру на себя задачи по js/jquery/prototype в той или иной мене и низкой сложности.
          но, заметь, я до этого работал в рамках html/css only почти во всех проектах.
          считаю такой подход одним и самых оптимальных, ибо набрав высокий скил в чем-то одном, можно расширять знания, а не смешивать их разными специальностями. и быть, по-сути, чеовеком-аркестром, коих аж дохрена.

          1. Tatiana

            А разработкой интерфейса в разделе работы кто-то еще занимается или сам?

            1. klierik

              не понял вопроса…

              1. Tatiana

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

                1. klierik

                  или не правильно соблюдаются этапы работы или одно из направлений перегружает другой.
                  Что бы оптимизировать работу с версткой можно её так же создавать поэтапно:
                  1. пишим только сухой HTML + контент
                  2. Пишим только иерархию классов (просто иерархия пустых классов, которая дублирует разметку)
                  3. и только потом стили наполняются правилами и графикой, описывается лейут, создается иерархия блоков и элементов итд и тп
                   
                  Что же касается дизайна — тут уж как муза прийдет, так он и будет готов. но все же мне кажется (!) что режим: нарисовать страничку — отверстать — нарисовать — отверстать — нарисовать — отверстать ….
                  будет утопительно. попробуй разбивать макеты на сеты. к примеру рисуешь сет для страниц связаных с Новостями:
                  1. Страница новостей (краткий вид)
                  2. Страница новостей (расширенный вид)
                  3. Страница поиска по новостя (фильтры)
                  4. Страница результата поиска по новостям
                  5. Страница новости
                  6. Страница новости с коментариями и рейтингом
                   
                  В общем как-то так. В таком случае создавая целый сет ты не будешь так часто прыгать из одного в другое и обратно.

                  1. Tatiana

                    Спасибо за помощь, теперь я думаю будет проще разложить работу по полочкам)

        2. 4ega

          познаешь JS и забудешь как "верстать" ) у меня теперь проблема как бы не написать лишний скрипт решающй проблему, которая решается с помощью html/css ))

          1. Tatiana

            Да это печалит, по не воле приходиться на себя брать другие роли так как являешься всем в одном лице)). Сейчас в нахожусь роли графического дизигнера..

            1. 4ega

              если веб-дизайнера тогда знания html и css очень важны (чтобы иметь представление о том как сложно будет воссоздать макет), а вот js постольку поскольку

              1. Tatiana

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

                1. klierik

                  если дизайнер знает азы верстки и понимает что реально реализовать а что через жопу — это золотой дизайнер. я таких очень редко встречаю. можно пересчитать на пальцах одной руки.

                  1. Tatiana

                    Скорее верстальщик знающий основы графики, да и для кода стараюсь больше времени уделять )

            2. klierik

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

  38. Максим

    Наставник эксперементы это все канечно здорово… В моем случае я обучился HTML за 8 дней и CSS магии за 14 дней, т.е. получил базовые знания и до сих пор совершенствую свои способности.

    1. 4ega

      8 дней очень мало, можно понять суть, обучиться основам… но упустить кучу нюансов… на которые сразу же укажет наставник)

  39. Макс

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

    1. klierik

      хорошо собранная верстка подходит в 99% случаев. 1% остается на адаптацию её под уникальные ситуации, как к примеру, лейаут.
      в остальных услаях достаточно быть хорошим верстальщиком не толком не знать про все остальное.
      быть человеком-аркестром — значит быть специалистом низкого уровня.

      1. Макс

        К чему это было написано? К CMS? Можно сделать шаблон не зная самой CMS и ее особенностей? Несчастный клиент…
        Вы считаете что достаточно уметь писать html и css а все остальное пускай делают другие? Или все остальное вообще ненужно? Никто не говорил о человеке-оркестре вообще! Их просто не существует в природе. Я говорил что надо разбираться также и в других областях, в областях смежных с версткой. О том же кстати говориться и в статье. Делая только одно и тоже, и не замечая смежных областей, никогда не станешь хорошим специалистом. Специалист потому и спец, что он отлично знает свое поле деятельности, но и понимает смежные области деятельности, хоть в них и не спец. 
        И ничего не мешает совмещать 2-3 смежные области деятельности, и делать качественный продукт. Например дизайнер-верстальщик, сео+верстка, юзабилити+дизайн и т.п. Я не говорю о программировании+дизайне, это конечно же нереально.
         

        1. klierik

          я не первый год верстаю, и по-сути меня мало волнует на какую CMS моя верстка будет вешатся.
          не было ни разу случая когда она не подошла бы ни под инвестную ни под кастомную СУК.
          и да — я считаю что знаний HTML/CSS достаточно что бы сверстать такой шаблон, который подойдет в 99% случаев. другое дело это уметь это сделать, так как надо в голове предугадать за ранее возможность поведения того или иного жлемента если он будет перемещен куда угодно. а соотвественно каждый отдельный блок страницы должен быть самодостаточным.
          и, кстати, клиент будет очень счастлив этому, так как это ему позволяет менять местами любые блоки в перемещать их куда угодно. да, возможно потребуется потом доработка, ибо предсказать 100% невозможно (имхо, у меня не получается), но то что доработки там будет на пару минут и не более — так это точно.
           
          подитожить могу следующее — что бы быть хорошим верстальщиком надо знать HTML/CSS достаточно хорошо. Что бы сверстать макет не имея представления на чем он будет подниматся — достаточно знаний HTML/CSS.
          Знание элементарных основ серверного программирования — это, конечно, будет плюсом, но не является обазательным что бы на выходе был качественный продукт.

  40. Макс

    Да Вы вообще понятия не имеете о чем говорите. Это ппц полный. Для каждой CMS, делается верстка специально под нее. И никак иначе. Там используются свои стили, своя вложенность тегов, свои правила создания шаблонов и много всего разного. Это все уникально для каждой CMS. И когда кто-то пишет подобную ерунду, я понимаю что человек вообще не в теме. 

    1. 4ega

      еслм говорить о чистой веб-разработке, то "верстать" под CMS это все равно что ровнять ногу под обувь "ага у вас 45 размер а сапоги 41? Ничего, обрежем!"
      Разметка должна быть в первую очередь валидной и семантически правильной, а уж бэк-энд должен поднапрячся и динамически воссоздать качественный код
      Ну а если создание шаблонов — сама цель, тогда пахайте на бэк-энд)

    2. Olga

      Полность с вами согласна!!!  Все так и есть.

  41. Радион

    Спасибо огромное, с интересом прочитал =). Вспомнил себя… Правдо я никогда не сидел на форумах, много времени уделял теории, то есть читал и читал, так как интересующие меня вопросы все были заданы, и google всегда был в помощь. Особенно редактор, и на котором продолжаю сидет очень долгое долгое время notepad++. По началу всё сидел ручками прописывал от вёрстки к вёрстке, потом уже узнал что есть на свете zen coding. Так и работаю совмещаю блокнот с zen coding. Ещё раз спасибо
     
    2klierik      А вот насчёт этого вы не правы, работаю долгое время с cms Битрикс. И вёрстка под него своя.

    1. klierik

      То есть ты хочешь сказать что в случае если вёрстка не была адаптированна заранее под конкретную CMS то ее невозмодно использовать?
      Да ну ладно, смех ейбогу )
      Был опыт — я писал макет изначально без заточки под CMS. Потом как оказалось будет использована Magento CMS. Часть была использована как есть, остальная часть подтверглась попросту переименованию классов ) Год спустя было принято перенеси проект на CMS Битрикс. Используя темплейты сухойразметки программист её достаточно легко и быстро перенес на Битрикс.
      Так что незачем мне рассказывать о том что верстку обязательно точить под CMS, и что в другом случае она попросту не подойдет.

  42. Daniil

    Я знаю только HTML и CSS,на среднем уровне знаю точно! Учить, что то еще у меня пока что просто напросто нет времени, учеба! Мне 15 лет!

    1. chiffenok

      самое время! потом у тебя его станет еще меньше!) чем старше становишся тем меньше свободного времени

    2. klierik

      сколько ты времени в день вкладываешь в html/css и сколько лет вообще этим занимаешься?

  43. LeD4eG

    Определённо очень полезная статья!действительно животрепещущий вопрос, требущий всестороннего освещения! Отличное начало! Спасибо за статью! Я уже занимаюсь версткой около 2 лет. За Вашим блогом слежу с самого его появления. До пунктов указанных Вами доходил сам, но работы нет и наставника тоже)) Писал и на форумах, и лично обладателям блогов по верске. Жаль, что пункты (не считая тех, что об обязательности чтения и самоорганизации) не всегда достижимы. Например, решив, что теоритические знания можно совершенствовать вечно, к тому же, верстка бесплатная питания не обеспечит, уволился с должности сис.админа со словами "Если сейчас не начну, то никогда не начну, пора "в поля""….Первые 4 месяца я сохранял бодрость духа, но уже прошло 7 месяцев…)))В полях малоопытные совсем не нужны. Но это уже мои субъективные, возможно проблемы! В целом, статья очень полезная и содержательная! В избранное! Пригодится советовать к прочтению на форумах)

  44. Sergey

    Здравствуйте, доброго времени суток всем!
    Присоединяюсь к многочисленным положительным отзывам о этой статье! Я не совсем новичек, но и не сказать что гуру. Считаю, что лучше насильно сам себя относить в сторону новичков — так всегда есть стимул развиваться дальше, учить новое, не забывать имеющееся.
    У меня, кстати есть небольшой опыт работы с Photosop и с Fireworks. Не смотря на многочисленные отрицательные отзывы о этой (Fireworks) программе, полагаю, что разработчики из компании Adobe не зря на протяжении нескольких лет тратят силы, время и огромные суммы денег на эту программу.
    Мне тоже очень понравилась идея о обращении к гигантам HTML-верстки за помощью. Пожалуйста, если кто-то может стать наставником для меня в океане HTML-верстки, отзовитесь!
    Я гарантирую — огромное желание работать, работать много, изучать новые техники, приемы, трюки, почтительное отношение к мастерам!
    С уважением, Сергей
    Brizgalov@gmail.com

  45. Надежда

    Статья хорошая. Примерно таким путём пытаюсь двигаться. Вёрстку обожаю, наверно интереснее работы не существует. Раз у Вас в школе не давалась математика, а у меня это был любимый предмет, то у меня тоже есть шанс стать профи в этом деле благодаря интересу и трудолюбию! :))) Вот только мужчинам так просто забросить всё и заниматься круглыми сутками, а у женщин трудность в том, что надо еще вести домашнюю работу, готовить, рожать и воспитывать детей, да и без живого общения женщины не могут, а если общение живое, то и привести себя в порядок хочется, на что тоже масса времени… Для меня самая большая трудность — расставление приоритетов, ведь важно всё это.

  46. Иван

    Не хотелось бы врываться в уютный чатик, но уж извините. Статья позитивная и придираться не хочется, но — имхо — если бы автор играл в дартс, дротик уже летел бы в окно. И черт бы с ним, только люди верят и получается та картина, которая сейчас получается в нашей больнице. Вот почему:
    Нельзя брать две профессии и глаголить-де одна лучше другой. Тем более, что специфика у профессий разная. Веб-мастер это "делаю все, в чем наблюдается потребность", а верстальщик это более узкая специализация.
    Описанные проф. навыки веб-мастера, кстати, соответствуются начинающего клиент-сайд девелопера. Веб-мастер, раз его противопоставлять верстальщику, это: (в первую очередь) админки, (во вторую) php/pyhon/etc и html+css+jquery (не js) — все на уровне ниже среднего (для специалиста с тем же опытом в годах); т.к. вертальщик за пять лет верстки, собственно, пять лет верстает, скриптер — скриптует, кодер — (грубо говоря) ковыряет админку. А веб-мастер всего по чуть-чуть (заодно и поддизайнивает, в отличие даже от фронт-эндера) и каждый стек технологий знает — сравнительно — плохо. Веб-мастер — человек, который позволяет экономить на специалистах, рабочая лошадка чистой воды. Может по деньгам получать больше, чем один отдельно взятый специалист. Для веб-мастера, на минутку, нужно знаение флеша на почти нулевом добавить.
    А вот верстальщик — специалист с узкой областью ответственности. Для верстальщика сходу включу в список svg и wai-aria. Если бы оставил html4, то и vml вписал. Вычеркну xhtml — он мертвый; xhtml2, соотв., писать не буду. Я бы еще xslt учел, но к фронт-эндеру (о котором в статье не слова). И жить верстальщику без pure js и dom, порой, очень невесело, но с ними он — подчеркну, что при собственном желании — становится клиент-сайдером и в html/css потихоньку теряет сноровку.

  47. Pavel

    Ну, прежде всего, спасибо за статью. А далее я позволю себе немного вас, дорогой Автор, покритиковать. Сами же писали, критика полезна ;). Или что-то вроде этого.

    И так, для начала хочу заверить всех, что путь избранный одним человеком, для другого может оказаться настоящим болотом. Но кое в чем соглашусь. На своем примере скажу что книжки и эксперименты — это самое важное. Эти две вещи (а в большей степени последняя, а первую может заменить сайт со спецификацией или документацией) при желании способны сделать из вас настоящего монстра, разумеется, в хорошем смысле. Хотелось бы так же отметить, что я принебрегал форумами и блогами, стараясь разобраться в ситуации самостоятельно, методом проб и ошибок. Лишь только в тех случаях, когда время не позволяло размышлять, забрасывал удочку в интернет. Так же не стоит пологаться на суд коллег, ведь кто-то посоветует хорошо, а могут ведь и ошибится. Хорошо понимая специфику и получая опыт делом, вы можете легко обходится без посторонних советов даже на раннем этапе. Остальные описанные методы в познании, в частности для меня, вообще не имели никакого значения. А про редактор без подстветки, как я себе представляю, для меня было бы равно мазахизму, ибо подсветка позволяла проще ориентироваться в коде и находить ошибки, не забивая зрительную память символьным шумом. Ну, как я выше говорил, каждому свое. Вы, Автор, приподнесли фундамент новайсам, и за это Вам спасибо.

    Теперь поддержу предыдущего постера на счет понятий "верстальщик" и "веб-мастер". Я считал, что выражение "веб-мастер" уже давно кануло в лету по одной простой причине. Текущее развитие технологий не позволяет содержать в голове сразу все их, скажем так, в хорошем состоянии. А собственно, ведь это и подразумевает данное выражение. И если верстальщики лет 6-7 назад еще верстали в табличках с минимальными напрягами в CSS, то сейчас, опять же в силу современных технологий, на эту породу фронтенд разработчиков накладываются более жесткие требования, а именно, не только хорошее знание уже расширенных HTML и CSS, но и JS в чистом виде (да-да, библиотеки призваны лишь облегчить жизнь, но настоящий разработчик должен знать не метаязыки а саму суть), кроме того, требуется фундаментальное понимание в разработке на языках серверной части и уверенность в графических пакетах. И это необходимый минимум! И кто же тогда в Вашем понимании сейчас должен быть веб-мастер? Сверхчеловек?! =) Я внесу некоторую ясность в понятие "веб-мастер" Дело в том что само по себе оно ровным счетом ничего не означает. То есть оно подразумевает, что человек занимается вебом, но что именно он делает, это уже додумывает для себя каждый сам. Я давно привык к тому, что из-за такой размазанности в понимании, и из-за людей, которые не знают кем себя назвать в силу своих расширенных в целом, но ограниченных по отдельным пункам, знаний, это выражение приобрело не очень хороший "привкус" не только в кругах разработчиков, но и у работодателей. Так что я бы не стал навязывать стереотипы новичкам.
    И так, вот и я свою ложку дегтя влил ). Желаю Вам, Автор, удачи! А новичкам успехов в освоении, и никогда ни перед чем не останавливаться.
     

  48. Ruterford

    Статью читал полдня,  открывая в новой вкладке все ссылки и разбираясь во всем написанном. Со всем согласен, тем более, что тоже прошел практически весь путь, однако довольно поверхностно — так как начинал помощником СЕОшника, потом увлекся контекстной рекламой, а сайты делал, в основном визитки и сателлиты. В верстке не силен, так как  почти всегда работал на CMS и верстать особо не приходилось — чаще просто перерасположить блоки, растянуть, сделать резинку… Сейчас приобрел домен с хостингом и решил сделать собственный сайт-визитку. (стоит отметить, что летом прошел у хорошего преподавателя курсы верстки и начальный курс PHP/MySQL). Помимо собственного сайта, есть множество идей — от мелочей, до глобальных проектов. В связи с этим — ищу наставников и соучастников. Кто знает, может выйдет сотворить нечто, что побьет рекорды соцсект по посещаемости. По крайней мере, один из моих проектов можно реализовать с гос-поддержкой, если грамотно к этому подойти.
    Итак. желающим взять в подмастерья, или просто составить компанию в разработках — пишите, предлагайте. Почту здесь светить не буду, она есть в профиле.

  49. Yauheni

    Давно я нечитал подобных статей. Эта сродни "Волшебного пендаля". Для меня как начинающего верстальшика достаточно интересна. Много полезных ссылок. Вот только одна порблема: без опыта работы не хотят никуда брать.

    1. Ольга

      Я когда начинала год назад, разослала резюме по e-mail в 20-25 веб-студий своего города. 2 компании откликнулись, в одной из которых я и работаю. Цена за удачу — 3 месяца бесплатных трудов, но зато появился опыт.

  50. Макским

    Все как обычно, человек более-менее преуспевший по относительно естественно сложившейся схеме развития, начинает выдавть эту схему как идеальную дорогу для изучения. Люди с похожей историей своего развития в данной сфере согласны, другие категорически нет.
    Лично меня сразу же убил первый пункт — знание английского языка, не просто, а чтобы можно было читать книги на английском по ВЕБ. Намного легче выучить все перечисленные языки по 3 раза, чем выучить английский, да так, чтобы читать различные книги про веб-программирование и т.п., включающие в себя сложную терминологию. Думаю данный пункт может остановить очень много новичков и не только…
    Конечно, я считаю что английский язык это необходимость, но если по каким то причинам человек не знает этого языка, то он может развится не хуже и не медленее других, а вполне возможно быстрее и лучше. Вообщем я бы смягчил этот рункт сделал бы его мене категоричным и провокационным.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ваш E-mail не будет опубликован

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.